/* Spektra theme bridge: keeps the Mazer shell while preserving existing view utilities. */
:root {
    --mazer-primary: #435ebe;
    --mazer-surface: #f2f7ff;
    --spektra-heading: #25396f;
    --spektra-text: #607080;
    --spektra-muted: #7c8db5;
    --spektra-border: #dee2e6;
    --spektra-card: #ffffff;
    --spektra-accent: #57caeb;
    --spektra-radius: .7rem;
}

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

body {
    background: var(--mazer-surface);
    color: var(--spektra-text);
    font-family: "Nunito", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

#app {
    min-height: 100vh;
}

#main {
    min-height: 100vh;
    padding-top: 1.5rem;
}

#main > header.app-header {
    min-height: 3rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.app-header .dropdown-menu {
    min-width: 12rem;
    border: 0;
    border-radius: .5rem;
}

.app-header .dropdown-item {
    color: #607080;
    font-weight: 600;
}

.app-header .dropdown-item:hover {
    color: #435ebe;
    background: #f0f1f5;
}

.sidebar-wrapper .sidebar-header {
    padding: 1.75rem 1.5rem 1rem;
}

.sidebar-wrapper .sidebar-header .logo a {
    display: block;
}

.sidebar-wrapper .sidebar-header .logo img {
    width: 100%;
    max-width: 215px;
    height: auto;
    max-height: 42px;
    object-fit: contain;
    object-position: left center;
}

.sidebar-wrapper .sidebar-context {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0 2rem 1rem;
    padding: .7rem .8rem;
    border-radius: .5rem;
    background: #f0f1f5;
    color: #25396f;
}

.sidebar-wrapper .sidebar-context-icon {
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .4rem;
    color: #fff;
    background: #435ebe;
}

.sidebar-wrapper .sidebar-context-title {
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.2;
}

.sidebar-wrapper .sidebar-context-subtitle {
    margin-top: .15rem;
    color: #7c8db5;
    font-size: .68rem;
    line-height: 1.2;
}

.sidebar-wrapper .menu {
    margin-top: .75rem;
    padding: 0 1.25rem;
}

.sidebar-wrapper .menu .sidebar-title {
    margin: 1.25rem 0 .5rem;
    padding: 0 .85rem;
    font-size: .72rem;
    letter-spacing: .55px;
    text-transform: uppercase;
    color: #7c8db5;
}

.sidebar-wrapper .menu .sidebar-item {
    margin-top: .25rem;
}

.sidebar-wrapper .menu .sidebar-link {
    padding: .62rem .85rem;
    font-size: .86rem;
}

.sidebar-wrapper .menu .sidebar-link span {
    margin-left: .7rem;
}

.sidebar-wrapper .menu .sidebar-item.active > .sidebar-link {
    box-shadow: 0 4px 8px rgba(67, 94, 190, .18);
}

.sidebar-wrapper .menu .submenu {
    padding-left: .35rem;
}

.sidebar-wrapper .menu .submenu .submenu-item a {
    padding: .48rem 1rem .48rem 2.25rem;
    font-size: .8rem;
}

.sidebar-wrapper .menu .submenu .submenu-item.active > a {
    color: #435ebe;
    font-weight: 800;
}

.sidebar-wrapper .sidebar-hide {
    color: #7c8db5;
}

#main .page-content {
    min-width: 0;
}

#main .card {
    border-radius: .5rem;
}

#main .table-responsive {
    border-radius: .35rem;
}

#main .alert {
    border-radius: .5rem;
}

#main .footer {
    margin-top: 2rem;
    padding: 1rem 0 0;
    background: transparent;
    box-shadow: none;
}

#main .footer p {
    margin-bottom: 0;
    font-size: .8rem;
}

#app.no-sidebar #main {
    margin-left: 0;
}

@media screen and (max-width: 1199px) {
    #main {
        padding: 1.25rem;
    }

    #main > header.app-header {
        margin-bottom: 1.25rem;
    }

    .sidebar-wrapper .sidebar-header {
        padding-top: 1.25rem;
    }
}

@media screen and (max-width: 575px) {
    #main {
        padding: 1rem;
    }

}

/* Bootstrap utility compatibility used by the existing feature views. */
.bg-primary-subtle { background-color: #e4e9ff !important; }
.bg-secondary-subtle { background-color: #e9ecef !important; }
.bg-success-subtle { background-color: #d2ffe8 !important; }
.bg-info-subtle { background-color: #e6fdff !important; }
.bg-warning-subtle { background-color: #fffdd8 !important; }
.bg-danger-subtle { background-color: #ffdede !important; }
.text-bg-primary { color: #fff !important; background-color: #435ebe !important; }
.text-bg-secondary { color: #fff !important; background-color: #6c757d !important; }
.text-bg-success { color: #fff !important; background-color: #198754 !important; }
.text-bg-info { color: #000 !important; background-color: #0dcaf0 !important; }
.text-bg-warning { color: #000 !important; background-color: #ffc107 !important; }
.text-bg-danger { color: #fff !important; background-color: #dc3545 !important; }
.text-bg-light { color: #212529 !important; background-color: #f8f9fa !important; }
.text-bg-dark { color: #fff !important; background-color: #212529 !important; }

/* Theme toggle */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: .35rem .55rem;
    border: 0;
    border-radius: .5rem;
    color: #607080;
    background: transparent;
    transition: background-color .2s ease, color .2s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    color: #435ebe;
    background: #f0f1f5;
}

.theme-toggle-floating {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1050;
    background: #fff;
    box-shadow: 0 4px 12px rgba(47, 56, 85, .12);
}

.landing-navbar .theme-toggle {
    margin-left: .5rem;
}

/* Mazer dark palette. The selectors are intentionally component-oriented so
   existing feature views inherit the theme without changing their behavior. */
.theme-dark body {
    background: #151a2d !important;
    color: #bdc5d7 !important;
}

.theme-dark #main,
.theme-dark .page-content,
.theme-dark .hp-page {
    color: #bdc5d7;
}

.theme-dark .sidebar-wrapper {
    background: #1b2236;
    border-right: 1px solid #2e3a57;
    box-shadow: 8px 0 20px rgba(0, 0, 0, .12);
}

.theme-dark .sidebar-wrapper .sidebar-header .logo img {
    filter: brightness(0) invert(1);
}

.theme-dark .sidebar-wrapper .sidebar-context {
    color: #e8ecf7;
    background: #252e49;
}

.theme-dark .sidebar-wrapper .sidebar-context-icon {
    background: #5a70d6;
}

.theme-dark .sidebar-wrapper .sidebar-context-subtitle,
.theme-dark .sidebar-wrapper .menu .sidebar-title {
    color: #98a6c6;
}

.theme-dark .sidebar-wrapper .menu .sidebar-link,
.theme-dark .sidebar-wrapper .menu .submenu .submenu-item a {
    color: #c7d0e5;
}

.theme-dark .sidebar-wrapper .menu .sidebar-link i,
.theme-dark .sidebar-wrapper .menu .submenu .submenu-item a i {
    color: #9eabd0;
}

.theme-dark .sidebar-wrapper .menu .sidebar-link:hover {
    color: #fff;
    background: #293552;
}

.theme-dark .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link {
    color: #fff;
    background: #435ebe;
}

.theme-dark .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link i,
.theme-dark .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link span {
    color: #fff;
}

.theme-dark .sidebar-wrapper .menu .submenu .submenu-item.active > a {
    color: #9eafff;
}

.theme-dark .sidebar-wrapper .sidebar-hide {
    color: #dce3f5;
}

.theme-dark .theme-toggle,
.theme-dark .theme-toggle-floating {
    color: #c7d0e5;
    background: transparent;
    box-shadow: none;
}

.theme-dark .theme-toggle:hover,
.theme-dark .theme-toggle:focus-visible {
    color: #fff;
    background: #293552;
}

.theme-dark .card,
.theme-dark .card .card-header,
.theme-dark .card .card-footer,
.theme-dark .modal-content,
.theme-dark .dropdown-menu,
.theme-dark .list-group-item,
.theme-dark .accordion-item,
.theme-dark .offcanvas,
.theme-dark .toast {
    color: #bdc5d7;
    background-color: #1d263d !important;
    border-color: #34415f !important;
}

.theme-dark .card .card-title,
.theme-dark .card h1,
.theme-dark .card h2,
.theme-dark .card h3,
.theme-dark .card h4,
.theme-dark .card h5,
.theme-dark .card h6,
.theme-dark .modal-title,
.theme-dark .accordion-button,
.theme-dark .list-group-item strong {
    color: #e8ecf7;
}

.theme-dark .modal-header,
.theme-dark .modal-footer,
.theme-dark .accordion-button:not(.collapsed) {
    border-color: #34415f;
    background-color: #232e48 !important;
}

.theme-dark .accordion-button {
    color: #dce3f5;
}

.theme-dark .accordion-button::after {
    filter: invert(1) grayscale(1);
}

.theme-dark .dropdown-item {
    color: #c7d0e5;
}

.theme-dark .dropdown-item:hover,
.theme-dark .dropdown-item:focus {
    color: #fff;
    background-color: #293552;
}

.theme-dark .dropdown-divider,
.theme-dark hr,
.theme-dark .border,
.theme-dark .border-top,
.theme-dark .border-end,
.theme-dark .border-bottom,
.theme-dark .border-start {
    border-color: #34415f !important;
}

.theme-dark .form-control,
.theme-dark .form-select,
.theme-dark .input-group-text,
.theme-dark textarea,
.theme-dark input,
.theme-dark select {
    color: #e8ecf7;
    background-color: #182139 !important;
    border-color: #3a496c !important;
}

.theme-dark .form-control:focus,
.theme-dark .form-select:focus {
    color: #fff;
    background-color: #1d2945 !important;
    border-color: #7187e6 !important;
    box-shadow: 0 0 0 .2rem rgba(90, 112, 214, .25);
}

.theme-dark .form-control::placeholder {
    color: #8998b8;
}

.theme-dark option {
    color: #e8ecf7;
    background: #1d263d;
}

.theme-dark .form-label,
.theme-dark .form-group label {
    color: #c7d0e5;
}

.theme-dark .table {
    --bs-table-bg: #1d263d;
    --bs-table-color: #bdc5d7;
    --bs-table-striped-bg: #222d47;
    --bs-table-striped-color: #dce3f5;
    --bs-table-hover-bg: #293552;
    --bs-table-hover-color: #fff;
    color: #bdc5d7;
    border-color: #34415f;
}

.theme-dark .table th,
.theme-dark .table td {
    color: inherit;
    border-color: #34415f !important;
}

.theme-dark .table thead th {
    color: #e8ecf7;
}

.theme-dark .text-muted,
.theme-dark .text-secondary,
.theme-dark .text-dark,
.theme-dark .text-body,
.theme-dark .text-gray-600,
.theme-dark .text-gray-500,
.theme-dark .text-gray-400 {
    color: #9eabd0 !important;
}

.theme-dark .text-white,
.theme-dark .text-dark-emphasis {
    color: #fff !important;
}

.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4,
.theme-dark h5,
.theme-dark h6,
.theme-dark .h1,
.theme-dark .h2,
.theme-dark .h3,
.theme-dark .h4,
.theme-dark .h5,
.theme-dark .h6 {
    color: #e8ecf7;
}

.theme-dark .bg-white,
.theme-dark .bg-light {
    color: #bdc5d7 !important;
    background-color: #1d263d !important;
}

.theme-dark .bg-primary-subtle,
.theme-dark .bg-secondary-subtle,
.theme-dark .bg-success-subtle,
.theme-dark .bg-info-subtle,
.theme-dark .bg-warning-subtle,
.theme-dark .bg-danger-subtle {
    color: #dce3f5 !important;
    background-color: #293552 !important;
}

.theme-dark .text-bg-light {
    color: #dce3f5 !important;
    background-color: #293552 !important;
    border-color: #46567d !important;
}

.theme-dark .text-bg-secondary {
    color: #fff !important;
    background-color: #5f6f9c !important;
}

.theme-dark .btn-light,
.theme-dark .btn-outline-secondary {
    color: #dce3f5;
    background-color: #293552;
    border-color: #46567d;
}

.theme-dark .btn-light:hover,
.theme-dark .btn-outline-secondary:hover {
    color: #fff;
    background-color: #3a4a70;
    border-color: #6075ac;
}

.theme-dark .pagination .page-link {
    color: #c7d0e5;
    background-color: #1d263d;
    border-color: #34415f;
}

.theme-dark .pagination .page-item.active .page-link {
    color: #fff;
    background-color: #435ebe;
    border-color: #435ebe;
}

.theme-dark .footer,
.theme-dark .landing-navbar {
    color: #9eabd0;
    background-color: #1b2236 !important;
    border-color: #2e3a57 !important;
}

.theme-dark .footer-title,
.theme-dark .footer-subtitle,
.theme-dark .landing-navbar .navbar-brand {
    color: #e8ecf7 !important;
}

.theme-dark .footer-description,
.theme-dark .footer-contact li,
.theme-dark .footer-bottom,
.theme-dark .footer-bottom-link,
.theme-dark .landing-navbar .nav-link {
    color: #aebbd5 !important;
}

.theme-dark .landing-navbar .navbar-toggler {
    border-color: #46567d;
}

.theme-dark .landing-navbar .navbar-toggler-icon {
    filter: invert(1);
}

.theme-dark .landing-navbar .navbar-brand img {
    filter: brightness(0) invert(1);
}

/* Keep the coloured SPEKTRA mark visible on the public navbar in dark mode. */
html.theme-dark body.cw-body .landing-navbar .spektra-brand-navbar .spektra-brand-image,
html.theme-dark body.cw-auth-body .landing-navbar .spektra-brand-navbar .spektra-brand-image {
    filter: none !important;
}

.theme-dark #auth,
.theme-dark .auth-page {
    background-color: #151a2d;
}

.theme-dark #auth #auth-left {
    color: #bdc5d7;
}

.theme-dark #auth #auth-left .auth-title {
    color: #e8ecf7;
}

.theme-dark #auth #auth-left .auth-subtitle {
    color: #9eabd0;
}

.theme-dark .hp-hero,
.theme-dark .hp-features,
.theme-dark .hp-bottom-cta,
.theme-dark .hp-cta-box,
.theme-dark .hp-feat-card,
.theme-dark .hp-visual-card {
    color: #bdc5d7;
    background-color: #1d263d !important;
    border-color: #34415f !important;
}

.theme-dark .hp-title,
.theme-dark .hp-section-head,
.theme-dark .hp-vc-title,
.theme-dark .hp-feat-card h3,
.theme-dark .hp-cta-box h2 {
    color: #e8ecf7 !important;
}

.theme-dark .hp-lead,
.theme-dark .hp-vc-sub,
.theme-dark .hp-feat-card p,
.theme-dark .hp-footer-description {
    color: #aebbd5 !important;
}

.theme-dark .hp-footer {
    color: #bdc5d7;
    background: #151a2d !important;
    border-top: 1px solid #2e3a57;
}

.theme-dark .hp-footer-subtitle,
.theme-dark .hp-footer-copyright {
    color: #e8ecf7 !important;
}

.theme-dark .hp-footer-links a,
.theme-dark .hp-footer-contact,
.theme-dark .hp-footer-contact a,
.theme-dark .hp-footer-bottom-link {
    color: #aebbd5 !important;
}

.theme-dark .hp-footer-divider {
    border-color: #34415f !important;
}

.theme-dark .student-exam-mode,
.theme-dark .assessment-exam-shell,
.theme-dark .student-exam-shell {
    color: #bdc5d7;
}

.theme-dark .assessment-exam-header,
.theme-dark .assessment-question-sidebar,
.theme-dark .assessment-question-card,
.theme-dark .assessment-player-navigation,
.theme-dark .student-exam-navigation,
.theme-dark .student-exam-question-card {
    color: #bdc5d7;
    background: #1d263d !important;
    border-color: #34415f !important;
}

.theme-dark .assessment-question-card-head,
.theme-dark .assessment-question-summary {
    border-color: #34415f !important;
}

.theme-dark .assessment-answer-option,
.theme-dark .student-exam-answer-list .list-group-item {
    color: #c7d0e5;
    background: #182139 !important;
    border-color: #3a496c !important;
}

.theme-dark .assessment-answer-option:hover,
.theme-dark .assessment-answer-option:has(input:checked),
.theme-dark .student-exam-answer-list .list-group-item:hover,
.theme-dark .student-exam-answer-list .list-group-item:has(input:checked) {
    background: #293552 !important;
    border-color: #7187e6 !important;
}

.theme-dark .lead table,
.theme-dark .lead th,
.theme-dark .lead td,
.theme-dark .choice-content,
.theme-dark .student-option-main,
.theme-dark .student-option-meta {
    color: #bdc5d7;
}

.theme-dark .lead table,
.theme-dark .lead th,
.theme-dark .lead td {
    border-color: #34415f !important;
}

.theme-dark .lead th {
    background: #232e48 !important;
}

/* Shared Mazer skin for feature-specific pages. These rules are loaded after
   view-level styles so legacy feature skins keep their behavior while sharing
   the same surface, spacing, typography, and dark palette as Mazer. */
#main .page-content > .container-fluid,
#main .page-content > .container {
    min-width: 0;
}

#main .page-header,
#main .page-content .exam-page,
#main .page-content .exam-card,
#main .page-content .kartu-ujian,
#main .page-content .kartu-jadwal,
#main .page-content .mapel-card,
#main .page-content .data-card,
#main .page-content .hs-card,
#main .page-content .an-filter,
#main .page-content .an-stat,
#main .page-content .an-chart-card,
#main .page-content .dh-card,
#main .page-content .irp-card,
#main .page-content .irp-shell,
#main .page-content .student-results-hero,
#main .page-content .student-result-detail-hero,
#main .page-content .student-assessment-summary-card,
#main .page-content .student-result-detail-card {
    border-radius: .5rem;
}

#main .page-content .exam-page,
#main .page-content .exam-card,
#main .page-content .kartu-ujian,
#main .page-content .kartu-jadwal,
#main .page-content .mapel-card,
#main .page-content .hs-card,
#main .page-content .an-filter,
#main .page-content .an-stat,
#main .page-content .an-chart-card,
#main .page-content .dh-card,
#main .page-content .irp-card,
#main .page-content .irp-shell {
    background: #fff !important;
    border-color: #e4e9f0 !important;
    box-shadow: 0 .25rem .9rem rgba(47, 56, 85, .045);
}

#main .page-content .exam-page,
#main .page-content .hs-wrap,
#main .page-content .an-wrap,
#main .page-content .dh-page,
#main .page-content .irp-page,
#main .page-content .irp-shell {
    min-height: 0;
}

#main .page-content .hs-wrap,
#main .page-content .an-wrap,
#main .page-content .dh-page,
#main .page-content .irp-page {
    padding-top: 0 !important;
    background: transparent !important;
}

#main .page-content .hs-title,
#main .page-content .dh-title,
#main .page-content .activity-log-header h1,
#main .page-content .section-hd .s-title {
    color: #25396f;
}

#main .page-content .hs-meta,
#main .page-content .dh-subtitle,
#main .page-content .activity-log-header p,
#main .page-content .section-hd .s-count,
#main .page-content .hs-muted {
    color: #7c8db5;
}

#main .page-content .hs-stats {
    overflow: hidden;
    border-color: #e4e9f0;
    border-radius: .5rem;
    box-shadow: 0 .25rem .9rem rgba(47, 56, 85, .045);
}

#main .page-content .hs-stat,
#main .page-content .stat-box,
#main .page-content .an-attempt-card,
#main .page-content .empty-sec,
#main .page-content .an-empty {
    background: #f8f9fc !important;
    border-color: #e4e9f0 !important;
}

#main .page-content .hs-stat-num,
#main .page-content .an-stat-num,
#main .page-content .an-attempt-val,
#main .page-content .hs-mono {
    color: #25396f;
}

