.page-shell {
    width: 100vw;
    max-width: none;
    overflow-x: hidden
}

:root {
    --density-scale: 1;
    --page-gap: 1rem;
    --control-height: 2.35rem;
    --control-py: .55rem;
    --control-px: .7rem;
    --card-padding: 1rem
}

.toolbar-search-export {
    align-items: center;
    display: flex;
    gap: .6rem;
    min-width: 0
}

    .toolbar-search-export .search-box {
        flex: 1 1 24rem
    }

    .toolbar-search-export .grid-export {
        flex: 0 0 auto
    }

.main-content {
    grid-area: main;
    min-width: 0;
    width: 100%;
    max-width: none;
    padding: 1.5rem 2rem !important
}

.content-inner {
    display: block;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important
}

    .content-inner > * {
        max-width: none !important
    }

.page-header, .surface, .filter-bar, .metric-grid, .dashboard-grid, .checkin-layout, .students-surface, .schools-surface, .tenant-create, .tenant-list, .attendance-shell, .reports-shell, .statistics-shell {
    max-width: none !important;
    width: 100% !important
}

.tabler-table {
    min-width: 100%
}

@media(min-width:901px) {
    .table-wrap {
        display: block !important;
        overflow-x: auto !important;
        width: 100% !important
    }

    .tabler-table {
        border-collapse: collapse !important;
        display: table !important;
        table-layout: auto !important;
        width: 100% !important
    }

        .tabler-table thead {
            display: table-header-group !important
        }

        .tabler-table tbody {
            display: table-row-group !important
        }

        .tabler-table tr {
            display: table-row !important
        }

        .tabler-table th, .tabler-table td {
            display: table-cell !important;
            vertical-align: middle !important;
            white-space: nowrap
        }

            .tabler-table th:last-child, .tabler-table td:last-child {
                width: 1%;
                white-space: nowrap
            }

    .school-grid, .tenant-rows, .generic-card-grid {
        grid-template-columns: repeat(auto-fit,minmax(18rem,1fr))
    }
}

.tooltip {
    display: block;
    font-family: var(--tblr-font,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.35;
    margin: 0;
    opacity: 0;
    position: absolute;
    text-align: left;
    z-index: 1080
}

    .tooltip.show {
        opacity: 1
    }

    .tooltip .tooltip-arrow {
        display: block;
        height: .4rem;
        position: absolute;
        width: .8rem
    }

        .tooltip .tooltip-arrow:before {
            border-color: transparent;
            border-style: solid;
            content: "";
            position: absolute
        }

.tooltip-inner {
    background: #182433;
    border-radius: var(--radius,4px);
    box-shadow: 0 .35rem 1rem rgba(24,36,51,.18);
    color: #fff;
    max-width: 14rem;
    padding: .38rem .6rem
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow, .bs-tooltip-top .tooltip-arrow {
    bottom: calc(-1*.4rem)
}

    .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow:before, .bs-tooltip-top .tooltip-arrow:before {
        border-top-color: #182433;
        border-width: .4rem .4rem 0;
        top: -1px
    }

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow, .bs-tooltip-bottom .tooltip-arrow {
    top: calc(-1*.4rem)
}

    .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow:before, .bs-tooltip-bottom .tooltip-arrow:before {
        border-bottom-color: #182433;
        border-width: 0 .4rem .4rem;
        bottom: -1px
    }

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow, .bs-tooltip-start .tooltip-arrow {
    right: calc(-1*.4rem);
    height: .8rem;
    width: .4rem
}

    .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow:before, .bs-tooltip-start .tooltip-arrow:before {
        border-left-color: #182433;
        border-width: .4rem 0 .4rem .4rem;
        left: -1px
    }

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow, .bs-tooltip-end .tooltip-arrow {
    left: calc(-1*.4rem);
    height: .8rem;
    width: .4rem
}

    .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow:before, .bs-tooltip-end .tooltip-arrow:before {
        border-right-color: #182433;
        border-width: .4rem .4rem .4rem 0;
        right: -1px
    }

.grid-export {
    position: relative;
    z-index: 30
}

.grid-export-toggle {
    align-items: center;
    display: flex;
    gap: .4rem;
    min-height: 2.35rem;
    white-space: nowrap
}

    .grid-export-toggle:before {
        content: "⇩";
        font-size: .9rem
    }

    .grid-export-toggle i {
        font-style: normal;
        margin-left: .1rem
    }

.grid-export-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius,4px);
    box-shadow: 0 .75rem 1.6rem rgba(24,36,51,.14);
    display: grid;
    min-width: 9rem;
    padding: .35rem;
    position: absolute;
    right: 0;
    top: calc(100% + .35rem);
    z-index: 80
}

    .grid-export-menu button {
        background: transparent;
        border: 0;
        border-radius: var(--radius,4px);
        color: var(--text);
        cursor: pointer;
        font: inherit;
        padding: .55rem .7rem;
        text-align: left
    }

        .grid-export-menu button:hover {
            background: var(--tblr-menu-hover);
            color: var(--accent)
        }

[dir="rtl"] .toolbar-search-export .grid-export, [dir="rtl"] .generic-toolbar > .grid-export, [dir="rtl"] .list-toolbar > .grid-export, [dir="rtl"] .schools-toolbar .grid-export, [dir="rtl"] .notifications-toolbar .grid-export, [dir="rtl"] .page-actions > .grid-export {
    margin-left: 0 !important;
    margin-right: auto !important;
    order: 99
}

[dir="rtl"] .toolbar-search-export .search-box {
    order: 0
}

[dir="rtl"] .grid-export-menu {
    left: 0;
    right: auto
}

    [dir="rtl"] .grid-export-menu button {
        direction: rtl;
        flex-direction: row;
        text-align: right
    }

@media(max-width:600px) {
    .main-content {
        padding: 1rem !important
    }
}

.grid-export-menu button {
    align-items: center;
    display: flex;
    gap: .55rem
}

.export-format-icon {
    align-items: center;
    border-radius: 4px;
    color: #fff;
    display: inline-flex;
    font-size: .58rem;
    font-weight: 800;
    height: 1.35rem;
    justify-content: center;
    letter-spacing: .02em;
    line-height: 1;
    min-width: 1.75rem;
    padding: 0 .25rem
}

    .export-format-icon.pdf {
        background: #d63939
    }

    .export-format-icon.csv {
        background: #2fb344
    }

    .export-format-icon.excel {
        background: #0ca678
    }

