/* ============================================================================
   HRDashboardRedesign.css
   Scope: HR Management > Default > Dashboard_Index and all its lazy-loaded
          dashboard partials (Employee Strength, Pay Slip, Birthday, Employee
          Status, Salary Statement, Probation, 25-Years-Completion, Attendance,
          Leave Applications, Retirement).
   Prefix / scope class: .hrdb-scope  (added once, to the outer container of
          Dashboard_Index.cshtml and to the root element of every partial that
          can also be loaded standalone into a modal, so this file never
          affects any other AdminLTE-skinned page).
   Everything below is a pure re-skin of EXISTING markup/classes (.box,
   .box-header, table.table, .nav-tabs-custom, .products-list, plus the
   Chart.js htmlLegend classes .scroll/.listContainer/.li/.boxSpan/
   .textContainer already emitted by Dashboard_Index.cshtml's chart JS) — no
   id, form action, or JS hook is renamed here.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

.hrdb-scope {
    --hrdb-bg: #F3F5FB;
    --hrdb-surface: #FFFFFF;
    --hrdb-surface-2: #FAFBFF;
    --hrdb-line: #E7E9F4;
    --hrdb-ink: #262A41;
    --hrdb-ink-soft: #6B7094;
    --hrdb-ink-faint: #A6ABC7;
    --hrdb-primary: #5B5FEF;
    --hrdb-primary-dark: #4347C4;
    --hrdb-primary-tint: #EDEEFD;
    --hrdb-teal: #14B8A6;
    --hrdb-teal-tint: #E3F8F5;
    --hrdb-coral: #FF8A65;
    --hrdb-coral-tint: #FFEDE5;
    --hrdb-amber: #F5B942;
    --hrdb-amber-tint: #FDF3DE;
    --hrdb-violet: #8A3FFC;
    --hrdb-violet-tint: #F2E9FF;
    --hrdb-success: #2FBE8F;
    --hrdb-danger: #F0576B;
    --hrdb-radius-lg: 20px;
    --hrdb-radius-md: 14px;
    --hrdb-radius-sm: 9px;
    --hrdb-shadow-soft: 0 1px 2px rgba(38,42,65,0.04), 0 8px 24px -10px rgba(38,42,65,0.12);
    --hrdb-font-display: 'Space Grotesk', sans-serif;
    --hrdb-font-body: 'Inter', sans-serif;
    --hrdb-font-mono: 'IBM Plex Mono', monospace;
    font-family: var(--hrdb-font-body);
    color: var(--hrdb-ink);
}

    /* ---------- Panels (.box) ---------- */
    .hrdb-scope .box {
        background: var(--hrdb-surface);
        border-radius: var(--hrdb-radius-lg) !important;
        box-shadow: var(--hrdb-shadow-soft);
        border: 1px solid var(--hrdb-line);
        overflow: hidden;
    }

    .hrdb-scope .box-header {
        background: transparent;
        border-bottom: 1px solid var(--hrdb-line);
        padding: 14px 18px;
    }

        .hrdb-scope .box-header .box-title,
        .hrdb-scope .box-title {
            font-family: var(--hrdb-font-display);
            font-weight: 600;
            font-size: 14.5px;
            color: var(--hrdb-ink);
        }

    .hrdb-scope .box-body {
        padding: 14px 18px;
    }

    /* ---------- Card panel (replacement for AdminLTE .box/.box-header/.box-body,
   used where the view no longer relies on those global classes) ---------- */
    .hrdb-scope .hrdb-panel {
        background: var(--hrdb-surface);
        border-radius: 5px !important;
        box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
        border: 1px solid var(--hrdb-line);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 110mm !important;
    }

    .hrdb-scope .hrdb-panel-body {
        padding: 14px 18px;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }
        /* Thin custom scrollbar — same as Employee Strength legend/hbar lists */
        .hrdb-scope .hrdb-panel-body::-webkit-scrollbar,
        .hrdb-scope .table-responsive::-webkit-scrollbar,
        .hrdb-scope .tab-pane::-webkit-scrollbar,
        .hrdb-scope #staffBirthdayDiv::-webkit-scrollbar,
        .hrdb-scope .hrdb-drawer-body::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }

        .hrdb-scope .hrdb-panel-body::-webkit-scrollbar-thumb,
        .hrdb-scope .table-responsive::-webkit-scrollbar-thumb,
        .hrdb-scope .tab-pane::-webkit-scrollbar-thumb,
        .hrdb-scope #staffBirthdayDiv::-webkit-scrollbar-thumb,
        .hrdb-scope .hrdb-drawer-body::-webkit-scrollbar-thumb {
            background: var(--hrdb-line);
            border-radius: 99px !important;
        }

        .hrdb-scope .hrdb-panel-body::-webkit-scrollbar-track,
        .hrdb-scope .table-responsive::-webkit-scrollbar-track,
        .hrdb-scope .tab-pane::-webkit-scrollbar-track,
        .hrdb-scope #staffBirthdayDiv::-webkit-scrollbar-track,
        .hrdb-scope .hrdb-drawer-body::-webkit-scrollbar-track {
            background: transparent;
        }

    /* ---------- Panel header — reused (class names + layout) from
   MCampusUI/Areas/Enquiry/Views/Default/EnquiryAnalyticsDashboard_New.cshtml's
   .enqad-panel-head/.enqad-panel-title/.enqad-panel-hd-right/.enqad-viewtoggle/
   .enqad-vt-btn/.enqad-box-btn system, recolored with this stylesheet's
   --hrdb-* tokens instead of introducing a second (--enqad-*) palette onto
   this page. Unlike the reference's own container-query-based stacking, the
   title here truncates instead of wrapping onto its own line — this keeps the
   tool icons pinned to the header's right edge on every width without
   depending on @container query support (which isn't guaranteed in every
   client browser this app runs in), rather than the icons ever collapsing to
   the left edge on a narrow render. ---------- */
    .hrdb-scope .enqad-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border-bottom: 1px solid var(--hrdb-line);
        padding: 14px 18px;
        flex-wrap: nowrap;
        position: relative;
        overflow: visible;
        z-index: 2;
    }
        /* Html.BeginForm() renders a <form> that becomes .enqad-panel-head's ONLY
   direct child (wrapping .enqad-panel-title/.enqad-panel-hd-right inside it) —
   without this, the flex rules above never reach the title/tools because
   they're grandchildren, not direct children, and the plain block-level <form>
   just stacks them vertically regardless. Making the form itself the flex
   container is what actually keeps title-left/tools-right on one row. */
        .hrdb-scope .enqad-panel-head > form {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            width: 100%;
            min-width: 0;
        }

    .hrdb-scope .enqad-panel-title {
        font-family: var(--hrdb-font-display);
        font-size: 14.5px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--hrdb-ink);
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }

        .hrdb-scope .enqad-panel-title span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .hrdb-scope .enqad-panel-title i {
            color: var(--hrdb-primary-dark);
            font-size: 13px;
            flex-shrink: 0;
        }

    .hrdb-scope .hrdb-panel-subtitle {
        font-family: var(--hrdb-font-body);
        font-size: 10.5px;
        font-weight: 500;
        color: var(--hrdb-ink-faint);
        margin-top: 1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    .hrdb-scope .enqad-panel-hd-right {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: none;
        flex-wrap: nowrap;
    }

    .hrdb-scope .enqad-viewtoggle {
        display: inline-flex;
        align-items: center;
        border: none;
        border-radius: 0 !important;
        overflow: visible;
        background: transparent;
        height: auto;
        gap: 4px;
    }

    .hrdb-scope .enqad-vt-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border: 1px solid var(--hrdb-primary);
        border-radius: 6px !important;
        background: var(--hrdb-surface);
        color: var(--hrdb-primary);
        padding: 0;
        cursor: pointer;
        font-size: 12px;
        transition: .15s;
    }

        .hrdb-scope .enqad-vt-btn:hover {
            background: var(--hrdb-primary);
            color: #fff;
            border-color: var(--hrdb-primary);
        }

        .hrdb-scope .enqad-vt-btn.is-active {
            background: var(--hrdb-primary);
            color: #fff;
            border-color: var(--hrdb-primary);
        }

    .hrdb-scope .enqad-box-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border: 1px solid var(--hrdb-primary);
        background: var(--hrdb-surface);
        color: var(--hrdb-primary);
        border-radius: 7px !important;
        cursor: pointer;
        font-size: 11px;
        padding: 0;
        transition: .15s;
    }

        .hrdb-scope .enqad-box-btn:hover {
            background: var(--hrdb-primary);
            color: #fff;
            border-color: var(--hrdb-primary);
        }
    /* Dropdown inside the header must float above panel content */
    .hrdb-scope .enqad-panel-hd-right .dropdown-menu {
        z-index: 1055 !important;
        margin-top: 3px;
    }
    /* Normalize the month-filter select to match button height */
    .hrdb-scope .enqad-panel-hd-right select.form-control {
        height: 28px !important;
        padding: 0 6px !important;
        line-height: 28px;
        font-size: 11px;
        border-radius: 7px !important;
        width: auto !important;
        display: inline-block !important;
    }
    /* Select2 v4 container inside panel header — fallback if MCampusSelectBox can't be removed */
    .hrdb-scope .enqad-panel-hd-right .select2-container {
        width: auto !important;
        min-width: 110px;
        display: inline-block !important;
        vertical-align: middle;
    }

        .hrdb-scope .enqad-panel-hd-right .select2-container .select2-selection--single {
            height: 28px !important;
            line-height: 26px !important;
            border-radius: 7px !important;
            border: 1px solid var(--hrdb-line) !important;
            background: var(--hrdb-surface-2) !important;
            font-size: 11px !important;
        }

            .hrdb-scope .enqad-panel-hd-right .select2-container .select2-selection--single .select2-selection__rendered {
                line-height: 26px !important;
                padding-left: 8px !important;
                padding-right: 24px !important;
                color: var(--hrdb-ink) !important;
                font-size: 11px !important;
            }

            .hrdb-scope .enqad-panel-hd-right .select2-container .select2-selection--single .select2-selection__arrow {
                height: 26px !important;
                top: 0 !important;
                right: 4px !important;
            }

    .hrdb-scope .enqad-box-btn:hover {
        background: var(--hrdb-primary);
        border-color: var(--hrdb-primary);
        color: #fff;
    }
    /* Bootstrap nav-tabs styled as pill tab-group — matches reference .tab-group.
   Used in panel-hd-right (Employee Status, Probation) and panel-body
   (Leave Applications). Bootstrap manages <li class="active"> on click. */
    .hrdb-scope .enqad-status-tabs {
        display: inline-flex;
        gap: 4px;
        border: 1px solid var(--hrdb-line);
        border-radius: 999px !important;
        background: var(--hrdb-surface-2);
        padding: 4px;
        margin: 0;
        list-style: none;
    }

        .hrdb-scope .enqad-status-tabs > li {
            float: none;
            margin: 0;
            border: none;
        }

            .hrdb-scope .enqad-status-tabs > li > a {
                display: flex;
                align-items: center;
                border: none !important;
                border-radius: 999px !important;
                background: transparent !important;
                color: var(--hrdb-ink-soft) !important;
                font-size: 11.5px;
                font-weight: 600;
                font-family: var(--hrdb-font-body);
                padding: 6px 12px !important;
                margin: 0 !important;
                transition: background .15s, color .15s;
                white-space: nowrap;
            }

                .hrdb-scope .enqad-status-tabs > li > a:hover {
                    background: rgba(91, 95, 239, 0.08) !important;
                    color: var(--hrdb-primary-dark) !important;
                }

            .hrdb-scope .enqad-status-tabs > li.active > a,
            .hrdb-scope .enqad-status-tabs > li.active > a:focus,
            .hrdb-scope .enqad-status-tabs > li.active > a:hover {
                background: var(--hrdb-primary) !important;
                color: #fff !important;
            }
/* Small phones: title has already truncated to make room, but tighten the
   tool row's own spacing/sizing a little further too. */
@media (max-width: 380px) {
    .hrdb-scope .enqad-panel-head {
        padding: 12px 14px;
        gap: 6px;
    }

    .hrdb-scope .enqad-panel-hd-right {
        gap: 4px;
    }

    .hrdb-scope .enqad-box-btn {
        width: 24px;
        height: 24px;
    }

    .hrdb-scope .enqad-vt-btn {
        width: 24px;
        height: 24px;
    }
}

/* ============================================================
   Staff Birthday Widget
   ============================================================ */
@keyframes bdayGlowBg {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(255,138,101,0);
    }

    50% {
        box-shadow: 0 4px 18px -4px rgba(255,138,101,.35);
    }
}

@keyframes bdayRing {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(255,138,101,.45);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(255,138,101,0);
    }
}

@keyframes bdayPulse {
    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

@keyframes confettiFloat {
    0% {
        opacity: 0;
        transform: translateY(6px) rotate(0deg);
    }

    15% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(-22px) rotate(200deg);
    }
}

.hrdb-scope .bday-list {
    list-style: none;
    padding: 6px 8px 10px;
    margin: 0;
}

.hrdb-scope .bday-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 12px !important;
    position: relative;
    transition: background .15s ease;
}

    .hrdb-scope .bday-item:hover {
        background: var(--hrdb-surface-2);
    }

    .hrdb-scope .bday-item.is-today {
        background: linear-gradient(90deg, var(--hrdb-coral-tint), var(--hrdb-amber-tint) 70%);
        border-radius: 14px !important;
        animation: bdayGlowBg 2.6s ease-in-out infinite;
    }

        .hrdb-scope .bday-item.is-today:hover {
            background: linear-gradient(90deg, var(--hrdb-coral-tint), var(--hrdb-amber-tint) 70%);
        }

.hrdb-scope .bday-avatar {
    width: 40px;
    height: 40px;
    border-radius: 11px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--hrdb-font-display);
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    letter-spacing: .4px;
}

.hrdb-scope .bday-item.is-today .bday-avatar {
    background: linear-gradient(135deg, var(--hrdb-coral), var(--hrdb-amber)) !important;
    animation: bdayRing 1.8s ease-in-out infinite;
}

.hrdb-scope .bday-info {
    flex: 1;
    min-width: 0;
}

    .hrdb-scope .bday-info .bday-name {
        font-size: 12.5px;
        font-weight: 600;
        display: block;
        color: var(--hrdb-ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.hrdb-scope .bday-item.is-today .bday-name {
    color: #B5401F;
}

.hrdb-scope .bday-info .bday-school {
    font-size: 11.5px;
    color: var(--hrdb-ink-soft);
    margin-top: 1px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hrdb-scope .bday-date {
    font-family: var(--hrdb-font-mono);
    font-size: 11px;
    font-weight: 600;
    background: var(--hrdb-primary-tint);
    color: var(--hrdb-primary-dark);
    padding: 5px 10px;
    border-radius: 8px !important;
    flex-shrink: 0;
    white-space: nowrap;
}

.hrdb-scope .bday-badge-today {
    font-size: 10.5px;
    font-weight: 700;
    background: linear-gradient(120deg, var(--hrdb-coral), var(--hrdb-amber));
    color: #fff;
    padding: 5px 10px;
    border-radius: 8px !important;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    animation: bdayPulse 1.6s ease-in-out infinite;
}

.hrdb-scope .confetti-bit {
    position: absolute;
    top: 6px;
    font-size: 11px;
    pointer-events: none;
    opacity: 0;
    animation: confettiFloat 3.2s ease-in infinite;
}

/* ---------- Title icon-chip (append class hrdb-ic + a color modifier to the
   existing <i class="fa ..."> that already precedes each panel's title) ---- */
.hrdb-scope .hrdb-ic {
    width: 30px;
    height: 30px;
    border-radius: 9px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin-right: 6px;
    vertical-align: middle;
}

.hrdb-scope .hrdb-ic-indigo {
    background: var(--hrdb-primary-tint);
    color: var(--hrdb-primary-dark);
}

.hrdb-scope .hrdb-ic-teal {
    background: var(--hrdb-teal-tint);
    color: #0D8A7C;
}

.hrdb-scope .hrdb-ic-coral {
    background: var(--hrdb-coral-tint);
    color: #D9502F;
}

.hrdb-scope .hrdb-ic-amber {
    background: var(--hrdb-amber-tint);
    color: #A8730B;
}

.hrdb-scope .hrdb-ic-violet {
    background: var(--hrdb-violet-tint);
    color: var(--hrdb-violet);
}

/* ---------- Outlined-primary tool buttons (filter, export, view-more, search) ---------- */
.hrdb-scope .btn-social-icon.btn-bitbucket,
.hrdb-scope .box-tools .btn-primary,
.hrdb-scope .btnAttendance,
.hrdb-scope #btnAttendanceChart {
    background: var(--hrdb-surface) !important;
    border: 1px solid var(--hrdb-primary) !important;
    color: var(--hrdb-primary) !important;
    border-radius: 9px !important;
    transition: all .15s ease;
}

    .hrdb-scope .btn-social-icon.btn-bitbucket:hover,
    .hrdb-scope .box-tools .btn-primary:hover,
    .hrdb-scope .btnAttendance:hover,
    .hrdb-scope #btnAttendanceChart:hover {
        background: var(--hrdb-primary) !important;
        border-color: var(--hrdb-primary) !important;
        color: #fff !important;
    }

/* ---------- Form controls ---------- */
.hrdb-scope select.form-control,
.hrdb-scope input.form-control,
.hrdb-scope .form-control {
    font-family: var(--hrdb-font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--hrdb-ink);
    background: var(--hrdb-surface-2);
    border: 1px solid var(--hrdb-line);
    border-radius: 9px !important;
    box-shadow: none;
}

    .hrdb-scope .form-control:focus {
        border-color: var(--hrdb-primary);
        box-shadow: none;
    }

/* ---------- Attendance filter row ---------- */
.hrdb-scope .hrdb-filter-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
}

    .hrdb-scope .hrdb-filter-row > div {
        flex: 1 1 140px;
        min-width: 120px;
    }

/* ---------- Tables ---------- */
.hrdb-scope table.table {
    font-size: 12.5px;
    border-collapse: collapse;
}

    .hrdb-scope table.table > thead > tr > th,
    .hrdb-scope table.table thead th {
        text-align: left;
        background: var(--hrdb-surface-2);
        color: var(--hrdb-ink-soft);
        font-weight: 700;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        padding: 10px 14px;
        border-bottom: 1px solid var(--hrdb-line);
        border-top: none !important;
        white-space: nowrap;
    }
    /* header rows that aren't inside a real <thead> (several partials use plain <tr><th>) */
    .hrdb-scope table.table > tr:first-child > th,
    .hrdb-scope table.table tbody > tr > th {
        background: var(--hrdb-surface-2);
        color: var(--hrdb-ink-soft);
        font-weight: 700;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        border-top: none !important;
    }

    .hrdb-scope table.table td,
    .hrdb-scope table.table th {
        padding: 11px 14px;
        border-bottom: 1px solid var(--hrdb-line);
        border-top: none !important;
        vertical-align: top;
    }

    .hrdb-scope table.table.table-striped > tbody > tr:nth-of-type(odd) {
        background: transparent;
    }

    .hrdb-scope table.table tbody tr:hover td {
        background: var(--hrdb-surface-2);
    }

    .hrdb-scope table.table tr.btn-primary td,
    .hrdb-scope table.table tr.btn-primary th {
        background: var(--hrdb-primary) !important;
        color: #fff;
    }


/* ---------- Birthday list (.products-list.product-list-in-box) ---------- */
.hrdb-scope .products-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

    .hrdb-scope .products-list > .item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px;
        border-radius: 12px !important;
        transition: background .15s ease;
        list-style: none;
        border-bottom: none !important;
    }

        .hrdb-scope .products-list > .item:hover {
            background: var(--hrdb-surface-2);
        }

        .hrdb-scope .products-list > .item.btn-primary {
            background: var(--hrdb-primary) !important;
        }

    .hrdb-scope .products-list .product-img {
        flex-shrink: 0;
        width: auto;
    }

        .hrdb-scope .products-list .product-img img.thumbnail {
            width: 42px;
            height: 42px;
            border-radius: 11px !important;
            object-fit: cover;
            border: 2px solid var(--hrdb-line);
        }

    .hrdb-scope .products-list .product-info {
        flex: 1;
        min-width: 0;
    }

    .hrdb-scope .products-list .product-title {
        font-size: 12.5px;
        font-weight: 600;
        display: block;
    }

        .hrdb-scope .products-list .product-title .label {
            font-family: var(--hrdb-font-mono);
            font-size: 11px !important;
            font-weight: 600;
            background: var(--hrdb-primary-tint);
            color: var(--hrdb-primary-dark);
            padding: 5px 10px;
            border-radius: 8px !important;
        }

    .hrdb-scope .products-list > .item.btn-primary .product-title .label {
        background: rgba(255,255,255,0.25);
        color: #fff;
    }

    .hrdb-scope .products-list .product-description {
        font-size: 11.5px;
        color: var(--hrdb-ink-soft);
        margin-top: 1px;
    }

/* ---------- Donut-chart legend (classes already emitted by the existing
   Chart.js htmlLegend plugin in Dashboard_Index.cshtml and
   _Employee_Strength_Details_Report.cshtml — restyle only, do not rename) --- */
.hrdb-scope .scroll {
    background: var(--hrdb-surface);
}

    .hrdb-scope .scroll::-webkit-scrollbar {
        width: 5px;
    }

    .hrdb-scope .scroll::-webkit-scrollbar-thumb {
        background: var(--hrdb-line);
        border-radius: 99px !important;
    }

.hrdb-scope .listContainer {
    padding: 0 !important;
    margin: 0;
    list-style: none;
}

.hrdb-scope .li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px !important;
    transition: background .15s ease;
    list-style: none;
}

    .hrdb-scope .li:hover {
        background: var(--hrdb-surface-2);
    }

.hrdb-scope .boxSpan {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    border-radius: 50% !important;
    border: none !important;
    flex-shrink: 0;
    cursor: pointer;
}

.hrdb-scope .textContainer {
    font-family: var(--hrdb-font-body);
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--hrdb-ink);
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.hrdb-scope .chart-container {
    position: relative;
}

/* ---------- Donut + progress-bar legend — mirrors the Enquiry Analytics
   dashboard's proven .enqad-donut-flex / .enqad-legend design (see
   MCampusUI/Areas/Enquiry/Views/Default/EnquiryAnalyticsDashboard_New.cshtml
   and its .enqad-* rules in this same stylesheet file) so the two systems read
   as one visual language. Center total is drawn directly on the canvas by a
   Chart.js plugin (see hrdbCenterText in the chart scripts), same as enqad's
   enqadCenterText — no separate absolutely-positioned overlay div needed, so
   it always stays centered through any responsive resize. ---------- */
.hrdb-scope .hrdb-donut-flex {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.hrdb-scope .hrdb-chart-wrap {
    position: relative;
    flex: 1 1 190px;
    min-width: 170px;
    max-width: 260px;
    height: 220px;
    z-index: 2; /* canvas above legend so tooltip overlaps it */
}

.hrdb-scope .hrdb-legend {
    position: relative;
    z-index: 1;
}

.hrdb-scope #jsAttendanceChartSection .hrdb-chart-wrap {
    max-width: 190px;
    height: 180px;
}

