/* Custom CSS for UjianTadz - CBT Online
   Aesthetics aligned with the visual preview reference images */

/* ================================================================
   UjianTadz Design Tokens — single source of truth
   ================================================================ */
:root {
    /* Brand */
    --primary-700: #0F5FC7;
    --primary-600: #1677F2;
    --primary-500: #2585F5;
    --primary-100: #EAF3FF;
    --primary-50: #F4F9FF;

    /* Backward-compat aliases */
    --primary: #0F2035;
    --primary-blue: #1677F2;
    --primary-light: #EAF3FF;
    --primary-hover: #0F5FC7;
    --accent-sky: #2e86ab;

    /* Sidebar */
    --sidebar-bg: #0F2035;
    --sidebar-bg-dark: #0B1A2B;
    --sidebar-text: #F5F9FF;
    --sidebar-muted: #AFC0D5;
    --sidebar-icon: #D8E6F5;
    --sidebar-active: #1677F2;

    /* Surface */
    --background: #F4F8FC;
    --surface: #FFFFFF;
    --surface-soft: #F8FBFF;

    /* Border */
    --border: #E5EDF5;
    --divider: #EAF0F6;

    /* Text */
    --text-primary: #102A56;
    --text-secondary: #60758F;
    --text-muted: #8A9AAF;
    --text-disabled: #B7C2CF;
    --text-inverse: #FFFFFF;

    /* Backward-compat text aliases */
    --text-main: #102A56;
    --text-navy: #102A56;

    /* Semantic */
    --success: #35B878;
    --success-700: #23945E;
    --success-100: #EDF9F3;

    --warning: #F5A623;
    --warning-700: #C77A00;
    --warning-100: #FFF7E8;

    --danger: #F05A52;
    --danger-700: #D94740;
    --danger-100: #FFF0EF;

    --info: #4F9BE8;
    --info-100: #EDF5FF;

    --purple: #8566D8;
    --purple-100: #F4F0FF;

    /* Backward-compat semantic aliases */
    --success-light: #EDF9F3;
    --warning-light: #FFF7E8;
    --danger-light: #FFF0EF;
    --info-light: #EDF5FF;

    /* Legacy aliases used in some views */
    --bg-body: #F4F8FC;
    --card-bg: #FFFFFF;
    --border-color: #E5EDF5;

    /* Typography */
    --font-ui: "Inter", "Noto Sans", sans-serif;
    --font-arabic: "Noto Sans Arabic", "Noto Naskh Arabic", sans-serif;
    --font-religious: "Noto Naskh Arabic", "Noto Sans Arabic", serif;
    --font-symbol: "Noto Sans Symbols 2", "Noto Sans", sans-serif;

    /* Shape */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-xl: 16px;

    /* Button tokens — compact: semua tombol diperkecil se-aplikasi */
    --btn-radius: 6px;
    --btn-height: 34px;
    --btn-font-size: 13px;
    --btn-padding-x: 12px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* ================================================================
   GLOBAL BUTTON SYSTEM — UX_Lintas_Role §12-13, §32 (compact)
   Normal 34px/13px/radius 6px. rounded-pill HANYA untuk
   badge/status/chip, BUKAN default button aksi.
   ================================================================ */
.btn {
    min-height: var(--btn-height);
    padding: 0 var(--btn-padding-x);
    border-radius: var(--btn-radius);
    font-size: var(--btn-font-size);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1.4;
    white-space: nowrap;
}

.btn.btn-sm,
.btn-sm {
    min-height: 28px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 5px;
}

.btn.btn-lg,
.btn-lg {
    min-height: 38px;
    padding: 0 16px;
    font-size: 14px;
    border-radius: 8px;
}

/* Backward-compat: rounded-pill tetap valid untuk badge/status,
   jangan dipakai untuk button aksi normal (UX_Lintas_Role §33). */
.btn.rounded-pill {
    border-radius: 999px;
}

/* Button state — hover/active/disabled/loading (UX_Lintas_Role §16) */
.btn:disabled,
.btn.disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.btn .spinner-border {
    flex-shrink: 0;
}

/* Mobile CTA — compact, full width hanya bila dibutuhkan (UX_Lintas_Role §12, §25) */
@media (max-width: 575px) {
    .btn {
        min-height: 34px;
    }
}

/* ================================================================
   TOMBOL NETRAL BERKOTAK — Batal/Tutup/Kembali (btn-light) tampil
   sebagai kotak abu-abu berisi, bukan pucat. Berlaku se-aplikasi.
   ================================================================ */
.btn-light {
    --bs-btn-color: #fff;
    --bs-btn-bg: #64748b;
    --bs-btn-border-color: #64748b;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #475569;
    --bs-btn-hover-border-color: #475569;
    --bs-btn-focus-shadow-rgb: 100, 116, 139;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #475569;
    --bs-btn-active-border-color: #475569;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #94a3b8;
    --bs-btn-disabled-border-color: #94a3b8;
}

/* Tombol silang (X) modal — kotak berisi, merah muda saat hover */
.modal .btn-close {
    background-color: #f1f5f9;
    border-radius: 8px;
    padding: 8px;
    opacity: 1;
}
.modal .btn-close:hover {
    background-color: var(--danger-100);
    opacity: 1;
}

.badge {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
}

.badge.rounded-circle {
    border-radius: 50% !important;
}

/* ================================================================
   GLOBAL TABLE STYLE OVERRIDES
   ================================================================ */
.table {
    font-size: 0.82rem;
    border-collapse: collapse;
}

.table thead th,
.table thead.table-light th,
table.thead-light th {
    background-color: var(--sidebar-bg) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: none !important;
    padding: 10px 12px !important;
    vertical-align: middle !important;
    border-radius: 0 !important;
}

.table tbody td {
    padding: 10px 12px !important;
    vertical-align: middle !important;
    color: var(--text-primary);
    border-color: var(--border) !important;
}

.table tbody tr:nth-child(even) {
    background-color: var(--surface-soft);
}

.table tbody tr:hover {
    background-color: #edf2f8;
}

.table tfoot td {
    padding: 8px 12px !important;
    font-weight: 600;
    font-size: 0.78rem;
    background-color: var(--surface-soft);
    border-color: var(--border) !important;
}

body {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 400;
    background-color: var(--background);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

@media (max-width: 991px) {
    body {
        font-size: 13px;
    }
}

@media (max-width: 575px) {
    body {
        font-size: 12px;
    }
}

/* Typography — judul selalu lebih tebal dari subteks (body 400) */
h1, h2, h3 {
    font-weight: 800;
    color: var(--text-primary);
}
h4, h5, h6 {
    font-weight: 700;
    color: var(--text-primary);
}

/* Kompak global: turunkan ±12% dari default Bootstrap agar padat rapi */
h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.15rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; }
.modal-title { font-size: 1rem; }
.lead { font-size: 1rem; }
.table { font-size: 0.82rem; }
.table thead th { font-size: 0.75rem; }

/* ================================================================
   TABEL RAPI ALA EXCEL — header ringkas satu baris, kolom pas isi,
   isi rata tengah vertikal, baris belang halus
   ================================================================ */
.table thead th {
    white-space: nowrap;
    font-weight: 700;
    vertical-align: middle;
}
.table tbody td {
    vertical-align: middle;
}
.table tbody tr:hover {
    background-color: rgba(226, 236, 248, 0.55);
}
/* Kolom NO: sempit */
.table th.col-no,
.table td.col-no {
    width: 40px;
    max-width: 40px;
    text-align: center;
    padding-left: 8px !important;
    padding-right: 8px !important;
}
/* Kolom AKSI: center, tidak terlalu lebar */
.table th.col-aksi,
.table td.col-aksi {
    text-align: center;
    white-space: nowrap;
}
/* Kolom isi panjang (pertanyaan/judul) tetap wrap rapi, kolom lain pas */
.table td.cell-wrap,
.table th.cell-wrap {
    white-space: normal;
    min-width: 220px;
}
.table-responsive {
    -webkit-overflow-scrolling: touch;
}
.dropdown-menu { font-size: 0.82rem; }
.badge { font-size: 0.72em; }
.form-label { font-size: 0.8rem; }
.form-text { font-size: 0.75rem; }
.pagination .page-link { font-size: 0.8rem; }

/* Arabic Text */
.arabic-text {
    font-family: var(--font-arabic);
    direction: rtl;
    unicode-bidi: plaintext;
    line-height: 1.9;
}

.arabic-religious {
    font-family: var(--font-religious);
    direction: rtl;
    unicode-bidi: plaintext;
    line-height: 2;
}

/* App Wrapper Layout */
.app-layout {
    display: flex;
    min-height: 100vh;
}

/* Sidebar - Dark Navy Theme */
.app-sidebar {
    width: 260px;
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-dark) 100%);
    border-right: 1px solid rgba(255,255,255,.06);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    transition: width 0.25s ease-in-out, transform 0.25s ease-in-out;
    overflow: visible;
    scrollbar-width: none;
}

