/**
 * Campus Rangers International School - Custom Theme
 * Overrides Tenjin default blue theme with maroon/gold branding
 *
 * Color Palette:
 * --cr-maroon: #8B1538 (Primary)
 * --cr-maroon-dark: #6B0F2B (Darker shade)
 * --cr-gold: #D4AF37 (Accent)
 * --cr-gold-light: #F4D03F (Light accent)
 */

:root {
    --cr-maroon: #9E2040;
    --cr-maroon-dark: #7A1832;
    --cr-maroon-light: #B8304A;
    --cr-gold: #D4AF37;
    --cr-gold-light: #F4D03F;
}

/* ================================
   HEADER STYLING
   ================================ */
/* Keep original header color, just add maroon accent line */
.app-header {
    border-bottom: 4px solid var(--cr-maroon) !important;
}

/* Hamburger menu icon - maroon */
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    background-color: var(--cr-maroon) !important;
}

.app-header.header-shadow {
    box-shadow: 0 0.46875rem 2.1875rem rgba(4, 9, 20, 0.03),
                0 0.9375rem 1.40625rem rgba(4, 9, 20, 0.03),
                0 0.25rem 0.53125rem rgba(4, 9, 20, 0.05),
                0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03) !important;
}

/* ================================
   SIDEBAR STYLING
   ================================ */
.app-sidebar {
    background: #ffffff !important;
}

/* Sidebar headings */
.app-sidebar__heading {
    color: var(--cr-maroon) !important;
    font-weight: 600 !important;
}

/* Sidebar menu items */
.vertical-nav-menu li a:hover {
    color: var(--cr-maroon) !important;
}

.vertical-nav-menu li a:hover i {
    color: var(--cr-maroon) !important;
}

.vertical-nav-menu li.mm-active > a {
    color: var(--cr-maroon) !important;
    font-weight: 600;
}

.vertical-nav-menu li.mm-active > a i.metismenu-icon {
    color: var(--cr-maroon) !important;
}

/* Sidebar scrollbar */
.scrollbar-sidebar::-webkit-scrollbar-thumb {
    background-color: var(--cr-maroon) !important;
}

/* ================================
   PRIMARY BUTTONS
   ================================ */
.btn-primary {
    background-color: var(--cr-maroon) !important;
    border-color: var(--cr-maroon) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    background-color: var(--cr-maroon-dark) !important;
    border-color: var(--cr-maroon-dark) !important;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--cr-maroon-dark) !important;
    border-color: #5a0c24 !important;
}

.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--cr-maroon) !important;
    border-color: var(--cr-maroon) !important;
    opacity: 0.65;
}

/* Outline primary buttons */
.btn-outline-primary {
    color: var(--cr-maroon) !important;
    border-color: var(--cr-maroon) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--cr-maroon) !important;
    border-color: var(--cr-maroon) !important;
    color: #ffffff !important;
}

/* ================================
   SECONDARY/ACCENT ELEMENTS
   ================================ */
/* Links */
a {
    color: var(--cr-maroon);
}

a:hover {
    color: var(--cr-maroon-dark);
}

/* Focus states */
.form-control:focus {
    border-color: var(--cr-maroon) !important;
    box-shadow: 0 0 0 0.2rem rgba(139, 21, 56, 0.25) !important;
}

/* Selection highlight */
::selection {
    background-color: var(--cr-maroon);
    color: #ffffff;
}

::-moz-selection {
    background-color: var(--cr-maroon);
    color: #ffffff;
}

/* ================================
   TABS AND NAVIGATION
   ================================ */
.nav-tabs .nav-link.active {
    border-color: var(--cr-maroon) !important;
    color: var(--cr-maroon) !important;
}

.nav-tabs .nav-link:hover {
    border-color: var(--cr-maroon-light) var(--cr-maroon-light) transparent !important;
}

.nav-pills .nav-link.active {
    background-color: var(--cr-maroon) !important;
}

/* ================================
   CARDS AND WIDGETS
   ================================ */
.card-header {
    border-bottom-color: rgba(139, 21, 56, 0.1);
}

.widget-content-wrapper .widget-heading {
    color: var(--cr-maroon);
}

/* ================================
   DROPDOWNS
   ================================ */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--cr-maroon) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(139, 21, 56, 0.1) !important;
    color: var(--cr-maroon) !important;
}

/* ================================
   TABLES
   ================================ */
.table thead th {
    border-bottom-color: var(--cr-maroon);
}

.table-hover tbody tr:hover {
    background-color: rgba(139, 21, 56, 0.05);
}

/* DataTables styling */
table.dataTable thead th,
table.dataTable thead td {
    border-bottom-color: var(--cr-maroon) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--cr-maroon) !important;
    border-color: var(--cr-maroon) !important;
    color: #ffffff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(139, 21, 56, 0.1) !important;
    border-color: var(--cr-maroon) !important;
    color: var(--cr-maroon) !important;
}

/* ================================
   BADGES AND ALERTS
   ================================ */
.badge-primary {
    background-color: var(--cr-maroon) !important;
}

.alert-primary {
    background-color: rgba(139, 21, 56, 0.1);
    border-color: rgba(139, 21, 56, 0.2);
    color: var(--cr-maroon-dark);
}

/* ================================
   PROGRESS BARS
   ================================ */
.progress-bar {
    background-color: var(--cr-maroon);
}