#main .page-content .hs-table thead th,
#main .page-content .an-tbl thead th,
#main .page-content .result-table thead th,
#main .page-content .page-table thead th,
#main .page-content .data-card .table thead th {
    background: #f8f9fc !important;
    color: #7c8db5 !important;
    border-color: #e4e9f0 !important;
}

#main .page-content .hs-table tbody td,
#main .page-content .an-tbl tbody td,
#main .page-content .result-table tbody td,
#main .page-content .page-table tbody td,
#main .page-content .data-card .table tbody td {
    border-color: #edf0f5 !important;
}

#main .page-content .hs-table tbody tr:hover td,
#main .page-content .an-tbl tbody tr:hover td,
#main .page-content .result-table tbody tr:hover td,
#main .page-content .page-table tbody tr:hover td,
#main .page-content .data-card .table tbody tr:hover td {
    background: #f8f9ff !important;
}

#main .page-content .assessment-bank-panel,
#main .page-content .assessment-detail-panel,
#main .page-content .assessment-item-table-wrap {
    border-color: #e4e9f0;
    border-radius: .5rem;
    box-shadow: 0 .25rem .9rem rgba(47, 56, 85, .045);
}

#main .page-content .assessment-toolbar,
#main .page-content .assessment-summary-grid,
#main .page-content .assessment-list-footer,
#main .page-content .assessment-item-table thead th,
#main .page-content .detail-summary-block {
    border-color: #e8edf3;
}

#main .page-content .assessment-toolbar,
#main .page-content .assessment-item-table thead th {
    background: #f8f9fc;
}

#main .page-content .assessment-summary-item,
#main .page-content .assessment-table td,
#main .page-content .assessment-item-table td {
    border-color: #edf0f5;
}

#main .page-content .assessment-table tbody tr:hover td,
#main .page-content .assessment-item-table tbody tr:hover td {
    background: #f8f9ff !important;
}

#main .page-content .exam-option-card,
#main .page-content .access-mode-card,
#main .page-content .permission-section,
#main .page-content .access-summary,
#main .page-content .class-option,
#main .page-content .offering-option,
#main .page-content .selection-option,
#main .page-content .role-builder .permission-section {
    border-color: #e4e9f0;
    border-radius: .5rem;
}

#main .page-content .exam-option-card:hover,
#main .page-content .access-mode-card:hover,
#main .page-content .class-option:hover,
#main .page-content .offering-option:hover,
#main .page-content .selection-option:hover {
    border-color: #9aa9df;
    background: #f8f9ff;
}

#main .page-content .note-editor,
#main .page-content .note-frame,
#main .page-content .ck.ck-editor__main > .ck-editor__editable,
#main .page-content .ck.ck-toolbar {
    border-color: #dfe5ef !important;
}

#main .page-content .note-editor,
#main .page-content .note-frame {
    border-radius: .4rem;
    overflow: hidden;
}

#main .page-content .note-editable,
#main .page-content .ck-editor__editable {
    min-height: 220px;
    line-height: 1.65;
}

/* Dark mode for custom feature components whose original styles use fixed
   light colors. */
.theme-dark #main .page-content .page-header,
.theme-dark #main .page-content .exam-page,
.theme-dark #main .page-content .exam-card,
.theme-dark #main .page-content .kartu-ujian,
.theme-dark #main .page-content .kartu-jadwal,
.theme-dark #main .page-content .mapel-card,
.theme-dark #main .page-content .data-card,
.theme-dark #main .page-content .hs-card,
.theme-dark #main .page-content .an-filter,
.theme-dark #main .page-content .an-stat,
.theme-dark #main .page-content .an-chart-card,
.theme-dark #main .page-content .dh-card,
.theme-dark #main .page-content .irp-card,
.theme-dark #main .page-content .irp-shell,
.theme-dark #main .page-content .assessment-bank-panel,
.theme-dark #main .page-content .assessment-detail-panel,
.theme-dark #main .page-content .assessment-item-table-wrap,
.theme-dark #main .page-content .student-results-hero,
.theme-dark #main .page-content .student-result-detail-hero,
.theme-dark #main .page-content .student-assessment-summary-card,
.theme-dark #main .page-content .student-result-detail-card,
.theme-dark #main .page-content .student-result-empty {
    color: #bdc5d7 !important;
    background: #1d263d !important;
    border-color: #34415f !important;
    box-shadow: 0 .25rem .9rem rgba(0, 0, 0, .14);
}

.theme-dark #main .page-content .hs-wrap,
.theme-dark #main .page-content .an-wrap,
.theme-dark #main .page-content .dh-page,
.theme-dark #main .page-content .irp-page {
    background: transparent !important;
}

.theme-dark #main .page-content .hs-title,
.theme-dark #main .page-content .dh-title,
.theme-dark #main .page-content .activity-log-header h1,
.theme-dark #main .page-content .section-hd .s-title,
.theme-dark #main .page-content .hs-stat-num,
.theme-dark #main .page-content .an-stat-num,
.theme-dark #main .page-content .an-attempt-val,
.theme-dark #main .page-content .hs-mono,
.theme-dark #main .page-content .an-chart-head h6,
.theme-dark #main .page-content .student-results-hero h1,
.theme-dark #main .page-content .student-result-detail-hero h1,
.theme-dark #main .page-content .student-assessment-summary-head h3,
.theme-dark #main .page-content .student-results-subject-heading h3 {
    color: #e8ecf7 !important;
}

.theme-dark #main .page-content .hs-meta,
.theme-dark #main .page-content .dh-subtitle,
.theme-dark #main .page-content .activity-log-header p,
.theme-dark #main .page-content .section-hd .s-count,
.theme-dark #main .page-content .hs-muted,
.theme-dark #main .page-content .an-chart-head p,
.theme-dark #main .page-content .an-filter-label,
.theme-dark #main .page-content .student-results-hero p,
.theme-dark #main .page-content .student-result-detail-hero p,
.theme-dark #main .page-content .student-results-stat small,
.theme-dark #main .page-content .student-assessment-summary-meta,
.theme-dark #main .page-content .student-results-section-label,
.theme-dark #main .page-content .detail-summary-label,
.theme-dark #main .page-content .detail-summary-value,
.theme-dark #main .page-content .bank-description,
.theme-dark #main .page-content .question-format small,
.theme-dark #main .page-content .creator-name,
.theme-dark #main .page-content .owner-label {
    color: #9eabd0 !important;
}

.theme-dark #main .page-content .hs-stat,
.theme-dark #main .page-content .stat-box,
.theme-dark #main .page-content .an-attempt-card,
.theme-dark #main .page-content .empty-sec,
.theme-dark #main .page-content .an-empty,
.theme-dark #main .page-content .student-results-stat,
.theme-dark #main .page-content .student-assessment-type-card,
.theme-dark #main .page-content .student-result-score-card,
.theme-dark #main .page-content .student-result-final-score,
.theme-dark #main .page-content .assessment-toolbar,
.theme-dark #main .page-content .assessment-item-table thead th,
.theme-dark #main .page-content .assessment-table thead th,
.theme-dark #main .page-content .data-card .table thead th,
.theme-dark #main .page-content .page-table thead th,
.theme-dark #main .page-content .result-table thead th,
.theme-dark #main .page-content .an-tbl thead th {
    color: #c7d0e5 !important;
    background: #232e48 !important;
    border-color: #34415f !important;
}

.theme-dark #main .page-content .hs-table tbody td,
.theme-dark #main .page-content .an-tbl tbody td,
.theme-dark #main .page-content .result-table tbody td,
.theme-dark #main .page-content .page-table tbody td,
.theme-dark #main .page-content .data-card .table tbody td,
.theme-dark #main .page-content .assessment-table td,
.theme-dark #main .page-content .assessment-item-table td {
    color: #bdc5d7 !important;
    border-color: #34415f !important;
    background: #1d263d !important;
}

.theme-dark #main .page-content .hs-table tbody tr:hover td,
.theme-dark #main .page-content .an-tbl tbody tr:hover td,
.theme-dark #main .page-content .result-table tbody tr:hover td,
.theme-dark #main .page-content .page-table tbody tr:hover td,
.theme-dark #main .page-content .data-card .table tbody tr:hover td,
.theme-dark #main .page-content .assessment-table tbody tr:hover td,
.theme-dark #main .page-content .assessment-item-table tbody tr:hover td {
    background: #293552 !important;
}

.theme-dark #main .page-content .assessment-summary-grid,
.theme-dark #main .page-content .assessment-summary-item,
.theme-dark #main .page-content .assessment-list-footer,
.theme-dark #main .page-content .assessment-detail-summary,
.theme-dark #main .page-content .detail-summary-block,
.theme-dark #main .page-content .assessment-question-summary,
.theme-dark #main .page-content .assessment-question-card-head {
    background: #232e48 !important;
    border-color: #34415f !important;
}

.theme-dark #main .page-content .assessment-detail-summary {
    color: #bdc5d7 !important;
}

.theme-dark #main .page-content .assessment-detail-summary .detail-summary-value {
    color: #e8ecf7 !important;
}

.theme-dark #main .page-content .summary-value,
.theme-dark #main .page-content .bank-title,
.theme-dark #main .page-content .item-statement,
.theme-dark #main .page-content .item-count,
.theme-dark #main .page-content .metric-value,
.theme-dark #main .page-content .score-num,
.theme-dark #main .page-content .detail-stat,
.theme-dark #main .page-content .section-title,
.theme-dark #main .page-content .role-builder,
.theme-dark #main .page-content .role-builder .section-title,
.theme-dark #main .page-content .role-builder .mode-title,
.theme-dark #main .page-content .permission-section-head h6 {
    color: #e8ecf7 !important;
}

.theme-dark #main .page-content .permission-section,
.theme-dark #main .page-content .access-summary,
.theme-dark #main .page-content .access-mode-card,
.theme-dark #main .page-content .class-option,
.theme-dark #main .page-content .offering-option,
.theme-dark #main .page-content .selection-option,
.theme-dark #main .page-content .role-builder .permission-section-head {
    color: #bdc5d7 !important;
    background: #1d263d !important;
    border-color: #34415f !important;
}

.theme-dark #main .page-content .permission-section-head,
.theme-dark #main .page-content .access-mode-card.is-selected,
.theme-dark #main .page-content .access-mode-option:has(input:checked),
.theme-dark #main .page-content .class-option:has(input:checked),
.theme-dark #main .page-content .offering-option:has(input:checked) {
    background: #293552 !important;
}

.theme-dark #main .page-content .note-editor,
.theme-dark #main .page-content .note-frame,
.theme-dark #main .page-content .note-toolbar,
.theme-dark #main .page-content .note-editable,
.theme-dark #main .page-content .ck.ck-editor__main > .ck-editor__editable,
.theme-dark #main .page-content .ck.ck-toolbar {
    color: #dce3f5 !important;
    background: #182139 !important;
    border-color: #3a496c !important;
}

.theme-dark #main .page-content .note-btn,
.theme-dark #main .page-content .ck-button {
    color: #c7d0e5 !important;
    background: #293552 !important;
    border-color: #46567d !important;
}

.theme-dark #main .page-content .result-table tbody tr.row-ok td,
.theme-dark #main .page-content .result-table tbody tr.row-err td {
    background: #1d263d !important;
}

@media (max-width: 767.98px) {
    #main .page-content .assessment-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #main .page-content .assessment-summary-item:nth-child(2) {
        border-right: 0;
    }

    #main .page-content .hs-stats,
    #main .page-content .an-stats {
        grid-template-columns: 1fr 1fr;
    }
}

