/* ============================================================
   ASU brand layer — دائرة الشؤون الادارية
   Loaded LAST, after core.css / theme-default.css / demo.css.

   The Sneat theme files have already been recoloured from the stock
   purple/amber palette to the ASU palette, so components (buttons,
   alerts, tables, charts…) are on-brand by themselves. This file adds
   the parts the template has no equivalent for: the ASU tokens, the
   navy sidebar with gold accents, the navy footer, and a few brand
   helpers — matching the ePortal look.

   Colour roles (ASU Corporate Identity Guidelines):
     ASU blue        #3D54A3   brand blue, primary
     blue tints      #6B80BA #9EA8D1 #C4CCE3 #E3E6F2
     ASU orange      #F5A61C   brand orange / gold accent
     orange tints    #F7BD54 #FAD18C #FCE3BA #FFF2DE
     deep amber      #C7780A   orange text/icons on light surfaces
     dark neutral    #241F21
     blue 700/800/900 #2E3E7C #232F5E #1C2647 (derived, dark surfaces)
   ============================================================ */

:root {
    /* ---- ASU corporate palette ---- */
    --asu-blue: #3D54A3;
    --asu-blue-700: #2E3E7C;
    --asu-blue-800: #232F5E;
    --asu-blue-900: #1C2647;
    --asu-blue-tint-1: #6B80BA;
    --asu-blue-tint-2: #9EA8D1;
    --asu-blue-tint-3: #C4CCE3;
    --asu-blue-tint-4: #E3E6F2;
    --asu-orange: #F5A61C;
    --asu-orange-tint-1: #F7BD54;
    --asu-orange-tint-2: #FAD18C;
    --asu-orange-tint-3: #FCE3BA;
    --asu-orange-tint-4: #FFF2DE;
    --asu-orange-deep: #C7780A;
    --asu-dark: #241F21;
    /* ---- roles used across the app ---- */
    --asu-navy: var(--asu-blue-800);
    --asu-navy-mid: var(--asu-blue-700);
    --asu-navy-light: var(--asu-blue);
    --asu-gold: var(--asu-orange);
    --asu-gold-light: var(--asu-orange-tint-1);
    --asu-surface: #f5f6f8;
    --asu-border: #e2e6f0;
    --asu-muted: #6b7897;
    /* ---- keep Bootstrap's own tokens in step ---- */
    --bs-primary: #3D54A3;
    --bs-primary-rgb: 61, 84, 163;
    --bs-warning: #F5A61C;
    --bs-warning-rgb: 245, 166, 28;
    --bs-link-color: #3D54A3;
    --bs-link-hover-color: #2E3E7C;
}

/* ============================================================
   Sidebar — navy surface, gold accents
   ============================================================ */