.boolean-pill {
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 700;
    gap: .4rem;
    min-width: 4rem;
    padding: .25rem .6rem
}

    .boolean-pill.on {
        background: color-mix(in srgb,#2fb344 12%,var(--surface));
        border-color: color-mix(in srgb,#2fb344 38%,var(--border));
        color: #2fb344
    }

    .boolean-pill.off {
        background: color-mix(in srgb,#667382 10%,var(--surface));
        border-color: var(--border);
        color: var(--muted)
    }

.boolean-pill-dot {
    border-radius: 999px;
    display: inline-block;
    height: .45rem;
    width: .45rem
}

.boolean-pill.on .boolean-pill-dot {
    background: #2fb344;
    box-shadow: 0 0 0 .18rem color-mix(in srgb,#2fb344 16%,transparent)
}

.boolean-pill.off .boolean-pill-dot {
    background: var(--muted)
}

.country-cell {
    align-items: center;
    display: inline-flex;
    gap: .4rem
}

.country-flag {
    border-radius: .2rem;
    box-shadow: 0 0 0 1px var(--border);
    display: block;
    height: .85rem;
    object-fit: cover;
    width: 1.2rem
}

.audit-status-pill {
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 700;
    gap: .4rem;
    line-height: 1;
    min-width: 5.2rem;
    padding: .38rem .65rem;
    text-transform: capitalize
}

.audit-status-dot {
    border-radius: 999px;
    display: inline-block;
    height: .45rem;
    width: .45rem
}

.audit-status-pill.success {
    background: color-mix(in srgb,#2fb344 12%,var(--surface));
    border-color: color-mix(in srgb,#2fb344 38%,var(--border));
    color: #2fb344
}

    .audit-status-pill.success .audit-status-dot {
        background: #2fb344
    }

.audit-status-pill.danger {
    background: color-mix(in srgb,#d63939 12%,var(--surface));
    border-color: color-mix(in srgb,#d63939 38%,var(--border));
    color: #d63939
}

    .audit-status-pill.danger .audit-status-dot {
        background: #d63939
    }

.audit-status-pill.warning {
    background: color-mix(in srgb,#f59f00 14%,var(--surface));
    border-color: color-mix(in srgb,#f59f00 40%,var(--border));
    color: #b7791f
}

    .audit-status-pill.warning .audit-status-dot {
        background: #f59f00
    }

.audit-status-pill.info {
    background: color-mix(in srgb,#206bc4 12%,var(--surface));
    border-color: color-mix(in srgb,#206bc4 38%,var(--border));
    color: #206bc4
}

    .audit-status-pill.info .audit-status-dot {
        background: #206bc4
    }

.audit-status-pill.muted {
    background: color-mix(in srgb,#667382 10%,var(--surface));
    border-color: var(--border);
    color: var(--muted)
}

    .audit-status-pill.muted .audit-status-dot {
        background: var(--muted)
    }

.payment-status-pill {
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    display: inline-flex;
    font-size: inherit;
    font-weight: 400;
    gap: .4rem;
    line-height: 1;
    min-width: auto;
    padding: .34rem .6rem
}

.payment-status-dot {
    border-radius: 999px;
    display: inline-block;
    height: .45rem;
    width: .45rem
}

.payment-status-pill.paid {
    background: color-mix(in srgb,#2fb344 12%,var(--surface));
    border-color: color-mix(in srgb,#2fb344 38%,var(--border));
    color: #2fb344
}

    .payment-status-pill.paid .payment-status-dot {
        background: #2fb344
    }

.payment-status-pill.partial {
    background: color-mix(in srgb,#f59f00 14%,var(--surface));
    border-color: color-mix(in srgb,#f59f00 40%,var(--border));
    color: #b7791f
}

    .payment-status-pill.partial .payment-status-dot {
        background: #f59f00
    }

.payment-status-pill.pending {
    background: color-mix(in srgb,#206bc4 12%,var(--surface));
    border-color: color-mix(in srgb,#206bc4 38%,var(--border));
    color: #206bc4
}

    .payment-status-pill.pending .payment-status-dot {
        background: #206bc4
    }

.payment-status-pill.late {
    background: color-mix(in srgb,#d63939 12%,var(--surface));
    border-color: color-mix(in srgb,#d63939 38%,var(--border));
    color: #d63939
}

    .payment-status-pill.late .payment-status-dot {
        background: #d63939
    }

.payment-status-pill.draft, .payment-status-pill.muted {
    background: color-mix(in srgb,#667382 10%,var(--surface));
    border-color: var(--border);
    color: var(--muted)
}

    .payment-status-pill.draft .payment-status-dot, .payment-status-pill.muted .payment-status-dot {
        background: var(--muted)
    }

.status-badge {
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 600;
    gap: .35rem;
    line-height: 1;
    min-height: 1.65rem;
    padding: .35rem .65rem;
    white-space: nowrap
}

    .status-badge::before {
        border-radius: 999px;
        content: "";
        height: .45rem;
        width: .45rem
    }

    .status-badge.status-success {
        background: rgba(47,179,68,.1);
        border-color: rgba(47,179,68,.25);
        color: #2b8a3e
    }

        .status-badge.status-success::before {
            background: #2fb344
        }

    .status-badge.status-info {
        background: rgba(32,107,196,.1);
        border-color: rgba(32,107,196,.25);
        color: #206bc4
    }

        .status-badge.status-info::before {
            background: #206bc4
        }

    .status-badge.status-muted {
        background: color-mix(in srgb,var(--muted) 10%,var(--surface));
        border-color: color-mix(in srgb,var(--muted) 24%,var(--border));
        color: var(--muted)
    }

        .status-badge.status-muted::before {
            background: var(--muted)
        }

.grid-profile-avatar {
    background: color-mix(in srgb,var(--accent) 10%,var(--surface));
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(15,23,42,.08);
    display: inline-flex;
    height: 2.35rem;
    object-fit: cover;
    width: 2.35rem
}

    .grid-profile-avatar.empty {
        align-items: center;
        color: var(--muted);
        font-size: 1rem;
        justify-content: center
    }

.tabler-table th.grid-image-header, .tabler-table td.grid-image-cell {
    padding-left: .75rem !important;
    padding-right: .35rem !important;
    text-align: center !important;
    width: 3.35rem !important;
    min-width: 3.35rem !important;
    max-width: 3.35rem !important
}

    .tabler-table td.grid-image-cell .grid-profile-avatar {
        display: flex;
        margin-inline: auto
    }

.grid-language-cell {
    align-items: center;
    display: inline-flex;
    gap: .5rem;
    white-space: nowrap
}

    .grid-language-cell img {
        border: 1px solid var(--border);
        border-radius: .22rem;
        box-shadow: 0 .12rem .28rem rgba(24,36,51,.08);
        height: 1.05rem;
        object-fit: cover;
        width: 1.45rem
    }

    .grid-language-cell span {
        font-weight: 400
    }

.boolean-switch {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    justify-content: flex-start;
    margin: 0;
    min-height: 2.4rem
}

    .boolean-switch input {
        height: 1px;
        opacity: 0;
        position: absolute;
        width: 1px
    }

    .boolean-switch span {
        align-items: center;
        background: transparent;
        border: 0;
        color: var(--muted);
        display: inline-flex;
        font-size: .82rem;
        font-weight: 600;
        gap: .65rem;
        min-width: auto;
        padding: 0;
        transition: .16s ease
    }

    .boolean-switch i {
        background: var(--border);
        border: 1px solid color-mix(in srgb,var(--border) 72%,#667382);
        border-radius: 999px;
        display: inline-block;
        height: 1.25rem;
        position: relative;
        transition: .16s ease;
        width: 2.25rem
    }

        .boolean-switch i::after {
            background: #fff;
            border-radius: 999px;
            box-shadow: 0 .08rem .18rem rgba(15,23,42,.22);
            content: "";
            height: .9rem;
            inset-block-start: 50%;
            inset-inline-start: .16rem;
            position: absolute;
            transform: translateY(-50%);
            transition: .16s ease;
            width: .9rem
        }

    .boolean-switch b {
        color: var(--text);
        font: inherit
    }

    .boolean-switch input:checked + span {
        color: var(--accent)
    }

        .boolean-switch input:checked + span i {
            background: var(--accent);
            border-color: var(--accent);
            box-shadow: 0 0 0 .18rem color-mix(in srgb,var(--accent) 16%,transparent)
        }

            .boolean-switch input:checked + span i::after {
                inset-inline-start: calc(100% - 1.06rem)
            }

    .boolean-switch:hover i {
        border-color: var(--accent)
    }

    .boolean-switch input:focus-visible + span i {
        box-shadow: 0 0 0 .18rem color-mix(in srgb,var(--accent) 18%,transparent)
    }

.record-boolean-switch {
    justify-content: flex-start
}

    .record-boolean-switch span {
        min-height: 2.4rem
    }

.boolean-switch-readonly {
    cursor: default;
    pointer-events: none
}

    .boolean-switch-readonly span {
        font-size: .78rem;
        font-weight: 600
    }

    .boolean-switch-readonly.on span {
        color: var(--accent)
    }

    .boolean-switch-readonly.on i {
        background: var(--accent);
        border-color: var(--accent);
        box-shadow: 0 0 0 .16rem color-mix(in srgb,var(--accent) 14%,transparent)
    }

        .boolean-switch-readonly.on i::after {
            inset-inline-start: calc(100% - 1.06rem)
        }

    .boolean-switch-readonly.off span {
        color: var(--muted)
    }

    .boolean-switch-readonly.off i {
        background: var(--border);
        border-color: var(--border)
    }

.sidebar {
    padding: 1rem .75rem !important
}

.brand {
    border-bottom: 1px solid var(--border);
    padding: .35rem .5rem 1.25rem
}

.sidebar-nav {
    display: grid;
    gap: .35rem !important;
    margin-top: 1.35rem !important
}

.sidebar-section {
    color: #98a2b3;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    margin: 1.1rem .75rem .35rem;
    text-transform: uppercase
}

.nav-item {
    align-items: center;
    display: flex;
    gap: .75rem;
    padding: .52rem .75rem !important
}

.nav-icon {
    align-items: center;
    color: inherit;
    display: inline-flex;
    font-size: .92rem;
    height: 1.25rem;
    justify-content: center;
    width: 1.25rem
}

.nav-item.active {
    box-shadow: inset 3px 0 var(--accent);
    font-weight: 600
}

.nav-icon svg {
    display: block;
    fill: currentColor;
    height: 1.08rem;
    width: 1.08rem
}

.theme-settings {
    max-width: none !important;
    width: 100%
}

.auth-panel {
    max-width: 44rem
}

:root {
    --tblr-primary: #206bc4;
    --tblr-menu-bg: #f6f8fb;
    --tblr-menu-border: #d9dee3;
    --tblr-menu-text: #182433;
    --tblr-menu-muted: #667382;
    --tblr-menu-hover: #eef1f5;
    --tblr-menu-active: #e9f1ff
}

.sidebar {
    background: var(--tblr-menu-bg) !important;
    border-right: 1px solid var(--tblr-menu-border) !important;
    box-shadow: none !important;
    color: var(--tblr-menu-text) !important
}

.sidebar {
    height: 100vh !important;
    overflow-y: auto !important;
    position: sticky !important;
    top: 0 !important
}

    .sidebar::-webkit-scrollbar {
        width: 6px
    }

    .sidebar::-webkit-scrollbar-thumb {
        background: #dce3eb;
        border-radius: 999px
    }

@media(min-width:901px) {
    html, body, #app {
        height: 100%;
        overflow: hidden
    }

    .page-shell {
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow: hidden !important
    }

    .sidebar {
        height: 100dvh !important;
        max-height: 100dvh !important;
        overscroll-behavior: contain
    }

    .sidebar-nav {
        padding-bottom: 1rem
    }

    .main-content {
        min-height: 0 !important;
        overflow: auto !important
    }
}

.page-actions {
    align-items: center;
    display: flex;
    gap: .5rem
}

.brand {
    border-bottom: 1px solid var(--tblr-menu-border) !important;
    color: var(--tblr-menu-text) !important;
    font-weight: 600 !important
}

.brand-mark {
    background: var(--tblr-primary) !important;
    border-radius: 4px !important;
    color: #fff !important
}

.sidebar-section {
    color: var(--tblr-menu-muted) !important;
    font-size: .6875rem !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important
}

.nav-item {
    background: transparent !important;
    border-radius: 4px !important;
    color: var(--tblr-menu-text) !important;
    font-weight: 400 !important
}

    .nav-item:hover {
        background: var(--tblr-menu-hover) !important;
        color: var(--tblr-primary) !important
    }

    .nav-item.active {
        background: var(--tblr-menu-active) !important;
        box-shadow: none !important;
        color: var(--tblr-primary) !important;
        font-weight: 500 !important
    }

.nav-icon {
    color: var(--tblr-menu-muted) !important;
    opacity: 1
}

.nav-item:hover .nav-icon, .nav-item.active .nav-icon {
    color: var(--tblr-primary) !important
}

.nav-group {
    border-radius: var(--radius,4px);
    display: grid
}

    .nav-group summary {
        align-items: center;
        border-radius: var(--radius,4px);
        color: var(--tblr-menu-text);
        cursor: pointer;
        display: flex;
        font-weight: 600;
        gap: .75rem;
        list-style: none;
        min-height: 2.35rem;
        padding: .56rem .75rem;
        user-select: none
    }

        .nav-group summary::-webkit-details-marker {
            display: none
        }

        .nav-group summary::after {
            border-bottom: 1.5px solid currentColor;
            border-right: 1.5px solid currentColor;
            color: var(--tblr-menu-muted);
            content: "";
            height: .42rem;
            margin-left: auto;
            transform: rotate(-45deg);
            transition: transform .16s ease;
            width: .42rem
        }

    .nav-group[open] summary::after {
        transform: rotate(45deg)
    }

    .nav-group summary:hover {
        background: var(--tblr-menu-hover);
        color: var(--tblr-primary)
    }

        .nav-group summary:hover .nav-icon {
            color: var(--tblr-primary) !important
        }

.nav-submenu {
    border-left: 1px solid color-mix(in srgb,var(--tblr-menu-border) 85%,transparent);
    display: grid;
    gap: .08rem;
    margin: .12rem 0 .35rem 1.35rem;
    padding-left: .45rem
}

    .nav-submenu .nav-item {
        font-size: .84rem;
        gap: .45rem;
        min-height: 2rem;
        padding: .42rem .65rem !important
    }

        .nav-submenu .nav-item::before {
            background: var(--tblr-menu-muted);
            border-radius: 999px;
            content: "";
            height: .28rem;
            opacity: .55;
            width: .28rem
        }

        .nav-submenu .nav-item:hover::before, .nav-submenu .nav-item.active::before {
            background: var(--tblr-primary);
            opacity: 1
        }

[data-theme="light"] .sidebar {
    background: #f6f8fb !important;
    border-right-color: #d9dee3 !important
}

[data-theme="light"] .brand {
    color: #182433 !important
}

[data-theme="light"] .nav-item {
    color: #182433 !important
}

[data-theme="light"] .sidebar-section, [data-theme="light"] .nav-icon {
    color: #667382 !important
}

[data-theme="light"] .nav-item:hover {
    background: #eef1f5 !important;
    color: #206bc4 !important
}

[data-theme="light"] .nav-item.active {
    background: #eef5ff !important;
    color: #206bc4 !important
}

[data-theme="dark"] {
    --tblr-menu-bg: #151f2c;
    --tblr-menu-border: #253143;
    --tblr-menu-text: #dce3eb;
    --tblr-menu-muted: #8b98a9;
    --tblr-menu-hover: #1d2938;
    --tblr-menu-active: #20334f
}

    [data-theme="dark"] .sidebar {
        background: #151f2c !important;
        border-right-color: #253143 !important;
        color: #dce3eb !important
    }

    [data-theme="dark"] .brand {
        border-bottom-color: #253143 !important;
        color: #f6f8fb !important
    }

    [data-theme="dark"] .nav-item {
        color: #dce3eb !important
    }

    [data-theme="dark"] .sidebar-section, [data-theme="dark"] .nav-icon {
        color: #8b98a9 !important
    }

    [data-theme="dark"] .nav-item:hover {
        background: #1d2938 !important;
        color: var(--accent) !important
    }

    [data-theme="dark"] .nav-item.active {
        background: #20334f !important;
        color: var(--accent) !important
    }
/* Tabler typography baseline: Inter/system sans, 14px body, compact 1.5 rhythm. */
:root {
    --app-font: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --arabic-font: "Noto Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif
}

html, body {
    font-family: var(--app-font) !important;
    font-size: 14px;
    line-height: 1.5
}

.export-only {
    display: none !important
}

.sidebar, .topbar, .nav-item, .btn, .topbar-link {
    font-size: .875rem
}

.page-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.25
}

.page-header p, .surface-heading span, .metric span, .metric small {
    font-size: .8125rem
}

.surface-heading h2 {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.35
}

.tabler-table th {
    background: color-mix(in srgb,var(--accent) 10%,var(--surface)) !important;
    border-bottom: 1px solid color-mix(in srgb,var(--accent) 24%,var(--border)) !important;
    color: color-mix(in srgb,var(--accent) 55%,var(--text)) !important;
    font-size: .6875rem;
    letter-spacing: .04em
}

.tabler-table thead {
    background: color-mix(in srgb,var(--accent) 10%,var(--surface)) !important
}

.tabler-table th .sort-header {
    color: inherit !important
}

    .tabler-table th .sort-header i {
        color: color-mix(in srgb,var(--accent) 55%,var(--muted)) !important
    }

        .tabler-table th .sort-header i.sort-asc::before {
            content: "\2191"
        }

        .tabler-table th .sort-header i.sort-desc::before {
            content: "\2193"
        }

        .tabler-table th .sort-header i.sort-neutral::before {
            content: "\2195"
        }

.tabler-table td b, .tabler-table td strong {
    font-weight: 400 !important
}

.notification-clickable-row {
    cursor: pointer
}

.btn, .surface, .metric, .filter-bar, .theme-option, .theme-swatch, .theme-radius, .search-box, .field input, .list-toolbar select, .filter-bar select, .generic-toolbar select, .school-record, .brand-mark, .nav-item {
    border-radius: var(--radius,4px) !important
}

.generic-toolbar, .list-toolbar, .schools-toolbar, .notifications-toolbar {
    min-width: 0;
    width: 100%
}

.list-toolbar {
    justify-content: flex-start !important
}

    .list-toolbar > .toolbar-search-export {
        flex: 1 1 auto;
        width: 100%
    }

.schools-toolbar {
    grid-template-columns: minmax(0,1fr) auto !important
}

.timeline-toolbar {
    justify-content: flex-start !important
}

.generic-toolbar .search-box, .list-toolbar .search-box, .schools-toolbar .search-box, .notifications-toolbar .search-box, .toolbar-search-export .search-box {
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important
}

.generic-toolbar > .search-box:only-child, .list-toolbar > .search-box:only-child, .schools-toolbar > .search-box:only-child, .notifications-toolbar > .search-box:only-child {
    max-width: none !important;
    width: 100% !important
}

.search-box input {
    min-width: 0;
    width: 100% !important
}

.search-clear-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    height: 1.65rem;
    justify-content: center;
    line-height: 1;
    margin-left: auto;
    padding: 0;
    width: 1.65rem
}

    .search-clear-button:hover {
        background: var(--tblr-menu-hover);
        color: var(--accent)
    }

[dir="rtl"] .search-clear-button {
    margin-left: 0;
    margin-right: auto
}

.btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important
}

.btn:disabled, .btn[disabled] {
    background: #eef1f5 !important;
    border-color: #d7dde6 !important;
    color: #8a95a5 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    pointer-events: none !important
}

.btn-primary:disabled, .btn-primary[disabled] {
    background: #dbe1ea !important;
    border-color: #cbd3df !important;
    color: #7b8798 !important
}

.btn-spinner {
    animation: btn-spin .75s linear infinite;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    display: inline-block;
    height: .95rem;
    margin-right: .45rem;
    vertical-align: -.16rem;
    width: .95rem
}

@keyframes btn-spin {
    to {
        transform: rotate(360deg)
    }
}

.eyebrow, .theme-option span, .legend i {
    color: var(--accent) !important
}

.chart-line, .chart-curve {
    border-bottom-color: var(--accent) !important
}

.present, .dot.present {
    background: var(--accent) !important
}

.search-select {
    display: grid;
    gap: .35rem;
    min-width: 12rem;
    position: relative
}

    .search-select label {
        color: var(--muted);
        font-size: .75rem;
        font-weight: 600
    }

.search-select-toggle {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius,4px);
    color: var(--text);
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: .75rem;
    justify-content: space-between;
    min-height: 2.35rem;
    padding: .55rem .7rem;
    text-align: left;
    width: 100%
}

    .search-select-toggle:disabled {
        background: color-mix(in srgb,var(--muted) 8%,var(--surface));
        color: var(--muted);
        cursor: not-allowed;
        opacity: .72
    }

    .search-select-toggle span {
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .search-select-toggle span, .search-select-option {
        align-items: center;
        display: flex;
        gap: .5rem
    }

.select-option-icon {
    border: 1px solid var(--border);
    border-radius: .2rem;
    box-shadow: 0 .1rem .25rem rgba(24,36,51,.08);
    flex: 0 0 auto;
    height: 1rem;
    object-fit: cover;
    width: 1.4rem
}

.log-level-option-icon {
    background: color-mix(in srgb,var(--accent) 8%,var(--surface));
    border-radius: 999px;
    box-shadow: none;
    height: 1.35rem;
    object-fit: contain;
    padding: .22rem;
    width: 1.35rem
}

.log-level-error {
    background: rgba(214,57,57,.1);
    border-color: rgba(214,57,57,.28)
}

.log-level-warning {
    background: rgba(245,159,0,.12);
    border-color: rgba(245,159,0,.32)
}

.log-level-info {
    background: rgba(32,107,196,.1);
    border-color: rgba(32,107,196,.28)
}

.log-level-debug {
    background: color-mix(in srgb,var(--muted) 12%,var(--surface));
    border-color: color-mix(in srgb,var(--muted) 28%,var(--border))
}

[data-theme="dark"] .log-level-option-icon {
    background: rgba(255,255,255,.06)
}

.role-option-icon {
    align-items: center;
    background: color-mix(in srgb,var(--accent) 10%,var(--surface));
    border: 1px solid color-mix(in srgb,var(--accent) 24%,var(--border));
    border-radius: var(--radius,4px);
    box-shadow: none;
    color: var(--accent);
    display: inline-flex;
    height: 1.45rem;
    justify-content: center;
    width: 1.45rem
}

    .role-option-icon svg {
        display: block;
        height: .95rem;
        width: .95rem
    }

        .role-option-icon svg * {
            fill: currentColor !important;
            stroke: currentColor !important
        }

.search-select-toggle i {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    flex: 0 0 auto;
    font-style: normal;
    height: 1rem;
    justify-content: center;
    line-height: 1;
    width: 1rem
}

    .search-select-toggle i:before {
        border-bottom: 1.5px solid currentColor;
        border-right: 1.5px solid currentColor;
        content: "";
        display: block;
        height: .42rem;
        transform: translateY(-.12rem) rotate(45deg);
        width: .42rem
    }

.search-select-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius,4px);
    box-shadow: 0 .75rem 2rem #0000001a;
    left: 0;
    min-width: 100%;
    padding: .5rem;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 20
}

.search-select-input {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius,4px);
    color: var(--text);
    font: inherit;
    margin-bottom: .45rem;
    outline: 0;
    padding: .55rem .65rem;
    width: 100%
}

    .search-select-input:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 .15rem color-mix(in srgb,var(--accent) 18%,transparent)
    }

.search-select-options {
    display: grid;
    gap: .15rem;
    max-height: 14rem;
    overflow: auto
}

.search-select-option {
    background: transparent;
    border: 0;
    border-radius: var(--radius,4px);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    padding: .55rem .6rem;
    text-align: left
}

    .search-select-option:hover {
        background: var(--tblr-menu-hover);
        color: var(--accent)
    }

    .search-select-option.active {
        background: var(--tblr-menu-active);
        color: var(--accent);
        font-weight: 600
    }

.search-select-empty {
    color: var(--muted);
    font-size: .8125rem;
    padding: .65rem
}

input[type="date"] {
    box-sizing: border-box;
    min-width: 11.5rem;
    width: 100%
}

.filter-bar input[type="date"], .timeline-filter-field input[type="date"], .generic-toolbar input[type="date"] {
    min-width: 13.5rem
}

.filter-bar div, .timeline-filter-field {
    min-width: 13.5rem
}

.topbar {
    align-items: center;
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    display: flex;
    gap: .5rem;
    min-height: 3.75rem;
    padding: 0 1.25rem !important
}

.topbar-search {
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius,4px);
    color: var(--muted);
    display: flex;
    gap: .45rem;
    min-width: 18rem;
    padding: 0 .65rem
}

    .topbar-search input {
        background: transparent;
        border: 0;
        color: var(--text);
        font: inherit;
        height: 2.15rem;
        outline: 0;
        width: 100%
    }

        .topbar-search input::placeholder {
            color: var(--muted)
        }

.topbar-icon-button, .topbar-action, .topbar-user, .topbar-logout, .topbar-theme-button {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius,4px);
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: .45rem;
    min-height: 2.2rem;
    padding: .45rem .65rem;
    text-decoration: none
}

.topbar-context {
    align-items: center;
    display: flex;
    gap: .5rem
}

    .topbar-context .search-select {
        min-width: 11rem
    }

.topbar-context-pill {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius,4px);
    color: var(--text);
    display: inline-flex;
    font-size: .85rem;
    font-weight: 600;
    min-height: 2.2rem;
    padding: .45rem .75rem;
    white-space: nowrap
}

.topbar-tenant-select .search-select {
    min-width: 17rem
}

.topbar-user-select .search-select {
    min-width: 19rem
}

.topbar-year-select .search-select {
    min-width: 11rem
}

.topbar-context .search-select label {
    display: none
}

.topbar-context .search-select-toggle {
    background: var(--surface);
    min-height: 2.2rem;
    padding: .45rem .65rem
}

.topbar-icon-button {
    justify-content: center;
    padding: .45rem;
    width: 2.2rem
}

    .topbar-action:hover, .topbar-user:hover, .topbar-icon-button:hover, .topbar-theme-button:hover, .topbar-language-button:hover {
        background: var(--tblr-menu-hover);
        border-color: var(--border);
        color: var(--text)
    }

.topbar-theme-button {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
    font-weight: 600;
    padding: .35rem .65rem .35rem .45rem
}

    .topbar-theme-button.icon-only {
        height: 2.2rem;
        justify-content: center;
        padding: .3rem;
        width: 2.2rem
    }

.topbar-theme-icon {
    align-items: center;
    background: color-mix(in srgb,var(--accent) 14%,var(--surface));
    border: 1px solid color-mix(in srgb,var(--accent) 34%,var(--border));
    border-radius: var(--radius,4px);
    color: var(--accent);
    display: inline-flex;
    font-size: .8rem;
    height: 1.55rem;
    justify-content: center;
    line-height: 1;
    width: 1.55rem
}

.topbar-theme-text {
    font-size: .875rem;
    line-height: 1;
    white-space: nowrap
}

.topbar-theme-button:hover .topbar-theme-icon {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff
}

.topbar-language-menu {
    position: relative
}

.topbar-language-button {
    align-items: center;
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius,4px);
    cursor: pointer;
    display: inline-flex;
    height: 2.2rem;
    justify-content: center;
    padding: .35rem;
    width: 2.2rem
}

    .topbar-language-button img, .topbar-language-option img {
        border-radius: .18rem;
        box-shadow: 0 0 0 1px color-mix(in srgb,var(--border) 80%,transparent);
        height: 1rem;
        object-fit: cover;
        width: 1.45rem
    }

.topbar-language-dropdown {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius,4px) + .25rem);
    box-shadow: 0 1rem 2.5rem rgba(15,23,42,.14);
    display: grid;
    max-height: 22rem;
    min-width: 14rem;
    overflow: auto;
    padding: .35rem;
    position: absolute;
    right: 0;
    top: calc(100% + .65rem);
    z-index: 90
}

.topbar-language-option {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius,4px);
    color: var(--text);
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: .84rem;
    gap: .55rem;
    min-height: 2rem;
    padding: .35rem .5rem;
    text-align: left
}

    .topbar-language-option:hover, .topbar-language-option.active {
        background: color-mix(in srgb,var(--accent) 8%,var(--surface));
        border-color: color-mix(in srgb,var(--accent) 18%,var(--border));
        color: var(--accent)
    }

[dir="rtl"] .topbar-language-dropdown {
    left: 0;
    right: auto
}

[dir="rtl"] .topbar-language-option {
    text-align: right
}

.topbar-icon-button svg {
    display: block;
    fill: currentColor;
    height: 1.15rem;
    width: 1.15rem
}

.topbar-logout.icon-only {
    height: 2.2rem;
    justify-content: center;
    padding: .35rem;
    width: 2.2rem
}

.topbar-logout svg {
    display: block;
    fill: currentColor;
    height: 1.15rem;
    width: 1.15rem
}

.topbar-notifications {
    position: relative
}

.topbar-notification-button, .topbar-dark-button {
    background: var(--surface) !important;
    border-color: transparent !important;
    color: var(--muted) !important;
    position: relative
}

    .topbar-notification-button:hover, .topbar-dark-button:hover, .topbar-dark-button.active {
        background: var(--tblr-menu-hover) !important;
        border-color: var(--border) !important;
        color: var(--accent) !important
    }

.topbar-notification-badge {
    align-items: center;
    background: #d63939;
    border: 2px solid var(--surface);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: .62rem;
    font-weight: 700;
    height: 1rem;
    justify-content: center;
    line-height: 1;
    min-width: 1rem;
    padding: 0 .22rem;
    position: absolute;
    right: .08rem;
    top: .08rem
}

.topbar-notification-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius,4px) + .25rem);
    box-shadow: 0 1rem 2.5rem rgba(15,23,42,.14);
    min-width: 22rem;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: calc(100% + .65rem);
    z-index: 80
}

.topbar-notification-head {
    align-items: center;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    padding: .85rem 1rem
}

    .topbar-notification-head strong {
        font-size: .9rem;
        font-weight: 600
    }

.topbar-notification-head-actions {
    align-items: center;
    display: flex;
    gap: .4rem
}

.topbar-notification-head a, .topbar-notification-head button {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius,4px);
    color: var(--accent);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    gap: .35rem;
    min-height: 1.9rem;
    padding: .25rem .45rem;
    text-decoration: none
}

    .topbar-notification-head a:hover, .topbar-notification-head button:hover:not(:disabled) {
        background: color-mix(in srgb,var(--accent) 8%,var(--surface));
        border-color: color-mix(in srgb,var(--accent) 18%,var(--border))
    }

    .topbar-notification-head button:disabled {
        color: var(--muted);
        cursor: not-allowed;
        opacity: .65
    }

.topbar-notification-head .btn-spinner {
    height: .75rem;
    margin: 0;
    width: .75rem
}

.topbar-notification-list {
    display: grid;
    max-height: 22rem;
    overflow: auto
}

.topbar-notification-item {
    align-items: flex-start;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    display: grid;
    gap: .65rem;
    grid-template-columns: auto minmax(0,1fr) auto;
    padding: .85rem 1rem;
    text-decoration: none
}

    .topbar-notification-item:last-child {
        border-bottom: 0
    }

    .topbar-notification-item:hover {
        background: color-mix(in srgb,var(--accent) 6%,var(--surface))
    }

    .topbar-notification-item strong {
        display: block;
        font-size: .84rem;
        font-weight: 600;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .topbar-notification-item small {
        color: var(--muted);
        display: block;
        font-size: .76rem;
        line-height: 1.35;
        margin-top: .15rem;
        max-width: 14rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .topbar-notification-item time {
        color: var(--muted);
        font-size: .72rem;
        white-space: nowrap
    }

.topbar-notification-dot {
    background: var(--muted);
    border-radius: 999px;
    height: .48rem;
    margin-top: .35rem;
    width: .48rem
}

.topbar-notification-item.unread .topbar-notification-dot {
    background: var(--accent);
    box-shadow: 0 0 0 .18rem color-mix(in srgb,var(--accent) 14%,transparent)
}

.topbar-notification-item.read {
    opacity: .75
}

.topbar-notification-empty {
    color: var(--muted);
    display: grid;
    font-size: .84rem;
    gap: .2rem;
    padding: 1.25rem;
    text-align: center
}

    .topbar-notification-empty span {
        color: var(--text);
        font-weight: 600
    }

[dir="rtl"] .topbar-notification-menu {
    left: 0;
    right: auto
}

[dir="rtl"] .topbar-notification-badge {
    left: .08rem;
    right: auto
}

[data-theme="dark"] .topbar-notification-menu {
    box-shadow: 0 1rem 2.5rem rgba(0,0,0,.35)
}

[data-theme="dark"] .topbar-notification-badge {
    border-color: var(--surface)
}

.topbar-user {
    color: var(--text);
    font-weight: 500;
    padding: .25rem .55rem
}

.topbar-user-text {
    display: grid;
    gap: .05rem;
    line-height: 1.15;
    text-align: left
}

    .topbar-user-text strong {
        color: var(--text);
        font-size: .82rem;
        font-weight: 600;
        max-width: 9rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .topbar-user-text small {
        color: var(--muted);
        font-size: .68rem;
        font-weight: 500;
        max-width: 9rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

[dir="rtl"] .topbar-user-text {
    text-align: right
}

.avatar {
    background: #eef5ff !important;
    color: #206bc4 !important
}

.topbar-logout {
    color: #d63939
}

    .topbar-logout:hover {
        background: #fff0f0;
        border-color: #ffc9c9;
        color: #b42318
    }

[data-theme="dark"] .topbar-logout:hover {
    background: rgba(214,57,57,.12);
    border-color: rgba(214,57,57,.28);
    color: #ff8787
}

@media(max-width:1100px) {
    .topbar-context {
        display: none
    }
}

@media(max-width:900px) {
    .topbar-search, .topbar-language-select {
        display: none
    }

    .topbar-action span:last-child, .topbar-user span:last-child, .topbar-logout span:last-child {
        display: none
    }
}

.page-header {
    margin-bottom: 1rem !important
}

.page-header-with-alert {
    align-items: flex-start;
    display: grid !important;
    gap: 0 1rem;
    grid-template-columns: minmax(0,1fr) auto
}

.page-header-with-alert > .page-header-alert {
    grid-column: 1 / -1;
    margin: .25rem 0 .85rem !important;
    width: 100%
}

.page-header-with-alert > .page-actions {
    justify-self: end
}

@media(max-width:760px) {
    .page-header-with-alert {
        grid-template-columns: 1fr
    }

    .page-header-with-alert > .page-actions {
        justify-self: stretch
    }
}

.page-alert {
    align-items: center;
    background: #fff4e6;
    border: 1px solid #ffd8a8;
    border-radius: var(--radius,4px);
    color: #ad5f00;
    display: flex;
    font-size: .875rem;
    margin: .25rem 0 1rem !important;
    min-height: 2.75rem;
    padding: .75rem 1rem
}

    .page-alert + .surface, .page-alert + .generic-page {
        margin-top: 0 !important
    }

.alert-action-link {
    color: inherit;
    font-weight: 700;
    margin-left: auto;
    text-decoration: underline;
    text-underline-offset: .18rem;
    white-space: nowrap
}

[data-theme="dark"] .page-alert {
    background: rgba(245,159,0,.12);
    border-color: rgba(245,159,0,.28);
    color: #ffd43b
}

.toast-host {
    bottom: 1.25rem;
    display: grid;
    gap: .65rem;
    left: 50%;
    max-width: min(34rem,calc(100vw - 2rem));
    pointer-events: none;
    position: fixed;
    transform: translateX(-50%);
    width: max-content;
    z-index: 9999
}

.app-toast {
    align-items: center;
    animation: toast-in .18s ease-out;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius,4px);
    box-shadow: 0 .75rem 2.5rem rgba(24,36,51,.18);
    color: var(--text);
    display: flex;
    font-size: .875rem;
    gap: .65rem;
    min-height: 2.75rem;
    min-width: 18rem;
    padding: .7rem .8rem;
    pointer-events: auto
}

    .app-toast .toast-dot {
        background: var(--accent);
        border-radius: 999px;
        display: inline-block;
        height: .55rem;
        width: .55rem
    }

    .app-toast button {
        background: transparent;
        border: 0;
        color: var(--muted);
        cursor: pointer;
        font-size: 1.15rem;
        line-height: 1;
        margin-left: auto;
        padding: .1rem .25rem
    }

    .app-toast.success {
        border-left-color: #2fb344
    }

        .app-toast.success .toast-dot {
            background: #2fb344
        }

    .app-toast.warning {
        border-left-color: var(--accent)
    }

        .app-toast.warning .toast-dot {
            background: var(--accent)
        }

    .app-toast.error {
        border-left-color: #d63939
    }

        .app-toast.error .toast-dot {
            background: #d63939
        }

[data-theme="dark"] .app-toast {
    box-shadow: 0 .75rem 2.5rem rgba(0,0,0,.35)
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(.6rem)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media(max-width:600px) {
    .toast-host {
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        transform: none;
        width: auto
    }

    .app-toast {
        min-width: 0;
        width: 100%
    }
}

.notifications-page {
    overflow: hidden
}

.notifications-toolbar {
    align-items: center;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem 1.2rem
}

.notification-list {
    display: grid
}

.notification-item {
    align-items: flex-start;
    border-top: 1px solid var(--border);
    display: grid;
    gap: 1rem;
    grid-template-columns: auto 1fr auto;
    padding: 1rem 1.2rem
}

    .notification-item:first-child {
        border-top: 0
    }

.notification-dot {
    background: var(--muted);
    border-radius: 999px;
    height: .55rem;
    margin-top: .45rem;
    width: .55rem
}

.notification-item.unread .notification-dot {
    background: var(--accent)
}

.notification-title-row {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between
}

    .notification-title-row h2 {
        font-size: .9375rem;
        font-weight: 600;
        line-height: 1.35;
        margin: 0
    }

    .notification-title-row time {
        color: var(--muted);
        font-size: .75rem;
        white-space: nowrap
    }

.notification-content p {
    color: var(--muted);
    font-size: .875rem;
    margin: .25rem 0 .6rem
}

.notification-meta {
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .75rem;
    gap: .5rem
}

    .notification-meta span {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: .2rem .5rem
    }

.notification-actions {
    align-items: center;
    display: flex;
    gap: .5rem
}

.notification-item.read {
    opacity: .78
}

.notifications-table td {
    vertical-align: middle
}

.notification-status {
    align-items: center;
    display: inline-flex;
    font-size: .8125rem;
    font-weight: 600;
    gap: .45rem;
    white-space: nowrap
}

    .notification-status .notification-dot {
        display: inline-block;
        margin: 0
    }

.notification-read-row {
    opacity: .82
}

.notification-unread-row {
    background: color-mix(in srgb,var(--accent) 5%,var(--surface))
}

.notification-message-cell {
    color: var(--muted);
    max-width: 28rem;
    white-space: normal !important
}

.notification-meta-pill {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    display: inline-flex;
    font-size: .75rem;
    margin: .1rem .25rem .1rem 0;
    padding: .2rem .5rem
}

.notification-detail-page {
    overflow: hidden
}

.notification-detail-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0,1fr) minmax(18rem,.35fr)
}

.notification-detail-main {
    background: color-mix(in srgb,var(--accent) 5%,var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius,4px);
    padding: 1.25rem
}

    .notification-detail-main h2 {
        font-size: 1.35rem;
        margin: .75rem 0 .6rem
    }

    .notification-detail-main p {
        color: var(--text);
        line-height: 1.65;
        margin: 0;
        white-space: pre-wrap
    }

.notification-detail-meta {
    border: 1px solid var(--border);
    border-radius: var(--radius,4px);
    margin: 0;
    overflow: hidden
}

    .notification-detail-meta div {
        display: grid;
        gap: .35rem;
        padding: .85rem 1rem
    }

        .notification-detail-meta div + div {
            border-top: 1px solid var(--border)
        }

    .notification-detail-meta dt {
        color: var(--muted);
        font-size: .75rem;
        font-weight: 600;
        margin: 0
    }

    .notification-detail-meta dd {
        font-weight: 500;
        margin: 0;
        overflow-wrap: anywhere
    }

@media(max-width:900px) {
    .notification-detail-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:800px) {
    .notifications-toolbar {
        align-items: stretch;
        display: grid
    }

    .notification-item {
        grid-template-columns: auto 1fr
    }

    .notification-actions {
        grid-column: 2;
        justify-content: flex-start
    }

    .notification-title-row {
        display: block
    }

        .notification-title-row time {
            display: block;
            margin-top: .25rem
        }
}

.timeline-page {
    overflow: hidden
}

.timeline-toolbar {
    align-items: stretch !important;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: .85rem 1rem;
    justify-content: flex-start !important;
    padding: 1rem 1.2rem
}

    .timeline-toolbar > .timeline-search-row {
        flex: 1 1 auto !important;
        max-width: none !important;
        width: 100% !important
    }

.timeline-filter-row {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: .85rem 1rem;
    width: 100%
}

    .timeline-filter-row > .filter-with-clear {
        flex: 1.35 1 22rem;
        max-width: 34rem;
        min-width: 22rem
    }

    .timeline-filter-row > .search-select {
        flex: 1 1 calc(25% - 1rem);
        max-width: calc(25% - .75rem);
        min-width: 15rem
    }

    .timeline-filter-row > .timeline-filter-field {
        flex: 1 1 calc(25% - 1rem);
        max-width: calc(25% - .75rem);
        min-width: 13.5rem
    }

.generic-toolbar > .timetable-large-select {
    flex: 1 1 22rem;
    max-width: 28rem;
    min-width: 22rem
}

.list-toolbar > .timetable-large-select {
    flex: 1 1 22rem;
    max-width: 30rem;
    min-width: 22rem
}

.timetable-large-select .search-select {
    min-width: 100%;
    width: 100%
}

.generic-toolbar > .view-toggle {
    align-self: center;
    flex: 0 0 auto;
    height: 2.4rem
}

    .generic-toolbar > .view-toggle .view-toggle-button {
        font-size: 1rem;
        height: 2.4rem;
        min-width: 2.65rem;
        width: 2.65rem
    }

        .generic-toolbar > .view-toggle .view-toggle-button .action-icon {
            align-items: center;
            display: inline-flex;
            font-size: 1rem;
            height: 1rem;
            justify-content: center;
            line-height: 1;
            width: 1rem
        }

.status-options-toolbar {
    align-items: stretch !important;
    flex-direction: column
}

    .status-options-toolbar > .search-box {
        flex: 1 1 auto !important;
        max-width: none !important;
        width: 100% !important
    }

.status-options-filter-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%
}

    .status-options-filter-row > .timetable-large-select {
        flex: 1 1 16rem;
        max-width: 24rem;
        min-width: 16rem
    }

    .status-options-filter-row > .grid-export, .status-options-filter-row > .row-action {
        flex: 0 0 auto
    }

.report-card-workflow {
    align-items: stretch;
    background: color-mix(in srgb,var(--accent) 8%,var(--surface));
    border: 1px solid color-mix(in srgb,var(--accent) 28%,var(--border));
    border-radius: var(--radius-lg);
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(16rem,.8fr) minmax(0,1.2fr);
    margin: 1rem 1.2rem 1.2rem;
    padding: 1rem;
    box-shadow: var(--shadow-sm)
}

.report-card-workflow-copy span {
    color: var(--accent);
    display: block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase
}

.report-card-workflow-copy strong {
    color: var(--text);
    display: block;
    font-size: 1rem;
    margin-top: .2rem
}

.report-card-workflow-copy p {
    color: var(--muted);
    font-size: .84rem;
    margin: .3rem 0 0
}

.report-card-workflow-controls {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end
}

.report-card-control {
    display: grid;
    flex: 1 1 13rem;
    gap: .3rem;
    min-width: 13rem
}

.report-card-control small {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700
}

.report-card-control .search-select {
    min-width: 100%;
    width: 100%
}

.data-quality-metrics {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4,minmax(0,1fr));
    margin-bottom: 1rem
}

.dq-metric {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1rem
}

.dq-metric span {
    color: var(--muted);
    display: block;
    font-size: .78rem;
    font-weight: 700
}

.dq-metric strong {
    color: var(--text);
    display: block;
    font-size: 1.7rem;
    margin-top: .35rem
}

.dq-metric.critical strong {
    color: var(--danger)
}

.dq-metric.warning strong {
    color: var(--warning)
}

.dq-metric.info strong {
    color: var(--info)
}

.data-quality-table td {
    vertical-align: top
}

.data-quality-table td:nth-child(3),
.data-quality-table td:nth-child(5) {
    max-width: 20rem
}

@media (max-width: 900px) {
    .report-card-workflow {
        grid-template-columns: 1fr
    }

    .data-quality-metrics {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .report-card-workflow-controls {
        justify-content: stretch
    }

    .report-card-workflow-controls > .btn {
        justify-content: center
    }
}

@media (max-width: 620px) {
    .data-quality-metrics {
        grid-template-columns: 1fr
    }
}

.tenant-list-filter {
    flex: 0 1 18rem;
    min-width: 16rem
}

    .tenant-list-filter .search-select {
        min-width: 100%;
        width: 100%
    }

.tenant-list-filter, .timetable-large-select, .permissions-filter-field, .record-field, .filter-with-clear {
    position: relative
}

.tenant-list-filter {
    flex: 1 1 18rem;
    max-width: 24rem;
    min-width: 18rem
}

.tenant-list-filter .search-select {
    min-width: 100%;
    width: 100%
}

    .tenant-list-filter > .row-action.icon-only, .timetable-large-select > .row-action.icon-only, .permissions-filter-field > .row-action.icon-only, .record-field > .row-action.icon-only, .filter-with-clear > .row-action.icon-only {
        inset-inline-end: .45rem;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3
    }

    .record-field > label + .search-select + .row-action.icon-only {
        top: calc(50% + .7rem)
    }

.timeline-filter-row > .btn, .timeline-filter-row > .view-toggle, .timeline-filter-row > .grid-export {
    flex: 0 0 auto
}

.timeline-filter-field {
    display: grid;
    gap: .35rem;
    min-width: 13.5rem
}

    .timeline-filter-field label {
        color: var(--muted);
        font-size: .75rem;
        font-weight: 600
    }

    .timeline-filter-field input {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius,4px);
        color: var(--text);
        font: inherit;
        min-height: 2.35rem;
        padding: .55rem .7rem;
        width: 100%
    }

.timeline-toolbar .result-count {
    color: var(--muted);
    font-size: .8rem;
    white-space: nowrap
}

.timeline-grid-table td {
    vertical-align: top
}

.timetable-calendar {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(7,minmax(13rem,1fr));
    overflow-x: auto;
    padding: .2rem
}

    .timetable-calendar > .generic-grid-state {
        grid-column: 1/-1;
        min-height: 18rem;
        width: 100%
    }

.generic-card-grid > .generic-grid-state, .school-grid > .generic-grid-state {
    grid-column: 1/-1;
    min-height: 18rem;
    width: 100%
}

.generic-empty,
.generic-grid-state,
.grid-inline-state {
    align-items: center;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: .45rem;
    justify-content: center;
    min-height: 12rem;
    padding: 1.5rem;
    text-align: center
}

.generic-empty strong,
.generic-grid-state strong,
.grid-inline-state strong,
.list-state strong {
    color: var(--text)
}

.generic-empty-icon.meaningful-empty-icon,
.meaningful-empty-icon {
    align-items: center;
    background: color-mix(in srgb,var(--accent) 10%,transparent);
    border: 1px solid color-mix(in srgb,var(--accent) 24%,var(--border));
    border-radius: 999px;
    color: var(--accent);
    display: inline-flex;
    height: 4rem;
    justify-content: center;
    margin-bottom: .45rem;
    width: 4rem
}

.meaningful-empty-icon svg {
    fill: none;
    height: 2.1rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    width: 2.1rem
}

.timetable-day {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius,4px);
    box-shadow: none;
    min-width: 13rem;
    overflow: hidden
}

.timetable-day-head {
    align-items: center;
    background: color-mix(in srgb,var(--accent) 7%,var(--surface));
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    padding: .8rem .9rem
}

    .timetable-day-head strong {
        color: var(--text);
        font-size: .86rem;
        font-weight: 700
    }

    .timetable-day-head span {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 999px;
        color: var(--muted);
        font-size: .72rem;
        font-weight: 700;
        min-width: 1.55rem;
        padding: .12rem .45rem;
        text-align: center
    }

.timetable-day-body {
    display: grid;
    gap: .7rem;
    min-height: 19rem;
    padding: .8rem
}

.timetable-empty {
    align-items: center;
    border: 1px dashed var(--border);
    border-radius: var(--radius,4px);
    color: var(--muted);
    display: flex;
    font-size: .78rem;
    justify-content: center;
    min-height: 5rem;
    text-align: center
}

.timetable-slot {
    background: color-mix(in srgb,var(--accent) 4%,var(--surface));
    border: 1px solid color-mix(in srgb,var(--accent) 18%,var(--border));
    border-left: 3px solid var(--accent);
    border-radius: var(--radius,4px);
    display: grid;
    gap: .55rem;
    padding: .75rem
}

.timetable-slot-time {
    color: var(--accent);
    font-size: .78rem;
    font-weight: 800
}

.timetable-slot-main {
    display: grid;
    gap: .2rem
}

    .timetable-slot-main strong {
        color: var(--text);
        font-size: .9rem;
        font-weight: 700
    }

    .timetable-slot-main span, .timetable-slot-meta > span {
        color: var(--muted);
        font-size: .78rem
    }

.timetable-slot-meta {
    align-items: center;
    border-top: 1px solid var(--border);
    display: flex;
    gap: .6rem;
    justify-content: space-between;
    padding-top: .55rem
}

    .timetable-slot-meta .row-actions {
        gap: .25rem
    }

@media(max-width:1200px) {
    .timetable-calendar {
        grid-template-columns: repeat(4,minmax(13rem,1fr))
    }
}

@media(max-width:760px) {
    .timetable-calendar {
        grid-template-columns: 1fr
    }

    .timetable-day {
        min-width: 0
    }
}

.timeline-list {
    display: grid;
    padding: 1.2rem
}

.timeline-item {
    display: grid;
    gap: 1rem;
    grid-template-columns: 2.25rem 1fr;
    position: relative
}

    .timeline-item:not(:last-child) {
        padding-bottom: 1rem
    }

        .timeline-item:not(:last-child)::before {
            background: var(--border);
            bottom: 0;
            content: "";
            left: 1.1rem;
            position: absolute;
            top: 2.4rem;
            width: 1px
        }

.timeline-marker {
    align-items: center;
    background: var(--tblr-menu-active);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--accent);
    display: flex;
    font-size: .75rem;
    font-weight: 700;
    height: 2.25rem;
    justify-content: center;
    position: relative;
    width: 2.25rem;
    z-index: 1
}

.timeline-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius,4px);
    padding: 1rem
}

