/* ==========================================================
   WHEDU PRO
   Modern school ERP interface
   Bootstrap 5.3 foundation + original WHEDU styling
   ========================================================== */

:root {
    --wh-sidebar-width: 250px;
    --wh-topbar-height: 64px;
    --wh-primary: #2563eb;
    --wh-primary-dark: #1d4ed8;
    --wh-secondary: #7c3aed;
    --wh-accent: #14b8a6;
    --wh-sidebar: #0b1b44;
    --wh-sidebar-light: #132b62;
    --wh-page: #f5f7fb;
    --wh-card: #ffffff;
    --wh-border: #e5eaf2;
    --wh-text: #172033;
    --wh-muted: #718096;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
    background: var(--wh-page);
    color: var(--wh-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
}

a { text-decoration: none; }

.wh-app { min-height: 100vh; width: 100%; }

.wh-main {
    min-height: 100vh;
    margin-left: var(--wh-sidebar-width);
    min-width: 0;
    transition: margin-left .2s ease;
}

.wh-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--wh-sidebar-width);
    z-index: 1045;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 100% 0%, rgba(37,99,235,.24), transparent 32%),
        linear-gradient(180deg, var(--wh-sidebar-light), var(--wh-sidebar));
    color: #fff;
    overflow: hidden auto;
    scrollbar-width: thin;
}

.wh-brand {
    height: 76px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.wh-brand-logo {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--school-primary, #2563eb), var(--school-secondary, #7c3aed));
    color: #fff;
    font-size: 21px;
    box-shadow: 0 8px 22px rgba(37,99,235,.25);
}

.wh-brand-logo img { width: 100%; height: 100%; object-fit: cover; }

.wh-brand-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.wh-brand-text strong {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wh-brand-text small {
    color: #9eb5da;
    font-size: 10px;
    margin-top: 2px;
}

.wh-school-chip {
    margin: 11px;
    padding: 9px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 11px;
    background: rgba(255,255,255,.06);
}

.wh-school-chip-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.10);
    color: #bfdbfe;
}

.wh-school-chip strong,
.wh-school-chip small {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wh-school-chip strong { font-size: 11px; }
.wh-school-chip small { color: #8fa8d1; font-size: 9px; margin-top: 2px; }

.wh-nav {
    padding: 3px 10px 12px;
    flex: 1 1 auto;
}

.wh-nav-label {
    padding: 14px 7px 6px;
    color: #7f9bc7;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
}

.wh-nav-link {
    min-height: 39px;
    padding: 8px 10px;
    margin: 2px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #dbe8ff;
    border-radius: 9px;
    font-size: 12px;
    transition: all .16s ease;
}

.wh-nav-link > i:first-child {
    width: 18px;
    text-align: center;
    color: #9bb8e8;
    font-size: 14px;
}

.wh-nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,.075);
}

.wh-nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, var(--school-primary, #2563eb), #3b82f6);
    box-shadow: 0 7px 18px rgba(37,99,235,.28);
}

.wh-nav-link.active > i:first-child { color: #fff; }

.wh-nav-link .wh-arrow {
    font-size: 9px;
    transition: transform .18s ease;
}

.wh-nav-link.expanded .wh-arrow { transform: rotate(180deg); }

.wh-subnav {
    padding: 2px 0 4px 28px;
}

.wh-subnav a {
    min-height: 33px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    color: #a9bee1;
    font-size: 11px;
    border-left: 1px solid rgba(255,255,255,.10);
    transition: .15s ease;
}

.wh-subnav a:hover {
    color: #fff;
    background: rgba(255,255,255,.05);
}

.wh-subnav a i {
    width: 14px;
    text-align: center;
}

.wh-sidebar-bottom {
    padding: 8px 10px;
    border-top: 1px solid rgba(255,255,255,.09);
}

.wh-sidebar-bottom a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    color: #a9bee1;
    font-size: 11px;
    border-radius: 8px;
}