.bg-menu-theme {
    background-color: var(--asu-navy) !important;
    color: rgba(255, 255, 255, 0.72);
}

    .bg-menu-theme.menu-vertical {
        box-shadow: 0 0 18px rgba(35, 47, 94, 0.18);
    }

    /* brand block */
    .bg-menu-theme .app-brand {
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .bg-menu-theme .app-brand-text,
    .bg-menu-theme .menu-text {
        color: #fff;
    }

    .bg-menu-theme .app-brand-link .app-brand-text {
        color: var(--asu-gold-light);
    }

    /* links */
    .bg-menu-theme .menu-link,
    .bg-menu-theme .menu-horizontal-prev,
    .bg-menu-theme .menu-horizontal-next {
        color: rgba(255, 255, 255, 0.72);
    }

        .bg-menu-theme .menu-link:hover,
        .bg-menu-theme .menu-link:focus,
        .bg-menu-theme .menu-horizontal-prev:hover,
        .bg-menu-theme .menu-horizontal-next:hover {
            color: #fff;
        }

    html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item.open > .menu-link,
    .layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item.open > .menu-link,
    html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover,
    .layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover {
        background-color: rgba(255, 255, 255, 0.07);
    }

    /* icons carry the gold accent */
    .bg-menu-theme .menu-icon {
        color: var(--asu-gold-light);
    }

    /* active item */
    .bg-menu-theme .menu-item.active > .menu-link,
    .bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
        color: #fff;
        background-color: rgba(245, 166, 28, 0.16) !important;
    }

        .bg-menu-theme .menu-item.active > .menu-link .menu-icon,
        .bg-menu-theme .menu-inner .menu-sub > .menu-item.active .menu-icon {
            color: var(--asu-gold);
        }

    .bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) {
        background-color: rgba(245, 166, 28, 0.16);
    }

    /* the 4px marker on the menu edge */
    .bg-menu-theme .menu-inner > .menu-item.active:before {
        background: var(--asu-gold);
    }

    /* sub-menu bullets */
    .bg-menu-theme .menu-sub > .menu-item > .menu-link:before {
        background-color: rgba(255, 255, 255, 0.45) !important;
    }

    .bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before {
        background-color: var(--asu-gold) !important;
        border: 3px solid rgba(245, 166, 28, 0.25) !important;
    }

    .bg-menu-theme .menu-inner .menu-sub > .menu-item.active > .menu-link.menu-toggle {
        background-color: rgba(255, 255, 255, 0.07);
    }

    /* section headers */
    .bg-menu-theme .menu-header {
        color: rgba(255, 255, 255, 0.38);
    }

        .bg-menu-theme .menu-header:before {
            background-color: rgba(255, 255, 255, 0.28) !important;
        }

    .bg-menu-theme .menu-item.disabled .menu-link {
        color: rgba(255, 255, 255, 0.35) !important;
    }

    /* dividers, fade shadow, scrollbar */
    .bg-menu-theme hr,
    .bg-menu-theme .menu-divider,
    .bg-menu-theme .menu-inner > .menu-item.open > .menu-sub::before {
        border-color: rgba(255, 255, 255, 0.12) !important;
    }

    .bg-menu-theme .menu-inner-shadow {
        background: linear-gradient(var(--asu-navy) 41%, rgba(35, 47, 94, 0.11) 95%, rgba(35, 47, 94, 0));
    }

    .bg-menu-theme .ps__thumb-y,
    .bg-menu-theme .ps__rail-y.ps--clicking > .ps__thumb-y {
        background: rgba(255, 255, 255, 0.28) !important;
    }

    .bg-menu-theme .menu-inner > .menu-item.open .menu-item.open > .menu-toggle::before,
    .bg-menu-theme .menu-inner > .menu-item.open .menu-item.active > .menu-link::before {
        box-shadow: 0 0 0 2px var(--asu-navy);
    }

/* collapse toggle sitting on the sidebar edge */
.app-brand .layout-menu-toggle {
    background-color: var(--asu-gold);
    border-color: var(--asu-surface);
}

    .app-brand .layout-menu-toggle i {
        color: var(--asu-navy);
    }

/* ============================================================
   Topbar — white surface, navy text, gold hover
   ============================================================ */
.bg-navbar-theme {
    background-color: #fff !important;
    color: var(--asu-muted);
}

    .bg-navbar-theme .navbar-brand,
    .bg-navbar-theme .navbar-brand a,
    .bg-navbar-theme .navbar-nav > .nav-item > .nav-link:hover,
    .bg-navbar-theme .navbar-nav > .nav-item > .nav-link:focus {
        color: var(--asu-navy);
    }

.layout-navbar.navbar-detached {
    box-shadow: 0 1px 6px rgba(35, 47, 94, 0.06);
    border: 1px solid var(--asu-border);
}

/* ============================================================
   Footer — navy band with gold links
   ============================================================ */
.bg-footer-theme {
    background-color: var(--asu-navy) !important;
    color: rgba(255, 255, 255, 0.55);
}

    .bg-footer-theme .footer-link,
    .bg-footer-theme .footer-text {
        color: var(--asu-gold-light);
    }

        .bg-footer-theme .footer-link:hover,
        .bg-footer-theme .footer-link:focus {
            color: #fff;
        }

    .bg-footer-theme a:not(.footer-link) {
        color: var(--asu-gold-light);
    }

    .bg-footer-theme hr {
        border-color: rgba(255, 255, 255, 0.15);
    }

/* ============================================================
   Content surfaces
   ============================================================ */
.card {
    border: 1px solid var(--asu-border);
}

.card-header,
.card-title,
h1, h2, h3, h4, h5, h6 {
    color: var(--asu-navy);
}