/* SPEKTRA visual identity and final Mazer refinements. */
.spektra-brand {
    display: inline-flex;
    align-items: center;
    gap: .68rem;
    width: max-content;
    max-width: 100%;
    color: var(--spektra-heading) !important;
    text-decoration: none !important;
    line-height: 1;
}

.spektra-brand-mark {
    display: inline-flex;
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
}

.spektra-brand-mark svg {
    display: block;
    width: 100%;
    height: 100%;
}

.spektra-brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.45);
}

.spektra-brand-tile { fill: var(--mazer-primary); }

.spektra-brand-glyph {
    fill: none;
    stroke: #fff;
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.spektra-brand-accent { fill: var(--spektra-accent); }

.spektra-brand-name {
    color: currentColor;
    font-size: 1.42rem;
    font-weight: 800;
    letter-spacing: .055em;
    white-space: nowrap;
}

.spektra-brand:hover { color: #344aa5 !important; }

.sidebar-wrapper .sidebar-header { padding: 1.5rem 1.5rem .9rem; }

.sidebar-wrapper > .sidebar-toggler.btn.x { display: none !important; }

.sidebar-wrapper .sidebar-header .logo a.spektra-brand { display: inline-flex; }

.spektra-brand-sidebar .spektra-brand-mark {
    width: 2.5rem;
    height: 2.5rem;
}

.spektra-brand-sidebar .spektra-brand-name { font-size: 1.48rem; }

.sidebar-wrapper .sidebar-context {
    margin: 0 1.5rem .9rem;
    padding: .72rem .8rem;
    border: 1px solid var(--spektra-border);
    background: #f6f7fb;
}

.sidebar-wrapper .menu {
    margin-top: .55rem;
    padding: 0 1.25rem 1.5rem;
}

.sidebar-wrapper .menu .sidebar-title {
    margin: 1.15rem 0 .42rem;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.sidebar-wrapper .menu .sidebar-link {
    min-height: 2.6rem;
    padding: .58rem .78rem;
    font-size: .84rem;
    font-weight: 650;
    transition: color .14s ease, background-color .14s ease, box-shadow .14s ease;
}

.sidebar-wrapper .menu .sidebar-link i { font-size: 1rem; }

.sidebar-wrapper .menu .submenu .submenu-item a {
    padding-top: .45rem;
    padding-bottom: .45rem;
    font-size: .79rem;
    transition: color .14s ease, background-color .14s ease;
}

#main .card {
    border: 1px solid rgba(226, 230, 240, .72);
    border-radius: var(--spektra-radius);
    box-shadow: 0 3px 14px rgba(35, 48, 86, .045);
}

#main .card .card-header,
#main .card .card-footer { border-color: var(--spektra-border); }

#main .table { font-size: .875rem; }

.btn,
.form-control,
.form-select,
.dropdown-menu,
.modal-content { font-family: inherit; }

.btn {
    font-size: .875rem;
    font-weight: 650;
}

.form-label,
.form-group label {
    font-size: .84rem;
    font-weight: 700;
}

.form-control,
.form-select {
    font-size: .9rem;
    border-color: #dfe3ec;
    border-radius: .5rem;
}

.form-control:focus,
.form-select:focus {
    border-color: #8ea0df;
    box-shadow: 0 0 0 .18rem rgba(67, 94, 190, .12);
}

/* Icon-only theme control; browser title provides the hover hint. */
.theme-toggle {
    flex: 0 0 2.45rem;
    width: 2.45rem;
    min-width: 2.45rem;
    height: 2.45rem;
    min-height: 2.45rem;
    gap: 0;
    padding: 0;
    border: 1px solid var(--spektra-border);
    border-radius: .65rem;
    color: #65728a;
    background: #fff;
    box-shadow: 0 2px 8px rgba(35, 48, 86, .04);
    transition: color .14s ease, background-color .14s ease, border-color .14s ease;
}

.theme-toggle i {
    font-size: 1rem;
    line-height: 1;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    color: var(--mazer-primary);
    border-color: #cad2ed;
    background: #f3f5fc;
    outline: none;
}

.theme-toggle-floating {
    top: 1.15rem;
    right: 1.15rem;
    z-index: 1060;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 7px 22px rgba(35, 48, 86, .12);
}

.landing-navbar { min-height: 72px; }

.spektra-brand-navbar .spektra-brand-mark {
    width: 2.15rem;
    height: 2.15rem;
}

.spektra-brand-navbar .spektra-brand-name { font-size: 1.22rem; }

.spektra-brand-footer .spektra-brand-mark {
    width: 2.15rem;
    height: 2.15rem;
}

.spektra-brand-footer .spektra-brand-name { font-size: 1.2rem; }

.landing-navbar .navbar-nav .nav-link {
    font-size: .85rem;
    font-weight: 650;
}

/* Auth pages share one light, responsive shell in both themes. */
#auth.auth-page {
    min-height: 100vh;
    background: #fff;
}

#auth.auth-page #auth-left {
    min-height: 100vh;
    padding: clamp(2.25rem, 5vw, 4.75rem);
}

#auth.auth-page .auth-logo {
    margin-bottom: clamp(2.25rem, 5vh, 3.75rem);
}

.spektra-brand-auth .spektra-brand-mark {
    width: 2.75rem;
    height: 2.75rem;
}

.spektra-brand-auth .spektra-brand-name { font-size: 1.62rem; }

#auth.auth-page #auth-left .auth-title {
    margin-bottom: .65rem;
    color: var(--spektra-heading);
    font-size: clamp(2.2rem, 4vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.08;
}

#auth.auth-page #auth-left .auth-subtitle {
    max-width: 34rem;
    color: #7c8db5;
    font-size: 1rem;
    line-height: 1.65;
}

#auth.auth-page #auth-left .form-control-xl,
#auth.auth-page #auth-left .form-control-lg,
#auth.auth-page #auth-left .form-select-lg {
    min-height: 3.2rem;
    padding-top: .72rem;
    padding-bottom: .72rem;
    font-size: .95rem;
    border-radius: .58rem;
}

#auth.auth-page #auth-left .has-icon-left .form-control-xl,
#auth.auth-page #auth-left .has-icon-left .form-control-lg {
    padding-left: 3rem;
    padding-right: 3.2rem;
}

#auth.auth-page #auth-left .form-control-icon i { font-size: 1.15rem; }

#auth.auth-page #auth-left .btn-link {
    z-index: 3;
    width: 2.85rem;
    padding: 0;
    text-decoration: none;
}

#auth.auth-page #auth-left .btn-primary {
    min-height: 3.15rem;
    border-color: var(--mazer-primary);
    border-radius: .58rem;
    background: var(--mazer-primary);
    box-shadow: 0 7px 18px rgba(67, 94, 190, .2) !important;
}

#auth.auth-page #auth-left .btn-primary:hover {
    border-color: #364ca0;
    background: #364ca0;
}

#auth.auth-page #auth-right {
    background-position: center;
    background-size: cover;
}

#auth.register-page {
    height: auto !important;
    overflow: visible !important;
}

#auth.register-page #auth-left {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

#auth.register-page .auth-logo { margin-bottom: 2rem; }

.theme-dark .spektra-brand { color: #f1f4fb !important; }
.theme-dark .spektra-brand:hover { color: #fff !important; }
.theme-dark .spektra-brand-tile { fill: #5d74d6; }
.theme-dark .sidebar-wrapper .sidebar-context { border-color: #34415f; }
.theme-dark #main .card { box-shadow: 0 4px 18px rgba(0, 0, 0, .1); }

.theme-dark .theme-toggle,
.theme-dark .theme-toggle-floating {
    color: #d2daed;
    border-color: #34415f;
    background: #222c45;
    box-shadow: none;
}

.theme-dark .theme-toggle:hover,
.theme-dark .theme-toggle:focus-visible {
    color: #fff;
    border-color: #53648f;
    background: #2b3756;
}

.theme-dark #auth.auth-page { background: #151a2d; }
.theme-dark #auth.auth-page #auth-left { background: #1b2236; }
.theme-dark #auth.auth-page #auth-left .auth-title { color: #f1f4fb; }
.theme-dark #auth.auth-page #auth-left .auth-subtitle { color: #aeb9d1; }

.theme-dark #auth.auth-page #auth-left .btn-primary { color: #fff !important; }

.theme-dark .sidebar-wrapper .menu .sidebar-link,
.theme-dark .sidebar-wrapper .menu .submenu .submenu-item a {
    color: #c7d0e5 !important;
}

.theme-dark .sidebar-wrapper .menu .sidebar-title { color: #98a6c6 !important; }

.theme-dark #main .page-content .dashboard-action {
    color: #e8ecf7 !important;
    background: #252f49 !important;
    border-color: #3a4768 !important;
}

.theme-dark #main .page-content .dashboard-action:hover {
    background: #2b3958 !important;
    border-color: #53648f !important;
}

.theme-dark #main .page-content .dashboard-action strong { color: #f1f4fb !important; }
.theme-dark #main .page-content .dashboard-action small { color: #aeb9d1 !important; }
.theme-dark #main .page-content .dashboard-action > i:last-child { color: #9eabd0 !important; }

@media screen and (max-width: 991px) {
    .landing-navbar .container { flex-wrap: wrap; }

    #auth.auth-page #auth-left {
        padding: 3rem clamp(1.5rem, 7vw, 4rem);
    }
}

@media screen and (max-width: 1199px) {
    #sidebar:not(.sidebar-ready) {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    #sidebar:not(.sidebar-ready) .sidebar-wrapper {
        left: -320px !important;
        box-shadow: none !important;
    }

    #sidebar {
        position: fixed;
        inset: 0;
        z-index: 1055;
        visibility: hidden;
        background: rgba(15, 23, 42, 0);
        pointer-events: none;
        transition: background-color .18s ease, visibility .18s ease;
    }

    #sidebar.active {
        visibility: visible;
        background: rgba(15, 23, 42, .34);
        pointer-events: auto;
    }

    #sidebar .sidebar-wrapper {
        position: fixed;
        left: -300px;
        z-index: 1;
        box-shadow: 14px 0 34px rgba(15, 23, 42, .16);
        transition: left .18s ease;
    }

    #sidebar.active .sidebar-wrapper { left: 0; }
    #sidebar:not(.active) .sidebar-wrapper {
        left: -320px;
        box-shadow: none;
    }
}

@media screen and (max-width: 575px) {
    .spektra-brand-sidebar .spektra-brand-mark,
    .spektra-brand-auth .spektra-brand-mark {
        width: 2.35rem;
        height: 2.35rem;
    }

    .spektra-brand-sidebar .spektra-brand-name,
    .spektra-brand-auth .spektra-brand-name { font-size: 1.38rem; }

    #auth.auth-page #auth-left { padding: 2rem 1.35rem; }
    #auth.auth-page .auth-logo { margin-bottom: 2.25rem; }
    #auth.auth-page #auth-left .auth-title { font-size: 2.15rem; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Mazer dashboard visual parity.
   Keep this block last so legacy view-specific bridge rules cannot change the
   core dashboard typography and spacing. */
:root {
    --mazer-surface: #f2f7ff;
    --spektra-heading: #25396f;
    --spektra-text: #607080;
    --spektra-muted: #7c8db5;
    --spektra-border: #dee2e6;
    --spektra-card: #ffffff;
}

body,
button,
input,
textarea,
select,
.form-control,
.form-select {
    font-family: "Nunito", sans-serif;
}

body {
    background: #f2f7ff;
    color: #607080;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: #25396f;
    font-weight: 700;
    line-height: 1.2;
}

.text-muted { color: #7c8db5 !important; }

#main {
    padding: 2rem;
}

#main > header.app-header {
    min-height: 3rem;
    margin-bottom: 1.5rem;
}

.app-header .dropdown-item {
    color: #607080;
    font-weight: 600;
}

.sidebar-wrapper .sidebar-header {
    padding: 2rem 2rem 1rem;
}

.sidebar-wrapper .menu {
    margin-top: 2rem;
    padding: 0 2rem;
    font-weight: 600;
}

.sidebar-wrapper .menu .sidebar-title {
    margin: 1.5rem 0 1rem;
    padding: 0 1rem;
    color: #25396f;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}

.sidebar-wrapper .menu .sidebar-item { margin-top: .5rem; }

.sidebar-wrapper .menu .sidebar-link {
    min-height: 0;
    padding: .7rem 1rem;
    color: #25396f;
    font-size: 1rem;
    font-weight: 600;
}

.sidebar-wrapper .menu .sidebar-link span { margin-left: 1rem; }

.sidebar-wrapper .menu .submenu .submenu-item a {
    padding: .7rem 2rem;
    color: #25396f;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .5px;
}

.sidebar-wrapper .menu .sidebar-item.active > .sidebar-link {
    box-shadow: none;
}

.page-heading { margin-bottom: 2rem; }
.page-heading h3 { font-weight: 700; }

.dashboard-stat-card,
.dashboard-menu-card {
    border: 0 !important;
    border-radius: .7rem !important;
    box-shadow: none !important;
}

.dashboard-stat-card .card-body { padding: 2rem 1rem; }

.dashboard-stat-card .stats-icon {
    float: right;
    width: 3rem;
    height: 3rem;
    border-radius: .5rem;
}

.dashboard-stat-card .stats-icon i { font-size: 1.7rem; }

.dashboard-stat-card .stat-label {
    color: #7c8db5;
    font-size: 1rem;
    font-weight: 600;
}

.dashboard-stat-card .stat-value {
    color: #25396f;
    font-size: 1.25rem;
    font-weight: 800;
}

.dashboard-menu-card {
    transition: box-shadow .2s ease, transform .2s ease;
}

.dashboard-menu-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(47, 56, 85, .08) !important;
}

.dashboard-menu-card .card-title {
    color: #25396f !important;
    font-weight: 700;
}

.dashboard-menu-card .card-text {
    color: #7c8db5 !important;
}

.dashboard-action {
    color: #607080;
    background: #fff;
    border-color: #dee2e6;
    border-radius: .7rem;
}

.dashboard-action:hover {
    background: #f0f1f5;
    border-color: #cfd4dc;
}

.dashboard-action strong { font-weight: 700; }
.dashboard-action small { color: #7c8db5; }

@media screen and (max-width: 1199px) {
    #main { padding: 1.25rem; }
}

@media screen and (max-width: 575px) {
    #main { padding: 1rem; }
}

@media screen and (max-width: 767px) {
    .dashboard-stat-card .stats-icon {
        float: left;
        margin-bottom: .4rem;
    }
}

.theme-dark body {
    background: #151a2d !important;
    color: #bdc5d7 !important;
}

.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4,
.theme-dark h5,
.theme-dark h6,
.theme-dark .h1,
.theme-dark .h2,
.theme-dark .h3,
.theme-dark .h4,
.theme-dark .h5,
.theme-dark .h6,
.theme-dark .dashboard-stat-card .stat-value,
.theme-dark .dashboard-menu-card .card-title {
    color: #e8ecf7 !important;
}

.theme-dark .text-muted,
.theme-dark .dashboard-stat-card .stat-label,
.theme-dark .dashboard-menu-card .card-text,
.theme-dark .dashboard-action small {
    color: #9eabd0 !important;
}

.theme-dark .dashboard-stat-card,
.theme-dark .dashboard-menu-card {
    background: #1d263d !important;
}

.theme-dark .dashboard-action {
    color: #e8ecf7 !important;
    background: #252f49 !important;
    border-color: #3a4768 !important;
}

.theme-dark .dashboard-action:hover {
    background: #2b3958 !important;
    border-color: #53648f !important;
}

/* Compact sidebar at the browser's normal 100% zoom. */
.sidebar-wrapper {
    width: 270px;
}

#main {
    margin-left: 270px;
}

.sidebar-wrapper .sidebar-header {
    padding: 1.5rem 1.5rem .75rem;
}