.app-sidebar::-webkit-scrollbar {
    display: none;
}

/* Collapsed (icon-only) mode on desktop */
body.sidebar-collapsed .app-sidebar {
    width: 76px;
}

body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .sidebar-link span,
body.sidebar-collapsed .nav-section-title {
    display: none;
}

body.sidebar-collapsed .sidebar-brand > div {
    justify-content: center;
    width: 100%;
}

body.sidebar-collapsed .sidebar-nav {
    padding: 10px 8px;
}

body.sidebar-collapsed .sidebar-link {
    justify-content: center;
    padding: 10px 0;
}

body.sidebar-collapsed .sidebar-link i {
    width: auto;
}

body.sidebar-collapsed .sidebar-footer {
    padding: 16px 8px;
}

body.sidebar-collapsed .sidebar-footer .sidebar-link {
    justify-content: center;
    padding: 10px 0;
}

.sidebar-brand {
    padding: 20px 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 8px;
}

.sidebar-brand-logo-img {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    object-fit: contain;
    flex-shrink: 0;
}

.sidebar-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.brand-text {
    text-align: center;
    width: 100%;
}

.brand-logo-text {
    font-family: var(--font-ui);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--sidebar-text);
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.brand-logo-text span {
    color: var(--sidebar-active);
}

.brand-subtitle {
    font-size: 0.65rem;
    color: var(--sidebar-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 2px;
}

.brand-badge {
    margin-top: 12px;
    padding: 6px 12px;
    background: rgba(22, 119, 242, 0.15);
    border: 1px solid rgba(22, 119, 242, 0.25);
    border-radius: 6px;
    text-align: center;
}

.brand-badge-label {
    display: block;
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--sidebar-muted);
    margin-bottom: 2px;
}

.brand-badge-value {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--sidebar-active);
    letter-spacing: 0.08em;
}

.sidebar-nav {
    flex: 1;
    padding: 6px 12px;
    overflow-y: auto;
    scrollbar-width: none;
}

.sidebar-nav::-webkit-scrollbar {
    display: none;
}

.nav-section-title {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--sidebar-muted);
    padding: 16px 12px 6px;
    opacity: 0.9;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-radius: 8px;
    color: var(--sidebar-text);
    font-weight: 500;
    font-size: 0.82rem;
    text-decoration: none;
    transition: all 0.15s ease;
    margin-bottom: 1px;
    border: 1px solid transparent;
    outline: none;
}

.sidebar-link i {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    color: var(--sidebar-icon);
    transition: color 0.15s ease;
}

.sidebar-link:hover {
    background: rgba(255,255,255,.06);
    color: #FFFFFF;
}

.sidebar-link:hover i {
    color: #FFFFFF;
}

/* Active state - Blue accent on dark sidebar */
.sidebar-link.active {
    background: var(--sidebar-active);
    color: var(--sidebar-active-text);
    border: 1px solid transparent;
}

.sidebar-link.active i {
    color: #FFFFFF;
}

.sidebar-footer {
    padding: 16px 14px;
    border-top: 1px solid rgba(255,255,255,.08);
}

/* Dropdown Menu */
.dropdown-menu {
    border: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 6px;
    min-width: 180px;
}

.dropdown-menu .dropdown-item {
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 0.82rem;
    color: var(--text-primary);
    transition: background 0.15s;
}

.dropdown-menu .dropdown-item:hover {
    background-color: var(--primary-50);
    color: var(--primary-600);
}

.dropdown-menu .dropdown-item i {
    font-size: 0.9rem;
}

.dropdown-divider {
    border-color: var(--border);
    margin: 6px 0;
}

/* User Profile Box in Topbar */
.user-profile-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: all 0.15s ease;
}

.user-profile-box:hover {
    background: var(--primary-50);
    border-color: var(--primary-100);
}

.user-avatar {
    position: relative;
}

.user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.user-info .user-name {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

.user-info .user-badge {
    font-size: 0.68rem !important;
    color: var(--text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Main Content */
.app-main {
    margin-left: 260px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: margin-left 0.25s ease-in-out;
}

/* Desktop: collapse to icon-only rail */
@media (min-width: 992px) {
    body.sidebar-collapsed .app-main {
        margin-left: 76px;
    }
}

/* Topbar */
.app-topbar {
    height: 70px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 90;
}

.page-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Topbar Brand (logo + app name + subtitle) — mobile only;
   on desktop the sidebar brand shows instead */
.topbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.topbar-brand-logo-img {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex-shrink: 0;
    object-fit: contain;
}

.sidebar-brand-logo-img {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex-shrink: 0;
    object-fit: contain;
}

body.sidebar-collapsed .sidebar-brand-logo-img {
    width: 34px;
    height: 34px;
}

.topbar-brand-text {
    min-width: 0;
    line-height: 1.2;
}

.topbar-brand-name {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    white-space: nowrap;
}

.topbar-brand-name span {
    color: var(--primary-600);
}

.topbar-brand-sub {
    font-size: 0.66rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Hide topbar brand on desktop — sidebar brand shows instead */
@media (min-width: 992px) {
    .topbar-brand {
        display: none;
    }
}

/* Topbar avatar & status */
.topbar-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-500) 100%);
}

.user-avatar .status-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
}

.user-avatar .status-indicator.online { background: var(--success); }
.user-avatar .status-indicator.offline { background: var(--danger); }

.user-chevron {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 4px;
    transition: transform 0.2s ease;
}

.user-profile-box.show .user-chevron,
.user-profile-box[aria-expanded="true"] .user-chevron {
    transform: rotate(180deg);
}

/* Topbar dropdown (modern) */
.topbar-dropdown {
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 26, 69, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 6px;
    margin-top: 8px !important;
    overflow: hidden;
    animation: topbarDdIn 0.1s ease-out;
}

@keyframes topbarDdIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.topbar-dd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 9px;
    padding: 9px 14px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: background 0.12s ease;
}

.topbar-dd-item i {
    font-size: 0.95rem;
    color: var(--primary-600);
}

.topbar-dd-item:hover {
    background: var(--primary-50);
    color: var(--primary-600);
}

.topbar-dd-logout,
.topbar-dd-logout i {
    color: var(--danger);
}

.topbar-dd-logout:hover {
    background: var(--danger-100);
    color: var(--danger-700);
}