.timeline-card-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between
}

.timeline-card h2 {
    font-size: .9375rem;
    font-weight: 600;
    margin: 0
}

.timeline-card p {
    color: var(--muted);
    font-size: .875rem;
    margin: .25rem 0 0
}

.timeline-card time {
    color: var(--muted);
    font-size: .75rem;
    white-space: nowrap
}

.timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .75rem
}

    .timeline-meta span {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 999px;
        color: var(--muted);
        font-size: .75rem;
        padding: .2rem .5rem
    }

.timeline-item.color-success .timeline-marker {
    background: #e7f7ed;
    color: #218739
}

.timeline-item.color-danger .timeline-marker {
    background: #fff0f0;
    color: #d63939
}

.timeline-item.color-primary .timeline-marker {
    background: #eef5ff;
    color: #206bc4
}

@media(max-width:700px) {
    .timeline-toolbar {
        display: grid
    }

    .timeline-card-head {
        display: block
    }

    .timeline-card time {
        display: block;
        margin-top: .35rem
    }
}

.technical-logs-page {
    overflow: hidden
}

.technical-logs-table td {
    vertical-align: middle
}

.technical-logs-table .technical-log-message-cell {
    min-width: 22rem;
    width: 55%
}

.technical-log-message {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius,4px);
    box-sizing: border-box;
    color: var(--text);
    display: block;
    font-family: Consolas,"SFMono-Regular",Menlo,monospace;
    font-size: .8125rem;
    line-height: 1.55;
    max-height: 8rem;
    max-width: 100%;
    min-height: 2.75rem;
    overflow: auto;
    padding: .65rem .8rem;
    resize: vertical;
    white-space: pre-wrap !important;
    word-break: break-word;
    width: 100%
}