.spektra-brand-sidebar .spektra-brand-mark {
    width: 2.25rem;
    height: 2.25rem;
}

.spektra-brand-sidebar .spektra-brand-name {
    font-size: 1.3rem;
}

.sidebar-wrapper .menu {
    margin-top: 1.5rem;
    padding: 0 1.5rem;
}

.sidebar-wrapper .menu .sidebar-title {
    margin: 1.25rem 0 .65rem;
    padding: 0 .75rem;
    font-size: .85rem;
}

.sidebar-wrapper .menu .sidebar-link {
    padding: .6rem .75rem;
    font-size: .9rem;
}

.sidebar-wrapper .menu .sidebar-link span { margin-left: .75rem; }

.sidebar-wrapper .menu .submenu .submenu-item a {
    padding: .6rem 1.5rem;
    font-size: .8rem;
}

@media screen and (min-width: 1200px) {
    #main { margin-left: 270px; }

    #sidebar.active .sidebar-wrapper { left: 0; }
    #sidebar:not(.active) .sidebar-wrapper { left: -270px; }
}

@media screen and (max-width: 1199px) {
    #main { margin-left: 0; }

    #sidebar .sidebar-wrapper {
        width: 270px;
        left: -270px;
    }

    #sidebar.active .sidebar-wrapper { left: 0; }
    #sidebar:not(.active) .sidebar-wrapper { left: -270px; }
}

/* Keep dashboard cards equal-height and aligned, especially when labels wrap. */
.dashboard-menu-link {
    display: block;
    height: 100%;
    color: inherit;
}

.dashboard-menu-card .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
}

.dashboard-menu-card .icon-wrapper {
    flex: 0 0 auto;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.dashboard-menu-card .card-title {
    margin-bottom: .5rem;
}

.dashboard-menu-card .card-text {
    flex-grow: 1;
    margin-bottom: 1rem;
}

.dashboard-menu-card .btn { margin-top: auto; }

/* Animated day/night capsule toggle. */
.theme-toggle {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: 4rem;
    height: 2.05rem;
    min-width: 4rem;
    min-height: 2.05rem;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(67, 94, 190, .18);
    border-radius: 999px;
    background: #7dcef3;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .55), 0 3px 10px rgba(67, 94, 190, .14);
    cursor: pointer;
    transition: background-color .45s ease, border-color .35s ease, box-shadow .35s ease;
}

.theme-toggle::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    color: inherit;
    background: #68c4ed;
    outline: none;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 0 4px 13px rgba(67, 94, 190, .22);
}

.theme-toggle:focus-visible {
    outline: 3px solid rgba(67, 94, 190, .3);
    outline-offset: 3px;
}

.theme-toggle__scene {
    position: absolute;
    inset: 0;
    display: block;
}

.theme-toggle__orb {
    position: absolute;
    top: .25rem;
    left: .25rem;
    z-index: 3;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #ffd65a;
    box-shadow: 0 2px 5px rgba(151, 105, 17, .25), inset 1px 1px 2px rgba(255, 255, 255, .65);
    transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), background-color .45s ease, box-shadow .45s ease;
}

.theme-toggle__orb::before,
.theme-toggle__orb::after {
    position: absolute;
    content: "";
    border-radius: 50%;
    opacity: 0;
    background: rgba(190, 177, 137, .5);
    transition: opacity .3s ease;
}

.theme-toggle__orb::before {
    top: .35rem;
    left: .4rem;
    width: .35rem;
    height: .35rem;
    box-shadow: .65rem .55rem 0 rgba(190, 177, 137, .42);
}

.theme-toggle__orb::after {
    right: .35rem;
    bottom: .35rem;
    width: .22rem;
    height: .22rem;
}

.theme-toggle__cloud {
    position: absolute;
    z-index: 2;
    width: .9rem;
    height: .28rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    opacity: .95;
    transition: opacity .35s ease, transform .5s ease;
}

.theme-toggle__cloud::before,
.theme-toggle__cloud::after {
    position: absolute;
    bottom: 0;
    content: "";
    border-radius: 50%;
    background: inherit;
}

.theme-toggle__cloud::before {
    left: .15rem;
    width: .42rem;
    height: .42rem;
}

.theme-toggle__cloud::after {
    right: .12rem;
    width: .32rem;
    height: .32rem;
}

.theme-toggle__cloud--one {
    bottom: .45rem;
    left: 1.75rem;
}

.theme-toggle__cloud--two {
    top: .35rem;
    right: .25rem;
    transform: scale(.68);
}

.theme-toggle__star {
    position: absolute;
    z-index: 2;
    width: .18rem;
    height: .18rem;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    transform: scale(.4);
    transition: opacity .4s ease, transform .45s ease;
}

.theme-toggle__star--one { top: .35rem; left: 1.7rem; }
.theme-toggle__star--two { top: .5rem; right: .4rem; width: .13rem; height: .13rem; }
.theme-toggle__star--three { right: 1.3rem; bottom: .3rem; width: .12rem; height: .12rem; }

.theme-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.theme-dark .theme-toggle {
    border-color: rgba(143, 164, 230, .32);
    background: #172d64;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3), 0 3px 10px rgba(0, 0, 0, .22);
}

.theme-dark .theme-toggle:hover,
.theme-dark .theme-toggle:focus-visible {
    background: #203b7a;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3), 0 4px 13px rgba(0, 0, 0, .28);
}

.theme-dark .theme-toggle__orb {
    background: #f7f0c7;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .25), inset 1px 1px 2px rgba(255, 255, 255, .75);
    transform: translateX(2rem);
}

.theme-dark .theme-toggle__orb::before,
.theme-dark .theme-toggle__orb::after {
    opacity: 1;
}

.theme-dark .theme-toggle__cloud {
    opacity: 0;
    transform: translateY(.25rem);
}

.theme-dark .theme-toggle__star {
    opacity: .9;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle,
    .theme-toggle__orb,
    .theme-toggle__cloud,
    .theme-toggle__star {
        transition-duration: .01ms !important;
    }
}

.theme-toggle-floating {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1050;
}

/* Public landing pages use a compact sun/moon icon instead of the dashboard capsule. */
body.cw-body .landing-navbar .theme-toggle--public,
body.cw-auth-body .theme-toggle-floating.theme-toggle--public {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    overflow: visible;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--cw-ink, #104944) !important;
}

body.cw-body .landing-navbar .theme-toggle--public::before,
body.cw-auth-body .theme-toggle-floating.theme-toggle--public::before {
    display: none;
}

.theme-toggle--public .theme-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.2rem;
    line-height: 1;
    transition: transform .2s ease, color .2s ease;
}

.theme-toggle--public .theme-toggle__icon::before {
    display: block;
}

body.cw-body .landing-navbar .theme-toggle--public:hover,
body.cw-body .landing-navbar .theme-toggle--public:focus-visible,
body.cw-auth-body .theme-toggle-floating.theme-toggle--public:hover,
body.cw-auth-body .theme-toggle-floating.theme-toggle--public:focus-visible {
    border-color: rgba(22, 139, 125, .18);
    background: var(--cw-mint, #edf7f3) !important;
    color: var(--cw-teal, #168b7d) !important;
}

.theme-toggle--public:hover .theme-toggle__icon {
    transform: scale(1.1);
}

html:not(.theme-dark) body.cw-body .landing-navbar .theme-toggle--public,
html:not(.theme-dark) body.cw-auth-body .theme-toggle-floating.theme-toggle--public,
html.theme-dark body.cw-body .landing-navbar .theme-toggle--public,
html.theme-dark body.cw-auth-body .theme-toggle-floating.theme-toggle--public {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.theme-dark body.cw-body .landing-navbar .theme-toggle--public,
html.theme-dark body.cw-auth-body .theme-toggle-floating.theme-toggle--public {
    color: #f7e7a8 !important;
}

html:not(.theme-dark) body.cw-body .landing-navbar .theme-toggle--public:hover,
html:not(.theme-dark) body.cw-body .landing-navbar .theme-toggle--public:focus-visible,
html:not(.theme-dark) body.cw-auth-body .theme-toggle-floating.theme-toggle--public:hover,
html:not(.theme-dark) body.cw-auth-body .theme-toggle-floating.theme-toggle--public:focus-visible,
html.theme-dark body.cw-body .landing-navbar .theme-toggle--public:hover,
html.theme-dark body.cw-body .landing-navbar .theme-toggle--public:focus-visible,
html.theme-dark body.cw-auth-body .theme-toggle-floating.theme-toggle--public:hover,
html.theme-dark body.cw-auth-body .theme-toggle-floating.theme-toggle--public:focus-visible {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.theme-dark body.cw-body .landing-navbar .theme-toggle--public:hover .theme-toggle__icon,
html.theme-dark body.cw-auth-body .theme-toggle-floating.theme-toggle--public:hover .theme-toggle__icon {
    color: #ffeaa8 !important;
}

/* Auth pages use the same icon-only navbar control as the landing page. */
body.cw-auth-body .landing-navbar .theme-toggle--public {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    overflow: visible;
    border-color: transparent !important;
    border-radius: 50%;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--cw-ink, #104944) !important;
}

body.cw-auth-body .landing-navbar .theme-toggle--public::before {
    display: none;
}

html.theme-dark body.cw-auth-body .landing-navbar .theme-toggle--public {
    color: #f7e7a8 !important;
}

body.cw-auth-body .landing-navbar .theme-toggle--public:hover,
body.cw-auth-body .landing-navbar .theme-toggle--public:focus-visible {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.theme-dark body.cw-auth-body .landing-navbar .theme-toggle--public:hover .theme-toggle__icon {
    color: #ffeaa8 !important;
}

.sidebar-wrapper .sidebar-header > .d-flex > .logo {
    min-width: 0;
    flex: 1 1 auto;
    overflow: visible;
}

.sidebar-wrapper .sidebar-header .logo .spektra-brand-image {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-position: center;
    transform: scale(1.2);
}

.sidebar-wrapper .sidebar-header > .d-flex { gap: .35rem !important; }

.sidebar-wrapper .sidebar-header .logo .spektra-brand {
    gap: .45rem;
    max-width: 100%;
}

.sidebar-wrapper .sidebar-header .theme-toggle--sidebar,
.sidebar-wrapper .sidebar-header .toggler {
    flex: 0 0 auto;
}

/* Extra compact branding for the narrow sidebar header. */
.sidebar-wrapper .sidebar-header {
    padding: 1.15rem 1rem .65rem;
}

.spektra-brand-sidebar .spektra-brand-mark {
    width: 1.5rem;
    height: 1.5rem;
}

.spektra-brand-sidebar .spektra-brand-name {
    font-size: 1.08rem;
    letter-spacing: .025em;
}

.theme-toggle--sidebar {
    width: 3.25rem;
    height: 1.7rem;
    min-width: 3.25rem;
    min-height: 1.7rem;
}

.theme-toggle--sidebar .theme-toggle__orb {
    top: .2rem;
    left: .2rem;
    width: 1.25rem;
    height: 1.25rem;
}

.theme-dark .theme-toggle--sidebar .theme-toggle__orb {
    transform: translateX(1.55rem);
}

.dashboard-menu-card .icon-wrapper,
.dashboard-stat-card .stats-icon {
    line-height: 1;
}

.icon-wrapper > .bi,
.icon-circle > .bi,
.dashboard-stat-card .stats-icon > .bi {
    display: inline-flex;
    width: auto;
    height: auto;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Compatibility aliases for icon names used by older feature views. */
.bi-bank2::before,
.bi-building-gear::before,
.bi-buildings::before,
.bi-building-x::before { content: "\f1dd"; }
.bi-check-lg::before { content: "\f26e"; }
.bi-clipboard2-check::before { content: "\f28b"; }
.bi-copy::before { content: "\f3a2"; }
.bi-database::before { content: "\f2ac"; }
.bi-file-earmark-pdf::before { content: "\f36b"; }
.bi-graph-up-arrow::before { content: "\f17e"; }
.bi-magic::before { content: "\f44c"; }
.bi-mortarboard::before,
.bi-mortarboard-fill::before { content: "\f194"; }
.bi-person-heart::before,
.bi-person-standing::before,
.bi-person-standing-dress::before,
.bi-person-workspace::before { content: "\f4ba"; }
.bi-plus-lg::before { content: "\f4d7"; }
.bi-sliders2::before { content: "\f543"; }
.bi-stars::before { content: "\f55d"; }
.bi-x-lg::before { content: "\f5ee"; }

/* Final dark-mode contrast pass for legacy feature views. */
.theme-dark #main .text-dark,
.theme-dark #main .text-body,
.theme-dark #main .text-dark-emphasis,
.theme-dark #main label,
.theme-dark #main .form-label,
.theme-dark #main .section-label,
.theme-dark #main .accuracy-head,
.theme-dark #main .dh-subtitle,
.theme-dark #main .stat-val,
.theme-dark #main .stat-num {
    color: #dce3f5 !important;
}

.theme-dark #main .text-muted,
.theme-dark #main .small.text-muted,
.theme-dark #main .card-text.text-muted {
    color: #9eabd0 !important;
}

.theme-dark #main .bg-white,
.theme-dark #main .bg-light,
.theme-dark #main .card-header.bg-white,
.theme-dark #main .card-footer.bg-white,
.theme-dark #main [style*="background:#fff;"],
.theme-dark #main [style*="background: #fff;"],
.theme-dark #main [style*="background-color:#fff;"],
.theme-dark #main [style*="background-color: #fff;"] {
    color: #bdc5d7 !important;
    background-color: #1d263d !important;
    border-color: #34415f !important;
}

.theme-dark #main .icon-wrapper,
.theme-dark #main .icon-circle,
.theme-dark #main .detail-stat,
.theme-dark #main .student-assessment-summary-icon,
.theme-dark #main .student-results-section-icon {
    color: #dce3f5 !important;
    background: #293552 !important;
    border-color: #46567d !important;
}

.theme-dark #main .profil-card,
.theme-dark #main .irp-count,
.theme-dark #main .irp-card,
.theme-dark #main .irp-locked-box,
.theme-dark #main .att-card,
.theme-dark #main .hs-card,
.theme-dark #main .exam-card,
.theme-dark #main .empty-card,
.theme-dark #main .dh-card,
.theme-dark #main .exam-modal-section,
.theme-dark #main .exam-option-card,
.theme-dark #main .access-mode-card,
.theme-dark #main .access-summary,
.theme-dark #main .permission-section {
    color: #bdc5d7 !important;
    background: #1d263d !important;
    border-color: #34415f !important;
}

.theme-dark #main .result-table tbody td,
.theme-dark #main .result-table tbody tr.row-err td {
    color: #bdc5d7 !important;
    background: #1d263d !important;
    border-color: #34415f !important;
}

.theme-dark #main .irp-checkmark {
    color: #bdc5d7;
    background: #293552 !important;
    border-color: #53648f !important;
}

.theme-dark #main .btn-icon:hover,
.theme-dark #main .user-type-tab:hover {
    color: #fff !important;
    background: #293552 !important;
}

/* Superadmin role screens use local light tokens, so override them as a
   component group to keep index, create, and edit views consistent. */
.theme-dark #main .role-table thead th {
    color: #c7d0e5 !important;
    background: #232e48 !important;
    border-color: #34415f !important;
}

.theme-dark #main .role-table tbody td {
    color: #bdc5d7 !important;
    background: #1d263d !important;
    border-color: #34415f !important;
}

.theme-dark #main .role-table tbody tr:hover td {
    background: #293552 !important;
}

.theme-dark #main .entity-name,
.theme-dark #main .role-builder .section-title,
.theme-dark #main .role-builder .mode-title,
.theme-dark #main .role-builder .permission-section-head h6,
.theme-dark #main .role-builder .permission-item .menu-label {
    color: #e8ecf7 !important;
}