/* User Profile in Topbar */
.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 8px;
}

.user-name {
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.2;
    text-align: right;
}

.user-badge {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.avatar-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary-600);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
}

/* Content Body */
.app-content {
    padding: 20px;
    flex: 1;
}

/* Cards */
.card-custom {
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    margin-bottom: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Stat Cards — filled gradient, white text */
.stat-card {
    border-radius: var(--radius-lg);
    border: none;
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 26, 69, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 26, 69, 0.18);
}

/* Soft decorative circle */
.stat-card::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -30px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    pointer-events: none;
}

.stat-card.stat-blue   { background: #4F9BE8; box-shadow: 0 6px 18px rgba(79, 155, 232, 0.35); }
.stat-card.stat-green  { background: #35B878; box-shadow: 0 6px 18px rgba(53, 184, 120, 0.3); }
.stat-card.stat-sky    { background: #8566D8; box-shadow: 0 6px 18px rgba(133, 102, 216, 0.3); }
.stat-card.stat-orange { background: #F5A623; box-shadow: 0 6px 18px rgba(245, 166, 35, 0.32); }

.stat-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.92);
}

.stat-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    margin: 6px 0;
}

.stat-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0.9;
}

.stat-link:hover {
    color: #ffffff;
    opacity: 1;
    text-decoration: underline;
}

.stat-icon-badge {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: #fff;
    flex-shrink: 0;
}

/* Buttons */
.btn-primary-custom {
    background-color: var(--primary-600);
    border-color: var(--primary-600);
    color: #ffffff;
    font-weight: 600;
    border-radius: 5px;
    padding: 5px 12px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-primary-custom:hover {
    background-color: var(--primary-500);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(22, 119, 242, 0.25);
}

.btn-icon {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: white;
    cursor: pointer;
    transition: opacity 0.15s;
    font-size: 10px;
    line-height: 1;
    padding: 0;
    vertical-align: middle;
}

/* Form hapus di dalam .action-buttons: sejajar penuh dengan tombol sebelahnya */
.action-buttons > form {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.btn-icon i {
    font-size: 11px;
}

.btn-icon:hover {
    opacity: 0.85;
}

.btn-icon-view { background: var(--info); }
.btn-icon-edit { background: var(--warning); }
.btn-icon-del { background: var(--danger); }
.btn-icon-key { background: #06A6C7; }
/* Deep Review ungu — beda tegas dari Periksa Kunci (cyan) */
.btn-ai-deep-review { background: var(--purple); }
.btn-purple { background: var(--purple); border-color: var(--purple); color: #fff; }
.btn-purple:hover { background: #7a5bd6; border-color: #7a5bd6; color: #fff; }
.btn-purple:focus-visible { box-shadow: 0 0 0 3px rgba(133,102,216,.25); }

/* Action Button Group - compact, centered */
.action-buttons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    white-space: nowrap;
}

.action-buttons .btn-icon {
    margin: 0;
}

/* Badges */
.badge-status {
    padding: 4px 10px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.badge-status.active {
    background: var(--success-100);
    color: var(--success-700);
}

.badge-status.inactive {
    background: var(--surface-soft);
    color: var(--text-secondary);
}

.badge-token {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #ffedd5;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
}

.badge-session {
    background: #f1f5f9;
    color: #475569;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
}

/* CBT Exam Layout */
.cbt-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

.timer-badge {
    background: #e0f2fe;
    color: #0369a1;
    font-weight: 800;
    font-size: 1.15rem;
    padding: 8px 18px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 1px;
}

.timer-badge.warning {
    background: var(--danger-100);
    color: var(--danger);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* Number Grid */
.number-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.btn-number {
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-number.current {
    border: 2px solid var(--primary-600);
}

.btn-number.answered {
    background: var(--success);
    color: #ffffff;
    border-color: var(--success);
}

.btn-number.flagged {
    background: var(--warning);
    color: #ffffff;
    border-color: var(--warning);
}

/* Option Buttons */
.option-item {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
}

.option-item:hover {
    border-color: #93c5fd;
    background: var(--surface-soft);
}

.option-item.selected {
    border-color: var(--primary-600);
    background: var(--primary-50);
}

.option-label-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--text-disabled);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text-secondary);
    background: var(--surface);
    flex-shrink: 0;
}

.option-item.selected .option-label-circle {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: #ffffff;
}

/* Lockout overlay */
.lockout-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 32, 53, 0.7);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lockout-card {
    background: var(--surface);
    border-radius: 20px;
    padding: 40px 32px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.lockout-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--danger);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--danger);
    font-size: 2.2rem;
}

/* ===== Hamburger Burger Toggle (Sidebar) ===== */
.burger-toggle {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: none;
    outline: none;
    background: var(--surface);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.burger-toggle:hover {
    background: var(--primary-50);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.burger-toggle:active {
    transform: translateY(0) scale(0.94);
}

.burger-toggle:focus,
.burger-toggle:focus-visible {
    outline: none;
    box-shadow: none;
}

.burger-icon {
    transition: transform 0.25s ease;
}

.burger-line {
    transition: transform 0.25s cubic-bezier(0.68, -0.35, 0.265, 1.35), opacity 0.25s ease;
    transform-origin: center;
}

/* Body modifier: sidebar closed (icon-only) -> middle line shrinks */
body.sidebar-collapsed .burger-line-mid {
    transform: scaleX(0.45);
    opacity: 0.55;
}

body.sidebar-collapsed .burger-line-top {
    transform: translateY(-0.5px);
}

body.sidebar-collapsed .burger-line-bottom {
    transform: translateY(0.5px);
}

/* Sidebar Backdrop (mobile) */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 32, 53, 0.45);
    backdrop-filter: blur(2px);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.sidebar-backdrop.show {
    opacity: 1;
    visibility: visible;
}

/* Sidebar Tooltip (icon-only mode) */
.sidebar-tooltip {
    position: fixed;
    transform: translateY(-50%) scale(0.9);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    z-index: 300;
}

.sidebar-tooltip.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

/* ===== Mobile Bottom Navigation ===== */
.app-bottomnav {
    display: none;
}

@media (max-width: 991px) {
    /* Hide hamburger on mobile — bottom nav "Menu" replaces it */
    .burger-toggle {
        display: none;
    }

    .app-bottomnav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 95;
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -2px 12px rgba(0, 26, 69, 0.08);
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
        justify-content: space-around;
        align-items: stretch;
        gap: 4px;
    }

    .bottomnav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 4px;
        border: none;
        background: none;
        text-decoration: none;
        color: var(--text-muted);
        font-size: 0.62rem;
        font-weight: 600;
        line-height: 1.2;
        border-radius: 10px;
        min-width: 0;
        transition: color 0.15s ease, background 0.15s ease;
    }

    .bottomnav-item i {
        font-size: 1.15rem;
        line-height: 1;
    }

    .bottomnav-item span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bottomnav-item:active,
    .bottomnav-item.active {
        color: var(--primary-600);
        background: var(--primary-50);
    }

    .bottomnav-more {
        cursor: pointer;
    }

    /* Space for bottom nav so content isn't covered */
    .app-content {
        padding-bottom: 84px;
    }
}