.technical-log-details, .technical-log-details .audit-detail-grid, .technical-log-details .wide {
    max-width: 100%;
    min-width: 0;
    overflow: hidden
}

[data-theme="dark"] .technical-log-message {
    background: #17212f;
    border-color: #253143;
    color: #dce3eb
}

.technical-log-level {
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    display: inline-flex;
    font-size: .6875rem;
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    min-width: 2.6rem;
    padding: .35rem .5rem;
    text-align: center
}

    .technical-log-level.level-err {
        background: #fff0f0;
        border-color: #ffc9c9;
        color: #d63939
    }

    .technical-log-level.level-wrn {
        background: #fff4e6;
        border-color: #ffd8a8;
        color: #ad5f00
    }

    .technical-log-level.level-inf {
        background: #eef5ff;
        border-color: #bfd7ff;
        color: #206bc4
    }

    .technical-log-level.level-dbg {
        background: #f3f0ff;
        border-color: #d0bfff;
        color: #7048e8
    }

[data-theme="dark"] .technical-log-level.level-err {
    background: rgba(214,57,57,.14);
    border-color: rgba(214,57,57,.4);
    color: #ff8787
}

[data-theme="dark"] .technical-log-level.level-wrn {
    background: rgba(245,159,0,.14);
    border-color: rgba(245,159,0,.4);
    color: #ffd43b
}

[data-theme="dark"] .technical-log-level.level-inf {
    background: rgba(32,107,196,.16);
    border-color: rgba(32,107,196,.45);
    color: #74c0fc
}

[data-theme="dark"] .technical-log-level.level-dbg {
    background: rgba(112,72,232,.16);
    border-color: rgba(112,72,232,.45);
    color: #b197fc
}

.database-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 1rem
}

.database-panel {
    overflow: visible;
    padding: 1.2rem
}

.database-form {
    align-items: end;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr auto
}

    .database-form div {
        display: grid;
        gap: .35rem
    }

    .database-form label {
        color: var(--muted);
        font-size: .75rem;
        font-weight: 600
    }

    .database-form input {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius,4px);
        color: var(--text);
        font: inherit;
        padding: .65rem;
        width: 100%
    }

.database-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem
}

.database-actions-spaced {
    margin-top: 1rem
}

.btn-danger {
    background: #d63939 !important;
    border-color: #d63939 !important;
    color: #fff !important
}

    .btn-danger:hover {
        background: #b42318 !important;
        border-color: #b42318 !important
    }

.database-confirm {
    background: #fff4e6;
    border: 1px solid #ffd8a8;
    border-radius: var(--radius,4px);
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1rem;
    padding: 1rem
}

    .database-confirm p {
        color: #ad5f00;
        flex-basis: 100%;
        font-size: .875rem;
        margin: 0
    }

.database-result {
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1rem;
    padding-top: 1rem
}

    .database-result span {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 999px;
        color: var(--muted);
        font-size: .8125rem;
        padding: .25rem .6rem
    }

.database-history {
    overflow: hidden
}

.database-upload {
    margin-bottom: 1rem;
    padding: 1.2rem
}

.database-upload-zone {
    align-items: end;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr auto
}

    .database-upload-zone div {
        display: grid;
        gap: .35rem
    }

    .database-upload-zone label {
        color: var(--muted);
        font-size: .75rem;
        font-weight: 600
    }

    .database-upload-zone input[type=file] {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius,4px);
        color: var(--text);
        font: inherit;
        padding: .65rem;
        width: 100%
    }

    .database-upload-zone small {
        color: var(--muted);
        font-size: .8125rem
    }

.db-alert.success {
    background: #e7f7ed;
    border-color: #b7ebc6;
    color: #218739
}

.db-alert.error {
    background: #fff0f0;
    border-color: #ffc9c9;
    color: #b42318
}

.db-alert.warning {
    background: #fff4e6;
    border-color: #ffd8a8;
    color: #ad5f00
}

.db-alert.info {
    background: #eef6ff;
    border-color: #bfdcff;
    color: #1c5d99
}

[data-theme="dark"] .db-alert.info {
    background: rgba(32,107,196,.16);
    border-color: rgba(32,107,196,.34);
    color: #74c0fc
}

[data-theme="dark"] .audit-detail-panel pre {
    background: rgba(255,255,255,.04)
}

.audit-detail-panel {
    margin-top: 1rem;
    overflow: hidden;
    padding: 1.1rem
}

.audit-detail-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4,minmax(0,1fr));
    margin-top: 1rem
}

    .audit-detail-grid div {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: var(--radius,4px);
        display: grid;
        gap: .25rem;
        padding: .75rem
    }

        .audit-detail-grid div.wide {
            grid-column: 1/-1
        }

    .audit-detail-grid span {
        color: var(--muted);
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase
    }

    .audit-detail-grid strong {
        color: var(--text);
        font-size: .875rem;
        font-weight: 600;
        overflow-wrap: anywhere
    }

.audit-json-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
    margin-top: 1rem
}

    .audit-json-grid article {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: var(--radius,4px);
        overflow: hidden
    }

    .audit-json-grid h3 {
        border-bottom: 1px solid var(--border);
        font-size: .85rem;
        margin: 0;
        padding: .75rem 1rem
    }

    .audit-json-grid pre {
        font-family: Consolas,"SFMono-Regular",Menlo,monospace;
        font-size: .78rem;
        line-height: 1.45;
        margin: 0;
        max-height: 22rem;
        overflow: auto;
        padding: 1rem;
        white-space: pre-wrap;
        word-break: break-word
    }

@media(max-width:900px) {
    .audit-detail-grid, .audit-json-grid {
        grid-template-columns: 1fr
    }
}

[data-theme="dark"] .database-confirm {
    background: rgba(245,159,0,.12);
    border-color: rgba(245,159,0,.28)
}

@media(max-width:900px) {
    .database-grid, .database-form, .database-upload-zone {
        grid-template-columns: 1fr
    }
}

.permissions-page {
    overflow: hidden
}

.permissions-toolbar {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    justify-content: start !important;
}

.permissions-search-field {
    flex: 1 1 26rem !important;
    min-width: 22rem !important
}

.permissions-toolbar > .permissions-filter-field {
    flex: 1 1 20rem !important;
    max-width: 28rem !important;
    min-width: 18rem !important
}

.permissions-toolbar > .grid-export, .permissions-toolbar > .btn.icon-only {
    flex: 0 0 auto !important
}

.permissions-filter-field,
.permissions-toolbar .search-select {
    display: grid;
    gap: .35rem;
    min-width: 0 !important;
    width: 100%;
}

    .permissions-filter-field > label,
    .permissions-toolbar .search-select label {
        color: var(--muted);
        font-size: .75rem;
        font-weight: 600;
        line-height: 1.2;
        margin: 0;
    }

.permissions-toolbar .search-box {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: none;
    display: flex;
    gap: .45rem;
    height: 2.35rem;
    max-width: none;
    min-height: 2.35rem;
    padding: .45rem .7rem;
    width: 100%;
}

    .permissions-toolbar .search-box span {
        color: var(--muted);
        flex: 0 0 auto;
        font-size: 1rem;
        line-height: 1;
    }

    .permissions-toolbar .search-box input {
        background: transparent;
        border: 0;
        color: var(--text);
        font: inherit;
        min-width: 0;
        outline: 0;
        padding: 0;
        width: 100%;
    }

.permissions-toolbar .search-select-toggle {
    min-height: 2.35rem
}

@media(min-width:1200px) {
    .permissions-search-field {
        flex: 1.4 1 28rem !important
    }

    .permissions-toolbar > .permissions-filter-field {
        flex: 1 1 18rem !important
    }
}

@media(max-width:900px) {
    .permissions-search-field, .permissions-toolbar > .permissions-filter-field {
        flex: 1 1 100% !important;
        max-width: none !important;
        min-width: 0 !important
    }
}

.permissions-table td:not(:first-child), .permissions-table th:not(:first-child) {
    text-align: center
}

.permissions-table input[type="checkbox"] {
    accent-color: var(--accent);
    height: 1rem;
    width: 1rem
}

.roles-create {
    margin-bottom: 1rem;
    padding: 1.2rem
}

.roles-form {
    align-items: end;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 12rem auto
}

    .roles-form div {
        display: grid;
        gap: .35rem
    }

    .roles-form label {
        color: var(--muted);
        font-size: .75rem;
        font-weight: 600
    }

    .roles-form input, .table-input {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius,4px);
        color: var(--text);
        font: inherit;
        padding: .55rem .65rem;
        width: 100%
    }

.roles-page {
    overflow: hidden
}

.roles-table .row-actions {
    display: flex;
    gap: .5rem;
    justify-content: flex-end
}

.role-tenant-cell {
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    display: inline-flex;
    font-size: .8125rem;
    min-height: 1.8rem;
    padding: .25rem .65rem
}

.row-action {
    text-decoration: none !important
}

.row-actions {
    align-items: center;
    display: flex;
    gap: .45rem;
    justify-content: flex-end
}

.row-action.danger {
    color: #d63939
}

    .row-action.danger:hover {
        background: color-mix(in srgb,#d63939 10%,var(--surface));
        border-color: color-mix(in srgb,#d63939 30%,var(--border));
        color: #b42318
    }

.row-action.success {
    color: #2fb344
}

    .row-action.success:hover {
        background: color-mix(in srgb,#2fb344 10%,var(--surface));
        border-color: color-mix(in srgb,#2fb344 30%,var(--border));
        color: #218739
    }

.row-action:disabled {
    cursor: not-allowed;
    opacity: .65
}

.row-action.icon-only.danger .action-icon, .grid-icon-action.danger .action-icon {
    font-size: 0 !important
}

    .row-action.icon-only.danger .action-icon::before, .grid-icon-action.danger .action-icon::before {
        content: "\1f5d1";
        font-size: 1rem;
        line-height: 1
    }

.row-action.icon-only[data-testid^="admin-edit-tenants-"] .action-icon {
    font-size: 0 !important
}

    .row-action.icon-only[data-testid^="admin-edit-tenants-"] .action-icon::before {
        content: "\270e";
        font-size: 1rem;
        line-height: 1
    }

a.btn {
    text-decoration: none !important
}

@media(max-width:800px) {
    .roles-form {
        grid-template-columns: 1fr
    }

    .roles-table .row-actions {
        justify-content: flex-start
    }
}

.record-form-page {
    padding: 1.2rem
}

.tenant-required-alert {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between
}

.tenant-required-select {
    min-width: 16rem;
    width: min(100%,24rem)
}

    .tenant-required-select .search-select label {
        display: none
    }

.record-form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2,minmax(0,1fr));
    margin-top: 1rem
}

.form-context-note {
    align-items: flex-start;
    background: color-mix(in srgb,var(--accent) 7%,var(--surface));
    border: 1px solid color-mix(in srgb,var(--accent) 25%,var(--border));
    border-radius: var(--radius,4px);
    color: var(--muted);
    display: grid;
    gap: .2rem;
    margin-top: 1rem;
    padding: .85rem 1rem
}

    .form-context-note strong {
        color: var(--text);
        font-size: .875rem;
        font-weight: 650
    }

    .form-context-note span {
        font-size: .8125rem;
        line-height: 1.45
    }

.record-field {
    display: grid;
    gap: .35rem
}

    .record-field.wide {
        grid-column: 1/-1
    }

    .record-field.student-email-field {
        align-self: start;
        justify-self: stretch;
        width: 100%
    }

    .record-field.compact-contact-field {
        justify-self: start;
        max-width: 20rem;
        width: 100%
    }

    .record-field.compact-phone-field {
        justify-self: start;
        max-width: 14rem;
        width: 100%
    }

    .record-field.compact-teacher-phone-field {
        justify-self: start;
        max-width: 12rem;
        width: 100%
    }

    .record-field.compact-teacher-phone-field .form-control,
    .record-field.compact-teacher-phone-field input {
        max-width: 12rem;
    }

    .record-field.compact-teacher-image-field {
        justify-self: start;
        max-width: 20rem;
        width: 100%
    }

    .record-field label {
        color: var(--muted);
        font-size: .75rem;
        font-weight: 600
    }

.teacher-subject-field {
    background: color-mix(in srgb,var(--accent) 4%,var(--surface));
    border: 1px solid color-mix(in srgb,var(--accent) 18%,var(--border));
    border-radius: var(--radius,4px);
    padding: 1rem
}

.teacher-subject-section-heading {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: .35rem
}

    .teacher-subject-section-heading strong {
        color: var(--text);
        display: block;
        font-size: .95rem;
        font-weight: 650
    }

    .teacher-subject-section-heading p {
        color: var(--muted);
        font-size: .8125rem;
        line-height: 1.45;
        margin: .25rem 0 0;
        max-width: 42rem
    }

    .teacher-subject-section-heading span {
        background: color-mix(in srgb,var(--accent) 10%,var(--surface));
        border: 1px solid color-mix(in srgb,var(--accent) 24%,var(--border));
        border-radius: 999px;
        color: var(--accent);
        font-size: .75rem;
        font-weight: 700;
        white-space: nowrap;
        padding: .3rem .6rem
    }

.field-help {
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.4
}

.label-inline-help {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 500;
    margin-inline-start: .35rem
}

.session-bulk-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius,4px);
    margin-top: 1rem;
    overflow: hidden
}

.session-bulk-head {
    align-items: center;
    background: color-mix(in srgb,var(--accent) 5%,var(--surface));
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .85rem 1rem
}

    .session-bulk-head div:first-child {
        display: grid;
        gap: .15rem
    }

    .session-bulk-head strong {
        color: var(--text);
        font-size: .9rem
    }

    .session-bulk-head span {
        color: var(--muted);
        font-size: .78rem
    }

.session-student-picker {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(auto-fit,minmax(15rem,1fr));
    max-height: 20rem;
    overflow: auto;
    padding: 1rem
}

.session-student-choice {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius,4px);
    color: var(--text);
    cursor: pointer;
    display: flex;
    gap: .65rem;
    margin: 0;
    padding: .7rem .8rem
}

    .session-student-choice:hover {
        background: color-mix(in srgb,var(--accent) 7%,var(--surface));
        border-color: color-mix(in srgb,var(--accent) 30%,var(--border))
    }

    .session-student-choice input {
        accent-color: var(--accent);
        height: 1rem;
        width: 1rem
    }

.compact-state {
    min-height: 7rem !important
}

[data-theme="dark"] .session-bulk-panel, [data-theme="dark"] .session-student-choice {
    background: #17212f;
    border-color: #253143;
    color: #dce3eb
}

[data-theme="dark"] .session-bulk-head {
    background: color-mix(in srgb,var(--accent) 10%,#17212f);
    border-color: #253143
}

.record-field input, .record-field textarea {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius,4px);
    color: var(--text);
    font: inherit;
    min-height: 2.4rem;
    padding: .65rem .75rem;
    width: 100%
}

.student-image-preview {
    align-items: center;
    background: color-mix(in srgb,var(--accent) 5%,var(--surface));
    border: 1px dashed color-mix(in srgb,var(--accent) 25%,var(--border));
    border-radius: var(--radius,4px);
    display: flex;
    gap: .75rem;
    margin-top: .65rem;
    padding: .7rem
}

    .student-image-preview img, .student-image-preview span {
        align-items: center;
        background: color-mix(in srgb,var(--accent) 13%,var(--surface));
        border: 1px solid color-mix(in srgb,var(--accent) 30%,var(--border));
        border-radius: 999px;
        color: var(--accent);
        display: inline-flex;
        font-size: .78rem;
        font-weight: 800;
        height: 3rem;
        justify-content: center;
        object-fit: cover;
        width: 3rem
    }

    .student-image-preview small {
        color: var(--muted);
        font-size: .78rem
    }

.record-field textarea {
    min-height: 8rem;
    resize: vertical
}

    .record-field input:focus, .record-field textarea:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 .15rem color-mix(in srgb,var(--accent) 18%,transparent);
        outline: 0
    }

.multi-search-select {
    position: relative
}

.multi-search-toggle span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.multi-search-menu {
    left: 0;
    max-width: 100%;
    right: auto;
    width: min(100%,34rem)
}

.multi-select-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius,4px);
    display: grid;
    gap: .25rem;
    max-height: 13rem;
    overflow: auto;
    padding: .55rem
}