.theme-dark #main .entity-meta,
.theme-dark #main .role-access-count,
.theme-dark #main .role-builder .form-text,
.theme-dark #main .role-builder .role-helper,
.theme-dark #main .role-builder .mode-description,
.theme-dark #main .role-builder .summary-label,
.theme-dark #main .role-builder .permission-section-head .section-meta {
    color: #9eabd0 !important;
}

.theme-dark #main .role-type-admin,
.theme-dark #main .role-type-guru,
.theme-dark #main .role-type-siswa,
.theme-dark #main .role-access-label.is-full,
.theme-dark #main .role-access-label.is-custom,
.theme-dark #main .role-source-label.is-system,
.theme-dark #main .role-source-label.is-manual {
    color: #dce3f5 !important;
    background: #293552 !important;
    border-color: #46567d !important;
}

.theme-dark #main .role-actions .btn-icon {
    color: #dce3f5 !important;
    background: #293552 !important;
    border-color: #46567d !important;
}

.theme-dark #main .role-actions .btn-icon:hover {
    color: #fff !important;
    background: #3a4a70 !important;
}

.theme-dark #main .role-builder .form-label,
.theme-dark #main .role-builder .section-select-label,
.theme-dark #main .role-builder .crud-option {
    color: #dce3f5 !important;
}

.theme-dark #main .role-builder .access-mode-card,
.theme-dark #main .role-builder .access-summary,
.theme-dark #main .role-builder .permission-section,
.theme-dark #main .role-builder .permission-section-head,
.theme-dark #main .role-builder .permission-item {
    color: #bdc5d7 !important;
    background: #1d263d !important;
    border-color: #34415f !important;
}

.theme-dark #main .role-builder .access-mode-card.is-selected,
.theme-dark #main .role-builder .permission-section-head,
.theme-dark #main .role-builder .access-summary .badge,
.theme-dark #main .role-builder .required-label {
    color: #dce3f5 !important;
    background: #293552 !important;
    border-color: #53648f !important;
}

.theme-dark #main .role-builder .permission-item {
    border-bottom-color: #34415f !important;
}

.theme-dark #main .role-builder .crud-legend,
.theme-dark #main .role-builder .crud-legend b {
    color: #9eabd0 !important;
}

.theme-dark #main .role-builder .crud-legend-title {
    color: #9eafff !important;
}

.theme-dark #main .role-builder .crud-option {
    color: #c7d0e5 !important;
    background: #293552 !important;
    border-color: #46567d !important;
}

.theme-dark #main .role-builder .crud-option:has(input:checked) {
    color: #fff !important;
    background: #435ebe !important;
    border-color: #7187e6 !important;
}

.theme-dark #main .role-builder .crud-option:has(input:disabled) {
    color: #7f8eae !important;
    background: #232e48 !important;
    border-color: #34415f !important;
}

/* Role-specific avatars: lightweight, consistent, and theme-aware. */
.spektra-role-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    overflow: hidden;
    border-radius: 50%;
    color: #fff;
    background: #435ebe;
    box-shadow: 0 0.2rem 0.55rem rgba(67, 94, 190, 0.22);
}

.spektra-role-avatar > .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    font-size: 1rem;
    line-height: 1;
}

.spektra-role-avatar > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.spektra-role-avatar--header {
    width: 2rem;
    height: 2rem;
}

.spektra-role-avatar--sidebar {
    width: 2rem;
    height: 2rem;
    border-radius: 0.55rem;
}

.spektra-role-avatar--superadmin {
    background: #7c5ce0;
    box-shadow: 0 0.2rem 0.55rem rgba(124, 92, 224, 0.24);
}

.spektra-role-avatar--admin {
    background: #435ebe;
}

.spektra-role-avatar--guru {
    background: #20b486;
    box-shadow: 0 0.2rem 0.55rem rgba(32, 180, 134, 0.24);
}

.spektra-role-avatar--siswa {
    background: #57caeb;
    box-shadow: 0 0.2rem 0.55rem rgba(87, 202, 235, 0.24);
}

.theme-dark .spektra-role-avatar {
    color: #fff;
    box-shadow: 0 0.25rem 0.7rem rgba(0, 0, 0, 0.28);
}

.theme-dark .spektra-role-avatar--superadmin {
    background: #7565d8;
}

.theme-dark .spektra-role-avatar--admin {
    background: #5a70d6;
}

.theme-dark .spektra-role-avatar--guru {
    background: #2ebd95;
}

.theme-dark .spektra-role-avatar--siswa {
    background: #3caecc;
}

/* Profile and logout actions live in the sidebar. */
.sidebar-account {
    margin: .65rem 1.5rem 1rem;
    padding-top: .7rem;
    border-top: 1px solid #e6eaf1;
}

.sidebar-account-label {
    margin: 0 .78rem .35rem;
    color: #7c8db5;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sidebar-account form {
    margin: 0;
}

.sidebar-account-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    min-height: 2.45rem;
    padding: .56rem .78rem;
    border: 0;
    border-radius: .5rem;
    color: #607080;
    background: transparent;
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color .14s ease, background-color .14s ease;
}

.sidebar-account-link i {
    width: 1rem;
    color: #7c8db5;
    font-size: 1rem;
    text-align: center;
}

.sidebar-account-link:hover,
.sidebar-account-link.active {
    color: #435ebe;
    background: #f0f1f5;
}

.sidebar-account-link:hover i,
.sidebar-account-link.active i {
    color: #435ebe;
}

.sidebar-account-logout {
    color: #d9534f;
}

.sidebar-account-logout i {
    color: #d9534f;
}

.sidebar-account-logout:hover {
    color: #c23b37;
    background: #fff0f0;
}

.theme-dark .sidebar-account {
    border-top-color: #34415f;
}

.theme-dark .sidebar-account-label {
    color: #98a6c6;
}

.theme-dark .sidebar-account-link {
    color: #c7d0e5;
}

.theme-dark .sidebar-account-link i {
    color: #9eabd0;
}

.theme-dark .sidebar-account-link:hover,
.theme-dark .sidebar-account-link.active {
    color: #fff;
    background: #293552;
}

.theme-dark .sidebar-account-link:hover i,
.theme-dark .sidebar-account-link.active i {
    color: #fff;
}

.theme-dark .sidebar-account-logout,
.theme-dark .sidebar-account-logout i {
    color: #ff9b9b;
}

.theme-dark .sidebar-account-logout:hover {
    color: #ffd3d3;
    background: #4b2d3b;
}

/* Keep the dark-mode stars on the open side of the moon. */
.theme-dark .theme-toggle__star--one {
    top: .35rem;
    right: auto;
    left: .55rem;
}

.theme-dark .theme-toggle__star--two {
    top: .5rem;
    right: auto;
    left: 1.2rem;
}

.theme-dark .theme-toggle__star--three {
    right: auto;
    bottom: .3rem;
    left: .78rem;
}

/* User-access tabs and table: one dark surface system for the whole panel. */
.user-access-card { transition: none; }

.user-access-card.is-loading {
    pointer-events: none;
}

.theme-dark #main .user-access-card,
.theme-dark #main .user-access-card > .card-header,
.theme-dark #main .user-access-card > .card-body,
.theme-dark #main .user-access-card > .card-footer {
    color: #bdc5d7 !important;
    background: #1d263d !important;
    border-color: #34415f !important;
}

.theme-dark #main .user-access-card .user-type-tab {
    color: #9eabd0 !important;
}

.theme-dark #main .user-access-card .user-type-tab:hover {
    color: #fff !important;
    background: #293552;
}

.theme-dark #main .user-access-card .user-type-tab.active {
    color: #f1f4fb !important;
    border-bottom-color: #9eafff;
}

.theme-dark #main .user-access-card .user-type-count {
    color: #c7d0e5 !important;
    background: #293552 !important;
}

.theme-dark #main .user-access-card .form-control,
.theme-dark #main .user-access-card .form-select {
    color: #dce3f5 !important;
    background-color: #202b45 !important;
    border-color: #46567d !important;
}

.theme-dark #main .user-access-card .form-control::placeholder {
    color: #7f8eae !important;
}

.theme-dark #main .user-access-card .form-select option {
    color: #dce3f5;
    background: #202b45;
}

.theme-dark #main .user-access-card .btn-light,
.theme-dark #main .user-access-card .btn-link {
    color: #c7d0e5 !important;
}

.theme-dark #main .user-access-card .btn-light {
    background: #293552 !important;
    border-color: #46567d !important;
}

.theme-dark #main .user-access-card .btn-light:hover,
.theme-dark #main .user-access-card .btn-link:hover {
    color: #fff !important;
    background: #344568 !important;
}

.theme-dark #main .user-access-card .page-table thead th {
    color: #9eabd0 !important;
    background: #232e48 !important;
    border-color: #34415f !important;
}

.theme-dark #main .user-access-card .page-table tbody td {
    color: #bdc5d7 !important;
    background: #1d263d !important;
    border-color: #34415f !important;
}

.theme-dark #main .user-access-card .page-table tbody tr:hover td {
    background: #293552 !important;
}

.theme-dark #main .user-access-card .btn-icon.primary {
    color: #b9c8ff !important;
    background: #293b6a !important;
}

.theme-dark #main .user-access-card .btn-icon.primary:hover {
    color: #fff !important;
    background: #3a4f83 !important;
}

@media (prefers-reduced-motion: reduce) {
    .user-access-card { transition: none; }
}

/* Activity log dark-mode pass. */
.theme-dark #main .activity-log-header h1 {
    color: #f1f4fb !important;
}

.theme-dark #main .activity-log-header p,
.theme-dark #main .activity-log-time-clock,
.theme-dark #main .activity-log-user-meta,
.theme-dark #main .activity-log-pagination,
.theme-dark #main .activity-log-filter .text-muted {
    color: #9eabd0 !important;
}

.theme-dark #main .activity-log-panel > .card,
.theme-dark #main .activity-log-panel .card-header,
.theme-dark #main .activity-log-panel .card-body,
.theme-dark #main .activity-log-panel .card-footer {
    color: #bdc5d7 !important;
    background: #1d263d !important;
    border-color: #34415f !important;
}

.theme-dark #main .activity-log-panel .activity-log-tab {
    color: #9eabd0 !important;
}

.theme-dark #main .activity-log-panel .activity-log-tab:hover {
    color: #fff !important;
    background: #293552 !important;
}

.theme-dark #main .activity-log-panel .activity-log-tab.active {
    color: #f1f4fb !important;
    border-bottom-color: #9eafff;
}

.theme-dark #main .activity-log-panel .activity-log-count {
    color: #c7d0e5 !important;
    background: #293552 !important;
}

.theme-dark #main .activity-log-filter .form-label {
    color: #c7d0e5 !important;
}

.theme-dark #main .activity-log-panel .form-control,
.theme-dark #main .activity-log-panel .form-select {
    color: #dce3f5 !important;
    background-color: #202b45 !important;
    border-color: #46567d !important;
}

.theme-dark #main .activity-log-panel .form-select option {
    color: #dce3f5;
    background: #202b45;
}

.theme-dark #main .activity-log-panel .btn-outline-secondary {
    color: #c7d0e5 !important;
    border-color: #53648f !important;
}

.theme-dark #main .activity-log-panel .btn-outline-secondary:hover {
    color: #fff !important;
    background: #293552 !important;
}

.theme-dark #main .activity-log-panel .page-table thead th {
    color: #9eabd0 !important;
    background: #232e48 !important;
    border-color: #34415f !important;
}

.theme-dark #main .activity-log-panel .page-table tbody td {
    color: #bdc5d7 !important;
    background: #1d263d !important;
    border-color: #34415f !important;
}

.theme-dark #main .activity-log-panel .page-table tbody tr:hover td {
    background: #293552 !important;
}

.theme-dark #main .activity-log-panel .pagination .page-link {
    color: #c7d0e5 !important;
    background: #202b45 !important;
    border-color: #46567d !important;
}

.theme-dark #main .activity-log-panel .pagination .page-link:hover {
    color: #fff !important;
    background: #293552 !important;
}

.theme-dark #main .activity-log-panel .pagination .page-item.active .page-link {
    color: #fff !important;
    background: #435ebe !important;
    border-color: #435ebe !important;
}

.theme-dark #main .activity-log-time-date,
.theme-dark #main .activity-log-user-name {
    color: #e8ecf7 !important;
}

.theme-dark #main .activity-log-panel .badge.text-bg-light {
    color: #dce3f5 !important;
    background: #293552 !important;
    border-color: #46567d !important;
}

.theme-dark #main .activity-log-panel .modal-content {
    color: #bdc5d7;
    background: #1d263d;
    border-color: #34415f;
}

.theme-dark #main .activity-log-panel .modal-header:not(.bg-danger),
.theme-dark #main .activity-log-panel .modal-footer {
    border-color: #34415f;
}

.theme-dark #main .activity-log-panel .modal-title,
.theme-dark #main .activity-log-panel .modal-body strong,
.theme-dark #main .activity-log-panel .modal-body dt,
.theme-dark #main .activity-log-panel .modal-body dd,
.theme-dark #main .activity-log-panel .modal-body .form-check-label {
    color: #e8ecf7 !important;
}

.theme-dark #main .activity-log-panel .modal-body .text-muted {
    color: #9eabd0 !important;
}

.theme-dark #main .activity-log-panel .modal-body code {
    color: #c6d2ff !important;
    background: #293552 !important;
}

.theme-dark #main .activity-log-panel .modal-header:not(.bg-danger) .btn-close {
    filter: invert(1) grayscale(1) brightness(1.8);
}

/* Compact shell after moving the account actions into the sidebar. */
#main {
    padding-top: 1.25rem;
}

#main > header.app-header {
    min-height: 2.35rem;
    margin-bottom: .9rem;
}

/* Render page content immediately after navigation. */
.page-content > :not(.modal):not(:has(.modal)),
.cw-page,
.cw-auth-page {
    animation: none;
    opacity: 1;
    transform: none;
}

/* Bootstrap modals use position: fixed. Keeping them inside an animated
   ancestor (especially one with transform) creates a new containing block and
   stacking context, which can leave the backdrop above the dialog and make
   the page feel frozen. */
.page-content,
.page-content > :has(.modal) {
    animation: none;
    transform: none;
}

@media screen and (max-width: 1199px) {
    #main {
        padding-top: 1rem;
    }

    #main > header.app-header {
        min-height: 2.5rem;
        margin-bottom: .85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-content > :not(.modal):not(:has(.modal)),
    .cw-page,
    .cw-auth-page {
        animation: none;
    }
}

/* Consistent footer shell for dashboard and student pages. */
#main {
    display: flex;
    flex-direction: column;
}

#main > .page-content {
    flex: 1 0 auto;
    width: 100%;
    min-width: 0;
}

.spektra-app-footer {
    flex: 0 0 auto;
    width: 100%;
    margin-top: 2rem;
    padding: .9rem 0 .2rem;
    border-top: 1px solid var(--spektra-border);
    color: var(--spektra-muted);
}

.spektra-app-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2rem;
    font-size: .78rem;
    line-height: 1.4;
}

.spektra-app-footer__inner span:last-child {
    text-align: right;
}

/* Clean public/auth footer using the same visual language. */
.spektra-site-footer {
    margin-top: clamp(3rem, 8vw, 6rem);
    padding: clamp(2.75rem, 6vw, 4.25rem) 0 1.25rem;
    color: #607080;
    background: #fff;
    border-top: 1px solid #e9edf5;
}

.spektra-site-footer__brand {
    margin-bottom: 1rem;
}

.spektra-site-footer__description {
    max-width: 34rem;
    margin: 0;
    color: #7c8db5;
    line-height: 1.7;
}

.spektra-site-footer__social {
    display: flex;
    gap: .55rem;
    margin-top: 1.35rem;
}