/* Mobile Responsive */
@media (max-width: 991px) {
    /* Bottom sheet: slides up from bottom (iPhone style) */
    .app-sidebar {
        width: 100%;
        max-width: 540px;
        left: 50%;
        top: auto;
        bottom: 0;
        height: auto;
        max-height: 82vh;
        border-right: none;
        border-top-left-radius: 22px;
        border-top-right-radius: 22px;
        box-shadow: 0 -8px 40px rgba(0, 26, 69, 0.25);
        transform: translate(-50%, 100%);
        transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 1000;
    }
    .app-sidebar.show {
        transform: translate(-50%, 0);
    }
    .app-sidebar::before {
        /* Drag handle */
        content: "";
        position: absolute;
        top: 9px;
        left: 50%;
        transform: translateX(-50%);
        width: 44px;
        height: 5px;
        border-radius: 3px;
        background: var(--sidebar-muted);
    }
    .sidebar-brand {
        padding-top: 30px;
        padding-bottom: 10px;
    }
    .sidebar-nav {
        padding: 6px 14px calc(20px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
    }

    /* Horizontal grid menu (4 cols phone, 5 cols large phone/tablet) */
    .sidebar-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px 6px;
        scrollbar-width: none;
    }

    .sidebar-nav::-webkit-scrollbar {
        display: none;
    }
    @media (min-width: 480px) {
        .sidebar-nav {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }
    }
    .nav-section-title {
        display: none;
    }
    .sidebar-link {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        gap: 6px;
        padding: 12px 4px 10px;
        margin-bottom: 0;
        border-radius: 12px;
        font-size: 0.65rem;
        font-weight: 600;
        line-height: 1.25;
    }
    .sidebar-link i {
        font-size: 1.35rem;
        width: auto;
    }
    .sidebar-link span {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.sidebar-collapsed .app-sidebar {
        width: 100%;
    }

    .app-main {
        margin-left: 0;
    }

    /* Typography scaling on mobile */
    .brand-logo-text {
        font-size: 1.1rem;
    }
    .page-title {
        font-size: 1.05rem;
        letter-spacing: -0.01em;
    }
    .stat-value {
        font-size: 1.5rem;
    }

/* Compact brand on mobile (hamburger hidden — bottom nav handles it) */
.topbar-brand {
    gap: 10px;
}
.topbar-brand-logo-img {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}
.topbar-brand-name {
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-brand-sub {
    font-size: 0.6rem;
}

    /* Modern minimal mobile topbar: frosted glass, avatar-only */
    .app-topbar {
        padding: 0 16px;
        height: 58px;
        background: rgba(255, 255, 255, 0.82);
        backdrop-filter: blur(14px) saturate(1.6);
        -webkit-backdrop-filter: blur(14px) saturate(1.6);
        border-bottom: none;
        box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05);
    }
    .user-profile-box {
        background: transparent;
        border: none;
        padding: 4px;
        gap: 0;
    }
    .user-info,
    .user-chevron {
        display: none;
    }
    .topbar-avatar {
        width: 34px;
        height: 34px;
        font-size: 0.85rem;
        box-shadow: none;
        outline: none;
    }
    .topbar-dropdown {
        position: fixed !important;
        top: 64px !important;
        left: 12px !important;
        right: 12px !important;
        transform: none !important;
        margin: 0 !important;
        width: auto !important;
    }
    .topbar-dd-item {
        padding: 12px 16px;
        font-size: 0.88rem;
    }
    .topbar-dd-logout {
        font-weight: 700;
    }
    .app-content {
        padding: 16px;
    }
    .card-custom {
        padding: 16px;
        margin-bottom: 16px;
    }
    .stat-card {
        padding: 8px 12px;
        border-radius: 12px;
    }
    .stat-card::after {
        width: 70px;
        height: 70px;
        right: -18px;
        top: -18px;
    }
    .stat-label {
        font-size: 0.6rem;
    }
    .stat-value {
        font-size: 1.25rem;
        margin: 4px 0 2px;
    }
    .stat-link {
        font-size: 0.7rem;
    }
    .stat-icon-badge {
        width: 30px;
        height: 30px;
        font-size: 0.88rem;
    }
    .btn {
        font-size: 11px !important;
        padding: 3px 10px !important;
    }
    .btn.btn-sm,
    .btn-sm {
        font-size: 10px !important;
        padding: 2px 8px !important;
    }
    .badge {
        font-size: 0.68rem !important;
        padding: 2px 7px !important;
        border-radius: 4px !important;
    }
    .app-btn {
        font-size: 0.72rem;
        padding: 5px 12px;
        border-radius: 4px;
    }
    .app-btn-sm {
        padding: 3px 10px;
        font-size: 0.68rem;
    }
    .btn-primary-custom {
        font-size: 11px;
        padding: 3px 10px;
    }
    .btn-icon {
        width: 20px;
        height: 20px;
        font-size: 9px;
    }
    .btn-icon i {
        font-size: 9px;
    }
    .btn-number {
        height: 30px;
        font-size: 0.72rem;
    }
    .badge-status {
        padding: 3px 8px;
        font-size: 0.68rem;
    }
    .badge-token,
    .badge-session {
        font-size: 0.7rem;
        padding: 3px 8px;
    }
    .option-label-circle {
        width: 26px;
        height: 26px;
        font-size: 0.78rem;
    }
    .option-item {
        padding: 10px 14px;
        margin-bottom: 10px;
        gap: 10px;
    }
    .app-alert {
        padding: 12px 14px;
    }
    .app-alert-icon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }
    .app-alert-title {
        font-size: 0.88rem;
    }
    .page-header h1 {
        font-size: 1.3rem;
    }
    .table {
        font-size: 0.8rem;
    }
    .form-label {
        font-size: 0.82rem;
    }
    .app-toast {
        min-width: 260px;
        font-size: 0.8rem;
    }
}

/* ================================================================
   APP ALERTS (Notification Card - Reference Style)
   ================================================================ */
.app-alert {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    border: none;
    border-left: 5px solid transparent;
    position: relative;
    margin-bottom: 20px;
    animation: appAlertIn 0.3s ease;
}

@keyframes appAlertIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.app-alert-success { background: var(--success-100); border-left-color: var(--success); }
.app-alert-info    { background: var(--info-100);    border-left-color: var(--info); }
.app-alert-warning { background: var(--warning-100); border-left-color: var(--warning); }
.app-alert-danger  { background: var(--danger-100);  border-left-color: var(--danger); }

.app-alert-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
}

.app-alert-icon-success { background: var(--success); }
.app-alert-icon-info    { background: var(--info); }
.app-alert-icon-warning { background: var(--warning); color: #fff; }
.app-alert-icon-danger  { background: var(--danger); }

.app-alert-body {
    flex: 1;
    min-width: 0;
}

.app-alert-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.app-alert-desc {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.5;
}

.app-alert-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-secondary);
    opacity: 0.6;
    transition: opacity 0.15s;
    border-radius: 4px;
    line-height: 1;
    flex-shrink: 0;
}

.app-alert-close:hover {
    opacity: 1;
}

/* ================================================================
   APP TOAST NOTIFICATIONS (Compact Floating Style)
   ================================================================ */
.app-toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10900;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: 320px;
}

.app-toast {
    min-width: 240px;
    max-width: 320px;
    background: var(--surface);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 16px rgba(15, 32, 53, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    pointer-events: all;
    opacity: 0;
    transform: translateX(110%);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-left: 4px solid transparent;
}

.app-toast.app-toast-show {
    opacity: 1;
    transform: translateX(0);
}

.app-toast[role="alert"] {
    border-left-color: transparent;
}

.app-toast-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.app-toast-icon-success { background: var(--success); }
.app-toast-icon-info    { background: var(--info); }
.app-toast-icon-warning { background: var(--warning); }
.app-toast-icon-danger  { background: var(--danger); }

.app-toast-body {
    flex: 1;
    min-width: 0;
}

.app-toast-title {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text-primary);
    line-height: 1.3;
}

