/* =====================================================================
   SoftEdu brand theme. The :root variables below are the SoftEdu default
   (navy + gold, from the logo). A school can override --brand-* via an
   inline <style> block injected in layout.php (see brandThemeStyle()),
   which recolours everything below automatically.
   ===================================================================== */
:root {
    --brand-primary: #1d1e6e;         /* navy */
    --brand-primary-dark: #16173f;
    --brand-primary-rgb: 29, 30, 110;
    --brand-secondary: #e3a81c;       /* gold */
    --brand-secondary-dark: #c08f17;
    --brand-secondary-rgb: 227, 168, 28;
    --brand-accent: #2c2f9e;          /* lighter navy for depth/gradients */

    /* Map Bootstrap's primary + links onto the brand */
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: var(--brand-primary-rgb);
    --bs-link-color: var(--brand-primary);
    --bs-link-color-rgb: var(--brand-primary-rgb);
    --bs-link-hover-color: var(--brand-primary-dark);
}

body {
    background-color: #f4f6f9;
    color: #23262f;
}

/* ------- Buttons (Bootstrap 5.3 reads these per-component vars) ------- */
.btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary-dark);
    --bs-btn-hover-border-color: var(--brand-primary-dark);
    --bs-btn-active-bg: var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-bg: var(--brand-primary);
    --bs-btn-active-border-color: var(--brand-primary);
}
/* Gold accent button/pill for brand highlights */
.btn-brand-gold {
    --bs-btn-color: #23262f;
    --bs-btn-bg: var(--brand-secondary);
    --bs-btn-border-color: var(--brand-secondary);
    --bs-btn-hover-color: #23262f;
    --bs-btn-hover-bg: var(--brand-secondary-dark);
    --bs-btn-hover-border-color: var(--brand-secondary-dark);
}
.text-primary { color: var(--brand-primary) !important; }
.bg-primary { background-color: var(--brand-primary) !important; }
.text-brand-gold { color: var(--brand-secondary) !important; }

/* ------- Layout ------- */
.sidebar {
    width: 240px;
    min-height: 100vh;
    position: sticky;
    top: 0;
    background: linear-gradient(185deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
    color: #fff;
}
.sidebar .fs-5 { color: #fff; font-weight: 700; letter-spacing: .3px; }
.sidebar .bi-mortarboard-fill { color: var(--brand-secondary); }
.sidebar hr { border-color: rgba(255, 255, 255, .18); opacity: 1; }
.sidebar .nav-link {
    color: rgba(255, 255, 255, .82);
    border-radius: 8px;
    font-weight: 500;
    padding: .55rem .8rem;
    transition: background-color .12s ease, color .12s ease;
}
.sidebar .nav-link:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.sidebar .nav-link.active {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--brand-secondary);
}

.main-content { min-width: 0; }
.main-content > header {
    box-shadow: 0 1px 0 rgba(var(--brand-primary-rgb), .08);
    border-bottom: 1px solid #e7e9f0 !important;
}

/* Below the md breakpoint the sidebar becomes an off-canvas drawer (hidden
   by default, toggled by the header's hamburger button) instead of a
   permanent 240px column, so the page content gets the full viewport width
   on a phone. */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1040;
}
@media (max-width: 767.98px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: min(240px, 85vw);
        height: 100vh;
        /* min-height: 100vh from the desktop rule above would make the
           drawer taller than the screen and clip the bottom nav items with
           no way to reach them — height + overflow-y here is what actually
           lets the drawer's own content scroll independently of the page
           behind it. */
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 1045;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 4px 0 16px rgba(0, 0, 0, .25);
    }
    .sidebar.show { transform: translateX(0); }
    .sidebar-backdrop.show { display: block; }
    body.sidebar-open { overflow: hidden; }
}

/* ------- Cards & tables ------- */
.card {
    border: 1px solid #e7e9f0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(23, 26, 47, .04);
}
.card-header {
    background-color: #fff;
    font-weight: 600;
    border-bottom: 2px solid rgba(var(--brand-primary-rgb), .12);
}
.card .table > thead th,
.table.table-light > thead th { color: var(--brand-primary); }
.card .table > thead th { background-color: rgba(var(--brand-primary-rgb), .035); }
table.table td, table.table th { vertical-align: middle; }

/* Dashboard stat tiles use Bootstrap's text-bg-*; primary now follows brand.
   Give the info tile a gold identity so the palette reads as SoftEdu. */
.text-bg-info {
    color: #23262f !important;
    background-color: var(--brand-secondary) !important;
}

/* ------- Nav tabs (e.g. Grade Scale levels) ------- */
.nav-tabs .nav-link { color: var(--brand-primary); }
.nav-tabs .nav-link.active { color: var(--brand-primary); font-weight: 600; }

/* ------- Forms / focus ------- */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .18);
}
.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
a { color: var(--brand-primary); }

/* ------- Login / guest pages ------- */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 55%, #0e0f2b 100%);
}
.card-login {
    width: 100%;
    max-width: 400px;
    border: none;
    border-top: 5px solid var(--brand-secondary);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
}
.card-login h3 { color: var(--brand-primary); font-weight: 700; }
.brand-badge {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-primary);
    color: var(--brand-secondary);
    font-size: 1.7rem;
    margin: 0 auto .25rem;
    box-shadow: 0 6px 16px rgba(var(--brand-primary-rgb), .35);
}