.spektra-site-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: #435ebe;
    background: #f1f4ff;
    border: 1px solid #dfe5fb;
    border-radius: .65rem;
    text-decoration: none;
    transition: color .16s ease, background-color .16s ease, transform .16s ease;
}

.spektra-site-footer__social-link:hover {
    color: #fff;
    background: #435ebe;
    transform: translateY(-2px);
}

.spektra-site-footer__title {
    margin: .15rem 0 1rem;
    color: #25396f;
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.spektra-site-footer__contact {
    display: grid;
    gap: .8rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.spektra-site-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    color: #607080;
    font-size: .88rem;
    line-height: 1.6;
}

.spektra-site-footer__contact i {
    flex: 0 0 1rem;
    margin-top: .2rem;
    color: #435ebe;
}

.spektra-site-footer__contact a {
    color: inherit;
    text-decoration: none;
}

.spektra-site-footer__contact a:hover {
    color: #435ebe;
}

.spektra-site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.15rem;
    border-top: 1px solid #e9edf5;
    color: #7c8db5;
    font-size: .78rem;
}

.spektra-site-footer__bottom p {
    margin: 0;
}

.spektra-site-footer__bottom nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1.25rem;
}

.spektra-site-footer__bottom a {
    color: #607080;
    text-decoration: none;
}

.spektra-site-footer__bottom a:hover {
    color: #435ebe;
}

.theme-dark .spektra-app-footer {
    color: #9eabd0;
    border-color: #34415f;
}

.theme-dark .spektra-site-footer {
    color: #bdc5d7;
    background: #1b2236;
    border-color: #2e3a57;
}

.theme-dark .spektra-site-footer .spektra-brand {
    color: #e8ecf7 !important;
}

.theme-dark .spektra-site-footer__description,
.theme-dark .spektra-site-footer__bottom {
    color: #aebbd5;
}

.theme-dark .spektra-site-footer__title {
    color: #e8ecf7;
}

.theme-dark .spektra-site-footer__contact li,
.theme-dark .spektra-site-footer__bottom a {
    color: #bdc5d7;
}

.theme-dark .spektra-site-footer__contact i {
    color: #9eafff;
}

.theme-dark .spektra-site-footer__social-link {
    color: #c6d2ff;
    background: #293552;
    border-color: #46567d;
}

.theme-dark .spektra-site-footer__social-link:hover {
    color: #fff;
    background: #435ebe;
}

.theme-dark .spektra-site-footer__bottom {
    border-color: #2e3a57;
}

/* Sidebar profile dropdown contains the profile and logout actions. */
.sidebar-wrapper .sidebar-context.dropdown {
    display: block;
    position: relative;
    padding: 0;
}

.sidebar-context-trigger {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .72rem .8rem;
    border: 0;
    color: #25396f;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.sidebar-context-trigger::after {
    display: none;
}

.sidebar-context-trigger:hover,
.sidebar-context-trigger:focus-visible {
    color: #435ebe;
    outline: none;
}

.sidebar-context-copy {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
}

.sidebar-context-copy .sidebar-context-title,
.sidebar-context-copy .sidebar-context-subtitle {
    display: block;
}

.sidebar-context-chevron {
    flex: 0 0 auto;
    margin-left: auto;
    color: #7c8db5;
    font-size: .72rem;
    transition: transform .16s ease, color .16s ease;
}

.sidebar-context-trigger[aria-expanded="true"] .sidebar-context-chevron {
    color: #435ebe;
    transform: rotate(180deg);
}

.sidebar-context-menu {
    width: calc(100% - 1rem);
    min-width: 0;
    margin: .4rem .5rem 0 !important;
    padding: .35rem;
    border: 1px solid var(--spektra-border);
    border-radius: .65rem;
    box-shadow: 0 .5rem 1.25rem rgba(35, 48, 86, .12);
}

.sidebar-context-menu form {
    margin: 0;
}

.sidebar-context-menu .sidebar-account-link {
    min-height: 2.35rem;
    padding: .55rem .65rem;
}

.sidebar-context-menu .sidebar-account-link:hover,
.sidebar-context-menu .sidebar-account-link.active {
    color: #435ebe;
    background: #f0f1f5;
}

.theme-dark .sidebar-context-trigger {
    color: #e8ecf7;
}

.theme-dark .sidebar-context-trigger:hover,
.theme-dark .sidebar-context-trigger:focus-visible,
.theme-dark .sidebar-context-trigger[aria-expanded="true"] .sidebar-context-chevron {
    color: #fff;
}

.theme-dark .sidebar-context-chevron {
    color: #9eabd0;
}

.theme-dark .sidebar-context-menu {
    background: #1d263d !important;
    border-color: #34415f;
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .24);
}

.theme-dark .sidebar-context-menu .sidebar-account-link {
    color: #c7d0e5;
}

.theme-dark .sidebar-context-menu .sidebar-account-link:hover,
.theme-dark .sidebar-context-menu .sidebar-account-link.active {
    color: #fff;
    background: #293552;
}

.theme-dark .sidebar-context-menu .sidebar-account-logout,
.theme-dark .sidebar-context-menu .sidebar-account-logout i {
    color: #ff9b9b;
}

.theme-dark #main .role-builder .view-only-label {
    color: #c6d2ff;
    background: #293552;
    border-color: #53648f;
}

.theme-dark #main .role-builder .crud-option--linked:has(input:disabled) {
    color: #c7d0e5 !important;
    background: #293552 !important;
    border-color: #46567d !important;
}

.theme-dark #main .role-builder .crud-option--linked:has(input:checked:disabled) {
    color: #fff !important;
    background: #435ebe !important;
    border-color: #7187e6 !important;
}

.theme-dark #main .role-builder .crud-option:has(input:checked:disabled) {
    color: #fff !important;
    background: #435ebe !important;
    border-color: #7187e6 !important;
}

@media (max-width: 575.98px) {
    .spektra-app-footer__inner,
    .spektra-site-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .spektra-app-footer__inner span:last-child {
        text-align: left;
    }

    .spektra-site-footer__bottom {
        gap: .75rem;
    }

    .spektra-site-footer__bottom nav {
        justify-content: flex-start;
        gap: .75rem 1rem;
    }
}

/* Shared light tokens for the field-builder toolbar after removing inline
   presentation styles from the Blade view. */
.fb-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #f3f4f6;
    background: #fff;
}

.fb-toolbar-title {
    color: #374151;
    font-size: .875rem;
    font-weight: 600;
}

.fb-toolbar-count {
    color: #9ca3af;
    font-size: .8rem;
}

.fb-empty-state {
    padding: 40px 20px;
    color: #9ca3af;
    font-size: .875rem;
    text-align: center;
}

.fb-empty-state strong {
    color: #6b7280;
}

/* Dark-mode cleanup for the legacy field-builder and announcement views.
   These views still contain a few inline light tokens because they predate
   the shared Mazer theme. Keep the selectors local and component-oriented so
   the rest of the dashboard is unaffected. */
.theme-dark #main .page-content .fb-toolbar {
    border-bottom-color: #34415f !important;
    background: #1d263d !important;
}

.theme-dark #main .page-content .fb-toolbar-title {
    color: #e8ecf7 !important;
}

.theme-dark #main .page-content .fb-toolbar-count,
.theme-dark #main .page-content .fb-sub,
.theme-dark #main .page-content .fb-empty-state {
    color: #9eabd0 !important;
}

.theme-dark #main .page-content .fb-row {
    border-bottom-color: #34415f !important;
    background: #1d263d !important;
}

.theme-dark #main .page-content .fb-row:hover {
    background: #293552 !important;
}

.theme-dark #main .page-content .fb-name {
    color: #e8ecf7 !important;
}

.theme-dark #main .page-content .fb-num {
    color: #c7d0e5 !important;
    background: #293552 !important;
}

.theme-dark #main .page-content .fb-handle {
    background-image: radial-gradient(circle, #7181aa 1.5px, transparent 1.5px) !important;
}

.theme-dark #main .page-content .fb-handle:hover {
    background-image: radial-gradient(circle, #c7d0e5 1.5px, transparent 1.5px) !important;
}

.theme-dark #main .page-content .fb-section {
    color: #9eabd0 !important;
    border-bottom-color: #34415f !important;
    background: #232e48 !important;
}

.theme-dark #main .page-content .fb-act {
    color: #9eabd0 !important;
}

.theme-dark #main .page-content .fb-act:hover {
    color: #fff !important;
    background: #3a4a70 !important;
}

.theme-dark #main .page-content .fb-act.danger:hover {
    color: #ffb0b0 !important;
    background: rgba(220, 53, 69, .2) !important;
}

.theme-dark #main .page-content .fb-empty-state strong {
    color: #c7d0e5 !important;
}

.theme-dark #main .page-content .fb-row.sortable-drag {
    background: #293552 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .28);
}

.theme-dark #main .page-content .modal-footer[style],
.theme-dark #main .page-content #opsiSection > div[style*="background"] {
    border-color: #34415f !important;
    background-color: transparent !important;
}

.theme-dark #main .page-content #opsiList .opsi-item {
    border-color: #34415f !important;
    background: #232e48 !important;
}

.theme-dark #main .page-content #opsiList .opsi-item > span {
    color: #c7d0e5 !important;
}

.theme-dark #main .page-content #previewContent [style*="background:#f0f4ff"] {
    color: #b8c7ff !important;
    background: #293552 !important;
}

.theme-dark #main .page-content #previewContent [style*="background:#f9fafb"] {
    color: #c7d0e5 !important;
    border-color: #34415f !important;
    background: #232e48 !important;
}

.theme-dark #main .page-content .announcement-list-card .card-header .text-primary {
    color: #c7d0e5 !important;
}

.theme-dark #main .page-content .announcement-list-card .table strong {
    color: #e8ecf7;
}

.theme-dark #main .page-content .announcement-manage-page .card,
.theme-dark #main .page-content .announcement-page .card {
    border-color: #34415f !important;
    background: #1d263d !important;
}

.theme-dark #main .page-content .announcement-manage-page .card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, .24) !important;
}

.theme-dark #main .page-content .announcement-manage-page .card-title,
.theme-dark #main .page-content .announcement-page .card-title {
    color: #e8ecf7 !important;
}

.theme-dark #main .page-content .announcement-manage-page .bg-light,
.theme-dark #main .page-content .announcement-page .bg-light {
    color: #c7d0e5 !important;
    background-color: #293552 !important;
}

.theme-dark #main .page-content .announcement-manage-page .btn-light,
.theme-dark #main .page-content .announcement-page .btn-light {
    color: #dce3f5 !important;
    border-color: #46567d !important;
    background-color: #293552 !important;
}

.theme-dark #main .page-content .announcement-page .timeline-item::before {
    background: #34415f;
}

.theme-dark #main .page-content .announcement-page .timeline-item::after {
    background: #7187e6;
    box-shadow: 0 0 0 4px #1d263d;
}

.theme-dark #main .page-content .announcement-page .card-header h5,
.theme-dark #main .page-content .announcement-page .card-body {
    color: #e8ecf7;
}

/* Final dashboard dark-mode audit. A number of older feature views define
   their own light tokens in inline style blocks, so keep this last layer
   intentionally broad and component-oriented. */
.theme-dark #main .table thead th,
.theme-dark #main .class-table thead th,
.theme-dark #main .package-table thead th,
.theme-dark #main .data-card .table thead th,
.theme-dark #main .assessment-table thead th {
    color: #c7d0e5 !important;
    background: #232e48 !important;
    border-color: #34415f !important;
}

.theme-dark #main .table tbody td,
.theme-dark #main .class-table tbody td,
.theme-dark #main .package-table tbody td,
.theme-dark #main .data-card .table tbody td,
.theme-dark #main .assessment-table tbody td {
    color: #bdc5d7 !important;
    background: #1d263d !important;
    border-color: #34415f !important;
}

.theme-dark #main .table-hover tbody tr:hover td,
.theme-dark #main .class-table tbody tr:hover td,
.theme-dark #main .package-table tbody tr:hover td,
.theme-dark #main .data-card .table tbody tr:hover td,
.theme-dark #main .assessment-table tbody tr:hover td {
    color: #fff !important;
    background: #293552 !important;
}

.theme-dark #main .stat-number,
.theme-dark #main .count-pill,
.theme-dark #main .item-count {
    color: #dce3f5 !important;
    background: #293552 !important;
    border-color: #46567d !important;
}

.theme-dark #main .stat-pill.guru {
    color: #d5c8ff !important;
    background: #393260 !important;
}

.theme-dark #main .stat-pill.kelas {
    color: #f5d58a !important;
    background: #4a3a12 !important;
}

.theme-dark #main .stat-pill.siswa {
    color: #b8d0ff !important;
    background: #293b6a !important;
}

.theme-dark #main .stat-pill.muted,
.theme-dark #main .btn-icon.muted {
    color: #9eabd0 !important;
    background: #232e48 !important;
    border-color: #34415f !important;
}

.theme-dark #main .btn-icon.success {
    color: #8be7c4 !important;
    background: #163f35 !important;
    border-color: #286b59 !important;
}

.theme-dark #main .btn-icon.primary {
    color: #b8c8ff !important;
    background: #293b6a !important;
    border-color: #536da8 !important;
}

.theme-dark #main .btn-icon.danger {
    color: #ffb0b0 !important;
    background: #4a2932 !important;
    border-color: #82404f !important;
}

.theme-dark #main .btn-icon.warning {
    color: #f5d58a !important;
    background: #4a3a12 !important;
    border-color: #80651d !important;
}

.theme-dark #main .btn-icon.success:hover,
.theme-dark #main .btn-icon.primary:hover,
.theme-dark #main .btn-icon.danger:hover,
.theme-dark #main .btn-icon.warning:hover,
.theme-dark #main .btn-icon.muted:hover {
    color: #fff !important;
    background: #3a4a70 !important;
    border-color: #7187e6 !important;
}

.theme-dark #main .btn-act,
.theme-dark #main .btn-act:hover,
.theme-dark #main .btn-act:focus-visible {
    color: #c7d0e5 !important;
    background: #293552 !important;
    border-color: #46567d !important;
}

.theme-dark #main .btn-act-del,
.theme-dark #main .btn-act-del:hover,
.theme-dark #main .btn-act-del:focus-visible {
    color: #ffb0b0 !important;
    background: #4a2932 !important;
    border-color: #82404f !important;
}

.theme-dark #main .exam-meta-pill,
.theme-dark #main .exam-meta-pill.general,
.theme-dark #main .exam-meta-pill.subject {
    color: #c7d0e5 !important;
    background: #293552 !important;
    border-color: #46567d !important;
}

.theme-dark #main .exam-meta-pill.school {
    color: #b8d0ff !important;
    background: #1f3b67 !important;
    border-color: #335d9d !important;
}

.theme-dark #main .exam-meta-pill.classroom {
    color: #9ee8c7 !important;
    background: #143e34 !important;
    border-color: #286b59 !important;
}

.theme-dark #main .exam-meta-pill.access {
    color: #f5d58a !important;
    background: #4a3a12 !important;
    border-color: #80651d !important;
}

.theme-dark #main .alert-light,
.theme-dark #main .alert.alert-light {
    color: #c7d0e5 !important;
    background: #232e48 !important;
    border-color: #34415f !important;
}

.theme-dark #main .package-code {
    color: #b8c8ff !important;
    background: #293b6a !important;
    border-color: #536da8 !important;
}

.theme-dark #main .bs-meta-box,
.theme-dark #main .stat-box {
    color: #c7d0e5 !important;
    background: #232e48 !important;
    border-color: #34415f !important;
}

.theme-dark #main .bs-meta-label,
.theme-dark #main .assessment-list-footer {
    color: #9eabd0 !important;
}