.multi-select-option {
    align-items: center;
    border-radius: var(--radius,4px);
    color: var(--text) !important;
    cursor: pointer;
    display: flex !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
    gap: .5rem;
    padding: .45rem .5rem
}

    .multi-select-option:hover {
        background: var(--tblr-menu-hover)
    }

    .multi-select-option input {
        min-height: auto;
        width: auto
    }

.record-field.has-error input, .record-field.has-error textarea, .record-field.has-error .search-select-toggle, .record-field.has-error .multi-select-list {
    border-color: #d63939 !important;
    box-shadow: 0 0 0 .15rem rgba(214,57,57,.12)
}

.required-marker {
    color: #d63939;
    margin-left: .2rem
}

.field-error {
    color: #d63939;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.35
}

[data-theme="dark"] .record-field.has-error input, [data-theme="dark"] .record-field.has-error textarea, [data-theme="dark"] .record-field.has-error .search-select-toggle, [data-theme="dark"] .record-field.has-error .multi-select-list {
    border-color: #ff6b6b !important;
    box-shadow: 0 0 0 .15rem rgba(255,107,107,.16)
}

[data-theme="dark"] .required-marker, [data-theme="dark"] .field-error {
    color: #ff8787
}

.record-form-actions {
    border-top: 1px solid var(--border);
    display: flex;
    gap: .65rem;
    justify-content: flex-end;
    margin-top: 1.2rem;
    padding-top: 1rem
}

.success-alert {
    background: #e7f7ed !important;
    border-color: #b7ebc6 !important;
    color: #218739 !important
}

@media(max-width:800px) {
    .record-form-grid {
        grid-template-columns: 1fr
    }

    .record-field.student-email-field, .record-field.compact-contact-field, .record-field.compact-phone-field, .record-field.compact-teacher-phone-field, .record-field.compact-teacher-image-field {
        max-width: none
    }

    .record-form-actions {
        justify-content: flex-start
    }

    .teacher-subject-section-heading {
        display: grid
    }

        .teacher-subject-section-heading span {
            justify-self: start
        }
}

.usage-chart-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1.35fr .65fr;
    margin-bottom: 1rem
}

.usage-chart-card {
    min-height: 17rem
}

    .usage-chart-card.wide {
        min-width: 0
    }

.chart-empty-state {
    align-items: center;
    background: linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,var(--surface)),var(--surface));
    border: 1px dashed color-mix(in srgb,var(--accent) 35%,var(--border));
    border-radius: var(--radius,4px);
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: .45rem;
    justify-content: center;
    min-height: 10rem;
    padding: 1.25rem;
    text-align: center
}

    .chart-empty-state.wide {
        min-height: 8rem
    }

.chart-empty-icon {
    align-items: center;
    background: color-mix(in srgb,var(--accent) 12%,var(--surface));
    border: 1px solid color-mix(in srgb,var(--accent) 28%,var(--border));
    border-radius: 999px;
    color: var(--accent);
    display: inline-flex;
    height: 3rem;
    justify-content: center;
    width: 3rem
}

    .chart-empty-icon svg {
        fill: currentColor;
        height: 1.45rem;
        width: 1.45rem
    }

.chart-empty-state strong {
    color: var(--text);
    font-size: .95rem
}

.chart-empty-state span {
    font-size: .82rem;
    max-width: 24rem
}

.chart-badge {
    background: #fff4d8;
    border: 1px solid #f1d99d;
    border-radius: 999px;
    color: #8a5a00;
    font-size: .75rem;
    font-weight: 700;
    padding: .3rem .6rem
}

.usage-bar-chart {
    display: grid;
    gap: .85rem
}

.usage-bar-row {
    display: grid;
    gap: .45rem
}

.usage-bar-label {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between
}

    .usage-bar-label strong {
        font-size: .86rem
    }

    .usage-bar-label span {
        color: var(--muted);
        font-size: .78rem
    }

.usage-bar-track {
    background: #eef1f5;
    border-radius: 999px;
    height: .7rem;
    overflow: hidden
}

    .usage-bar-track span {
        background: linear-gradient(90deg,#ffd43b,var(--accent));
        border-radius: inherit;
        display: block;
        height: 100%
    }

.usage-simple-card {
    margin-bottom: 1rem
}

.usage-simple-list {
    display: grid;
    gap: .75rem
}

.usage-simple-row {
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius,4px);
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(12rem,1fr) minmax(10rem,34%) auto;
    padding: .85rem;
    background: color-mix(in srgb,var(--surface) 96%,var(--accent))
}