.hrdb-scope .hrdb-legend {
    flex: 1 1 220px;
    min-width: 200px;
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 4px;
}

    .hrdb-scope .hrdb-legend::-webkit-scrollbar {
        width: 5px;
    }

    .hrdb-scope .hrdb-legend::-webkit-scrollbar-thumb {
        background: var(--hrdb-line);
        border-radius: 99px !important;
    }

.hrdb-scope .hrdb-legend-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: 8px !important;
    cursor: pointer;
    transition: background .12s ease;
}

    .hrdb-scope .hrdb-legend-row:hover {
        background: var(--hrdb-surface-2);
    }

.hrdb-scope .hrdb-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50% !important;
    flex: none;
}

.hrdb-scope .hrdb-legend-name {
    font-family: var(--hrdb-font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--hrdb-ink);
    flex: 0 1 34%;
    min-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hrdb-scope .hrdb-legend-track {
    flex: 1 1 auto;
    height: 6px;
    background: var(--hrdb-surface-2);
    border: 1px solid var(--hrdb-line);
    border-radius: 99px !important;
    overflow: hidden;
    min-width: 40px;
}

.hrdb-scope .hrdb-legend-fill {
    display: block;
    height: 100%;
    border-radius: 99px !important;
}

.hrdb-scope .hrdb-legend-val {
    font-family: var(--hrdb-font-mono);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--hrdb-ink-soft);
    flex: none;
    min-width: 32px;
    text-align: right;
}

@media (max-width: 768px) {
    .hrdb-scope .hrdb-donut-flex {
        justify-content: center;
    }

    .hrdb-scope .hrdb-chart-wrap {
        margin: 0 auto;
    }
}

@media (max-width: 380px) {
    .hrdb-scope .hrdb-legend-track {
        display: none;
    }
}

/* ---------- Horizontal bar list (replaces the donut for Employee Strength's own
   main widget + drawer breakdown) — labelled progress bars, one per category,
   scrollable when there are many. ---------- */
.hrdb-scope .hrdb-hbar-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

    .hrdb-scope .hrdb-hbar-list::-webkit-scrollbar {
        width: 5px;
    }

    .hrdb-scope .hrdb-hbar-list::-webkit-scrollbar-thumb {
        background: var(--hrdb-line);
        border-radius: 99px !important;
    }
/* Inside a panel-body the panel itself is the scroll container — remove the list's
   own cap so only one scrollbar appears. The standalone drawer hbar-list keeps its cap. */
.hrdb-scope .hrdb-panel-body .hrdb-hbar-list {
    max-height: none;
    overflow-y: visible;
}

.hrdb-scope .hrdb-hbar-row {
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px !important;
    transition: background .12s ease;
}

    .hrdb-scope .hrdb-hbar-row:hover {
        background: var(--hrdb-surface-2);
    }

.hrdb-scope .hrdb-hbar-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--hrdb-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--hrdb-ink);
    margin-bottom: 6px;
}

.hrdb-scope .hrdb-hbar-num {
    font-family: var(--hrdb-font-mono);
    color: var(--hrdb-ink-soft);
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
}

.hrdb-scope .hrdb-hbar-track {
    height: 9px;
    background: var(--hrdb-surface-2);
    border: 1px solid var(--hrdb-line);
    border-radius: 20px !important;
    overflow: hidden;
}

.hrdb-scope .hrdb-hbar-fill {
    display: block;
    height: 100%;
    border-radius: 20px !important;
    transition: width .5s ease;
}

/* ---------- Donut table view (toggled alongside the chart view) ---------- */
.hrdb-scope .hrdb-table-view-donut {
    display: none;
    padding: 4px 14px 14px;
}

    .hrdb-scope .hrdb-table-view-donut.active {
        display: block;
    }

    .hrdb-scope .hrdb-table-view-donut tfoot th {
        background: var(--hrdb-surface-2);
        border-top: 1px solid var(--hrdb-line);
    }

/* ---------- Status tag chips (attendance remarks / leave-type badges) ---------- */
.hrdb-scope .hrdb-tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 7px !important;
}

.hrdb-scope .hrdb-tag-odd,
.hrdb-scope .hrdb-tag-lm,
.hrdb-scope .hrdb-tag-eg,
.hrdb-scope .hrdb-tag-hd {
    background: var(--hrdb-coral-tint);
    color: #D9502F;
}

.hrdb-scope .hrdb-tag-holiday {
    background: var(--hrdb-teal-tint);
    color: #0D8A7C;
}

/* ---------- Empty state (all widgets, replaces plain Bootstrap alert) ---------- */
.hrdb-scope .hrdb-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 20px 40px;
    text-align: center;
}

.hrdb-scope .hrdb-empty-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px !important;
    background: var(--hrdb-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    font-size: 24px;
    color: var(--hrdb-primary);
    opacity: .65;
    flex-shrink: 0;
}

.hrdb-scope .hrdb-empty-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--hrdb-ink-soft);
    margin: 0 0 4px;
}

.hrdb-scope .hrdb-empty-sub {
    font-size: 11.5px;
    color: var(--hrdb-ink-soft);
    opacity: .65;
    margin: 0;
}

/* ---------- bday-list section label (PayerGroup / category dividers) ---------- */
.hrdb-scope .bday-group-hdr {
    padding: 8px 10px 2px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--hrdb-ink-soft);
    text-transform: uppercase;
    letter-spacing: .55px;
    list-style: none;
}

/* ---------- Retiring-this-month highlight (retirement report) ---------- */
.hrdb-scope .bday-item.is-retiring {
    background: linear-gradient(90deg, var(--hrdb-coral-tint), var(--hrdb-amber-tint) 70%);
    border-radius: 14px !important;
}

    .hrdb-scope .bday-item.is-retiring:hover {
        background: linear-gradient(90deg, var(--hrdb-coral-tint), var(--hrdb-amber-tint) 70%);
    }

.hrdb-scope .bday-item-retiring-name {
    color: #B5401F !important;
}

/* ---------- Attendance list (bday-list style) ---------- */
.hrdb-scope .att-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.hrdb-scope .att-time {
    font-family: var(--hrdb-font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--hrdb-ink-soft);
    white-space: nowrap;
}

.hrdb-scope .att-tag-present {
    background: #DCFCE7;
    color: #166534;
}

.hrdb-scope .att-tag-absent {
    background: #FEE2E2;
    color: #B91C1C;
}

.hrdb-scope .att-tag-late {
    background: #FEF3C7;
    color: #92400E;
}

.hrdb-scope .att-tag-oddpunch {
    background: var(--hrdb-coral-tint);
    color: #D9502F;
}

.hrdb-scope .att-avatar-absent {
    opacity: .55;
}

.hrdb-scope .att-name-absent {
    color: var(--hrdb-ink-soft) !important;
}

/* ---------- Latest Statement of Salary (bday-list card style) ---------- */
.hrdb-scope .salary-month-hdr {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--hrdb-ink-soft);
}

.hrdb-scope .salary-month-label {
    color: var(--hrdb-ink);
    font-family: var(--hrdb-font-mono);
}

.hrdb-scope .salary-month-vs {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.hrdb-scope .salary-amt {
    font-family: var(--hrdb-font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--hrdb-ink);
    white-space: nowrap;
}

.hrdb-scope .salary-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px 12px;
    border-top: 1px solid var(--hrdb-line);
    margin-top: 4px;
    list-style: none;
}

.hrdb-scope .salary-total-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--hrdb-ink);
}

    .hrdb-scope .salary-total-label small {
        font-weight: 400;
        color: var(--hrdb-ink-soft);
    }

.hrdb-scope .salary-total-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.hrdb-scope .salary-total-amt {
    font-size: 13.5px;
}

/* ---------- Modals ---------- */
.hrdb-scope .modal-content {
    border-radius: var(--hrdb-radius-lg) !important;
    border: 1px solid var(--hrdb-line);
    box-shadow: var(--hrdb-shadow-soft);
}

/* ---------- Right-side drill-down drawer (Employee Strength V2) ----------
   Local to the widget that renders it (see _Employee_Strength_Report_V2.cshtml)
   — a lighter-weight alternative to the shared #HR_Report_Modal_New modal,
   used only for this widget's own slice/legend drill-down. ---------- */
.hrdb-scope .hrdb-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 1050;
}

    .hrdb-scope .hrdb-drawer-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

.hrdb-scope .hrdb-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 50%;
    background: var(--hrdb-surface);
    box-shadow: -8px 0 32px -8px rgba(15, 23, 42, .25);
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 1051;
    display: flex;
    flex-direction: column;
}

    .hrdb-scope .hrdb-drawer.is-open {
        transform: translateX(0);
    }

.hrdb-scope .hrdb-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--hrdb-line);
    flex: none;
}

.hrdb-scope .hrdb-drawer-title {
    font-family: var(--hrdb-font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--hrdb-ink);
}

.hrdb-scope .hrdb-drawer-close {
    width: 28px;
    height: 28px;
    border-radius: 8px !important;
    background: var(--hrdb-surface-2);
    border: 1px solid var(--hrdb-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--hrdb-ink-soft);
    font-size: 12px;
    padding: 0;
    transition: all .15s ease;
}

    .hrdb-scope .hrdb-drawer-close:hover {
        border-color: var(--hrdb-primary);
        color: var(--hrdb-primary-dark);
    }

.hrdb-scope .hrdb-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
}

.hrdb-scope .hrdb-drawer-breadcrumb {
    font-family: var(--hrdb-font-display);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--hrdb-ink);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hrdb-scope .hrdb-drawer-back {
    color: var(--hrdb-ink-soft);
    font-size: 13px;
    cursor: pointer;
}

    .hrdb-scope .hrdb-drawer-back:hover {
        color: var(--hrdb-primary-dark);
    }

.hrdb-scope .hrdb-drawer-dim-switch {
    margin-bottom: 14px;
}

.hrdb-scope .hrdb-drawer-emplist-title {
    font-family: var(--hrdb-font-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--hrdb-ink);
    padding-top: 14px;
    margin-bottom: 8px;
    border-top: 1px solid var(--hrdb-line);
}

.hrdb-scope .hrdb-drawer-dim-switch select {
    font-family: var(--hrdb-font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--hrdb-ink);
    background: var(--hrdb-surface-2);
    border: 1px solid var(--hrdb-line);
    border-radius: 9px !important;
    padding: 7px 10px;
    width: 100%;
}

.hrdb-scope .hrdb-drawer-empty {
    padding: 30px 10px;
    text-align: center;
    color: var(--hrdb-ink-faint);
    font-size: 12.5px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .hrdb-scope .hrdb-drawer {
        width: 95%;
    }
}


/* ---------- Quick search inside drill-down drawer ---------- */
.hrdb-scope .hrdb-drawer-search-wrap {
    margin-bottom: 10px;
}

.hrdb-scope .hrdb-drawer-search {
    background: var(--hrdb-surface-2);
    border: 1px solid var(--hrdb-line);
    border-radius: 9px !important;
    font-size: 12px;
    padding: 7px 12px;
    width: 100%;
    box-shadow: none;
}

    .hrdb-scope .hrdb-drawer-search:focus {
        border-color: var(--hrdb-primary);
        outline: none;
        box-shadow: none;
    }

/* ---------- Student Strength bar-chart host panel (BarChartStudentStrength) ---------- */
/* Outer panel: allow the report-type dropdown to overflow panel bounds */
.hrdb-scope .ssbar-outer-panel {
    /*overflow: visible !important;*/
}

    .hrdb-scope .ssbar-outer-panel > .enqad-panel-head {
        overflow: visible !important;
        z-index: 10 !important;
    }

        .hrdb-scope .ssbar-outer-panel > .enqad-panel-head .dropdown-menu {
            z-index: 1060 !important;
        }
/* Inner chart wrapper: keep below the outer dropdown, clip to panel's bottom radius */
.ssbar-inner-wrap {
    position: relative;
    z-index: 1;
    border-bottom-left-radius: var(--hrdb-radius-lg) !important;
    border-bottom-right-radius: var(--hrdb-radius-lg) !important;
    overflow: hidden;
}
    /* Inner panel: strip duplicate chrome and allow chart to overflow without clipping */
    .ssbar-inner-wrap .hrdb-panel {
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .ssbar-inner-wrap .hrdb-panel-body {
        overflow: visible !important;
    }

    .ssbar-inner-wrap .enqad-panel-head {
        border-top: 1px solid var(--hrdb-line);
        border-radius: 0 !important;
    }
/* ═══ SchoolFilterGraph, YearFilterGraph & FullSchoolYearFilterModal — centred overlay + hrdb design ═══ */
/* Bootstrap sets overflow:hidden on .modal — override so flex centering works */
#SchoolFilterGraph, #YearFilterGraph, #FullSchoolYearFilterModal,
body > #SchoolFilterGraph, body > #YearFilterGraph, body > #FullSchoolYearFilterModal {
    z-index: 10500 !important;
    overflow: auto !important;
}

    #SchoolFilterGraph.in, #SchoolFilterGraph.show, #YearFilterGraph.in, #YearFilterGraph.show,
    #FullSchoolYearFilterModal.in, #FullSchoolYearFilterModal.show {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    /*.modal-backdrop, body > .modal-backdrop {
    z-index: 10490 !important;
}*/
    #SchoolFilterGraph .modal-dialog, #YearFilterGraph .modal-dialog, #FullSchoolYearFilterModal .modal-dialog {
        margin: 20px auto;
        width: 92%;
        max-width: 880px;
    }

    #SchoolFilterGraph .modal-content, #YearFilterGraph .modal-content, #FullSchoolYearFilterModal .modal-content {
        border-radius: 14px !important;
        border: 1px solid var(--hrdb-line);
        box-shadow: 0 24px 64px rgba(0,0,0,.22);
        overflow: hidden;
        background: #ffffff !important;
    }

    /* Header */
    #SchoolFilterGraph .modal-header, #YearFilterGraph .modal-header, #FullSchoolYearFilterModal .modal-header {
        background: #ffffff !important;
        border-bottom: 1px solid var(--hrdb-line) !important;
        padding: 16px 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    #SchoolFilterGraph .modal-title, #YearFilterGraph .modal-title, #FullSchoolYearFilterModal .modal-title {
        font-size: 15px !important;
        font-weight: 800 !important;
        color: var(--hrdb-ink, #1e293b) !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    #FullSchoolYearFilterModal .close {
        font-size: 24px !important;
        color: #64748b !important;
        opacity: 0.8 !important;
        margin: 0 !important;
        outline: none !important;
    }

display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--hrdb-line); background: var(--hrdb-surface);
}

#SchoolFilterGraph .modal-header .modal-title, #YearFilterGraph .modal-header .modal-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--hrdb-ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

    #SchoolFilterGraph .modal-header .modal-title i, #YearFilterGraph .modal-header .modal-title i {
        color: var(--hrdb-primary);
        font-size: 14px;
    }

#SchoolFilterGraph .modal-header .close, #YearFilterGraph .modal-header .close {
    font-size: 18px;
    color: var(--hrdb-ink-soft);
    opacity: 1;
    margin: 0;
    padding: 0;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    order: 1;
}

    #SchoolFilterGraph .modal-header .close:hover, #YearFilterGraph .modal-header .close:hover {
        color: var(--hrdb-ink);
    }

/* Body */
#SchoolFilterGraph .modal-body, #YearFilterGraph .modal-body {
    padding: 20px;
    max-height: 58vh;
    overflow-y: auto;
}

/* Footer */
#SchoolFilterGraph .modal-footer, #YearFilterGraph .modal-footer {
    padding: 12px 20px;
    background: var(--hrdb-surface-2);
    border-top: 1px solid var(--hrdb-line);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Strip AdminLTE box chrome from injected content */
#SchoolFilterGraph .box, #YearFilterGraph .box {
    box-shadow: none !important;
    border: none !important;
    margin-bottom: 0 !important;
    background: transparent !important;
}

#SchoolFilterGraph .box-header.with-border, #YearFilterGraph .box-header.with-border {
    display: none !important;
}

#SchoolFilterGraph .box-body, #YearFilterGraph .box-body {
    padding: 0 !important;
}

/* School & Year cards */
#SchoolFilterGraph .statistics.box-group,
#YearFilterGraph .year-card {
    position: relative !important;
    height: auto !important;
    min-height: 72px;
    padding: 10px 10px 8px !important;
    border: 2px solid var(--hrdb-line) !important;
    border-radius: 10px !important;
    background: var(--hrdb-surface) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
    text-align: center !important;
    margin-bottom: 10px;
}

    #SchoolFilterGraph .statistics.box-group:hover,
    #YearFilterGraph .year-card:hover {
        border-color: var(--hrdb-primary) !important;
        transform: translateY(-2px);
    }

    #SchoolFilterGraph .statistics.box-group .school-check,
    #YearFilterGraph .year-card .chkYearWiseLC {
        position: absolute !important;
        top: 6px !important;
        right: 6px !important;
        width: 15px;
        height: 15px;
        accent-color: var(--hrdb-primary);
        cursor: pointer;
        z-index: 1;
    }

    #YearFilterGraph .year-card.is-selected {
        border-color: var(--hrdb-primary) !important;
        background: var(--hrdb-primary-tint) !important;
    }
    /* Icon / image row → vertical stack */
    #SchoolFilterGraph .statistics.box-group > div {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px;
    }

    #SchoolFilterGraph .statistics.box-group .fa-university {
        font-size: 22px !important;
        color: var(--hrdb-primary);
        display: block;
        margin: 4px auto 2px;
    }

    #SchoolFilterGraph .statistics.box-group img {
        height: 32px !important;
        width: 32px !important;
        border-radius: 6px !important;
        border: 1px solid var(--hrdb-line) !important;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }

    #SchoolFilterGraph .statistics.box-group span {
        font-size: 9.5px !important;
        font-weight: 700 !important;
        color: var(--hrdb-ink) !important;
        text-transform: uppercase !important;
        word-break: break-word !important;
        line-height: 1.4;
        padding-right: 0 !important;
        display: block;
    }

/* sscht: hidden toolbar source + outer header slots */
.sscht-tb {
    display: none !important;
}

.ssbar-outer-panel .sscht-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ssbar-outer-panel .sscht-graph-subtitle {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--hrdb-ink-soft);
    letter-spacing: 0.01em;
}

#sscht-sw-ctrls {
    display: none;
    align-items: center;
    gap: 4px;
}
/* sscht body: inner content area (replaces stripped hrdb-panel-body) */
/* min-height matches chart view height so table view never shrinks the panel */
.ssbar-inner-wrap .sscht-body {
    overflow-y: auto;
    padding: 8px;
    min-height: 280px;
}

/* ── Equal-height row: Student Strength + Student Attendance ── */
.mi2-equal-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    min-height: 454px;
}

    .mi2-equal-row > [class*="col-"] {
        display: flex;
        flex-direction: column;
    }
        /* !important on > * so the clientLazyLoading wrapper always stays a flex column  */
        .mi2-equal-row > [class*="col-"] > * {
            flex: 1 !important;
            display: flex !important;
            flex-direction: column !important;
        }
    /* hrdb-scope is a CSS-var scope only (no display) — must add flex here to pass height to hrdb-panel */
    .mi2-equal-row .hrdb-scope {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .mi2-equal-row .hrdb-panel {
        flex: 1;
        height: auto !important;
        min-height: 454px;
    }

/* ---------- Student Attendance widget (ManagementIndex2 mi2sa) ---------- */
.hrdb-scope .mi2sa-outer {
    /* overflow: hidden inherited from .hrdb-panel — keeps rounded corners */
}

    .hrdb-scope .mi2sa-outer > .enqad-panel-head {
        overflow: visible !important;
        z-index: 10 !important;
        flex-wrap: wrap;
        gap: 6px;
    }

        .hrdb-scope .mi2sa-outer > .enqad-panel-head .dropdown-menu {
            z-index: 1060 !important;
        }

#mi2-sa-filter-lbl {
    display: none !important;
}

.hrdb-scope .mi2sa-lbl {
    font-size: 11px;
    font-weight: 600;
    color: var(--hrdb-ink-soft);
    white-space: nowrap;
    flex-shrink: 0;
}

.hrdb-scope .mi2sa-dateinput {
    background: var(--hrdb-surface-2);
    border: 1px solid var(--hrdb-line);
    border-radius: 6px !important;
    color: var(--hrdb-ink);
    padding: 0 8px;
    font-size: 11px;
    height: 26px;
    outline: none;
    cursor: pointer;
    width: 108px;
    flex-shrink: 0;
}

    .hrdb-scope .mi2sa-dateinput:focus {
        border-color: var(--hrdb-primary);
    }

.hrdb-scope .mi2sa-body {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

.hrdb-scope .mi2-sa-ddmenu {
    border-radius: 8px !important;
    border: 1px solid var(--hrdb-line) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
    padding: 4px 0 !important;
}

    .hrdb-scope .mi2-sa-ddmenu li a {
        padding: 8px 16px !important;
        color: var(--hrdb-ink) !important;
        display: block;
        font-size: 13px;
    }

    .hrdb-scope .mi2-sa-ddmenu li.active,
    .hrdb-scope .mi2-sa-ddmenu li.active > a,
    .hrdb-scope .mi2-sa-ddmenu li.active > a:hover,
    .hrdb-scope .mi2-sa-ddmenu li.active > a:focus {
        background: rgba(91,95,239,.08) !important;
        color: var(--hrdb-primary) !important;
        font-weight: 700;
    }

    .hrdb-scope .mi2-sa-ddmenu li:hover a {
        background: var(--hrdb-surface-2) !important;
    }
/* Suppress inner view chrome + propagate panel height via flex */
#AttendanceDetails {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

    #AttendanceDetails .saa-tb {
        display: none !important;
    }

    #AttendanceDetails .saa {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    #AttendanceDetails .saa-wrap {
        flex: 1 !important;
        min-height: 0 !important;
        height: auto !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
    }

    #AttendanceDetails .box {
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        margin-bottom: 0 !important;
    }

    #AttendanceDetails .box-header.with-border {
        display: none !important;
    }

    #AttendanceDetails .box-body {
        padding: 8px 12px !important;
    }
/* sw-ctrls controls moved from inner view by mi2SaLoadSwCtrls() */
#mi2-sw-ctrls .jsDatePicker {
    background: var(--hrdb-surface-2) !important;
    border: 1px solid var(--hrdb-line) !important;
    border-radius: 6px !important;
    color: var(--hrdb-ink) !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    height: 26px !important;
    outline: none !important;
    width: 108px !important;
    cursor: pointer;
}

#mi2-sw-ctrls .btn {
    background: var(--hrdb-surface-2) !important;
    border: 1px solid var(--hrdb-line) !important;
    color: var(--hrdb-ink) !important;
    box-shadow: none !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
}

    #mi2-sw-ctrls .btn:hover {
        background: var(--hrdb-surface-3, #e8eaf0) !important;
    }

/* ═══════════════════════════════════════════════════════════════
   School Attendance Analytics — saa-* component styles
   (sourced from _SchoolAttendanceAnalytics.cshtml, v7)
═══════════════════════════════════════════════════════════════ */