.app-toast-message {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin: 2px 0 0;
    line-height: 1.4;
    display: none;
}

.app-toast-close {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--text-secondary);
    opacity: 0.5;
    transition: opacity 0.15s;
    border-radius: 4px;
    line-height: 1;
    flex-shrink: 0;
    font-size: 0.85rem;
}

.app-toast-close:hover {
    opacity: 1;
}

/* ================================================================
   APP CONFIRM DIALOG
   ================================================================ */
.app-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 32, 53, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: appConfirmFadeIn 0.2s ease;
}

@keyframes appConfirmFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

body.app-confirm-open {
    overflow: hidden;
}

.app-confirm-modal {
    background: var(--surface);
    border-radius: 16px;
    max-width: 400px;
    width: 100%;
    padding: 32px 28px 28px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(15, 32, 53, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08);
    animation: appConfirmModalIn 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes appConfirmModalIn {
    from { opacity: 0; transform: scale(0.88) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.app-confirm-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 1.5rem;
    color: #fff;
}

.app-confirm-icon-warning { background: var(--warning-100); color: var(--warning); }
.app-confirm-icon-danger  { background: var(--danger-100);  color: var(--danger); }
.app-confirm-icon-info    { background: var(--info-100);    color: var(--info); }
.app-confirm-icon-success { background: var(--success-100); color: var(--success); }

.app-confirm-title {
    font-weight: 800;
    font-size: 1rem;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.app-confirm-message {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0 0 24px;
    line-height: 1.55;
}

.app-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* ================================================================
   APP BUTTONS (Reference Style)
   ================================================================ */
.app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    min-height: 32px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 12px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
}

.app-btn:focus-visible {
    outline: none;
}

.app-btn-ghost {
    background: var(--surface-soft);
    border-color: var(--border);
    color: var(--text-secondary);
}

.app-btn-ghost:hover {
    background: var(--primary-50);
    border-color: var(--primary-100);
    color: var(--primary-600);
}

.app-btn-primary {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: #fff;
}

.app-btn-primary:hover {
    background: var(--primary-500);
    border-color: var(--primary-500);
    color: #fff;
    box-shadow: 0 4px 12px rgba(22, 119, 242, 0.3);
}

.app-btn-success {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

.app-btn-success:hover {
    background: var(--success-700);
    border-color: var(--success-700);
    color: #fff;
    box-shadow: 0 4px 12px rgba(53, 184, 120, 0.3);
}

.app-btn-warning {
    background: var(--warning-100);
    border-color: var(--warning);
    color: var(--warning);
}

.app-btn-warning:hover {
    background: var(--warning);
    color: #fff;
    box-shadow: 0 4px 12px rgba(245, 166, 35, 0.3);
}

.app-btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.app-btn-danger:hover {
    background: var(--danger-700);
    border-color: var(--danger-700);
    color: #fff;
    box-shadow: 0 4px 12px rgba(240, 90, 82, 0.3);
}

.app-btn-info {
    background: var(--info-100);
    border-color: var(--info);
    color: var(--info);
}

.app-btn-info:hover {
    background: var(--info);
    color: #fff;
    box-shadow: 0 4px 12px rgba(79, 155, 232, 0.25);
}

/* Small variant */
.app-btn-sm {
    padding: 0 10px;
    min-height: 28px;
    font-size: 11px;
}

/* ================================================================
   RESPONSIVE TOAST
   ================================================================ */
@media (max-width: 480px) {
    .app-toast-container {
        top: 12px;
        right: 10px;
        left: 10px;
        bottom: auto;
        max-width: 100%;
    }
    .app-toast {
        min-width: unset;
        width: 100%;
        padding: 8px 10px;
        gap: 8px;
    }
    .app-toast-icon {
        width: 24px;
        height: 24px;
        font-size: 0.72rem;
    }
    .app-toast-title {
        font-size: 0.78rem;
    }
    .app-confirm-modal {
        padding: 24px 20px 20px;
    }
    .app-confirm-actions {
        flex-direction: column;
        gap: 8px;
    }
    .app-confirm-actions .app-btn {
        width: 100%;
    }
}

/* ================================================================
   LOGIN PAGE — Modern Elevated Card Layout (form-login.png)
   ================================================================ */
.login-screen {
    display: flex;
    height: 100vh;             /* desktop: fixed, no page scroll */
    height: 100dvh;            /* mobile browsers with dynamic bars */
    overflow: hidden;
}

.login-panel {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f1f6fc;
    background-image: 
        radial-gradient(circle at 10% 15%, rgba(205, 230, 255, 0.6) 0%, transparent 45%),
        radial-gradient(circle at 90% 85%, rgba(210, 235, 255, 0.6) 0%, transparent 50%),
        linear-gradient(135deg, #f4f8fd 0%, #e9f1fb 100%);
    padding: 20px 24px;
    overflow-y: auto;          /* panel scrolls only if content is taller */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}
.login-panel::-webkit-scrollbar {
    width: 4px;
}
.login-panel::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 4px;
}

/* Elevated White Card */
.login-card {
    background: var(--surface);
    width: 100%;
    max-width: 460px;
    border-radius: 24px;
    padding: 34px 36px 22px;
    box-shadow: 0 20px 48px -10px rgba(0, 65, 185, 0.08), 0 2px 10px rgba(0, 0, 0, 0.02);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: relative;
}

.login-brand {
    margin-bottom: 24px;
}

.login-card-logo {
    height: 48px;
    width: auto;
    display: block;
    object-fit: contain;
}

.login-form-box {
    flex: 1 1 auto;
}

.login-heading-sub {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.login-heading-main {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--primary-600);
    letter-spacing: -0.5px;
    margin-bottom: 6px;
    line-height: 1.15;
}

.login-desc {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 24px;
}

/* Boxed Input with Icons */
.login-field-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: block;
}

.login-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-icon-left {
    position: absolute;
    left: 16px;
    color: var(--text-muted);
    font-size: 1.15rem;
    pointer-events: none;
    z-index: 2;
}

.login-input {
    height: 48px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background-color: var(--surface);
    padding-left: 44px;
    font-size: 0.95rem;
    color: var(--text-primary);
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.login-input:focus {
    border-color: var(--primary-600);
    box-shadow: 0 0 0 3.5px rgba(22, 119, 242, 0.12);
    outline: none;
}

/* Password visibility toggle button */
.btn-toggle-pass {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #94a3b8;
    padding: 6px 8px;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    transition: color 0.15s ease;
}
.btn-toggle-pass:hover { color: var(--primary-600); }
.btn-toggle-pass:focus-visible { outline: none; }

/* Full-width submit button */
.btn-login-submit {
    height: 48px;
    border-radius: 12px;
    background: var(--primary-600);
    border: none;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.98rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 20px -4px rgba(22, 119, 242, 0.35);
    transition: all 0.2s ease;
}

.btn-login-submit:hover {
    background: var(--primary-500);
    color: #ffffff;
    box-shadow: 0 10px 24px -4px rgba(22, 119, 242, 0.45);
    transform: translateY(-1px);
}

.btn-login-submit:active {
    transform: translateY(0);
}

/* Centered forgot link */
.btn-login-forgot {
    background: transparent;
    border: none;
    color: var(--primary-600);
    font-size: 0.88rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 6px;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.btn-login-forgot:hover {
    color: var(--primary-700);
    background-color: var(--primary-50);
}

/* Card Divider */
.login-card-divider {
    border-top: 1px solid var(--border);
    margin: 22px 0 16px;
}

/* Card Footer */
.login-card-footer {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

/* Right visual background */
.login-visual {
    flex: 1 1 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Mobile: form only, image hidden */
@media (max-width: 767.98px) {
    .login-panel {
        flex: 1 1 100%;
        padding: 16px;
    }
    .login-card {
        padding: 30px 22px 20px;
        border-radius: 20px;
        max-width: 100%;
    }
    .login-heading-sub {
        font-size: 1.5rem;
    }
    .login-heading-main {
        font-size: 1.85rem;
    }
}

/* ================================================================
   TABLE SORTING (Reference Style)
   ================================================================ */
.sort-link {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 4px;
    transition: color 0.15s ease;
}

.sort-link:hover {
    color: var(--primary-600);
    text-decoration: none;
}

.sort-link.sort-active {
    color: inherit;
}

.sort-link::after {
    content: " ↕";
    color: #94a3b8;
    opacity: 0.5;
    font-size: 0.7rem;
}

.sort-link.sort-active::after {
    color: #94a3b8;
    opacity: 0.5;
}

/* Bright text for sortable headers on dark navy thead (#1e3a5f).
   Default .sort-link is dark navy — invisible on the dark header. */
.table thead .sort-link {
    color: #ffffff;
}

.table thead .sort-link:hover {
    color: #ffffff;
    text-decoration: none;
}

.table thead .sort-link.sort-active {
    color: #ffffff;
}

.table thead .sort-link::after {
    color: rgba(255, 255, 255, 0.55);
    opacity: 1;
}

.table thead .sort-link.sort-active::after,
.table thead .sort-link .sort-arrow {
    color: rgba(255, 255, 255, 0.55);
    opacity: 1;
}

/* ================================================================
   PAGINATION (Reference Style - Form Login Footer)
   ================================================================ */
.pagination-container {
    margin-top: 0;
}

/* Footer pagination di dalam kartu: ramping, tanpa area kosong */
.card-custom > div:has(> .pagination-container) {
    padding: 0.5rem 1rem !important;
}

.pagination-info {
    font-size: 0.82rem;
}

.pagination-summary {
    color: var(--text-secondary);
}

.pagination .page-item .page-link {
    min-width: 36px;
    height: 34px;
    padding: 6px 10px;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px !important;
    margin: 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.pagination .page-item .page-link:hover {
    background: var(--primary-50);
    color: var(--primary-600);
    border-color: var(--primary-600);
}

.pagination .page-item.active .page-link {
    background: var(--primary-600);
    color: white;
    border-color: var(--primary-600);
    box-shadow: 0 2px 4px rgba(22, 119, 242, 0.2);
}

.pagination .page-item.disabled .page-link {
    color: var(--text-disabled);
    background: var(--surface-soft);
    border-color: var(--border);
}

/* Short screens / landscape */
@media (max-height: 680px) and (min-width: 768px) {
    .login-card {
        padding: 24px 30px 18px;
    }
    .login-brand {
        margin-bottom: 12px;
    }
    .login-card-logo {
        height: 40px;
    }
    .login-desc {
        margin-bottom: 16px;
    }
    .login-card-divider {
        margin: 16px 0 12px;
    }
}

/* ================================================================
   ERROR 404 — Selaras Login Tahap 1 (card elevasi putih + #0062ff)
   ================================================================ */
.error-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-600);
    background: var(--primary-50);
    border: 1px solid var(--primary-100);
    border-radius: 999px;
    padding: 5px 12px;
    margin-bottom: 12px;
}

.error-code {
    font-size: 4.5rem;
    font-weight: 800;
    color: var(--primary-600);
    letter-spacing: -2px;
    line-height: 1;
    margin-bottom: 8px;
}

.btn-error-secondary {
    height: 48px;
    border-radius: 12px;
    background: var(--surface-soft);
    border: 1.5px solid var(--border);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.btn-error-secondary:hover {
    background: var(--primary-50);
    border-color: var(--primary-100);
    color: var(--text-primary);
}

.btn-error-secondary:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    .error-code {
        font-size: 3.5rem;
    }
}

/* ================================================================
   CBT ANTI-COPY — teks soal tak bisa diseleksi (kolom jawaban bebas)
   ================================================================ */
.question-content,
.option-text,
.match-select {
    user-select: none;
    -webkit-user-select: none;
}

#essayAnswerInput {
    user-select: text;
    -webkit-user-select: text;
}

/* ================================================================
   CBT MOBILE — prioritas siswa ujian via HP
   ================================================================ */
@media (max-width: 767.98px) {
    .cbt-header {
        padding: 10px 14px;
        gap: 8px;
    }
    .cbt-header h6 {
        font-size: 0.85rem;
    }
    .cbt-header .small {
        font-size: 0.7rem;
    }
    .timer-badge {
        font-size: 0.85rem;
        padding: 5px 12px;
    }
    .btn-number {
        height: 32px;
        font-size: 0.75rem;
    }
    .number-grid {
        gap: 6px;
    }
    .lockout-card {
        padding: 28px 20px;
    }
    #formSubmitExam,
    #formSubmitExam .btn {
        width: 100%;
    }
}

/* ================================================================
   CONTENT DENSITY — judul konten & modal sedikit lebih kecil.
   Login / CBT / 404 / mobile tidak disentuh.
   ================================================================ */
.app-content h3 {
    font-size: 1.25rem;
}

.app-content h4 {
    font-size: 1.1rem;
}

.app-content h5 {
    font-size: 0.95rem;
}

.modal-title {
    font-size: 1.05rem;
}

/* ================================================================
   APP MODAL SYSTEM — ikon header berwarna per fungsi (konsisten)
   biru=tambah, amber=edit, merah=reset/hapus, hijau=soal/import,
   cyan=cetak/info, ungu=lainnya
   ================================================================ */
.modal-content {
    overflow: hidden;
}

/* Ensure Bootstrap modal is visible above everything */
.modal.show {
    display: block !important;
    background: rgba(0,0,0,0.5) !important;
}
.modal.show .modal-dialog {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.app-modal-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #ffffff;
    flex-shrink: 0;
}

.app-modal-icon-blue {
    background: var(--primary-600);
    box-shadow: 0 4px 12px rgba(22, 119, 242, 0.35);
}

.app-modal-icon-amber {
    background: var(--warning);
    box-shadow: 0 4px 12px rgba(245, 166, 35, 0.35);
}

.app-modal-icon-red {
    background: var(--danger);
    box-shadow: 0 4px 12px rgba(240, 90, 82, 0.32);
}

.app-modal-icon-green {
    background: var(--success);
    box-shadow: 0 4px 12px rgba(53, 184, 120, 0.32);
}

.app-modal-icon-cyan {
    background: #06A6C7;
    box-shadow: 0 4px 12px rgba(6, 166, 199, 0.32);
}

.app-modal-icon-purple {
    background: var(--purple);
    box-shadow: 0 4px 12px rgba(133, 102, 216, 0.32);
}

/* ================================================================
   BULK SELECT BAR (hapus massal tabel data)
   ================================================================ */
.bulk-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--danger-100);
    border-bottom: 1px solid var(--border);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--danger);
}