.wh-sidebar-bottom a:hover { background: rgba(255,255,255,.06); color: #fff; }
.wh-sidebar-bottom a i { width: 17px; text-align: center; }
.wh-sidebar-bottom .logout { color: #fca5a5; }

.wh-topbar {
    height: var(--wh-topbar-height);
    min-height: var(--wh-topbar-height);
    position: sticky;
    top: 0;
    z-index: 1035;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--wh-border);
}

.wh-icon-button {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #334155;
    display: grid;
    place-items: center;
    font-size: 18px;
}

.wh-icon-button:hover { background: #f1f5f9; }

.wh-breadcrumb-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wh-breadcrumb-title span { font-size: 14px; font-weight: 700; }
.wh-breadcrumb-title small { color: var(--wh-muted); font-size: 10px; }

.wh-topbar-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.wh-search {
    width: 230px;
    height: 37px;
    align-items: center;
    gap: 7px;
    padding: 0 8px 0 11px;
    border: 1px solid var(--wh-border);
    border-radius: 9px;
    background: #f8fafc;
}

.wh-search i { color: #94a3b8; }
.wh-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 11px; }
.wh-search kbd { font-size: 9px; color: #94a3b8; background: #fff; border: 1px solid #e2e8f0; }

.wh-header-brand-name{display:inline-flex;align-items:center;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;font-weight:700;color:#334155;padding:0 4px;}
.wh-notification-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    margin: 7px 0 0 -11px;
    border-radius: 50%;
    background: #ef4444;
    border: 1px solid #fff;
}

.wh-user-button {
    height: 40px;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 4px;
}

.wh-user-button::after { margin-left: 1px; }

.wh-avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #e8f0ff;
    color: var(--wh-primary);
}

.wh-user-copy {
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}

.wh-user-copy strong { font-size: 11px; }
.wh-user-copy small { color: #94a3b8; font-size: 9px; margin-top: 2px; }

.wh-content {
    min-height: calc(100vh - var(--wh-topbar-height));
    padding: 24px;
}

.wh-page-head {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 15px;
}

.wh-page-head h1 {
    margin: 2px 0 3px;
    font-size: 24px;
    font-weight: 750;
    letter-spacing: -.03em;
}

.wh-page-head p { margin: 0; color: var(--wh-muted); font-size: 12px; }
.wh-eyebrow { color: var(--wh-primary); font-size: 9px; font-weight: 800; letter-spacing: .16em; }

.wh-stat-card {
    min-height: 118px;
    padding: 17px;
    display: flex;
    align-items: center;
    gap: 13px;
    background: #fff;
    border: 1px solid var(--wh-border);
    border-radius: 14px;
    box-shadow: 0 4px 15px rgba(15,23,42,.035);
}

.wh-stat-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 19px;
}

.wh-stat-icon.blue { color: #2563eb; background: #eaf1ff; }
.wh-stat-icon.violet { color: #7c3aed; background: #f1eaff; }
.wh-stat-icon.green { color: #059669; background: #e6f8f1; }
.wh-stat-icon.orange { color: #ea580c; background: #fff0e7; }

.wh-stat-body { display: flex; flex-direction: column; }
.wh-stat-body small { color: #64748b; font-size: 10px; }
.wh-stat-body strong { margin-top: 1px; font-size: 25px; line-height: 1.1; }
.wh-stat-body span { margin-top: 3px; color: #94a3b8; font-size: 9px; }

.wh-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--wh-border);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(15,23,42,.035);
}

.wh-card-head {
    min-height: 64px;
    padding: 14px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--wh-border);
}

.wh-card-head h5 { margin: 0; font-size: 13px; font-weight: 750; }
.wh-card-head small { display: block; margin-top: 3px; color: #94a3b8; font-size: 10px; }

.wh-soft-badge {
    padding: 5px 8px;
    border-radius: 99px;
    color: #059669;
    background: #ecfdf5;
    font-size: 9px;
}

.wh-soft-badge i { font-size: 6px; }

.wh-mini-stat {
    padding: 12px;
    border: 1px solid #edf1f6;
    border-radius: 10px;
    background: #fafbfd;
}

.wh-mini-stat span { display: block; color: #718096; font-size: 10px; }
.wh-mini-stat strong { display: block; margin-top: 4px; font-size: 20px; }

.wh-dashboard-actions {
    padding: 0 17px 17px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
}

.wh-action {
    min-height: 64px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    border: 1px solid #e9edf4;
    border-radius: 10px;
    color: #475569;
    background: #fff;
    font-size: 10px;
}

.wh-action:hover { border-color: #bfdbfe; background: #f8fbff; color: var(--wh-primary); }
.wh-action i { font-size: 16px; color: var(--wh-primary); }

.wh-info-row {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #f0f2f6;
    font-size: 11px;
}

.wh-info-row span { color: #94a3b8; }
.wh-info-row strong { text-align: right; font-weight: 650; }

.wh-table { font-size: 11px; }
.wh-table thead th { padding: 11px 15px; color: #94a3b8; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.wh-table tbody td { padding: 12px 15px; border-color: #eef1f5; }

.form-label { font-size: 11px; font-weight: 650; color: #475569; }
.form-control, .form-select { min-height: 39px; border-color: #dfe5ee; border-radius: 9px; font-size: 12px; }
.form-control:focus, .form-select:focus { border-color: #93c5fd; box-shadow: 0 0 0 .2rem rgba(37,99,235,.09); }

.btn { border-radius: 9px; font-size: 11px; font-weight: 650; }
.btn-primary { background: var(--school-primary, var(--wh-primary)); border-color: var(--school-primary, var(--wh-primary)); }

.wh-school-card {
    min-height: 100px;
    width: 100%;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--wh-border);
    border-radius: 14px;
    background: #fff;
    color: inherit;
    text-align: left;
    box-shadow: 0 4px 16px rgba(15,23,42,.035);
}

.wh-school-card:hover { border-color: #bfdbfe; transform: translateY(-1px); }
.wh-school-card-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: #eaf1ff; color: var(--wh-primary); }
.wh-school-card h5 { margin: 0; font-size: 12px; }
.wh-school-card p { margin: 3px 0 0; color: #94a3b8; font-size: 10px; }

.wh-footer {
    padding: 12px 24px 17px;
    display: flex;
    justify-content: space-between;
    color: #94a3b8;
    font-size: 9px;
}

.wh-sidebar-backdrop { display: none; }

.wh-login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px;
    background:
        radial-gradient(circle at 10% 10%, rgba(37,99,235,.14), transparent 30%),
        radial-gradient(circle at 90% 90%, rgba(124,58,237,.12), transparent 30%),
        #f4f7fb;
}

.wh-login-shell { width: 100%; max-width: 410px; }

.wh-login-brand {
    margin-bottom: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.wh-login-logo {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    font-size: 22px;
}

.wh-login-brand strong, .wh-login-brand small { display: block; }
.wh-login-brand strong { font-size: 16px; }
.wh-login-brand small { color: #94a3b8; font-size: 10px; margin-top: 2px; }

.wh-login-card {
    padding: 29px;
    border: 1px solid var(--wh-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(15,23,42,.08);
}

.wh-login-card h1 { margin: 0; font-size: 22px; font-weight: 750; }
.wh-login-card p { margin: 5px 0 0; color: #94a3b8; font-size: 11px; }

.wh-input-icon { position: relative; }
.wh-input-icon i { position: absolute; left: 13px; top: 12px; color: #94a3b8; }
.wh-input-icon input { padding-left: 36px; }

@media (min-width: 992px) {
    body.wh-sidebar-collapsed .wh-sidebar { width: 72px; }
    body.wh-sidebar-collapsed .wh-main { margin-left: 72px; }
    body.wh-sidebar-collapsed .wh-brand-text,
    body.wh-sidebar-collapsed .wh-school-chip,
    body.wh-sidebar-collapsed .wh-nav-label,
    body.wh-sidebar-collapsed .wh-nav-link span,
    body.wh-sidebar-collapsed .wh-nav-link .wh-arrow,
    body.wh-sidebar-collapsed .wh-sidebar-bottom span {
        display: none;
    }
    body.wh-sidebar-collapsed .wh-brand { justify-content: center; }
    body.wh-sidebar-collapsed .wh-nav-link { justify-content: center; }
}

@media (max-width: 991.98px) {
    .wh-main { margin-left: 0 !important; width: 100%; }
    .wh-sidebar {
        width: 280px;
        max-width: 86vw;
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: 15px 0 35px rgba(15,23,42,.2);
    }
    .wh-sidebar.mobile-open { transform: translateX(0); }
    body.sidebar-open { overflow: hidden; }
    body.sidebar-open .wh-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(15,23,42,.46);
    }
    .wh-topbar { padding: 0 10px; }
    .wh-content { padding: 17px; }
    .wh-page-head { align-items: flex-start; flex-direction: column; }
    .wh-dashboard-actions { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
    .wh-content { padding: 12px; }
    .wh-topbar { height: 58px; min-height: 58px; }
    .wh-page-head h1 { font-size: 21px; }
    .wh-dashboard-actions { grid-template-columns: 1fr 1fr; }
    .wh-login-card { padding: 23px; }
}

/* =========================================================
   WHEDU PRO — ACADEMIC SESSION UI
   ========================================================= */

.wh-stat-card {
    background: #fff;
    border: 1px solid #e5eaf2;
    border-radius: 14px;
    padding: 18px;
    min-height: 92px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .04);
    transition: .18s ease;
}

.wh-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

.wh-stat-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.wh-stat-label {
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}

.wh-stat-value {
    color: #172554;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 750;
}

.wh-table thead th {
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.wh-table tbody td {
    padding-top: 15px;
    padding-bottom: 15px;
    border-color: #edf1f7;
}

.wh-table tbody tr:hover {
    background: #f8fbff;
}

.wh-card {
    overflow: hidden;
}

@media (max-width: 767.98px) {

    .wh-page-head {
        display: block !important;
    }

    .wh-page-head h1 {
        font-size: 24px;
    }

    .wh-stat-card {
        min-height: 78px;
    }

    .wh-stat-value {
        font-size: 22px;
    }

    .wh-table {
        min-width: 700px;
    }

}


/* =========================================================
   WHEDU PRO — CLASSES MODULE
   ========================================================= */

.wh-stat-card {
    background: #fff;
    border: 1px solid #e7ebf3;
    border-radius: 14px;
    padding: 16px;
    min-height: 88px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 4px 18px rgba(15,23,42,.045);
    transition: all .18s ease;
}

.wh-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(15,23,42,.08);
}

.wh-stat-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.wh-card {
    background: #fff;
    border: 1px solid #e7ebf3;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(15,23,42,.045);
    overflow: hidden;
}

.wh-card-head {
    min-height: 64px;
    padding: 14px 17px;
    border-bottom: 1px solid #edf0f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wh-card-head h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #172033;
}

.wh-card-head small {
    color: #8a94a6;
    font-size: 12px;
}

.wh-table {
    font-size: 13px;
}

.wh-table thead th {
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid #e9edf3;
    padding: 12px 14px;
}

.wh-table tbody td {
    padding: 13px 14px;
    border-color: #edf0f4;
}

.wh-table tbody tr:hover {
    background: #fbfdff;
}

@media (max-width: 767.98px) {

    .wh-stat-card {
        min-height: 76px;
        padding: 13px;
    }

    .wh-stat-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: 18px;
    }

    .wh-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .wh-card-head form {
        width: 100%;
    }

    .wh-card-head form select {
        width: 100%;
    }

}

/* WHEDU SEARCH FINAL FIX */

.sidebar-search,
.menu-search,
.search-menu,
.search-container {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.sidebar-search input,
.menu-search input,
.search-menu input,
.search-container input {
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
}

.sidebar-search i,
.menu-search i,
.search-menu i,
.search-container i {
    pointer-events: none !important;
}

.sidebar {
    overflow-x: hidden !important;
}

@media (max-width: 768px) {
    .sidebar-search input,
    .menu-search input,
    .search-menu input,
    .search-container input {
        height: 44px !important;
        font-size: 14px !important;
    }
}



/* =========================================================
   WHEDU NAVIGATION V2
   ========================================================= */

.wh-sidebar-search { padding: 3px 10px 10px; }
.wh-search-box {
    height: 38px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 10px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    background:rgba(255,255,255,.065);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.wh-search-box i { color:#8eabd8; font-size:13px; }
.wh-search-box input {
    flex:1; min-width:0; border:0; outline:0; background:transparent;
    color:#fff; font-size:11px;
}
.wh-search-box input::placeholder { color:#8da7d0; }
.wh-search-box kbd {
    min-width:20px; padding:2px 5px; border:1px solid rgba(255,255,255,.12);
    border-radius:5px; background:rgba(255,255,255,.06); color:#9db4d8; font-size:9px;
}

.wh-nav-link { position:relative; }
.wh-nav-link.active::before {
    content:""; position:absolute; left:0; top:7px; bottom:7px; width:3px;
    border-radius:0 4px 4px 0; background:#fff;
}
.wh-subnav a.active {
    color:#fff; background:rgba(59,130,246,.18); border-left-color:#60a5fa;
    font-weight:700; border-radius:0 8px 8px 0;
}
.wh-subnav a.active i { color:#bfdbfe; }

.wh-sidebar-no-result {
    margin:8px 4px; padding:14px 10px; border:1px dashed rgba(255,255,255,.12);
    border-radius:9px; text-align:center; color:#8fa8d1; font-size:10px;
}

/* Horizontal navigation mode */
.wh-horizontal-nav {
    display:none; align-items:center; gap:2px; min-width:0; flex:1;
    margin:0 16px; overflow:visible;
}
.wh-horizontal-link {
    display:flex; align-items:center; gap:6px; height:38px; padding:0 9px;
    border:0; border-radius:8px; background:transparent; color:#52637c;
    font-size:10px; font-weight:650; white-space:nowrap;
}
.wh-horizontal-link:hover { color:#2563eb; background:#f1f5f9; }
.wh-horizontal-link.active { color:#2563eb; background:#eaf1ff; }
.wh-horizontal-link > i:first-child { font-size:12px; }
.wh-horizontal-arrow { font-size:7px; margin-left:2px; }
.wh-horizontal-dropdown { min-width:205px; padding:7px; border-radius:11px; }
.wh-horizontal-dropdown .dropdown-item {
    padding:8px 10px; border-radius:7px; font-size:10px;
}
.wh-horizontal-dropdown .dropdown-item.active {
    color:#2563eb; background:#eaf1ff; font-weight:700;
}

/* Global search dropdown */
.wh-search { position:relative; width:300px; }
.wh-search:focus-within { border-color:#93c5fd; box-shadow:0 0 0 3px rgba(37,99,235,.07); background:#fff; }
.wh-global-results {
    position:absolute; top:calc(100% + 9px); right:0; width:390px; max-width:min(390px,80vw);
    max-height:460px; overflow:auto; padding:7px; background:#fff;
    border:1px solid #e5eaf1; border-radius:13px;
    box-shadow:0 18px 45px rgba(15,23,42,.16); z-index:2000;
}
.wh-search-result {
    display:flex; align-items:center; gap:9px; padding:9px; border-radius:9px;
    color:#334155; text-decoration:none;
}
.wh-search-result:hover { background:#f5f8fc; color:#2563eb; }
.wh-search-result-icon {
    width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center;
    border-radius:8px; background:#eef4ff; color:#2563eb;
}
.wh-search-result-copy { min-width:0; display:flex; flex-direction:column; }
.wh-search-result-copy strong { font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wh-search-result-copy small { margin-top:2px; color:#94a3b8; font-size:8px; }
.wh-search-empty { padding:18px 12px; text-align:center; color:#94a3b8; font-size:10px; }

/* Vertical = sidebar; Horizontal = top navigation */
body.wh-navigation-horizontal .wh-sidebar { display:none; }
body.wh-navigation-horizontal .wh-main { margin-left:0; }
body.wh-navigation-horizontal .wh-horizontal-nav { display:flex; }
body.wh-navigation-horizontal #whSidebarToggle { display:none; }

body.wh-navigation-vertical .wh-horizontal-nav { display:none; }

/* Settings navigation */
.settings-section-title {
    color:#334155; font-size:12px; font-weight:750; margin-bottom:14px;
}
.wh-menu-table th {
    padding:11px 14px; color:#94a3b8; font-size:9px; text-transform:uppercase;
    letter-spacing:.08em; white-space:nowrap;
}
.wh-menu-table td { padding:10px 14px; border-color:#eef1f5; font-size:11px; }
.wh-menu-table .menu-child-row td:first-child { padding-left:32px; }
.wh-menu-table .form-control-sm { min-height:34px; font-size:10px; border-radius:7px; }
.wh-menu-table .form-check-input { width:18px; height:18px; cursor:pointer; }

@media (max-width: 1199px) {
    .wh-horizontal-nav { margin:0 8px; gap:0; }
    .wh-horizontal-link { padding:0 6px; font-size:9px; }
    .wh-search { width:230px; }
}
@media (max-width: 991.98px) {
    body.wh-navigation-horizontal .wh-sidebar { display:none; }
    .wh-horizontal-nav { display:none !important; }
    body.wh-navigation-horizontal .wh-topbar { justify-content:space-between; }
    .wh-search { width:210px; }
}
@media (max-width: 575.98px) {
    .wh-search { width:calc(100vw - 145px); }
    .wh-search kbd { display:none; }
    .wh-global-results { right:-8px; width:calc(100vw - 20px); max-width:none; }
}


/* Navigation safety overrides */
body.wh-navigation-vertical .wh-horizontal-nav { display:none !important; }
body.wh-navigation-horizontal .wh-horizontal-nav { display:flex !important; }
body.wh-navigation-horizontal .wh-sidebar { display:none !important; }
body.wh-navigation-horizontal .wh-main { margin-left:0 !important; }

.wh-horizontal-nav .wh-horizontal-link {
    appearance:none;
    -webkit-appearance:none;
    text-decoration:none;
    border:0;
    outline:0;
    cursor:pointer;
}
.wh-horizontal-nav .wh-horizontal-link,
.wh-horizontal-nav .wh-horizontal-link:visited {
    color:#52637c;
}
.wh-horizontal-nav .wh-horizontal-link.active,
.wh-horizontal-nav .wh-horizontal-link:hover {
    color:#2563eb;
    text-decoration:none;
}

.wh-sidebar-search .wh-search-box {
    width:100%;
}
.wh-sidebar-search .wh-search-box input {
    appearance:none;
    -webkit-appearance:none;
}


/* Portal role dashboard */
.portal-hero{background:linear-gradient(135deg,#0f2b67,#2563eb);color:#fff;border-radius:18px;padding:28px;box-shadow:0 16px 35px rgba(37,99,235,.18)}
.portal-stat{border:0;border-radius:14px;box-shadow:0 8px 24px rgba(15,23,42,.07)}
.portal-stat .icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#eef4ff;color:#2563eb}

/* v4 navigation hardening */
.wh-horizontal-nav button.wh-horizontal-link{font-family:inherit;line-height:1.2;box-shadow:none;}
.wh-horizontal-nav .dropdown-menu{display:none;}
.wh-horizontal-nav .dropdown.show .dropdown-menu{display:block;}


/* =========================================================
   FIXED APPLICATION SHELL
   Sidebar + top header + footer stay fixed.
   ========================================================= */
:root {
    --wh-footer-height: 42px;
}
.wh-topbar {
    position: fixed !important;
    top: 0;
    right: 0;
    left: var(--wh-sidebar-width);
    z-index: 1035;
}
.wh-content {
    padding-top: calc(var(--wh-topbar-height) + 24px) !important;
    padding-bottom: calc(var(--wh-footer-height) + 24px) !important;
    min-height: 100vh;
}
.wh-footer {
    position: fixed !important;
    left: var(--wh-sidebar-width);
    right: 0;
    bottom: 0;
    z-index: 1030;
    height: var(--wh-footer-height);
    padding: 0 24px;
    align-items: center;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--wh-border);
}
body.wh-navigation-horizontal .wh-topbar {
    left: 0 !important;
}
body.wh-navigation-horizontal .wh-footer {
    left: 0 !important;
}
body.wh-navigation-horizontal .wh-content {
    padding-top: calc(var(--wh-topbar-height) + 24px) !important;
}
@media (max-width: 991.98px) {
    .wh-topbar { left:0 !important; }
    .wh-footer { left:0 !important; }
}

/* Reliable WHEDU sidebar group collapse */
.wh-subnav {
    overflow: hidden;
    max-height: 0;
    transition: max-height .22s ease;
}
.wh-subnav.show {
    display:block;
}
.wh-nav-parent .wh-arrow {
    transition: transform .2s ease;
}
.wh-nav-parent.expanded .wh-arrow {
    transform:rotate(180deg);
}

/* =========================================================
   WHEDU FIXED SHELL v8
   Sidebar header/search/footer stay fixed; only menu scrolls.
   ========================================================= */
.wh-sidebar {
    overflow: hidden !important;
}
.wh-sidebar .wh-brand,
.wh-sidebar .wh-school-chip,
.wh-sidebar .wh-sidebar-search,
.wh-sidebar .wh-sidebar-bottom {
    flex: 0 0 auto;
}
.wh-sidebar .wh-nav {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    padding-bottom: 12px;
}
.wh-sidebar .wh-sidebar-bottom {
    background: rgba(8,22,56,.96);
}
.wh-topbar {
    position: fixed !important;
    top: 0;
}
.wh-main {
    padding-top: 0;
}
.wh-content {
    padding-top: calc(var(--wh-topbar-height) + 24px) !important;
}
.wh-footer {
    position: fixed !important;
    display: flex !important;
}


/* WHEDU v12 header settings button */
.wh-header-settings{display:grid;place-items:center;text-decoration:none;color:#334155;margin-right:2px}
.wh-header-settings:hover{color:#2563eb;background:#eff6ff}
/* fixed shell remains deterministic on every page */
.wh-sidebar{position:fixed!important;left:0;top:0;bottom:0;width:var(--wh-sidebar-width);z-index:1040;display:flex;flex-direction:column}
.wh-sidebar .wh-nav{min-height:0;flex:1 1 auto;overflow-y:auto}
.wh-topbar{position:fixed!important;top:0;right:0;left:var(--wh-sidebar-width);z-index:1035}
.wh-content{padding-top:calc(var(--wh-topbar-height) + 24px)!important;padding-bottom:calc(var(--wh-footer-height) + 24px)!important;min-height:100vh}
.wh-footer{position:fixed!important;left:var(--wh-sidebar-width);right:0;bottom:0;height:var(--wh-footer-height);z-index:1030;display:flex!important;align-items:center}
body.wh-navigation-horizontal .wh-sidebar{display:none!important}
body.wh-navigation-horizontal .wh-topbar,body.wh-navigation-horizontal .wh-footer{left:0!important}
@media(max-width:991.98px){.wh-topbar,.wh-footer{left:0!important}.wh-sidebar{transform:translateX(-100%);transition:transform .2s ease}.wh-sidebar.open{transform:translateX(0)}}

/* =========================================================
   WHEDU PRO v13 — Responsive application shell
   ========================================================= */
img,svg,video,canvas{max-width:100%;height:auto}
.table-responsive{-webkit-overflow-scrolling:touch}
.form-control,.form-select,.btn{max-width:100%}
.wh-page-head .btn{white-space:nowrap}

@media (max-width: 991.98px){
  :root{--wh-topbar-height:58px}
  .wh-topbar{position:fixed;left:0!important;right:0;top:0;height:58px;min-height:58px;padding:0 10px;z-index:1050}
  .wh-main{margin-left:0!important;padding-top:58px}
  .wh-content{padding:16px;min-height:calc(100vh - 58px);padding-bottom:70px!important}
  .wh-sidebar{top:0;bottom:0;left:0;height:100dvh;z-index:1060}
  .wh-sidebar-bottom{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(11,27,68,.85),#0b1b44);margin-top:auto}
  .wh-horizontal-nav{display:none!important}
  .wh-breadcrumb-title span{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wh-search{width:min(42vw,260px)}
  .wh-user-copy{display:none!important}
  .wh-footer{position:fixed!important;left:0!important;right:0;bottom:0;height:42px;padding:0 12px;z-index:1040;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);font-size:8px}
  .wh-page-head{gap:12px;margin-bottom:16px}
  .wh-page-head>div:last-child{width:100%;display:flex;flex-wrap:wrap}
  .wh-page-head>div:last-child .btn{flex:1 1 auto}
  .wh-dashboard-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 767.98px){
  .wh-content{padding:12px;padding-bottom:62px!important}
  .wh-topbar{gap:4px}
  .wh-topbar-actions{gap:3px;min-width:0}
  .wh-search{width:clamp(120px,42vw,210px);height:36px}
  .wh-search kbd{display:none}
  .wh-page-head h1{font-size:21px;line-height:1.2}
  .wh-page-head p{font-size:11px}
  .wh-card-head{padding:12px 13px;min-height:56px}
  .wh-card-head h5{font-size:13px}
  .wh-stat-card{padding:13px;min-height:76px;border-radius:12px}
  .wh-stat-icon{width:40px;height:40px;min-width:40px;font-size:17px}
  .wh-stat-body strong{font-size:21px}
  .wh-stat-body span{display:none}
  .wh-dashboard-actions{gap:7px;padding:0 12px 12px}
  .wh-action{min-height:58px;padding:8px;font-size:9px}
  .table-responsive table{font-size:11px}
  .table-responsive .table{min-width:620px}
  .modal-dialog{margin:.6rem}
  .row.g-3{--bs-gutter-x:.65rem;--bs-gutter-y:.65rem}
}
@media (max-width: 480px){
  .wh-search{width:34vw;min-width:110px}
  .wh-breadcrumb-title{display:none}
  .wh-topbar{justify-content:flex-end}
  .wh-topbar>div:first-child{margin-right:auto}
  .wh-topbar-actions .wh-header-settings{display:none}
  .wh-page-head>div:last-child .btn{width:100%;flex-basis:100%}
  .wh-dashboard-actions{grid-template-columns:1fr 1fr}
  .wh-footer span:last-child{display:none}
}

/* Portal responsive cards/tables */
.portal-wrap{width:100%;padding-left:clamp(12px,2vw,24px);padding-right:clamp(12px,2vw,24px)}
@media(max-width:767.98px){
 .portal-wrap{padding-left:12px;padding-right:12px}
 .portal-wrap .hero{padding:20px;border-radius:16px}
 .portal-wrap .hero h1{font-size:22px}
 .portal-wrap .navbar .container{padding-left:10px;padding-right:10px}
 .portal-wrap .cardx{border-radius:13px}
}

/* =========================================================
   v13.1 — Mobile-first dashboard polish
   ========================================================= */
.wh-content > .row > [class*="col-"], .wh-content .row > [class*="col-"]{min-width:0}
.wh-card,.wh-stat-card,.wh-mini-stat{max-width:100%}
.wh-card-head{flex-wrap:wrap}
.wh-card-head>div{min-width:0}
.wh-table-wrap,.table-responsive{width:100%;overflow-x:auto}
.wh-topbar-actions{min-width:0}
.wh-global-results{max-width:min(92vw,420px)}

@media(max-width:991.98px){
 .wh-main{padding-top:58px}
 .wh-content{overflow-x:hidden}
 .wh-sidebar{overflow:hidden}
 .wh-nav{overflow-y:auto;overflow-x:hidden;min-height:0}
 .wh-school-chip{flex:0 0 auto}
 .wh-sidebar-search{flex:0 0 auto}
 .wh-nav-link{font-size:12px;min-height:42px}
 .wh-subnav a{min-height:37px;font-size:11px}
}
@media(max-width:767.98px){
 .wh-page-head .d-flex{width:100%}
 .wh-page-head .d-flex .btn{min-height:40px}
 .wh-card-head .btn-group{width:100%;overflow:auto}
 .wh-card-head .btn-group .btn{flex:0 0 auto}
 .wh-form-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
 .wh-form-actions>*{width:100%!important}
 .wh-stat-card{height:100%}
 .wh-stat-body strong{font-size:20px}
 .wh-content .modal-dialog{max-width:calc(100% - 18px);margin:9px auto}
 .wh-content .dropdown-menu{max-width:calc(100vw - 24px)}
}
@media(max-width:480px){
 .wh-content{padding-left:10px;padding-right:10px}
 .wh-page-head h1{font-size:19px}
 .wh-page-head p{font-size:10px}
 .wh-card-head{padding:11px 12px}
 .wh-card-head h5{font-size:12px}
 .wh-stat-card{padding:11px}
 .wh-stat-icon{width:38px;height:38px;min-width:38px}
 .wh-dashboard-actions{gap:6px}
 .wh-action{min-height:54px}
}
/* v14 white-label + mobile application shell */
.wh-mobile-top-menu{display:none}
.wh-mobile-bottom-nav{display:none}
.wh-profile-avatar{width:76px;height:76px;border-radius:24px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--school-primary),var(--school-secondary));color:#fff;font-size:32px;box-shadow:0 10px 25px rgba(37,99,235,.18)}
.wh-profile-settings-trigger{border:0;background:transparent;width:34px;height:34px;border-radius:9px;color:#64748b;display:inline-flex;align-items:center;justify-content:center;margin-left:4px}
.wh-profile-settings-trigger:hover{background:#f1f5f9;color:var(--school-primary)}
@media (max-width: 767.98px){
  :root{--wh-mobile-bottom:64px}
  body{padding-bottom:var(--wh-mobile-bottom)}
  .wh-topbar{min-height:58px;padding:8px 10px;gap:6px;flex-wrap:wrap}
  .wh-topbar .wh-breadcrumb-title,.wh-topbar .wh-horizontal-nav{display:none!important}
  .wh-topbar-actions{margin-left:auto;gap:4px}
  .wh-topbar-actions .wh-search{display:none}
  .wh-topbar-actions .wh-icon-button{width:36px;height:36px}
  .wh-header-brand-name{display:inline-flex;max-width:90px;font-size:10px;padding:0 2px;}
  .wh-topbar-actions .wh-user-button{padding:3px 5px}
  .wh-user-copy{display:none!important}
  .wh-main{min-width:0;width:100%}
  .wh-content{padding:72px 10px 84px!important;overflow-x:hidden}
  .wh-page-head{padding:4px 2px 14px;gap:10px;flex-direction:column;align-items:flex-start!important}
  .wh-page-head h1{font-size:22px;margin-bottom:3px}.wh-page-head p{font-size:12px;margin:0}
  .wh-page-head>.d-flex{width:100%;overflow-x:auto;white-space:nowrap}
  .wh-card{border-radius:14px}.wh-card-head{padding:14px}.wh-card>.p-4{padding:14px!important}
  .row.g-3{--bs-gutter-y:.65rem;--bs-gutter-x:.65rem}
  .table-responsive{border-radius:10px;-webkit-overflow-scrolling:touch}
  .table{font-size:12px;white-space:nowrap}
  .form-control,.form-select,.btn{min-height:40px;font-size:13px}
  .wh-sidebar{transform:translateX(-100%);transition:transform .22s ease;z-index:1200}
  body.wh-sidebar-open .wh-sidebar{transform:translateX(0)}
  .wh-sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:1190}
  body.wh-sidebar-open .wh-sidebar-backdrop{display:block}
  .wh-mobile-top-menu{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:fixed;left:0;right:0;top:58px;z-index:1090;background:#fff;border-bottom:1px solid var(--wh-border,#e2e8f0);box-shadow:0 5px 18px rgba(15,23,42,.07);padding:5px 4px;gap:3px}
  .wh-mobile-top-item{min-width:0}.wh-mobile-top-link{width:100%;height:42px;border:0;background:transparent;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#475569;font-size:8px;font-weight:600;padding:2px}
  .wh-mobile-top-link i{font-size:15px;color:var(--school-primary)}.wh-mobile-top-link:after{font-size:7px;margin-left:2px}
  .wh-mobile-top-link:hover,.wh-mobile-top-link.show{background:#eff6ff;color:var(--school-primary)}
  .wh-mobile-top-dropdown{max-height:60vh;overflow:auto;min-width:220px}.wh-mobile-top-dropdown .dropdown-item{font-size:12px;padding:9px 12px}
  .wh-mobile-bottom-nav{display:grid;grid-template-columns:repeat(6,1fr);position:fixed;left:0;right:0;bottom:0;height:64px;background:#fff;border-top:1px solid var(--wh-border,#e2e8f0);box-shadow:0 -7px 25px rgba(15,23,42,.08);z-index:1300;padding-bottom:env(safe-area-inset-bottom)}
  .wh-mobile-bottom-nav a,.wh-mobile-bottom-nav button{border:0;background:transparent;text-decoration:none;color:#64748b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:9px;font-weight:600}
  .wh-mobile-bottom-nav i{font-size:18px}.wh-mobile-bottom-nav a.active,.wh-mobile-bottom-nav a:hover,.wh-mobile-bottom-nav button:hover{color:var(--school-primary)}
  .wh-footer{position:static!important;margin-bottom:5px!important;font-size:9px;padding:8px 10px!important}
  .wh-horizontal-dropdown{position:fixed!important}
  .wh-stat-card{min-height:100px}.wh-stat-body strong{font-size:22px}
  .wh-dashboard-actions{grid-template-columns:repeat(2,1fr)!important}.wh-action{min-height:72px}
}
@media (min-width:768px){.wh-sidebar-backdrop{display:none!important}}

@media (max-width: 991.98px){
  .wh-sidebar{transform:translateX(-100%);transition:transform .22s ease;z-index:1200}
  .wh-sidebar.mobile-open{transform:translateX(0)}
  body.sidebar-open .wh-sidebar{transform:translateX(0)}
}



/* v27 mobile header: active school name beside hamburger */
.wh-mobile-school-title{
  display:none;
  min-width:0;
  max-width:260px;
  margin-left:4px;
  color:#0f172a;
  font-size:15px;
  font-weight:800;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:-.01em;
}
@media (max-width:767.98px){
  .wh-mobile-school-title{display:block;flex:1;}
}
@media (max-width:390px){
  .wh-mobile-school-title{max-width:170px;font-size:14px;}
}

/* v25 notification state */
.wh-notification-dot.is-active{display:block!important}
.wh-notification-count{font-size:.62rem;min-width:1.15rem;padding:.22rem .35rem;z-index:2}

@media (max-width: 390px){.wh-header-brand-name{max-width:64px;font-size:9px}.wh-topbar-actions{gap:2px}.wh-topbar-actions .wh-icon-button{width:34px;height:34px}}


/* v31 mobile sidebar persistence + header brand */
@media (max-width: 991.98px){
  /* Keep the mobile sidebar open while navigating its submenu hierarchy.
     It closes only when a real destination link is selected or the toggle/
     backdrop/Escape is used. */
  body.wh-sidebar-open .wh-sidebar,
  body.sidebar-open .wh-sidebar{
    transform:translateX(0);
  }
}

@media (max-width: 767.98px){
  .wh-mobile-school-title{
    display:block!important;
    flex:1 1 auto;
    min-width:0;
    max-width:calc(100vw - 235px);
    margin-left:4px;
    color:#0f172a;
    font-size:15px;
    font-weight:800;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}
@media (max-width:390px){
  .wh-mobile-school-title{
    max-width:calc(100vw - 205px);
    font-size:14px;
  }
}


/* v32 mobile header: global brand beside hamburger, never beside chat */
@media (max-width: 767.98px){
  .wh-mobile-school-title{
    display:block!important;
    flex:1 1 auto;
    min-width:0;
    max-width:none;
    margin-left:8px;
    color:#0f172a;
    font-size:15px;
    font-weight:800;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    letter-spacing:-.01em;
  }
  .wh-header-brand-name{display:none!important;}
  .wh-topbar > .d-flex.align-items-center{min-width:0;flex:1 1 auto;}
  .wh-topbar-actions{flex:0 0 auto;}
}
@media (max-width:390px){
  .wh-mobile-school-title{font-size:14px;margin-left:7px;}
}