.usage-simple-info {
    display: grid;
    gap: .18rem;
    min-width: 0
}

    .usage-simple-info strong {
        color: var(--text);
        font-size: .92rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .usage-simple-info span {
        color: var(--muted);
        font-size: .8rem
    }

.usage-simple-meter {
    background: color-mix(in srgb,var(--muted) 13%,transparent);
    border-radius: 999px;
    height: .55rem;
    overflow: hidden
}

    .usage-simple-meter span {
        background: linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 65%,#2fb344));
        border-radius: inherit;
        display: block;
        height: 100%
    }

.usage-simple-row > b {
    color: var(--text);
    font-size: .95rem;
    text-align: right
}

.usage-donut-wrap {
    display: flex;
    justify-content: center;
    padding: .8rem 0 1rem
}

.usage-donut {
    align-items: center;
    border-radius: 50%;
    display: flex;
    height: 10.5rem;
    justify-content: center;
    position: relative;
    width: 10.5rem
}

    .usage-donut:before {
        background: var(--surface);
        border-radius: 50%;
        content: "";
        height: 7rem;
        position: absolute;
        width: 7rem
    }

    .usage-donut span {
        font-size: 1.45rem;
        font-weight: 800;
        position: relative;
        text-align: center
    }

    .usage-donut small {
        color: var(--muted);
        display: block;
        font-size: .72rem;
        font-weight: 600
    }

.usage-legend {
    display: grid;
    gap: .55rem
}

    .usage-legend span {
        align-items: center;
        color: var(--muted);
        display: flex;
        font-size: .8rem;
        gap: .45rem
    }

    .usage-legend i {
        border-radius: 50%;
        display: inline-block;
        height: .55rem;
        width: .55rem
    }

    .usage-legend .c0 {
        background: var(--accent)
    }

    .usage-legend .c1 {
        background: #206bc4
    }

    .usage-legend .c2 {
        background: #2fb344
    }

    .usage-legend b {
        color: var(--text);
        margin-left: auto
    }

.usage-time-list {
    display: grid;
    gap: .8rem
}

    .usage-time-list div {
        display: grid;
        gap: .4rem;
        position: relative
    }

    .usage-time-list span {
        font-size: .85rem;
        font-weight: 650
    }

    .usage-time-list strong {
        color: var(--muted);
        font-size: .78rem;
        font-weight: 600;
        position: absolute;
        right: 0;
        top: 0
    }

    .usage-time-list em {
        background: linear-gradient(90deg,#206bc4,#74c0fc);
        border-radius: 999px;
        display: block;
        height: .52rem;
        min-width: .75rem
    }

.usage-heatmap {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(6,minmax(0,1fr))
}

    .usage-heatmap div {
        border: 1px solid var(--border);
        border-radius: .55rem;
        display: grid;
        gap: .15rem;
        min-height: 5.4rem;
        padding: .75rem
    }

    .usage-heatmap strong {
        font-size: 1.15rem
    }

    .usage-heatmap span {
        font-size: .78rem;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .usage-heatmap small {
        color: var(--muted);
        font-size: .7rem
    }

    .usage-heatmap .level-1 {
        background: #f8fafc
    }

    .usage-heatmap .level-2 {
        background: #fff8e8;
        border-color: #f1d99d
    }

    .usage-heatmap .level-3 {
        background: #fff4d8;
        border-color: #ffd43b
    }

    .usage-heatmap .level-4 {
        background: linear-gradient(135deg,#ffd43b,#f59f00);
        border-color: #f59f00;
        color: #182433
    }

[data-theme="dark"] .usage-bar-track {
    background: #1f2d3d
}

[data-theme="dark"] .usage-heatmap .level-1 {
    background: #17212f
}

[data-theme="dark"] .usage-heatmap .level-2 {
    background: rgba(245,159,0,.12)
}

[data-theme="dark"] .usage-heatmap .level-3 {
    background: rgba(245,159,0,.22)
}

[data-theme="dark"] .usage-donut:before {
    background: var(--surface)
}

@media(max-width:1050px) {
    .usage-chart-grid {
        grid-template-columns: 1fr
    }

    .usage-heatmap {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }
}

@media(max-width:640px) {
    .usage-heatmap {
        grid-template-columns: 1fr
    }

    .usage-bar-label {
        align-items: flex-start;
        display: grid;
        gap: .2rem
    }

    .usage-simple-row {
        grid-template-columns: 1fr
    }

        .usage-simple-row > b {
            text-align: left
        }
}

.dashboard-mini-bars {
    align-items: end;
    background: linear-gradient(180deg,#fffaf0,#fff);
    border: 1px solid #f1d99d;
    border-radius: .6rem;
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(6,1fr);
    height: 17rem;
    padding: 2.5rem 1rem 2.2rem
}

    .dashboard-mini-bars div {
        background: linear-gradient(180deg,color-mix(in srgb,var(--accent) 30%,var(--surface)),var(--accent));
        border-radius: .45rem .45rem 0 0;
        min-height: 3rem;
        position: relative
    }

    .dashboard-mini-bars b {
        background: #182433;
        border-radius: 999px;
        color: #fff;
        font-size: .7rem;
        font-weight: 700;
        left: 50%;
        padding: .18rem .42rem;
        position: absolute;
        top: -1.65rem;
        transform: translateX(-50%)
    }

    .dashboard-mini-bars span {
        bottom: -1.45rem;
        color: var(--muted);
        font-size: .72rem;
        font-weight: 600;
        left: 50%;
        position: absolute;
        transform: translateX(-50%)
    }

.dashboard-presence-card {
    min-height: 24rem
}

.dashboard-donut-wrap {
    display: flex;
    justify-content: center;
    padding: .8rem 0 1rem
}

.dashboard-donut {
    align-items: center;
    background: conic-gradient(var(--accent) 0 calc(var(--presence, 75) * 1%),#ffd591 calc(var(--presence, 75) * 1%) 98%,#dbe3ed 98% 100%);
    border-radius: 50%;
    display: flex;
    height: 11rem;
    justify-content: center;
    position: relative;
    width: 11rem
}

.dashboard-charts-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0,1fr) minmax(20rem,.55fr);
    margin-bottom: 1rem
}

    .dashboard-charts-grid > .dashboard-card {
        grid-column: auto
    }

    .dashboard-charts-grid .dashboard-card-lg {
        grid-column: 1 / -1
    }

.dashboard-role-bars {
    height: 15rem
}

.dashboard-donut-dynamic {
    background: conic-gradient(var(--accent) 0 calc(var(--presence, 75) * 1%), color-mix(in srgb,var(--accent) 18%,var(--surface)) calc(var(--presence, 75) * 1%) 100%)
}

    .dashboard-donut:before {
        background: var(--surface);
        border-radius: 50%;
        content: "";
        height: 7.4rem;
        position: absolute;
        width: 7.4rem
    }

    .dashboard-donut span {
        font-size: 1.45rem;
        font-weight: 800;
        position: relative;
        text-align: center
    }

    .dashboard-donut small {
        color: var(--muted);
        display: block;
        font-size: .72rem;
        font-weight: 600
    }

.dashboard-legend {
    display: grid;
    gap: .55rem
}

    .dashboard-legend.inline {
        display: flex;
        flex-wrap: wrap;
        margin-top: 1rem
    }

    .dashboard-legend span {
        align-items: center;
        color: var(--muted);
        display: flex;
        font-size: .8rem;
        gap: .45rem
    }

    .dashboard-legend i {
        border-radius: 50%;
        display: inline-block;
        height: .55rem;
        width: .55rem
    }

    .dashboard-legend b {
        color: var(--text);
        margin-left: auto
    }

    .dashboard-legend .blue {
        background: var(--accent)
    }

    .dashboard-legend .present {
        background: var(--accent)
    }

    .dashboard-legend .absent {
        background: color-mix(in srgb,var(--accent) 45%,#d63939)
    }

.dashboard-combo-chart {
    display: grid;
    gap: .8rem
}

.combo-row {
    align-items: center;
    display: grid;
    gap: .75rem;
    grid-template-columns: 3rem 1fr 1fr 3rem
}

    .combo-row span, .combo-row b {
        color: var(--muted);
        font-size: .78rem;
        font-weight: 700
    }

    .combo-row i, .combo-row em {
        border-radius: 999px;
        display: block;
        height: .72rem;
        min-width: .7rem
    }

    .combo-row i {
        background: linear-gradient(90deg,color-mix(in srgb,var(--accent) 28%,var(--surface)),var(--accent))
    }

    .combo-row em {
        background: linear-gradient(90deg,color-mix(in srgb,var(--accent) 62%,#206bc4),color-mix(in srgb,var(--accent) 28%,#74c0fc))
    }

.dashboard-progress-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2,minmax(0,1fr))
}

    .dashboard-progress-grid div {
        background: #f8fafc;
        border: 1px solid var(--border);
        border-radius: .55rem;
        padding: 1rem
    }

    .dashboard-progress-grid span {
        color: var(--muted);
        display: block;
        font-size: .8rem;
        font-weight: 600
    }

    .dashboard-progress-grid strong {
        display: block;
        font-size: 1.25rem;
        margin: .3rem 0 .7rem
    }

    .dashboard-progress-grid em {
        background: #eef1f5;
        border-radius: 999px;
        display: block;
        height: .58rem;
        overflow: hidden
    }

    .dashboard-progress-grid i {
        background: linear-gradient(90deg,color-mix(in srgb,var(--accent) 45%,var(--surface)),var(--accent));
        border-radius: inherit;
        display: block;
        height: 100%
    }

[data-theme="dark"] .dashboard-mini-bars, [data-theme="dark"] .attendance-chart {
    background: linear-gradient(180deg,rgba(245,159,0,.12),rgba(24,36,51,.02));
    border-color: rgba(245,159,0,.28)
}

[data-theme="dark"] .dashboard-donut:before {
    background: var(--surface)
}

[data-theme="dark"] .dashboard-progress-grid div {
    background: #17212f
}

[data-theme="dark"] .dashboard-progress-grid em {
    background: #1f2d3d
}

@media(max-width:700px) {
    .dashboard-charts-grid {
        grid-template-columns: 1fr
    }

    .dashboard-progress-grid {
        grid-template-columns: 1fr
    }

    .combo-row {
        grid-template-columns: 2.5rem 1fr
    }

        .combo-row em, .combo-row b {
            display: none
        }
}

.dashboard-page-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin: -.25rem 0 1rem !important;
    padding: 0 0 1rem
}

    .dashboard-page-header h1 {
        font-size: 1.5rem;
        font-weight: 600;
        margin: .1rem 0 .25rem
    }

.dashboard-context-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .75rem
}

    .dashboard-context-pills span {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 999px;
        color: var(--muted);
        font-size: .75rem;
        font-weight: 500;
        padding: .18rem .55rem
    }

.dashboard-kpi-grid {
    gap: 1rem;
    grid-template-columns: repeat(4,minmax(0,1fr));
    margin-bottom: 1rem
}

.dashboard-kpi {
    box-shadow: none !important;
    display: grid;
    gap: .35rem;
    min-height: 8.5rem;
    padding: 1rem !important
}

.dashboard-kpi-head {
    align-items: center;
    display: flex;
    justify-content: space-between
}

    .dashboard-kpi-head span {
        color: var(--muted);
        font-size: .8125rem;
        font-weight: 600
    }

.dashboard-kpi strong {
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -.02em;
    margin: .1rem 0 !important
}

.dashboard-kpi small {
    margin-top: 0 !important
}

.kpi-dot {
    border-radius: 999px;
    display: inline-block;
    height: .55rem;
    width: .55rem
}

    .kpi-dot.blue {
        background: var(--accent)
    }

    .kpi-dot.green {
        background: color-mix(in srgb,var(--accent) 70%,#2fb344)
    }

    .kpi-dot.yellow {
        background: var(--accent)
    }

    .kpi-dot.red {
        background: color-mix(in srgb,var(--accent) 45%,#d63939)
    }

.kpi-progress {
    background: var(--bg);
    border-radius: 999px;
    height: .35rem;
    margin-top: .55rem;
    overflow: hidden
}

    .kpi-progress i {
        background: var(--accent);
        border-radius: inherit;
        display: block;
        height: 100%
    }

    .kpi-progress.danger i {
        background: linear-gradient(90deg,color-mix(in srgb,var(--accent) 45%,#d63939),var(--accent))
    }

.dashboard-tabler-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(12,minmax(0,1fr))
}

.dashboard-card {
    box-shadow: none !important;
    grid-column: span 4;
    min-height: 0;
    padding: 1rem !important
}

.dashboard-card-lg {
    grid-column: span 8
}

.dashboard-card .surface-heading {
    border-bottom: 1px solid var(--border);
    margin: -.1rem -1rem 1rem;
    padding: 0 1rem .85rem
}

    .dashboard-card .surface-heading h2 {
        font-size: .9375rem;
        font-weight: 600
    }

    .dashboard-card .surface-heading p {
        font-size: .8125rem
    }

.dashboard-bar-list {
    display: grid;
    gap: .85rem
}

.dashboard-bar-row {
    align-items: center;
    display: grid;
    gap: .75rem;
    grid-template-columns: 6rem 1fr 4rem
}

    .dashboard-bar-row span, .dashboard-bar-row strong {
        font-size: .8125rem
    }

    .dashboard-bar-row span {
        color: var(--muted);
        font-weight: 600
    }

    .dashboard-bar-row strong {
        text-align: right
    }

    .dashboard-bar-row div {
        background: var(--bg);
        border-radius: 999px;
        height: .55rem;
        overflow: hidden
    }

    .dashboard-bar-row i {
        background: linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 65%,#fff));
        border-radius: inherit;
        display: block;
        height: 100%
    }

.dashboard-donut-wrap.compact {
    padding: .25rem 0 .75rem
}

.dashboard-donut {
    background: conic-gradient(var(--accent) 0 calc(var(--presence,0)*1%),var(--bg) calc(var(--presence,0)*1%) 100%) !important;
    height: 9rem;
    width: 9rem
}

    .dashboard-donut:before {
        height: 6.1rem;
        width: 6.1rem
    }

    .dashboard-donut span {
        font-size: 1.2rem
    }

.tabler-list {
    gap: 0
}

    .tabler-list div {
        background: transparent !important;
        border: 0 !important;
        border-top: 1px solid var(--border) !important;
        border-radius: 0 !important;
        grid-template-columns: 4.5rem 1fr !important;
        padding: .75rem 0 !important
    }

        .tabler-list div:first-child {
            border-top: 0 !important
        }

.tabler-summary {
    display: grid;
    gap: 0;
    grid-template-columns: 1fr
}

    .tabler-summary div {
        background: transparent !important;
        border: 0 !important;
        border-top: 1px solid var(--border) !important;
        border-radius: 0 !important;
        padding: .75rem 0 !important
    }

        .tabler-summary div:first-child {
            border-top: 0 !important;
            padding-top: 0 !important
        }

    .tabler-summary strong {
        font-size: 1.15rem !important
    }

.tabler-actions {
    grid-template-columns: 1fr
}

    .tabler-actions a {
        background: transparent !important;
        border-color: var(--border) !important;
        border-radius: var(--radius,4px) !important;
        padding: .65rem .75rem !important
    }

        .tabler-actions a:hover {
            background: var(--tblr-menu-hover) !important;
            border-color: var(--border) !important;
            color: var(--accent) !important
        }

.tabler-progress {
    gap: .75rem
}

    .tabler-progress div {
        background: transparent !important;
        border-color: var(--border) !important;
        padding: .8rem !important
    }

.dashboard-board {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0,1.45fr) minmax(20rem,.55fr);
    margin-bottom: 1rem
}

.dashboard-panel {
    box-shadow: none !important;
    min-height: 0;
    padding: 1rem !important
}

.dashboard-panel-main {
    min-height: 22rem
}

.dashboard-panel-side {
    grid-row: span 2
}

.dashboard-panel-compact {
    min-height: 15rem
}

    .dashboard-panel .surface-heading {
        border-bottom: 1px solid var(--border);
        margin: -.1rem -1rem 1rem;
        padding: 0 1rem .85rem
    }

.dashboard-rank-chart {
    display: grid;
    gap: 1rem
}

.dashboard-rank-row {
    display: grid;
    gap: .65rem
}

    .dashboard-rank-row > div {
        align-items: center;
        display: flex;
        justify-content: space-between
    }

    .dashboard-rank-row span {
        color: var(--muted);
        font-size: .82rem;
        font-weight: 650
    }

    .dashboard-rank-row strong {
        color: var(--text);
        font-size: .9rem;
        font-weight: 700
    }

    .dashboard-rank-row em {
        background: var(--bg);
        border-radius: 999px;
        display: block;
        height: .7rem;
        overflow: hidden
    }

    .dashboard-rank-row i {
        background: linear-gradient(90deg,color-mix(in srgb,var(--accent) 28%,var(--surface)),var(--accent));
        border-radius: inherit;
        display: block;
        height: 100%
    }

.dashboard-chip-row {
    border-top: 1px solid var(--border);
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4,minmax(0,1fr));
    margin-top: 1.25rem;
    padding-top: 1rem
}

    .dashboard-chip-row span {
        background: color-mix(in srgb,var(--accent) 7%,var(--surface));
        border: 1px solid color-mix(in srgb,var(--accent) 18%,var(--border));
        border-radius: var(--radius,4px);
        color: var(--muted);
        display: grid;
        font-size: .78rem;
        gap: .1rem;
        padding: .75rem
    }

    .dashboard-chip-row b {
        color: var(--text);
        font-size: 1.15rem
    }

.dashboard-todo-list {
    gap: 0
}

    .dashboard-todo-list div {
        background: transparent !important;
        border: 0 !important;
        border-top: 1px solid var(--border) !important;
        border-radius: 0 !important;
        grid-template-columns: 4rem 1fr !important;
        padding: .8rem 0 !important
    }

    .dashboard-todo-list div:first-child {
        border-top: 0 !important
    }

.dashboard-side-actions {
    border-top: 1px solid var(--border);
    margin-top: 1rem;
    padding-top: 1rem
}

    .dashboard-side-actions h3 {
        color: var(--muted);
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .05em;
        margin: 0 0 .75rem;
        text-transform: uppercase
    }

.dashboard-donut-summary {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: auto 1fr
}

[data-theme="dark"] .dashboard-context-pills span, [data-theme="dark"] .kpi-progress, [data-theme="dark"] .dashboard-bar-row div {
    background: #17212f
}

[data-theme="dark"] .dashboard-rank-row em {
    background: #17212f
}

[data-theme="dark"] .dashboard-chip-row span {
    background: color-mix(in srgb,var(--accent) 11%,#17212f);
    border-color: color-mix(in srgb,var(--accent) 24%,#253143)
}

@media(max-width:1200px) {
    .dashboard-board {
        grid-template-columns: 1fr
    }

    .dashboard-panel-side {
        grid-row: auto
    }

    .dashboard-card, .dashboard-card-lg {
        grid-column: span 6
    }

    .dashboard-kpi-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:760px) {
    .dashboard-page-header {
        display: block
    }

        .dashboard-page-header .page-actions {
            margin-top: 1rem
        }

    .dashboard-card, .dashboard-card-lg {
        grid-column: 1/-1
    }

    .dashboard-kpi-grid {
        grid-template-columns: 1fr
    }

    .dashboard-chip-row {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .dashboard-donut-summary {
        grid-template-columns: 1fr;
        justify-items: center
    }

    .dashboard-bar-row {
        grid-template-columns: 5rem 1fr 3rem
    }
}

.online-users-page {
    overflow: hidden
}

.online-user-cell {
    align-items: center;
    display: flex;
    gap: .7rem
}

    .online-user-cell small {
        color: var(--muted);
        display: block;
        font-size: .75rem;
        margin-top: .15rem
    }

.online-avatar {
    align-items: center;
    background: #eef5ff;
    border-radius: 999px;
    color: #206bc4;
    display: flex;
    font-size: .75rem;
    font-weight: 700;
    height: 2.1rem;
    justify-content: center;
    width: 2.1rem
}

.online-pill {
    background: #e7f7ed;
    color: #218739
}

.language-settings {
    overflow: visible
}

.language-picker-row {
    align-items: end;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(18rem,.4fr) 1fr;
    padding: 1.2rem
}

.language-current {
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius,4px);
    display: flex;
    gap: .75rem;
    min-height: 3.1rem;
    padding: .7rem .85rem
}

    .language-current > span {
        font-size: 1.35rem
    }

    .language-current b, .language-current small {
        display: block
    }

    .language-current b {
        font-size: .9rem
    }

    .language-current small {
        color: var(--muted);
        font-size: .75rem;
        margin-top: .1rem
    }

.language-grid {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(4,minmax(0,1fr));
    max-height: 32rem;
    overflow: auto;
    padding: 0 1.2rem 1.2rem
}

.language-option {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius,4px);
    color: var(--text);
    cursor: pointer;
    display: grid;
    gap: .1rem;
    grid-template-columns: 2rem 1fr;
    padding: .65rem;
    text-align: left
}

    .language-option > span {
        font-size: 1.25rem;
        grid-row: span 2
    }

    .language-option b {
        font-size: .8125rem;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .language-option small {
        color: var(--muted);
        font-size: .72rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .language-option:hover {
        background: var(--tblr-menu-hover);
        border-color: var(--border);
        color: var(--accent)
    }

    .language-option.active {
        background: var(--tblr-menu-active);
        border-color: var(--accent);
        box-shadow: inset 0 0 0 1px var(--accent);
        color: var(--accent)
    }

.language-flag-inline {
    border: 1px solid var(--border);
    border-radius: .2rem;
    height: .9rem;
    margin-right: .3rem;
    object-fit: cover;
    vertical-align: -.12rem;
    width: 1.25rem
}

.language-flag-large {
    border: 1px solid var(--border);
    border-radius: .22rem;
    box-shadow: 0 .15rem .35rem rgba(24,36,51,.1);
    display: block;
    height: 1.25rem;
    object-fit: cover;
    width: 1.75rem
}

@media(max-width:1000px) {
    .language-grid {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }
}

@media(max-width:760px) {
    .language-picker-row {
        grid-template-columns: 1fr
    }

    .language-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:520px) {
    .language-grid {
        grid-template-columns: 1fr
    }
}

[dir="rtl"] .page-shell {
    direction: rtl;
}

[dir="rtl"] body,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] .page-shell,
[dir="rtl"] .tooltip,
[dir="rtl"] .swal2-popup {
    font-family: var(--arabic-font) !important;
}

[dir="rtl"] .page-header h1,
[dir="rtl"] .surface-heading h2,
[dir="rtl"] .metric strong,
[dir="rtl"] .dashboard-hero h1 {
    font-family: var(--arabic-font) !important;
    font-weight: 700;
    letter-spacing: 0;
}

[dir="rtl"] .eyebrow,
[dir="rtl"] .tabler-table th {
    letter-spacing: 0;
}

[dir="rtl"] .sidebar {
    border-left: 1px solid var(--tblr-menu-border) !important;
    border-right: 0 !important;
}

[dir="rtl"] .brand,
[dir="rtl"] .nav-item,
[dir="rtl"] .topbar,
[dir="rtl"] .topbar-context,
[dir="rtl"] .dashboard-kpi-head,
[dir="rtl"] .surface-heading,
[dir="rtl"] .dashboard-legend span,
[dir="rtl"] .finance-summary div,
[dir="rtl"] .language-current,
[dir="rtl"] .language-option,
[dir="rtl"] .settings-row,
[dir="rtl"] .settings-toggle {
    direction: rtl;
}

[dir="rtl"] .nav-item {
    text-align: right;
}

    [dir="rtl"] .nav-item.active {
        box-shadow: inset -3px 0 var(--accent);
    }

[dir="rtl"] .nav-group summary::after {
    margin-left: 0;
    margin-right: auto;
    transform: rotate(135deg);
}

[dir="rtl"] .nav-group[open] summary::after {
    transform: rotate(45deg);
}

[dir="rtl"] .nav-submenu {
    border-left: 0;
    border-right: 1px solid color-mix(in srgb,var(--tblr-menu-border) 85%,transparent);
    margin-left: 0;
    margin-right: 1.35rem;
    padding-left: 0;
    padding-right: .45rem;
}

[dir="rtl"] .search-select-toggle,
[dir="rtl"] .search-select-option,
[dir="rtl"] .search-select-input,
[dir="rtl"] input,
[dir="rtl"] textarea {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .search-select-menu {
    left: auto;
    right: 0;
}

[dir="rtl"] .topbar-spacer {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .page-header,
[dir="rtl"] .surface,
[dir="rtl"] .metric,
[dir="rtl"] .generic-page,
[dir="rtl"] .page-alert {
    text-align: right;
}

[dir="rtl"] .alert-action-link {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .btn-spinner {
    margin-left: .45rem;
    margin-right: 0;
}

[dir="rtl"] .page-actions,
[dir="rtl"] .record-form-actions,
[dir="rtl"] .row-actions {
    flex-direction: row-reverse;
}

[dir="rtl"] .list-toolbar,
[dir="rtl"] .schools-toolbar,
[dir="rtl"] .notifications-toolbar {
    direction: rtl;
}

[dir="rtl"] .generic-toolbar,
[dir="rtl"] .list-toolbar,
[dir="rtl"] .schools-toolbar,
[dir="rtl"] .notifications-toolbar,
[dir="rtl"] .toolbar-search-export,
[dir="rtl"] .permissions-toolbar,
[dir="rtl"] .attendance-report-toolbar,
[dir="rtl"] .timeline-toolbar {
    direction: rtl;
    justify-content: flex-start !important;
}

    [dir="rtl"] .generic-toolbar .search-box,
    [dir="rtl"] .list-toolbar .search-box,
    [dir="rtl"] .schools-toolbar .search-box,
    [dir="rtl"] .notifications-toolbar .search-box,
    [dir="rtl"] .permissions-search-field {
        margin-left: 0;
        margin-right: 0;
        order: 0;
    }

    [dir="rtl"] .generic-toolbar > .grid-export,
    [dir="rtl"] .list-toolbar > .grid-export,
    [dir="rtl"] .schools-toolbar .grid-export,
    [dir="rtl"] .notifications-toolbar .grid-export,
    [dir="rtl"] .toolbar-search-export .grid-export,
    [dir="rtl"] .permissions-toolbar > .grid-export,
    [dir="rtl"] .attendance-report-toolbar > .grid-export,
    [dir="rtl"] .timeline-toolbar > .grid-export,
    [dir="rtl"] .generic-toolbar > .btn.icon-only,
    [dir="rtl"] .list-toolbar > .btn.icon-only,
    [dir="rtl"] .permissions-toolbar > .btn.icon-only,
    [dir="rtl"] .attendance-report-toolbar > .btn.icon-only,
    [dir="rtl"] .timeline-toolbar > .btn.icon-only,
    [dir="rtl"] .schools-toolbar-actions,
    [dir="rtl"] .page-actions {
        margin-left: 0 !important;
        margin-right: auto !important;
        order: 99 !important;
    }

[dir="rtl"] .search-box {
    direction: rtl;
    flex-direction: row-reverse;
    text-align: right;
}

    [dir="rtl"] .search-box input {
        direction: rtl;
        text-align: right;
    }

    [dir="rtl"] .search-box span {
        margin-left: 0;
        margin-right: .15rem;
    }

[dir="rtl"] .table-wrap {
    direction: rtl;
}

[dir="rtl"] .tabler-table {
    direction: rtl;
}

    [dir="rtl"] .tabler-table th,
    [dir="rtl"] .tabler-table td {
        text-align: right !important;
    }

        [dir="rtl"] .tabler-table th:last-child,
        [dir="rtl"] .tabler-table td:last-child {
            text-align: left !important;
        }

    [dir="rtl"] .tabler-table .sort-header {
        direction: rtl;
        flex-direction: row-reverse;
        justify-content: flex-end;
        text-align: right !important;
        width: 100%;
    }

        [dir="rtl"] .tabler-table .sort-header i {
            margin-left: 0;
            margin-right: .15rem;
        }

    [dir="rtl"] .tabler-table .row-actions {
        justify-content: flex-start;
    }

[dir="rtl"] .app-toast {
    border-left: 1px solid var(--border);
    border-right: 3px solid var(--accent);
    direction: rtl;
}

    [dir="rtl"] .app-toast button {
        margin-left: 0;
        margin-right: auto;
    }

[dir="rtl"] .required-marker {
    margin-left: 0;
    margin-right: .2rem;
}

[dir="rtl"] .timeline-item:not(:last-child)::before {
    left: auto;
    right: 1.1rem;
}

[dir="rtl"] .usage-legend b {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] #blazor-error-ui .dismiss {
    left: .75rem;
    right: auto;
}

.sidebar-search {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--tblr-menu-border);
    border-radius: var(--radius,4px);
    color: var(--tblr-menu-muted);
    display: flex;
    gap: .45rem;
    margin: .85rem .25rem 0;
    padding: 0 .6rem
}

    .sidebar-search span {
        font-size: .95rem;
        line-height: 1
    }

    .sidebar-search input {
        background: transparent;
        border: 0;
        color: var(--tblr-menu-text);
        font: inherit;
        height: 2.15rem;
        min-width: 0;
        outline: 0;
        width: 100%
    }

        .sidebar-search input::placeholder {
            color: var(--tblr-menu-muted)
        }

.sidebar-search-clear {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--tblr-menu-muted);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 1rem;
    height: 1.45rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 1.45rem
}

    .sidebar-search-clear:hover {
        background: var(--tblr-menu-hover);
        color: var(--tblr-menu-text)
    }

.sidebar-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 .15rem color-mix(in srgb,var(--accent) 18%,transparent)
}

.sidebar .hidden {
    display: none !important
}

[data-theme="dark"] .sidebar-search {
    background: #17212f;
    border-color: #253143
}

.mobile-sidebar-close,
.mobile-sidebar-backdrop {
    display: none
}

:root {
    --accent: #0ea5e9;
    --bg: #ffffff;
    --tblr-menu-bg: #ffffff;
    --tblr-primary: #0ea5e9
}

@media(max-width:900px) {
    .sidebar {
        background: var(--surface) !important;
        bottom: 0;
        height: 100dvh !important;
        left: 0;
        max-width: min(86vw,20rem);
        position: fixed !important;
        top: 0;
        transform: translateX(-105%);
        transition: transform .22s ease;
        width: 20rem;
        z-index: 120
    }

    .sidebar.mobile-open {
        box-shadow: .75rem 0 2rem rgba(24,36,51,.2) !important;
        transform: translateX(0)
    }

    .mobile-sidebar-backdrop {
        background: rgba(15,23,42,.42);
        border: 0;
        display: block;
        inset: 0;
        padding: 0;
        position: fixed;
        width: 100%;
        z-index: 119
    }

    .mobile-sidebar-close {
        align-items: center;
        background: transparent;
        border: 0;
        color: var(--muted);
        cursor: pointer;
        display: inline-flex;
        font-size: 1.65rem;
        height: 2.5rem;
        justify-content: center;
        line-height: 1;
        position: absolute;
        right: .3rem;
        top: .25rem;
        width: 2.5rem
    }

    .mobile-sidebar-close:hover {
        color: var(--text)
    }
}

.sidebar .brand {
    font-size: 1.08rem !important;
    min-height: 3.1rem !important;
    padding-bottom: 1.35rem !important
}

.sidebar-nav {
    gap: .55rem !important
}

.sidebar .nav-group summary {
    font-size: 1.05rem !important;
    gap: .85rem !important;
    min-height: 2.85rem !important;
    padding: .72rem .85rem !important
}

.sidebar .nav-submenu {
    gap: .18rem !important;
    margin: .22rem 0 .5rem 1.55rem !important;
    padding-left: .6rem !important
}

    .sidebar .nav-submenu .nav-item {
        font-size: 1rem !important;
        gap: .55rem !important;
        min-height: 2.55rem !important;
        padding: .58rem .8rem !important
    }

.sidebar .nav-icon {
    font-size: 1.1rem !important;
    height: 1.45rem !important;
    width: 1.45rem !important
}

.sidebar-search {
    margin: 1rem .25rem 0 !important;
    padding: 0 .72rem !important
}

    .sidebar-search input {
        font-size: 1rem !important;
        height: 2.45rem !important
    }

.not-found-page {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: calc(100vh - 12rem);
    padding: 2rem 1rem
}

.not-found-card {
    background: linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,var(--surface)),var(--surface));
    border: 1px solid var(--border);
    border-radius: calc(var(--radius,4px) + .75rem);
    box-shadow: 0 1.25rem 3rem rgba(15,23,42,.08);
    max-width: 42rem;
    padding: 2.5rem;
    text-align: center;
    width: 100%
}

.not-found-visual {
    align-items: center;
    color: var(--accent);
    display: grid;
    justify-items: center;
    margin: 0 auto 1.25rem;
    position: relative
}

    .not-found-visual span {
        background: color-mix(in srgb,var(--accent) 12%,var(--surface));
        border: 1px solid color-mix(in srgb,var(--accent) 28%,var(--border));
        border-radius: 999px;
        color: var(--accent);
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: .08em;
        padding: .38rem .7rem;
        position: absolute;
        top: .2rem
    }

    .not-found-visual svg {
        height: 8.5rem;
        max-width: 16rem;
        width: 70%
    }

    .not-found-visual path, .not-found-visual rect {
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 7
    }

    .not-found-visual circle {
        fill: currentColor
    }

.not-found-eyebrow {
    color: var(--accent);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    margin: 0 0 .55rem;
    text-transform: uppercase
}

.not-found-card h1 {
    color: var(--text);
    font-size: 2.25rem;
    letter-spacing: -.04em;
    line-height: 1.1;
    margin: 0
}

.not-found-text {
    color: var(--muted);
    font-size: 1rem;
    margin: .75rem auto 0;
    max-width: 30rem
}

.not-found-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    justify-content: center;
    margin-top: 1.6rem
}

[data-theme="dark"] .not-found-card {
    box-shadow: 0 1.25rem 3rem rgba(0,0,0,.22)
}

@media(max-width:640px) {
    .not-found-card {
        padding: 1.5rem
    }

        .not-found-card h1 {
            font-size: 1.85rem
        }

    .not-found-actions .btn {
        justify-content: center;
        width: 100%
    }
}

[data-theme="dark"] .search-box,
[data-theme="dark"] .topbar-search,
[data-theme="dark"] .filter-bar,
[data-theme="dark"] .generic-toolbar select,
[data-theme="dark"] .list-toolbar select,
[data-theme="dark"] .schools-toolbar select,
[data-theme="dark"] .attendance-report-filters input,
[data-theme="dark"] .timeline-filter-field input,
[data-theme="dark"] .database-form input,
[data-theme="dark"] .database-upload-zone input[type=file],
[data-theme="dark"] .tenant-form input,
[data-theme="dark"] .roles-form input,
[data-theme="dark"] .table-input,
[data-theme="dark"] .record-field input,
[data-theme="dark"] .record-field textarea,
[data-theme="dark"] .session-reason-input,
[data-theme="dark"] .search-select-toggle,
[data-theme="dark"] .search-select-input,
[data-theme="dark"] .multi-select-list {
    background: #17212f !important;
    border-color: #253143 !important;
    color: #dce3eb !important;
}

    [data-theme="dark"] .search-box input,
    [data-theme="dark"] .topbar-search input,
    [data-theme="dark"] .permissions-toolbar .search-box input {
        background: transparent !important;
        color: #dce3eb !important;
    }

    [data-theme="dark"] input::placeholder,
    [data-theme="dark"] textarea::placeholder,
    [data-theme="dark"] .search-box span,
    [data-theme="dark"] .search-select-toggle i {
        color: #8b98a9 !important;
    }

    [data-theme="dark"] .search-box:focus-within,
    [data-theme="dark"] .search-select-toggle:focus,
    [data-theme="dark"] .search-select-input:focus,
    [data-theme="dark"] input:focus,
    [data-theme="dark"] textarea:focus {
        border-color: var(--accent) !important;
        box-shadow: 0 0 0 .15rem color-mix(in srgb,var(--accent) 22%,transparent) !important;
        outline: 0 !important;
    }

[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: #dce3eb !important;
    box-shadow: 0 0 0 1000px #17212f inset !important;
    caret-color: #dce3eb !important;
}

[data-theme="dark"] .btn,
[data-theme="dark"] a.btn,
[data-theme="dark"] button.btn {
    background: #17212f !important;
    border-color: #253143 !important;
    color: #dce3eb !important;
}

    [data-theme="dark"] .btn:hover,
    [data-theme="dark"] a.btn:hover,
    [data-theme="dark"] button.btn:hover {
        background: #1f2d3d !important;
        border-color: color-mix(in srgb,var(--accent) 35%,#253143) !important;
        color: var(--accent) !important;
    }

[data-theme="dark"] .btn-primary,
[data-theme="dark"] a.btn-primary,
[data-theme="dark"] button.btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #1f1800 !important;
}

    [data-theme="dark"] .btn-primary:hover,
    [data-theme="dark"] a.btn-primary:hover,
    [data-theme="dark"] button.btn-primary:hover {
        background: color-mix(in srgb,var(--accent) 86%,#fff) !important;
        border-color: color-mix(in srgb,var(--accent) 86%,#fff) !important;
        color: #1f1800 !important;
    }

[data-theme="dark"] .btn-danger,
[data-theme="dark"] button.btn-danger {
    background: #d63939 !important;
    border-color: #d63939 !important;
    color: #fff !important;
}

    [data-theme="dark"] .btn-danger:hover,
    [data-theme="dark"] button.btn-danger:hover {
        background: #b42318 !important;
        border-color: #b42318 !important;
        color: #fff !important;
    }

[data-theme="dark"] .btn:disabled,
[data-theme="dark"] .btn[disabled],
[data-theme="dark"] button.btn:disabled,
[data-theme="dark"] button.btn[disabled] {
    background: #111927 !important;
    border-color: #253143 !important;
    color: #6f7d90 !important;
}

[data-theme="dark"] .tabler-table thead,
[data-theme="dark"] .tabler-table th {
    background: color-mix(in srgb,var(--accent) 12%,#17212f) !important;
    border-bottom-color: color-mix(in srgb,var(--accent) 28%,#253143) !important;
    color: color-mix(in srgb,var(--accent) 30%,#f8fafc) !important;
}

    [data-theme="dark"] .tabler-table th .sort-header,
    [data-theme="dark"] .tabler-table th .sort-header i {
        color: inherit !important;
    }

[data-theme="dark"] .row-action,
[data-theme="dark"] .row-action.icon-only,
[data-theme="dark"] .grid-icon-action,
[data-theme="dark"] .view-toggle,
[data-theme="dark"] .grid-export-menu button,
[data-theme="dark"] .topbar-theme-button,
[data-theme="dark"] .topbar-user,
[data-theme="dark"] .topbar-logout,
[data-theme="dark"] .topbar-icon-button,
[data-theme="dark"] .theme-option,
[data-theme="dark"] .theme-swatch,
[data-theme="dark"] .theme-radius,
[data-theme="dark"] .language-option,
[data-theme="dark"] .auth-demo-button {
    background: #17212f !important;
    border-color: #253143 !important;
    color: #dce3eb !important;
}

    [data-theme="dark"] .row-action:hover,
    [data-theme="dark"] .row-action.icon-only:hover,
    [data-theme="dark"] .grid-icon-action:hover,
    [data-theme="dark"] .view-toggle-button:hover,
    [data-theme="dark"] .grid-export-menu button:hover,
    [data-theme="dark"] .topbar-theme-button:hover,
    [data-theme="dark"] .topbar-user:hover,
    [data-theme="dark"] .topbar-logout:hover,
    [data-theme="dark"] .topbar-icon-button:hover,
    [data-theme="dark"] .theme-option:hover,
    [data-theme="dark"] .theme-swatch:hover,
    [data-theme="dark"] .theme-radius:hover,
    [data-theme="dark"] .language-option:hover,
    [data-theme="dark"] .auth-demo-button:hover {
        background: #1f2d3d !important;
        border-color: color-mix(in srgb,var(--accent) 35%,#253143) !important;
        color: var(--accent) !important;
    }

[data-theme="dark"] .view-toggle-button {
    background: transparent !important;
    border-color: #253143 !important;
    color: #8b98a9 !important;
}

    [data-theme="dark"] .view-toggle-button.active {
        background: var(--accent) !important;
        border-color: var(--accent) !important;
        color: #1f1800 !important;
    }

[data-density="compact"] .main-content {
    padding: 1rem 1.35rem !important
}

[data-density="large"] .main-content {
    padding: 2rem 2.5rem !important
}

[data-density="compact"] .content-inner {
    display: grid;
    gap: .75rem
}

[data-density="large"] .content-inner {
    display: grid;
    gap: 1.35rem
}

[data-density="compact"] .page-header {
    margin-bottom: .75rem !important;
    padding: .85rem 1rem !important
}

[data-density="large"] .page-header {
    margin-bottom: 1.35rem !important;
    padding: 1.35rem 1.5rem !important
}

[data-density="compact"] .surface,
[data-density="compact"] .metric,
[data-density="compact"] .school-record,
[data-density="compact"] .dashboard-card {
    padding: .8rem !important
}

[data-density="large"] .surface,
[data-density="large"] .metric,
[data-density="large"] .school-record,
[data-density="large"] .dashboard-card {
    padding: 1.35rem !important
}

[data-density="compact"] .generic-toolbar,
[data-density="compact"] .list-toolbar,
[data-density="compact"] .schools-toolbar,
[data-density="compact"] .notifications-toolbar {
    padding: .7rem .9rem !important;
    gap: .65rem !important
}

[data-density="large"] .generic-toolbar,
[data-density="large"] .list-toolbar,
[data-density="large"] .schools-toolbar,
[data-density="large"] .notifications-toolbar {
    padding: 1.25rem 1.4rem !important;
    gap: 1.1rem !important
}

[data-density="compact"] .btn,
[data-density="compact"] .row-action,
[data-density="compact"] .grid-icon-action,
[data-density="compact"] .search-select-toggle,
[data-density="compact"] input,
[data-density="compact"] select {
    min-height: 2rem !important;
    padding: .35rem .55rem !important
}

[data-density="large"] .btn,
[data-density="large"] .row-action,
[data-density="large"] .grid-icon-action,
[data-density="large"] .search-select-toggle,
[data-density="large"] input,
[data-density="large"] select {
    min-height: 2.75rem !important;
    padding: .7rem 1rem !important
}

[data-density="compact"] .tabler-table th {
    padding: .55rem .8rem !important
}

[data-density="compact"] .tabler-table td {
    padding: .62rem .8rem !important
}

[data-density="large"] .tabler-table th {
    padding: 1rem 1.25rem !important
}

[data-density="large"] .tabler-table td {
    padding: 1.15rem 1.25rem !important
}

[data-density="compact"] .record-form-grid {
    gap: .75rem !important
}

[data-density="large"] .record-form-grid {
    gap: 1.35rem !important
}

[data-density="compact"] .record-field {
    gap: .3rem !important
}

[data-density="large"] .record-field {
    gap: .55rem !important
}

[data-density="compact"] .metric-grid,
[data-density="compact"] .dashboard-grid,
[data-density="compact"] .school-grid {
    gap: .75rem !important
}

[data-density="large"] .metric-grid,
[data-density="large"] .dashboard-grid,
[data-density="large"] .school-grid {
    gap: 1.35rem !important
}

.surface:has(.list-footer),
.generic-page:has(.list-footer),
.students-surface:has(.list-footer),
.schools-surface:has(.list-footer),
.tenant-list:has(.list-footer) {
    overflow: visible !important
}

.list-footer,
.grid-footer-controls,
.grid-footer-controls .search-select {
    overflow: visible !important;
    position: relative
}

.list-footer {
    z-index: 30
}

.grid-footer-controls .search-select-menu {
    bottom: calc(100% + .35rem);
    top: auto;
    z-index: 3000
}

.search-select:has(.search-select-menu) {
    z-index: 2500
}

.search-select-menu {
    z-index: 3000
}

/* Unified grid layout: search first, filters next, actions at the end, pagination always visible. */
.generic-toolbar,
.list-toolbar,
.schools-toolbar,
.notifications-toolbar,
.permissions-toolbar,
.attendance-report-toolbar,
.timeline-toolbar {
    align-items: end !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .75rem !important;
    justify-content: flex-start !important;
    padding: 1rem 1.2rem !important;
}

.timeline-toolbar {
    align-items: stretch !important;
    flex-direction: column !important;
}

.timeline-filter-row {
    align-items: end !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .75rem !important;
    width: 100% !important;
}

.generic-toolbar > .search-box,
.list-toolbar > .search-box,
.schools-toolbar .search-box,
.notifications-toolbar .search-box,
.permissions-search-field,
.timeline-toolbar > .search-box,
.toolbar-search-export > .search-box {
    flex: 1 1 24rem !important;
    max-width: none !important;
    min-width: min(100%,18rem) !important;
    order: 1 !important;
    width: 100% !important;
}

.generic-toolbar > .permissions-filter-field,
.generic-toolbar > .tenant-list-filter,
.generic-toolbar > .timetable-large-select,
.list-toolbar > .tenant-list-filter,
.schools-toolbar .tenant-list-filter,
.permissions-toolbar > .permissions-filter-field,
.timeline-filter-row > .filter-with-clear,
.timeline-filter-row > .permissions-filter-field,
.timeline-filter-row > .search-select,
.timeline-filter-row > .timeline-filter-field,
.attendance-report-toolbar > .attendance-filter-field,
.attendance-report-toolbar > .filter-with-clear {
    flex: 1 1 13.5rem !important;
    max-width: 24rem !important;
    min-width: 13.5rem !important;
    order: 2 !important;
}

.generic-toolbar > .grid-export,
.generic-toolbar > .btn.icon-only,
.list-toolbar > .grid-export,
.list-toolbar > .btn.icon-only,
.schools-toolbar .grid-export,
.schools-toolbar .btn.icon-only,
.notifications-toolbar .grid-export,
.notifications-toolbar .btn.icon-only,
.permissions-toolbar > .grid-export,
.permissions-toolbar > .btn.icon-only,
.attendance-report-toolbar > .grid-export,
.attendance-report-toolbar > .btn.icon-only,
.timeline-filter-row > .grid-export,
.timeline-filter-row > .btn.icon-only,
.toolbar-search-export > .grid-export,
.toolbar-search-export > .btn.icon-only {
    flex: 0 0 auto !important;
    order: 50 !important;
}

.generic-toolbar > .view-toggle,
.list-toolbar > .view-toggle,
.schools-toolbar .view-toggle,
.timeline-filter-row > .view-toggle {
    flex: 0 0 auto !important;
    order: 60 !important;
}

.btn.icon-only,
.row-action.icon-only {
    align-items: center !important;
    aspect-ratio: 1 / 1;
    display: inline-flex !important;
    justify-content: center !important;
    min-height: 2.35rem !important;
    min-width: 2.35rem !important;
    padding: .45rem !important;
}

.list-footer {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .75rem !important;
    justify-content: space-between !important;
}

.grid-footer-controls {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .5rem !important;
}

.grid-footer-controls .search-select {
    flex: 0 0 10.5rem !important;
    min-width: 10.5rem !important;
}

[dir="rtl"] .generic-toolbar,
[dir="rtl"] .list-toolbar,
[dir="rtl"] .schools-toolbar,
[dir="rtl"] .notifications-toolbar,
[dir="rtl"] .permissions-toolbar,
[dir="rtl"] .attendance-report-toolbar,
[dir="rtl"] .timeline-toolbar,
[dir="rtl"] .timeline-filter-row {
    direction: rtl !important;
}

[dir="rtl"] .generic-toolbar > .grid-export,
[dir="rtl"] .generic-toolbar > .btn.icon-only,
[dir="rtl"] .list-toolbar > .grid-export,
[dir="rtl"] .list-toolbar > .btn.icon-only,
[dir="rtl"] .schools-toolbar .grid-export,
[dir="rtl"] .schools-toolbar .btn.icon-only,
[dir="rtl"] .notifications-toolbar .grid-export,
[dir="rtl"] .notifications-toolbar .btn.icon-only,
[dir="rtl"] .permissions-toolbar > .grid-export,
[dir="rtl"] .permissions-toolbar > .btn.icon-only,
[dir="rtl"] .attendance-report-toolbar > .grid-export,
[dir="rtl"] .attendance-report-toolbar > .btn.icon-only,
[dir="rtl"] .timeline-filter-row > .grid-export,
[dir="rtl"] .timeline-filter-row > .btn.icon-only {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (max-width: 760px) {
    .generic-toolbar > .search-box,
    .list-toolbar > .search-box,
    .schools-toolbar .search-box,
    .notifications-toolbar .search-box,
    .permissions-search-field,
    .timeline-toolbar > .search-box,
    .toolbar-search-export > .search-box,
    .generic-toolbar > .permissions-filter-field,
    .generic-toolbar > .tenant-list-filter,
    .generic-toolbar > .timetable-large-select,
    .list-toolbar > .tenant-list-filter,
    .schools-toolbar .tenant-list-filter,
    .permissions-toolbar > .permissions-filter-field,
    .timeline-filter-row > .filter-with-clear,
    .timeline-filter-row > .permissions-filter-field,
    .timeline-filter-row > .search-select,
    .timeline-filter-row > .timeline-filter-field,
    .attendance-report-toolbar > .attendance-filter-field,
    .attendance-report-toolbar > .filter-with-clear {
        flex-basis: 100% !important;
        max-width: none !important;
        min-width: 100% !important;
    }

    .list-footer {
        align-items: stretch !important;
        flex-direction: column !important;
    }
}

/* Business timeline: keep the search area clean and aligned with the grid filters. */
.timeline-toolbar {
    background: var(--surface) !important;
    gap: .85rem !important;
}

.timeline-toolbar > .timeline-search-row {
    align-items: center !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 1px 2px color-mix(in srgb,var(--text) 4%,transparent) !important;
    display: flex !important;
    min-height: var(--control-height) !important;
    padding: 0 .7rem !important;
    width: 100% !important;
}

.timeline-toolbar > .timeline-search-row input {
    background: transparent !important;
    border: 0 !important;
    color: var(--text) !important;
    min-height: calc(var(--control-height) - 2px) !important;
    outline: 0 !important;
    padding: 0 !important;
}

.timeline-toolbar > .timeline-search-row:focus-within {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 .15rem color-mix(in srgb,var(--accent) 18%,transparent) !important;
}

.timeline-filter-row {
    align-items: end !important;
    gap: .75rem !important;
}

.timeline-filter-row > .filter-with-clear,
.timeline-filter-row > .search-select,
.timeline-filter-row > .timeline-filter-field {
    flex: 1 1 15rem !important;
    max-width: none !important;
    min-width: 14rem !important;
}

.timeline-filter-row > .grid-export {
    margin-left: auto !important;
}

[dir="rtl"] .timeline-filter-row > .grid-export {
    margin-left: 0 !important;
    margin-right: auto !important;
}

@media (max-width: 980px) {
    .timeline-filter-row > .filter-with-clear,
    .timeline-filter-row > .search-select,
    .timeline-filter-row > .timeline-filter-field {
        flex-basis: calc(50% - .75rem) !important;
        min-width: min(100%,14rem) !important;
    }
}

/* Final mobile layer: make the application usable on phones without changing desktop grids. */
@media (max-width: 900px) {
    html,
    body,
    #app,
    .page-shell {
        max-width: 100%;
        overflow-x: hidden;
    }

    .page-shell {
        display: block !important;
        min-height: 100dvh;
        width: 100% !important;
    }

    .topbar {
        align-items: center !important;
        gap: .45rem !important;
        min-height: 3.35rem !important;
        overflow: visible !important;
        padding: .45rem .75rem !important;
        position: sticky;
        top: 0;
        z-index: 75;
    }

    .mobile-menu-toggle {
        display: inline-flex !important;
        flex: 0 0 auto;
    }

    .topbar-notification-menu,
    .topbar-language-dropdown {
        max-width: calc(100vw - 1rem) !important;
        min-width: min(22rem,calc(100vw - 1rem)) !important;
        position: fixed !important;
        right: .5rem !important;
        top: 3.8rem !important;
        width: calc(100vw - 1rem) !important;
    }

    [dir="rtl"] .topbar-notification-menu,
    [dir="rtl"] .topbar-language-dropdown {
        left: .5rem !important;
        right: auto !important;
    }

    .main-content {
        padding: .9rem !important;
        width: 100% !important;
    }

    .content-inner {
        min-width: 0 !important;
        width: 100% !important;
    }

    .page-header,
    .page-header-with-alert {
        display: grid !important;
        gap: .75rem !important;
        grid-template-columns: 1fr !important;
        margin-bottom: .85rem !important;
    }

    .page-header h1 {
        font-size: clamp(1.35rem,6vw,1.75rem) !important;
        line-height: 1.12 !important;
    }

    .page-header p {
        font-size: .875rem !important;
    }

    .page-actions,
    .surface-heading,
    .tenant-required-alert,
    .session-bulk-head {
        align-items: stretch !important;
        display: grid !important;
        gap: .6rem !important;
        grid-template-columns: 1fr !important;
        justify-content: stretch !important;
    }

    .page-actions .btn,
    .surface-heading .btn,
    .tenant-required-alert .btn,
    .session-bulk-head .btn {
        justify-content: center !important;
        width: 100% !important;
    }

    .surface,
    .students-surface,
    .schools-surface,
    .tenant-list,
    .generic-page,
    .technical-logs-page,
    .timeline-page {
        border-radius: calc(var(--radius,4px) + .15rem) !important;
        overflow: hidden !important;
    }

    .generic-toolbar,
    .list-toolbar,
    .schools-toolbar,
    .notifications-toolbar,
    .permissions-toolbar,
    .attendance-report-toolbar,
    .timeline-toolbar,
    .timeline-filter-row,
    .toolbar-search-export {
        align-items: stretch !important;
        display: grid !important;
        gap: .65rem !important;
        grid-template-columns: 1fr !important;
        padding: .85rem !important;
        width: 100% !important;
    }

    .generic-toolbar > *,
    .list-toolbar > *,
    .schools-toolbar > *,
    .notifications-toolbar > *,
    .permissions-toolbar > *,
    .attendance-report-toolbar > *,
    .timeline-toolbar > *,
    .timeline-filter-row > *,
    .toolbar-search-export > * {
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .search-box,
    .timeline-toolbar > .timeline-search-row,
    .topbar-search,
    .search-select,
    .search-select-toggle,
    .timeline-filter-field,
    .timeline-filter-field input,
    .record-field,
    .record-field input,
    .record-field textarea,
    .record-field .search-select-toggle {
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .grid-export,
    .generic-toolbar > .grid-export,
    .list-toolbar > .grid-export,
    .schools-toolbar .grid-export,
    .notifications-toolbar .grid-export,
    .permissions-toolbar > .grid-export,
    .attendance-report-toolbar > .grid-export,
    .timeline-filter-row > .grid-export,
    .toolbar-search-export > .grid-export {
        margin: 0 !important;
        width: 100% !important;
    }

    .grid-export-toggle,
    .grid-export > .btn,
    .view-toggle,
    .btn:not(.icon-only) {
        justify-content: center !important;
        min-height: 2.55rem !important;
        width: 100%;
    }

    .btn.icon-only,
    .row-action.icon-only,
    .topbar-icon-button,
    .topbar-theme-button.icon-only,
    .topbar-language-button,
    .topbar-logout.icon-only {
        min-height: 2.45rem !important;
        min-width: 2.45rem !important;
    }

    .view-toggle {
        display: grid !important;
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    .table-wrap {
        border-radius: 0 !important;
        overflow-x: auto !important;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
    }

    .tabler-table {
        min-width: max-content !important;
        width: 100% !important;
    }

    .tabler-table th,
    .tabler-table td {
        padding: .72rem .85rem !important;
        white-space: nowrap !important;
    }

    .tabler-table td .row-actions {
        flex-wrap: nowrap !important;
        gap: .35rem !important;
    }

    .list-footer {
        align-items: stretch !important;
        display: grid !important;
        gap: .75rem !important;
        grid-template-columns: 1fr !important;
        padding: .85rem !important;
    }

    .grid-footer-controls {
        display: grid !important;
        gap: .5rem !important;
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
        width: 100% !important;
    }

    .grid-footer-controls .btn,
    .grid-footer-controls .search-select,
    .grid-footer-controls .search-select-toggle,
    .grid-footer-controls .page-number {
        justify-content: center !important;
        min-width: 0 !important;
        text-align: center !important;
        width: 100% !important;
    }

    .record-form-page,
    .record-form-grid {
        padding: .85rem !important;
    }

    .record-form-grid,
    .settings-summary,
    .settings-grid,
    .language-picker-row,
    .dashboard-board,
    .metric-grid,
    .school-grid,
    .tenant-rows,
    .generic-card-grid,
    .notification-detail-grid,
    .audit-detail-grid {
        grid-template-columns: 1fr !important;
    }

    .record-form-actions {
        bottom: 0;
        background: color-mix(in srgb,var(--surface) 94%,transparent);
        border-top: 1px solid var(--border);
        display: grid !important;
        gap: .55rem !important;
        grid-template-columns: 1fr !important;
        margin: 1rem -.85rem -.85rem !important;
        padding: .75rem .85rem calc(.75rem + env(safe-area-inset-bottom)) !important;
        position: sticky;
        z-index: 40;
    }

    .record-form-actions .btn {
        justify-content: center !important;
        width: 100% !important;
    }
}

@media (max-width: 520px) {
    .main-content {
        padding: .65rem !important;
    }

    .topbar {
        padding-inline: .55rem !important;
    }

    .topbar-user {
        padding: .25rem !important;
    }

    .topbar-user-text {
        display: none !important;
    }

    .page-alert,
    .db-alert,
    .auth-error {
        font-size: .8125rem !important;
        padding: .7rem .8rem !important;
    }

    .generic-toolbar,
    .list-toolbar,
    .schools-toolbar,
    .notifications-toolbar,
    .permissions-toolbar,
    .attendance-report-toolbar,
    .timeline-toolbar,
    .timeline-filter-row {
        padding: .7rem !important;
    }

    .grid-footer-controls {
        grid-template-columns: 1fr !important;
    }

    .tabler-table th,
    .tabler-table td {
        padding: .65rem .75rem !important;
    }

    .language-grid,
    .theme-settings-panel.compact .theme-options,
    .theme-settings-panel.compact .theme-swatches,
    .theme-settings-panel.compact .theme-radius-list {
        grid-template-columns: 1fr !important;
    }
}

/* Responsive sidebar correction: keep the left navigation discoverable. */
@media (min-width: 641px) and (max-width: 900px) {
    .page-shell {
        display: grid !important;
        grid-template-areas:
            "sidebar topbar"
            "sidebar main"
            "sidebar footer" !important;
        grid-template-columns: 15.5rem minmax(0,1fr) !important;
        grid-template-rows: 3.35rem 1fr auto !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    .sidebar {
        grid-area: sidebar !important;
        height: 100dvh !important;
        left: auto !important;
        max-height: 100dvh !important;
        max-width: none !important;
        position: sticky !important;
        top: 0 !important;
        transform: none !important;
        width: auto !important;
        z-index: 70 !important;
    }

    .topbar {
        grid-area: topbar !important;
    }

    .main-content {
        grid-area: main !important;
        overflow: auto !important;
    }

    .footer {
        grid-area: footer !important;
    }

    .mobile-menu-toggle,
    .mobile-sidebar-close,
    .mobile-sidebar-backdrop {
        display: none !important;
    }
}

@media (max-width: 640px) {
    .page-shell {
        padding-left: 0 !important;
    }

    [dir="rtl"].page-shell {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .sidebar {
        background: var(--tblr-menu-bg) !important;
        border-right: 1px solid var(--tblr-menu-border) !important;
        height: 100dvh !important;
        left: 0 !important;
        max-width: min(88vw,20rem) !important;
        min-width: 0 !important;
        overflow-y: auto !important;
        padding: 1rem .75rem !important;
        position: fixed !important;
        top: 0 !important;
        transform: translateX(-105%) !important;
        transition: transform .22s ease !important;
        width: min(88vw,20rem) !important;
        z-index: 120 !important;
    }

    [dir="rtl"] .sidebar {
        border-left: 1px solid var(--tblr-menu-border) !important;
        border-right: 0 !important;
        left: auto !important;
        right: 0 !important;
        transform: translateX(105%) !important;
    }

    .sidebar.mobile-open {
        box-shadow: .75rem 0 2rem rgba(24,36,51,.22) !important;
        max-width: min(88vw,20rem) !important;
        overflow-y: auto !important;
        padding: 1rem .75rem !important;
        transform: translateX(0) !important;
        width: min(88vw,20rem) !important;
        z-index: 120 !important;
    }

    [dir="rtl"] .sidebar.mobile-open {
        box-shadow: -.75rem 0 2rem rgba(24,36,51,.22) !important;
    }

    .mobile-menu-toggle {
        display: inline-flex !important;
    }

    .mobile-sidebar-backdrop {
        left: 0 !important;
        width: 100% !important;
    }

    [dir="rtl"] .mobile-sidebar-backdrop {
        left: 0 !important;
        right: 0 !important;
    }
}

/* Mobile grid cards: fewer visible fields, no squeezed desktop table. */
@media (max-width: 640px) {
    .table-wrap {
        overflow: visible !important;
    }

    .tabler-table:not(.export-only) {
        border-collapse: separate !important;
        border-spacing: 0 .7rem !important;
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .tabler-table:not(.export-only) thead {
        display: none !important;
    }

    .tabler-table:not(.export-only) tbody {
        display: grid !important;
        gap: .6rem !important;
        width: 100% !important;
    }

    .tabler-table:not(.export-only) tr {
        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
        border-radius: calc(var(--radius,4px) + .25rem) !important;
        box-shadow: 0 .2rem .65rem color-mix(in srgb,var(--text) 5%,transparent) !important;
        display: grid !important;
        gap: .5rem .75rem !important;
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        padding: .65rem .7rem !important;
        width: 100% !important;
    }

    .tabler-table:not(.export-only) tr:has(.generic-grid-state),
    .tabler-table:not(.export-only) tr:has(.grid-inline-state),
    .tabler-table:not(.export-only) tr:has(.list-state) {
        display: block !important;
        padding: 0 !important;
    }

    .tabler-table:not(.export-only) td {
        align-items: flex-start !important;
        border: 0 !important;
        display: grid !important;
        gap: .12rem !important;
        justify-content: start !important;
        min-width: 0 !important;
        padding: 0 !important;
        text-align: start !important;
        white-space: normal !important;
        width: 100% !important;
        word-break: break-word !important;
    }

    .tabler-table:not(.export-only) td[colspan],
    .tabler-table:not(.export-only) td:has(.generic-grid-state),
    .tabler-table:not(.export-only) td:has(.grid-inline-state),
    .tabler-table:not(.export-only) td:has(.list-state) {
        display: block !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .tabler-table:not(.export-only) td[colspan]::before,
    .tabler-table:not(.export-only) td:has(.generic-grid-state)::before,
    .tabler-table:not(.export-only) td:has(.grid-inline-state)::before,
    .tabler-table:not(.export-only) td:has(.list-state)::before {
        display: none !important;
    }

    .tabler-table:not(.export-only) .generic-grid-state,
    .tabler-table:not(.export-only) .grid-inline-state,
    .tabler-table:not(.export-only) .list-state {
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        min-height: 11rem !important;
        padding: 1.5rem 1rem !important;
        text-align: center !important;
        width: 100% !important;
    }

    .tabler-table:not(.export-only) td::before {
        color: var(--muted);
        content: attr(data-label);
        display: block;
        flex: none;
        font-size: .66rem;
        font-weight: 700;
        letter-spacing: .025em;
        line-height: 1.2;
        text-align: start;
        text-transform: uppercase;
    }

    .tabler-table:not(.export-only) td:not([data-label])::before,
    .tabler-table:not(.export-only) td[data-label=""]::before {
        display: none;
    }

    .tabler-table:not(.export-only) td:first-child {
        color: var(--text) !important;
        font-size: .95rem !important;
        font-weight: 650 !important;
        grid-column: 1 / -1 !important;
        padding-bottom: .05rem !important;
    }

    .tabler-table:not(.export-only) td:nth-child(n+5):not(:last-child):not(.grid-card-actions):not(.grid-selection-column) {
        display: none !important;
    }

    .tabler-table:not(.export-only) td.grid-card-actions,
    .tabler-table:not(.export-only) td.row-actions,
    .tabler-table:not(.export-only) td:has(> .row-actions),
    .tabler-table:not(.export-only) td:has(> .notification-actions) {
        border-top: 1px solid var(--border) !important;
        grid-column: 1 / -1 !important;
        justify-content: flex-end !important;
        margin-top: .15rem !important;
        padding-top: .5rem !important;
    }

    .tabler-table:not(.export-only) td.grid-card-actions::before,
    .tabler-table:not(.export-only) td.row-actions::before,
    .tabler-table:not(.export-only) td:has(> .row-actions)::before,
    .tabler-table:not(.export-only) td:has(> .notification-actions)::before {
        display: none !important;
    }

    .tabler-table:not(.export-only) .row-actions,
    .tabler-table:not(.export-only) .notification-actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: .45rem !important;
        justify-content: flex-end !important;
        width: 100% !important;
    }

    .tabler-table:not(.export-only) .row-action.icon-only,
    .tabler-table:not(.export-only) .grid-icon-action {
        min-height: 2.35rem !important;
        min-width: 2.35rem !important;
    }

    .tabler-table:not(.export-only) .status-badge,
    .tabler-table:not(.export-only) .status-pill,
    .tabler-table:not(.export-only) .attendance-value,
    .tabler-table:not(.export-only) .boolean-switch-readonly {
        justify-self: end !important;
        margin-inline-start: auto !important;
        max-width: 100%;
    }

    .tabler-table:not(.export-only) td > .status-badge,
    .tabler-table:not(.export-only) td > .status-pill,
    .tabler-table:not(.export-only) td > .attendance-value,
    .tabler-table:not(.export-only) td > .boolean-switch-readonly {
        display: inline-flex !important;
        justify-content: center !important;
        place-self: start end !important;
    }

    .tabler-table:not(.export-only) td:has(> .status-badge),
    .tabler-table:not(.export-only) td:has(> .status-pill),
    .tabler-table:not(.export-only) td:has(> .attendance-value),
    .tabler-table:not(.export-only) td:has(> .boolean-switch-readonly) {
        justify-content: end !important;
        justify-items: end !important;
        text-align: end !important;
    }

    .tabler-table:not(.export-only) td:has(> .status-badge)::before,
    .tabler-table:not(.export-only) td:has(> .status-pill)::before,
    .tabler-table:not(.export-only) td:has(> .attendance-value)::before,
    .tabler-table:not(.export-only) td:has(> .boolean-switch-readonly)::before {
        justify-self: end !important;
        text-align: end !important;
    }

    [dir="rtl"] .tabler-table:not(.export-only) td {
        text-align: start !important;
    }

    [dir="rtl"] .tabler-table:not(.export-only) td::before {
        text-align: start;
    }

    [dir="rtl"] .tabler-table:not(.export-only) td:has(> .status-badge),
    [dir="rtl"] .tabler-table:not(.export-only) td:has(> .status-pill),
    [dir="rtl"] .tabler-table:not(.export-only) td:has(> .attendance-value),
    [dir="rtl"] .tabler-table:not(.export-only) td:has(> .boolean-switch-readonly) {
        justify-content: end !important;
        justify-items: end !important;
        text-align: end !important;
    }

    [dir="rtl"] .tabler-table:not(.export-only) td > .status-badge,
    [dir="rtl"] .tabler-table:not(.export-only) td > .status-pill,
    [dir="rtl"] .tabler-table:not(.export-only) td > .attendance-value,
    [dir="rtl"] .tabler-table:not(.export-only) td > .boolean-switch-readonly {
        margin-inline-end: 0 !important;
        margin-inline-start: auto !important;
        place-self: start end !important;
    }
}

/* Mobile pagination footer: compact, readable and touch-friendly. */
@media (max-width: 640px) {
    .list-footer {
        background: var(--surface) !important;
        border-top: 1px solid var(--border) !important;
        border-radius: 0 0 calc(var(--radius,4px) + .15rem) calc(var(--radius,4px) + .15rem) !important;
        display: grid !important;
        gap: .65rem !important;
        grid-template-columns: 1fr !important;
        overflow: visible !important;
        padding: .75rem !important;
        position: relative !important;
        z-index: 45 !important;
    }

    .list-footer > span {
        background: color-mix(in srgb,var(--accent) 6%,var(--surface)) !important;
        border: 1px solid color-mix(in srgb,var(--accent) 18%,var(--border)) !important;
        border-radius: var(--radius,4px) !important;
        color: var(--muted) !important;
        display: block !important;
        font-size: .78rem !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        padding: .55rem .65rem !important;
        text-align: center !important;
        width: 100% !important;
    }

    .grid-footer-controls {
        align-items: center !important;
        display: grid !important;
        gap: .5rem !important;
        grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
        overflow: visible !important;
        position: relative !important;
        width: 100% !important;
    }

    .grid-footer-controls > .search-select {
        grid-column: 1 / -1 !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .grid-footer-controls .search-select-toggle {
        justify-content: space-between !important;
        min-height: 2.35rem !important;
        padding: .5rem .65rem !important;
        width: 100% !important;
    }

    .grid-footer-controls .search-select-menu {
        bottom: calc(100% + .4rem) !important;
        max-height: min(16rem,52dvh) !important;
        overflow: auto !important;
        top: auto !important;
        z-index: 4000 !important;
    }

    .grid-footer-controls .btn {
        border-radius: var(--radius,4px) !important;
        justify-content: center !important;
        min-height: 2.35rem !important;
        min-width: 0 !important;
        padding: .48rem .55rem !important;
        width: 100% !important;
    }

    .grid-footer-controls .page-number {
        align-items: center !important;
        background: var(--bg) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius,4px) !important;
        color: var(--text) !important;
        display: inline-flex !important;
        font-size: .82rem !important;
        font-weight: 700 !important;
        justify-content: center !important;
        min-height: 2.35rem !important;
        min-width: 4.25rem !important;
        padding: .45rem .6rem !important;
        text-align: center !important;
        white-space: nowrap !important;
        width: auto !important;
    }

    [dir="rtl"] .list-footer > span {
        direction: rtl;
    }
}

@media (max-width: 380px) {
    .grid-footer-controls {
        gap: .4rem !important;
        grid-template-columns: minmax(0,1fr) 3.75rem minmax(0,1fr) !important;
    }

    .grid-footer-controls .btn {
        font-size: .78rem !important;
        padding-inline: .35rem !important;
    }

    .grid-footer-controls .page-number {
        font-size: .76rem !important;
        min-width: 3.75rem !important;
        padding-inline: .35rem !important;
    }
}