.bulk-bar[hidden] {
    display: none;
}

.bulk-toggle,
.bulk-pick {
    cursor: pointer;
    margin: 0;
    vertical-align: middle;
}

/* Kolom aksi tidak boleh wrap/bergeser walau tabel bertambah kolom */
.action-buttons {
    flex-wrap: nowrap;
}

/* ================================================================
   RTE (Rich Text Editor) + AI QUESTION ASSISTANT
   ================================================================ */
.rte {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
}

.rte-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    padding: 6px 8px;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--border);
}

.rte-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rte-btn:hover {
    background: var(--primary-50);
    color: var(--primary-600);
}

.rte-area {
    min-height: 110px;
    max-height: 260px;
    overflow-y: auto;
    padding: 10px 12px;
    font-size: 0.9rem;
    outline: none;
}

.rte-area:empty::before {
    content: 'Ketik soal di sini... (mendukung Arab & rumus $...$)';
    color: var(--text-muted);
}

.rte-area:focus {
    box-shadow: inset 0 0 0 2px rgba(22, 119, 242, 0.15);
}

/* RTE di tabel preview import/generator: ringkas, teks asli rapi */
#unifiedResult .rte-area,
#unifiedResultGuru .rte-area {
    min-height: 54px;
    max-height: 180px;
    font-size: 0.82rem;
    padding: 6px 8px;
    white-space: pre-wrap;
}
#unifiedResult .rte-toolbar,
#unifiedResultGuru .rte-toolbar {
    padding: 2px 4px;
    gap: 2px;
}
#unifiedResult .rte-btn,
#unifiedResultGuru .rte-btn {
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
}

