body.app-shell {
    --app-primary: var(--primary-color);
    --app-secondary: var(--secondary-color);
    --app-accent: #FFD166;
    --app-bg: #f8fafc;
    --app-surface: #ffffff;
    --app-surface-muted: #f8fafc;
    --app-surface-strong: #f1f5f9;
    --app-text: #1d3557;
    --app-text-soft: #64748b;
    --app-text-muted: #94a3b8;
    --app-border: #d9e2ec;
    --app-danger: #e11d48;
    --app-success: #059669;
    --app-shadow: 0 14px 38px rgba(15, 23, 42, 0.08);
    --app-primary-soft: #f8e9eb;
    --app-primary-faint: #fdf1f2;
    --app-primary-strong: var(--app-primary);
    --app-secondary-soft: #eef6fb;
    --app-sidebar-width: 264px;
    --app-header-height: 64px;
    --app-bottom-nav-height: 72px;
    margin: 0;
    min-height: 100vh;
    background: var(--app-bg);
    color: var(--app-text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

@supports (color: color-mix(in srgb, white 50%, black)) {
    body.app-shell {
        --app-border: color-mix(in srgb, var(--app-primary) 24%, #d9e2ec);
        --app-primary-soft: color-mix(in srgb, var(--app-primary) 20%, #fff);
        --app-primary-faint: color-mix(in srgb, var(--app-primary) 12%, #fff);
        --app-primary-strong: color-mix(in srgb, var(--app-primary) 78%, #111827);
        --app-secondary-soft: color-mix(in srgb, var(--app-secondary) 12%, #fff);
    }
}

html[data-app-theme="dark"] body.app-shell {
    --app-accent: #fbbf24;
    --app-bg: #0b1120;
    --app-surface: #111827;
    --app-surface-muted: #172033;
    --app-surface-strong: #1f2937;
    --app-text: #e5eefb;
    --app-text-soft: #a7b4c8;
    --app-text-muted: #7f8da3;
    --app-border: #33435b;
    --app-danger: #fb7185;
    --app-success: #34d399;
    --app-shadow: 0 18px 44px rgba(0, 0, 0, .28);
    --app-primary-soft: rgba(230, 57, 70, .26);
    --app-primary-faint: rgba(230, 57, 70, .18);
    --app-primary-strong: #ff7a87;
    --app-secondary-soft: rgba(69, 123, 157, .22);
}

@supports (color: color-mix(in srgb, white 50%, black)) {
    html[data-app-theme="dark"] body.app-shell {
        --app-border: color-mix(in srgb, var(--app-primary) 28%, #273548);
        --app-primary-soft: color-mix(in srgb, var(--app-primary) 32%, #111827);
        --app-primary-faint: color-mix(in srgb, var(--app-primary) 20%, #111827);
        --app-primary-strong: color-mix(in srgb, var(--app-primary) 62%, #fff);
        --app-secondary-soft: color-mix(in srgb, var(--app-secondary) 24%, #111827);
    }
}

body.app-shell a:not(.btn) {
    color: inherit;
}

.min-w-0 {
    min-width: 0;
}

.app-shell-frame {
    display: grid;
    grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
}

.app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--app-surface);
    border-right: 1px solid var(--app-border);
    z-index: 1020;
}

.app-brand {
    min-height: var(--app-header-height);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--app-border);
    text-decoration: none;
}

.app-brand-mark,
.app-avatar,
.app-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.app-brand-mark {
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: .75rem;
    background: var(--app-primary);
    color: #fff;
    box-shadow: 0 10px 24px rgba(230, 57, 70, 0.22);
}

.app-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.app-brand-title {
    font-size: .98rem;
    font-weight: 800;
    color: var(--app-text);
    line-height: 1.15;
}

.app-brand-subtitle {
    margin-top: .15rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--app-text-muted);
}

.app-sidebar-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .85rem .75rem;
}

.app-nav-group {
    margin-bottom: 1rem;
}

.app-nav-group:not(:has(.app-nav-link)) {
    display: none;
}

.app-nav-context-label {
    margin: .35rem .75rem 1rem;
    padding: .55rem .7rem;
    border: 1px solid var(--app-border);
    border-radius: .55rem;
    color: var(--app-primary-strong);
    background: var(--app-primary-faint);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.app-nav-heading {
    padding: 0 .75rem .35rem;
    font-size: .68rem;
    font-weight: 800;
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.app-nav-list {
    display: grid;
    gap: .15rem;
}

.app-nav-link {
    display: flex;
    align-items: center;
    gap: .72rem;
    min-height: 38px;
    padding: .55rem .7rem;
    border-radius: .65rem;
    color: var(--app-text-soft);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 650;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.app-nav-link:hover,
.app-nav-link:focus {
    background: var(--app-primary-faint);
    color: var(--app-primary-strong) !important;
}

.app-nav-link.is-active {
    background: var(--app-primary-soft);
    color: var(--app-primary-strong) !important;
}

.app-nav-icon,
.app-action-icon,
.app-bottom-icon {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
}

.app-nav-icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-nav-link .navbar-message-badge,
.app-top-actions .navbar-message-badge,
.app-bottom-link .navbar-message-badge {
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .32rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--app-danger);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
}

.app-nav-link.has-unread-messages,
.app-bottom-link.has-unread-messages {
    color: var(--app-primary-strong);
}

.app-sidebar-footer {
    padding: .8rem;
    border-top: 1px solid var(--app-border);
}

.app-legal-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .65rem;
    color: var(--app-text-muted);
    font-size: .72rem;
}

.app-legal-links a {
    color: inherit;
    text-decoration: none;
}

.app-legal-links a:hover,
.app-legal-links a:focus {
    color: var(--app-primary-strong);
}

.app-legal-links-sidebar {
    margin-top: .45rem;
    padding: 0 .55rem;
}

.app-user-card {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .55rem;
    border: 0;
    border-radius: .75rem;
    background: transparent;
    color: var(--app-text);
    text-decoration: none;
}

.app-user-card:hover,
.app-user-card:focus {
    background: var(--app-surface-strong);
}

.app-avatar {
    width: 38px;
    height: 38px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--app-primary);
    color: #fff;
    font-size: .85rem;
    font-weight: 800;
}

.app-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-user-meta {
    min-width: 0;
    flex: 1 1 auto;
    text-align: left;
}

.app-user-name,
.app-user-role {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-user-name {
    font-size: .88rem;
    font-weight: 750;
    color: var(--app-text);
}

.app-user-role {
    margin-top: .05rem;
    font-size: .72rem;
    color: var(--app-text-muted);
}

.app-main-shell {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1010;
    min-height: var(--app-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1.35rem;
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--app-border);
    backdrop-filter: blur(12px);
}

.app-topbar-title {
    min-width: 0;
}

.app-page-kicker {
    font-size: .72rem;
    font-weight: 800;
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.app-page-title {
    margin-top: .08rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--app-text);
}

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

.app-icon-button {
    position: relative;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-border);
    border-radius: .75rem;
    background: var(--app-surface);
    color: var(--app-text-soft);
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.app-icon-button:hover,
.app-icon-button:focus {
    border-color: var(--app-primary);
    color: var(--app-primary-strong);
    background: var(--app-primary-faint);
}

.app-theme-toggle {
    position: relative;
}

.app-theme-icon {
    display: inline-flex;
}

.app-theme-icon-sun {
    display: none;
}

html[data-app-theme="dark"] .app-theme-icon-moon {
    display: none;
}

html[data-app-theme="dark"] .app-theme-icon-sun {
    display: inline-flex;
}

.app-icon-button .xyz-notification-badge {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 1.15rem;
    height: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .32rem;
    border-radius: 999px;
    background: var(--app-danger) !important;
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
}

.app-content {
    min-height: auto;
    flex: 1 1 auto;
}

.app-main {
    width: 100%;
    max-width: 1320px;
    padding: 1.35rem;
    margin: 0 auto;
}

.app-public-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-public-header {
    min-height: var(--app-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.2rem;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border);
}

.app-public-main {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.35rem;
}

.app-mobile-menu-button {
    display: none;
}

.app-mobile-bottom-nav {
    display: none;
}

.app-mobile-offcanvas {
    --bs-offcanvas-width: min(360px, 92vw);
    background: var(--app-surface);
    color: var(--app-text);
}

.app-mobile-offcanvas .offcanvas-header {
    border-bottom: 1px solid var(--app-border);
}

.app-mobile-offcanvas .btn-close {
    box-shadow: none;
}

.app-mobile-menu-footer {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--app-border);
}

.app-legal-links-mobile {
    padding: 0 .75rem .55rem;
}

.app-public-footer {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.35rem 1.2rem;
}

.app-public-footer .app-legal-links {
    justify-content: center;
}

body.app-shell .dropdown-menu {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: var(--app-shadow) !important;
}

body.app-shell .dropdown-item {
    color: var(--app-text-soft) !important;
}

body.app-shell .dropdown-item:hover,
body.app-shell .dropdown-item:focus {
    color: var(--app-text) !important;
    background: var(--app-surface-strong) !important;
}

body.app-shell .notification-dropdown-menu {
    color: var(--app-text);
}

body.app-shell .notification-dropdown-menu .border-secondary {
    border-color: var(--app-border) !important;
}

body.app-shell .notification-dropdown-menu .text-light {
    color: var(--app-text) !important;
}

body.app-shell .notification-dropdown-menu .text-white-50 {
    color: var(--app-text-soft) !important;
}

body.app-shell .notification-dropdown-menu .list-group-item:hover,
body.app-shell .notification-dropdown-menu .list-group-item:focus {
    background: var(--app-surface-strong) !important;
}

body.app-shell .card,
body.app-shell .card-surface {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
}

body.app-shell .card .card-header,
body.app-shell .card .card-body,
body.app-shell .card .card-footer {
    background: transparent !important;
    color: inherit !important;
    border-color: var(--app-border) !important;
}

body.app-shell .app-main [class*="-detail-layout"] .card-surface,
body.app-shell .app-main .class-page > .card-surface {
    padding: 1rem !important;
}

body.app-shell .student-row-actions {
    align-items: center;
}

body.app-shell .student-row-actions form {
    display: inline-flex !important;
    margin: 0;
}

body.app-shell .student-row-actions .btn {
    min-width: 0;
    padding-inline: .52rem;
    line-height: 1.35;
}

/* Keep card action links and form buttons at the same compact height. */
body.app-shell .app-main :where([class*="-card-actions"], .student-row-actions) {
    align-items: start;
}

body.app-shell .app-main :where([class*="-card-actions"], .student-row-actions) > form {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    margin: 0;
}

body.app-shell .app-main :where([class*="-card-actions"], .student-row-actions) :where(a.btn, button.btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    margin-block: 0;
}

body.app-shell .app-main :where([class*="-card-actions"], .student-row-actions) > form > .btn {
    width: 100%;
}

body.app-shell .form-select,
body.app-shell .form-control {
    background: #fff !important;
    color: var(--app-text) !important;
    border: 1px solid var(--app-border) !important;
}

body.app-shell .form-select:focus,
body.app-shell .form-control:focus {
    border-color: var(--app-primary) !important;
    box-shadow: 0 0 0 .16rem rgba(230, 57, 70, 0.14) !important;
}

body.app-shell .table {
    color: var(--app-text) !important;
}

body.app-shell .table thead th {
    background: var(--app-surface-strong) !important;
    color: var(--app-text) !important;
    border-bottom-color: var(--app-border) !important;
}

body.app-shell .table tbody td,
body.app-shell .table tbody th {
    border-bottom-color: var(--app-border) !important;
}

body.app-shell .btn-primary {
    background: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
    color: #fff !important;
}

body.app-shell .btn-primary:hover,
body.app-shell .btn-primary:focus {
    background: var(--app-primary-strong) !important;
    border-color: var(--app-primary-strong) !important;
}

body.app-shell .text-muted,
body.app-shell .settings-muted {
    color: var(--app-text-soft) !important;
}

@media (max-width: 991.98px) {
    .app-shell-frame {
        display: block;
        min-height: 100vh;
    }

    .app-sidebar {
        display: none;
    }

    .app-topbar {
        min-height: 58px;
        padding: .6rem .85rem;
    }

    .app-topbar-title {
        display: flex;
        align-items: center;
        gap: .65rem;
    }

    .app-page-kicker {
        display: none;
    }

    .app-page-title {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .95rem;
    }

    .app-mobile-menu-button {
        display: inline-flex;
    }

    .app-main {
        padding: 1rem .85rem calc(var(--app-bottom-nav-height) + 1.25rem);
    }

    .app-mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
        height: var(--app-bottom-nav-height);
        min-height: var(--app-bottom-nav-height);
        box-sizing: border-box;
        padding: .35rem;
        background: rgba(255, 255, 255, .96);
        border-top: 1px solid var(--app-border);
        box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.08);
        backdrop-filter: blur(12px);
    }

    .app-bottom-link,
    .app-bottom-button {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .2rem;
        min-width: 0;
        min-height: 58px;
        border: 0;
        border-radius: .8rem;
        background: transparent;
        color: var(--app-text-muted);
        text-decoration: none;
        font-size: .68rem;
        font-weight: 800;
    }

    .app-bottom-link.is-active,
    .app-bottom-link:hover,
    .app-bottom-button:hover {
        color: var(--app-primary-strong);
        background: var(--app-primary-faint);
    }

    .app-bottom-link .navbar-message-badge {
        position: absolute;
        top: .35rem;
        right: 22%;
    }

    .notification-dropdown-menu {
        position: fixed !important;
        top: 62px !important;
        right: .65rem !important;
        left: .65rem !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        transform: none !important;
    }
}

/* Content refresh layer */

body.app-shell .dashboard-page,
body.app-shell .student-page,
body.app-shell .teacher-page,
body.app-shell .class-page,
body.app-shell .branch-page,
body.app-shell .session-page,
body.app-shell .attendance-page,
body.app-shell .finance-page,
body.app-shell .record-page,
body.app-shell .interaction-page,
body.app-shell .progress-page,
body.app-shell .management-page,
body.app-shell .settings-page,
body.app-shell .access-page,
body.app-shell .utility-page {
    color: var(--app-text);
}

body.app-shell h1,
body.app-shell h2,
body.app-shell h3,
body.app-shell h4,
body.app-shell h5,
body.app-shell h6 {
    color: var(--app-text);
    letter-spacing: 0;
}

body.app-shell .dashboard-header h2 {
    font-size: 1.32rem;
    font-weight: 820;
}

body.app-shell .dashboard-welcome,
body.app-shell .dashboard-stat-label,
body.app-shell .dashboard-stat-note,
body.app-shell .dashboard-panel-eyebrow,
body.app-shell .dashboard-info-label,
body.app-shell .dashboard-list-subtitle,
body.app-shell .dashboard-empty,
body.app-shell .dashboard-panel-foot {
    color: var(--app-text-soft);
}

body.app-shell .dashboard-stat-grid {
    gap: .75rem;
}

body.app-shell .dashboard-stat-card,
body.app-shell .dashboard-panel,
body.app-shell .dashboard-mini-panel,
body.app-shell .dashboard-tenant-context,
body.app-shell .dashboard-health-row {
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: .55rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

body.app-shell .dashboard-stat-card {
    min-height: 92px;
    padding: .78rem .82rem .78rem .95rem;
}

body.app-shell .dashboard-stat-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    min-height: 28px;
}

body.app-shell .dashboard-stat-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    border-radius: .65rem;
    background: var(--app-primary-faint);
    color: var(--app-primary-strong);
}

body.app-shell .dashboard-stat-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.app-shell .dashboard-stat-card.accent-teal .dashboard-stat-icon {
    background: #ecfdf5;
    color: #047857;
}

body.app-shell .dashboard-stat-card.accent-amber .dashboard-stat-icon {
    background: #fffbeb;
    color: #b45309;
}

body.app-shell .dashboard-stat-card.accent-rose .dashboard-stat-icon {
    background: #fff1f2;
    color: #be123c;
}

body.app-shell .dashboard-stat-card::before {
    width: 3px;
    background: var(--app-primary);
}

body.app-shell .dashboard-stat-card.accent-teal::before {
    background: #06a77d;
}

body.app-shell .dashboard-stat-card.accent-amber::before {
    background: #f59e0b;
}

body.app-shell .dashboard-stat-card.accent-rose::before {
    background: var(--app-danger);
}

body.app-shell .dashboard-stat-value,
body.app-shell .dashboard-panel-title,
body.app-shell .dashboard-list-title,
body.app-shell .dashboard-info-value {
    color: var(--app-text);
}

body.app-shell .dashboard-panel {
    overflow: hidden;
}

body.app-shell .dashboard-panel-head {
    background: transparent;
    border-bottom: 1px solid rgba(226, 232, 240, .78);
    padding: .72rem .82rem;
}

body.app-shell .dashboard-panel-body {
    background: transparent;
    padding: .78rem .82rem;
}

body.app-shell .dashboard-list-item {
    color: var(--app-text);
    border-bottom: 1px solid rgba(226, 232, 240, .72);
    padding: .58rem .82rem;
}

body.app-shell .dashboard-list-item:hover,
body.app-shell .dashboard-list-item:focus {
    color: var(--app-text);
    background: var(--app-primary-faint);
}

body.app-shell .dashboard-mini-panel.warning {
    background: #fffbeb;
    border-color: #fde68a;
}

body.app-shell .dashboard-mini-panel.success {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

body.app-shell .dashboard-split-row,
body.app-shell .dashboard-panel-foot {
    border-color: var(--app-border);
}

body.app-shell .dashboard-chart-shell canvas {
    color: var(--app-text);
}

body.app-shell .badge-soft {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.45rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 750;
    line-height: 1;
}

body.app-shell .badge-soft-primary {
    background: var(--app-primary-soft);
    border-color: var(--app-primary-soft);
    color: var(--app-primary-strong);
}

body.app-shell .badge-soft-success {
    background: #dcfce7;
    border-color: #bbf7d0;
    color: #166534;
}

body.app-shell .badge-soft-warning {
    background: #fef3c7;
    border-color: #fde68a;
    color: #92400e;
}

body.app-shell .badge-soft-danger {
    background: #ffe4e6;
    border-color: #fecdd3;
    color: #be123c;
}

body.app-shell .badge-soft-muted {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #475569;
}

body.app-shell .dashboard-hero,
body.app-shell .student-profile-hero,
body.app-shell .teacher-profile-hero,
body.app-shell .class-hero,
body.app-shell .branch-hero,
body.app-shell .session-hero,
body.app-shell .attendance-hero,
body.app-shell .finance-hero,
body.app-shell .interaction-hero,
body.app-shell .progress-hero,
body.app-shell .record-hero,
body.app-shell .management-detail-hero,
body.app-shell .settings-profile-hero,
body.app-shell .access-hero,
body.app-shell .utility-hero {
    background: linear-gradient(135deg, var(--app-surface), var(--app-primary-faint)) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: .8rem !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
    color: var(--app-text) !important;
}

body.app-shell .dashboard-hero-title,
body.app-shell .student-profile-hero h1,
body.app-shell .student-profile-name,
body.app-shell .teacher-profile-name,
body.app-shell .class-hero-title,
body.app-shell .branch-hero-title,
body.app-shell .session-hero-title,
body.app-shell .attendance-hero-title,
body.app-shell .finance-hero-title,
body.app-shell .interaction-hero-title,
body.app-shell .progress-hero-title,
body.app-shell .record-hero-title,
body.app-shell .management-detail-title,
body.app-shell .settings-profile-title,
body.app-shell .access-hero-title,
body.app-shell .utility-hero-title {
    color: var(--app-text) !important;
}

body.app-shell .dashboard-hero-copy,
body.app-shell .student-profile-meta,
body.app-shell .teacher-profile-meta,
body.app-shell .class-hero-meta,
body.app-shell .branch-hero-meta,
body.app-shell .session-hero-meta,
body.app-shell .attendance-hero-meta,
body.app-shell .finance-hero-meta,
body.app-shell .interaction-hero-meta,
body.app-shell .progress-hero-meta,
body.app-shell .record-hero-meta,
body.app-shell .management-detail-subtitle,
body.app-shell .settings-profile-subtitle,
body.app-shell .access-hero-copy,
body.app-shell .utility-hero-copy {
    color: var(--app-text-soft) !important;
}

body.app-shell .student-avatar,
body.app-shell .student-profile-avatar,
body.app-shell .teacher-avatar,
body.app-shell .teacher-profile-avatar,
body.app-shell .class-hero-mark,
body.app-shell .branch-hero-mark,
body.app-shell .progress-hero-avatar,
body.app-shell .progress-record-date.hero,
body.app-shell .management-avatar,
body.app-shell .management-detail-avatar,
body.app-shell .session-hero-mark,
body.app-shell .finance-hero-mark,
body.app-shell .interaction-hero-mark,
body.app-shell .record-hero-mark {
    background: var(--app-primary) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 10px 22px rgba(230, 57, 70, 0.18) !important;
}

.profile-avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

body.app-shell .student-list-shell,
body.app-shell .student-form-shell,
body.app-shell .teacher-filter-shell,
body.app-shell .teacher-form-shell,
body.app-shell .teacher-empty-state,
body.app-shell .class-filter-shell,
body.app-shell .class-form-shell,
body.app-shell .class-empty-state,
body.app-shell .branch-form-shell,
body.app-shell .branch-empty-state,
body.app-shell .session-filter-shell,
body.app-shell .session-form-shell,
body.app-shell .session-empty-state,
body.app-shell .attendance-filter-shell,
body.app-shell .attendance-date-shell,
body.app-shell .attendance-empty-state,
body.app-shell .attendance-session-tools,
body.app-shell .finance-filter-shell,
body.app-shell .finance-form-shell,
body.app-shell .finance-panel,
body.app-shell .finance-empty-state,
body.app-shell .record-filter-shell,
body.app-shell .record-panel,
body.app-shell .record-empty-state,
body.app-shell .interaction-filter-shell,
body.app-shell .interaction-form-shell,
body.app-shell .interaction-panel,
body.app-shell .interaction-empty-state,
body.app-shell .progress-filter-shell,
body.app-shell .progress-form-shell,
body.app-shell .progress-empty-state,
body.app-shell .settings-card,
body.app-shell .settings-panel,
body.app-shell .settings-profile-hero,
body.app-shell .settings-form-panel,
body.app-shell .settings-preview-panel,
body.app-shell .settings-metric-card,
body.app-shell .access-hero,
body.app-shell .access-card,
body.app-shell .access-group,
body.app-shell .access-note,
body.app-shell .access-toolbar-panel,
body.app-shell .access-panel,
body.app-shell .management-filter-panel,
body.app-shell .management-table-panel,
body.app-shell .management-detail-panel,
body.app-shell .management-form-panel,
body.app-shell .management-info-panel,
body.app-shell .management-detail-hero,
body.app-shell .utility-panel,
body.app-shell .utility-card,
body.app-shell .utility-filter-panel,
body.app-shell .utility-status-card {
    background: var(--app-surface) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
}

body.app-shell .table-modern,
body.app-shell .table-modern thead th,
body.app-shell .table-modern tbody td,
body.app-shell .table-modern tbody th,
body.app-shell .table-modern tbody td *,
body.app-shell .table-modern tbody th * {
    color: var(--app-text) !important;
}

body.app-shell .table-modern thead th {
    background: #f8fafc !important;
}

body.app-shell .table-modern tbody tr:hover {
    background: var(--app-primary-faint) !important;
}

body.app-shell .form-label,
body.app-shell label,
body.app-shell .label {
    color: var(--app-text);
}

body.app-shell .btn-outline-secondary,
body.app-shell .btn-outline-light {
    color: var(--app-text-soft) !important;
    border-color: var(--app-border) !important;
    background: var(--app-surface) !important;
}

body.app-shell .btn-outline-secondary:hover,
body.app-shell .btn-outline-secondary:focus,
body.app-shell .btn-outline-light:hover,
body.app-shell .btn-outline-light:focus {
    color: var(--app-primary-strong) !important;
    border-color: var(--app-primary) !important;
    background: var(--app-primary-faint) !important;
}

body.app-shell .pagination-modern .page-link,
body.app-shell .branch-pagination .page-link,
body.app-shell .teacher-pagination .page-link,
body.app-shell .session-pagination .page-link,
body.app-shell .attendance-pagination .page-link,
body.app-shell .progress-pagination .page-link,
body.app-shell .interaction-pagination .page-link,
body.app-shell .finance-pagination .page-link,
body.app-shell .management-pagination .page-link {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-soft) !important;
}

body.app-shell .pagination-modern .page-item.active .page-link,
body.app-shell .page-item.active .page-link {
    background: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
    color: #fff !important;
}

body.app-shell .list-group-item,
body.app-shell .accordion-item,
body.app-shell .accordion-button,
body.app-shell .nav-tabs .nav-link {
    color: var(--app-text) !important;
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
}

body.app-shell .accordion-button:not(.collapsed),
body.app-shell .nav-tabs .nav-link.active {
    background: var(--app-primary-faint) !important;
    color: var(--app-primary-strong) !important;
}

/* Broad module normalization: catches legacy dark module classes without touching the shell chrome. */

body.app-shell .app-main :is(
    [class$="-card"],
    [class*="-card "],
    [class$="-panel"],
    [class*="-panel "],
    [class$="-shell"],
    [class*="-shell "],
    [class$="-state"],
    [class*="-state "],
    [class$="-pagination"],
    [class*="-pagination "],
    [class$="-tools"],
    [class*="-tools "],
    [class$="-toolbar"],
    [class*="-toolbar "],
    [class$="-summary"],
    [class*="-summary "],
    [class$="-overview"],
    [class*="-overview "]
) {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
}

body.app-shell .app-main :is(
    [class$="-hero"],
    [class*="-hero "]
) {
    background: linear-gradient(135deg, var(--app-surface), var(--app-primary-faint)) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
}

body.app-shell .app-main :is(
    [class$="-title"],
    [class*="-title "],
    [class$="-name"],
    [class*="-name "],
    [class$="-value"],
    [class*="-value "],
    [class$="-amount"],
    [class*="-amount "]
) {
    color: var(--app-text) !important;
}

body.app-shell .app-main :is(
    [class$="-subtitle"],
    [class*="-subtitle "],
    [class$="-subline"],
    [class*="-subline "],
    [class$="-meta"],
    [class*="-meta "],
    [class$="-note"],
    [class*="-note "],
    [class$="-hint"],
    [class*="-hint "],
    [class$="-muted"],
    [class*="-muted "],
    [class$="-eyebrow"],
    [class*="-eyebrow "],
    [class$="-label"],
    [class*="-label "]
) {
    color: var(--app-text-soft) !important;
}

body.app-shell .app-main :is(
    [class$="-pill"],
    [class*="-pill "],
    [class$="-chip"],
    [class*="-chip "],
    [class$="-tag"],
    [class*="-tag "]
) {
    background: #f1f5f9 !important;
    border: 1px solid var(--app-border) !important;
    color: #475569 !important;
}

body.app-shell .app-main :is(
    [class$="-avatar"],
    [class*="-avatar "],
    [class$="-mark"],
    [class*="-mark "],
    [class$="-initials"],
    [class*="-initials "]
) {
    background: var(--app-primary) !important;
    color: #fff !important;
    border-color: transparent !important;
}

body.app-shell .app-main :is(
    [class$="-icon"],
    [class*="-icon "]
) {
    color: var(--app-primary-strong);
}

body.app-shell .app-main :is(
    [class$="-row"],
    [class*="-row "],
    [class$="-item"],
    [class*="-item "]
) {
    border-color: var(--app-border) !important;
}

body.app-shell .app-main :is(
    [class$="-list"],
    [class*="-list "],
    [class$="-grid"],
    [class*="-grid "]
) > :is(a, button):hover {
    background-color: var(--app-primary-faint) !important;
}

body.app-shell .app-main table:not(.ui-datepicker-calendar) {
    color: var(--app-text) !important;
}

body.app-shell .app-main table:not(.ui-datepicker-calendar) thead th {
    background: #f8fafc !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

body.app-shell .app-main table:not(.ui-datepicker-calendar) tbody td,
body.app-shell .app-main table:not(.ui-datepicker-calendar) tbody th {
    border-color: var(--app-border) !important;
}

body.app-shell .app-main table:not(.ui-datepicker-calendar) tbody tr:hover {
    background: var(--app-primary-faint) !important;
}

body.app-shell .app-main hr {
    border-color: var(--app-border);
    opacity: 1;
}

body.app-shell .app-main .modal-content {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

body.app-shell .app-main .modal-header,
body.app-shell .app-main .modal-footer {
    border-color: var(--app-border) !important;
}

body.app-shell .app-main .alert {
    border-radius: .75rem;
    border-width: 1px;
}

body.app-shell .app-main .alert-info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e3a8a;
}

body.app-shell .app-main .alert-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

body.app-shell .app-main .alert-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

body.app-shell .app-main .alert-danger {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #be123c;
}

body.app-shell .app-main :is(
    .student-overview-card,
    .teacher-overview-card,
    .class-overview-card,
    .branch-overview-card,
    .student-list-shell,
    .teacher-card,
    .class-card,
    .branch-card,
    .teacher-filter-shell,
    .class-filter-shell,
    .student-form-shell,
    .teacher-form-shell,
    .class-form-shell,
    .branch-form-shell
) {
    border-radius: .75rem !important;
    box-shadow: var(--app-shadow) !important;
}

body.app-shell .app-main :is(
    .guardian-card,
    .student-note-card,
    .teacher-roster-card,
    .class-roster-card
) {
    background: #f8fafc !important;
    border-color: var(--app-border) !important;
    box-shadow: none !important;
}

body.app-shell .app-main :is(
    .teacher-pill-success,
    .class-pill-success
) {
    background: #dcfce7 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}

body.app-shell .app-main :is(
    .teacher-pill-muted,
    .class-pill-muted
) {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}

body.app-shell .app-main .student-muted-pill {
    background: var(--app-primary-faint) !important;
    color: var(--app-text) !important;
}

body.app-shell .app-main :is(
    .quick-action-link,
    .teacher-action-link,
    .class-action-link,
    .branch-action-link
) {
    background: #f8fafc !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.app-shell .app-main :is(
    .quick-action-link,
    .teacher-action-link,
    .class-action-link,
    .branch-action-link
):hover,
body.app-shell .app-main :is(
    .quick-action-link,
    .teacher-action-link,
    .class-action-link,
    .branch-action-link
):focus {
    background: var(--app-primary-faint) !important;
    border-color: var(--app-primary) !important;
    color: var(--app-primary-strong) !important;
}

body.app-shell .app-main :is(
    .teacher-stat-row,
    .class-stat-row,
    .branch-stat-row
) {
    background: #f8fafc;
    border-radius: .65rem;
    padding: .55rem .65rem;
}

body.app-shell .app-main :is(
    .session-overview-card,
    .attendance-overview-card,
    .session-card,
    .attendance-session-card,
    .attendance-record-card,
    .session-filter-shell,
    .attendance-date-shell,
    .attendance-filter-shell,
    .session-form-shell,
    .attendance-session-tools,
    .utility-panel,
    .utility-card,
    .utility-filter-panel
) {
    border-radius: .75rem !important;
    box-shadow: var(--app-shadow) !important;
}

body.app-shell .app-main :is(
    .session-note-card,
    .session-toggle-card,
    .session-day-option,
    .attendance-note-preview,
    .attendance-count-grid > div
) {
    background: #f8fafc !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
    box-shadow: none !important;
}

body.app-shell .app-main :is(
    .session-pill-success,
    .attendance-pill-success
) {
    background: #dcfce7 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}

body.app-shell .app-main .session-pill-muted {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}

body.app-shell .app-main :is(
    .session-action-link,
    .attendance-action-link
) {
    background: #f8fafc !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.app-shell .app-main :is(
    .session-action-link,
    .attendance-action-link
):hover,
body.app-shell .app-main :is(
    .session-action-link,
    .attendance-action-link
):focus {
    background: var(--app-primary-faint) !important;
    border-color: var(--app-primary) !important;
    color: var(--app-primary-strong) !important;
}

body.app-shell .app-main :is(
    .session-stat-row,
    .attendance-stat-row
) {
    background: #f8fafc;
    border-radius: .65rem;
    padding: .55rem .65rem;
}

body.app-shell .app-main :is(
    .finance-overview-card,
    .record-overview-card,
    .finance-card,
    .finance-installment-card,
    .finance-student-balance-card,
    .finance-status-card,
    .record-card,
    .document-owner-card,
    .document-file-card,
    .document-missing-card,
    .finance-filter-shell,
    .record-filter-shell,
    .finance-form-shell,
    .record-form-shell,
    .finance-panel,
    .record-panel,
    .document-summary-band
) {
    border-radius: .75rem !important;
    box-shadow: var(--app-shadow) !important;
}

body.app-shell .app-main :is(
    .finance-plan-preview,
    .finance-stat-row,
    .record-stat-row
) {
    background: #f8fafc !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.app-shell .app-main :is(
    .finance-pill-success,
    .finance-status.paid,
    .record-pill-success,
    .record-status.success
) {
    background: #dcfce7 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}

body.app-shell .app-main :is(
    .finance-status.pending,
    .record-status.warning
) {
    background: #fef3c7 !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

body.app-shell .app-main :is(
    .finance-status.overdue,
    .record-status.danger
) {
    background: #ffe4e6 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

body.app-shell .app-main :is(
    .finance-pill-muted,
    .record-pill-muted
) {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}

body.app-shell .app-main :is(
    .finance-tab,
    .record-tab
) {
    background: #f8fafc !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-soft) !important;
}

body.app-shell .app-main :is(
    .finance-tab,
    .record-tab
):hover,
body.app-shell .app-main :is(
    .finance-tab,
    .record-tab
):focus,
body.app-shell .app-main :is(
    .finance-tab.active,
    .record-tab.active
) {
    background: var(--app-primary-faint) !important;
    border-color: var(--app-primary) !important;
    color: var(--app-primary-strong) !important;
}

body.app-shell .app-main :is(
    .interaction-overview-card,
    .interaction-card,
    .interaction-state-card,
    .interaction-filter-shell,
    .interaction-form-shell,
    .interaction-panel,
    .messaging-sidebar,
    .messaging-panel,
    .people-panel,
    .notification-panel
) {
    border-radius: .75rem !important;
    box-shadow: var(--app-shadow) !important;
}

body.app-shell .app-main :is(
    .interaction-audience-option,
    .interaction-content-box,
    .interaction-segmented,
    .group-mode-option,
    .interaction-stat-row,
    .message-bubble.theirs
) {
    background: #f8fafc !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.app-shell .app-main :is(
    .interaction-pill,
    .interaction-status
) {
    background: #f8fafc !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-soft) !important;
}

body.app-shell .app-main :is(
    .interaction-status.success,
    .interaction-pill-success
) {
    background: #dcfce7 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}

body.app-shell .app-main :is(
    .interaction-status.warning,
    .interaction-pill-warning
) {
    background: #fef3c7 !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

body.app-shell .app-main .interaction-status.danger {
    background: #ffe4e6 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

body.app-shell .app-main .interaction-pill-muted {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}

body.app-shell .app-main :is(
    .conversation-item,
    .people-item,
    .notification-item
) {
    color: var(--app-text) !important;
}

body.app-shell .app-main :is(
    .conversation-item:hover,
    .conversation-item:focus,
    .conversation-item.active,
    .people-item:hover,
    .people-item:focus,
    .notification-item:hover,
    .notification-item:focus,
    .notification-item.unread
) {
    background: var(--app-primary-faint) !important;
    border-color: var(--app-primary) !important;
    color: var(--app-primary-strong) !important;
}

body.app-shell .app-main .message-bubble.mine {
    background: linear-gradient(135deg, var(--app-primary), var(--app-secondary)) !important;
    border-color: var(--app-primary) !important;
    color: #fff !important;
}

body.app-shell .app-main .message-bubble.theirs :is(.message-sender, .message-time) {
    color: var(--app-text-soft) !important;
}

body.app-shell .app-main .messaging-empty .text-light {
    color: var(--app-text) !important;
}

body.app-shell .app-main :is(
    .settings-card,
    .settings-panel,
    .settings-profile-hero,
    .settings-form-panel,
    .settings-preview-panel,
    .settings-metric-card,
    .access-hero,
    .access-card,
    .access-group,
    .access-note,
    .access-toolbar-panel,
    .management-filter-panel,
    .management-table-panel,
    .management-detail-panel,
    .management-form-panel,
    .management-info-panel,
    .management-detail-hero,
    .progress-overview-card,
    .progress-student-card,
    .progress-record-card,
    .progress-hero,
    .utility-card,
    .utility-filter-panel,
    .utility-status-card
) {
    border-radius: .75rem !important;
    box-shadow: var(--app-shadow) !important;
}

body.app-shell .app-main :is(
    .settings-preview-box,
    .settings-empty,
    .access-role-card,
    .management-stat,
    .progress-pill,
    .progress-pill-muted,
    .utility-empty,
    .utility-status-code
) {
    background: #f8fafc !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.app-shell .app-main :is(
    .settings-card-head,
    .settings-summary-row,
    .settings-form-section,
    .settings-metric-card-head,
    .settings-metric-card-actions,
    .settings-list-row,
    .access-card-head,
    .access-group-head,
    .access-permission-row,
    .management-table-head,
    .management-pagination,
    .management-summary-row,
    .management-form-section,
    .utility-card-head,
    .utility-card-actions,
    .utility-info-row
) {
    border-color: var(--app-border) !important;
}

body.app-shell .app-main :is(
    .settings-subtitle,
    .settings-muted,
    .settings-field-label,
    .settings-card-note,
    .access-subtitle,
    .access-muted,
    .access-key,
    .access-description,
    .management-subtitle,
    .management-muted,
    .management-field-label,
    .management-meta,
    .management-empty,
    .management-stat-label,
    .utility-subtitle,
    .utility-muted,
    .utility-label
) {
    color: var(--app-text-soft) !important;
}

body.app-shell .app-main :is(
    .settings-card-title,
    .settings-field-value,
    .settings-form-section,
    .access-card-title,
    .access-role-name,
    .access-group-title,
    .access-permission-title,
    .management-name,
    .management-panel-title,
    .management-field-value,
    .management-stat-value,
    .management-form-section,
    .utility-card-title,
    .utility-value
) {
    color: var(--app-text) !important;
}

body.app-shell .app-main .management-table thead th {
    background: #f8fafc !important;
    color: var(--app-text-soft) !important;
}

body.app-shell .app-main .management-table :is(td, th) {
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

body.app-shell .app-main :is(
    .access-permission-row:hover,
    .management-table tbody tr:hover
) {
    background: var(--app-primary-faint) !important;
}

body.app-shell .app-main .badge-soft-danger {
    background: #ffe4e6 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

body.app-shell .app-main :is(
    .badge-soft-warning,
    .progress-pill-warning,
    .progress-required-pill
) {
    background: #fef3c7 !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

body.app-shell .app-main .progress-pill-success {
    background: #dcfce7 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}

body.app-shell .app-main .dashboard-stat-card,
body.app-shell .app-main .dashboard-panel,
body.app-shell .app-main .dashboard-mini-panel,
body.app-shell .app-main .dashboard-tenant-context,
body.app-shell .app-main .dashboard-health-row {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    border-radius: .55rem !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}

body.app-shell .app-main .dashboard-panel-head {
    background: transparent !important;
    border-color: var(--app-border) !important;
}

body.app-shell .app-main .dashboard-panel-body {
    background: transparent !important;
}

body.app-shell .app-main .dashboard-list-item,
body.app-shell .app-main .dashboard-panel-foot {
    border-color: var(--app-border) !important;
}

body.app-shell .app-main .dashboard-mini-panel.warning {
    background: #fffbeb !important;
    border-color: #fde68a !important;
}

body.app-shell .app-main .dashboard-mini-panel.success {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
}

html[data-app-theme="dark"] body.app-shell .app-topbar {
    background: rgba(17, 24, 39, .9);
}

html[data-app-theme="dark"] body.app-shell .app-mobile-bottom-nav {
    background: rgba(17, 24, 39, .96);
    border-top-color: var(--app-border);
    box-shadow: 0 -12px 28px rgba(0, 0, 0, .32);
}

html[data-app-theme="dark"] body.app-shell .app-bottom-link,
html[data-app-theme="dark"] body.app-shell .app-bottom-button {
    color: var(--app-text-soft) !important;
}

html[data-app-theme="dark"] body.app-shell .app-bottom-link.is-active,
html[data-app-theme="dark"] body.app-shell .app-bottom-link:hover,
html[data-app-theme="dark"] body.app-shell .app-bottom-button:hover {
    color: var(--app-primary-strong) !important;
    background: var(--app-primary-faint);
}

html[data-app-theme="dark"] body.app-shell .btn-close {
    filter: invert(1) grayscale(100%) brightness(180%);
}

html[data-app-theme="dark"] body.app-shell :is(
    .form-control,
    .form-select,
    .form-check-input,
    .input-group-text,
    textarea
) {
    background-color: var(--app-surface-strong) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-app-theme="dark"] body.app-shell :is(
    .form-control,
    .form-select,
    textarea
)::placeholder {
    color: var(--app-text-muted) !important;
}

html[data-app-theme="dark"] body.app-shell :is(
    .form-control,
    .form-select,
    textarea
):focus {
    border-color: var(--app-primary-strong) !important;
    box-shadow: 0 0 0 .16rem rgba(255, 122, 135, .18) !important;
}

html[data-app-theme="dark"] body.app-shell :is(
    .form-control:disabled,
    .form-control[readonly],
    .form-select:disabled
) {
    background-color: rgba(31, 41, 55, .7) !important;
    color: var(--app-text-muted) !important;
}

html[data-app-theme="dark"] body.app-shell :is(
    .dropdown-menu,
    .offcanvas,
    .modal-content,
    .popover,
    .toast,
    .card,
    .card-surface,
    .list-group-item,
    .accordion-item,
    .accordion-button,
    .nav-tabs .nav-link
) {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-app-theme="dark"] body.app-shell :is(
    .dropdown-item,
    .dropdown-header,
    .modal-title,
    .offcanvas-title
) {
    color: var(--app-text) !important;
}

html[data-app-theme="dark"] body.app-shell :is(
    .dropdown-item:hover,
    .dropdown-item:focus,
    .dropdown-item.active,
    .list-group-item:hover,
    .list-group-item:focus,
    .accordion-button:not(.collapsed),
    .nav-tabs .nav-link.active
) {
    background: var(--app-primary-faint) !important;
    color: var(--app-primary-strong) !important;
}

html[data-app-theme="dark"] body.app-shell :is(
    .dropdown-divider,
    .modal-header,
    .modal-footer,
    .offcanvas-header,
    .offcanvas-footer,
    .card-header,
    .card-footer
) {
    border-color: var(--app-border) !important;
}

html[data-app-theme="dark"] body.app-shell :is(
    .table,
    .table-modern,
    .management-table
) {
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

html[data-app-theme="dark"] body.app-shell :is(
    .table thead th,
    .table-modern thead th,
    .management-table thead th,
    .app-main table:not(.ui-datepicker-calendar) thead th
) {
    background: var(--app-surface-strong) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-soft) !important;
}

html[data-app-theme="dark"] body.app-shell :is(
    .table tbody td,
    .table tbody th,
    .table-modern tbody td,
    .table-modern tbody th,
    .management-table tbody td,
    .management-table tbody th,
    .app-main table:not(.ui-datepicker-calendar) tbody td,
    .app-main table:not(.ui-datepicker-calendar) tbody th
) {
    background: transparent !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-app-theme="dark"] body.app-shell :is(
    .table tbody tr:hover,
    .table-modern tbody tr:hover,
    .management-table tbody tr:hover,
    .app-main table:not(.ui-datepicker-calendar) tbody tr:hover
) {
    background: var(--app-primary-faint) !important;
}

html[data-app-theme="dark"] body.app-shell .app-main :is(
    [class$="-card"],
    [class*="-card "],
    [class$="-panel"],
    [class*="-panel "],
    [class$="-shell"],
    [class*="-shell "],
    [class$="-state"],
    [class*="-state "],
    [class$="-pagination"],
    [class*="-pagination "],
    [class$="-tools"],
    [class*="-tools "],
    [class$="-toolbar"],
    [class*="-toolbar "],
    [class$="-summary"],
    [class*="-summary "],
    [class$="-overview"],
    [class*="-overview "],
    [class$="-option"],
    [class*="-option "],
    [class$="-box"],
    [class*="-box "]
) {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18) !important;
}

html[data-app-theme="dark"] body.app-shell .app-main :is(
    .finance-plan-preview,
    .finance-stat-row,
    .record-stat-row,
    .interaction-audience-option,
    .interaction-content-box,
    .interaction-segmented,
    .group-mode-option,
    .interaction-stat-row,
    .message-bubble.theirs,
    .settings-preview-box,
    .settings-empty,
    .access-role-card,
    .management-stat,
    .progress-pill,
    .progress-pill-muted,
    .utility-empty,
    .utility-status-code,
    .guardian-card,
    .student-note-card,
    .teacher-roster-card,
    .class-roster-card,
    .quick-action-link,
    .teacher-action-link,
    .class-action-link,
    .branch-action-link,
    .teacher-stat-row,
    .class-stat-row,
    .branch-stat-row,
    .session-note-card,
    .session-toggle-card,
    .session-day-option,
    .attendance-note-preview,
    .attendance-count-grid > div,
    .session-action-link,
    .attendance-action-link,
    .session-stat-row,
    .attendance-stat-row,
    .dashboard-health-row
) {
    background: var(--app-surface-muted) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-app-theme="dark"] body.app-shell .app-main :is(
    .badge-soft-primary,
    .interaction-pill,
    .interaction-status,
    .student-muted-pill,
    .finance-tab,
    .record-tab
) {
    background: var(--app-primary-faint) !important;
    border-color: var(--app-primary-soft) !important;
    color: var(--app-primary-strong) !important;
}

html[data-app-theme="dark"] body.app-shell .app-main :is(
    .badge-soft-success,
    .progress-pill-success,
    .finance-pill-success,
    .finance-status.paid,
    .record-pill-success,
    .record-status.success,
    .interaction-status.success,
    .interaction-pill-success,
    .teacher-pill-success,
    .class-pill-success,
    .session-pill-success,
    .attendance-pill-success,
    .alert-success,
    .dashboard-mini-panel.success
) {
    background: #052e1a !important;
    border-color: #166534 !important;
    color: #bbf7d0 !important;
}

html[data-app-theme="dark"] body.app-shell .app-main :is(
    .badge-soft-warning,
    .progress-pill-warning,
    .finance-status.pending,
    .record-status.warning,
    .interaction-status.warning,
    .interaction-pill-warning,
    .alert-warning,
    .dashboard-mini-panel.warning
) {
    background: #422006 !important;
    border-color: #713f12 !important;
    color: #fde68a !important;
}

html[data-app-theme="dark"] body.app-shell .app-main :is(
    .record-status.info,
    .public-consent-badge.optional
) {
    background: #082f49 !important;
    border-color: #075985 !important;
    color: #bae6fd !important;
}

html[data-app-theme="dark"] body.app-shell .app-main :is(
    .badge-soft-danger,
    .finance-status.overdue,
    .record-status.danger,
    .interaction-status.danger,
    .alert-danger
) {
    background: #4c0519 !important;
    border-color: #881337 !important;
    color: #fecdd3 !important;
}

html[data-app-theme="dark"] body.app-shell .app-main :is(
    .badge-soft-muted,
    .finance-pill-muted,
    .record-pill-muted,
    .interaction-pill-muted,
    .teacher-pill-muted,
    .class-pill-muted,
    .session-pill-muted
) {
    background: var(--app-surface-strong) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text-soft) !important;
}

html[data-app-theme="dark"] body.app-shell .app-main .alert-info {
    background: #172554 !important;
    border-color: #1d4ed8 !important;
    color: #bfdbfe !important;
}

@media (max-width: 576px) {
    body.app-shell .student-row-actions {
        display: inline-flex;
        flex-wrap: wrap;
    }
}

@media (max-width: 767.98px) {
    body.app-shell .dashboard-header h2 {
        font-size: 1.2rem;
    }

    body.app-shell .dashboard-stat-card,
    body.app-shell .dashboard-panel,
    body.app-shell .dashboard-mini-panel {
        border-radius: .55rem;
    }

    body.app-shell .dashboard-stat-value {
        font-size: 1.16rem;
    }
}

body.app-shell .app-main .student-static-card,
body.app-shell .app-main .student-static-card:hover,
body.app-shell .app-main .student-static-card:focus-within {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    box-shadow: var(--app-shadow) !important;
    transform: none !important;
}

html[data-app-theme="dark"] body.app-shell .app-main .student-static-card,
html[data-app-theme="dark"] body.app-shell .app-main .student-static-card:hover,
html[data-app-theme="dark"] body.app-shell .app-main .student-static-card:focus-within {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    box-shadow: var(--app-shadow) !important;
    transform: none !important;
}