:root {
    --primary: #1d5fae;
    --primary-dark: #144480;
    --danger: #c62828;
    --border: #d7dce2;
    --bg: #f4f6f8;
    --text: #1f2937;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Sarabun", "Segoe UI", Tahoma, sans-serif;
    background: var(--bg);
    color: var(--text);
}

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.login-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: 32px;
    width: 100%;
    max-width: 380px;
}

.login-card h1 { font-size: 1.3rem; margin-bottom: 4px; text-align: center; }
.subtitle { color: #6b7280; margin-top: 0; margin-bottom: 20px; text-align: center; font-weight: 700; }

/* Login page: two tabs (teacher / admin) in one card. Switching to the admin tab re-themes the whole card
   dark+red (see body.admin-mode below) so which "mode" you're about to sign into stays obvious at a glance,
   same reasoning /admin/login.php used to have its own separate page for. */
.login-tabs { display: flex; gap: 6px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.login-tab {
    flex: 1 1 50%;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 6px;
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.login-tab:hover { color: var(--primary); }
.login-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.login-panel-admin .admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(198, 40, 40, .1);
    color: #c62828;
    border: 1px solid rgba(198, 40, 40, .35);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.login-panel-admin .admin-shield {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(198, 40, 40, .1);
    border: 1px solid rgba(198, 40, 40, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #c62828;
    margin: 0 auto 14px;
}
.admin-submit { background: #c62828 !important; border-color: #c62828 !important; }
.admin-submit:hover, .admin-submit:focus { background: #a81f1f !important; border-color: #a81f1f !important; }

body.admin-mode.login-page { background: radial-gradient(circle at 20% 20%, #2a1215 0%, #14151c 45%, #0b0c10 100%); }
body.admin-mode .login-card { background: #1c1e28; border: 1px solid rgba(198, 40, 40, .35); box-shadow: 0 20px 60px -20px rgba(0,0,0,.6); }
body.admin-mode .login-tabs { border-bottom-color: #33364a; }
body.admin-mode .login-tab { color: #8b90a0; }
body.admin-mode .login-tab.active { color: #ff6b6b; border-bottom-color: #c62828; }
body.admin-mode .login-card h1 { color: #fff; }
body.admin-mode .login-card .subtitle { color: #9aa0ae; }
body.admin-mode .login-card label { color: #c7cad1; }
body.admin-mode input[type=text], body.admin-mode input[type=password] {
    background: #12131a;
    border-color: #33364a;
    color: #f0f0f3;
}
body.admin-mode input[type=text]:focus, body.admin-mode input[type=password]:focus { border-color: #c62828; outline: none; }

.login-card form { display: flex; flex-direction: column; gap: 6px; }
.login-card label { font-size: .9rem; margin-top: 10px; }

input, select, textarea, button {
    font-family: inherit;
    font-size: 1rem;
}

input[type=text], input[type=password], input[type=date], input[type=number], select, textarea {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 100%;
}

textarea { resize: vertical; }

button { cursor: pointer; }

/* Buttons: primary and secondary share one box (same padding, border, font and line-height) so they are
   the same height side by side. Hover/focus colours are set explicitly: SB Admin 2 loads first and gives
   .btn-secondary:hover a white text colour, which vanished against this light hover background. */
.btn-primary, .btn-secondary, .login-card button[type=submit] {
    box-sizing: border-box;
    padding: 8px 16px;
    border: 1px solid var(--primary);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

.btn-primary, .login-card button[type=submit] {
    background: var(--primary);
    color: #fff;
    margin-top: 16px;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.login-card button[type=submit]:hover, .login-card button[type=submit]:focus {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
    text-decoration: none;
}

.btn-secondary {
    background: #fff;
    color: var(--primary);
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background: #e3eefc;
    border-color: var(--primary-dark);
    color: var(--primary-dark);
    text-decoration: none;
}

.btn-primary:disabled, .btn-secondary:disabled, .btn-primary[disabled], .btn-secondary[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

/* Icon-only buttons (× close/remove glyphs etc.) don't need the label gap. */
.btn-primary i, .btn-secondary i { font-size: .95em; }

.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.form-actions .btn-primary { margin-top: 0; }
.form-actions .group-check-item { white-space: nowrap; flex-shrink: 0; }
.form-actions .group-check-item select { width: auto; }

.btn-logout, .btn-header {
    color: #fff;
    text-decoration: none;
    background: rgba(255,255,255,.15);
    padding: 8px 14px;
    border-radius: 8px;
}

.header-actions { display: flex; align-items: center; gap: 10px; }

.module-switcher { display: flex; align-items: center; gap: 6px; margin-right: 6px; }
.btn-header-current { background: rgba(255,255,255,.35); font-weight: 600; }

.app-header {
    background: var(--primary);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
}

.app-header h1 { margin: 0; font-size: 1.15rem; }
.teacher-name { margin: 2px 0 0; opacity: .9; font-size: .9rem; }

.app-layout {
    max-width: 1600px;
    width: 100%;
    margin: 24px auto;
    padding: 0 32px 64px;
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

@media (max-width: 900px) {
    /* Below this width a fixed-width sidebar squeezes the form
       uncomfortably (the original iPad/iPhone complaint) -- stack history
       above the form instead, same as the full-width layout. */
    .app-layout { padding: 0 16px 48px; flex-direction: column; }
}

.app-main {
    min-width: 0;
    flex: 1 1 auto;
}

/* History sits in a sticky left sidebar on desktop so it's easy to jump
   between past records while the form stays in view. Falls back to
   stacking above the form (full width, no sidebar) below the 900px
   breakpoint above. */
.history-panel {
    flex: 0 0 320px;
    position: sticky;
    top: 24px;
}

@media (max-width: 900px) {
    .history-panel { position: static; width: 100%; flex: 1 1 auto; }
}

.history-panel h2 { font-size: 1rem; }

.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.card h2 { margin-top: 0; font-size: 1.05rem; }

.field-row { display: flex; flex-wrap: wrap; gap: 16px; }
.field { flex: 1 1 160px; display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: .85rem; color: #4b5563; }

.roster-summary { display: flex; gap: 16px; margin-bottom: 12px; font-size: .9rem; color: #374151; }
.roster-summary strong { color: var(--text); }

table.roster-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.roster-table th, table.roster-table td { border-bottom: 1px solid var(--border); padding: 8px 6px; text-align: left; }
table.roster-table th { background: #f8fafc; }

/* DataTables chrome (search/length/pagination) around .roster-table -- see
   assets/js/admin-datatables.js. Keep it visually part of the same card
   instead of looking like an unstyled third-party widget dropped in. */
.dataTables_wrapper { font-family: inherit; font-size: .9rem; margin-top: 8px; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 8px;
    font-family: inherit;
}
.dataTables_wrapper .dataTables_filter input { margin-left: 6px; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f0f6ff !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}
table.roster-table.dataTable thead th { cursor: pointer; }

.status-group { display: flex; gap: 10px; }
.status-group label { display: flex; align-items: center; gap: 4px; font-weight: normal; }

.remark-input { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; }

.signatory-field { margin-bottom: 18px; max-width: 420px; }
.signatory-field label { font-weight: 600; }

.group-checkboxes { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 4px 0; }
.group-check-item { display: flex; align-items: center; gap: 6px; font-weight: normal; cursor: pointer; }
.group-check-item input { width: 17px; height: 17px; cursor: pointer; }

.risk-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.risk-row .select2-container { flex: 3 1 260px; min-width: 220px; }
.risk-row .risk-reason { flex: 2 1 240px; min-width: 200px; }
.risk-row button { flex: 0 0 auto; background: none; border: none; color: var(--danger); font-size: 1.1rem; }

.select2-container--default .select2-selection--single {
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 4px 0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }

.attachment-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.attachment-list .thumb { position: relative; border: 1px solid var(--border); border-radius: 8px; padding: 6px; font-size: .8rem; text-align: center; width: 110px; cursor: grab; }
.attachment-list .thumb.dragging { opacity: .4; }
.attachment-list img { width: 100%; height: 80px; object-fit: cover; border-radius: 4px; }
.thumb-drag-handle {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary, #1e4f8f);
    color: #fff;
    font-size: .65rem;
    line-height: 20px;
}
.thumb-delete {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: var(--danger);
    color: #fff;
    font-size: .7rem;
    line-height: 20px;
    cursor: pointer;
}

.profile-preview { margin-bottom: 12px; }
.profile-preview img { max-width: 200px; max-height: 200px; border: 1px solid var(--border); border-radius: 8px; display: block; object-fit: contain; background: #fff; }

.signature-method-tabs { display: flex; gap: 20px; margin-bottom: 12px; font-weight: 600; }
.signature-method-tabs label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: normal; }
.signature-pad-wrap {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    touch-action: none;
    margin-bottom: 12px;
}
#signature-canvas, #sign-modal-canvas { display: block; width: 100%; height: 200px; }

.sign-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}
.sign-modal-box {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    width: 100%;
    max-width: 480px;
}
.sign-modal-box h3 { margin-top: 0; }

/* Thai Buddhist-calendar (พ.ศ.) date picker -- see thai-datepicker.js. The
   value submitted with the form is still Gregorian ISO underneath. */
.thai-date-field { position: relative; }
.thai-date-display {
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--text);
    cursor: pointer;
}
.thai-date-display:hover { border-color: var(--primary); }
.thai-date-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    padding: 12px;
    width: 260px;
}
.thai-date-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.thai-date-label { font-weight: 600; font-size: .92rem; }
.thai-date-nav {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--primary);
    border-radius: 6px;
}
.thai-date-nav:hover { background: #f0f6ff; }
.thai-date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.thai-date-weekday { text-align: center; font-size: .75rem; color: #6b7280; padding: 4px 0; }
.thai-date-day {
    background: none;
    border: none;
    border-radius: 6px;
    padding: 6px 0;
    font-family: inherit;
    font-size: .85rem;
    cursor: pointer;
    color: var(--text);
}
.thai-date-day:hover { background: #f0f6ff; }
.thai-date-day.today { font-weight: 700; color: var(--primary); }
.thai-date-day.selected { background: var(--primary); color: #fff; }

.hint { color: #6b7280; font-size: .85rem; }

/* Marks the admin shell so it's never ambiguous whether you're looking at
   the teacher area or the admin area -- see shared-auth/src/Layout.php. */
.admin-mode-badge {
    display: inline-block;
    vertical-align: middle;
    background: var(--danger);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: .02em;
}

.danger-zone { border: 1px solid var(--danger); background: #fff8f7; }
.danger-zone h2 { color: var(--danger); display: flex; align-items: center; gap: 8px; }

/* Scrolls internally in the sidebar (limited vertical space there) --
   below the 900px breakpoint the sidebar becomes a full-width block above
   the form instead, where there's no reason to cap its height. */
.history-list { display: flex; flex-direction: column; gap: 4px; max-height: 65vh; overflow-y: auto; }
@media (max-width: 900px) {
    .history-list { max-height: none; overflow-y: visible; }
}
.history-item {
    display: grid;
    grid-template-columns: 34px 1fr 22px;
    gap: 6px;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font-size: .88rem;
    color: var(--text);
}
.history-item:hover { border-color: var(--primary); background: #f0f6ff; }
.history-item.active { border-color: var(--primary); background: #eaf1fc; }
.history-item .history-no { color: #6b7280; font-weight: 600; padding-left: 10px; white-space: nowrap; }
.history-item .history-info {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: 6px 4px;
    font-family: inherit;
    color: inherit;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}
.history-item .history-date { font-weight: 600; flex: 0 0 auto; }
.history-item .history-meta { font-weight: normal; color: #6b7280; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; }
.history-item .history-delete {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    font-size: .8rem;
    padding: 8px 10px 8px 0;
}

.alert { padding: 10px 14px; border-radius: 8px; margin: 12px 0; font-size: .9rem; }
.alert-error { background: #fdecea; color: var(--danger); border: 1px solid #f5c6cb; }
.alert-success { background: #e8f5e9; color: #1b5e20; border: 1px solid #c8e6c9; }

/* ---- SB Admin 2 shell (sidebar/topbar chrome only -- see shared-auth/src/Layout.php).
   Loaded last so these repaint SB Admin 2's default indigo with the app's own
   blue brand color; everything above this line keeps styling page CONTENT
   exactly as before, untouched by the shell. ---- */
.sidebar.bg-gradient-primary {
    background-image: linear-gradient(180deg, var(--primary) 10%, var(--primary-dark) 100%) !important;
}
.sidebar .nav-item .nav-link { font-family: inherit; }
.sidebar .sidebar-brand-text { font-family: inherit; }
.topbar .nav-link .text-gray-600 { color: var(--text) !important; }
.dropdown-item:active { background-color: var(--primary) !important; }
.collapse-item.active { color: var(--primary) !important; font-weight: 700; }

/* ---- Module-picker dashboard (public/dashboard.php) -- the landing page
   after login, before committing to one module's own sidebar/menu. ---- */
.dashboard-page { min-height: 100vh; padding: 32px 16px; }
.dashboard-wrap { max-width: 900px; margin: 0 auto; }
.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}
.dashboard-header h1 { font-size: 1.5rem; margin: 0 0 4px; }
.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}
.module-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    padding: 32px 20px;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease;
    border: 1px solid transparent;
}
.module-card:not(.module-card-disabled):hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    border-color: var(--primary);
}
.module-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #eaf1fb;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}
.module-card-label { font-weight: 600; font-size: 1.05rem; }
.module-card-admin .module-card-icon { background: #fdecea; color: var(--danger); }
.module-card-disabled {
    cursor: default;
    opacity: .6;
}
.module-card-disabled .module-card-icon { background: #eee; color: #9aa1a9; }
.module-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #f5a623;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
}

.export-all { border-top: 1px dashed var(--border, #d6dbe1); margin-top: 12px; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.export-all[hidden] { display: none; }
.export-all select { max-width: 100%; }

/* Google sign-in button on the login card */
.login-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: #6b7280; font-size: .85rem; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.google-login-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: #1f2937; font-weight: 600; text-decoration: none; }
.google-login-btn:hover { background: #f3f6fb; text-decoration: none; color: #1f2937; }
.google-g { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: #4285f4; font-weight: 700; border: 1px solid #dadce0; }

/* Password change: live requirement checklist + strength meter */
.pw-meter { height: 8px; background: #e5e7eb; border-radius: 999px; overflow: hidden; margin-top: 8px; }
.pw-meter span { display: block; height: 100%; width: 0; transition: width .2s, background .2s; }
.pw-rules { list-style: none; margin: 4px 0 0; padding: 0; font-size: .85rem; color: #4b5563; }
.pw-rules li { margin: 2px 0; }
.pw-rules li.ok { color: #15803d; }
.pw-rules li.bad { color: #b91c1c; }
#pw-submit:disabled { opacity: .5; cursor: not-allowed; }

/* Module-picker dashboard: user dropdown */
.user-menu { position: relative; }
.user-menu-toggle { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; color: var(--text); font-weight: 600; cursor: pointer; }
.user-menu-toggle:hover { background: #f3f6fb; }
.user-menu-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 6px; z-index: 20; }
.user-menu-list[hidden] { display: none; }
.user-menu-list a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--text); text-decoration: none; }
.user-menu-list a:hover { background: #eef3fa; }
.user-menu-list hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }
@media (max-width: 560px) { .user-menu-name { display: none; } }

/* SB Admin 2 draws the sidebar chevrons with the Font Awesome *webfont*, which this project does not load (it uses the
   JS/SVG build) -- they showed as empty boxes. Plain text glyphs instead (CSS escapes, ASCII only). */
.sidebar .nav-item .nav-link[data-toggle="collapse"]::after { font-family: inherit; font-weight: 400; content: "\25BE"; }
.sidebar .nav-item .nav-link[data-toggle="collapse"].collapsed::after { content: "\25B8"; }
.sidebar #sidebarToggle::after { font-family: inherit; font-weight: 700; content: "\2039"; }
.sidebar.toggled #sidebarToggle::after { content: "\203A"; }

/* Wider sidebar (SB Admin 2 default is 14rem, which cut off longer Thai menu labels); the collapsed 6.5rem state is untouched. */
@media (min-width: 768px) {
    .sidebar:not(.toggled) { width: 17rem !important; }
    .sidebar:not(.toggled) .nav-item .nav-link { width: 17rem; }
    .sidebar .nav-item .collapse .collapse-inner .collapse-item,
    .sidebar .nav-item .collapsing .collapse-inner .collapse-item { white-space: normal; }
}

/* Phones (< 768px): the sidebar becomes an off-canvas drawer with full labels (opened by the top-bar menu button, see
   sidebar-mobile.js). Sub-menus open inline instead of as a narrow floating flyout, and the drawer scrolls, so long
   menus and long Thai labels stay usable. */
@media (max-width: 767.98px) {
    .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1040; width: min(18rem, 86vw) !important; min-height: 0; overflow-y: auto; overflow-x: hidden; transform: translateX(-100%); transition: transform .2s ease; }
    .sidebar.sidebar-open { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); }
    body.sidebar-drawer-open { overflow: hidden; }
    .sidebar .sidebar-brand { height: 4rem; }
    .sidebar .nav-item .nav-link { display: flex; align-items: center; gap: .75rem; width: 100% !important; padding: .85rem 1rem; text-align: left; }
    .sidebar .nav-item .nav-link i { margin: 0; font-size: 1rem; }
    .sidebar .nav-item .nav-link span { display: inline !important; font-size: .95rem; }
    .sidebar .nav-item .nav-link[data-toggle="collapse"]::after { margin-left: auto; }
    .sidebar .nav-item .collapse, .sidebar .nav-item .collapsing { position: static !important; transform: none !important; inset: auto !important; margin: 0 .75rem; min-width: 0; }
    .sidebar .nav-item .collapse .collapse-inner, .sidebar .nav-item .collapsing .collapse-inner { margin: 0 0 .5rem; }
    .sidebar .nav-item .collapse .collapse-item { white-space: normal; }
    .sidebar .sidebar-heading, .sidebar hr.sidebar-divider { display: block; }
}

/* 2FA page */
.twofa-card { max-width: 440px; }
.twofa-steps { padding-left: 1.2rem; font-size: .9rem; color: #4b5563; }
.twofa-qr { display: flex; justify-content: center; margin: 8px 0; }
.twofa-qr svg { width: 220px; height: 220px; }
.twofa-secret { font-size: .95rem; letter-spacing: .05em; word-break: break-all; }
.twofa-codes { background: #f3f6fb; border: 1px dashed var(--border); border-radius: 8px; padding: 12px; font-size: 1.1rem; text-align: center; letter-spacing: .08em; }
.twofa-ack { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; }
.twofa-cancel { margin-top: 14px; }
.twofa-cancel .btn-secondary { width: 100%; }
#twofa-continue:disabled { opacity: .5; cursor: not-allowed; }
.login-card .twofa-cancel button[type=submit].btn-secondary { background: #fff; color: var(--primary); margin-top: 0; }
.login-card .twofa-cancel button[type=submit].btn-secondary:hover { background: #e3eefc; color: var(--primary-dark); }