.theme-dark #main .bs-meta-value,
.theme-dark #main .bs-card-desc {
    color: #c7d0e5 !important;
}

.theme-dark #main .assessment-filter {
    background: #1d263d !important;
    border-color: #46567d !important;
}

.theme-dark #main .filter-button {
    color: #9eabd0 !important;
    background: transparent !important;
}

.theme-dark #main .filter-button:hover,
.theme-dark #main .filter-button.active {
    color: #dce3f5 !important;
    background: #293b6a !important;
}

.theme-dark #main .filter-button span {
    color: #9eabd0 !important;
}

.theme-dark #main .filter-button.active span {
    color: #b8c8ff !important;
}

.theme-dark #main .summary-icon-all,
.theme-dark #main .summary-icon-self,
.theme-dark #main .summary-icon-peer,
.theme-dark #main .summary-icon-item,
.theme-dark #main .empty-state-icon {
    border: 1px solid #46567d;
}

.theme-dark #main .summary-icon-all,
.theme-dark #main .empty-state-icon {
    color: #b8c8ff !important;
    background: #293b6a !important;
}

.theme-dark #main .summary-icon-self {
    color: #9edfff !important;
    background: #173d50 !important;
}

.theme-dark #main .summary-icon-peer {
    color: #9ee8c7 !important;
    background: #143e34 !important;
}

.theme-dark #main .summary-icon-item {
    color: #d2b8ff !important;
    background: #3b2d5e !important;
}

.theme-dark #main .assessment-type-self {
    color: #9edfff !important;
    background: #173d50 !important;
    border-color: #2c6b85 !important;
}

.theme-dark #main .assessment-type-peer {
    color: #9ee8c7 !important;
    background: #143e34 !important;
    border-color: #286b59 !important;
}

.theme-dark #main .assessment-toolbar,
.theme-dark #main .assessment-list-footer,
.theme-dark #main .assessment-summary-grid,
.theme-dark #main .assessment-summary-item {
    background: #232e48 !important;
    border-color: #34415f !important;
}

.theme-dark #main .assessment-toolbar .form-control {
    background: #182139 !important;
}

.theme-dark #main .assessment-empty-state h2,
.theme-dark #main .assessment-no-results h3,
.theme-dark #main .summary-value,
.theme-dark #main .bank-title,
.theme-dark #main .question-format,
.theme-dark #main .creator-name {
    color: #e8ecf7 !important;
}

.theme-dark #main .summary-label,
.theme-dark #main .question-format + small,
.theme-dark #main .assessment-empty-state p,
.theme-dark #main .assessment-no-results p {
    color: #9eabd0 !important;
}

.theme-dark #main .card.bg-primary { background-color: #3d50ad !important; }
.theme-dark #main .card.bg-success { background-color: #176f55 !important; }
.theme-dark #main .card.bg-info { background-color: #1b7182 !important; }
.theme-dark #main .card.bg-warning {
    color: #f8e6ad !important;
    background-color: #806116 !important;
}

.theme-dark #main .card.bg-warning .text-dark,
.theme-dark #main .card.bg-warning h1,
.theme-dark #main .card.bg-warning h2,
.theme-dark #main .card.bg-warning h3,
.theme-dark #main .card.bg-warning h4,
.theme-dark #main .card.bg-warning h5,
.theme-dark #main .card.bg-warning h6,
.theme-dark #main .card.bg-warning p {
    color: #f8e6ad !important;
}

.theme-dark #main [style*="background:#fff"],
.theme-dark #main [style*="background: #fff"],
.theme-dark #main [style*="background-color:#fff"],
.theme-dark #main [style*="background-color: #fff"],
.theme-dark #main [style*="background:#f8f9fa"],
.theme-dark #main [style*="background: #f8f9fa"],
.theme-dark #main [style*="background:#fbfcfd"],
.theme-dark #main [style*="background: #fbfcfd"] {
    color: #c7d0e5 !important;
    background: #232e48 !important;
    border-color: #34415f !important;
}

/* Analytics pages contain semantic badges as inline colors. Re-map those
   colors in dark mode while preserving their meaning. */
.theme-dark #main .an-attempt-badge,
.theme-dark #main .an-wrap [style*="#dbeafe"] {
    color: #b8d0ff !important;
    background: #293b6a !important;
    border-color: #536da8 !important;
}

.theme-dark #main .an-wrap [style*="#eff6ff"] {
    color: #b8d0ff !important;
    background: #293b6a !important;
    border-color: #536da8 !important;
}

.theme-dark #main .an-wrap [style*="#ede9fe"] {
    color: #d5c8ff !important;
    background: #393260 !important;
    border-color: #6254a0 !important;
}

.theme-dark #main .an-wrap [style*="#fef3c7"] {
    color: #f5d58a !important;
    background: #4a3a12 !important;
    border-color: #80651d !important;
}

.theme-dark #main .an-wrap [style*="#fee2e2"] {
    color: #ffb0b0 !important;
    background: #4a2932 !important;
    border-color: #82404f !important;
}

.theme-dark #main .an-wrap .badge.bg-light,
.theme-dark #main .an-wrap .modal-header.bg-light {
    color: #c7d0e5 !important;
    background: #293552 !important;
    border-color: #46567d !important;
}

.theme-dark #main .text-bg-info {
    color: #d5f4ff !important;
    background-color: #1b7182 !important;
}

.theme-dark #main .text-bg-warning {
    color: #f8e6ad !important;
    background-color: #806116 !important;
}

.theme-dark #main .text-bg-danger {
    color: #ffd0d0 !important;
    background-color: #8c3548 !important;
}

/* Shared teacher/student result and profile components. */
.theme-dark #main .kelas-pill {
    color: #b8d0ff !important;
    background: #293b6a !important;
    border-color: #536da8 !important;
}

.theme-dark #main .kelas-pill .tahun {
    color: #9eabd0 !important;
}

.theme-dark #main .kelas-pill .siswa-count {
    color: #c7d8ff !important;
    background: #36518a !important;
}

.theme-dark #main .hs-type-cbt,
.theme-dark #main .sbg-done,
.theme-dark #main .btn-action-success {
    color: #9ee8c7 !important;
    background: #143e34 !important;
    border-color: #286b59 !important;
}

.theme-dark #main .hs-type-cat,
.theme-dark #main .sbg-ongoing,
.theme-dark #main .hs-btn-view,
.theme-dark #main .btn-action {
    color: #b8d0ff !important;
    background: #293b6a !important;
    border-color: #536da8 !important;
}

.theme-dark #main .sbg-pending,
.theme-dark #main .hs-btn-reset {
    color: #f5d58a !important;
    background: #4a3a12 !important;
    border-color: #80651d !important;
}

.theme-dark #main .hs-btn-del {
    color: #ffb0b0 !important;
    background: #4a2932 !important;
    border-color: #82404f !important;
}

.theme-dark #main .hs-btn-view:hover,
.theme-dark #main .hs-btn-reset:hover,
.theme-dark #main .hs-btn-del:hover,
.theme-dark #main .btn-action:hover,
.theme-dark #main .btn-action-success:hover {
    color: #fff !important;
    background: #3a4a70 !important;
    border-color: #7187e6 !important;
}

.theme-dark #main .tipe-badge-static.cat,
.theme-dark #main .tipe-badge-static.self {
    color: #b8d0ff !important;
    background: #293b6a !important;
    border-color: #536da8 !important;
}

.theme-dark #main .tipe-badge-static.cbt,
.theme-dark #main .tipe-badge-static.peer {
    color: #9ee8c7 !important;
    background: #143e34 !important;
    border-color: #286b59 !important;
}

.theme-dark #main .modal-dialog-scrollable .modal-body {
    color: #c7d0e5;
    background: #182139 !important;
}

.theme-dark #main .exam-modal-section,
.theme-dark #main .exam-option-card,
.theme-dark #main .detail-section,
.theme-dark #main .meta-block,
.theme-dark #main .pilihan-item {
    color: #c7d0e5 !important;
    background: #232e48 !important;
    border-color: #34415f !important;
}

.theme-dark #main .exam-option-card:has(.form-check-input:checked),
.theme-dark #main .pilihan-item.correct {
    color: #dce3f5 !important;
    background: #293b6a !important;
    border-color: #7187e6 !important;
}

.theme-dark #main .soal-card .card-header,
.theme-dark #main .soal-table thead th,
.theme-dark #main .empty-sec {
    color: #c7d0e5 !important;
    background: #232e48 !important;
    border-color: #34415f !important;
}

.theme-dark #main .soal-table tbody td,
.theme-dark #main .meta-detail-pill {
    color: #c7d0e5 !important;
    background: #1d263d !important;
    border-color: #34415f !important;
}

.theme-dark #main .bp-green {
    color: #9ee8c7 !important;
    background: #143e34 !important;
}

.theme-dark #main .bp-blue {
    color: #b8d0ff !important;
    background: #293b6a !important;
}

.theme-dark #main .bp-yellow {
    color: #f5d58a !important;
    background: #4a3a12 !important;
}

.theme-dark #main .bp-red {
    color: #ffb0b0 !important;
    background: #4a2932 !important;
}

/* Student-facing dashboard pages use their own light wrappers and pills. */
.theme-dark #main .profil-wrap,
.theme-dark #main .irp-page,
.theme-dark #main .hs-wrap {
    color: #bdc5d7 !important;
    background: #151a2d !important;
}

.theme-dark #main .profil-card,
.theme-dark #main .irp-card,
.theme-dark #main .exam-card,
.theme-dark #main .att-card {
    color: #bdc5d7 !important;
    background: #1d263d !important;
    border-color: #34415f !important;
}

.theme-dark #main .type-cat {
    color: #b8d0ff !important;
    background: #293b6a !important;
}

.theme-dark #main .type-cbt {
    color: #9ee8c7 !important;
    background: #143e34 !important;
}

.theme-dark #main .last-result,
.theme-dark #main .irp-rule,
.theme-dark #main .irp-option,
.theme-dark #main .irp-option-locked,
.theme-dark #main .irp-option.is-unavailable {
    color: #c7d0e5 !important;
    background: #232e48 !important;
    border-color: #34415f !important;
}

.theme-dark #main .irp-option:hover,
.theme-dark #main .irp-option.is-selected {
    color: #dce3f5 !important;
    background: #293b6a !important;
    border-color: #7187e6 !important;
}

.theme-dark #main .irp-option-content,
.theme-dark #main .last-result-val {
    color: #e8ecf7 !important;
}

.theme-dark #main .last-result-lbl,
.theme-dark #main .last-result-meta,
.theme-dark #main .irp-rule,
.theme-dark #main .irp-year {
    color: #9eabd0 !important;
}

.theme-dark #main .irp-locked-label,
.theme-dark #main .irp-year {
    background: #293552 !important;
    border-color: #46567d !important;
}

.theme-dark #main .irp-actions {
    color: #c7d0e5 !important;
    background: #232e48 !important;
    border-color: #34415f !important;
}

.theme-dark #main .irp-checkmark {
    color: transparent;
    background: #182139 !important;
    border-color: #53648f !important;
}

.theme-dark #main .irp-option.is-selected .irp-checkmark {
    color: #fff !important;
    background: #435ebe !important;
    border-color: #7187e6 !important;
}

/* Dark-mode foreground audit for legacy icons, links, badges, and outline controls. */
.theme-dark #main .class-name {
    color: #e8ecf7 !important;
}

.theme-dark #main .class-name i {
    color: #b8c8ff !important;
    background: #293b6a !important;
    border-color: #536da8 !important;
}

.theme-dark #main .btn-outline-primary,
.theme-dark #main .btn-outline-primary i,
.theme-dark #main .btn-outline-primary .bi,
.theme-dark #main i.text-primary,
.theme-dark #main a.text-primary {
    color: #b8c8ff !important;
}

.theme-dark #main .btn-outline-primary {
    border-color: #7187e6 !important;
    background: transparent !important;
}

.theme-dark #main .btn-outline-primary:hover,
.theme-dark #main .btn-outline-primary:hover i,
.theme-dark #main .btn-outline-primary:hover .bi {
    color: #fff !important;
    background: #293b6a !important;
    border-color: #8ea7ff !important;
}

.theme-dark #main .btn-outline-danger,
.theme-dark #main .btn-outline-danger i,
.theme-dark #main .btn-outline-danger .bi,
.theme-dark #main .text-danger {
    color: #ffb0b0 !important;
}

.theme-dark #main .btn-outline-danger {
    border-color: #a85464 !important;
    background: transparent !important;
}

.theme-dark #main .btn-outline-danger:hover,
.theme-dark #main .btn-outline-danger:hover i,
.theme-dark #main .btn-outline-danger:hover .bi {
    color: #fff !important;
    background: #4a2932 !important;
    border-color: #ff9b9b !important;
}

.theme-dark #main .btn-icon,
.theme-dark #main .btn-icon i,
.theme-dark #main .btn-icon .bi {
    color: #c7d0e5 !important;
}

.theme-dark #main .btn-icon:hover,
.theme-dark #main .btn-icon:hover i,
.theme-dark #main .btn-icon:hover .bi {
    color: #fff !important;
    background: #293552 !important;
}

.theme-dark #main .dashboard-action > i:first-child,
.theme-dark #main .dashboard-action > i:last-child,
.theme-dark #main .menu-link i,
.theme-dark #main .bi.text-primary {
    color: #b8c8ff !important;
}

.theme-dark #main .dashboard-action small,
.theme-dark #main .stat-lbl,
.theme-dark #main .an-stat-lbl,
.theme-dark #main .hs-stat-lbl,
.theme-dark #main .mt-3.pt-3.border-top {
    color: #9eabd0 !important;
}

.theme-dark #main .var-tag {
    color: #b8d0ff !important;
    background: #293b6a !important;
    border-color: #536da8 !important;
}

.theme-dark #main .badge.bg-primary.bg-opacity-10,
.theme-dark #main .badge.bg-primary.bg-opacity-25,
.theme-dark #main .badge.text-primary {
    color: #b8c8ff !important;
    background: #293b6a !important;
    border-color: #536da8 !important;
}

.theme-dark #main .badge.bg-success.bg-opacity-10,
.theme-dark #main .badge.bg-success.bg-opacity-25,
.theme-dark #main .badge.text-success {
    color: #9ee8c7 !important;
    background: #143e34 !important;
    border-color: #286b59 !important;
}

.theme-dark #main .badge.bg-warning.bg-opacity-10,
.theme-dark #main .badge.bg-warning.bg-opacity-25,
.theme-dark #main .badge.text-warning {
    color: #f5d58a !important;
    background: #4a3a12 !important;
    border-color: #80651d !important;
}

.theme-dark #main .badge.bg-info.bg-opacity-10,
.theme-dark #main .badge.bg-info.bg-opacity-25,
.theme-dark #main .badge.text-info {
    color: #9edfff !important;
    background: #173d50 !important;
    border-color: #2c6b85 !important;
}

/* Keep icon/text inside filled primary actions high-contrast after the semantic overrides above. */
.theme-dark #main .btn-primary,
.theme-dark #main .btn-primary i,
.theme-dark #main .btn-primary .bi {
    color: #fff !important;
}

/* Bank Soal tiles: keep the icon visible in light mode and centered in both themes. */
#main .page-content .bs-icon-wrap {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    flex: 0 0 3.25rem;
    line-height: 1;
    text-align: center;
}

#main .page-content .bs-icon-wrap > .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    font-size: 1.35rem;
    line-height: 1;
}

#main .page-content .bs-icon-wrap > .bi::before {
    vertical-align: 0;
}

#main .page-content .bank-soal-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 18rem;
    padding: 3.5rem 1.25rem !important;
    text-align: center;
}

#main .page-content .bank-soal-empty-state > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 0 1rem;
    color: #8b95a1;
    font-size: 2.75rem;
    line-height: 1;
}