/* base reset scoped to .saa */
.saa * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.saa {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 12px;
}

/* card wrapper — standalone usage; stripped inside ManagementIndex2 by #AttendanceDetails rule */
.saa-wrap {
    background: var(--hrdb-surface);
    border-radius: var(--hrdb-radius-lg) !important;
    box-shadow: 0 2px 14px rgba(0,0,0,.09);
    border: 1px solid var(--hrdb-line);
    display: flex;
    flex-direction: column;
    height: 416px;
    overflow: hidden;
    position: relative;
}

/* toolbar — visual handled by enqad-panel-head; .saa-tb kept as hook for ManagementIndex2 hide rule */
.saa-tb-lbl {
    font-size: 11px;
    font-weight: 600;
    color: var(--hrdb-ink-soft);
    white-space: nowrap;
    flex-shrink: 0;
}

.saa-title {
    font-size: 12px;
    font-weight: 800;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* icon button overrides on top of enqad-box-btn */
.saa-ico-refresh.enqad-box-btn {
    background: linear-gradient(135deg, var(--hrdb-primary), #8b5cf6) !important;
    border-color: transparent !important;
    color: #fff !important;
}

    .saa-ico-refresh.enqad-box-btn:hover {
        filter: brightness(1.1);
    }

.saa-eye-btn.on {
    background: var(--hrdb-primary) !important;
    color: #fff !important;
    border-color: var(--hrdb-primary) !important;
}

/* body */
.saa-body {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 var(--hrdb-radius-lg) var(--hrdb-radius-lg) !important;
}

/* chart / table sections — absolute fill, toggle via .show */
.saa-chart-sec, .saa-tbl-sec {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}

.saa-tbl-sec {
    display: none;
}

    .saa-tbl-sec.show {
        display: flex;
    }

/* chart inner layout */
.saa-chart-top {
    padding: 7px 12px 0;
    flex-shrink: 0;
}

.saa-sec-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.saa-sec-ttl {
    font-size: 11px;
    font-weight: 800;
    color: var(--hrdb-ink);
    display: flex;
    align-items: center;
    gap: 4px;
}

.sdot {
    width: 6px;
    height: 6px;
    border-radius: 50% !important;
    flex-shrink: 0;
    display: inline-block;
}

.saa-chip {
    font-size: 9px;
    color: var(--hrdb-ink-soft);
    font-weight: 600;
    background: var(--hrdb-surface-2);
    padding: 1px 6px;
    border-radius: 20px !important;
}

/* legend */
.saa-leg {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 0 12px 5px;
    flex-shrink: 0;
}

.saa-lp {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 20px !important;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
}

.saa-lp-dot {
    width: 4px;
    height: 4px;
    border-radius: 50% !important;
    background: rgba(255,255,255,.75);
}

/* bars */
.saa-bars-wrap {
    flex: 1;
    min-height: 0;
    padding: 8px 12px 44px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
}

    .saa-bars-wrap::-webkit-scrollbar {
        display: none;
    }

.saa-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

    .saa-bars .saa-br {
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
        height: 34px;
        flex-shrink: 0;
    }

.saa-br-lbl {
    width: 80px;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    color: var(--hrdb-ink);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.saa-br-track {
    flex: 1;
    height: 28px;
    background: var(--hrdb-surface-2);
    border-radius: 28px !important;
    display: flex;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: filter .13s, box-shadow .13s;
}

    .saa-br-track:hover {
        filter: brightness(1.07);
        box-shadow: 0 2px 7px rgba(0,0,0,.12);
    }

.saa-br-inner {
    display: flex;
    width: 100%;
    height: 100%;
    border-radius: 28px !important;
    overflow: hidden;
}

.saa-br-seg {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: rgba(255,255,255,.92);
    min-width: 0;
    overflow: hidden;
}

.saa-br-track::after {
    content: '↗';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    color: rgba(255,255,255,.45);
    pointer-events: none;
}

.saa-br-tot {
    width: 44px;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    color: var(--hrdb-ink-soft);
    text-align: left;
}

/* float tooltip */
.saa-float-tip {
    display: none;
    position: absolute;
    z-index: 300;
    background: #0f172a;
    color: #f8fafc;
    border-radius: 8px !important;
    padding: 6px 10px;
    font-size: 9px;
    min-width: 170px;
    max-width: 220px;
    box-shadow: 0 5px 18px rgba(0,0,0,.35);
    pointer-events: none;
    border: 1px solid rgba(99,102,241,.3);
}

    .saa-float-tip b {
        color: #a5f3fc;
        font-size: 10px;
        display: block;
        margin-bottom: 3px;
    }

.saa-tip-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
}

.saa-tip-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50% !important;
    margin-right: 2px;
    vertical-align: middle;
}

.saa-tip-foot {
    margin-top: 4px;
    font-size: 8px;
    color: #7dd3fc;
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 3px;
}

/* skeleton */
.saa-sk {
    display: block;
    border-radius: 4px !important;
    height: 11px;
    background: linear-gradient(90deg, var(--hrdb-surface-2) 25%, var(--hrdb-line) 50%, var(--hrdb-surface-2) 75%);
    background-size: 200% 100%;
    animation: saa-sksh 1.4s infinite;
}

.saa-sk-bar {
    height: 28px;
    border-radius: 28px !important;
    flex: 1;
    background: linear-gradient(90deg, var(--hrdb-surface-2) 25%, var(--hrdb-line) 50%, var(--hrdb-surface-2) 75%);
    background-size: 200% 100%;
    animation: saa-sksh 1.4s infinite;
}

@keyframes saa-sksh {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* pager */
.saa-pager {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 36px;
    border-top: 1px solid var(--hrdb-line);
    background: var(--hrdb-surface-2);
    z-index: 2;
}

.saa-pager.show {
    display: block;
}

/* Guarantee pagers inside hidden parent views can NEVER render */
.saa-chart-sec[style*="display: none"] .saa-pager,
.saa-chart-sec[style*="display:none"] .saa-pager,
.saa-tbl-sec:not(.show) .saa-pager,
.saa-tbl-sec[style*="display: none"] .saa-pager,
.saa-tbl-sec[style*="display:none"] .saa-pager {
    display: none !important;
}

.saa-pg-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    height: 100%;
}

.saa-pager .pg-lbl {
    text-align: center;
    font-size: 9px;
    font-weight: 800;
    color: var(--hrdb-ink-soft);
    white-space: nowrap;
}

.pg-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    border: none !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    touch-action: manipulation;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all .14s ease !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.12) !important;
}

.pg-btn.btn-prev,
.pg-btn#saa-c-prev, .pg-btn#saa-t-prev,
.pg-btn#syw-c-prev, .pg-btn#syw-t-prev {
    background: var(--hrdb-primary, #1d6fb5) !important;
    color: #ffffff !important;
}

.pg-btn.btn-prev:hover:not(:disabled),
.pg-btn#saa-c-prev:hover:not(:disabled), .pg-btn#saa-t-prev:hover:not(:disabled),
.pg-btn#syw-c-prev:hover:not(:disabled), .pg-btn#syw-t-prev:hover:not(:disabled) {
    background: var(--hrdb-primary-dark, #1565c0) !important;
    color: #ffffff !important;
    box-shadow: var(--hrdb-shadow-soft, 0 2px 8px rgba(29,111,181,.4)) !important;
    transform: translateY(-1px);
}

.pg-btn.btn-next,
.pg-btn#saa-c-next, .pg-btn#saa-t-next,
.pg-btn#syw-c-next, .pg-btn#syw-t-next {
    background: linear-gradient(135deg, var(--hrdb-primary, #1d6fb5), var(--hrdb-primary-dark, #1565c0)) !important;
    color: #ffffff !important;
}

.pg-btn.btn-next:hover:not(:disabled),
.pg-btn#saa-c-next:hover:not(:disabled), .pg-btn#saa-t-next:hover:not(:disabled),
.pg-btn#syw-c-next:hover:not(:disabled), .pg-btn#syw-t-next:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--hrdb-primary-dark, #1565c0), #0d47a1) !important;
    color: #ffffff !important;
    box-shadow: var(--hrdb-shadow-soft, 0 2px 8px rgba(21,101,192,.4)) !important;
    transform: translateY(-1px);
}