.mini-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.mini-tab {
    flex: 1;
    border: 1.5px solid var(--border);
    background: var(--surface-soft);
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.mini-tab.active {
    border-color: var(--primary-600);
    background: var(--primary-50);
    color: var(--primary-600);
}

.ai-panel {
    border: 1.5px dashed var(--primary-600);
    border-radius: 14px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(22, 119, 242, 0.05), transparent);
}

.diff-pills {
    display: flex;
    gap: 6px;
}

.diff-pill {
    flex: 1;
    border: 1.5px solid var(--border);
    background: var(--surface);
    border-radius: 9px;
    padding: 6px 4px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
}

.diff-pill.active {
    border-color: var(--primary-600);
    background: var(--primary-600);
    color: #ffffff;
}

.ai-result-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--surface);
}

.ai-result-card .rte-area {
    min-height: 70px;
    max-height: 180px;
}

/* Ukuran font isi modal sedikit lebih kecil (semua menu) */
.modal-body {
    font-size: 0.85rem;
}

.modal-body .form-control,
.modal-body .form-select,
.modal-body .input-group-text {
    font-size: 0.85rem;
}

.modal-body .form-text,
.modal-body .alert {
    font-size: 0.78rem;
}

/* ================================================================
   SETTINGS TABS (rujukan: tab_navigation_pengaturan.png)
   ================================================================ */
.settings-tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    overflow-x: auto;
}

.settings-tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 7px 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.settings-tab i {
    font-size: 0.85rem;
}

.settings-tab:hover {
    color: var(--primary-600);
}

.settings-tab.active {
    color: var(--primary-600);
    border-bottom-color: var(--primary-600);
}

/* Save bar selalu terlihat di semua tab — tanpa kotak, tombol saja */
.settings-savebar {
    position: sticky;
    bottom: 12px;
    z-index: 30;
    background: transparent;
    border: none;
    padding: 10px 0;
}

@media (max-width: 767.98px) {
    .settings-tab span {
        display: none;
    }
    .settings-tab {
        padding: 10px 14px;
    }
    .settings-tab i {
        font-size: 1.1rem;
    }
}

/* ================================================================
   TOPBAR GLOBAL SEARCH
   ================================================================ */
.topbar-search {
    position: relative;
    flex: 0 1 320px;
    margin: 0 0 0 12px;
    display: flex;
    align-items: center;
}

.topbar-search-icon {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    font-size: 0.9rem;
    pointer-events: none;
}

.topbar-search-input {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-soft);
    padding-left: 38px;
    padding-right: 12px;
    font-size: 0.85rem;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.topbar-search-input:focus {
    border-color: var(--primary-600);
    box-shadow: 0 0 0 3px var(--primary-100);
    background: #ffffff;
}

.topbar-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 26, 69, 0.14);
    padding: 6px;
    max-height: 60vh;
    overflow-y: auto;
    z-index: 200;
}

.topbar-search-group {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 8px 12px 4px;
}

.topbar-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 9px;
    padding: 8px 12px;
    text-decoration: none;
    color: var(--text-primary);
}

.topbar-search-item:hover {
    background: var(--primary-50);
}

.topbar-search-item i {
    color: var(--primary-600);
}

.topbar-search-title {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
}

.topbar-search-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.topbar-search-empty {
    padding: 12px;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
}

.topbar-search-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

/* ================================================================
   TOPBAR BELL NOTIFIKASI
   ================================================================ */
.topbar-bell {
    flex-shrink: 0;
    margin-left: auto;
}

.topbar-bell-btn {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: none;
    outline: none;
    background: var(--surface);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.05rem;
}

.topbar-bell-btn:hover {
    background: var(--primary-50);
}

.topbar-bell-btn:focus {
    outline: none;
    box-shadow: none;
}

.topbar-bell-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
}

.topbar-notif {
    width: 320px;
    max-width: calc(100vw - 24px);
}

.notif-item.notif-unread {
    background: var(--primary-50);
}

.notif-item.notif-unread .topbar-search-title {
    color: var(--primary-600);
}

@media (max-width: 991px) {
    .topbar-search {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        left: 12px;
        right: 12px;
        max-width: none;
        margin: 0;
        z-index: 200;
    }
    .topbar-search.open {
        display: flex;
    }
    .topbar-search-toggle {
        display: inline-flex;
        margin-left: auto;
    }
    .user-profile {
        margin-left: 8px;
    }
}

/* ================================================================
   MOBILE COMPACT — semua tampilan & font sedikit lebih kecil di HP.
   Berlaku global untuk semua role (admin, guru, siswa) karena
   seluruh view memakai class yang sama. Ditempatkan paling akhir
   agar menang atas aturan mobile sebelumnya (spesifisitas setara).
   ================================================================ */
@media (max-width: 991.98px) {
    body {
        font-size: 12px;
    }
    h4 {
        font-size: 1.3rem;
    }
    h5 {
        font-size: 1.1rem;
    }

    /* Judul halaman */
    .page-title {
        font-size: 0.95rem;
    }
    .page-header h1 {
        font-size: 1.15rem;
    }
    .brand-logo-text {
        font-size: 1rem;
    }

    /* Layout konten & kartu (bawah tetap 84px agar tak tertutup bottomnav) */
    .app-content {
        padding: 12px 12px 84px;
    }
    .card-custom {
        padding: 12px;
        margin-bottom: 12px;
    }
    .stat-card {
        padding: 6px 10px;
    }
    .stat-label {
        font-size: 0.58rem;
    }
    .stat-value {
        font-size: 1.1rem;
    }
    .stat-link {
        font-size: 0.65rem;
    }
    .stat-icon-badge {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    /* Tabel */
    .table {
        font-size: 0.74rem;
    }
    .table thead th,
    .table thead.table-light th,
    table.thead-light th {
        font-size: 0.7rem !important;
        padding: 8px 10px !important;
    }
    .table tbody td {
        padding: 8px 10px !important;
    }
    .table tfoot td {
        font-size: 0.72rem;
    }
    .sort-link {
        font-size: 0.72rem;
    }

    /* Form */
    .form-label {
        font-size: 0.75rem;
    }
    .form-control,
    .form-select {
        font-size: 0.78rem;
    }

    /* Tombol & badge */
    .btn {
        font-size: 12px !important;
        padding: 3px 10px !important;
        min-height: 30px;
    }
    .btn.btn-sm,
    .btn-sm {
        font-size: 11px !important;
        padding: 2px 8px !important;
        min-height: 26px;
    }
    .app-btn {
        font-size: 11px;
        padding: 3px 8px;
        min-height: 28px;
    }
    .app-btn-sm {
        font-size: 10px;
    }
    .badge {
        font-size: 0.62rem !important;
        padding: 2px 6px !important;
    }
    .btn-icon {
        width: 20px;
        height: 20px;
        font-size: 9px;
    }
    .btn-icon i {
        font-size: 9px;
    }

    /* Topbar */
    .app-topbar {
        height: 52px;
        padding: 0 12px;
    }
    .topbar-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.78rem;
    }
    .topbar-brand-logo-img {
        width: 26px;
        height: 26px;
    }
    .topbar-brand-name {
        font-size: 0.85rem;
    }
    .topbar-brand-sub {
        font-size: 0.57rem;
    }
    .topbar-dd-item {
        padding: 10px 14px;
        font-size: 0.82rem;
    }

    /* Menu sidebar (bottom-sheet) & bottomnav */
    .sidebar-link {
        font-size: 0.65rem;
        padding: 11px 4px 10px;
    }
    .sidebar-link i {
        font-size: 1.2rem;
    }
    .bottomnav-item {
        font-size: 0.55rem;
        padding: 5px 3px;
    }
    .bottomnav-item i {
        font-size: 1.05rem;
    }

    /* Modal & alert */
    .modal-title {
        font-size: 1.1rem;
    }
    .modal-body {
        font-size: 0.85rem;
    }
    .app-alert {
        padding: 10px 12px;
    }
    .app-alert-icon {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }
    .app-alert-title {
        font-size: 0.82rem;
    }
    .app-toast {
        min-width: 240px;
        font-size: 0.75rem;
    }

    /* Soal CBT */
    .option-item {
        padding: 8px 12px;
        margin-bottom: 8px;
    }
    .option-label-circle {
        width: 24px;
        height: 24px;
        font-size: 0.72rem;
    }

    /* Pagination */
    .pagination .page-link {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }
}