/* ================================
   PAGINATION
   ================================ */
.page-link {
    color: var(--cr-maroon);
}

.page-link:hover {
    color: var(--cr-maroon-dark);
}

.page-item.active .page-link {
    background-color: var(--cr-maroon) !important;
    border-color: var(--cr-maroon) !important;
}

/* ================================
   FORM ELEMENTS
   ================================ */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--cr-maroon) !important;
    border-color: var(--cr-maroon) !important;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--cr-maroon) !important;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--cr-maroon) !important;
}

/* Select2 */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--cr-maroon) !important;
}

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

/* ================================
   LOADING/SPINNER COLORS
   ================================ */
.spinner-border {
    color: var(--cr-maroon) !important;
}

/* ================================
   CALENDAR/FULLCALENDAR
   ================================ */
.fc-button-primary {
    background-color: var(--cr-maroon) !important;
    border-color: var(--cr-maroon) !important;
}

.fc-button-primary:hover {
    background-color: var(--cr-maroon-dark) !important;
    border-color: var(--cr-maroon-dark) !important;
}

.fc-button-primary:not(:disabled).fc-button-active,
.fc-button-primary:not(:disabled):active {
    background-color: var(--cr-maroon-dark) !important;
    border-color: var(--cr-maroon-dark) !important;
}

/* ================================
   MODALS
   ================================ */
.modal-header {
    border-bottom-color: rgba(139, 21, 56, 0.1);
}

.modal-footer {
    border-top-color: rgba(139, 21, 56, 0.1);
}

/* ================================
   WIZARD/STEP INDICATOR
   ================================ */
.sw-theme-default > .nav .nav-link.active {
    color: var(--cr-maroon) !important;
    border-color: var(--cr-maroon) !important;
}

.sw-theme-default > .nav .nav-link.done {
    color: var(--cr-gold) !important;
}

/* ================================
   TOAST NOTIFICATIONS
   ================================ */
.advanced-toast {
    background: linear-gradient(135deg, var(--cr-maroon) 0%, var(--cr-maroon-dark) 100%) !important;
}

.processing-modal-header {
    background: linear-gradient(135deg, var(--cr-maroon) 0%, var(--cr-maroon-dark) 100%) !important;
}

/* ================================
   USER PROFILE DROPDOWN
   ================================ */
.dropdown-menu-header-inner.bg-info {
    background: linear-gradient(135deg, var(--cr-maroon) 0%, var(--cr-maroon-dark) 100%) !important;
}

/* Logout button - gold accent to pop against maroon */
.dropdown-menu-header-inner .btn-pill {
    background-color: var(--cr-gold) !important;
    border-color: var(--cr-gold) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.dropdown-menu-header-inner .btn-pill:hover {
    background-color: var(--cr-gold-light) !important;
    border-color: var(--cr-gold-light) !important;
    color: #ffffff !important;
}

/* ================================
   GOLD ACCENTS (for special elements)
   ================================ */
.text-gold {
    color: var(--cr-gold) !important;
}

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

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

/* ================================
   CHART COLORS (if using Chart.js)
   ================================ */
/* Note: Chart colors need to be set in JavaScript */

/* ================================
   PRINT STYLES
   ================================ */
@media print {
    .app-header {
        border-bottom: 4px solid var(--cr-maroon) !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ================================
   MOBILE HEADER RESPONSIVENESS
   ================================ */
@media (max-width: 991.98px) {
    /* Stack header content vertically when dropdown is open */
    .app-header .app-header__content.header-mobile-open {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 15px !important;
        border-radius: 10px !important;
        top: 70px !important;
        overflow: visible !important;
        height: auto !important;
    }

    .app-header .app-header__content.header-mobile-open .app-header-left {
        width: 100% !important;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid #eee;
        text-align: center;
    }

    .app-header .app-header__content.header-mobile-open .app-header-left strong {
        display: block;
        font-size: 1rem;
        font-weight: 600;
    }

    /* Force show app-header-right - ONLY when dropdown is open */
    .app-header .app-header__content.header-mobile-open .app-header-right {
        width: 100% !important;
        margin-left: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 15px;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Force show all header-right children - ONLY when dropdown is open */
    .app-header .app-header__content.header-mobile-open .app-header-right > * {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-shrink: 0;
    }

    /* Show header-dots (language dropdown, switch back button) - ONLY when dropdown is open */
    .app-header .app-header__content.header-mobile-open .app-header-right .header-dots {
        display: flex !important;
        align-items: center;
    }

    /* Show the header buttons (user profile) - ONLY when dropdown is open */
    .app-header .app-header__content.header-mobile-open .app-header-right .header-btn-lg {
        display: flex !important;
        align-items: center;
    }

    /* Hide subscription expiry on mobile */
    .app-header .app-header__content.header-mobile-open .app-header-right > span.mr-2 {
        display: none !important;
    }

    /* Hide the extra hamburger menu inside dropdown */
    .app-header .app-header__content.header-mobile-open .app-header-right .header-btn-lg.d-none {
        display: none !important;
    }

    /* Simplify user profile display */
    .app-header .app-header__content.header-mobile-open .app-header-right .header-btn-lg .widget-content-wrapper > a > span.ml-2 {
        display: none !important;
    }

    .app-header .app-header__content.header-mobile-open .app-header-right .header-btn-lg .widget-content-wrapper > a > i.fa-angle-down {
        display: none !important;
    }
}