.pg-btn:disabled {
    background: #cbd5e1 !important;
    color: #94a3b8 !important;
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* summary strip */
.saa-sum {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 12px;
    background: var(--hrdb-surface-2);
    border-bottom: 1px solid var(--hrdb-line);
}

.saa-sum-card {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px !important;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    border: 1px solid transparent;
}

.saa-sum-lbl {
    font-size: 9px;
    font-weight: 600;
    opacity: .75;
}

.saa-sum-val {
    font-size: 11px;
    font-weight: 900;
}

/* table */
.saa-tbl-hdr {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    border-bottom: 1px solid var(--hrdb-surface-2);
    gap: 6px;
}

.saa-srch {
    border: 1.5px solid var(--hrdb-line);
    border-radius: 6px !important;
    padding: 2px 8px;
    font-size: 10px;
    outline: none;
    background: var(--hrdb-surface-2);
    width: 128px;
    height: 24px;
}

    .saa-srch:focus {
        border-color: var(--hrdb-primary);
        background: var(--hrdb-surface);
    }

.saa-tbl-wrap {
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    padding-bottom: 38px;
}

.saa-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
    table-layout: fixed;
}

    .saa-tbl col.c-rk {
        width: 28px;
    }

    .saa-tbl col.c-sc {
        width: 140px;
    }

    .saa-tbl col.c-ty {
        width: 62px;
    }

    .saa-tbl col.c-to {
        width: 54px;
    }

    .saa-tbl col.c-pc {
        width: 88px;
    }

    .saa-tbl thead tr th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--hrdb-surface-2);
        color: var(--hrdb-ink-soft);
        font-weight: 800;
        padding: 4px 6px;
        text-align: left;
        border-bottom: 2px solid var(--hrdb-line);
        border-right: 1px solid var(--hrdb-line);
        white-space: nowrap;
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: .3px;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .saa-tbl thead th:last-child {
        border-right: none;
    }

    .saa-tbl thead th:hover {
        background: var(--hrdb-primary-tint, #ede9fe);
        color: var(--hrdb-primary, #6d28d9);
    }

    .saa-tbl thead th.saa-srt {
        background: var(--hrdb-primary-tint, #ede9fe);
        color: var(--hrdb-primary, #6d28d9);
    }

        .saa-tbl thead th.saa-srt::after {
            content: ' ↕';
            font-size: 7px;
        }

    .saa-tbl tbody td {
        padding: 4px 6px;
        border-bottom: 1px solid var(--hrdb-surface-2);
        border-right: 1px solid var(--hrdb-surface-2);
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .saa-tbl tbody td:last-child {
            border-right: none;
        }

    .saa-tbl tbody tr:hover td {
        background: var(--hrdb-primary-tint, #f5f3ff) !important;
    }

    .saa-tbl tr.saa-rg td {
        background: #f0fdf4;
    }

    .saa-tbl tr.saa-ro td {
        background: #fffbeb;
    }

    .saa-tbl tr.saa-rr td {
        background: #fff1f2;
    }

    .saa-tbl tr.saa-rtot td {
        background: var(--hrdb-primary-tint, #ede9fe) !important;
        font-weight: 900;
        border-top: 2px solid var(--hrdb-primary, #c4b5fd);
        border-bottom: none;
    }

/* school cell */
.saa-sc-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.saa-sc-av {
    width: 20px;
    height: 20px;
    border-radius: 4px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
}

.saa-sc-nm {
    font-weight: 700;
    color: var(--hrdb-ink);
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saa-rk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 3px !important;
    font-size: 8px;
    font-weight: 900;
}

.saa-rk1 {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff;
}

.saa-rk2 {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    color: #fff;
}

.saa-rk3 {
    background: linear-gradient(135deg, #fb923c, #f97316);
    color: #fff;
}

.saa-rkn {
    background: var(--hrdb-surface-2);
    color: var(--hrdb-ink-soft);
}

.saa-bdg {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 20px !important;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.saa-pc-val {
    font-size: 10px;
    font-weight: 900;
}

.saa-pc-bar {
    height: 3px;
    border-radius: 2px !important;
    background: var(--hrdb-surface-2);
    overflow: hidden;
    margin-top: 2px;
}

.saa-pc-fill {
    height: 100%;
    border-radius: 2px !important;
}

.saa-nodata {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 5px;
    color: var(--hrdb-ink-soft);
    text-align: center;
}

    .saa-nodata i {
        font-size: 20px;
    }

    .saa-nodata p {
        font-size: 10px;
    }

#AttendanceDetails .saa-body {
    border-radius: 0 !important;
}

/* ---- Attendance report drawer inline loader (saaOpenReport) ---- */
.saa-rpt-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    gap: 18px;
}

.saa-rpt-spin {
    width: 44px;
    height: 44px;
    border-radius: 50% !important;
    border: 3px solid #E7E9F4;
    border-top-color: #5B5FEF;
    border-right-color: #8B5CF6;
    animation: saa-rpt-spin 0.8s linear infinite;
}

@keyframes saa-rpt-spin {
    to {
        transform: rotate(360deg);
    }
}

.saa-rpt-lbl {
    font-size: 12px;
    font-weight: 600;
    color: #6B7094;
    font-family: 'Inter', system-ui, sans-serif;
    letter-spacing: .2px;
}

.saa-rpt-err {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 30px 20px;
    color: #ef4444;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', system-ui, sans-serif;
}

/* ---- Panel footer note strip ---- */
.hrdb-scope .hrdb-panel-footer {
    padding: 7px 14px 9px;
    background: var(--hrdb-surface-2);
    border-top: 1px solid var(--hrdb-line);
    flex-shrink: 0;
}

.hrdb-scope .hrdb-panel-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.hrdb-note-collapsible {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.hrdb-note-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    outline: none;
    user-select: none;
}

.hrdb-note-summary::-webkit-details-marker,
.hrdb-note-summary::marker {
    display: none !important;
}

.hrdb-note-arrow {
    font-size: 9px;
    color: var(--hrdb-primary);
    margin-left: 4px;
    transition: transform .2s ease;
    display: inline-block;
}

details.hrdb-note-collapsible:not([open]) .hrdb-note-arrow {
    transform: rotate(0deg);
}

details.hrdb-note-collapsible[open] .hrdb-note-arrow {
    transform: rotate(180deg);
}

.hrdb-scope .hrdb-note-ic {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50% !important;
    background: var(--hrdb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

    .hrdb-scope .hrdb-note-ic i {
        font-size: 8px;
        color: #fff;
        line-height: 1;
    }

.hrdb-scope .hrdb-note-body {
    flex: 1;
    min-width: 0;
}

.hrdb-scope .hrdb-note-lbl {
    font-size: 10px;
    font-weight: 700;
    color: var(--hrdb-primary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hrdb-scope .hrdb-note-body ul {
    margin: 0;
    padding-left: 13px;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hrdb-scope .hrdb-note-body li {
    font-size: 10.5px;
    color: var(--hrdb-ink-soft);
    line-height: 1.5;
}

/* ─── Desktop & Laptop View (min-width: 992px) — 100% UNTOUCHED FIXED HEIGHT & EXPANDED NOTE ─── */
@media (min-width: 992px) {
    .hrdb-note-summary {
        cursor: default;
        pointer-events: none;
    }
    .hrdb-note-arrow {
        display: none !important;
    }
    details.hrdb-note-collapsible .hrdb-note-body {
        display: block !important;
        margin-top: 2px;
    }
}

/* ─── Mobile Header Responsiveness (max-width: 768px) ─── */
@media (max-width: 768px) {
    .hrdb-scope .enqad-panel-head,
    .enqad-panel-head {
        flex-wrap: wrap !important;
        padding: 10px 14px !important;
        gap: 6px !important;
    }

    .hrdb-scope .enqad-panel-head > form {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .hrdb-scope .enqad-panel-title,
    .enqad-panel-title {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 2px !important;
    }

    .hrdb-scope .enqad-panel-hd-right,
    .enqad-panel-hd-right {
        width: 100% !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        margin-top: 2px;
    }

    #mi2-saa-ctrls,
    #mi2-sw-ctrls {
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }
}

/* ─── Mobile & Tablet View (max-width: 991px) — DYNAMIC EXPANDED BODY & COMPACT COLLAPSIBLE NOTE ─── */
@media (max-width: 991px) {
    /*.hrdb-scope .hrdb-panel,*/
    .hrdb-scope .hrdb-panel.mi2sa-outer {
        height: auto !important;
        min-height: 480px !important;
        max-height: none !important;
    }
    .hrdb-scope .hrdb-panel-body,
    .hrdb-scope .mi2sa-body {
        flex: 1 1 auto !important;
        min-height: 380px !important;
        max-height: none !important;
        /*overflow: visible !important;*/
    }
    #AttendanceDetails,
    #AttendanceDetails .saa,
    #AttendanceDetails .saa-wrap,
    .saa-wrap {
        height: auto !important;
        min-height: 380px !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .saa-chart-sec {
        min-height: 380px !important;
        height: auto !important;
    }
    .saa-bars-wrap {
        min-height: 220px !important;
        padding-bottom: 44px !important;
        overflow: visible !important;
    }
    .saa-tbl-sec {
        min-height: 320px !important;
        height: auto !important;
    }
    .saa-tbl-wrap {
        min-height: 260px !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    /* Compact sleek note footer on mobile & tablet */
    .hrdb-scope .hrdb-panel-footer {
        padding: 6px 12px !important;
        background: #f8fafc !important;
        border-top: 1px solid var(--hrdb-line) !important;
    }
    .hrdb-note-summary {
        font-size: 10px !important;
        padding: 1px 0;
    }
    .hrdb-note-body {
        margin-top: 4px;
        padding-top: 4px;
        border-top: 1px dashed rgba(99,102,241,0.25);
    }
    .hrdb-scope .hrdb-note-body ul {
        padding-left: 14px !important;
    }
    .hrdb-scope .hrdb-note-body li {
        font-size: 9.5px !important;
        line-height: 1.4 !important;
    }
}

/* ---- Attendance Type Pie Chart inner view (atpc) ---- */
#AttendanceDetails .hrdb-scope {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.hrdb-scope .atpc-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#AttendanceDetails .atpc-tb {
    display: none !important;
}

.hrdb-scope .atpc-tb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--hrdb-line);
    min-height: 38px;
}

.hrdb-scope .atpc-tb-left {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.hrdb-scope .atpc-hd-lbl {
    font-size: 11px;
    font-weight: 600;
    color: var(--hrdb-ink-soft);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hrdb-scope .atpc-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
}

/* ─── atpc Table & Toolbar ─── */
.atpc-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

    .atpc-tbl thead th {
        background: var(--hrdb-surface-2, #f8fafc);
        color: var(--hrdb-primary, #4338ca);
        font-weight: 800;
        padding: 6px 10px;
        text-align: left;
        border-bottom: 2px solid var(--hrdb-primary, #6366f1);
        border-right: 1px solid var(--hrdb-line, #e9ecef);
        white-space: nowrap;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .3px;
    }

        .atpc-tbl thead th:last-child {
            border-right: none;
        }

    .atpc-tbl tbody td {
        padding: 5px 10px;
        border-bottom: 1px solid var(--hrdb-line, #f1f5f9);
        border-right: 1px solid var(--hrdb-surface-2, #f8fafc);
        vertical-align: middle;
        color: var(--hrdb-ink, #1e293b);
    }

        .atpc-tbl tbody td:last-child {
            border-right: none;
        }

    .atpc-tbl tbody tr:hover td {
        background: var(--hrdb-primary-tint, #f5f3ff) !important;
    }

    .atpc-tbl tfoot td,
    .atpc-tbl tfoot th {
        background: var(--hrdb-primary-tint, #ede9fe);
        color: var(--hrdb-primary, #4338ca);
        font-weight: 900;
        padding: 5px 10px;
        border-top: 2px solid var(--hrdb-primary, #6366f1);
        border-right: 1px solid var(--hrdb-line, #e9ecef);
    }

.atpc-school-row {
    cursor: pointer;
}

    .atpc-school-row.is-open td {
        background: var(--hrdb-primary-tint, #e8f4fd) !important;
    }

.hrps-tbl-drillrow { cursor: pointer; }
.hrdb-tbl-drillrow { cursor: pointer; }
.hrps-card-drillrow { cursor: pointer; }
.hrdb-card-drillrow { cursor: pointer; }

.atpc-tbl-hdr-row th, .atpc-tbl-hdr-row td {
    background: var(--hrdb-primary, #4338ca) !important;
    color: #fff !important;
    font-weight: 700;
}

.atpc-tbl-hdr-inner th, .atpc-tbl-hdr-inner td {
    background: var(--hrdb-primary-tint, #ede9fe) !important;
    color: var(--hrdb-primary, #4338ca) !important;
    font-weight: 700;
}

/* Toolbar Excel/PDF buttons — outlined primary */
.hrdb-scope .atpc-tb .enqad-box-btn {
    border-color: var(--hrdb-primary, #4338ca) !important;
    background: var(--hrdb-surface, #fff) !important;
    color: var(--hrdb-primary, #4338ca) !important;
}

    .hrdb-scope .atpc-tb .enqad-box-btn:hover {
        background: var(--hrdb-primary, #4338ca) !important;
        color: #fff !important;
        border-color: var(--hrdb-primary, #4338ca) !important;
    }

/* ---------- Responsive (mirrors the reference design breakpoints) ---------- */
@media (max-width: 1180px) {
    .hrdb-scope .col-lg-4 {
        width: 50%;
    }
}

@media (max-width: 980px) {
    .hrdb-scope .chart-container .col-md-4,
    .hrdb-scope .chart-container .col-md-8 {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .hrdb-scope .box-header {
        padding: 12px 14px;
    }

    .hrdb-scope .box-body {
        padding: 12px 14px;
    }

    .hrdb-scope table.table {
        font-size: 11.5px;
    }
}

/* ═══ Stacked Bar Chart Widget (sbc) ═══════════════════════════════ */
/* toolbar hidden — controls hoisted into outer panel header by mi2SaLoadSwCtrls() */
.sbc-tb {
    display: none !important;
}

.sbc-body {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 260px;
}

.sbc-chart-sec {
    flex: 1;
    min-height: 0;
    position: relative;
}

.sbc-canvas-wrap {
    position: relative;
    width: 100%;
}

.sbc-tbl-sec {
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
}

.sbc-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: var(--hrdb-ink);
    background: var(--hrdb-surface);
}

    .sbc-tbl th, .sbc-tbl td {
        padding: 6px 10px;
        border: 1px solid var(--hrdb-line);
        text-align: center;
        white-space: nowrap;
    }

    .sbc-tbl thead tr:first-child th {
        background: var(--hrdb-primary);
        color: #fff;
        font-weight: 700;
        font-size: 12px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .sbc-tbl thead tr:nth-child(2) th {
        background: var(--hrdb-surface-2, #f8fafc);
        color: var(--hrdb-primary, #4338ca);
        font-weight: 800;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .3px;
        border-bottom: 2px solid var(--hrdb-primary, #6366f1);
        position: sticky;
        top: 28px;
        z-index: 1;
    }

        .sbc-tbl thead tr:nth-child(2) th:nth-child(2) {
            text-align: left;
        }

    .sbc-tbl tbody td:nth-child(2) {
        text-align: left;
    }

    .sbc-tbl tbody tr:hover td {
        background: var(--hrdb-primary-tint, #f5f3ff) !important;
    }

    .sbc-tbl tbody tr:nth-child(even) td {
        background: inherit;
    }

.sbc-cell-total {
    background: var(--hrdb-primary) !important;
    color: #fff !important;
    font-weight: 700;
}

.sbc-tbl tfoot td {
    background: var(--hrdb-primary-tint, #ede9fe) !important;
    font-weight: 900;
    border-top: 2px solid var(--hrdb-primary, #6366f1) !important;
    color: var(--hrdb-primary, #4338ca);
}

.sbc-tbl tfoot .sbc-cell-total {
    background: var(--hrdb-primary) !important;
    color: #fff !important;
}

/* ── SBC Year-Filter Modal (sbc-yf-*) ──────────────────────────── */
.sbc-yf-dialog {
    max-width: 840px;
    width: 92%;
    margin: 30px auto;
}

.sbc-yf-content {
    border-radius: 14px !important;
    border: none;
    box-shadow: 0 25px 60px rgba(0,0,0,.3);
    overflow: hidden;
    background: #ffffff !important;
}

.sbc-yf-header {
    position: relative;
    padding: 16px 20px;
    border-bottom: 1px solid var(--hrdb-line, #e2e8f0);
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sbc-yf-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--hrdb-ink, #1e293b);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.sbc-yf-ico {
    color: var(--hrdb-primary, #4338ca);
    font-size: 16px;
}

.sbc-yf-close {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #64748b;
    opacity: .7;
    border: none;
    background: transparent;
    cursor: pointer;
}

    .sbc-yf-close:hover {
        opacity: 1;
    }

.sbc-yf-body {
    padding: 20px;
    background: #fafafa;
}

.sbc-yf-footer {
    padding: 12px 20px;
    border-top: 1px solid #f1f5f9;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.sbc-yf-cancel {
    border-radius: 8px !important;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 16px;
    border: 1px solid #cbd5e1;
}

.sbc-yf-apply {
    background: var(--hrdb-primary, #4338ca);
    color: #fff;
    border: none;
    border-radius: 8px !important;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 18px;
    box-shadow: var(--hrdb-shadow-soft, 0 2px 6px rgba(67,56,202,.3));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

    .sbc-yf-apply:hover {
        background: var(--hrdb-primary-dark, #3730a3);
    }

.sbc-nodata-msg {
    text-align: center;
}

/* outer panel subtitle slot (mi2sa-outer) */
.mi2sa-outer .mi2sa-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mi2sa-outer .mi2sa-subtitle {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--hrdb-ink-soft);
    letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════
   SCHOOL YEAR-WISE STRENGTH ANALYTICS (saa / syw)
   ═══════════════════════════════════════════ */
.saa * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.saa {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 12px;
}

/* Equal height row support (.mi2-equal-row) */
.mi2-equal-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

    .mi2-equal-row > [class*="col-"] {
        display: flex !important;
        flex-direction: column !important;
    }
        /* right-col: hrdb-scope is direct child of col */
        .mi2-equal-row > [class*="col-"] > .hrdb-scope {
            flex: 1 !important;
            display: flex !important;
            flex-direction: column !important;
            width: 100%;
        }
        /* left-col: clientLazyLoading is direct child of col; hrdb-scope lives inside it */
        .mi2-equal-row > [class*="col-"] > .clientLazyLoading {
            flex: 1 !important;
            display: flex !important;
            flex-direction: column !important;
        }

    .mi2-equal-row .clientLazyLoading > .hrdb-scope {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
    }

    .mi2-equal-row > [class*="col-"] > .hrdb-scope > .hrdb-panel,
    .mi2-equal-row .mi2sa-outer,
    .mi2-equal-row .ssbar-outer-panel {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 350px !important;
    }
    /* body scrolls rather than overflowing into panel's overflow:hidden */
    .mi2-equal-row .hrdb-panel-body {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0;
        overflow-y: auto;
    }

    .mi2-equal-row .StudentStrengthChratDIV {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }
    /* saa flex-fill chain: hrdb-panel-body (flex col) → #AttendanceDetails → .saa → .saa-wrap */
    .mi2-equal-row #AttendanceDetails {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0;
    }

        .mi2-equal-row #AttendanceDetails > .saa {
            flex: 1 !important;
            display: flex !important;
            flex-direction: column !important;
            min-height: 0;
        }

/* ── Equal-height pair: Teacher Class Observation + Logbook Approval ──
   Uses a dedicated class to avoid the conflicting > * catch-all in .mi2-equal-row. */
.hrdb-eq-pair {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

    .hrdb-eq-pair > [class*="col-"] {
        display: flex !important;
        flex-direction: column !important;
    }

    /* clientLazyLoading is the direct child when content is lazy-loaded */
    .hrdb-eq-pair > [class*="col-"] > .clientLazyLoading,
    .hrdb-eq-pair > [class*="col-"] > .hrdb-scope {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .hrdb-eq-pair .clientLazyLoading > .hrdb-scope {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
    }

    /* Panel fills the stretched column; height:auto lets content flow, flex gives it the col height */
    .hrdb-eq-pair .hrdb-scope > .hrdb-panel {
        flex: 1 !important;
    }

.saa-wrap {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Toolbar */
.saa-tb {
    flex-shrink: 0;
    height: 38px;
    background: linear-gradient(135deg,#1565c0 0%,#6d28d9 55%,#1d6fb5 100%);
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 12px 12px 0 0 !important;
    box-shadow: 0 2px 8px rgba(21,101,192,.3);
    position: relative;
    z-index: 10;
}

.saa-title {
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 5px;
}

.saa-tb-lbl {
    color: rgba(255,255,255,.55);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.saa-date-inp {
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 6px !important;
    color: #fff;
    padding: 0 8px;
    font-size: 11px;
    height: 24px;
    outline: none;
    cursor: pointer;
    width: 108px;
    flex-shrink: 0;
}

    .saa-date-inp:focus {
        border-color: #93c5fd;
    }

.saa-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px !important;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.13);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .14s;
    position: relative;
}

    .saa-ico:hover:not(:disabled) {
        background: rgba(255,255,255,.26);
    }

    .saa-ico:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

.saa-ico-refresh {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    border-color: transparent;
    box-shadow: 0 1px 5px rgba(99,102,241,.35);
}

    .saa-ico-refresh:hover:not(:disabled) {
        filter: brightness(1.1);
    }

/* Body */
.saa-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 12px 12px !important;
    padding-bottom: 34px;
}

.saa-chart-sec {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.saa-tbl-sec {
    width: 100%;
    display: flex;
    flex-direction: column;
    display: none;
    background: #fff;
    z-index: 5;
    height: 100%;
}

    .saa-tbl-sec.show {
        display: flex;
    }

/* Chart Top Section */
.saa-chart-top {
    padding: 4px 14px 0;
    flex-shrink: 0;
}

.saa-sec-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.saa-sec-ttl {
    font-size: 11px;
    font-weight: 800;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sdot {
    width: 6px;
    height: 6px;
    border-radius: 50% !important;
    flex-shrink: 0;
    display: inline-block;
}

/* Legend Chips */
.saa-leg {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 14px 4px;
    flex-shrink: 0;
}

.saa-lp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 20px !important;
    font-size: 9.5px;
    font-weight: 700;
    color: #fff;
}

.saa-lp-dot {
    width: 4px;
    height: 4px;
    border-radius: 50% !important;
    background: rgba(255,255,255,.85);
}

/* Bars Area — 24px bar track capsule */
.saa-bars-wrap {
    flex: 1 !important;
    min-height: 0;
    padding: 2px 14px 36px;
    overflow: visible;
    display: flex !important;
    flex-direction: column !important;
}

.saa-bars {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-evenly !important;
    flex: 1 !important;
    gap: 4px;
    width: 100%;
}

    .saa-bars .saa-br {
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        flex-shrink: 0;
    }

.saa-br-lbl {
    width: 70px;
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 800;
    color: #334155;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-transform: uppercase;
}

/* Bar Capsule Track — 24px height */
.saa-br-track {
    flex: 1;
    height: 24px !important;
    max-height: 24px !important;
    background: #f1f5f9;
    border-radius: 9999px !important;
    display: flex;
    position: relative;
    cursor: pointer;
    overflow: hidden !important;
    transition: filter .13s, box-shadow .13s;
}

    .saa-br-track:hover {
        filter: brightness(1.07);
        box-shadow: 0 2px 8px rgba(0,0,0,.14);
    }

.saa-br-inner {
    display: flex;
    width: 100%;
    height: 100%;
}

.saa-br-seg {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: rgba(255,255,255,.95);
    min-width: 0;
    overflow: hidden;
    border-radius: 0 !important;
}

.saa-br-tot {
    width: 54px;
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 800;
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 4px;
}

/* Floating Tooltip */
.syw-float-tip,
.saa-float-tip {
    display: none;
    position: absolute;
    z-index: 9999 !important;
    background: #0f172a;
    color: #f8fafc;
    border-radius: 8px !important;
    padding: 6px 10px;
    font-size: 9px;
    min-width: 170px;
    max-width: 230px;
    box-shadow: 0 5px 18px rgba(0,0,0,.35);
    pointer-events: none;
    border: 1px solid rgba(99,102,241,.3);
}

    .saa-float-tip b {
        color: #a5f3fc;
        font-size: 10px;
        display: block;
        margin-bottom: 3px;
    }

.saa-tip-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
}

/* ─── Shared Pager Footer ─── */
.saa-pager {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 34px !important;
    border-top: 1px solid var(--hrdb-line, #e9ecef) !important;
    background: var(--hrdb-surface-2, #f8fafc) !important;
    border-radius: 0 0 12px 12px !important;
    z-index: 10 !important;
}

.saa-pg-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    height: 100%;
    margin: 0 auto;
}

.saa-pager .pg-lbl {
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--hrdb-ink-soft, #475569);
    white-space: nowrap;
    letter-spacing: .1px;
}

.pg-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 16px;
    border-radius: 20px !important;
    border: none !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2px;
    cursor: pointer;
    touch-action: manipulation;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all .14s;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

    .pg-btn.btn-prev {
        background: var(--hrdb-primary, #4f46e5) !important;
        color: #fff !important;
    }

        .pg-btn.btn-prev:hover:not(:disabled) {
            background: var(--hrdb-primary-dark, #3730a3) !important;
            color: #fff !important;
            box-shadow: var(--hrdb-shadow-soft, 0 2px 8px rgba(79,70,229,.4));
            transform: translateY(-1px);
        }

    .pg-btn.btn-next {
        background: linear-gradient(135deg, var(--hrdb-primary, #6366f1), var(--hrdb-primary-dark, #4f46e5)) !important;
        color: #fff !important;
    }

        .pg-btn.btn-next:hover:not(:disabled) {
            background: linear-gradient(135deg, var(--hrdb-primary-dark, #4f46e5), var(--hrdb-primary-dark, #3730a3)) !important;
            box-shadow: var(--hrdb-shadow-soft, 0 2px 8px rgba(79,70,229,.4));
            transform: translateY(-1px);
        }

    .pg-btn:disabled {
        opacity: .35;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
    }

/* ─── Table View ─── */
.saa-sum {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 12px;
    background: var(--hrdb-surface-2, #f8fafc);
    border-bottom: 1px solid var(--hrdb-line, #e9ecef);
}

.saa-sum-card {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px !important;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.saa-tbl-hdr {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    border-bottom: 1px solid var(--hrdb-line, #f1f5f9);
    gap: 6px;
}

.saa-srch {
    border: 1.5px solid var(--hrdb-line, #e2e8f0);
    border-radius: 6px !important;
    padding: 2px 8px;
    font-size: 10px;
    outline: none;
    background: var(--hrdb-surface-2, #f8fafc);
    width: 140px;
    height: 24px;
}

    .saa-srch:focus {
        border-color: var(--hrdb-primary, #6366f1);
        background: var(--hrdb-surface, #fff);
    }

.saa-tbl-wrap {
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    padding-bottom: 38px;
}

.saa-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
    table-layout: auto;
}

    .saa-tbl thead tr th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--hrdb-surface-2, #f8fafc);
        color: var(--hrdb-ink-soft, #64748b);
        font-weight: 800;
        padding: 6px 8px;
        text-align: left;
        border-bottom: 2px solid var(--hrdb-line, #d1d5db);
        border-right: 1px solid var(--hrdb-line, #e9ecef);
        white-space: nowrap;
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: .3px;
    }

    .saa-tbl thead th:last-child {
        border-right: none;
    }

    .saa-tbl tbody td {
        padding: 5px 8px;
        border-bottom: 1px solid var(--hrdb-line, #f1f5f9);
        border-right: 1px solid var(--hrdb-line, #f8fafc);
        vertical-align: middle;
        white-space: nowrap;
    }

        .saa-tbl tbody td:last-child {
            border-right: none;
        }

    .saa-tbl tbody tr:hover td {
        background: var(--hrdb-primary-tint, #f5f3ff) !important;
    }

.saa-sc-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.saa-sc-av {
    width: 20px;
    height: 20px;
    border-radius: 4px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
    background: var(--hrdb-primary, #6366f1);
}

.saa-sc-nm {
    font-weight: 700;
    color: var(--hrdb-ink, #1e293b);
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saa-rk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px !important;
    font-size: 8px;
    font-weight: 900;
}

.saa-rk1 {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff;
}

.saa-rk2 {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    color: #fff;
}

.saa-rk3 {
    background: linear-gradient(135deg, #fb923c, #f97316);
    color: #fff;
}

.saa-rkn {
    background: var(--hrdb-surface-2, #f1f5f9);
    color: var(--hrdb-ink-soft, #64748b);
}

.saa-bdg {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px !important;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

/* ─── Combined Modal Item Styling ─── */
.syw-fbadge {
    background: var(--hrdb-primary, #4338ca);
    color: #fff;
    border-radius: 50% !important;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 900;
    margin-left: 4px;
}

.syw-fitem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--hrdb-line, #e2e8f0);
    border-radius: 8px !important;
    background: var(--hrdb-surface, #fff);
    cursor: pointer;
    transition: all .15s ease;
    user-select: none;
}

    .syw-fitem:hover {
        border-color: var(--hrdb-line, #cbd5e1);
        background: var(--hrdb-surface-2, #f8fafc);
    }

    .syw-fitem.is-selected {
        border-color: var(--hrdb-primary, #4338ca) !important;
        background: var(--hrdb-primary-tint, #eef2ff) !important;
    }

    .syw-fitem input[type="checkbox"] {
        width: 15px;
        height: 15px;
        accent-color: var(--hrdb-primary, #4338ca);
        cursor: pointer;
        flex-shrink: 0;
    }

.syw-fitem-lbl {
    font-size: 11px;
    font-weight: 700;
    color: var(--hrdb-ink, #1e293b);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.saa-skel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
    width: 100%;
    flex: 1;
}

.saa-sk-row {
    height: 24px;
    background: linear-gradient(90deg, var(--hrdb-surface-2, #f1f5f9) 25%, var(--hrdb-line, #e2e8f0) 50%, var(--hrdb-surface-2, #f1f5f9) 75%);
    background-size: 200% 100%;
    animation: saaSk 1.4s infinite;
    border-radius: 9999px !important;
}

@keyframes saaSk {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.saa-nodata {
    text-align: center;
    padding: 40px 10px;
    color: var(--hrdb-ink-soft, #64748b);
}

/* ─── Table utility classes ─── */
.saa-bdg-neutral {
    background: var(--hrdb-surface-2, #f1f5f9);
    color: var(--hrdb-ink, #1e293b);
}

.saa-tbl-total-val {
    color: var(--hrdb-primary, #4338ca);
    font-size: 11px;
    font-weight: 900;
}

.saa-rtot-lbl {
    color: var(--hrdb-primary-dark, #4c1d95);
    font-weight: 900;
}

.saa-rtot-val {
    text-align: right;
    font-weight: 900;
    color: var(--hrdb-primary-dark, #4c1d95);
}

/* Top Header Control Slots (#sscht-sw-ctrls) */
#sscht-sw-ctrls {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-right: 6px;
}

    #sscht-sw-ctrls .saa-tb-btn, #sscht-sw-ctrls .enqad-box-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 6px !important;
        border: 1px solid var(--hrdb-primary, #4338ca) !important;
        background: var(--hrdb-surface, #ffffff) !important;
        color: var(--hrdb-primary, #4338ca) !important;
        font-size: 13px !important;
        cursor: pointer !important;
        transition: all .14s ease !important;
    }

        #sscht-sw-ctrls .saa-tb-btn:hover, #sscht-sw-ctrls .enqad-box-btn:hover {
            background: var(--hrdb-primary, #4338ca) !important;
            color: #ffffff !important;
            border-color: var(--hrdb-primary, #4338ca) !important;
        }

        #sscht-sw-ctrls .saa-tb-btn.on, #sscht-sw-ctrls .enqad-box-btn.on {
            background: var(--hrdb-primary, #4338ca) !important;
            color: #ffffff !important;
            border-color: var(--hrdb-primary, #4338ca) !important;
        }

/* FullSchoolYearFilterModal & SchoolFilterGraph Header, Z-Index & Close Button Alignment */
#FullSchoolYearFilterModal,
#SchoolFilterGraph,
#YearFilterGraph {
    z-index: 1055 !important;
}

    #FullSchoolYearFilterModal .modal-dialog,
    #SchoolFilterGraph .modal-dialog,
    #YearFilterGraph .modal-dialog {
        position: relative !important;
        z-index: 1056 !important;
        max-width: 840px !important;
        width: 92% !important;
        margin: 30px auto !important;
    }

    #FullSchoolYearFilterModal .modal-content,
    #SchoolFilterGraph .modal-content,
    #YearFilterGraph .modal-content {
        border-radius: 14px !important;
        border: none !important;
        box-shadow: 0 25px 60px rgba(0,0,0,0.3) !important;
        overflow: hidden !important;
        background: #ffffff !important;
    }

    #FullSchoolYearFilterModal .modal-header,
    #SchoolFilterGraph .modal-header,
    #YearFilterGraph .modal-header {
        position: relative !important;
        padding: 16px 20px !important;
        border-bottom: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 56px !important;
    }

        #FullSchoolYearFilterModal .modal-header::before,
        #FullSchoolYearFilterModal .modal-header::after,
        #SchoolFilterGraph .modal-header::before,
        #SchoolFilterGraph .modal-header::after,
        #YearFilterGraph .modal-header::before,
        #YearFilterGraph .modal-header::after {
            display: none !important;
        }

    #FullSchoolYearFilterModal .modal-title,
    #SchoolFilterGraph .modal-title,
    #YearFilterGraph .modal-title {
        font-size: 15px !important;
        font-weight: 800 !important;
        color: #1e293b !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.3 !important;
        float: none !important;
    }

    #FullSchoolYearFilterModal button.close,
    #SchoolFilterGraph button.close,
    #YearFilterGraph button.close {
        position: absolute !important;
        right: 18px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 24px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        color: #64748b !important;
        opacity: 0.7 !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        padding: 4px 8px !important;
        margin: 0 !important;
        float: none !important;
        cursor: pointer !important;
        transition: all .15s ease !important;
    }

        #FullSchoolYearFilterModal button.close:hover,
        #SchoolFilterGraph button.close:hover,
        #YearFilterGraph button.close:hover {
            color: #0f172a !important;
            opacity: 1 !important;
            transform: translateY(-50%) scale(1.15) !important;
        }

/* View Toggle Pill (.enqad-viewtoggle) */
/* ── Global pill (used outside sscht-sw-ctrls) ── */
.enqad-viewtoggle {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid var(--hrdb-line, #cbd5e1) !important;
    border-radius: 8px !important;
    background: var(--hrdb-surface-2, #f8fafc) !important;
    padding: 2px !important;
    gap: 2px !important;
    height: 28px !important;
    width: auto !important;
    min-width: 58px !important;
    box-sizing: border-box !important;
}

.enqad-vt-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 22px !important;
    width: 26px !important;
    border: none !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--hrdb-ink-soft, #64748b) !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: all .15s ease !important;
    padding: 0 !important;
    outline: none !important;
    box-sizing: border-box !important;
}

    .enqad-vt-btn:hover:not(.is-active) {
        color: var(--hrdb-primary, #4338ca) !important;
        background: var(--hrdb-primary-tint, #eef2ff) !important;
    }

    .enqad-vt-btn.is-active {
        background: var(--hrdb-primary, #4338ca) !important;
        color: #ffffff !important;
        box-shadow: var(--hrdb-shadow-soft, 0 1px 4px rgba(67,56,202,0.3)) !important;
    }

/* ── #sscht-sw-ctrls: strip the pill — each vt-btn becomes its own
       outlined square matching enqad-box-btn (28×28) ── */
#sscht-sw-ctrls .enqad-viewtoggle {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;
    min-width: 0 !important;
    gap: 4px !important;
    border-radius: 0 !important;
}

#sscht-sw-ctrls .enqad-vt-btn {
    width: 28px !important;
    height: 28px !important;
    border: 1px solid var(--hrdb-primary, #4338ca) !important;
    border-radius: 6px !important;
    background: var(--hrdb-surface, #ffffff) !important;
    color: var(--hrdb-primary, #4338ca) !important;
    font-size: 12px !important;
}

    #sscht-sw-ctrls .enqad-vt-btn:hover:not(.is-active) {
        background: var(--hrdb-primary, #4338ca) !important;
        color: #ffffff !important;
        border-color: var(--hrdb-primary, #4338ca) !important;
    }

    #sscht-sw-ctrls .enqad-vt-btn.is-active {
        background: var(--hrdb-primary, #4338ca) !important;
        color: #ffffff !important;
        border-color: var(--hrdb-primary, #4338ca) !important;
        box-shadow: var(--hrdb-shadow-soft, 0 1px 4px rgba(67,56,202,0.3)) !important;
    }

/* ═══ School & Year Filter Card (.syw-fitem) ═════════════════════ */
.syw-fitem,
label.syw-fitem,
.year-card.syw-fitem {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
    box-sizing: border-box !important;
}

    .syw-fitem:hover,
    label.syw-fitem:hover {
        border-color: #cbd5e1 !important;
        background: #f8fafc !important;
    }

    .syw-fitem.is-selected,
    label.syw-fitem.is-selected,
    .year-card.syw-fitem.is-selected,
    .syw-fitem:has(input[type="checkbox"]:checked) {
        border: 1.5px solid var(--hrdb-primary, #4338ca) !important;
        background: var(--hrdb-primary-tint, #eef2ff) !important;
        box-shadow: 0 2px 8px rgba(67,56,202,.12) !important;
    }

    /* Custom Rounded Checkbox */
    .syw-fitem input[type="checkbox"],
    .syw-sch-chk {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        border: 2px solid #cbd5e1 !important;
        border-radius: 5px !important;
        background-color: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
        cursor: pointer !important;
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.15s ease !important;
        flex-shrink: 0 !important;
        outline: none !important;
    }

        .syw-fitem input[type="checkbox"]:hover,
        .syw-sch-chk:hover {
            border-color: var(--hrdb-primary, #4338ca) !important;
        }

        .syw-fitem input[type="checkbox"]:checked,
        .syw-sch-chk:checked,
        .syw-fitem.is-selected input[type="checkbox"] {
            background-color: var(--hrdb-primary, #4338ca) !important;
            border-color: var(--hrdb-primary, #4338ca) !important;
        }

            .syw-fitem input[type="checkbox"]:checked::after,
            .syw-sch-chk:checked::after,
            .syw-fitem.is-selected input[type="checkbox"]::after {
                content: '' !important;
                display: block !important;
                width: 5px !important;
                height: 9px !important;
                border: solid #ffffff !important;
                border-width: 0 2.2px 2.2px 0 !important;
                transform: rotate(45deg) translate(-0.5px, -0.5px) !important;
            }

.syw-fitem-lbl {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    flex: 1 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    cursor: pointer !important;
}

.syw-fitem.is-selected .syw-fitem-lbl {
    color: var(--hrdb-primary-dark, #3730a3) !important;
}

/* ════════════════════════════════════════════════════════════════════
   SELECTION WIDGET — Layout Shell
   Used by: SchoolSelectionForChart.cshtml, CommonYear_Selection.cshtml
   Classes: .syw-wrap  .syw-head  .syw-head-title  .syw-head-icon
            .syw-grid  .syw-col   .syw-empty  .syw-empty-img
            .syw-empty-icon  .syw-empty-msg
   ════════════════════════════════════════════════════════════════════ */

/* ── :root defaults so --hrdb-primary resolves outside .hrdb-scope ── */
:root {
    --hrdb-primary: #4338ca;
    --hrdb-primary-dark: #3730a3;
    --hrdb-primary-tint: #eef2ff;
}

/* Outer wrapper */
.syw-wrap {
    padding: 4px;
}

/* Header bar */
.syw-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--hrdb-line, #e2e8f0);
}

/* Header title text */
.syw-head-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--hrdb-ink, #1e293b);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Header icon — skin-aware */
.syw-head-icon {
    color: var(--hrdb-primary, #4338ca);
}

/* Grid of item cards */
.syw-grid {
    margin: 0 -4px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 0;
}

/* Each item column */
.syw-col {
    padding: 0 4px;
}

/* Empty state */
.syw-empty {
    text-align: center;
    padding: 30px;
}

.syw-empty-img {
    height: 160px;
}

.syw-empty-icon {
    font-size: 32px;
}

.syw-empty-msg {
    margin-top: 10px;
    font-weight: 600;
    color: #64748b;
}

/* ════════════════════════════════════════════════════════════════════
   SKIN OVERRIDES — HRDashboardRedesign
   ─────────────────────────────────────────────────────────────────
   Remaps the three primary tokens so every component that consumes
   --hrdb-primary / --hrdb-primary-dark / --hrdb-primary-tint
   automatically tracks the AdminLTE body.skin-* class.

   Pattern mirrors MCampusCardLayout.css (hrc-wrapper + rd-wrapper
   sections): declare on body (cascades everywhere) AND on the
   wrapper class directly (beats any :root specificity).

   Colour reference:
     skin-blue        #3c8dbc / #367fa9   (AdminLTE steel-blue)
     skin-purple      #605ca8 / #555299
     skin-green       #00a65a / #008d4c
     skin-red         #dd4b39 / #c23321
     skin-yellow      #d68910 / #b7770d   (darkened amber — contrast-safe on white)
     skin-black       #444444 / #222222
     skin-blue-yellow #017acf / #0161a4   (custom project skin)
   ════════════════════════════════════════════════════════════════════ */

/* ── skin-blue ──────────────────────────────────────────────────── */
body.skin-blue,
body.skin-blue .hrdb-scope,
body.skin-blue-light,
body.skin-blue-light .hrdb-scope {
    --hrdb-primary: #3c8dbc;
    --hrdb-primary-dark: #367fa9;
    --hrdb-primary-tint: #d6eaf8;
    --hrdb-shadow-soft: 0 1px 2px rgba(60,141,188,.05), 0 8px 24px -10px rgba(60,141,188,.16);
}

/* ── skin-purple ────────────────────────────────────────────────── */
body.skin-purple,
body.skin-purple .hrdb-scope,
body.skin-purple-light,
body.skin-purple-light .hrdb-scope {
    --hrdb-primary: #605ca8;
    --hrdb-primary-dark: #555299;
    --hrdb-primary-tint: #ede9fe;
    --hrdb-shadow-soft: 0 1px 2px rgba(96,92,168,.05), 0 8px 24px -10px rgba(96,92,168,.16);
}

/* ── skin-green ─────────────────────────────────────────────────── */
body.skin-green,
body.skin-green .hrdb-scope,
body.skin-green-light,
body.skin-green-light .hrdb-scope {
    --hrdb-primary: #00a65a;
    --hrdb-primary-dark: #008d4c;
    --hrdb-primary-tint: #d1fae5;
    --hrdb-shadow-soft: 0 1px 2px rgba(0,166,90,.05), 0 8px 24px -10px rgba(0,166,90,.16);
}

/* ── skin-red ───────────────────────────────────────────────────── */
body.skin-red,
body.skin-red .hrdb-scope,
body.skin-red-light,
body.skin-red-light .hrdb-scope {
    --hrdb-primary: #dd4b39;
    --hrdb-primary-dark: #c23321;
    --hrdb-primary-tint: #fee2e2;
    --hrdb-shadow-soft: 0 1px 2px rgba(221,75,57,.05), 0 8px 24px -10px rgba(221,75,57,.16);
}

/* ── skin-yellow ────────────────────────────────────────────────── */
/* Using #d68910 (darkened amber) so --hrdb-primary stays contrast-safe
   on white backgrounds (icon text, active button text, borders).       */
body.skin-yellow,
body.skin-yellow .hrdb-scope,
body.skin-yellow-light,
body.skin-yellow-light .hrdb-scope {
    --hrdb-primary: #d68910;
    --hrdb-primary-dark: #b7770d;
    --hrdb-primary-tint: #fef3c7;
    --hrdb-shadow-soft: 0 1px 2px rgba(214,137,16,.05), 0 8px 24px -10px rgba(214,137,16,.16);
}

/* ── skin-black ─────────────────────────────────────────────────── */
body.skin-black,
body.skin-black .hrdb-scope,
body.skin-black-light,
body.skin-black-light .hrdb-scope {
    --hrdb-primary: #444444;
    --hrdb-primary-dark: #222222;
    --hrdb-primary-tint: #f1f5f9;
    --hrdb-shadow-soft: 0 1px 2px rgba(68,68,68,.05), 0 8px 24px -10px rgba(68,68,68,.16);
}

/* ── skin-blue-yellow (custom project skin — primary is the blue) ── */
body.skin-blue-yellow,
body.skin-blue-yellow .hrdb-scope,
body.skin-blue-yellow-light,
body.skin-blue-yellow-light .hrdb-scope {
    --hrdb-primary: #017acf;
    --hrdb-primary-dark: #0161a4;
    --hrdb-primary-tint: #d4eaf7;
    --hrdb-shadow-soft: 0 1px 2px rgba(1,122,207,.05), 0 8px 24px -10px rgba(1,122,207,.16);
}

/* ═══ School Year-Wise Strength Analytics (SYW) ══════════════════ */
.syw-embedded-wrap {
    border-radius: 0 0 12px 12px !important;
    border: none;
    box-shadow: none;
}

.syw-tblhdr-lbl {
    font-weight: 800;
    color: var(--hrdb-ink, #1e293b);
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.syw-tblhdr-ico {
    color: var(--hrdb-primary, #6366f1);
}

/* SYW Filter Modal */
.syw-modal-dialog {
    max-width: 840px;
    width: 94%;
    margin: 24px auto;
}

.syw-modal-content {
    border-radius: 14px !important;
    border: 1px solid var(--hrdb-line, #e2e8f0);
    box-shadow: 0 20px 50px rgba(0,0,0,.18);
    overflow: hidden;
    background: #ffffff !important;
}

.syw-modal-ico {
    color: var(--hrdb-primary, #4338ca);
    font-size: 16px;
}

.syw-modal-body-panel {
    padding: 16px 20px;
    background: #fafafa;
}

.syw-modal-intro {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 14px;
    line-height: 1.4;
}

.syw-modal-row {
    margin: 0 -8px;
    display: flex;
    flex-wrap: wrap;
}

.syw-modal-col {
    padding: 0 8px;
}

.syw-modal-panel {
    background: #fff;
    border: 1px solid var(--hrdb-line, #e2e8f0);
    border-radius: 12px !important;
    padding: 14px;
    display: flex;
    flex-direction: column;
    height: 330px;
}

.syw-modal-panel-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.syw-modal-panel-title {
    font-size: 11px;
    font-weight: 900;
    color: var(--hrdb-ink, #1e293b);
    letter-spacing: 0.5px;
}

.syw-sel-all {
    font-size: 10px;
    font-weight: 800;
    color: var(--hrdb-primary, #4338ca);
    text-decoration: none;
}

    .syw-sel-all:hover {
        color: var(--hrdb-primary-dark, #3730a3);
        text-decoration: underline;
    }

.syw-srch-wrap {
    position: relative;
    margin-bottom: 10px;
}

.syw-srch-ico {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 11px;
}

.syw-srch-inp {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 8px !important;
    padding: 6px 10px 6px 28px;
    font-size: 11px;
    outline: none;
}

.syw-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 4px;
}

.syw-modal-footer-inner {
    padding: 12px 20px;
    border-top: 1px solid #f1f5f9;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.syw-cancel-btn {
    border-radius: 8px !important;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 16px;
    border: 1px solid #cbd5e1;
}

.syw-apply-btn {
    background: var(--hrdb-primary, #4338ca);
    color: #fff;
    border: none;
    border-radius: 8px !important;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 18px;
    box-shadow: var(--hrdb-shadow-soft, 0 2px 6px rgba(67,56,202,.3));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

    .syw-apply-btn:hover {
        background: var(--hrdb-primary-dark, #3730a3);
    }

/* ═══ School Attendance Analytics (SAA) extras ════════════════════ */
.saa-vt-gap {
    margin-right: 2px;
}

.saa-chip-hint {
    background: transparent;
    color: #94a3b8;
}

/* ═══ ManagementIndex2 — Attendance panel header controls ════════
   Scope: .mi2sa-outer .enqad-panel-hd-right
   Covers: #mi2-saa-ctrls, #mi2-sw-ctrls, and the filter btn-group.
   All buttons equal 28×28, outlined primary, white base bg.
   ════════════════════════════════════════════════════════════════ */

/* Layout shells (replace inline styles) */
#mi2-saa-ctrls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

#mi2-sw-ctrls {
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Date input — align height with buttons */
.hrdb-scope .mi2sa-dateinput {
    height: 28px !important;
}

/* Dropdown min-width (moved from inline) */
.hrdb-scope .mi2-sa-ddmenu {
    min-width: 200px !important;
}

/* Strip the toggle pill — each vt-btn becomes its own outlined square */
.mi2sa-outer .enqad-panel-hd-right .enqad-viewtoggle {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;
    min-width: 0 !important;
    gap: 4px !important;
    border-radius: 0 !important;
}

/* vt-btn: 28×28 outlined primary */
.mi2sa-outer .enqad-panel-hd-right .enqad-vt-btn {
    width: 28px !important;
    height: 28px !important;
    border: 1px solid var(--hrdb-primary, #4338ca) !important;
    border-radius: 6px !important;
    background: var(--hrdb-surface, #ffffff) !important;
    color: var(--hrdb-primary, #4338ca) !important;
    font-size: 12px !important;
}

.mi2sa-outer .enqad-panel-hd-right .enqad-vt-btn:hover:not(.is-active) {
    background: var(--hrdb-primary, #4338ca) !important;
    color: #ffffff !important;
    border-color: var(--hrdb-primary, #4338ca) !important;
}

.mi2sa-outer .enqad-panel-hd-right .enqad-vt-btn.is-active {
    background: var(--hrdb-primary, #4338ca) !important;
    color: #ffffff !important;
    border-color: var(--hrdb-primary, #4338ca) !important;
    box-shadow: var(--hrdb-shadow-soft, 0 1px 4px rgba(67,56,202,.3)) !important;
}

/* enqad-box-btn: 28×28 outlined primary */
.mi2sa-outer .enqad-panel-hd-right .enqad-box-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    border: 1px solid var(--hrdb-primary, #4338ca) !important;
    background: var(--hrdb-surface, #ffffff) !important;
    color: var(--hrdb-primary, #4338ca) !important;
    font-size: 13px !important;
}

.mi2sa-outer .enqad-panel-hd-right .enqad-box-btn:hover {
    background: var(--hrdb-primary, #4338ca) !important;
    color: #ffffff !important;
    border-color: var(--hrdb-primary, #4338ca) !important;
}

/* ═══ Student Strength Chart (SSC) ═══════════════════════════════
   Used by: StudentStrengthChart.cshtml
   Classes: .ssc-sf-ico  .ssc-sf-body  .ssc-sf-footer
            .ssc-sf-cancel  .ssc-sf-apply
            .ssc-donut-flex  .ssc-chart-wrap  .ssc-legend
            .ssc-schoolwise-note  .ssc-schoolwise-total
   ════════════════════════════════════════════════════════════════ */

/* SchoolFilterGraph modal — icon in header */
.ssc-sf-ico {
    color: var(--hrdb-primary, #4338ca);
    font-size: 16px;
}

/* SchoolFilterGraph modal — body */
.ssc-sf-body {
    padding: 16px 20px !important;
    background: #fafafa !important;
}

/* SchoolFilterGraph modal — footer */
.ssc-sf-footer {
    padding: 12px 20px !important;
    border-top: 1px solid var(--hrdb-line, #f1f5f9) !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

/* SchoolFilterGraph — Cancel button */
.ssc-sf-cancel {
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 6px 16px !important;
    border: 1px solid #cbd5e1 !important;
}

/* SchoolFilterGraph — Apply button (theme-aware) */
.ssc-sf-apply {
    background: var(--hrdb-primary, #4338ca) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 6px 18px !important;
    box-shadow: var(--hrdb-shadow-soft, 0 2px 6px rgba(67,56,202,.3)) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
}

    .ssc-sf-apply:hover {
        background: var(--hrdb-primary-dark, #3730a3) !important;
    }

/* Donut chart flex container — size overrides for student strength context */
.ssc-donut-flex {
    align-items: center;
    min-height: 240px;
}

/* Donut chart canvas wrapper */
.ssc-chart-wrap {
    height: 240px;
    flex: 0 0 240px;
    max-width: 240px;
}

/* Legend scroll cap */
.ssc-legend {
    max-height: 240px;
}

/* "Total Academic Strength of Selected Schools" note beneath chart */
.ssc-schoolwise-note {
    padding: 8px 2px 0;
    font-size: 12px;
    color: var(--hrdb-ink-soft, #64748b);
}

/* Bold total count inside the note */
.ssc-schoolwise-total {
    color: var(--hrdb-danger, #ef4444);
}

/* ═══ Student Strength Bar-Chart Outer Panel (SSBAR) ═════════════
   Used by: BarChartStudentStrength.cshtml
   Classes: .ssbar-outer-panel  .ssbar-dd-menu  .ssbar-dd-ico
            .ssbar-dd-ico-primary  .ssbar-loader
            .ssbar-loader-ic  .ssbar-loader-txt
   ════════════════════════════════════════════════════════════════ */

/* Outer panel — remove fixed height so inner chart content dictates height */
.ssbar-outer-panel {
    height: auto !important;
    min-height: 0 !important;
}

    /* Inner panel body — flush padding so chart sits edge-to-edge */
    .ssbar-outer-panel .hrdb-panel-body {
        padding: 0 !important;
        overflow: visible !important;
    }

/* Report-type dropdown button (outside #sscht-sw-ctrls) — match outline-primary style */
.ssbar-outer-panel .enqad-panel-hd-right > .btn-group > .enqad-box-btn {
    border: 1px solid var(--hrdb-primary, #4338ca) !important;
    background: var(--hrdb-surface, #ffffff) !important;
    color: var(--hrdb-primary, #4338ca) !important;
}

.ssbar-outer-panel .enqad-panel-hd-right > .btn-group > .enqad-box-btn:hover {
    background: var(--hrdb-primary, #4338ca) !important;
    color: #ffffff !important;
    border-color: var(--hrdb-primary, #4338ca) !important;
}

/* Report-type dropdown menu */
.ssbar-dd-menu {
    min-width: 210px;
}

/* Dropdown menu icons — muted/opacity variant */
.ssbar-dd-ico {
    width: 16px;
    margin-right: 6px;
    opacity: .6;
}

/* Dropdown menu icons — primary-colour variant */
.ssbar-dd-ico-primary {
    width: 16px;
    margin-right: 6px;
    color: var(--hrdb-primary, #4338ca);
}

/* Inner-view loader overlay — layout only (display:none toggled by JS) */
.ssbar-loader {
    text-align: center;
    padding: 48px 20px;
}

/* Loader spinner icon */
.ssbar-loader-ic {
    color: var(--hrdb-primary, #4338ca);
}

/* Loader text */
.ssbar-loader-txt {
    font-size: 12px;
    color: var(--hrdb-ink-soft, #64748b);
    margin-top: 10px;
}

/* ─── Mobile: pager tap + summary row ────────────────────────────────
   Two bugs on narrow screens (≤767 px):
   1. .saa-sum wraps to 2+ rows, eating all available panel height.
   2. .saa-pager (position:absolute;bottom:0) sits in .saa-body's
      padding-bottom area; iOS Safari blocks pointer-events inside the
      padding zone of an overflow:hidden container, making the buttons
      visually present but untappable.
   Fix 1: single horizontally-scrollable pill row.
   Fix 2: promote pager to a normal flex item (removes padding dep).
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Summary pills — single scrollable row, no wrap */
    .saa-sum {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .saa-sum-card {
        flex-shrink: 0 !important;
    }

    /* Pager — flow item instead of absolute, so it is in the
       content area and iOS pointer-events always reach it */
    .saa-pager {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        height: 34px !important;
    }

    /* saa-body no longer needs padding-bottom reserved for absolute pager */
    .saa-body {
        padding-bottom: 0 !important;
    }

    /* bars-wrap had padding-bottom to clear the chart pager — not needed in flow */
    .saa-bars-wrap {
        padding-bottom: 0 !important;
    }
}

/* ============================================================================
   Event Calendar dashboard widget — .evcal-scope
   Scope: Areas/Dashboard/Views/Dashboard/EventCalendarDashboard_Index.cshtml
          (FullCalendar v3 month grid, restyled in place — plugin markup/JS
          untouched, only re-skinned) and Areas/Dashboard/Views/Dashboard/
          ViewEvents.cshtml (the "View events" accordion list + detail modal).
   .evcal-scope is nested inside .hrdb-scope in markup so it inherits the same
   --hrdb-* custom properties; only .evcal-* prefixed classes are introduced
   here, no existing rule in this file is modified.
   ========================================================================= */

/* This view is a full standalone page (and a plain dashboard tile), not one of the
   fixed-110mm dashboard grid widgets .hrdb-panel is normally sized for — let it
   grow to fit the month grid + events list instead of clipping them. */
.evcal-scope > .hrdb-panel {
    height: auto !important;
}

/* ---------- Legend ---------- */
.evcal-scope .evcal-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 0 2px 14px;
}

.evcal-scope .evcal-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--hrdb-ink-soft);
}

.evcal-scope .evcal-legend-sw {
    width: 10px;
    height: 10px;
    border-radius: 3px !important;
    flex-shrink: 0;
}

.evcal-scope .evcal-legend-sw.evcal-sw-event {
    background: var(--hrdb-teal-tint);
    box-shadow: inset 0 0 0 1px var(--hrdb-teal);
}

.evcal-scope .evcal-legend-sw.evcal-sw-holiday {
    background: var(--hrdb-coral-tint);
    box-shadow: inset 0 0 0 1px var(--hrdb-coral);
}

.evcal-scope .evcal-legend-sw.evcal-sw-festival {
    background: linear-gradient(160deg, #FFF4DC, #FFE3C2);
    box-shadow: inset 0 0 0 1px #E0A526;
}

/* ---------- Month / List toggle (view content swap, no data refetch —
   FullCalendar's own List view plugin isn't part of the vendored
   fullcalendar.min.js bundle in this project, so "list" mode reuses the
   existing View Events accordion at full width instead). ---------- */
.evcal-scope.evcal-list-mode .evcal-col-calendar {
    display: none;
}

.evcal-scope.evcal-list-mode .evcal-col-events {
    width: 100% !important;
    float: none !important;
}

    /* #eventcalendar is display:none in list mode, so its outerHeight() reads 0
       and evcalSyncPanelHeight() leaves #viewEvents at its last synced height —
       give it a sensible fixed floor instead of an arbitrary leftover value. */
    .evcal-scope.evcal-list-mode .evcal-col-events #viewEvents {
        height: 480px !important;
    }

/* ---------- View-events panel height, synced to the calendar's rendered
   height via JS (see evcalSyncPanelHeight() in
   EventCalendarDashboard_Index.cshtml) — #viewEvents is an AJAX-loaded
   fragment and #eventcalendar's height is computed by the FullCalendar
   plugin itself, so there is no shared content CSS alone could equalize;
   JS sets #viewEvents' own height in px and everything below just fills
   it (100% / flex) and scrolls internally. ---------- */
.evcal-scope #viewEvents {
    overflow: hidden;
}

    .evcal-scope #viewEvents > .hrdb-scope {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .evcal-scope #viewEvents .hrdb-panel {
        flex: 1;
        height: 100% !important;
        min-height: 0;
    }

    .evcal-scope #viewEvents .evcal-events-list {
        flex: 1;
        max-height: none !important;
        min-height: 0;
        overflow-y: auto;
    }

/* ---------- FullCalendar v3 toolbar (prev/next/today + title + month/week/day) ---------- */
.evcal-scope .fc-toolbar {
    padding: 4px 2px !important;
    margin-bottom: 12px !important;
}

.evcal-scope .fc-toolbar h2 {
    font-family: var(--hrdb-font-display) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--hrdb-ink) !important;
}

.evcal-scope .fc-button {
    background: var(--hrdb-surface) !important;
    background-image: none !important;
    border: 1px solid var(--hrdb-line) !important;
    color: var(--hrdb-ink) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

    .evcal-scope .fc-button:hover,
    .evcal-scope .fc-state-hover {
        background: var(--hrdb-primary-tint) !important;
        color: var(--hrdb-primary-dark) !important;
        border-color: var(--hrdb-primary) !important;
    }

    .evcal-scope .fc-state-active,
    .evcal-scope .fc-state-active:hover {
        background: var(--hrdb-ink) !important;
        color: #fff !important;
        border-color: var(--hrdb-ink) !important;
    }

.evcal-scope .fc-button-group .fc-button {
    border-radius: 0 !important;
}

    .evcal-scope .fc-button-group .fc-button:first-child {
        border-top-left-radius: 8px !important;
        border-bottom-left-radius: 8px !important;
    }

    .evcal-scope .fc-button-group .fc-button:last-child {
        border-top-right-radius: 8px !important;
        border-bottom-right-radius: 8px !important;
    }

/* ---------- Grid chrome ---------- */
.evcal-scope .fc-view-container {
    border: 1px solid var(--hrdb-line) !important;
    border-radius: var(--hrdb-radius-md) !important;
    overflow: hidden !important;
}

.evcal-scope .fc-widget-header {
    background: var(--hrdb-ink) !important;
    border-color: var(--hrdb-ink) !important;
}

.evcal-scope .fc-day-header {
    color: #C7CBF0 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 10px 4px !important;
}

.evcal-scope .fc-widget-content {
    border-color: var(--hrdb-line) !important;
}

.evcal-scope .fc-day-number {
    font-family: var(--hrdb-font-mono) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--hrdb-ink) !important;
    padding: 6px 8px !important;
}

.evcal-scope .fc-other-month {
    opacity: .4;
}

/* "Today" keeps whatever background the cell would have anyway (plain, event,
   holiday, or festival) — no separate cell-level fill/border. The only
   distinguishing accent is the day number itself, shown as a solid dark
   (theme-ink) rounded badge instead of plain text — same idea as the
   reference mockup's dark circular "today" marker.
   lms-fullcalendar-theme.css (a SITE-WIDE, unscoped FullCalendar skin used by
   other LMS dashboards) also targets bare ".fc-today .fc-day-number" with
   !important — this rule's extra specificity (.evcal-scope .fc-today ...) is
   what wins over it, so don't drop the .evcal-scope prefix here. */
.evcal-scope .fc-today .fc-day-number {
    background: var(--hrdb-ink) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    border-radius: 50% !important;
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 4px !important;
}

/* ---------- Day cells as rounded, gapped cards (color/count come from
   GetEventsData — teal = event, coral = holiday, count = EventCalendarVM.Count).
   eventRender (EventCalendarDashboard_Index.cshtml) never renders the actual
   fc-event element (returns false) — instead it adds evcal-day-event /
   evcal-day-holiday to the matching <td> in both the backgrounds table
   (.fc-bg, which paints) and the content table (.fc-content-skeleton, which
   holds the day number + our count badge), and appends the badge itself.
   FullCalendar's own tables use border-collapse:collapse, which suppresses
   border-radius on <td> — switch every stacked table (header/backgrounds/
   content) to border-collapse:separate with the SAME spacing so the three
   stay column-aligned while gaining real gaps + rounded corners. ---------- */
.evcal-scope .fc-head table,
.evcal-scope .fc-bg table,
.evcal-scope .fc-content-skeleton table {
    border-collapse: separate !important;
    border-spacing: 4px !important;
}

.evcal-scope .fc-bg td.fc-day,
.evcal-scope .fc-bg td.fc-widget-content {
    position: relative !important;
    border: 1px solid var(--hrdb-line) !important;
    border-radius: var(--hrdb-radius-sm) !important;
    background: var(--hrdb-surface-2);
}

.evcal-scope .fc-bg td.evcal-day-event {
    background: var(--hrdb-teal-tint) !important;
    border-color: var(--hrdb-teal) !important;
}

.evcal-scope .fc-bg td.evcal-day-holiday {
    background: var(--hrdb-coral-tint) !important;
    border-color: var(--hrdb-coral) !important;
}

/* Named festivals (see EVCAL_FESTIVALS in EventCalendarDashboard_Index.cshtml)
   get a gold/amber gradient instead of the plain holiday tint, plus an
   animated icon (see .evcal-festival-tag below). */
.evcal-scope .fc-bg td.evcal-day-festival {
    background: linear-gradient(160deg, #FFF4DC, #FFE3C2) !important;
    border-color: #E0A526 !important;
    box-shadow: inset 0 0 0 1.5px rgba(224, 165, 38, 0.4) !important;
}

.evcal-scope .fc-content-skeleton td.evcal-day-event,
.evcal-scope .fc-content-skeleton td.evcal-day-holiday,
.evcal-scope .fc-content-skeleton td.evcal-day-festival {
    cursor: pointer;
}

.evcal-scope .evcal-day-badge {
    position: absolute;
    right: 6px;
    bottom: 4px;
    z-index: 1;
    font-family: var(--hrdb-font-mono);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.evcal-scope .fc-bg td.evcal-day-event .evcal-day-badge {
    color: #0D8A7C;
}

.evcal-scope .fc-bg td.evcal-day-holiday .evcal-day-badge {
    color: #C1433E;
}

.evcal-scope .fc-bg td.evcal-day-festival .evcal-day-badge {
    color: #A8730B;
}

/* ---------- Day icon — every event/holiday/festival cell gets one, top-left,
   count badge stays bottom-right. Festival days get the animated rakhi/flag
   (see .evcal-festival-tag below); plain event/holiday days get a small
   static FontAwesome glyph instead. ---------- */
.evcal-scope .evcal-day-icon {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 1;
}

.evcal-scope .evcal-day-icon-event {
    color: var(--hrdb-teal);
    font-size: 13px;
}

.evcal-scope .evcal-day-icon-holiday {
    color: var(--hrdb-coral);
    font-size: 13px;
}

.evcal-scope .evcal-rakhi-wrap {
    position: relative;
    width: 26px;
    height: 26px;
    animation: evcalRakhiSwing 2.6s ease-in-out infinite;
    transform-origin: top center;
}

@keyframes evcalRakhiSwing {
    0%, 100% {
        transform: rotate(-7deg);
    }

    50% {
        transform: rotate(7deg);
    }
}

.evcal-scope .evcal-rakhi-glow {
    position: absolute;
    inset: -5px;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(224, 165, 38, 0.45), transparent 70%);
    animation: evcalRakhiGlow 2.2s ease-in-out infinite;
}

@keyframes evcalRakhiGlow {
    0%, 100% {
        opacity: .5;
        transform: scale(.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}

.evcal-scope .evcal-sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #FFD873;
    clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
    opacity: 0;
    animation: evcalSparkleTwinkle 1.8s ease-in-out infinite;
}

.evcal-scope .evcal-sparkle.s1 {
    top: -3px;
    left: -2px;
    animation-delay: 0s;
}

.evcal-scope .evcal-sparkle.s2 {
    top: 2px;
    right: -5px;
    animation-delay: .5s;
}

.evcal-scope .evcal-sparkle.s3 {
    bottom: -2px;
    left: 5px;
    animation-delay: 1s;
}

@keyframes evcalSparkleTwinkle {
    0%, 100% {
        opacity: 0;
        transform: scale(.4) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1) rotate(45deg);
    }
}

.evcal-scope .evcal-flag-wrap {
    position: relative;
    width: 26px;
    height: 18px;
    animation: evcalFlagWave 1.6s ease-in-out infinite;
    transform-origin: left center;
}

@keyframes evcalFlagWave {
    0%, 100% {
        transform: skewY(-6deg);
    }

    50% {
        transform: skewY(6deg);
    }
}

/* ---------- View events panel + accordion (ViewEvents.cshtml) ---------- */
.evcal-scope .evcal-events-list {
    max-height: 125mm;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
}

.evcal-scope .evcal-event-group {
    border: 1px solid var(--hrdb-line);
    border-radius: var(--hrdb-radius-sm) !important;
    margin-bottom: 8px;
    overflow: hidden;
    transition: box-shadow .2s;
}

.evcal-scope .evcal-event-group.flash {
    box-shadow: 0 0 0 3px var(--hrdb-primary-tint);
}

.evcal-scope .evcal-event-group-header {
    width: 100%;
    border: none;
    background: var(--hrdb-primary-tint);
    color: var(--hrdb-primary-dark);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.evcal-scope .evcal-event-group.open > .evcal-event-group-header {
    background: var(--hrdb-ink);
    color: #fff;
}

.evcal-scope .evcal-event-group-header .evcal-chev {
    transition: transform .2s;
    flex-shrink: 0;
}

.evcal-scope .evcal-event-group.open > .evcal-event-group-header .evcal-chev {
    transform: rotate(90deg);
}

.evcal-scope .evcal-event-group-body {
    display: none;
}

.evcal-scope .evcal-event-group.open > .evcal-event-group-body {
    display: block;
}

.evcal-scope .evcal-timeline {
    padding: 12px 14px 6px 24px;
    position: relative;
}

    .evcal-scope .evcal-timeline::before {
        content: '';
        position: absolute;
        left: 11px;
        top: 4px;
        bottom: 14px;
        width: 2px;
        background: var(--hrdb-line);
    }

.evcal-scope .evcal-timeline-item {
    position: relative;
    padding-bottom: 10px;
}

    .evcal-scope .evcal-timeline-item .evcal-node {
        position: absolute;
        left: -17px;
        top: 6px;
        width: 8px;
        height: 8px;
        border-radius: 50% !important;
        background: var(--hrdb-teal);
        border: 2px solid var(--hrdb-surface);
        box-shadow: 0 0 0 2px var(--hrdb-teal);
    }

    .evcal-scope .evcal-timeline-item.evcal-is-holiday .evcal-node {
        background: var(--hrdb-coral);
        box-shadow: 0 0 0 2px var(--hrdb-coral);
    }

.evcal-scope .evcal-event-chip {
    background: var(--hrdb-teal-tint);
    border: 1px solid #BEEBE0;
    color: #0D8A7C;
    border-radius: var(--hrdb-radius-sm) !important;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

    .evcal-scope .evcal-event-chip i {
        margin-right: 5px;
    }

.evcal-scope .evcal-timeline-item.evcal-is-holiday .evcal-event-chip {
    background: var(--hrdb-coral-tint);
    border-color: #F6CFCB;
    color: #C1433E;
    cursor: default;
}

.evcal-scope .evcal-school-group {
    margin-bottom: 14px;
}

    .evcal-scope .evcal-school-group:last-child {
        margin-bottom: 0;
    }

.evcal-scope .evcal-school-header {
    font-size: 11px;
    font-weight: 700;
    color: var(--hrdb-ink-soft);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 0 0 8px 0;
}

    .evcal-scope .evcal-school-header i {
        color: var(--hrdb-primary);
        margin-right: 5px;
    }

/* ============================================================================
   Event details drawer content — .evinfo-scope
   Scope: Areas/Dashboard/Views/Dashboard/EventCalendar_ViewInfo.cshtml.
   Loaded via AJAX into the shared control-sidebar's own content container
   (#aside-div-containerAjaxCRUDForm, see openControlSidebar()/closeControlSidebar()
   in Scripts/Common.js) — the drawer's slide-in/backdrop/header chrome is
   that shared aside, not reproduced here; this file only styles what gets
   injected into it.
   ========================================================================= */
.evinfo-scope {
    padding: 4px 2px 10px;
}

.evinfo-hero {
    border-radius: var(--hrdb-radius-md) !important;
    padding: 16px 18px;
    margin-bottom: 16px;
}

.evinfo-hero-coral {
    background: linear-gradient(160deg, var(--hrdb-coral-tint), #FFE0D3);
}

.evinfo-hero-teal {
    background: linear-gradient(160deg, var(--hrdb-teal-tint), #CFF3EC);
}

.evinfo-hero-indigo {
    background: linear-gradient(160deg, var(--hrdb-primary-tint), #E0E2FB);
}

.evinfo-hero-amber {
    background: linear-gradient(160deg, var(--hrdb-amber-tint), #FBE7C4);
}

.evinfo-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--hrdb-surface);
    color: var(--hrdb-ink);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 4px 10px;
    border-radius: 999px !important;
    margin-bottom: 10px;
}

.evinfo-type-dot {
    width: 6px;
    height: 6px;
    border-radius: 50% !important;
    background: var(--hrdb-coral);
    flex-shrink: 0;
}

.evinfo-hero-teal .evinfo-type-dot {
    background: var(--hrdb-teal);
}

.evinfo-hero-indigo .evinfo-type-dot {
    background: var(--hrdb-primary);
}

.evinfo-hero-amber .evinfo-type-dot {
    background: var(--hrdb-amber);
}

.evinfo-title {
    font-family: var(--hrdb-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--hrdb-ink);
    margin: 0 0 8px;
}

.evinfo-time {
    font-size: 12px;
    font-weight: 600;
    color: var(--hrdb-ink-soft);
}

    .evinfo-time i {
        margin-right: 4px;
    }

.evinfo-createdby {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--hrdb-surface-2);
    border: 1px solid var(--hrdb-line);
    border-radius: var(--hrdb-radius-md) !important;
    padding: 10px 14px;
    margin-bottom: 16px;
}

.evinfo-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    background: var(--hrdb-primary);
    color: #fff;
    font-family: var(--hrdb-font-display);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.evinfo-createdby-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hrdb-ink-faint);
}

.evinfo-createdby-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--hrdb-ink);
    margin-top: 1px;
}

.evinfo-rows {
    border: 1px solid var(--hrdb-line);
    border-radius: var(--hrdb-radius-md) !important;
    margin-bottom: 16px;
    overflow: hidden;
}

.evinfo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--hrdb-line);
    font-size: 12.5px;
}

    .evinfo-row:last-child {
        border-bottom: none;
    }

.evinfo-row-block {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
}

.evinfo-row-label {
    color: var(--hrdb-ink-soft);
    font-weight: 600;
}

    .evinfo-row-label i {
        width: 16px;
        text-align: center;
        margin-right: 6px;
        color: var(--hrdb-ink-faint);
    }

.evinfo-row-value {
    color: var(--hrdb-ink);
    font-weight: 700;
    text-align: right;
}

.evinfo-row-block .evinfo-row-value {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-weight: 500;
}

.evinfo-pill {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px !important;
}

.evinfo-pill-yes {
    background: #DCFCE7;
    color: #166534;
}

.evinfo-pill-no {
    background: var(--hrdb-surface-2);
    color: var(--hrdb-ink-faint);
}

.evinfo-guest {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--hrdb-surface-2);
    border: 1px solid var(--hrdb-line);
    border-radius: 999px !important;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--hrdb-ink);
}

.evinfo-muted {
    color: var(--hrdb-ink-faint);
    font-size: 12px;
}

.evinfo-section {
    border: 1px solid var(--hrdb-line);
    border-radius: var(--hrdb-radius-md) !important;
    margin-bottom: 16px;
    overflow: hidden;
}

.evinfo-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--hrdb-surface-2);
    font-size: 13px;
    font-weight: 700;
    color: var(--hrdb-ink);
    cursor: pointer;
}

    .evinfo-section-head i:first-child {
        color: var(--hrdb-primary-dark);
        margin-right: 6px;
    }

.evinfo-section-body {
    padding: 14px;
}

.evinfo-section.collapsed .evinfo-section-body {
    display: none;
}

.evinfo-section.collapsed .evinfo-section-toggle:before {
    content: "\f067";
}

.evinfo-section-body table.table {
    font-size: 12px;
}

.evinfo-footer {
    text-align: right;
}

.evinfo-close-btn {
    background: var(--hrdb-surface-2);
    border: 1px solid var(--hrdb-line);
    color: var(--hrdb-ink-soft);
    font-weight: 700;
    font-size: 12px;
    padding: 8px 18px;
    border-radius: var(--hrdb-radius-sm) !important;
    cursor: pointer;
}

    .evinfo-close-btn:hover {
        border-color: var(--hrdb-primary);
        color: var(--hrdb-primary-dark);
    }

/* ============================================================================
   School Timetable / Teacher Work Load — UNRELATED to the .hrdb-scope rules
   above (this file is now shared storage for more than just the HR module).
   Scope: SchoolTimetable_Display.cshtml (Areas/Administration/Views/TeacherTimetable)
          and ManagementDashoardSchoolTimetableIndex.cshtml (Areas/Dashboard/Views/Dashboard).

   Rebuilt 2026-08-11 as the "stt-" (School Time Table) design system, replacing
   the earlier design system in place (old rules removed, not left alongside).
   Every feature the old design carried (KPI insight cards, load pills, teacher
   avatar, coverage-gap/co-taught badges, grand-total rows, the Class Time
   Table lecture-card grid, the slide-out sidebar drill-downs) is kept — only
   the visuals changed. Shape/spacing/shadow language is borrowed from this
   same file's .hrdb-panel/.enqad-panel-head/.bday-avatar/.evinfo-pill system
   (soft shadows, 7-11px radii, tinted-background + dark-text pills) instead
   of the old fully-rounded 999px pill shapes and saturated flat fills — but
   the actionable accent color still tracks the school's live AdminLTE skin
   color via --stt-primary (var(--mc-primary, ...)), not a fixed hrdb-scope
   indigo, which is what makes this "theme base design" rather than a generic
   hrdb-scope clone.

   The outer wrapper is now just <div class="hrdb-scope"> — no bare AdminLTE
   .box/.box-header/.box-body left (see #schoolTimetableDisplayPanel below,
   the .hrdb-panel replacement for that chrome). The bare Bootstrap
   .nav-tabs/.nav-tabs-custom tab-strip (#DetailsTabs) is intentionally NOT
   styled anywhere in this block — that chrome belongs to the separate
   per-school skin CSS and must stay untouched.

   --stt-* tokens are declared on #divSchoolTimetable (rather than on the
   bare .hrdb-scope class) so they can't leak into the many other pages that
   also carry .hrdb-scope — #divSchoolTimetable is the one id this page
   always renders (both standalone and dashboard-embedded), and every
   redesigned component below lives inside it, so normal CSS inheritance
   carries the tokens down to all of them without re-declaring per component.
   ============================================================================ */
#divSchoolTimetable {
    --stt-primary: var(--mc-primary, #3C8DBC);
    --stt-primary-dark: var(--mc-primary-dk, #367FA9);
    /* Literal hex fallback (matches the #3C8DBC default), not color-mix() — a per-school-accurate
       tint isn't achievable without color-mix (browser-support risk in this app), so this tint is
       exact only for the default skin and an approximation for others, same tradeoff the reference
       design accepts by hardcoding its own --forest-tint against a fixed --forest. */
    --stt-primary-tint: #E7F1F8;
    --stt-teal: #0D9488; --stt-teal-dark: #0F766E; --stt-teal-light: #CCFBF1;
    --stt-emerald: #10B981; --stt-emerald-light: #D1FAE5;
    --stt-amber: #D4A017; --stt-amber-dark: #92620A; --stt-amber-light: #FEF3C7;
    --stt-coral: #C5453A; --stt-coral-dark: #963029; --stt-coral-light: #FBE8E5;
    --stt-sky: #2E6C96; --stt-sky-tint: #E4EFF6;
    --stt-ink: #0F172A; --stt-ink-2: #334155; --stt-muted: #64748B;
    --stt-line: #E2E8F0; --stt-line-2: #EEF2F6;
    /* Recessed "tray" fill behind the period grid's cells — the reference's --paper,
       neutralised slightly to sit against this app's cooler panel white. */
    --stt-paper: #F7F8F6;
    --stt-radius-lg: 16px; --stt-radius-md: 10px; --stt-radius-sm: 7px;
    --stt-shadow: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.10);
    --stt-shadow-lift: 0 8px 20px rgba(15,23,42,.12);
    --stt-font-mono: 'IBM Plex Mono', monospace;
    color: var(--stt-ink);
}

/* ---- Panel chrome: replaces the old bare AdminLTE .box/.box-header/.box-body
   (removed from the markup entirely — .box relied on an ancestor this page no
   longer has). Only rendered when !OnDashboard; the dashboard-embed case skips
   straight to the tab-strip + tab-content, already inside the dashboard's own
   .hrdb-panel (ManagementDashoardSchoolTimetableIndex.cshtml). ---- */
#schoolTimetableDisplayPanel { height: auto !important; }
#schoolTimetableDisplayPanel .hrdb-panel-body { overflow: visible; }
/* Collapse toggle (replaces AdminLTE's data-widget="collapse", which needed an
   ancestor .box this page no longer has) — a plain class toggle on the panel,
   flipped by a small inline onclick handler in the markup/JSSection below. */
#schoolTimetableDisplayPanel.stt-panel-collapsed > .hrdb-panel-body { display: none; }

/* ---- Generic tables shared by every tab — a direct port of the reference design's
   `thead th` / `tbody td` / `td.total-col` block. The reference LEFT-aligns every cell
   (headers included); this used to centre them, which was the most visible mismatch. ---- */
#divSchoolTimetable th, #divSchoolTimetable td, #divSchoolTimetable .HistoryTbl {
    padding: 12px 14px !important;
    text-align: left;
    vertical-align: middle;
    border: none !important;
    border-bottom: 1px solid var(--stt-line-2) !important;
    font-size: 13.5px;
}
/* The <table border="1"> HTML attribute (present on every tab's table, pre-existing markup) draws
   its own black "outset" frame independent of border-collapse — override it explicitly here.
   border="1" is deliberately KEPT in the markup: it is what makes the
   mcampusDownloadContent(..., 'application/vnd.ms-excel') export render gridlines in Excel. */
#divSchoolTimetable table { border-collapse: separate !important; border-spacing: 0; border: none !important; }
#divSchoolTimetable tbody tr:last-child td { border-bottom: none !important; }
#divSchoolTimetable .tthead {
    background-color: var(--stt-primary) !important;
    color: #fff !important;
    text-align: left;
    font-weight: 600 !important;
    font-size: 11.5px !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    border-bottom: none !important;
}
/* Rounded top corners on the header strip — reference thead th:first-child / :last-child.
   Excluded from .stt-ct-grid, whose tiles carry their own 8px radius on EVERY cell. */
#divSchoolTimetable table:not(.stt-ct-grid) > thead > tr:first-child > th:first-child { border-top-left-radius: 8px; }
#divSchoolTimetable table:not(.stt-ct-grid) > thead > tr:first-child > th:last-child { border-top-right-radius: 8px; }
/* The sortable "Total" column header (Teacher Work Load tab) — darker than the rest of the header,
   matching the reference's thead th.total-col (still theme-derived, not a fixed hex). */
#divSchoolTimetable th.stt-tw-sortable {
    background-color: var(--stt-primary-dark) !important;
}
#divSchoolTimetable tbody tr:hover td { background-color: var(--stt-paper); }

/* ---- Action row (Print / Excel) above every tab's table — reference .actions-row /
   .actions / .btn / .btn-outline / .btn-solid. The anchors keep their exact onclick
   handlers; only the class names and an icon changed. ---- */
#divSchoolTimetable .stt-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
/* Breathing room between the outer tab strip (skin-owned, never styled here) and the first
   thing inside a tab pane — without this the Print/Excel row sits flush against the tabs. */
#divSchoolTimetable > .tab-pane { padding-top: 18px; }
#divSchoolTimetable .stt-actions { display: flex; gap: 10px; flex-wrap: wrap; }
#divSchoolTimetable .stt-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: var(--stt-radius-sm) !important;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    text-decoration: none;
}
#divSchoolTimetable .stt-btn .fa { font-size: 13px; }
#divSchoolTimetable .stt-btn-solid { background: var(--stt-primary); color: #fff; }
#divSchoolTimetable .stt-btn-solid:hover,
#divSchoolTimetable .stt-btn-solid:focus { background: var(--stt-primary-dark); color: #fff; text-decoration: none; }
#divSchoolTimetable .stt-btn-outline { background: #fff; color: var(--stt-ink); border-color: var(--stt-line); }
#divSchoolTimetable .stt-btn-outline:hover,
#divSchoolTimetable .stt-btn-outline:focus { border-color: var(--stt-primary); color: var(--stt-primary-dark); text-decoration: none; }

/* Class/Teacher Time Table pagination — same button language as .stt-btn above. Restyled by
   SELECTOR only (the markup keeps its .btn-success / .btn-warning classes and its ids/onclick,
   because ttGoToPage/ctGoToPage toggle a .disabled class on those same elements). */
#divSchoolTimetable .stt-tt-pagination .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px !important;
    border-radius: var(--stt-radius-sm) !important;
    font-weight: 600;
    font-size: 12.5px;
    border: 1.5px solid var(--stt-line) !important;
    background: #fff !important;
    color: var(--stt-ink) !important;
    text-shadow: none;
    box-shadow: none;
}
#divSchoolTimetable .stt-tt-pagination .btn:hover { border-color: var(--stt-primary) !important; color: var(--stt-primary-dark) !important; }
#divSchoolTimetable .stt-tt-pagination .btn-success {
    background: var(--stt-primary) !important;
    border-color: var(--stt-primary) !important;
    color: #fff !important;
}
#divSchoolTimetable .stt-tt-pagination .btn-success:hover { background: var(--stt-primary-dark) !important; border-color: var(--stt-primary-dark) !important; color: #fff !important; }
#divSchoolTimetable .stt-tt-pagination .btn.disabled { opacity: .45; }
#divSchoolTimetable .stt-tt-pagination > span { font-size: 12.5px; color: var(--stt-muted); }
#divSchoolTimetable .stt-tt-pagination > span strong { color: var(--stt-ink); font-family: var(--stt-font-mono, monospace); }

/* ---- Content panel — reference .panel / .panel-head / .panel-head h2 / .term-tag /
   .table-scroll. Every tab's table now sits inside this white rounded card with a header
   bar instead of sitting bare under a <b> caption. The wrapper is rendered INSIDE the
   GridCRUDFormContainer("...PrintableArea") div so Print/Excel still capture the table. ---- */
#divSchoolTimetable .stt-panel {
    background: #fff;
    border: 1px solid var(--stt-line);
    border-radius: var(--stt-radius-lg) !important;
    box-shadow: var(--stt-shadow);
    overflow: hidden;
    margin-bottom: 16px;
}
#divSchoolTimetable .stt-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--stt-line);
}
#divSchoolTimetable .stt-panel-title { font-size: 15px; font-weight: 700; color: var(--stt-ink); margin: 0; }
#divSchoolTimetable .stt-panel-tag { font-size: 11.5px; font-weight: 500; color: var(--stt-muted); }
#divSchoolTimetable .stt-table-scroll { overflow-x: auto; padding: 16px 20px 20px; }
/* Horizontal padding for the non-table content that also lives inside a panel on the two
   timetable tabs (class/teacher banner, division sub-tabs, stat chips) — the reference gives
   those the same 20px gutter via their own margin/padding. */
#divSchoolTimetable .stt-panel-pad { padding: 0 20px; }

/* ---- Teacher Work Load tab: avatar cell, load-intensity pills, total cell/row ---- */
.stt-tw-teacher-cell { display: flex; align-items: center; gap: 10px; text-align: left !important; }
.stt-tw-avatar {
    /* Also rendered inside the slide-out sidebar (outside #divSchoolTimetable, where --stt-*
       tokens aren't in scope) — uses --mc-primary directly (set globally on body.skin-*) with a
       fallback, so it stays correct wherever it's mounted and still tracks the theme color.
       Circle, matching the reference's .avatar shape exactly. */
    width: 30px; height: 30px; border-radius: 50% !important; flex-shrink: 0;
    background: var(--mc-primary, #3C8DBC); color: #fff;
    font-size: 11px; font-weight: 700; font-family: var(--stt-font-mono, monospace);
    display: inline-flex; align-items: center; justify-content: center;
}
/* Reference .count-pill dimensions exactly (28x24, 7px radius, mono 12.5px). */
.stt-load-pill {
    display: inline-flex; min-width: 28px; height: 24px; justify-content: center; align-items: center;
    padding: 0 6px; border-radius: 7px !important; font-weight: 600; font-size: 12.5px;
    font-family: var(--stt-font-mono, monospace);
}
.stt-load-pill.stt-l0 { background: transparent; color: #B9B6A8; font-weight: 500; }
.stt-load-pill.stt-l1 { background: var(--stt-line-2); color: var(--stt-muted); }
.stt-load-pill.stt-l2 { background: var(--stt-teal-light); color: var(--stt-teal-dark); }
.stt-load-pill.stt-l3 { background: #A9E0D8; color: #0F4E47; }
.stt-load-pill.stt-l4 { background: var(--stt-amber-light); color: var(--stt-amber-dark); }
.stt-load-pill.stt-l5 { background: #F6D9A8; color: #7A4E0F; }
/* Body/footer "Total" cells — reference td.total-col (theme tint + dark theme text + bold).
   A GetLoadStatusClass() status tint (stt-status-over/-balanced/-light) is applied on the same
   cell and deliberately still wins (it carries !important) — that is the data signal. */
.stt-tw-total-cell { font-weight: 700; color: var(--stt-primary-dark); background: var(--stt-primary-tint) !important; }
.stt-tw-total-row td { background: #F1F5F9 !important; color: var(--stt-ink) !important; font-weight: 700 !important; }
.stt-tw-sortable { cursor: pointer; user-select: none; }
.stt-tw-sortable:hover { background-color: var(--stt-primary-dark) !important; }
.stt-tw-sortable .fa { margin-left: 3px; opacity: .85; }

/* Total-column load bar — reference .load-bar / .num / .track / .fill. The number stays the
   FIRST text node in the cell so twSortByTotal()'s parseInt(cell.textContent) keeps working. */
.stt-load-bar { display: flex; align-items: center; gap: 8px; }
.stt-load-num { font-family: var(--stt-font-mono, monospace); font-weight: 700; font-size: 13px; white-space: nowrap; }
.stt-load-track {
    display: inline-block; width: 64px; height: 6px; flex-shrink: 0;
    background: var(--stt-line-2); border-radius: 99px; overflow: hidden;
}
.stt-load-fill { display: block; height: 100%; border-radius: 99px; background: var(--stt-muted); }
.stt-load-fill.stt-status-over { background: var(--stt-coral) !important; }
.stt-load-fill.stt-status-balanced { background: var(--stt-primary) !important; }
.stt-load-fill.stt-status-light { background: var(--stt-amber) !important; }

/* .stt-tw-toolbar (the old Teacher Work Load Print/Excel bar) was replaced by the shared
   .stt-actions-row / .stt-actions / .stt-btn set above and is no longer emitted by any view. */

/* ---- Class & Division Wise WL: coverage-gap / co-taught flags on the subject x division matrix ---- */
.stt-cd-gap {
    display: inline-flex; align-items: center; gap: 6px; justify-content: center;
    background: var(--stt-coral-light) !important; color: var(--stt-coral) !important;
    font-size: 12.5px; font-weight: 600; text-align: center !important;
    padding: 6px 10px; border-radius: var(--stt-radius-sm) !important;
    border: 1px dashed rgba(197,69,58,.45) !important;
}
.stt-cd-gap .fa { font-size: 11px; }
.stt-cd-coshare { background: var(--stt-amber-light) !important; }
/* Tiny uppercase sky-tinted chip, matching the reference's .co-taught-tag (rather than the old
   circular solid-fill icon badge). */
.stt-cd-coshare-badge {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 2px 7px; border-radius: 5px !important; margin-right: 4px;
    background: var(--stt-sky-tint); color: var(--stt-sky); font-size: 10px; vertical-align: middle;
    text-transform: uppercase; font-weight: 700;
}

/* ---- Class & Subject WL / Class & Teacher WL: grand-total row — a tinted, bold "total" treatment
   (like the reference's td.total-col) rather than a solid-fill row, so it reads as a data emphasis,
   not a second header. ---- */
.stt-cs-grand-total-row td {
    background: var(--stt-primary-tint) !important;
    color: var(--stt-primary-dark) !important;
    font-weight: 700 !important;
}

/* ====================================================================
   TIME TABLE SECTION (Class Time Table + Teacher Time Table tabs)
   Ported from the reference design's "TIMETABLE GRID (period cards)"
   block: .tt-summary/.sum-pill, .div-tag-bar, .period-grid + .pg-head /
   .pg-period / .pg-cell, and .period-card/.pc-subj/.pc-teacher.

   Implementation note — the reference draws this as a CSS grid of
   <div>s. Here it stays a real <table>, because both tabs' toolbars
   export the rendered markup straight to Excel
   (mcampusDownloadContent(..., 'application/vnd.ms-excel')), and Excel
   parses <table> markup — a div grid would export as an unreadable
   single column. So the grid look is reproduced ON the table instead:
   border-spacing supplies the reference's gap:8px, and the header /
   period-label / day cells are individually rounded to read as the
   reference's separate grid tiles. Print, Excel, the pagination JS and
   the division filter JS are all untouched.

   Theme base: accent = --stt-primary/-dark (var(--mc-primary...)), so
   the header row and card accents retint per school.
   ==================================================================== */
#divSchoolTimetable .stt-ct-filter-bar {
    display: flex !important; flex-wrap: wrap; gap: 14px; align-items: center;
    background: var(--stt-paper); border: 1px solid var(--stt-line); border-radius: var(--stt-radius-md) !important;
    padding: 10px 14px; margin: 5px 0 !important;
}
/* Class / teacher banner — reference .div-tag-bar (gradient, centred, icon + label). */
#divSchoolTimetable .stt-ct-class-header {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 16px 0 0; padding: 11px 14px; color: #fff;
    background: linear-gradient(155deg, var(--stt-primary) 0%, var(--stt-primary-dark) 100%);
    border: none !important; border-radius: var(--stt-radius-md) !important; text-align: center;
    font-weight: 700; font-size: 13px; letter-spacing: .03em;
}
#divSchoolTimetable .stt-ct-class-header .fa { color: #fff; }
/* Per-division sub-banner — same bar shape one level down the hierarchy. */
#divSchoolTimetable .stt-ct-div-header {
    margin: 14px 0 10px; padding: 9px 12px; color: var(--stt-teal-dark); background: var(--stt-teal-light);
    border: none !important; border-radius: var(--stt-radius-sm) !important; text-align: center;
    font-weight: 700; font-size: 12.5px; letter-spacing: .03em;
}
/* Summary counts — reference .tt-summary / .sum-pill (mono numerals in a soft outlined pill). */
#divSchoolTimetable .stt-ct-kpi-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
#divSchoolTimetable .stt-ct-kpi-chip {
    font-size: 12px; font-weight: 600; color: var(--stt-muted);
    background: var(--stt-paper); border: 1px solid var(--stt-line); border-radius: 999px !important;
    padding: 6px 12px;
}
#divSchoolTimetable .stt-ct-kpi-chip b { color: var(--stt-ink); margin-right: 3px; font-family: var(--stt-font-mono, monospace); }
#divSchoolTimetable .stt-ct-kpi-chip--scheduled { border-color: var(--stt-teal); color: var(--stt-teal-dark); background: var(--stt-teal-light); }
#divSchoolTimetable .stt-ct-kpi-chip--free { border-color: var(--stt-amber); color: var(--stt-amber-dark); background: var(--stt-amber-light); }

/* Scroll host — reference .period-grid-wrap{overflow-x:auto}. Bootstrap 3's own
   .table-responsive only turns on overflow below 767px, so the wide period grid would
   otherwise burst out of the panel on desktop instead of scrolling. Scoped to the two
   timetable page-sections so no other tab's .table-responsive is affected.
   Descendant (not child) combinator since the grid is now nested inside .stt-panel > .stt-table-scroll. */
#divSchoolTimetable .teacher-page-section .table-responsive,
#divSchoolTimetable .class-division-block .table-responsive {
    width: 100%;
    overflow-x: auto;
}

/* --- The grid itself. border-spacing replaces the reference's grid gap:8px. --- */
#divSchoolTimetable .stt-ct-grid {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 8px !important;
    background: transparent !important;
}
/* Day headers — reference .pg-head (solid dark tile, not a table header rule). */
#divSchoolTimetable .stt-ct-grid > thead > tr > th.tthead {
    background-color: var(--stt-primary-dark) !important;
    color: #fff !important;
    text-align: center;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 10px 6px !important;
    border: none !important;
    border-radius: 8px !important;
}
/* Day cells — reference .pg-cell (recessed tray tile that holds the period cards).
   min-width mirrors the reference's minmax(150px, 1fr) track, so a full week scrolls
   horizontally inside .table-responsive exactly as the reference's grid does. */
#divSchoolTimetable .stt-ct-grid > tbody > tr > td {
    background: var(--stt-paper) !important;
    border: 1px solid var(--stt-line-2) !important;
    border-radius: 8px !important;
    padding: 6px !important;
    vertical-align: top;
    text-align: left;
    min-width: 150px;
    height: 56px;
}
/* Period label column — reference .pg-period. */
#divSchoolTimetable .stt-ct-grid > tbody > tr > td:first-child {
    width: 64px;
    min-width: 64px;
    border: 1px solid var(--stt-line) !important;
    text-align: center;
    vertical-align: middle;
    font-weight: 700;
    font-size: 13px;
    color: var(--stt-muted);
}
/* Keep .table-striped's zebra fill and the shared row-hover off this grid — in the
   reference every cell is the same recessed tile. */
#divSchoolTimetable .stt-ct-grid > tbody > tr:hover > td { background: var(--stt-paper) !important; }

/* --- Lecture cards inside a day cell — reference .period-card. --- */
#divSchoolTimetable .stt-ct-lecture-card {
    border: none !important; border-left: 3px solid var(--stt-primary) !important;
    border-radius: 6px !important; margin: 0 0 5px !important; padding: 6px 8px !important;
    background: #fff; font-size: 11.5px; text-align: left;
    box-shadow: var(--stt-shadow);
}
#divSchoolTimetable .stt-ct-lecture-card:last-child { margin-bottom: 0 !important; }
#divSchoolTimetable .stt-ct-lecture-card .fa { color: var(--stt-muted); margin-right: 3px; }
/* Secondary lines (class-division / teacher / room) — reference .pc-teacher. */
#divSchoolTimetable .stt-ct-lecture-card > div {
    color: var(--stt-muted); font-size: 10.5px; margin-top: 1px;
}
/* Subject line — reference .pc-subj. Declared after the rule above so it wins. */
#divSchoolTimetable .stt-ct-lecture-subject {
    font-weight: 700 !important; color: var(--stt-ink) !important; font-size: 11.5px !important;
}

/* ---- Sub-tab pill strips reused by a couple of tabs — the per-class switcher inside
   "Class & Division Wise WL" (nested INSIDE a tab-pane, not the same component as the
   outer #DetailsTabs strip, which this file never styles). Softer radius/border instead
   of the old fully-rounded pill, in line with this redesign's general shape language. ---- */
#divSchoolTimetable .stt-sub-tabs {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px !important;
    background: transparent !important;
    border-bottom: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 4px 0 16px !important;
    overflow-x: auto;
}
/* Chip strip mounted INSIDE a .stt-panel, directly under its header — reference .chip-row
   (padding:14px 20px 0, horizontal scroll, hidden scrollbar). */
#divSchoolTimetable .stt-panel > .stt-chip-row {
    padding: 14px 20px 0 !important;
    margin: 0 !important;
    flex-wrap: nowrap;
    scrollbar-width: none;
}
#divSchoolTimetable .stt-panel > .stt-chip-row::-webkit-scrollbar { display: none; }
/* The panel already supplies the gap above the table, so drop the scroll block's top padding
   when a chip row sits between them. */
#divSchoolTimetable .stt-panel > .stt-chip-row + div .stt-table-scroll,
#divSchoolTimetable .stt-panel > .stt-chip-row ~ div > .stt-table-scroll { padding-top: 16px; }

/* Export-only heading. Hidden on screen (the panel header shows the title there), but PrintHTML()
   writes the captured markup into a bare window with NO site stylesheet — and mcampusDownloadContent()
   hands the same markup to Excel — so this reappears in both, restoring the title line the export
   carried before the panel redesign. */
#divSchoolTimetable .stt-export-title { display: none; }
#divSchoolTimetable .stt-sub-tabs > li { float: none !important; margin: 0 !important; padding: 0 !important; }
#divSchoolTimetable .stt-sub-tab-btn {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: auto !important;
    flex-shrink: 0;
    background: #F8FAFC !important;
    border: 1.5px solid var(--stt-line) !important;
    border-radius: 999px !important;
    color: var(--stt-muted) !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    padding: 8px 16px !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#divSchoolTimetable .stt-sub-tab-btn:hover { border-color: var(--stt-primary) !important; color: var(--stt-primary-dark) !important; }
#divSchoolTimetable .stt-sub-tab-btn.is-active {
    background: var(--stt-primary) !important;
    border-color: var(--stt-primary) !important;
    color: #fff !important;
}

/* Class Time Table: per-division sub-tab strip inside each class's section (a different
   component than .stt-sub-tabs above but the same pill-strip idea) — kept under its existing
   .cls-div-tabs name (it never carried the old prefix, so no rename needed) and given the same soft,
   non-fully-rounded restyle. */
#divSchoolTimetable .cls-div-tabs { border-bottom: none !important; margin-bottom: 10px !important; margin-top:10px !important; }
#divSchoolTimetable .cls-div-tabs > li { float: none !important; display: inline-block; margin: 0 6px 6px 0 !important; }
#divSchoolTimetable .cls-div-tabs > li > a {
    border-radius: 999px !important; border: 1.5px solid var(--stt-line) !important;
    background: #F8FAFC !important; color: var(--stt-muted) !important; padding: 7px 16px !important; font-weight: 600;
    font-size: 12.5px;
}
#divSchoolTimetable .cls-div-tabs > li.active > a,
#divSchoolTimetable .cls-div-tabs > li.active > a:hover,
#divSchoolTimetable .cls-div-tabs > li.active > a:focus {
    background: var(--stt-primary) !important; color: #fff !important; border-color: var(--stt-primary) !important;
}

/* ---- Teacher Work Load / Class & Division / Class & Subject / Class & Teacher / Teacher &
   Subject / School Timetable: principal-facing insight strip shared by every tab. Card shape
   follows this file's .hrdb-panel language (soft shadow, ~9-10px radius) instead of the old
   saturated flat look — border-left color still carries the status accent. ---- */
/* Reference .stats grid exactly — a fixed 5-column track (NOT auto-fit/minmax, which is why the
   cards never lined up with the reference screenshot) with its two breakpoints. */
.stt-tw-kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin: 4px 0 14px;
}
@media (max-width: 1050px) { .stt-tw-kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .stt-tw-kpi-row { grid-template-columns: repeat(2, 1fr); } }
.stt-tw-kpi-card {
    border: 1px solid var(--stt-line);
    border-left: 4px solid var(--stt-line);
    border-radius: var(--stt-radius-md) !important;
    box-shadow: var(--stt-shadow);
    padding: 16px 16px 14px;
    background: #fff;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.stt-tw-kpi-card:hover { transform: translateY(-2px); box-shadow: var(--stt-shadow-lift); }
.stt-tw-kpi-num { font-size: 26px; font-weight: 700; color: var(--stt-ink); line-height: 1; font-family: var(--stt-font-mono, monospace); }
.stt-tw-kpi-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--stt-muted); margin-top: 8px; }
@media (max-width: 640px) { .stt-tw-kpi-num { font-size: 22px; } }
.stt-tw-kpi--total { border-left-color: var(--stt-muted); }
.stt-tw-kpi--over { border-left-color: var(--stt-coral); }
.stt-tw-kpi--over .stt-tw-kpi-num { color: var(--stt-coral); }
.stt-tw-kpi--balanced { border-left-color: var(--stt-primary); }
.stt-tw-kpi--balanced .stt-tw-kpi-num { color: var(--stt-primary); }
.stt-tw-kpi--light { border-left-color: var(--stt-amber); }
.stt-tw-kpi--light .stt-tw-kpi-num { color: var(--stt-amber-dark); }
.stt-tw-kpi--avg { border-left-color: var(--stt-sky); }
.stt-tw-kpi--avg .stt-tw-kpi-num { color: var(--stt-sky); }
/* Note / info strip — reference .info-strip. The border is a soft theme-ish line: the reference
   uses rgba(31,111,92,.16) against its fixed --forest; a per-school-exact equivalent would need
   color-mix(), so this is the literal rgba matching the #3C8DBC default skin (same tradeoff as
   --stt-primary-tint above). */
.stt-tw-hint {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 12.5px; color: var(--stt-primary-dark);
    background: var(--stt-primary-tint); border: 1px solid rgba(60, 141, 188, .22);
    border-radius: var(--stt-radius-md) !important;
    padding: 11px 14px; margin-bottom: 16px;
}
.stt-tw-hint .fa { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

/* ---- Status colors reused by the total-cell (table, a <td> — must stay display:table-cell) and the
   sidebar drill-down list (a <span>, where the reference's pill shape applies). Fallback hexes match
   the #divSchoolTimetable token block exactly, since the sidebar list is rendered outside that scope
   where --stt-teal-*/--stt-amber-* aren't defined. Kept as plain global classes (not scoped to any
   ancestor) for that reason. ---- */
.stt-status-over { background: #FBE0DD !important; color: #B3261E !important; }
.stt-status-balanced { background: var(--stt-teal-light, #CCFBF1) !important; color: var(--stt-teal-dark, #0F766E) !important; }
.stt-status-light { background: var(--stt-amber-light, #FEF3C7) !important; color: var(--stt-amber-dark, #92620A) !important; }

/* ---- Clickable teacher name → opens the Teacher Time Table tab for that teacher ---- */
.stt-tw-teacher-link { color: var(--stt-ink); font-weight: 700; transition: color .15s ease; }
.stt-tw-teacher-link:hover { color: var(--stt-primary); text-decoration: underline; }

/* ---- KPI cards double as filters: Over/Balanced/Light open a detail list in the slide-out sidebar ---- */
.stt-tw-kpi-card.stt-tw-kpi--clickable { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.stt-tw-kpi-card.stt-tw-kpi--clickable:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.stt-tw-kpi-card.stt-tw-kpi--clickable:focus { outline: 2px solid var(--stt-primary); outline-offset: 1px; }

/* ---- Detail list injected into the app's slide-out sidebar on KPI-card click.
   This content is mounted OUTSIDE #divSchoolTimetable (in the app's global control-sidebar
   container), so --stt-* custom properties are NOT in scope here — every reference below either
   goes straight to --mc-primary/-dk (set globally on body.skin-*, so this still tracks the
   school's theme color) or carries an explicit fallback hex matching the #divSchoolTimetable
   token block, so it renders correctly regardless of where in the DOM it's injected. Kept as
   plain global classes, same reasoning as .stt-status-* above. Tinted-pill item/load language
   matches this file's .evinfo-pill/.bday-avatar system; the pill shape uses a soft 8px radius
   instead of the old 999px fully-rounded pill. ---- */
.stt-tw-sidebar-backbar {
    display: flex; align-items: center; justify-content: flex-end;
    padding: 10px 12px; margin: 0 0 14px;
    background: linear-gradient(135deg, var(--mc-primary, #3C8DBC), var(--mc-primary-dk, #367FA9));
    border-radius: 9px !important;
}
.stt-tw-sidebar-back {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700;
    color: #fff; background: rgba(255,255,255,.18) !important; border: 1px solid rgba(255,255,255,.4) !important;
    border-radius: 7px !important; padding: 7px 14px !important; cursor: pointer;
    transition: background .15s ease;
}
.stt-tw-sidebar-back:hover { background: rgba(255,255,255,.32) !important; }
.stt-tw-sidebar-back i { font-size: 11px; }
.stt-tw-sidebar-detail .stt-tw-sidebar-head { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.stt-tw-sidebar-detail .stt-tw-sidebar-sub { font-size: 12px; color: var(--stt-muted, #64748B); margin-bottom: 12px; }
.stt-tw-sidebar-detail .stt-tw-sidebar-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 10px; border-radius: 8px !important; margin-bottom: 6px; background: #fff;
    border: 1px solid var(--stt-line, #E2E8F0); cursor: pointer; transition: border-color .12s ease;
}
.stt-tw-sidebar-detail .stt-tw-sidebar-item:hover { border-color: var(--mc-primary, #3C8DBC); }
.stt-tw-sidebar-detail .stt-tw-sidebar-item-left { display: flex; align-items: center; gap: 8px; }
.stt-tw-sidebar-detail .stt-tw-sidebar-name { font-weight: 700; font-size: 13px; }
/* Pill shape (999px, uppercase, bold, no border) matches the reference's .status-badge. */
.stt-tw-sidebar-detail .stt-tw-sidebar-load {
    display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    padding: 4px 10px; border-radius: 999px !important;
}

/* ===================================================================
   Utility classes replacing former inline style="..." attributes
   (SchoolTimetable_Display.cshtml + ManagementDashoardSchoolTimetableIndex.cshtml).
   Each class below carries the exact property values the inline style it
   replaces used to carry — purely a mechanical move, no visual changes.
   Kept as plain, unscoped, minimal utilities (not "design" needing a
   redesign pass) — same as under the old prefix, just renamed.
   =================================================================== */

/* ---- Shared table wrapper / table used by every tab's printable area ---- */
.stt-tt-scroll-wrap { overflow: auto !important; max-height: 100mm !important; }
.stt-tt-tbl-full { width: 100%; }

/* Plain (non-!important) hidden state for the Class Time Table / Teacher Time Table
   pagination sections (.teacher-page-section / .class-page-section). Bootstrap's global
   .hide is `display: none !important;` — jQuery's .show()/.hide() (ttGoToPage/ctGoToPage
   in this view's JSSection) only ever set an INLINE display style, which !important always
   wins over, so pages toggled with .hide never actually reappeared. This has no !important
   so .show()/.hide()'s inline style can override it normally. */
.stt-tt-page-hidden { display: none; }

/* ---- Generic cell alignment utilities reused across several tabs ---- */
.stt-tt-td-center-bold { text-align: center; font-weight: bold; }
.stt-tt-td-justify-top { text-align: justify !important; vertical-align: top; }
.stt-tt-fs14 { font-size: 14px; }
.stt-tt-tr-yellow { background-color: yellow; }
.stt-tt-cursor-pointer { cursor: pointer; }
.stt-tt-link-mr { margin-right: 10px; }

/* Class & Division Wise WL matrix — teacher co-share cell widths */
.stt-tt-td-min50 { text-align: center; min-width: 50mm; }
.stt-tt-td-min15 { text-align: center; min-width: 15mm; }
.stt-tt-td-min65 { min-width: 65mm; }
/* Applied conditionally (only when more than one co-teacher is listed and this isn't the last row)
   in place of a Razor-computed inline style="border-bottom:1px solid #00BC8C !important;" string. */
.stt-tt-border-bottom-teal { border-bottom: 1px solid #00BC8C !important; }

/* Excel "Total"/"Grand Total" footer cells — mso-number-format keeps Excel from re-formatting the
   text as a number when the table is downloaded/opened as .xls (verbatim value carried over from
   the inline style, unrelated to the redesign tokens above). */
.stt-tt-mso-center { text-align: center; mso-number-format:'@("@")'; }
.stt-tt-mso-left { text-align: left; mso-number-format:'@("@")'; }

/* ---- Excel Data / Class & Teacher / Class Time Table filter rows ---- */
.stt-tt-filter-inline { margin: 5px 0px; border: 2px dotted; }
.stt-tt-fg-pad-first { padding: 5px 0px 0px 10px; }
.stt-tt-fg-pad { padding: 5px 0px; }
/* Used only inside a commented-out (dead) block in SchoolTimetable_Display.cshtml — kept for parity
   with the inline style it replaced, in case that block is ever re-enabled. */
.stt-tt-fg-pad-danger { padding: 5px 10px; height: 44px; }
.stt-tt-pagination { float: left; clear: both; margin: 10px; }

/* ---- Slide-out sidebar drill-down lists (built client-side by JS, see JSSection) ---- */
.stt-tt-btn-close { margin-top: 10px; }
.stt-tt-cursor-default { cursor: default; }
.stt-tt-sub-label { color: #94A3B8; font-weight: 500; }

/* ===================================================================
   ManagementDashoardSchoolTimetableIndex.cshtml — built entirely from this
   file's existing .hrdb-panel / .hrdb-panel-body / .enqad-panel-head /
   .enqad-panel-title / .hrdb-filter-row classes (no page-specific stt-*
   classes here — this page has none). #schoolTimetablePanel only overrides
   the couple of properties that don't fit this page: .hrdb-panel is normally
   a fixed 110mm dashboard-tile height (see .hrdb-panel rule near the top of
   this file), but this page's content (filter row + a lazy-loaded table)
   needs to size to its own content instead.
   =================================================================== */
#schoolTimetablePanel { height: auto !important; }
#schoolTimetablePanel .hrdb-panel-body { overflow: visible; }

/* -------------------------------------------------------------------
   Filter bar (.stt-filters) — a direct port of the supplied reference
   design's .filters / .field / .btn-filter block: a 4-column + auto
   grid, small uppercase tracked labels, soft-outlined controls with a
   custom caret, and a solid accent Filter button.

   Theme base: the reference's fixed --forest accent is replaced by
   --mc-primary (this ERP's live per-school AdminLTE skin colour), so
   the bar retints per school. The reference's own neutrals (paper /
   line / ink) and its coral required-marker are NOT theme-derived in
   the reference either, so they are carried over as literal hexes.

   Selector note: all three dropdowns render as <select class="form-control">
   (ET_DropDownList → Html.DropDownList) and the Teacher autocomplete's
   visible input is ALSO given .form-control at runtime by
   McampusAutocomplete.js, so one .form-control rule covers all four
   controls. These rules are scoped by the .stt-filters class (not by
   .hrdb-scope) so they cannot reach the shared .hrdb-filter-row used by
   the HR dashboard's own filters.
   ------------------------------------------------------------------- */
.stt-filters {
    --stt-f-primary: var(--mc-primary, #3C8DBC);
    --stt-f-primary-dark: var(--mc-primary-dk, #367FA9);
    --stt-f-paper: #F7F8F6;
    --stt-f-line: #E1E2DC;
    --stt-f-ink: #152420;
    --stt-f-ink-soft: #4B5750;
    --stt-f-coral: #C5453A;
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 16px;
}
@media (max-width: 900px) { .stt-filters { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .stt-filters { grid-template-columns: 1fr; } }

/* .form-group is kept on each field purely so any validation JS that toggles
   Bootstrap's .has-error on it keeps working — its 15px margin is not wanted
   inside a gap-spaced grid. */
.stt-filters .stt-field { margin-bottom: 0; min-width: 0; }

/* Label + required marker share one line above the control (reference .field label / .req). */
.stt-filters .stt-field > label {
    display: inline-block;
    margin: 0 0 6px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--stt-f-ink-soft);
}
.stt-filters .stt-field > .error-color {
    margin-left: 2px;
    font-weight: 700;
    color: var(--stt-f-coral);
}

.stt-filters .form-control {
    width: 100%;
    height: auto;
    padding: 9px 12px;
    border: 1.5px solid var(--stt-f-line);
    border-radius: 7px !important;
    background-color: var(--stt-f-paper);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--stt-f-ink);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* Native caret replaced by the reference's inline-SVG chevron. */
.stt-filters select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234B5750'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.stt-filters .form-control:focus {
    border-color: var(--stt-f-primary);
    /* Literal rgba matching the #3C8DBC default skin — a per-school-exact focus ring would need
       color-mix(), which isn't safe across this app's browser targets (same tradeoff the reference
       accepts by hardcoding its ring against a fixed --forest). */
    box-shadow: 0 0 0 3px rgba(60, 141, 188, .16);
}

/* The autocomplete partial nests its input inside wrapper divs — let them fill the grid
   cell so the Teacher control lines up with the three selects. */
.stt-filters .mcampusautocomplete,
.stt-filters .ui-combobox { width: 100%; }
.stt-filters .ui-autocomplete-multiselect { min-width: 0 !important; }

/* Filter button — reference .btn-filter, retinted to the live theme colour. */
.stt-filters .stt-btn-filter {
    height: 41px;
    padding: 0 20px;
    border: none;
    border-radius: 7px !important;
    background: var(--stt-f-primary);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: background .15s ease, transform .1s ease;
}
.stt-filters .stt-btn-filter:hover,
.stt-filters .stt-btn-filter:focus { background: var(--stt-f-primary-dark); color: #fff; }
.stt-filters .stt-btn-filter:active { transform: translateY(1px); }
@media (max-width: 900px) { .stt-filters .stt-btn-filter { grid-column: 1 / -1; } }

/* ===================================================================
   Logbook Approval Analytics — lba-* component styles
   Host view: Areas/Dashboard/Views/Dashboard/_LogbookApprovalAnalytics.cshtml
   Drill-down partial: _LogbookApprovalDetails.cshtml, rendered into the shared
   Common.js aside drawer (#aside-div-containerAjaxCRUDForm).
   The view root carries BOTH .hrdb-scope — the --hrdb-* variables are declared
   on that class only — and .lba-scope, so every rule below is prefixed
   .lba-scope and cannot leak into any other AdminLTE-skinned page.
   The column chart is pure CSS/HTML with no chart library, because each stacked
   segment has to be its own focusable click target for the drawer.
   =================================================================== */
.lba-scope * {
    box-sizing: border-box;
}

/* ---------- Card ---------- */
.lba-scope .lba-card {
    background: var(--hrdb-surface);
    border: 1px solid var(--hrdb-line);
    border-radius: var(--hrdb-radius-lg) !important;
    box-shadow: var(--hrdb-shadow-soft);
    overflow: hidden;
}

/* ---------- Head: eyebrow + title ---------- */
.lba-scope .lba-head {
    padding: 16px 20px 12px;
}

.lba-scope .lba-eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--hrdb-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .08em;
    color: var(--hrdb-ink-faint);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.lba-scope .lba-eyebrow-key {
    color: var(--hrdb-primary);
}

.lba-scope .lba-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.lba-scope .lba-title {
    font-family: var(--hrdb-font-display);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.25;
    color: var(--hrdb-ink);
    margin: 0;
}

.lba-scope .lba-head-tools {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lba-scope .lba-tool-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--hrdb-radius-sm) !important;
    background: var(--hrdb-surface-2);
    border: 1px solid var(--hrdb-line);
    color: var(--hrdb-ink-soft);
    font-size: 12px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

    .lba-scope .lba-tool-btn:hover:not(:disabled) {
        border-color: var(--hrdb-primary);
        color: var(--hrdb-primary-dark);
    }

    .lba-scope .lba-tool-btn:disabled {
        opacity: .5;
        cursor: default;
    }

/* ---------- Filter strip ---------- */
.lba-scope .lba-filters {
    padding: 12px 20px 14px;
    background: var(--hrdb-surface-2);
    border-top: 1px solid var(--hrdb-line);
    border-bottom: 1px solid var(--hrdb-line);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px 14px;
}

.lba-scope .lba-fld {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.lba-scope .lba-fld-lbl {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--hrdb-ink-faint);
}

.lba-scope .lba-sel,
.lba-scope .lba-date {
    width: 100%;
    height: 34px;
    background: var(--hrdb-surface);
    border: 1px solid var(--hrdb-line);
    border-radius: var(--hrdb-radius-sm) !important;
    color: var(--hrdb-ink);
    font-family: var(--hrdb-font-body);
    font-size: 12.5px;
    padding: 0 9px;
    box-shadow: none;
    outline: none;
}

    .lba-scope .lba-sel:focus,
    .lba-scope .lba-date:focus {
        border-color: var(--hrdb-primary);
    }

.lba-scope .lba-date {
    cursor: pointer;
}

.lba-scope .lba-range-note {
    grid-column: 1 / -1;
    font-size: 11px;
    color: var(--hrdb-ink-faint);
}

/* ---------- Summary chips ---------- */
.lba-scope .lba-sum {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 20px 0;
}

.lba-scope .lba-sum-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px !important;
    border: 1px solid var(--hrdb-line);
    background: var(--hrdb-surface-2);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--hrdb-ink-soft);
}

.lba-scope .lba-sum-val {
    font-family: var(--hrdb-font-mono);
    font-size: 13px;
    color: var(--hrdb-ink);
}

.lba-scope .lba-sum-chip.is-approved {
    background: var(--hrdb-teal-tint);
    border-color: rgba(20,184,166,.28);
    color: #0F766E;
}

    .lba-scope .lba-sum-chip.is-approved .lba-sum-val {
        color: #0F766E;
    }

.lba-scope .lba-sum-chip.is-unapproved {
    background: #FDE8EC;
    border-color: rgba(209,73,91,.28);
    color: #A8324A;
}

    .lba-scope .lba-sum-chip.is-unapproved .lba-sum-val {
        color: #A8324A;
    }

/* ---------- Legend ---------- */
.lba-scope .lba-legend {
    display: flex;
    justify-content: center;
    gap: 18px;
    padding: 14px 20px 6px;
}

.lba-scope .lba-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    color: var(--hrdb-ink-soft);
}

.lba-scope .lba-legend-swatch {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    flex: none;
}

/* ---------- Chart: y-axis + plot ---------- */
.lba-scope .lba-chart {
    position: relative;
    display: flex;
    padding: 6px 20px 18px;
}

.lba-scope .lba-yaxis {
    position: relative;
    width: 38px;
    flex: none;
    height: 300px;
}

/* Inner box stops 26px above the bottom, exactly like .lba-grid, so a tick at
   bottom:N% lines up with the gridline at bottom:N% without any calc() maths. */
.lba-scope .lba-yaxis-inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 26px;
}

.lba-scope .lba-ytick {
    position: absolute;
    right: 6px;
    transform: translateY(-50%);
    font-family: var(--hrdb-font-mono);
    font-size: 10px;
    color: var(--hrdb-ink-faint);
    white-space: nowrap;
}

.lba-scope .lba-plot {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 300px;
    overflow-x: auto;
    overflow-y: hidden;
}

.lba-scope .lba-grid {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 26px;
    pointer-events: none;
}

.lba-scope .lba-gridline {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed var(--hrdb-line);
}

    .lba-scope .lba-gridline.is-base {
        border-top-style: solid;
        border-top-color: #D6DAEC;
    }

.lba-scope .lba-cols {
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 10px;
    min-width: 100%;
}

/* The 26px bottom padding is the x-axis label strip. It lives on .lba-col ONLY (never
   also on .lba-cols or .lba-col-stack) so the segments' percentage heights resolve
   against exactly the same box the gridlines are drawn in — .lba-grid stops 26px up
   for the same reason. Adding the padding twice silently shortens every column. */
.lba-scope .lba-col {
    flex: 1 1 0;
    min-width: 52px;
    max-width: 96px;
    height: 100%;
    padding-bottom: 26px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
}

.lba-scope .lba-col-stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
}

.lba-scope .lba-seg {
    display: block;
    width: 100%;
    border: none;
    padding: 0;
    min-height: 0;
    text-align: center;
    font-size: 10.5px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
    overflow: hidden;
    transition: filter .12s ease;
}

    .lba-scope .lba-seg.is-approved {
        background: #12857A;
        cursor: pointer;
    }

    .lba-scope .lba-seg.is-unapproved {
        background: #D1495B;
        border-radius: 4px 4px 0 0;
        cursor: pointer;
    }

    /* When nothing is unapproved, the approved segment IS the top of the column. */
    .lba-scope .lba-col-stack.is-approved-top .lba-seg.is-approved {
        border-radius: 4px 4px 0 0;
    }

    .lba-scope .lba-seg:hover {
        filter: brightness(1.12);
    }

    .lba-scope .lba-seg:focus {
        outline: 2px solid var(--hrdb-primary);
        outline-offset: -2px;
    }

.lba-scope .lba-col-lbl {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--hrdb-ink-soft);
    white-space: nowrap;
}

/* ---------- Floating tooltip ---------- */
.lba-scope .lba-tip {
    position: absolute;
    display: none;
    z-index: 20;
    min-width: 150px;
    padding: 8px 10px;
    border-radius: 10px !important;
    background: rgba(23,27,45,.95);
    color: #fff;
    font-size: 11.5px;
    line-height: 1.5;
    pointer-events: none;
    box-shadow: 0 6px 22px -6px rgba(15,23,42,.5);
}

.lba-scope .lba-tip-ttl {
    font-weight: 700;
    margin-bottom: 3px;
}

.lba-scope .lba-tip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.lba-scope .lba-tip-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 6px;
}

.lba-scope .lba-tip-hint {
    margin-top: 4px;
    padding-top: 3px;
    border-top: 1px solid rgba(255,255,255,.2);
    font-size: 10.5px;
    color: #C9CEE6;
}

/* ---------- Empty / loading ---------- */
.lba-scope .lba-msg {
    padding: 46px 20px;
    text-align: center;
    color: var(--hrdb-ink-faint);
    font-size: 12.5px;
    font-weight: 500;
}

    .lba-scope .lba-msg i {
        display: block;
        font-size: 26px;
        margin-bottom: 8px;
    }

/* Both of these are injected AS a flex item of .lba-cols (align-items:flex-end), hence the
   explicit width and the align-self override — otherwise they shrink and hug the x-axis. */
.lba-scope .lba-cols > .lba-msg {
    align-self: center;
    width: 100%;
}

.lba-scope .lba-skel {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 10px;
    width: 100%;
    height: 100%;
    padding-bottom: 26px;
}

.lba-scope .lba-skel-col {
    flex: 1 1 0;
    max-width: 96px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(90deg, #EEF0F8 25%, #F7F8FC 37%, #EEF0F8 63%);
    background-size: 400% 100%;
    animation: lbaSkel 1.3s ease infinite;
}

@keyframes lbaSkel {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@media (max-width: 768px) {
    .lba-scope .lba-yaxis,
    .lba-scope .lba-plot {
        height: 240px;
    }

    .lba-scope .lba-legend {
        gap: 12px;
    }
}

/* ---------- Drill-down list rendered inside the Common.js aside drawer ----------
   The drawer host (#aside-div-containerAjaxCRUDForm) is outside .lba-scope, so this
   block is scoped on its own root class .lba-drawer instead. The partial's own root
   also carries .hrdb-scope so the --hrdb-* variables resolve there too. ---------- */
.lba-drawer {
    font-family: var(--hrdb-font-body);
    font-size: 12.5px;
    color: var(--hrdb-ink);
}

.lba-drawer .lba-dw-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--hrdb-line);
}

.lba-drawer .lba-dw-date {
    font-family: var(--hrdb-font-display);
    font-weight: 600;
    font-size: 14px;
}

.lba-drawer .lba-dw-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px !important;
    font-size: 11px;
    font-weight: 600;
}

    .lba-drawer .lba-dw-pill.is-approved {
        background: var(--hrdb-teal-tint);
        color: #0F766E;
    }

    .lba-drawer .lba-dw-pill.is-unapproved {
        background: #FDE8EC;
        color: #A8324A;
    }

.lba-drawer .lba-dw-count {
    margin-left: auto;
    font-family: var(--hrdb-font-mono);
    font-size: 11.5px;
    color: var(--hrdb-ink-soft);
}

.lba-drawer .lba-dw-search {
    width: 100%;
    height: 34px;
    margin-bottom: 12px;
    background: var(--hrdb-surface-2);
    border: 1px solid var(--hrdb-line);
    border-radius: var(--hrdb-radius-sm) !important;
    font-size: 12.5px;
    padding: 0 11px;
    box-shadow: none;
}

    .lba-drawer .lba-dw-search:focus {
        border-color: var(--hrdb-primary);
        outline: none;
    }

.lba-drawer .lba-dw-note {
    margin-bottom: 12px;
    padding: 8px 11px;
    border-radius: var(--hrdb-radius-sm) !important;
    background: var(--hrdb-amber-tint);
    border: 1px solid rgba(245,185,66,.35);
    font-size: 11.5px;
    color: #8A5B00;
}

/* Class + division group header — the list is ordered by class then division, so every
   change of that pair opens a new group. */
.lba-drawer .lba-dw-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 7px;
    font-family: var(--hrdb-font-display);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--hrdb-ink);
}

    .lba-drawer .lba-dw-group.is-first {
        margin-top: 0;
    }

.lba-drawer .lba-dw-group-line {
    flex: 1;
    height: 1px;
    background: var(--hrdb-line);
}

.lba-drawer .lba-dw-group-n {
    font-family: var(--hrdb-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--hrdb-ink-faint);
}

.lba-drawer .lba-dw-item {
    display: flex;
    gap: 10px;
    padding: 9px 11px;
    margin-bottom: 6px;
    border: 1px solid var(--hrdb-line);
    border-radius: var(--hrdb-radius-md) !important;
    background: var(--hrdb-surface-2);
}

.lba-drawer .lba-dw-period {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 11px !important;
    background: var(--hrdb-primary-tint);
    color: var(--hrdb-primary-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
}

.lba-drawer .lba-dw-period-n {
    font-family: var(--hrdb-font-mono);
    font-size: 13px;
}

.lba-drawer .lba-dw-body {
    flex: 1;
    min-width: 0;
}

.lba-drawer .lba-dw-subject {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--hrdb-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lba-drawer .lba-dw-meta {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--hrdb-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lba-drawer .lba-dw-topic {
    margin-top: 3px;
    font-size: 11px;
    color: var(--hrdb-ink-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lba-drawer .lba-dw-empty {
    padding: 34px 10px;
    text-align: center;
    color: var(--hrdb-ink-faint);
    font-size: 12.5px;
    font-weight: 500;
}