@media (max-width: 767.98px) {
    /* CBT: tetap mudah disentuh, tapi sedikit lebih ramping */
    .cbt-header {
        padding: 8px 12px;
    }
    .cbt-header h6 {
        font-size: 0.8rem;
    }
    .timer-badge {
        font-size: 0.8rem;
        padding: 4px 10px;
    }
    .btn-number {
        height: 30px;
        font-size: 0.75rem;
    }

    /* Login di HP */
    .login-card {
        padding: 24px 18px 16px;
    }
    .login-heading-sub {
        font-size: 1.35rem;
    }
    .login-heading-main {
        font-size: 1.65rem;
    }
}

/* HP kecil: rapatkan sekali lagi */
@media (max-width: 575.98px) {
    body {
        font-size: 11px;
    }
    h4 {
        font-size: 1.15rem;
    }
    .page-title {
        font-size: 0.9rem;
    }
    .app-content {
        padding: 10px 10px 84px;
    }
    .card-custom {
        padding: 10px;
    }
    .stat-value {
        font-size: 1rem;
    }
    .table {
        font-size: 0.7rem;
    }
}

/* ================================================================
   FILTER BAR KOMPAK — override paling akhir agar pasti menang
   (lebih ramping & vertikal simetris untuk semua 6 lokasi)
   ================================================================ */
div.card-custom.py-2.px-3.mb-3 {
    padding: 4px 12px !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
}
div.card-custom.py-2.px-3.mb-3 > form {
    width: 100% !important;
    margin: 0 !important;
    min-height: 30px !important;
    align-items: center !important;
}
div.card-custom.py-2.px-3.mb-3 .form-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 30px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}
div.card-custom.py-2.px-3.mb-3 .form-select-sm,
div.card-custom.py-2.px-3.mb-3 .form-control-sm {
    height: 30px !important;
    min-height: 30px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
}
div.card-custom.py-2.px-3.mb-3 .btn-sm {
    height: 30px !important;
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
}

/* ================================================================
   FOCUS STATE ACCESSIBILITY
   ================================================================ */
*:focus-visible {
    outline: 3px solid #BFDFFF;
    outline-offset: 2px;
}

.btn-primary:focus-visible,
.btn-primary-custom:focus-visible,
.app-btn-primary:focus-visible {
    box-shadow: 0 0 0 3px #BFDFFF;
    outline: none;
}

/* Remove outline on non-keyboard focus */
*:focus:not(:focus-visible) {
    outline: none;
}

/* ═══════════════════════════════════════════════════════════
   Smart Import UI
   ═══════════════════════════════════════════════════════════ */

.import-summary-bar {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-color: #dee2e6 !important;
}
.import-summary-bar h6 {
    color: #212529;
}
.import-filter-bar .filter-btn {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
}
.import-filter-bar .filter-btn.active {
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.import-progress-bar {
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: #e9ecef;
}
.import-progress-bar .bar {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--primary-600), var(--success));
    transition: width 0.4s ease;
}
.ai-result-card {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: #fff;
    transition: border-color 0.2s;
}
.ai-result-card:hover {
    border-color: #adb5bd;
}
.ai-result-card[data-severity="error"] {
    border-left: 3px solid #dc3545;
}
.ai-result-card[data-severity="warning"] {
    border-left: 3px solid #ffc107;
}
    .ai-result-card[data-severity="info"] {
    border-left: 3px solid var(--success);
}

/* Quality Score gradient bar */
.quality-score-bar {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--danger) 0%, var(--warning) 50%, var(--success) 100%);
    overflow: hidden;
}
.quality-score-bar .fill {
    height: 100%;
    background: #fff;
    transition: width 0.4s ease;
}

/* ================================================================
   GURU INPUT VIA HP — bank soal, tambah/edit soal, import & paste
   (ponsel = layar utama guru mapel menginput soal)
   ================================================================ */
@media (max-width: 767.98px) {
    /* Tabel daftar soal: isi panjang tetap bisa discroll horizontal,
       tombol aksi tetap mudah disentuh */
    .card-custom .table-responsive table {
        font-size: 0.82rem;
    }
    .card-custom .table-responsive .btn-icon {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }

    /* Modal input soal: area tempel & form nyaman dipakai jempol */
    .modal-fullscreen-sm-down .modal-body textarea.form-control {
        font-size: 16px; /* cegah auto-zoom iOS saat fokus */
        min-height: 140px;
    }
    .modal-fullscreen-sm-down .modal-body .form-control,
    .modal-fullscreen-sm-down .modal-body .form-select {
        font-size: 16px; /* cegah auto-zoom iOS saat fokus */
    }
    .modal-fullscreen-sm-down .modal-footer .btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.82rem;
    }

    /* Zona upload: target sentuh lebih besar */
    [id^="unifiedUploadZone"] {
        padding: 1.6rem 1rem !important;
    }

    /* Tombol aksi Import/Generator sudah flex-fill (berbagi baris aman di HP) */

    /* Kartu review AI: tombol simpan mudah dijangkau */
    .ai-result-card .btn {
        min-height: 30px;
    }
}

/* Empty State — P3 §8 konsisten Guru & Siswa */
.empty-state { text-align: center; padding: 2.5rem 1.5rem; }
.empty-state-icon { width: 64px; height: 64px; border-radius: 16px; background: var(--surface-soft); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.8rem; margin-bottom: 14px; }
.empty-state-title { font-weight: 800; color: var(--text-primary); font-size: 1rem; margin-bottom: 6px; }
.empty-state-desc { color: var(--text-muted); font-size: .875rem; line-height: 1.5; max-width: 420px; margin: 0 auto 14px; }
.empty-state .btn { min-height: 32px; }

/* PWA standalone: hormati safe-area (notch) perangkat */
@media (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .app-toast-container {
        bottom: calc(16px + env(safe-area-inset-bottom, 0));
    }
}