#main .page-content .bank-soal-empty-state > h5 {
    margin: 0 0 .4rem;
    color: #6c757d;
}

#main .page-content .bank-soal-empty-state > p {
    margin: 0 0 1rem;
    color: #8b95a1;
}

#main .page-content .bank-soal-empty-state > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 12rem;
}

.theme-dark #main .page-content .bank-soal-empty-state > i {
    color: #9eabd0 !important;
}

.theme-dark #main .page-content .bank-soal-empty-state > h5 {
    color: #c7d0e5 !important;
}

.theme-dark #main .page-content .bank-soal-empty-state > p {
    color: #9eabd0 !important;
}

#main .page-content .bs-icon-wrap.bg-primary.bg-opacity-10 {
    color: #2457b8 !important;
    background: #eef4ff !important;
    border: 1px solid #d5e2ff !important;
}

#main .page-content .bs-icon-wrap.bg-primary.bg-opacity-10 > .bi {
    color: #2457b8 !important;
}

#main .page-content .bs-icon-wrap.bg-success.bg-opacity-10 {
    color: #137547 !important;
    background: #eefbf3 !important;
    border: 1px solid #ccebd7 !important;
}

#main .page-content .bs-icon-wrap.bg-success.bg-opacity-10 > .bi {
    color: #137547 !important;
}

.theme-dark #main .page-content .bs-icon-wrap.bg-primary.bg-opacity-10 {
    color: #b8c8ff !important;
    background: #293b6a !important;
    border-color: #46567d !important;
}

.theme-dark #main .page-content .bs-icon-wrap.bg-primary.bg-opacity-10 > .bi {
    color: #b8c8ff !important;
}

.theme-dark #main .page-content .bs-icon-wrap.bg-success.bg-opacity-10 {
    color: #9ee8c7 !important;
    background: #143e34 !important;
    border-color: #286b59 !important;
}

.theme-dark #main .page-content .bs-icon-wrap.bg-success.bg-opacity-10 > .bi {
    color: #9ee8c7 !important;
}

/*
 * The bundled Mazer Bootstrap build does not include Bootstrap 5's
 * bg-opacity utilities. Without these fallbacks, a badge such as
 * "CBT Fixed" receives the solid success background while its text is also
 * success green, making it look invisible in light mode. Keep semantic
 * badges soft and readable in both themes; the more specific .theme-dark
 * rules above continue to provide the dark palette.
 */
#main .badge.bg-primary.bg-opacity-10,
#main .badge.bg-primary.bg-opacity-25 {
    color: #2457b8 !important;
    background: #eef4ff !important;
    border: 1px solid #d5e2ff !important;
}

#main .badge.bg-success.bg-opacity-10,
#main .badge.bg-success.bg-opacity-25 {
    color: #137547 !important;
    background: #eefbf3 !important;
    border: 1px solid #ccebd7 !important;
}

#main .badge.bg-warning.bg-opacity-10,
#main .badge.bg-warning.bg-opacity-25 {
    color: #8a5a00 !important;
    background: #fff8e6 !important;
    border: 1px solid #f5dfaa !important;
}

#main .badge.bg-info.bg-opacity-10,
#main .badge.bg-info.bg-opacity-25 {
    color: #146c80 !important;
    background: #eefaff !important;
    border: 1px solid #c8eaf3 !important;
}

#main .badge.bg-danger.bg-opacity-10,
#main .badge.bg-danger.bg-opacity-25 {
    color: #b02a37 !important;
    background: #fff0f1 !important;
    border: 1px solid #f2cbd0 !important;
}

/* Kelola Assessment uses the same compact card language as Kelola Ujian. */
#main .page-content .assessment-card {
    overflow: hidden;
    border: 1px solid #e4e9f0 !important;
    transition: transform .18s ease, box-shadow .2s ease;
}

#main .page-content .assessment-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .1) !important;
}

#main .page-content .assessment-card .exam-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
}

#main .page-content .assessment-card .btn-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

#main .page-content .assessment-card .stat-box {
    padding: .6rem .5rem;
    text-align: center;
    border: 1px solid #e9ecef;
}

#main .page-content .assessment-card .stat-box .stat-val {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4em;
    color: #212529;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.25;
}

#main .page-content .assessment-card .stat-box .stat-lbl {
    color: #9ca3af;
    font-size: .68rem;
}

#main .page-content .assessment-card .exam-meta-pill.school {
    color: #0b5ed7;
    background: #eef6ff;
    border-color: #cfe2ff;
}

#main .page-content .assessment-card .exam-meta-pill.classroom {
    color: #137547;
    background: #eefbf3;
    border-color: #ccebd7;
}

#main .page-content .assessment-card .exam-meta-pill.access {
    color: #9a6700;
    background: #fff8e1;
    border-color: #f4d68c;
}

#main .page-content .assessment-card .exam-meta-pill.subject {
    color: #495057;
    background: #f8f9fa;
    border-color: #e5e7eb;
}

#main .page-content .assessment-card .exam-meta-pill.general {
    color: #6c757d;
    background: #f8f9fa;
    border-color: #e5e7eb;
}

.theme-dark #main .page-content .assessment-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22) !important;
}

.theme-dark #main .page-content .assessment-card .stat-box {
    color: #c7d0e5 !important;
    background: #232e48 !important;
    border-color: #34415f !important;
}

.theme-dark #main .page-content .assessment-card .stat-box .stat-val {
    color: #e8ecf7 !important;
}

.theme-dark #main .page-content .assessment-card .stat-box .stat-lbl {
    color: #9eabd0 !important;
}

/* Warning alerts must not keep the bright Bootstrap yellow in dark mode. */
.theme-dark #main .alert.alert-warning {
    color: #f5d58a !important;
    background: #3a3014 !important;
    border-color: #80651d !important;
}

.theme-dark #main .alert.alert-warning .bi,
.theme-dark #main .alert.alert-warning strong {
    color: #ffdf91 !important;
}

/* Keep dialogs above the mobile sidebar layer and above the backdrop. The
   Mazer sidebar uses z-index:1055 on small screens while Bootstrap's default
   modal is only 1050. */
#main .modal {
    z-index: 1060;
}

/* Activity-log dialogs are intentionally moved to body so they are not
   trapped by the page-content transition/transform. Keep them above the
   backdrop as well; otherwise the backdrop receives every click. */
body > .modal {
    z-index: 1060;
}

.modal-backdrop {
    z-index: 1050;
}

.modal.show {
    pointer-events: auto;
}

/* Shared selectable rows: local light-mode hover rules must not turn white
   when the page is using the dark theme. */
.theme-dark #main .page-content .access-mode-option:hover,
.theme-dark #main .page-content .class-option:hover,
.theme-dark #main .page-content .offering-option:hover,
.theme-dark #main .page-content .selection-option:hover,
.theme-dark #main .page-content .jadwal-student-option:hover,
.theme-dark #main .page-content .access-mode-card:hover,
.theme-dark #main .page-content .exam-option-card:hover {
    color: #e8ecf7 !important;
    background: #293552 !important;
    border-color: #53648f !important;
}

.theme-dark #main .page-content .access-mode-option:hover *,
.theme-dark #main .page-content .class-option:hover *,
.theme-dark #main .page-content .offering-option:hover *,
.theme-dark #main .page-content .selection-option:hover *,
.theme-dark #main .page-content .jadwal-student-option:hover *,
.theme-dark #main .page-content .access-mode-card:hover *,
.theme-dark #main .page-content .exam-option-card:hover * {
    color: inherit;
}

/* Native and Perfect Scrollbar surfaces must follow the dark theme too. */
.theme-dark,
.theme-dark * {
    scrollbar-color: #53648f #182139;
    scrollbar-width: thin;
}

.theme-dark *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.theme-dark *::-webkit-scrollbar-track {
    background: #182139;
}

.theme-dark *::-webkit-scrollbar-thumb {
    background: #53648f;
    border: 2px solid #182139;
    border-radius: 999px;
}

.theme-dark *::-webkit-scrollbar-thumb:hover {
    background: #7187e6;
}

.theme-dark .table-responsive,
.theme-dark .modal-body,
.theme-dark .dropdown-menu,
.theme-dark .sidebar-wrapper {
    scrollbar-color: #53648f #182139;
    scrollbar-width: thin;
}

.theme-dark .ps__rail-x,
.theme-dark .ps__rail-y {
    background-color: #182139 !important;
}

.theme-dark .ps__thumb-x,
.theme-dark .ps__thumb-y {
    background-color: #53648f !important;
}

.theme-dark .ps__rail-x:hover > .ps__thumb-x,
.theme-dark .ps__rail-y:hover > .ps__thumb-y,
.theme-dark .ps__rail-x:focus > .ps__thumb-x,
.theme-dark .ps__rail-y:focus > .ps__thumb-y {
    background-color: #7187e6 !important;
}

/* Give nested feature cards their own surface so they do not disappear into
   the surrounding dark page panel (most visible on Mata Pelajaran). */
.theme-dark #main .page-content .exam-page {
    background: #182139 !important;
    border-color: #34415f !important;
}

.theme-dark #main .page-content .exam-page .exam-card {
    color: #c7d0e5 !important;
    background: #232e48 !important;
    border: 1px solid #46567d !important;
    box-shadow: 0 .5rem 1.1rem rgba(0, 0, 0, .2) !important;
}

.theme-dark #main .page-content .exam-page .exam-card:hover {
    background: #293552 !important;
    border-color: #7187e6 !important;
    box-shadow: 0 .7rem 1.35rem rgba(0, 0, 0, .28) !important;
}

.theme-dark #main .page-content .exam-page .exam-card h5,
.theme-dark #main .page-content .exam-page .exam-card .fw-bold {
    color: #e8ecf7 !important;
}

/* Fallback for view-local Bootstrap utility tokens that are not attached to
   a component-specific class. This keeps older and newer feature pages in
   the same dark-mode color system. */
.theme-dark #main .text-primary,
.theme-dark #main .icon-circle.text-primary,
.theme-dark #main .menu-link,
.theme-dark #main .num-blue {
    color: #b8c8ff !important;
}

.theme-dark #main .text-success,
.theme-dark #main .num-green {
    color: #9ee8c7 !important;
}

.theme-dark #main .text-info {
    color: #9edfff !important;
}

.theme-dark #main .text-warning,
.theme-dark #main .num-amber {
    color: #f5d58a !important;
}

.theme-dark #main .num-slate {
    color: #e8ecf7 !important;
}

.theme-dark #main .bg-primary.bg-opacity-10,
.theme-dark #main .bg-primary.bg-opacity-25,
.theme-dark #main .bg-info.bg-opacity-10,
.theme-dark #main .bg-info.bg-opacity-25,
.theme-dark #main .bg-success.bg-opacity-10,
.theme-dark #main .bg-success.bg-opacity-25,
.theme-dark #main .bg-warning.bg-opacity-10,
.theme-dark #main .bg-warning.bg-opacity-25,
.theme-dark #main .bg-danger.bg-opacity-10,
.theme-dark #main .bg-danger.bg-opacity-25 {
    border-color: #46567d !important;
}

.theme-dark #main .bg-primary.bg-opacity-10,
.theme-dark #main .bg-primary.bg-opacity-25 {
    color: #b8c8ff !important;
    background: #293b6a !important;
}

.theme-dark #main .bg-info.bg-opacity-10,
.theme-dark #main .bg-info.bg-opacity-25 {
    color: #9edfff !important;
    background: #173d50 !important;
}

.theme-dark #main .bg-success.bg-opacity-10,
.theme-dark #main .bg-success.bg-opacity-25 {
    color: #9ee8c7 !important;
    background: #143e34 !important;
}

.theme-dark #main .bg-warning.bg-opacity-10,
.theme-dark #main .bg-warning.bg-opacity-25 {
    color: #f5d58a !important;
    background: #4a3a12 !important;
}

.theme-dark #main .bg-danger.bg-opacity-10,
.theme-dark #main .bg-danger.bg-opacity-25 {
    color: #ffb0b0 !important;
    background: #4a2932 !important;
}

.theme-dark #main .an-filter-head h6,
.theme-dark #main .an-chart-head p,
.theme-dark #main .hs-no,
.theme-dark #main .hs-dur-p,
.theme-dark #main .hs-attempt-note,
.theme-dark #main .hs-empty,
.theme-dark #main .hs-muted {
    color: #9eabd0 !important;
}

/* Re-map fixed inline palette values used by legacy result/detail views. */
.theme-dark #main [style*="#eff6ff"],
.theme-dark #main [style*="#eef2ff"],
.theme-dark #main [style*="#dbeafe"],
.theme-dark #main [style*="#e4e9ff"],
.theme-dark #main [style*="#f0f4ff"] {
    color: #b8c8ff !important;
    background: #293b6a !important;
    border-color: #536da8 !important;
}

.theme-dark #main [style*="#dcfce7"],
.theme-dark #main [style*="#ecfdf5"] {
    color: #9ee8c7 !important;
    background: #143e34 !important;
    border-color: #286b59 !important;
}

.theme-dark #main [style*="#fef9c3"],
.theme-dark #main [style*="#fef3c7"] {
    color: #f5d58a !important;
    background: #4a3a12 !important;
    border-color: #80651d !important;
}

.theme-dark #main [style*="#fee2e2"],
.theme-dark #main [style*="#fecaca"] {
    color: #ffb0b0 !important;
    background: #4a2932 !important;
    border-color: #82404f !important;
}

.theme-dark #main [style*="#f8fafc"],
.theme-dark #main [style*="#f9fafb"],
.theme-dark #main [style*="#f8f9fc"],
.theme-dark #main [style*="#f1f5f9"],
.theme-dark #main [style*="#f3f4f6"],
.theme-dark #main [style*="#eef1f5"],
.theme-dark #main [style*="#f8f9fa"] {
    color: #c7d0e5 !important;
    background: #232e48 !important;
    border-color: #34415f !important;
}

.theme-dark #main [style*="color:#0f172a"],
.theme-dark #main [style*="color: #0f172a"],
.theme-dark #main [style*="color:#1f2937"],
.theme-dark #main [style*="color: #1f2937"],
.theme-dark #main [style*="color:#334155"],
.theme-dark #main [style*="color: #334155"],
.theme-dark #main [style*="color:#374151"],
.theme-dark #main [style*="color: #374151"],
.theme-dark #main [style*="color:#475569"],
.theme-dark #main [style*="color: #475569"],
.theme-dark #main [style*="color:#64748b"],
.theme-dark #main [style*="color: #64748b"],
.theme-dark #main [style*="color:#9ca3af"],
.theme-dark #main [style*="color: #9ca3af"] {
    color: #c7d0e5 !important;
}

.theme-dark #main [style*="color:#1d4ed8"],
.theme-dark #main [style*="color: #1d4ed8"],
.theme-dark #main [style*="color:#2563eb"],
.theme-dark #main [style*="color: #2563eb"],
.theme-dark #main [style*="color:#3730a3"],
.theme-dark #main [style*="color: #3730a3"] {
    color: #b8c8ff !important;
}

/* Filled semantic buttons must retain white labels and icons. */
.theme-dark #main .btn-success,
.theme-dark #main .btn-success i,
.theme-dark #main .btn-success .bi,
.theme-dark #main .btn-info,
.theme-dark #main .btn-info i,
.theme-dark #main .btn-info .bi,
.theme-dark #main .btn-warning,
.theme-dark #main .btn-warning i,
.theme-dark #main .btn-warning .bi,
.theme-dark #main .btn-danger,
.theme-dark #main .btn-danger i,
.theme-dark #main .btn-danger .bi {
    color: #fff !important;
}

.theme-dark #main .btn-primary,
.theme-dark #main .btn-primary i,
.theme-dark #main .btn-primary .bi {
    color: #fff !important;
}