/*
 * Kodrat shared visual identity
 *
 * This file is the single public contract for brand colors across the
 * teacher dashboard, admin dashboard, public website, and Vue application.
 * Page-level styles should consume these variables instead of introducing
 * another primary color.
 */
:root {
    --brand-primary: #23934b;
    --brand-primary-hover: #19763c;
    --brand-primary-active: #145f31;
    --brand-primary-soft: #eaf7ef;
    --brand-primary-border: #b9dfc7;
    --brand-primary-rgb: 35, 147, 75;
    --brand-primary-contrast: #ffffff;

    --brand-secondary: #13308d;
    --brand-secondary-hover: #0d246d;
    --brand-secondary-active: #091b55;
    --brand-secondary-soft: #eef1fb;
    --brand-secondary-border: #c9d2ef;
    --brand-secondary-rgb: 19, 48, 141;
    --brand-secondary-contrast: #ffffff;

    --brand-focus-ring: rgba(35, 147, 75, 0.24);
    --brand-link: #19763c;
    --brand-link-hover: #145f31;
    --brand-sidebar: #123d26;
    --brand-sidebar-deep: #092a18;

    /* Bootstrap-compatible variables used by newer and legacy screens. */
    --bs-primary: #23934b;
    --bs-primary-rgb: 35, 147, 75;
    --bs-secondary: #13308d;
    --bs-secondary-rgb: 19, 48, 141;
    --bs-link-color: #19763c;
    --bs-link-hover-color: #145f31;
    --bs-focus-ring-color: rgba(35, 147, 75, 0.24);

    /* Compatibility aliases used by older public and dashboard styles. */
    --two-color: #23934b;
    --seven-color: #13308d;
    --btn-color: #23934b;
}

::selection {
    color: #ffffff;
    background: #23934b;
}

:where(input, select, textarea, button, a, [tabindex]):focus-visible {
    outline-color: var(--brand-focus-ring);
}

input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
    accent-color: var(--brand-primary);
}

/* Shared Bootstrap/legacy primitives. Semantic success, warning, and danger
 * classes are intentionally untouched. */
.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--brand-primary-hover);
    --bs-btn-border-color: var(--brand-primary-hover);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--brand-primary-hover);
    --bs-btn-hover-border-color: var(--brand-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--brand-primary-active);
    --bs-btn-active-border-color: var(--brand-primary-active);
    color: #ffffff;
    border-color: var(--brand-primary-hover);
    background-color: var(--brand-primary-hover);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    color: #ffffff;
    border-color: var(--brand-primary-active);
    background-color: var(--brand-primary-active);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--brand-primary-active);
    --bs-btn-active-border-color: var(--brand-primary-active);
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    color: #ffffff;
    border-color: var(--brand-primary-hover);
    background-color: var(--brand-primary-hover);
}

.btn-secondary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--brand-secondary);
    --bs-btn-border-color: var(--brand-secondary);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--brand-secondary-hover);
    --bs-btn-hover-border-color: var(--brand-secondary-hover);
    --bs-btn-focus-shadow-rgb: var(--brand-secondary-rgb);
    color: #ffffff;
    border-color: var(--brand-secondary);
    background-color: var(--brand-secondary);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    color: #ffffff;
    border-color: var(--brand-secondary-hover);
    background-color: var(--brand-secondary-hover);
}

.btn-outline-secondary {
    color: var(--brand-secondary);
    border-color: var(--brand-secondary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
    color: #ffffff;
    border-color: var(--brand-secondary);
    background-color: var(--brand-secondary);
}

.text-primary { color: var(--brand-link) !important; }
.bg-primary { background-color: var(--brand-primary-hover) !important; }
.border-primary { border-color: var(--brand-primary) !important; }
.badge-primary { color: #ffffff; background-color: var(--brand-primary-hover) !important; }
.link-primary { color: var(--brand-link) !important; }

.page-item.active .page-link,
.pagination .active > .page-link,
.pagination .paginate_button.current {
    color: #ffffff !important;
    border-color: var(--brand-primary) !important;
    background: var(--brand-primary) !important;
}

.page-link {
    color: var(--brand-link);
}

.page-link:hover,
.page-link:focus {
    color: var(--brand-link-hover);
}

.form-control:focus,
.form-select:focus,
.custom-select:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--brand-focus-ring) !important;
}

/* Metronic admin primitives. */
#kt_aside,
#kt_aside .brand,
#kt_aside .aside-menu,
#kt_aside .aside-menu-wrapper {
    color: #ffffff;
    background: linear-gradient(180deg, var(--brand-sidebar), var(--brand-sidebar-deep)) !important;
}

#kt_aside .aside-menu .menu-nav > .menu-item > .menu-heading .menu-text,
#kt_aside .aside-menu .menu-nav > .menu-item > .menu-link .menu-text,
#kt_aside .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-heading .menu-text,
#kt_aside .aside-menu .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link .menu-text {
    color: #dcebe1 !important;
}

#kt_aside .aside-menu .menu-nav .menu-item .menu-icon,
#kt_aside .aside-menu .menu-nav .menu-item .menu-arrow,
#kt_aside .aside-menu .menu-nav .menu-item .menu-bullet > span {
    color: #9fc8ad !important;
}

#kt_aside .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-heading,
#kt_aside .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link,
#kt_aside .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-heading,
#kt_aside .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link,
#kt_aside .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-heading,
#kt_aside .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-link,
#kt_aside .aside-menu .menu-nav .menu-item:hover > .menu-heading,
#kt_aside .aside-menu .menu-nav .menu-item:hover > .menu-link {
    background-color: rgba(35, 147, 75, 0.28) !important;
}

#kt_aside .aside-menu .menu-nav .menu-item.menu-item-active > .menu-link .menu-text,
#kt_aside .aside-menu .menu-nav .menu-item.menu-item-active > .menu-link .menu-icon,
#kt_aside .aside-menu .menu-nav .menu-item.menu-item-open > .menu-link .menu-text,
#kt_aside .aside-menu .menu-nav .menu-item.menu-item-open > .menu-link .menu-icon,
#kt_aside .aside-menu .menu-nav .menu-item:hover > .menu-link .menu-text,
#kt_aside .aside-menu .menu-nav .menu-item:hover > .menu-link .menu-icon {
    color: #ffffff !important;
}

#kt_aside .aside-menu .menu-nav > .menu-section .menu-text {
    color: #70d295 !important;
}

#kt_aside .brand-toggle i,
#kt_aside .brand-toggle .svg-icon svg g [fill] {
    color: #70d295 !important;
    fill: #70d295 !important;
}

.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-heading,
.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link,
.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-heading,
.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link {
    background-color: var(--brand-primary-soft) !important;
}

.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-heading .menu-text,
.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text,
.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-icon,
.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-text,
.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-icon {
    color: var(--brand-primary) !important;
}

/* Legacy teacher navigation remains structurally unchanged while adopting the
 * new master color. */
.sidebar_update {
    background-color: var(--brand-sidebar) !important;
}

.sidebar_update .menu-item.active > a,
.sidebar_update a.active {
    color: var(--brand-primary) !important;
}