.card-header .card-title {
    margin-bottom: 0;
}

/* table headers on a blue tint */
.table > :not(caption) > * > th,
.table thead th {
    background-color: var(--asu-blue-tint-4);
    color: var(--asu-navy);
    border-bottom-color: var(--asu-blue-tint-3);
}

/* ============================================================
   Brand helpers — use these instead of ad-hoc hex values
   ============================================================ */
.text-asu-blue {
    color: var(--asu-blue) !important;
}

.text-asu-navy {
    color: var(--asu-navy) !important;
}

.text-asu-gold {
    color: var(--asu-orange-deep) !important; /* readable on light surfaces */
}

.bg-asu-navy {
    background-color: var(--asu-navy) !important;
    color: #fff !important;
}

.bg-asu-blue {
    background-color: var(--asu-blue) !important;
    color: #fff !important;
}

.bg-asu-gold {
    background-color: var(--asu-gold) !important;
    color: var(--asu-navy) !important;
}

.bg-asu-tint {
    background-color: var(--asu-blue-tint-4) !important;
    color: var(--asu-navy) !important;
}

.border-asu {
    border-color: var(--asu-border) !important;
}

/* gold call-to-action, the ePortal "gold" button */
.btn-asu-gold {
    background: linear-gradient(135deg, var(--asu-gold) 0%, var(--asu-gold-light) 100%);
    border-color: var(--asu-gold);
    color: var(--asu-navy);
    font-weight: 600;
}

    .btn-asu-gold:hover,
    .btn-asu-gold:focus {
        background: var(--asu-gold-light);
        border-color: var(--asu-gold-light);
        color: var(--asu-navy);
        transform: translateY(-1px);
    }

    .btn-asu-gold:active,
    .btn-asu-gold.active {
        background: var(--asu-orange-deep);
        border-color: var(--asu-orange-deep);
        color: #fff;
    }

/* navy button — the dark counterpart of btn-primary */
.btn-asu-navy {
    background-color: var(--asu-navy);
    border-color: var(--asu-navy);
    color: #fff;
}

    .btn-asu-navy:hover,
    .btn-asu-navy:focus {
        background-color: var(--asu-blue-900);
        border-color: var(--asu-blue-900);
        color: #fff;
        transform: translateY(-1px);
    }

/* gold text/icons on light surfaces must use the deep amber */
.bx.text-warning,
.badge.bg-label-warning {
    color: var(--asu-orange-deep) !important;
}

.badge.bg-label-warning {
    background-color: var(--asu-orange-tint-4) !important;
}

/* ============================================================
   Login / account pages (page-auth.css)
   ============================================================ */
.authentication-wrapper .card,
.auth-card .card {
    border-top: 4px solid var(--asu-gold);
    box-shadow: 0 10px 30px rgba(35, 47, 94, 0.10);
}

    .authentication-wrapper .card h4,
    .auth-card .card h4,
    .auth-card .card h5 {
        color: var(--asu-navy);
    }

/* auth page backdrop */
.auth-wrapper {
    background: var(--asu-blue-tint-4);
}

.authentication-wrapper .app-brand-text {
    color: var(--asu-navy);
}

/* ============================================================
   Third-party widgets kept on-palette
   ============================================================ */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: var(--asu-blue) !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--asu-blue) !important;
}

/* No !important here: pages that pass confirmButtonColor/cancelButtonColor
   (e.g. red on a delete confirmation) must keep winning. */
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel {
    background-color: var(--asu-blue);
}

.swal2-styled:focus {
    box-shadow: 0 0 0 3px rgba(61, 84, 163, 0.35);
}

.ag-theme-alpine {
    --ag-alpine-active-color: var(--asu-blue);
    --ag-selected-row-background-color: var(--asu-blue-tint-4);
    --ag-header-background-color: var(--asu-blue-tint-4);
    --ag-header-foreground-color: var(--asu-navy);
    --ag-row-hover-color: #f2f4fa;
    --ag-border-color: var(--asu-border);
}

.note-editor.note-frame .note-toolbar {
    background-color: var(--asu-blue-tint-4);
    border-bottom-color: var(--asu-blue-tint-3);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--asu-blue) !important;
    border-color: var(--asu-blue) !important;
    color: #fff !important;
}