/* =====================================================================
   Sistem Absensi Siswa Digital SMAN 2 Cirebon — Design tokens
   ===================================================================== */
:root {
    --clr-bg-start: #0f1642;
    --clr-bg-end: #1d2f6f;
    --clr-accent: #33d6a6;      /* hijau kehadiran */
    --clr-accent-2: #ffb648;    /* kuning terlambat / peringatan */
    --clr-danger: #ff5d73;
    --clr-glass: rgba(255, 255, 255, 0.10);
    --clr-glass-border: rgba(255, 255, 255, 0.18);
    --clr-text: #eef1fb;
    --clr-text-dim: #aab2d6;
    --font-display: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --radius-lg: 20px;
    --radius-md: 14px;
    --shadow-depth: 0 18px 40px -14px rgba(6, 10, 40, 0.55);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--clr-text);
    background: linear-gradient(160deg, var(--clr-bg-start), var(--clr-bg-end) 70%);
    min-height: 100vh;
}

h1, h2, h3, .brand {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
}

a { color: inherit; text-decoration: none; }

.glass-card {
    background: var(--clr-glass);
    border: 1px solid var(--clr-glass-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-depth);
}

/* ---------- Landing page ---------- */
.landing {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 20px 30px;
}

.landing-header { text-align: center; margin-bottom: 26px; }
.landing-header .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(51, 214, 166, 0.15);
    border: 1px solid rgba(51, 214, 166, 0.4);
    color: var(--clr-accent);
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 13px;
}
.landing-header .status-badge .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--clr-accent);
    box-shadow: 0 0 0 0 rgba(51,214,166,.6);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(51,214,166,.5); }
    70% { box-shadow: 0 0 0 8px rgba(51,214,166,0); }
    100% { box-shadow: 0 0 0 0 rgba(51,214,166,0); }
}
.landing-header h1 { font-size: clamp(30px, 3vw, 39px); margin: 0 0 6px; line-height: 1.16; }
.landing-header p { color: var(--clr-text-dim); margin: 0; font-size: 17px; line-height: 1.4; }

.role-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    max-width: 1040px;
    width: 100%;
}
.role-card {
    grid-column: span 2;
    min-height: 188px;
    padding: 24px 25px;
    text-align: left;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.role-card:nth-child(4) { grid-column: 2 / span 2; }
.role-card:nth-child(5) { grid-column: 4 / span 2; }
.role-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.35); }
.role-card .icon { font-size: 32px; margin-bottom: 12px; display: block; line-height: 1; }
.role-card h3 { margin: 0 0 7px; font-size: 21px; line-height: 1.22; }
.role-card p { margin: 0; color: var(--clr-text-dim); font-size: 15.5px; line-height: 1.48; }

@media (max-width: 900px) {
    .landing { padding: 30px 20px 44px; }
    .landing-header { margin-bottom: 28px; }
    .role-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 760px;
        gap: 16px;
    }
    .role-card,
    .role-card:nth-child(4),
    .role-card:nth-child(5) {
        grid-column: auto;
        min-height: 190px;
    }
    .role-card:last-child {
        grid-column: 1 / -1;
        width: calc((100% - 16px) / 2);
        justify-self: center;
    }
}

@media (min-width: 901px) and (max-height: 760px) {
    .landing { padding-top: 20px; padding-bottom: 20px; }
    .landing-header { margin-bottom: 18px; }
    .landing-header .status-badge { margin-bottom: 9px; }
    .landing-header h1 { font-size: clamp(28px, 2.6vw, 35px); }
    .landing-header p { font-size: 16px; }
    .role-grid { gap: 13px; max-width: 1010px; }
    .role-card { min-height: 166px; padding: 19px 22px; }
    .role-card .icon { font-size: 29px; margin-bottom: 9px; }
    .role-card h3 { font-size: 20px; margin-bottom: 5px; }
    .role-card p { font-size: 15px; line-height: 1.4; }
}

@media (max-width: 620px) {
    .landing { padding: 32px 16px 48px; }
    .landing-header h1 { font-size: 30px; }
    .landing-header p { font-size: 16px; }
    .role-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
        gap: 16px;
    }
    .role-card,
    .role-card:nth-child(4),
    .role-card:nth-child(5),
    .role-card:last-child {
        grid-column: 1;
        width: 100%;
        min-height: auto;
        padding: 28px 24px;
    }
    .role-card .icon { font-size: 34px; margin-bottom: 14px; }
    .role-card h3 { font-size: 21px; }
    .role-card p { font-size: 16px; }
}

/* ---------- Forms / auth ---------- */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.auth-card { width: 100%; max-width: 380px; padding: 36px 30px; }
.auth-card h2 { margin: 0 0 4px; font-size: 22px; }
.auth-card .sub { color: var(--clr-text-dim); font-size: 13.5px; margin-bottom: 24px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--clr-text-dim); margin-bottom: 6px; }
.field input {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-glass-border);
    background: rgba(255,255,255,0.06);
    color: var(--clr-text);
    font-size: 15px;
}
.field input:focus {
    outline: none;
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 3px rgba(51,214,166,0.2);
}

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--clr-accent);
    color: #062419;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    width: 100%;
    transition: filter .15s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-outline {
    background: transparent;
    border: 1px solid var(--clr-glass-border);
    color: var(--clr-text);
}

.alert {
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: 13.5px;
    margin-bottom: 16px;
}
.alert-error { background: rgba(255,93,115,0.14); border: 1px solid rgba(255,93,115,0.4); color: #ffd1d8; }
.alert-success { background: rgba(51,214,166,0.14); border: 1px solid rgba(51,214,166,0.4); color: #b9f5df; }

/* ---------- Dashboard layout ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    width: 230px;
    flex-shrink: 0;
    padding: 24px 16px;
    background: rgba(255,255,255,0.05);
    border-right: 1px solid var(--clr-glass-border);
}
.sidebar .brand { font-size: 15px; margin-bottom: 28px; display: block; line-height: 1.4; }
.sidebar nav a {
    display: block;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    color: var(--clr-text-dim);
    font-size: 14px;
    margin-bottom: 4px;
}
.sidebar nav a:hover, .sidebar nav a.active {
    background: rgba(255,255,255,0.08);
    color: var(--clr-text);
}
.main { flex: 1; padding: 24px 32px; max-width: 100%; overflow-x: hidden; }
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px;
}
.topbar h1 { font-size: 20px; margin: 0; }
.topbar .who { font-size: 13px; color: var(--clr-text-dim); }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.stat-card { padding: 18px 20px; }
.stat-card .label { font-size: 12.5px; color: var(--clr-text-dim); margin-bottom: 6px; }
.stat-card .value { font-size: 26px; font-weight: 700; font-family: var(--font-display); }
.stat-card .value.accent { color: var(--clr-accent); }
.stat-card .value.warn { color: var(--clr-accent-2); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--clr-glass-border); }
th { color: var(--clr-text-dim); font-weight: 500; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; }
.badge { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-hadir { background: rgba(51,214,166,0.16); color: var(--clr-accent); }
.badge-terlambat { background: rgba(255,182,72,0.16); color: var(--clr-accent-2); }

/* ---------- QR / scan pages ---------- */
.qr-box {
    display: flex; flex-direction: column; align-items: center;
    padding: 32px; gap: 16px;
}
#qrcode-render { background: #fff; padding: 14px; border-radius: var(--radius-md); }
.token-timer { font-size: 13px; color: var(--clr-text-dim); }
.scan-status { min-height: 60px; text-align: center; }

@media (max-width: 720px) {
    .app-shell { flex-direction: column; }
    .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--clr-glass-border); }
    .main { padding: 20px; }
}

/* ---------- Data master: form manual + upload template ---------- */
.data-entry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 460px));
    gap: 24px;
    align-items: start;
    margin-bottom: 24px;
}
.data-form-card {
    padding: 24px;
    min-width: 0;
}
.data-form-card h3 {
    margin: 0 0 18px;
    font-size: 18px;
}
.card-description {
    color: var(--clr-text-dim);
    font-size: 13px;
    line-height: 1.6;
    margin: -8px 0 18px;
}
.form-select,
.field select {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-glass-border);
    background: rgba(255,255,255,0.06);
    color: var(--clr-text);
    font-size: 15px;
}
.form-select:focus,
.field select:focus {
    outline: none;
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 3px rgba(51,214,166,0.2);
}
.form-select option,
.field select option {
    color: #111936;
    background: #eef1fb;
}
.file-input {
    padding: 9px !important;
    cursor: pointer;
}
.file-input::file-selector-button {
    border: 0;
    border-radius: 9px;
    padding: 8px 12px;
    margin-right: 10px;
    background: rgba(255,255,255,0.16);
    color: var(--clr-text);
    cursor: pointer;
}
.import-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0;
    color: var(--clr-text-dim);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.import-divider::before,
.import-divider::after {
    content: '';
    height: 1px;
    flex: 1;
    background: var(--clr-glass-border);
}
.import-note,
.table-caption {
    color: var(--clr-text-dim);
    font-size: 12.5px;
    line-height: 1.55;
}
.import-note { margin: 12px 0 0; }
.table-caption { margin: 10px 2px 0; }
.table-card {
    padding: 8px 16px;
    overflow-x: auto;
}
.alert-multiline { line-height: 1.55; }
.checkbox-field label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--clr-text);
}
.checkbox-field input {
    width: auto;
    margin: 0;
}

@media (max-width: 980px) {
    .data-entry-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Patch v1.0.4: petugas memilih titik saat generate QR ---------- */
.role-note {
    margin: -4px 0 16px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: rgba(51,214,166,0.08);
    border: 1px solid rgba(51,214,166,0.22);
}
.checkpoint-picker {
    padding: 22px 24px;
    margin-bottom: 20px;
}
.checkpoint-picker h3 {
    margin: 0 0 6px;
    font-size: 18px;
}
.checkpoint-picker p {
    margin: 0;
    color: var(--clr-text-dim);
    font-size: 13px;
    line-height: 1.55;
}
.checkpoint-actions {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(190px, 240px);
    gap: 14px;
    align-items: end;
    margin-top: 18px;
}
.checkpoint-field { margin: 0; }
.checkpoint-button { height: 46px; }
.checkpoint-message {
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--clr-text-dim);
}
.checkpoint-name {
    font-size: 18px !important;
    line-height: 1.3;
}
.token-status {
    font-size: 20px !important;
}
.qr-box-inactive {
    opacity: .72;
}
.qr-placeholder {
    min-width: 220px;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    color: #52607b;
    font-size: 13px;
    background: #fff;
    border-radius: var(--radius-md);
}
.history-filter {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 240px) minmax(160px, 210px);
    gap: 14px;
    align-items: end;
    padding: 18px;
    margin-bottom: 16px;
}
.history-filter .field { margin: 0; }
.history-filter-button { height: 46px; }
.history-heading {
    padding: 12px 16px;
    margin-bottom: 12px;
    color: var(--clr-text-dim);
    font-size: 13px;
}
.history-heading strong { color: var(--clr-text); }

@media (max-width: 760px) {
    .checkpoint-actions,
    .history-filter {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Patch v1.0.7: backup sistem admin ---------- */
.backup-security-note {
    padding: 14px 16px;
    margin-bottom: 22px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 182, 72, 0.42);
    background: rgba(255, 182, 72, 0.11);
    color: #ffe2ad;
    font-size: 13px;
    line-height: 1.6;
}
.backup-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(230px, 1fr));
    gap: 18px;
    align-items: stretch;
    margin-bottom: 22px;
}
.backup-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    min-width: 0;
}
.backup-card-featured {
    border-color: rgba(51, 214, 166, 0.48);
    box-shadow: 0 18px 40px -14px rgba(6, 10, 40, 0.55), 0 0 0 1px rgba(51, 214, 166, 0.08);
}
.backup-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: rgba(51, 214, 166, 0.13);
    border: 1px solid rgba(51, 214, 166, 0.34);
    color: var(--clr-accent);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
}
.backup-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
}
.backup-card p {
    margin: 0;
    color: var(--clr-text-dim);
    font-size: 13px;
    line-height: 1.65;
}
.backup-list {
    margin: 0;
    padding-left: 18px;
    color: var(--clr-text-dim);
    font-size: 12.5px;
    line-height: 1.65;
}
.backup-list strong { color: var(--clr-text); }
.backup-form { margin-top: auto; }
.backup-guide {
    padding: 22px 24px;
    max-width: 980px;
}
.backup-guide h3 { margin: 0 0 8px; font-size: 17px; }
.backup-guide p {
    margin: 0;
    color: var(--clr-text-dim);
    font-size: 13px;
    line-height: 1.65;
}
.backup-guide .backup-small-note {
    margin-top: 8px;
    font-size: 12px;
}

@media (max-width: 1100px) {
    .backup-grid { grid-template-columns: minmax(0, 1fr); }
    .backup-card { max-width: 720px; }
}

/* ---------- Patch v1.0.8: import siswa bertahap ---------- */
.import-progress-card {
    padding: 22px 24px;
    margin-bottom: 22px;
    border-color: rgba(51, 214, 166, 0.38);
}
.import-progress-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}
.import-progress-heading h3 {
    margin: 0 0 6px;
    font-size: 18px;
}
.import-progress-heading p {
    margin: 0;
    color: var(--clr-text-dim);
    font-size: 13px;
    line-height: 1.55;
}
.import-progress-heading > strong {
    min-width: 62px;
    text-align: right;
    color: var(--clr-accent);
    font-family: var(--font-display);
    font-size: 22px;
}
.import-progress-track {
    height: 12px;
    margin: 18px 0 14px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.09);
}
.import-progress-track span {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--clr-accent), #6be7c2);
    transition: width .25s ease;
}
.import-progress-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    color: var(--clr-text-dim);
    font-size: 12.5px;
}
.import-progress-stats strong { color: var(--clr-text); }
.import-progress-message {
    margin: 14px 0 0;
    color: var(--clr-text-dim);
    font-size: 13px;
}
.import-progress-error { color: #ffc1cb; }
.import-retry-button {
    width: auto;
    min-width: 180px;
    margin-top: 14px;
}
@media (max-width: 640px) {
    .import-progress-heading { align-items: center; }
    .import-progress-heading > strong { font-size: 19px; }
}

/* ---------- Patch v1.0.9: pemindai QR lebih responsif ---------- */
.scanner-card {
    max-width: 560px;
    margin: 0 auto;
}
.scanner-instruction {
    max-width: 460px;
    text-align: center;
    color: var(--clr-text-dim);
    font-size: 13px;
    line-height: 1.55;
}
.scanner-reader {
    width: 100%;
    max-width: 440px;
    min-height: 280px;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: #0a0d18;
}
.scanner-reader video {
    width: 100% !important;
    min-height: 280px;
    object-fit: cover;
    border-radius: var(--radius-md);
}
.scanner-reader img {
    max-width: 100%;
}
.scanner-controls {
    width: 100%;
    max-width: 440px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.scanner-camera-field {
    margin-bottom: 0;
}
.scanner-controls .btn {
    width: 100%;
}
.scan-status {
    width: 100%;
    max-width: 440px;
    min-height: 48px;
}
.scan-status .alert {
    margin-bottom: 0;
    line-height: 1.5;
}

#qrcode-render {
    background: #fff;
    padding: 24px;
    border-radius: var(--radius-md);
    line-height: 0;
}
#qrcode-render canvas,
#qrcode-render img {
    display: block !important;
    width: 320px !important;
    height: 320px !important;
    max-width: min(72vw, 320px) !important;
    max-height: min(72vw, 320px) !important;
    image-rendering: pixelated;
}
.qr-enlarge-button {
    width: auto;
    min-width: 160px;
}
.qr-fullscreen {
    position: fixed;
    z-index: 9999;
    inset: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}
.qr-fullscreen #qrcode-render {
    box-shadow: none;
}
.qr-fullscreen #qrcode-render canvas,
.qr-fullscreen #qrcode-render img {
    width: min(76vw, 520px) !important;
    height: min(76vw, 520px) !important;
    max-width: none !important;
    max-height: none !important;
}
.qr-fullscreen .token-timer {
    color: #1a1a1a;
    font-weight: 600;
}
.qr-fullscreen .qr-enlarge-button {
    color: #111936;
    border-color: rgba(17,25,54,.3);
}
.qr-fullscreen-open {
    overflow: hidden;
}

@media (max-width: 720px) {
    .scanner-card {
        padding: 20px 14px;
    }
    .scanner-reader,
    .scanner-reader video {
        min-height: 250px;
    }
    #qrcode-render {
        padding: 18px;
    }
}

/* ---------- Patch v1.0.10: pengaturan jam absensi oleh admin ---------- */
.schedule-layout {
    display: grid;
    grid-template-columns: minmax(0, 780px) minmax(280px, 360px);
    gap: 24px;
    align-items: start;
}
.schedule-form-card,
.schedule-info-card {
    padding: 24px 26px;
}
.schedule-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}
.schedule-heading h3,
.schedule-info-card h3 {
    margin: 0 0 6px;
    font-size: 19px;
}
.schedule-heading p,
.schedule-info-card > p {
    margin: 0;
    color: var(--clr-text-dim);
    font-size: 13px;
    line-height: 1.55;
}
.schedule-status {
    flex: 0 0 auto;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}
.schedule-status.is-active {
    color: var(--clr-accent);
    background: rgba(51, 214, 166, .13);
    border: 1px solid rgba(51, 214, 166, .34);
}
.schedule-status.is-inactive {
    color: #ffc1cb;
    background: rgba(255, 104, 130, .12);
    border: 1px solid rgba(255, 104, 130, .30);
}
.schedule-form {
    display: grid;
    gap: 20px;
}
.schedule-time-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.schedule-form .field small {
    display: block;
    margin-top: 7px;
    color: var(--clr-text-dim);
    font-size: 11.5px;
    line-height: 1.45;
}
.schedule-days {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.schedule-days legend {
    margin-bottom: 10px;
    color: var(--clr-text-dim);
    font-size: 13px;
    font-weight: 500;
}
.schedule-day-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.day-option {
    position: relative;
    cursor: pointer;
}
.day-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.day-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.055);
    color: var(--clr-text-dim);
    font-size: 12.5px;
    font-weight: 600;
    transition: .18s ease;
}
.day-option input:checked + span {
    color: #071b25;
    background: var(--clr-accent);
    border-color: var(--clr-accent);
}
.day-option input:focus-visible + span {
    outline: 2px solid rgba(51, 214, 166, .8);
    outline-offset: 2px;
}
.schedule-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 15px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: rgba(255,255,255,.045);
    cursor: pointer;
}
.schedule-toggle input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--clr-accent);
}
.schedule-toggle span {
    display: grid;
    gap: 4px;
}
.schedule-toggle strong {
    font-size: 13px;
}
.schedule-toggle small {
    color: var(--clr-text-dim);
    font-size: 11.5px;
    line-height: 1.45;
}
.server-clock {
    margin: 12px 0 4px;
    color: var(--clr-accent);
    font-family: var(--font-display);
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: .04em;
}
.schedule-rule-list {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}
.schedule-rule-list > div {
    display: grid;
    gap: 3px;
    padding: 12px 13px;
    border-radius: 12px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.09);
}
.schedule-rule-list span {
    color: var(--clr-text-dim);
    font-size: 11.5px;
}
.schedule-rule-list strong {
    font-size: 12.5px;
}
.schedule-test-note {
    margin-top: 20px;
    padding: 14px 15px;
    border-radius: 13px;
    background: rgba(255, 182, 72, .10);
    border: 1px solid rgba(255, 182, 72, .24);
}
.schedule-test-note strong {
    color: var(--clr-accent-2);
    font-size: 12.5px;
}
.schedule-test-note p {
    margin: 6px 0 0;
    color: var(--clr-text-dim);
    font-size: 11.5px;
    line-height: 1.5;
}
@media (max-width: 1050px) {
    .schedule-layout { grid-template-columns: minmax(0, 1fr); }
    .schedule-info-card { max-width: 780px; }
}
@media (max-width: 720px) {
    .schedule-time-grid { grid-template-columns: minmax(0, 1fr); }
    .schedule-day-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .schedule-form-card,
    .schedule-info-card { padding: 20px; }
}

/* ---------- Patch v1.0.12: popup hasil scan + countdown QR realtime ---------- */
.token-countdown-value {
    display: inline-block;
    min-width: 62px;
    color: var(--clr-text);
    font-variant-numeric: tabular-nums;
    text-align: left;
}
.qr-fullscreen .token-countdown-value {
    color: #111936;
}

.scan-result-modal[hidden] {
    display: none !important;
}
.scan-result-modal {
    position: fixed;
    z-index: 12000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .16s ease;
}
.scan-result-modal.is-visible {
    opacity: 1;
}
.scan-result-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: rgba(4, 8, 24, .78);
    backdrop-filter: blur(8px);
    cursor: default;
}
.scan-result-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 430px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 28px;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(48, 61, 117, .98), rgba(25, 38, 91, .98));
    border: 1px solid var(--clr-glass-border);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .46);
    text-align: center;
    transform: translateY(12px) scale(.98);
    transition: transform .16s ease;
}
.scan-result-modal.is-visible .scan-result-dialog {
    transform: translateY(0) scale(1);
}
.scan-result-icon {
    width: 66px;
    height: 66px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 700;
}
.scan-result-success .scan-result-icon {
    background: rgba(51, 214, 166, .17);
    border: 2px solid rgba(51, 214, 166, .55);
    color: var(--clr-accent);
}
.scan-result-error .scan-result-icon {
    background: rgba(255, 93, 115, .16);
    border: 2px solid rgba(255, 93, 115, .55);
    color: #ff8da0;
}
.scan-result-dialog h2 {
    margin: 0 0 8px;
    font-size: 23px;
}
.scan-result-message {
    margin: 0 auto 20px;
    color: var(--clr-text-dim);
    font-size: 14px;
    line-height: 1.55;
}
.scan-result-details {
    display: grid;
    gap: 8px;
    margin-bottom: 20px;
    text-align: left;
}
.scan-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .07);
    font-size: 13px;
}
.scan-result-row span {
    color: var(--clr-text-dim);
}
.scan-result-row strong {
    color: var(--clr-text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.scan-result-row.is-present strong {
    color: var(--clr-accent);
}
.scan-result-row.is-late strong {
    color: var(--clr-accent-2);
}
.scan-result-row.is-failed strong {
    color: #ff9bad;
}
.scan-result-close {
    margin-top: 2px;
}
.scan-result-open {
    overflow: hidden;
}

@media (max-width: 520px) {
    .scan-result-modal {
        padding: 14px;
        align-items: end;
    }
    .scan-result-dialog {
        width: 100%;
        max-height: calc(100vh - 28px);
        padding: 24px 18px 18px;
        border-radius: 22px 22px 16px 16px;
    }
    .scan-result-row {
        align-items: flex-start;
    }
}

/* ---------- Patch v1.0.14: update petugas + daftar siswa 50 per halaman ---------- */
.student-list-card {
    padding: 0;
    overflow: hidden;
}
.student-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--clr-glass-border);
}
.student-list-heading h3 {
    margin: 0 0 5px;
    font-size: 18px;
}
.student-list-heading p {
    margin: 0;
    color: var(--clr-text-dim);
    font-size: 12.5px;
}
.student-page-indicator {
    flex: 0 0 auto;
    padding: 7px 11px;
    border-radius: 999px;
    color: var(--clr-text);
    background: rgba(255,255,255,.08);
    border: 1px solid var(--clr-glass-border);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.student-table-scroll {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.28) rgba(255,255,255,.06);
}
.student-table-scroll::-webkit-scrollbar {
    height: 10px;
}
.student-table-scroll::-webkit-scrollbar-track {
    background: rgba(255,255,255,.05);
}
.student-table-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255,255,255,.25);
    border: 2px solid transparent;
    background-clip: padding-box;
}
.student-data-table {
    min-width: 940px;
}
.student-data-table th:first-child,
.student-data-table td:first-child {
    width: 64px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.student-data-table td:nth-child(2) {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.student-data-table td:nth-child(3) {
    min-width: 220px;
}
.student-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 66px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    color: var(--clr-text-dim);
    font-size: 11.5px;
    font-weight: 600;
}
.student-role-badge.is-officer {
    color: var(--clr-accent);
    background: rgba(51,214,166,.12);
    border-color: rgba(51,214,166,.28);
}
.student-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--clr-glass-border);
}
.student-list-footer .table-caption {
    margin: 0;
}
.student-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}
.page-button,
.page-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid var(--clr-glass-border);
    background: rgba(255,255,255,.07);
    color: var(--clr-text);
    font-size: 12.5px;
    white-space: nowrap;
}
.page-button:hover {
    border-color: rgba(51,214,166,.42);
    background: rgba(51,214,166,.10);
}
.page-button.is-disabled {
    opacity: .42;
    cursor: not-allowed;
}
.page-current {
    min-width: 38px;
    color: #10172f;
    background: var(--clr-accent);
    border-color: transparent;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .student-list-heading,
    .student-list-footer {
        align-items: flex-start;
        flex-direction: column;
    }
    .student-pagination {
        width: 100%;
        justify-content: space-between;
    }
    .page-button {
        flex: 1;
    }
}


/* ---------- Patch v1.0.16: GPS adaptif, daftar petugas privat, QR stabil ---------- */
.scan-result-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}
.scan-result-actions .btn { width: 100%; }
.scan-result-retry {
    color: var(--clr-text);
    border-color: rgba(255,255,255,.30);
    background: rgba(255,255,255,.07);
}

.petugas-qr-panel {
    width: min(100%, 480px);
    max-width: 480px;
    margin: 22px auto 0;
    padding: 22px;
    gap: 14px;
    overflow: visible;
}
.qr-panel-heading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px;
}
.qr-panel-heading strong {
    font-family: var(--font-display);
    font-size: 17px;
}
.qr-panel-heading span {
    max-width: 58%;
    color: var(--clr-text-dim);
    font-size: 12.5px;
    text-align: right;
    overflow-wrap: anywhere;
}
.qr-visual-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    border-radius: 22px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.11);
}
#qrcode-render {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 324px);
    aspect-ratio: 1 / 1;
    min-width: 0;
    padding: 18px;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    line-height: 0;
    box-sizing: border-box;
}
#qrcode-render .qr-code-visual,
#qrcode-render > canvas,
#qrcode-render > table {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 288px !important;
    max-height: 288px !important;
    object-fit: contain;
    image-rendering: pixelated;
}
/* qrcodejs membuat canvas dan img sekaligus. Img cadangan disembunyikan agar QR tidak tampil ganda. */
#qrcode-render > img:not(.qr-code-visual) { display: none !important; }
#qrcode-render .qr-placeholder {
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    border-radius: 10px;
    line-height: 1.45;
    font-size: 14px;
    padding: 18px 16px;
    color: #52607b;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.petugas-qr-panel .token-timer {
    width: 100%;
    text-align: center;
    line-height: 1.5;
}
.petugas-qr-panel .qr-enlarge-button {
    min-width: 180px;
}
.petugas-scan-heading {
    margin: 28px 0 10px;
}
.petugas-scan-card {
    padding: 8px 16px;
    overflow-x: auto;
}
.petugas-scan-card table { min-width: 360px; }
.petugas-scan-card th:last-child,
.petugas-scan-card td:last-child { width: 140px; }

.qr-fullscreen {
    position: fixed;
    z-index: 9999;
    inset: 0;
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    height: auto;
    margin: 0;
    padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    background: #f7f8fc;
    color: #111936;
    justify-content: center;
    box-sizing: border-box;
}
.qr-fullscreen .qr-panel-heading { max-width: 390px; }
.qr-fullscreen .qr-panel-heading span,
.qr-fullscreen .token-timer { color: #52607b; }
.qr-fullscreen .qr-visual-frame {
    width: min(100%, 390px);
    padding: 12px;
    background: #edf0f7;
    border-color: #dce1ec;
}
.qr-fullscreen #qrcode-render {
    width: min(78vw, 340px);
    max-width: 340px;
    padding: 20px;
}
.qr-fullscreen #qrcode-render .qr-code-visual,
.qr-fullscreen #qrcode-render > canvas,
.qr-fullscreen #qrcode-render > table {
    width: 100% !important;
    height: 100% !important;
    max-width: 300px !important;
    max-height: 300px !important;
}
.qr-fullscreen .qr-enlarge-button {
    color: #111936;
    border-color: rgba(17,25,54,.28);
}

@media (max-width: 520px) {
    .petugas-qr-panel {
        width: 100%;
        padding: 16px;
        border-radius: 18px;
    }
    .qr-panel-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
    .qr-panel-heading span {
        max-width: 100%;
        text-align: left;
    }
    .qr-visual-frame { padding: 8px; }
    #qrcode-render {
        width: min(100%, 300px);
        padding: 16px;
    }
    .petugas-scan-card { padding: 6px 10px; }
}

/* ---------- Patch v1.0.18: CRUD data admin ---------- */
.crud-form-heading,
.crud-list-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.crud-form-heading {
    margin-bottom: 18px;
}
.crud-form-heading h3,
.crud-list-heading h3 {
    margin: 0;
}
.crud-cancel-link {
    flex: 0 0 auto;
    padding: 7px 11px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.18);
    color: var(--clr-text-dim);
    font-size: 12px;
    font-weight: 600;
}
.crud-cancel-link:hover {
    color: var(--clr-text);
    border-color: rgba(255,255,255,.32);
    background: rgba(255,255,255,.06);
}
.crud-list-card {
    margin-top: 24px;
    padding: 0;
    overflow: hidden;
}
.crud-list-heading {
    padding: 20px 22px 14px;
}
.crud-list-heading p {
    margin: 5px 0 0;
    color: var(--clr-text-dim);
    font-size: 12.5px;
    line-height: 1.5;
}
.crud-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.crud-table-scroll table {
    min-width: 860px;
}
.crud-actions-cell {
    width: 1%;
    min-width: 132px;
    white-space: nowrap;
}
.crud-actions {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.crud-actions form {
    margin: 0;
}
.crud-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 11px;
    border-radius: 9px;
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.crud-edit {
    color: #b9f5df;
    background: rgba(51,214,166,.12);
    border-color: rgba(51,214,166,.34);
}
.crud-edit:hover {
    background: rgba(51,214,166,.20);
}
.crud-delete {
    color: #ffd1d8;
    background: rgba(255,93,115,.12);
    border-color: rgba(255,93,115,.34);
}
.crud-delete:hover {
    background: rgba(255,93,115,.22);
}
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
}
.status-badge.is-active {
    color: var(--clr-accent);
    background: rgba(51,214,166,.13);
    border: 1px solid rgba(51,214,166,.30);
}
.status-badge.is-inactive {
    color: #ffc1cb;
    background: rgba(255,93,115,.11);
    border: 1px solid rgba(255,93,115,.28);
}
.crud-days-cell {
    min-width: 220px;
    white-space: normal;
    line-height: 1.45;
}
.student-data-table {
    min-width: 1040px;
}

@media (max-width: 720px) {
    .crud-form-heading,
    .crud-list-heading {
        align-items: center;
    }
    .crud-list-heading {
        padding: 18px 16px 12px;
    }
    .crud-actions-cell {
        min-width: 126px;
    }
    .crud-button {
        min-height: 34px;
        padding: 7px 10px;
    }
}

/* ---------- Patch v1.0.19: kompatibilitas kamera dan lokasi iPhone ---------- */
.ios-compat-card[hidden],
.ios-browser-warning[hidden] {
    display: none !important;
}
.ios-compat-card {
    width: 100%;
    max-width: 440px;
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(121, 175, 255, .24);
    background: rgba(74, 105, 183, .14);
}
.ios-compat-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.ios-compat-heading > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.ios-compat-heading strong {
    color: var(--clr-text);
    font-family: var(--font-display);
    font-size: 14px;
}
.ios-compat-heading span {
    color: var(--clr-text-dim);
    font-size: 12px;
    line-height: 1.5;
}
.ios-compat-badge {
    flex: 0 0 auto;
    padding: 5px 9px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: var(--clr-text) !important;
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: .04em;
}
.ios-browser-warning {
    padding: 10px 11px;
    border-radius: 11px;
    border: 1px solid rgba(255, 174, 99, .32);
    background: rgba(255, 174, 99, .10);
    color: #ffd6aa;
    font-size: 12px;
    line-height: 1.5;
}
.ios-location-button {
    width: 100%;
    min-height: 44px;
}
.ios-location-status {
    min-height: 38px;
    padding: 9px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,.045);
    color: var(--clr-text-dim);
    font-size: 12px;
    line-height: 1.5;
}
.ios-location-status.is-success {
    border: 1px solid rgba(51, 214, 166, .28);
    background: rgba(51, 214, 166, .08);
    color: #a9f0d8;
}
.ios-location-status.is-working {
    border: 1px solid rgba(107, 166, 255, .26);
    background: rgba(107, 166, 255, .08);
    color: #c8dcff;
}
.ios-location-status.is-error {
    border: 1px solid rgba(255, 93, 115, .30);
    background: rgba(255, 93, 115, .08);
    color: #ffc1cb;
}
.scanner-controls .btn:disabled,
.ios-location-button:disabled {
    cursor: wait;
    opacity: .58;
}

@media (max-width: 520px) {
    .ios-compat-card {
        padding: 13px;
    }
    .ios-compat-heading {
        gap: 8px;
    }
}

/* ---------- Patch v1.0.20: laporan & analisis rekap permasalahan ---------- */
.report-page {
    min-width: 0;
}
.report-page .topbar {
    align-items: flex-start;
    gap: 18px;
}
.report-page .topbar h1 {
    margin-bottom: 4px;
}
.report-subtitle {
    margin: 0;
    color: var(--clr-text-dim);
    font-size: 13px;
    line-height: 1.55;
}
.report-filter-card,
.report-analysis-card,
.report-detail-card,
.report-table-card {
    padding: 22px;
    margin-bottom: 22px;
}
.report-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}
.report-section-heading h2 {
    margin: 0;
    font-size: 18px;
}
.report-section-heading p {
    margin: 5px 0 0;
    color: var(--clr-text-dim);
    font-size: 12.5px;
    line-height: 1.5;
}
.report-quick-range {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.report-quick-range a,
.report-period-badge {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 6px 11px;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    color: var(--clr-text-dim);
    font-size: 11.5px;
    font-weight: 700;
}
.report-quick-range a:hover {
    color: var(--clr-text);
    border-color: rgba(51,214,166,.42);
    background: rgba(51,214,166,.09);
}
.report-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}
.report-filter-grid .field {
    margin: 0;
}
.report-filter-grid select,
.report-filter-grid textarea,
.report-resolution-form select,
.report-resolution-form textarea {
    width: 100%;
    padding: 11px 13px;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-glass-border);
    background: rgba(255,255,255,.06);
    color: var(--clr-text);
    font: inherit;
}
.report-filter-grid select option,
.report-resolution-form select option {
    color: #172047;
    background: #eef1fb;
}
.report-search-field {
    grid-column: span 2;
}
.report-filter-actions {
    display: flex;
    gap: 9px;
    align-items: center;
    min-height: 45px;
}
.report-filter-actions .btn {
    min-height: 43px;
}
.report-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.report-stat {
    min-height: 110px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}
.report-stat span {
    color: var(--clr-text-dim);
    font-size: 12.5px;
    line-height: 1.4;
}
.report-stat strong {
    font-family: var(--font-display);
    font-size: clamp(25px, 3vw, 35px);
    line-height: 1;
}
.report-stat-warning strong { color: var(--clr-accent-2); }
.report-stat-danger strong { color: var(--clr-danger); }
.report-stat-success strong { color: var(--clr-accent); }
.report-analysis-list {
    display: grid;
    gap: 9px;
}
.report-analysis-list p,
.report-empty {
    margin: 0;
    padding: 11px 13px;
    border-radius: 12px;
    background: rgba(255,255,255,.045);
    color: var(--clr-text-dim);
    font-size: 13px;
    line-height: 1.55;
}
.report-analysis-list strong { color: var(--clr-text); }
.report-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}
.report-table-card {
    min-width: 0;
}
.report-table-card .report-section-heading {
    margin-bottom: 12px;
}
.report-compact-table {
    min-width: 620px;
}
.report-compact-table th,
.report-compact-table td,
.report-log-table th,
.report-log-table td {
    vertical-align: top;
}
.problem-group,
.problem-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
}
.problem-group-camera { color: #d7ccff; border-color: rgba(169,139,255,.33); background: rgba(169,139,255,.11); }
.problem-group-gps { color: #bfe4ff; border-color: rgba(104,188,255,.34); background: rgba(104,188,255,.11); }
.problem-group-qr { color: #b8f4de; border-color: rgba(51,214,166,.34); background: rgba(51,214,166,.10); }
.problem-group-network { color: #ffe0b4; border-color: rgba(255,182,72,.35); background: rgba(255,182,72,.10); }
.problem-group-system { color: #ffc5ce; border-color: rgba(255,93,115,.34); background: rgba(255,93,115,.10); }
.problem-status {
    white-space: normal;
    text-align: center;
    max-width: 150px;
}
.problem-status.is-new { color: #ffc5ce; border-color: rgba(255,93,115,.35); background: rgba(255,93,115,.10); }
.problem-status.is-resolved { color: #b8f4de; border-color: rgba(51,214,166,.35); background: rgba(51,214,166,.10); }
.problem-status.is-device { color: #ffe0b4; border-color: rgba(255,182,72,.35); background: rgba(255,182,72,.10); }
.problem-status.is-system { color: #d7ccff; border-color: rgba(169,139,255,.35); background: rgba(169,139,255,.10); }
.problem-status.is-muted { color: var(--clr-text-dim); }
.report-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.report-detail-grid > div {
    min-width: 0;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.045);
}
.report-detail-grid span,
.report-message-box span {
    display: block;
    color: var(--clr-text-dim);
    font-size: 11.5px;
    margin-bottom: 5px;
}
.report-detail-grid strong {
    display: block;
    font-size: 12.5px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.report-message-box {
    padding: 13px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: rgba(255,255,255,.045);
}
.report-message-box p {
    margin: 0;
    color: var(--clr-text);
    font-size: 13px;
    line-height: 1.55;
}
.report-resolution-form {
    display: grid;
    grid-template-columns: minmax(220px, .7fr) minmax(300px, 1.8fr) auto;
    gap: 13px;
    align-items: end;
}
.report-resolution-form .field {
    margin: 0;
}
.report-resolution-form .btn {
    min-height: 44px;
}
.report-log-card {
    margin-top: 0;
}
.report-log-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.report-log-table {
    min-width: 1450px;
}
.report-log-table td small,
.report-time-cell small {
    display: block;
    margin-top: 4px;
    color: var(--clr-text-dim);
    font-size: 11px;
    line-height: 1.35;
}
.report-log-table td > strong {
    font-size: 12.5px;
}
.report-empty-cell {
    padding: 26px !important;
    text-align: center;
    color: var(--clr-text-dim);
}
.report-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 18px 20px;
}
.report-pagination a,
.report-pagination span {
    padding: 8px 11px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.15);
    color: var(--clr-text-dim);
    font-size: 12px;
    font-weight: 700;
}
.report-pagination a:hover {
    color: var(--clr-text);
    border-color: rgba(51,214,166,.38);
}
.report-pagination .disabled {
    opacity: .38;
}

@media (max-width: 1180px) {
    .report-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-resolution-form { grid-template-columns: 1fr 1.5fr; }
    .report-resolution-form .btn { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .report-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-search-field { grid-column: 1 / -1; }
    .report-two-column { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .report-page .topbar,
    .report-section-heading,
    .report-log-heading {
        flex-direction: column;
        align-items: stretch;
    }
    .report-filter-card,
    .report-analysis-card,
    .report-detail-card,
    .report-table-card {
        padding: 16px;
    }
    .report-filter-grid,
    .report-summary-grid,
    .report-detail-grid,
    .report-resolution-form {
        grid-template-columns: 1fr;
    }
    .report-search-field,
    .report-resolution-form .btn {
        grid-column: auto;
    }
    .report-filter-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .report-print-button {
        width: 100%;
    }
    .report-period-badge {
        align-self: flex-start;
    }
}

@media print {
    body {
        background: #fff !important;
        color: #111 !important;
    }
    .sidebar,
    .report-print-button,
    .report-filter-actions,
    .report-quick-range,
    .report-resolution-form,
    .crud-actions-cell,
    .report-pagination,
    .who {
        display: none !important;
    }
    .app-shell,
    .main {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .glass-card {
        background: #fff !important;
        color: #111 !important;
        border: 1px solid #bbb !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }
    .report-subtitle,
    .report-section-heading p,
    .report-analysis-list p,
    .report-detail-grid span,
    .report-message-box span,
    td small {
        color: #444 !important;
    }
    table {
        color: #111 !important;
    }
    .crud-table-scroll {
        overflow: visible !important;
    }
    .report-log-table,
    .report-compact-table {
        min-width: 0 !important;
        width: 100% !important;
        font-size: 9px !important;
    }
}

/* ---------- Patch v1.0.21: stabilisasi preview kamera iPhone ---------- */
.scanner-controls [hidden],
.scanner-camera-field[hidden] {
    display: none !important;
}
.ios-camera-guide {
    width: 100%;
    min-height: 42px;
    text-decoration: none;
}
.scanner-reader {
    position: relative;
    isolation: isolate;
}
.scanner-reader video {
    display: block !important;
    background: #060914;
}
.scanner-reader video[playsinline] {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
.scanner-reader #reader__dashboard_section,
.scanner-reader #reader__dashboard_section_csr {
    display: none !important;
}
@media (max-width: 520px) {
    .scanner-reader {
        min-height: 250px;
    }
    .scanner-reader video {
        min-height: 250px;
    }
}

/* ---------- Patch v1.1.0: absensi cadangan dengan kode bantuan ---------- */
.fallback-help-card {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid rgba(121, 190, 255, .28);
    border-radius: 18px;
    background: rgba(8, 20, 42, .72);
}
.fallback-help-heading,
.fallback-identity-title,
.fallback-success-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.fallback-help-heading strong,
.fallback-identity-title h2,
.fallback-success-card h2 {
    display: block;
    margin: 0;
    font-family: var(--font-display);
}
.fallback-help-heading span,
.fallback-identity-title p,
.fallback-success-card p {
    display: block;
    margin-top: 4px;
    color: var(--muted, #aab5c8);
}
.fallback-help-badge,
.fallback-security-badge,
.fallback-risk-badge {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    background: rgba(72, 160, 255, .14);
    border: 1px solid rgba(72, 160, 255, .35);
}
.fallback-permission-guide,
.fallback-identity-warning {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 181, 63, .12);
    border: 1px solid rgba(255, 181, 63, .3);
}
.fallback-permission-guide strong,
.fallback-permission-guide span {
    display: block;
}
.fallback-permission-guide span {
    margin-top: 4px;
    color: var(--muted, #aab5c8);
    font-size: .9rem;
    line-height: 1.55;
}
.fallback-request-button {
    width: 100%;
    margin-top: 14px;
}
.fallback-code-panel {
    margin-top: 15px;
    padding: 18px;
    text-align: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
}
.fallback-code-label {
    display: block;
    color: var(--muted, #aab5c8);
    font-size: .86rem;
}
.fallback-code-value {
    display: block;
    margin: 10px 0 14px;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 12vw, 4.4rem);
    letter-spacing: .18em;
    line-height: 1;
}
.fallback-code-meta,
.fallback-result-grid,
.fallback-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    text-align: left;
}
.fallback-code-meta span,
.fallback-result-grid span,
.fallback-detail-grid > div {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
}
.fallback-code-meta b,
.fallback-result-grid b,
.fallback-detail-grid strong,
.fallback-detail-grid span {
    display: block;
}
.fallback-code-meta b,
.fallback-result-grid b {
    margin-top: 3px;
}
.fallback-code-panel small {
    display: block;
    margin-top: 12px;
    color: var(--muted, #aab5c8);
}
.fallback-officer-page {
    max-width: 1180px;
}
.fallback-officer-form-card,
.fallback-identity-card,
.fallback-success-card,
.fallback-admin-table-card {
    margin-bottom: 18px;
}
.fallback-officer-form {
    display: grid;
    grid-template-columns: minmax(180px, .8fr) minmax(220px, 1fr) auto;
    gap: 14px;
    align-items: end;
}
.fallback-code-input {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border-radius: 12px;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .14em;
}
.fallback-identity-warning {
    margin: 0 0 16px;
    font-weight: 600;
}
.fallback-detail-grid {
    margin-top: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fallback-detail-grid span {
    color: var(--muted, #aab5c8);
    font-size: .8rem;
}
.fallback-detail-grid strong {
    margin-top: 5px;
    overflow-wrap: anywhere;
}
.fallback-permission-officer-note {
    margin-top: 16px;
}
.fallback-confirm-form {
    margin-top: 18px;
}
.fallback-confirm-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
}
.fallback-confirm-check input {
    margin-top: 3px;
    width: 18px;
    height: 18px;
}
.fallback-success-card {
    justify-content: flex-start;
}
.fallback-success-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    font-weight: 800;
    background: rgba(55, 211, 142, .16);
    border: 1px solid rgba(55, 211, 142, .4);
}
.fallback-result-grid {
    margin-top: 14px;
}
.fallback-admin-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.fallback-admin-filter {
    grid-template-columns: minmax(180px, .7fr) minmax(200px, .8fr) auto;
}
.fallback-admin-table {
    min-width: 1120px;
}
@media (max-width: 820px) {
    .fallback-officer-form,
    .fallback-admin-filter {
        grid-template-columns: 1fr;
    }
    .fallback-detail-grid,
    .fallback-admin-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 520px) {
    .fallback-help-heading,
    .fallback-identity-title,
    .fallback-success-card {
        flex-direction: column;
    }
    .fallback-code-meta,
    .fallback-result-grid,
    .fallback-detail-grid,
    .fallback-admin-stats {
        grid-template-columns: 1fr;
    }
    .fallback-code-value {
        letter-spacing: .12em;
    }
}

/* ---------- Patch v1.1.1: QR + kode presensi dinamis ---------- */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.attendance-code-card {
    width: 100%;
    max-width: 390px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-align: center;
    border-radius: 18px;
    border: 2px solid rgba(99, 230, 190, .75);
    background: linear-gradient(145deg, rgba(34, 207, 155, .18), rgba(46, 92, 210, .16));
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.attendance-code-label {
    color: var(--clr-accent);
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
}
.attendance-code-value {
    display: block;
    width: 100%;
    margin: 3px 0 2px;
    color: #ffffff;
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 8vw, 4.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .16em;
    text-indent: .16em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 3px 16px rgba(0, 0, 0, .34);
    overflow-wrap: anywhere;
}
.attendance-code-help {
    max-width: 330px;
    color: var(--clr-text-dim);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.45;
}

.qr-fullscreen .attendance-code-card {
    width: min(100%, 390px);
    border-color: #1f9675;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(21, 38, 73, .14);
}
.qr-fullscreen .attendance-code-label { color: #15765d; }
.qr-fullscreen .attendance-code-value {
    color: #111936;
    text-shadow: none;
}
.qr-fullscreen .attendance-code-help { color: #52607b; }

.attendance-code-entry-card {
    max-width: 560px;
    margin: 0 auto 18px;
    padding: 22px;
}
.attendance-code-entry-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.attendance-code-entry-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--clr-accent);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
}
.attendance-code-entry-heading h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.2rem;
}
.attendance-code-entry-heading p {
    margin: 7px 0 0;
    color: var(--clr-text-dim);
    font-size: .86rem;
    line-height: 1.55;
}
.attendance-code-entry-badge {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--clr-accent);
    background: rgba(51, 214, 166, .12);
    border: 1px solid rgba(51, 214, 166, .32);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
}
.attendance-code-entry-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}
.attendance-code-input {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 10px 14px;
    border: 2px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    outline: none;
    color: #ffffff;
    background: rgba(5, 10, 22, .5);
    text-align: center;
    text-transform: uppercase;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 7vw, 2.35rem);
    font-weight: 800;
    letter-spacing: .15em;
    text-indent: .15em;
    font-variant-numeric: tabular-nums;
}
.attendance-code-input::placeholder {
    color: rgba(255, 255, 255, .28);
}
.attendance-code-input:focus {
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 4px rgba(51, 214, 166, .12);
}
.attendance-code-submit {
    min-width: 148px;
    font-weight: 800;
}
.attendance-code-entry-status {
    margin-top: 10px;
    color: var(--clr-text-dim);
    font-size: .82rem;
    line-height: 1.45;
}
.attendance-code-entry-status.is-error {
    color: #ffb8c5;
    font-weight: 700;
}

@media (max-width: 560px) {
    .attendance-code-card {
        padding: 16px 14px;
    }
    .attendance-code-value {
        font-size: clamp(2.35rem, 14vw, 3.5rem);
        letter-spacing: .12em;
        text-indent: .12em;
    }
    .attendance-code-entry-card {
        padding: 18px 14px;
    }
    .attendance-code-entry-heading {
        gap: 10px;
    }
    .attendance-code-entry-form {
        grid-template-columns: 1fr;
    }
    .attendance-code-submit {
        width: 100%;
    }
}
.petugas-qr-panel.is-refreshing .qr-visual-frame {
    position: relative;
}
.petugas-qr-panel.is-refreshing #qrcode-render {
    filter: blur(8px);
    opacity: .22;
}
.petugas-qr-panel.is-refreshing .qr-visual-frame::after {
    content: 'MEMPERBARUI';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--clr-text);
    font-family: var(--font-display);
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: .12em;
}
.qr-fullscreen.is-refreshing .qr-visual-frame::after {
    color: #111936;
}
.attendance-code-countdown {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 4px;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--clr-text-dim);
    background: rgba(0, 0, 0, .14);
    font-size: .78rem;
}
.attendance-code-countdown strong {
    color: #ffffff;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}
.qr-fullscreen .attendance-code-countdown {
    color: #52607b;
    background: #eef2f7;
}
.qr-fullscreen .attendance-code-countdown strong { color: #111936; }

/* =====================================================================
   Patch v1.1.3 — Diagram kotak bertingkat alur presensi siswa
   ===================================================================== */
.operational-summary-card,
.operational-list-card {
    padding: 22px;
    margin-bottom: 22px;
}
.operational-summary-heading {
    align-items: center;
}
.operational-square-diagram {
    margin-top: 4px;
}
.operational-universe-box {
    padding: 18px;
    border: 2px solid rgba(159, 192, 255, .42);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(98, 126, 211, .12), rgba(255,255,255,.035));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}
.operational-universe-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "label value"
        "note value";
    align-items: center;
    gap: 3px 18px;
    margin-bottom: 16px;
    padding: 15px 17px;
    border-radius: 16px;
    background: rgba(10, 20, 57, .28);
    border: 1px solid rgba(159, 192, 255, .26);
}
.operational-universe-heading span {
    grid-area: label;
    color: var(--clr-text);
    font-size: 15px;
    font-weight: 700;
}
.operational-universe-heading strong {
    grid-area: value;
    color: #c8d8ff;
    font-family: var(--font-display);
    font-size: clamp(40px, 5vw, 64px);
    line-height: .95;
    letter-spacing: -.04em;
}
.operational-universe-heading small {
    grid-area: note;
    color: var(--clr-text-dim);
    font-size: 11.5px;
    line-height: 1.45;
}
.operational-main-split {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(210px, 1fr);
    gap: 16px;
    align-items: stretch;
}
.operational-branch {
    min-width: 0;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--clr-glass-border);
    background: rgba(255,255,255,.032);
}
.operational-branch-tried {
    border-color: rgba(117, 151, 255, .32);
    background: rgba(86, 112, 196, .075);
}
.operational-branch-affected {
    border-color: rgba(255, 185, 84, .28);
    background: rgba(255, 182, 72, .055);
}
.operational-branch-heading,
.operational-leaf,
.operational-recap-card {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--clr-text);
    text-decoration: none;
    border: 1px solid var(--clr-glass-border);
    background: rgba(255,255,255,.055);
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.operational-branch-heading:hover,
.operational-branch-heading.is-active,
.operational-leaf:hover,
.operational-leaf.is-active,
.operational-recap-card:hover,
.operational-recap-card.is-active {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.40);
    background: rgba(255,255,255,.09);
    box-shadow: 0 14px 28px rgba(0,0,0,.16);
}
.operational-branch-heading {
    min-height: 118px;
    padding: 16px 17px;
    border-radius: 15px;
    justify-content: center;
}
.operational-leaf {
    min-height: 154px;
    padding: 18px;
    border-radius: 15px;
    justify-content: space-between;
}
.operational-branch-heading span,
.operational-leaf span,
.operational-recap-card span {
    color: var(--clr-text-dim);
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 700;
}
.operational-branch-heading strong,
.operational-leaf strong,
.operational-recap-card strong {
    font-family: var(--font-display);
    font-size: clamp(34px, 4vw, 52px);
    line-height: .95;
    letter-spacing: -.035em;
}
.operational-branch-heading small,
.operational-leaf small,
.operational-recap-card small {
    color: var(--clr-text-dim);
    font-size: 11px;
    line-height: 1.45;
}
.operational-branch-children {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}
.operational-tried-children {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: stretch;
}
.operational-affected-children {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.operational-node-tried strong { color: #9fc0ff; }
.operational-node-direct strong { color: #42dfb4; }
.operational-node-affected strong { color: #ffc56d; }
.operational-node-recovered strong { color: #6ee7b7; }
.operational-node-still strong { color: var(--clr-danger); }
.operational-node-not-tried strong { color: #bac4dd; }
.operational-node-not-tried {
    border-color: rgba(186,196,221,.28);
    background: rgba(186,196,221,.055);
}
.operational-recap-heading {
    margin: 20px 0 11px;
}
.operational-recap-heading h3 {
    margin: 0;
    font-size: 17px;
}
.operational-recap-heading p {
    margin: 4px 0 0;
    color: var(--clr-text-dim);
    font-size: 11.5px;
}
.operational-recap-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.operational-recap-card {
    min-height: 126px;
    padding: 17px 18px;
    border-radius: 16px;
    justify-content: space-between;
}
.operational-recap-success {
    border-color: rgba(51,214,166,.30);
    background: rgba(51,214,166,.065);
}
.operational-recap-success strong { color: var(--clr-accent); }
.operational-recap-failed {
    border-color: rgba(255,93,115,.30);
    background: rgba(255,93,115,.065);
}
.operational-recap-failed strong { color: var(--clr-danger); }
.operational-recap-not-tried {
    border-color: rgba(186,196,221,.27);
    background: rgba(186,196,221,.055);
}
.operational-recap-not-tried strong { color: #c7d0e4; }
.operational-definition {
    margin: 14px 0 0;
    padding: 11px 13px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    color: var(--clr-text-dim);
    font-size: 12px;
    line-height: 1.55;
}
.operational-definition strong { color: var(--clr-text); }
.operational-list-card {
    scroll-margin-top: 18px;
}
.operational-student-table td:first-child strong,
.operational-student-table td:first-child small,
.operational-student-table td:nth-child(4) small,
.operational-student-table td:nth-child(5) small {
    display: block;
}
.operational-student-table td:first-child small,
.operational-student-table td:nth-child(4) small,
.operational-student-table td:nth-child(5) small {
    margin-top: 4px;
    color: var(--clr-text-dim);
    font-size: 11px;
    line-height: 1.35;
}
.report-technical-heading {
    margin: 6px 0 14px;
}
.report-technical-heading h2 {
    margin: 0;
    font-size: 19px;
}
.report-technical-heading p {
    margin: 5px 0 0;
    color: var(--clr-text-dim);
    font-size: 12.5px;
    line-height: 1.5;
}
.report-technical-summary-grid .report-stat {
    min-height: 105px;
}

@media (max-width: 1180px) {
    .operational-main-split {
        grid-template-columns: minmax(0, 2.2fr) minmax(190px, 1fr);
    }
    .operational-tried-children {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .operational-main-split,
    .operational-recap-grid {
        grid-template-columns: 1fr;
    }
    .operational-node-not-tried {
        min-height: 120px;
    }
}

@media (max-width: 620px) {
    .operational-summary-card,
    .operational-list-card {
        padding: 16px;
    }
    .operational-universe-box {
        padding: 12px;
        border-radius: 17px;
    }
    .operational-universe-heading {
        grid-template-columns: 1fr;
        grid-template-areas:
            "label"
            "value"
            "note";
        gap: 6px;
    }
    .operational-universe-heading strong {
        font-size: 44px;
    }
    .operational-branch {
        padding: 10px;
        border-radius: 14px;
    }
    .operational-affected-children {
        grid-template-columns: 1fr;
    }
    .operational-branch-heading,
    .operational-leaf,
    .operational-recap-card {
        min-height: 112px;
    }
    .operational-branch-heading strong,
    .operational-leaf strong,
    .operational-recap-card strong {
        font-size: 38px;
    }
}

@media print {
    .operational-universe-box,
    .operational-branch,
    .operational-branch-heading,
    .operational-leaf,
    .operational-recap-card,
    .operational-universe-heading {
        color: #111 !important;
        background: #fff !important;
        border-color: #aaa !important;
        box-shadow: none !important;
        transform: none !important;
    }
    .operational-branch-heading span,
    .operational-branch-heading small,
    .operational-leaf span,
    .operational-leaf small,
    .operational-recap-card span,
    .operational-recap-card small,
    .operational-definition,
    .operational-universe-heading small,
    .report-technical-heading p {
        color: #444 !important;
    }
    .operational-branch-heading strong,
    .operational-leaf strong,
    .operational-recap-card strong,
    .operational-universe-heading strong {
        color: #111 !important;
    }
}

/* =============================================================
   Patch v1.1.5 — Rekap Kehadiran Siswa
   ============================================================= */
.attendance-report-main { min-width: 0; }
.attendance-report-subtitle {
    margin: 5px 0 0;
    color: var(--clr-text-dim);
    font-size: 12.5px;
    line-height: 1.5;
    max-width: 820px;
}
.attendance-tabs {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.attendance-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 15px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    color: var(--clr-text-dim);
    background: rgba(255,255,255,.035);
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
}
.attendance-tabs a:hover,
.attendance-tabs a.active {
    color: var(--clr-text);
    border-color: rgba(76,201,240,.42);
    background: rgba(76,201,240,.105);
}
.attendance-filter {
    padding: 16px;
    margin-bottom: 18px;
}
.attendance-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(155px, 1fr));
    gap: 12px;
}
.attendance-filter label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: var(--clr-text-dim);
    font-size: 11.5px;
    font-weight: 800;
}
.attendance-filter input,
.attendance-filter select {
    width: 100%;
    min-height: 42px;
}
.attendance-filter-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.attendance-print-heading {
    margin: 8px 0 14px;
}
.attendance-print-heading h2 {
    margin: 0;
    font-size: 21px;
}
.attendance-print-heading p {
    margin: 5px 0 0;
    color: var(--clr-text-dim);
    font-size: 12px;
}
.attendance-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.attendance-summary-grid-compact {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.attendance-summary-card {
    min-height: 120px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 15px;
    background: rgba(255,255,255,.045);
    box-shadow: 0 12px 28px rgba(0,0,0,.16);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 7px;
}
.attendance-summary-card span {
    color: var(--clr-text-dim);
    font-size: 11.5px;
    font-weight: 800;
}
.attendance-summary-card strong {
    font-family: var(--font-display);
    font-size: clamp(30px, 3.1vw, 44px);
    line-height: 1;
    letter-spacing: -.035em;
}
.attendance-summary-card small {
    color: var(--clr-text-dim);
    font-size: 10.5px;
    line-height: 1.4;
}
.attendance-summary-card.is-on-time,
.attendance-status.is-on-time,
.attendance-code.is-on-time,
.attendance-code-legend .is-on-time {
    border-color: rgba(51,214,166,.34);
    background: rgba(51,214,166,.08);
}
.attendance-summary-card.is-on-time strong,
.cell-on-time { color: #55e6bd; }
.attendance-summary-card.is-late,
.attendance-status.is-late,
.attendance-code.is-late,
.attendance-code-legend .is-late {
    border-color: rgba(255,190,92,.36);
    background: rgba(255,190,92,.08);
}
.attendance-summary-card.is-late strong,
.cell-late { color: #ffc56d; }
.attendance-summary-card.is-failed,
.attendance-status.is-failed,
.attendance-code.is-failed,
.attendance-code-legend .is-failed {
    border-color: rgba(255,93,115,.36);
    background: rgba(255,93,115,.08);
}
.attendance-summary-card.is-failed strong,
.cell-failed { color: #ff7189; }
.attendance-summary-card.is-not-tried,
.attendance-status.is-not-tried,
.attendance-code.is-not-tried,
.attendance-code-legend .is-not-tried {
    border-color: rgba(174,186,213,.32);
    background: rgba(174,186,213,.065);
}
.attendance-summary-card.is-not-tried strong,
.cell-not-tried { color: #c3cde2; }
.attendance-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 10px 0 12px;
    color: var(--clr-text-dim);
    font-size: 12px;
}
.attendance-toolbar > div:last-child {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.attendance-legend-note {
    max-width: 760px;
    line-height: 1.5;
}
.attendance-table-card {
    padding: 0;
    overflow: hidden;
}
.table-scroll {
    width: 100%;
    overflow: auto;
}
.attendance-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}
.attendance-table th,
.attendance-table td {
    padding: 11px 12px;
    border-bottom: 1px solid rgba(255,255,255,.075);
    text-align: left;
    vertical-align: top;
    font-size: 12px;
    white-space: nowrap;
}
.attendance-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    color: #dce5f6;
    background: #172237;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .045em;
}
.attendance-table tbody tr:hover td {
    background: rgba(255,255,255,.025);
}
.attendance-table td strong,
.attendance-table td small {
    display: block;
}
.attendance-table td small {
    margin-top: 4px;
    color: var(--clr-text-dim);
    font-size: 10.5px;
}
.attendance-table tfoot th {
    padding: 12px;
    border-top: 2px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.055);
}
.attendance-daily-table { min-width: 1080px; }
.attendance-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 5px 9px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 900;
}
.attendance-code-legend {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 11px;
}
.attendance-code-legend span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;
    font-size: 10.5px;
    font-weight: 900;
}
.attendance-matrix-scroll {
    max-height: 72vh;
}
.attendance-matrix-table {
    width: max-content;
    min-width: 100%;
}
.attendance-matrix-table th,
.attendance-matrix-table td {
    text-align: center;
}
.attendance-matrix-table .sticky-col {
    position: sticky;
    z-index: 2;
    background: #151f33;
}
.attendance-matrix-table thead .sticky-col { z-index: 5; background: #172237; }
.attendance-matrix-table .sticky-col-1 { left: 0; min-width: 66px; }
.attendance-matrix-table .sticky-col-2 { left: 66px; min-width: 245px; text-align: left; }
.attendance-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 29px;
    padding: 4px 6px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    font-size: 10px;
    font-weight: 900;
}
.attendance-footnote {
    margin: 12px 0 0;
    padding: 11px 13px;
    border-radius: 11px;
    color: var(--clr-text-dim);
    background: rgba(255,255,255,.035);
    font-size: 11px;
    line-height: 1.55;
}
.empty-cell {
    padding: 24px !important;
    text-align: center !important;
    color: var(--clr-text-dim);
}
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    color: var(--clr-text-dim);
    font-size: 12px;
}

@media (max-width: 1250px) {
    .attendance-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .attendance-summary-grid-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .attendance-filter-grid { grid-template-columns: repeat(3, minmax(155px, 1fr)); }
}
@media (max-width: 820px) {
    .attendance-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attendance-summary-grid,
    .attendance-summary-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attendance-tabs { display: grid; grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .attendance-filter-grid,
    .attendance-summary-grid,
    .attendance-summary-grid-compact { grid-template-columns: 1fr; }
    .attendance-filter-actions .btn,
    .attendance-toolbar .btn { width: 100%; }
    .attendance-toolbar > div:last-child { width: 100%; }
    .attendance-summary-card { min-height: 105px; }
}

@media print {
    .no-print,
    .sidebar,
    .attendance-filter,
    .attendance-tabs,
    .pagination { display: none !important; }
    .app-shell { display: block !important; }
    .main,
    .attendance-report-main { padding: 0 !important; margin: 0 !important; width: 100% !important; }
    body { background: #fff !important; color: #111 !important; }
    .attendance-print-heading h2,
    .attendance-print-heading p,
    .attendance-table,
    .attendance-table th,
    .attendance-table td,
    .attendance-footnote { color: #111 !important; }
    .attendance-summary-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .attendance-summary-card,
    .attendance-table-card,
    .attendance-code,
    .attendance-status,
    .attendance-code-legend span {
        color: #111 !important;
        background: #fff !important;
        border-color: #aaa !important;
        box-shadow: none !important;
    }
    .attendance-table thead th,
    .attendance-table .sticky-col,
    .attendance-table thead .sticky-col {
        color: #111 !important;
        background: #eee !important;
        position: static !important;
    }
    .attendance-matrix-scroll { max-height: none !important; overflow: visible !important; }
    .table-scroll { overflow: visible !important; }
    .attendance-table { min-width: 0 !important; font-size: 9px; }
    .attendance-table th,
    .attendance-table td { padding: 5px 6px; font-size: 8px; }
    @page { size: landscape; margin: 10mm; }
}


/* v1.1.7 — autocomplete pencarian siswa pada Rekap Kehadiran */
.student-autocomplete-field {
    position: relative;
    z-index: 20;
}
.student-autocomplete-wrap {
    position: relative;
    display: block;
}
.student-autocomplete-wrap > input[type="text"] {
    width: 100%;
    padding-right: 42px;
    text-transform: uppercase;
}
.student-search-clear {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
    background: rgba(11, 18, 32, .55);
    color: var(--clr-text-dim);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.student-search-clear:hover,
.student-search-clear:focus-visible {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    outline: 2px solid rgba(47, 210, 169, .55);
}
.student-search-clear[hidden] { display: none; }
.student-search-help {
    display: block;
    min-height: 17px;
    margin-top: 6px;
    color: var(--clr-text-dim);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.45;
}
.student-suggestion-list {
    position: absolute;
    z-index: 9999;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    max-height: 330px;
    overflow-y: auto;
    padding: 7px;
    border: 1px solid rgba(129, 153, 255, .32);
    border-radius: 13px;
    background: #111a2b;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
}
.student-suggestion-list[hidden] { display: none; }
.student-suggestion-item {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 3px;
    padding: 11px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--clr-text);
    text-align: left;
    cursor: pointer;
}
.student-suggestion-item + .student-suggestion-item {
    margin-top: 3px;
}
.student-suggestion-item:hover,
.student-suggestion-item.is-active,
.student-suggestion-item:focus-visible {
    background: rgba(47, 210, 169, .14);
    outline: 1px solid rgba(47, 210, 169, .35);
}
.student-suggestion-item strong {
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.35;
}
.student-suggestion-item small {
    color: var(--clr-text-dim);
    font-size: 10.5px;
    line-height: 1.35;
}
.student-suggestion-message {
    display: block;
    padding: 12px;
    color: var(--clr-text-dim);
    font-size: 11px;
    line-height: 1.45;
}
.student-suggestion-message.is-error { color: #ff8da1; }
.student-suggestion-message.is-loading { color: #8fb4ff; }

@media (max-width: 820px) {
    .student-autocomplete-field { z-index: 30; }
    .student-suggestion-list { max-height: 270px; }
}

/* =====================================================================
   Patch v1.1.10 — Perbaikan layout PDF Laporan & Analisis
   ===================================================================== */
.report-print-header {
    display: none;
}

@media print {
    @page {
        size: A4 landscape;
        margin: 8mm;
    }

    html,
    body {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        color: #111 !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 8.2pt !important;
        line-height: 1.3 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .report-screen-only,
    .sidebar,
    .who,
    .report-print-button,
    .report-filter-card,
    .report-filter-actions,
    .report-quick-range,
    .report-resolution-form,
    .report-pagination,
    .crud-actions-cell,
    .crud-cancel-link,
    .report-log-table th:last-child,
    .report-log-table td:last-child {
        display: none !important;
    }

    .app-shell,
    .main,
    .report-page {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .report-page {
        gap: 0 !important;
    }

    .report-print-header {
        display: block !important;
        margin: 0 0 4mm !important;
        padding: 0 0 3mm !important;
        border-bottom: .35mm solid #222;
        break-after: avoid-page;
        page-break-after: avoid;
    }

    .report-print-title {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 8mm;
    }

    .report-print-kicker,
    .report-print-generated span,
    .report-print-meta span {
        display: block;
        color: #555 !important;
        font-size: 6.5pt !important;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .report-print-title h1 {
        margin: 1mm 0 .5mm !important;
        color: #111 !important;
        font-size: 18pt !important;
        line-height: 1.05 !important;
        letter-spacing: -.02em;
    }

    .report-print-title p {
        margin: 0 !important;
        color: #444 !important;
        font-size: 7.5pt !important;
    }

    .report-print-generated {
        flex: 0 0 auto;
        text-align: right;
    }

    .report-print-generated strong {
        display: block;
        margin-top: .8mm;
        color: #111 !important;
        font-size: 8pt !important;
    }

    .report-print-meta {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 2mm;
        margin-top: 3mm;
    }

    .report-print-meta > div {
        min-width: 0;
        padding: 1.7mm 2mm;
        border: .25mm solid #bbb;
        border-radius: 1.5mm;
        background: #fff !important;
    }

    .report-print-meta strong {
        display: block;
        margin-top: .7mm;
        overflow-wrap: anywhere;
        color: #111 !important;
        font-size: 7.2pt !important;
        line-height: 1.2;
    }

    .alert {
        margin: 0 0 3mm !important;
        padding: 2mm 3mm !important;
        border: .25mm solid #999 !important;
        background: #fff !important;
        color: #111 !important;
        box-shadow: none !important;
    }

    .glass-card,
    .operational-universe-box,
    .operational-branch,
    .operational-branch-heading,
    .operational-leaf,
    .operational-recap-card,
    .report-stat,
    .report-detail-grid > div,
    .report-message-box {
        background: #fff !important;
        color: #111 !important;
        border-color: #aaa !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        transform: none !important;
    }

    .glass-card {
        margin: 0 0 3.5mm !important;
        padding: 3.5mm !important;
        border-width: .25mm !important;
        border-radius: 2mm !important;
    }

    .report-section-heading,
    .report-log-heading {
        margin-bottom: 2.5mm !important;
        gap: 3mm !important;
    }

    .report-section-heading h2,
    .report-log-heading h2,
    .report-technical-heading h2 {
        margin: 0 !important;
        color: #111 !important;
        font-size: 11pt !important;
        line-height: 1.15 !important;
    }

    .report-section-heading p,
    .report-log-heading p,
    .report-technical-heading p,
    .report-subtitle,
    .operational-definition,
    .report-analysis-list p,
    .report-detail-grid span,
    .report-message-box span,
    .report-message-box p,
    td small {
        color: #444 !important;
    }

    /* Halaman pertama: diagram operasional dibuat padat dan utuh. */
    .operational-summary-card {
        margin-bottom: 0 !important;
        padding: 3.5mm !important;
        break-inside: avoid-page;
        page-break-inside: avoid;
        break-after: page;
        page-break-after: always;
    }

    .operational-summary-heading {
        margin-bottom: 2mm !important;
    }

    .operational-square-diagram {
        margin-top: 0 !important;
    }

    .operational-universe-box {
        padding: 2.5mm !important;
        border-width: .35mm !important;
        border-radius: 2mm !important;
    }

    .operational-universe-heading {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: .6mm 3mm !important;
        margin: 0 0 2.5mm !important;
        padding: 2mm 2.5mm !important;
        border-radius: 1.5mm !important;
    }

    .operational-universe-heading span {
        font-size: 8pt !important;
    }

    .operational-universe-heading strong {
        font-size: 23pt !important;
        line-height: .9 !important;
    }

    .operational-universe-heading small {
        font-size: 6.8pt !important;
    }

    .operational-main-split {
        grid-template-columns: minmax(0, 3fr) minmax(42mm, 1fr) !important;
        gap: 2.5mm !important;
    }

    .operational-branch {
        padding: 2mm !important;
        border-radius: 1.8mm !important;
    }

    .operational-branch-heading,
    .operational-leaf,
    .operational-recap-card {
        min-height: 0 !important;
        gap: 1mm !important;
        padding: 2.2mm 2.5mm !important;
        border-radius: 1.5mm !important;
        justify-content: center !important;
    }

    .operational-branch-heading span,
    .operational-leaf span,
    .operational-recap-card span {
        color: #333 !important;
        font-size: 7pt !important;
        line-height: 1.2 !important;
    }

    .operational-branch-heading strong,
    .operational-leaf strong,
    .operational-recap-card strong {
        color: #111 !important;
        font-size: 18pt !important;
        line-height: .95 !important;
    }

    .operational-branch-heading small,
    .operational-leaf small,
    .operational-recap-card small {
        color: #555 !important;
        font-size: 6.3pt !important;
        line-height: 1.25 !important;
    }

    .operational-branch-children {
        gap: 2mm !important;
        margin-top: 2mm !important;
    }

    .operational-tried-children {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important;
    }

    .operational-affected-children {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .operational-recap-heading {
        margin: 2.5mm 0 1.5mm !important;
    }

    .operational-recap-heading h3 {
        margin: 0 !important;
        font-size: 9pt !important;
    }

    .operational-recap-heading p {
        margin: .5mm 0 0 !important;
        color: #444 !important;
        font-size: 6.8pt !important;
    }

    .operational-recap-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 2mm !important;
    }

    .operational-definition {
        margin: 2mm 0 0 !important;
        padding: 1.5mm 2mm !important;
        border-radius: 1mm !important;
        font-size: 6.5pt !important;
        line-height: 1.25 !important;
    }

    /* Daftar operasional dan detail: tabel boleh berlanjut, baris tidak terpotong. */
    .operational-list-card,
    .report-detail-card,
    .report-analysis-card,
    .report-table-card {
        break-inside: auto;
        page-break-inside: auto;
    }

    .operational-list-card {
        break-after: page;
        page-break-after: always;
    }

    .report-technical-heading {
        margin: 0 0 2.5mm !important;
        break-before: page;
        page-break-before: always;
        break-after: avoid-page;
        page-break-after: avoid;
    }

    .report-summary-grid,
    .report-technical-summary-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 2mm !important;
        margin-bottom: 3.5mm !important;
        break-inside: avoid-page;
        page-break-inside: avoid;
    }

    .report-stat,
    .report-technical-summary-grid .report-stat {
        min-height: 0 !important;
        margin: 0 !important;
        padding: 2.5mm !important;
        border: .25mm solid #aaa !important;
        border-radius: 1.5mm !important;
    }

    .report-stat span {
        color: #444 !important;
        font-size: 6.8pt !important;
        line-height: 1.2 !important;
    }

    .report-stat strong {
        margin-top: 1mm !important;
        color: #111 !important;
        font-size: 16pt !important;
        line-height: 1 !important;
    }

    .report-analysis-card,
    .report-detail-card,
    .report-two-column {
        break-inside: avoid-page;
        page-break-inside: avoid;
    }

    .report-analysis-list {
        gap: 1mm !important;
    }

    .report-analysis-list p,
    .report-empty {
        margin: 0 !important;
        padding: 1.5mm 2mm !important;
        font-size: 7.2pt !important;
        line-height: 1.3 !important;
    }

    .report-analysis-list strong,
    .operational-definition strong,
    .operational-universe-heading span,
    .operational-recap-heading h3 {
        color: #111 !important;
    }

    .report-detail-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 1.5mm !important;
    }

    .report-detail-grid > div,
    .report-message-box {
        padding: 2mm !important;
        border-radius: 1mm !important;
    }

    .report-detail-grid span,
    .report-message-box span {
        font-size: 6.3pt !important;
    }

    .report-detail-grid strong,
    .report-message-box p {
        font-size: 7pt !important;
        overflow-wrap: anywhere;
    }

    .report-two-column {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 3mm !important;
        margin-bottom: 0 !important;
    }

    .report-two-column .report-table-card {
        margin-bottom: 3.5mm !important;
    }

    .report-log-card {
        margin-bottom: 0 !important;
        break-before: page;
        page-break-before: always;
    }

    .report-period-badge {
        padding: 1mm 2mm !important;
        border: .25mm solid #aaa !important;
        color: #111 !important;
        background: #fff !important;
        font-size: 6.5pt !important;
    }

    .crud-table-scroll,
    .table-scroll {
        max-height: none !important;
        overflow: visible !important;
    }

    table,
    .report-compact-table,
    .report-log-table {
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: collapse !important;
        color: #111 !important;
    }

    .report-log-table {
        table-layout: fixed !important;
        font-size: 6.2pt !important;
    }

    .report-compact-table {
        font-size: 6.8pt !important;
    }

    thead {
        display: table-header-group;
    }

    tfoot {
        display: table-footer-group;
    }

    tr,
    td,
    th {
        break-inside: avoid-page;
        page-break-inside: avoid;
    }

    .report-compact-table th,
    .report-compact-table td,
    .report-log-table th,
    .report-log-table td {
        padding: 1.2mm 1.4mm !important;
        border-bottom: .2mm solid #ccc !important;
        color: #111 !important;
        vertical-align: top !important;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .report-compact-table th,
    .report-log-table th {
        background: #eee !important;
        font-size: 6.2pt !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
    }

    .report-log-table td > strong,
    .report-time-cell,
    .report-time-cell small,
    .report-log-table td small {
        font-size: 6.1pt !important;
        line-height: 1.2 !important;
    }

    .report-log-table th:nth-child(1) { width: 8%; }
    .report-log-table th:nth-child(2) { width: 14%; }
    .report-log-table th:nth-child(3) { width: 8%; }
    .report-log-table th:nth-child(4) { width: 22%; }
    .report-log-table th:nth-child(5) { width: 11%; }
    .report-log-table th:nth-child(6) { width: 14%; }
    .report-log-table th:nth-child(7) { width: 7%; }
    .report-log-table th:nth-child(8) { width: 6%; }
    .report-log-table th:nth-child(9) { width: 10%; }

    .problem-group,
    .problem-status {
        display: inline-block !important;
        max-width: 100%;
        padding: .6mm 1mm !important;
        border: .2mm solid #999 !important;
        border-radius: 1.2mm !important;
        background: #fff !important;
        color: #111 !important;
        font-size: 5.8pt !important;
        line-height: 1.15 !important;
        white-space: normal !important;
    }

    a,
    a:visited {
        color: #111 !important;
        text-decoration: none !important;
    }
}

/* =========================================================
   Patch v1.2.0 — Presensi berbasis pengecualian
   ========================================================= */
.secretary-role-grid,
.class-progress-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}
.secretary-status-card,
.secretary-final-card,
.late-qr-intro,
.late-manual-card,
.late-scanner-card,
.late-student-warning,
.class-progress-summary {
  margin-bottom: 18px;
}
.secretary-live-lock {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(22, 163, 74, .24);
  border-radius: 12px;
  background: rgba(22, 163, 74, .08);
  font-weight: 700;
}
.secretary-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 920px;
}
.secretary-table th,
.secretary-table td {
  padding: 10px 9px;
  border-bottom: 1px solid rgba(148, 163, 184, .24);
  vertical-align: top;
  text-align: left;
}
.secretary-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card, #fff);
  white-space: nowrap;
}
.secretary-table td:nth-child(n+4):nth-child(-n+7),
.secretary-table th:nth-child(n+4):nth-child(-n+7) {
  text-align: center;
  width: 48px;
}
.secretary-student-row.is-late {
  background: rgba(245, 158, 11, .08);
}
.secretary-detail-fields {
  display: grid;
  gap: 7px;
  min-width: 230px;
}
.secretary-si-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(105px, 1fr));
  gap: 7px;
}
.secretary-si-fields[hidden] { display: none !important; }
.secretary-note { width: 100%; }
.secretary-final-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(220px, .8fr);
  gap: 18px;
  align-items: start;
}
.secretary-derived {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, .04);
}
.secretary-derived span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.secretary-actions,
.late-manual-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
}
.late-qr-intro {
  text-align: center;
}
.late-qr-intro h2,
.late-student-warning h2 {
  margin-top: 0;
}
.late-open-countdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  min-width: min(100%, 360px);
  margin-top: 12px;
  padding: 10px 18px;
  border-radius: 14px;
  background: rgba(15, 23, 42, .06);
  font-weight: 800;
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
}
.late-manual-form label {
  display: grid;
  gap: 6px;
  min-width: min(100%, 220px);
  flex: 1 1 220px;
}
.late-scanner-card {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.late-fallback-student {
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(245, 158, 11, .09);
}
.class-progress-summary {
  display: grid;
  gap: 14px;
}
.class-progress-card {
  padding: 14px;
  border-radius: 14px;
  background: rgba(15, 23, 42, .04);
  border: 1px solid rgba(148, 163, 184, .22);
}
.class-progress-card strong {
  display: block;
  font-size: 1.45rem;
  margin-top: 4px;
}
.attendance-status.is-excused,
.attendance-code.is-excused,
.cell-excused { background: rgba(59, 130, 246, .12); color: #1d4ed8; }
.attendance-status.is-dispensation,
.attendance-code.is-dispensation,
.cell-dispensation { background: rgba(14, 165, 233, .12); color: #0369a1; }
.attendance-status.is-absent,
.attendance-code.is-absent,
.cell-absent { background: rgba(100, 116, 139, .15); color: #334155; }
.attendance-summary-card.is-excused { border-color: rgba(59, 130, 246, .30); }
.attendance-summary-card.is-dispensation { border-color: rgba(14, 165, 233, .30); }
.attendance-summary-card.is-absent { border-color: rgba(100, 116, 139, .30); }

@media (max-width: 760px) {
  .secretary-final-grid { grid-template-columns: 1fr; }
  .secretary-si-fields { grid-template-columns: 1fr; }
  .late-manual-form { align-items: stretch; }
  .late-manual-form .btn { width: 100%; }
}

/* v1.2.0: rekap akhir memiliki empat kategori operasional. */
.operational-recap-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1050px) {
  .operational-recap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .operational-recap-grid { grid-template-columns: 1fr; }
}
@media print {
  .operational-recap-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

.secretary-physical-confirm{display:flex;gap:.65rem;align-items:flex-start;margin-top:1rem;padding:.85rem 1rem;border:1px solid rgba(15,23,42,.12);border-radius:14px;background:rgba(248,250,252,.8);font-size:.94rem;line-height:1.45}.secretary-physical-confirm input{margin-top:.2rem;flex:0 0 auto}

/* ================================================================
   v1.3.0 — QR Permanen + Token Hari Ini + timeline kehadiran
   ================================================================ */
.late-admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    gap: 18px;
    margin: 18px 0;
}
.late-permanent-card,
.today-token-card { display: flex; flex-direction: column; gap: 14px; }
.permanent-qr-print {
    width: min(100%, 360px);
    min-height: 360px;
    margin: 0 auto;
    padding: 20px;
    display: grid;
    place-items: center;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
}
.permanent-qr-print canvas,
.permanent-qr-print img { max-width: 100% !important; height: auto !important; image-rendering: pixelated; }
.today-token-value {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 6vw, 4.6rem);
    font-weight: 800;
    letter-spacing: .16em;
    text-align: center;
    padding: 24px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
}
.today-token-meta { text-align: center; color: var(--clr-text-dim); font-size: 13px; }
.permanent-entry-card { max-width: 560px; }
.permanent-entry-card textarea { width: 100%; resize: vertical; }

.autosave-status { display: inline-block; min-width: 64px; color: var(--clr-text-dim); }
.autosave-status.is-saved { color: #9be7b5; font-weight: 700; }
.autosave-status.is-error { color: #ffaaa8; font-weight: 700; }
.secretary-postfinal-table td { vertical-align: middle; }
.compact-actions { gap: 6px; flex-wrap: wrap; }
.crud-secondary { opacity: .88; }

.secretary-modal {
    position: fixed;
    inset: 0;
    z-index: 1600;
    background: rgba(4,9,24,.72);
    backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    padding: 18px;
}
.secretary-modal[hidden] { display: none !important; }
.secretary-modal-card {
    width: min(100%, 560px);
    max-height: calc(100vh - 36px);
    overflow: auto;
    position: relative;
    border-radius: 22px;
    padding: 24px;
    background: var(--clr-surface, #17213d);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 22px 60px rgba(0,0,0,.35);
}
.secretary-modal-card.wide { width: min(100%, 760px); }
.secretary-modal-card form { display: grid; gap: 12px; }
.modal-x {
    position: absolute;
    right: 14px;
    top: 10px;
    border: 0;
    background: transparent;
    color: var(--clr-text);
    font-size: 28px;
    cursor: pointer;
}
.modal-status { margin-top: 8px; }
.timeline-morning {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    margin-bottom: 12px;
}
.attendance-timeline { display: grid; gap: 10px; }
.timeline-item {
    display: grid;
    gap: 3px;
    padding: 12px 14px;
    border-left: 3px solid rgba(125,170,255,.7);
    background: rgba(255,255,255,.045);
    border-radius: 0 12px 12px 0;
}
.timeline-item span { color: var(--clr-text-dim); }
.timeline-item small { color: var(--clr-text-dim); opacity: .82; }
.timeline-item.is-corrected { opacity: .55; text-decoration: line-through; }
.timeline-empty { color: var(--clr-text-dim); padding: 12px 0; }
.unresolved-class-card { margin-top: 18px; }

@media (max-width: 900px) {
    .late-admin-grid { grid-template-columns: 1fr; }
    .permanent-qr-print { min-height: 280px; }
    .today-token-value { letter-spacing: .10em; }
}


/* ================================================================
   v1.3.1 — Kontras halaman Sekretaris + penjelasan BV -> TW
   ================================================================ */
.secretary-bv-note {
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(51, 214, 166, .12);
    border: 1px solid rgba(51, 214, 166, .34);
    color: #eefcf8;
    line-height: 1.5;
}
.secretary-bv-note strong { color: #ffffff; }

/* Header tabel memakai latar putih, jadi teks harus gelap dan kontras. */
.secretary-table thead th,
.secretary-postfinal-table thead th {
    background: #ffffff !important;
    color: #27324a !important;
    font-weight: 800;
    opacity: 1 !important;
}

/* Konten tabel berada pada kartu gelap. */
.secretary-table tbody td,
.secretary-postfinal-table tbody td {
    color: #f5f7ff;
}
.secretary-table tbody td strong,
.secretary-postfinal-table tbody td strong {
    color: #ffffff;
}
.secretary-student-name strong {
    display: block;
    line-height: 1.3;
}
.secretary-student-name small {
    display: block;
    margin-top: 3px;
    color: #c8d2ee !important;
    font-size: .78rem;
    line-height: 1.25;
}

/* Status dan teks autosave jangan memakai warna redup pada latar gelap. */
.secretary-table .attendance-status,
.secretary-postfinal-table .attendance-status {
    color: #f7f9ff;
    border-color: rgba(255,255,255,.20);
}
.secretary-table .autosave-status {
    color: #d9e1f7;
    opacity: 1;
}
.secretary-table .autosave-status.is-saved { color: #9ff0bd; }
.secretary-table .autosave-status.is-error { color: #ffb4b2; }

/* Input/select pada sel detail memakai teks gelap di latar terang. */
.secretary-table input[type="text"],
.secretary-table input[type="number"],
.secretary-table input[type="time"],
.secretary-table select,
.secretary-table textarea,
.secretary-modal input,
.secretary-modal select,
.secretary-modal textarea {
    color: #1f2937 !important;
    background: #ffffff !important;
}
.secretary-table input::placeholder,
.secretary-modal input::placeholder,
.secretary-modal textarea::placeholder {
    color: #6b7280 !important;
    opacity: 1;
}
.secretary-table input:disabled,
.secretary-table select:disabled,
.secretary-table textarea:disabled {
    color: #4b5563 !important;
    background: #e5e7eb !important;
    opacity: 1;
}

/* Status kelas/Headcount pada kartu gelap tetap jelas. */
.secretary-status-card,
.secretary-final-card {
    color: #f5f7ff;
}
.secretary-final-card small,
.secretary-status-card small {
    color: #d5ddf2;
}
.secretary-derived {
    color: #f5f7ff;
    background: rgba(255,255,255,.065);
}
.secretary-derived strong { color: #ffffff; }
.secretary-physical-confirm {
    color: #1f2937;
}

/* ================================================================
   v1.3.8 — popup Token Hari Ini setelah QR Permanen
   ================================================================ */
body.late-modal-open {
    overflow: hidden;
}
.late-scan-modal {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: grid;
    place-items: center;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    background: rgba(4, 9, 24, .78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.late-scan-modal[hidden] {
    display: none !important;
}
.late-scan-modal-card {
    width: min(100%, 560px);
    max-height: min(88vh, 760px);
    overflow-y: auto;
    padding: 22px;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(48, 61, 117, .99), rgba(25, 38, 91, .99));
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 24px 80px rgba(0,0,0,.5);
    color: #fff;
}
.late-scan-modal-card h2 {
    margin: 0 0 8px;
    color: #fff;
}
.late-scan-modal-card p,
.late-scan-modal-card label {
    color: rgba(255,255,255,.9);
}
.late-scan-modal-card .field {
    margin-top: 14px;
}
.late-scan-modal-card input,
.late-scan-modal-card select,
.late-scan-modal-card textarea {
    width: 100%;
    min-height: 48px;
    color: #111827;
    background: #fff;
    border: 1px solid rgba(255,255,255,.55);
}
.late-scan-modal-card textarea {
    min-height: 88px;
}
.late-scan-modal-card .secretary-actions {
    margin-top: 18px;
}
.late-scan-modal-card .scan-result-student-name {
    font-weight: 700;
    color: #fff;
}
@media (max-width: 520px) {
    .late-scan-modal {
        align-items: end;
        padding-left: 10px;
        padding-right: 10px;
    }
    .late-scan-modal-card {
        width: 100%;
        max-height: 86vh;
        border-radius: 22px 22px 10px 10px;
        padding: 20px 16px;
    }
}


/* ================================================================
   v1.3.29 — Mode Gelap / Mode Terang
   Mode terang memakai off-white/netral agar tidak menyilaukan.
   ================================================================ */

html {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
    --clr-bg-start: #e8edf1;
    --clr-bg-end: #f2f3ef;
    --clr-glass: rgba(248, 249, 246, .90);
    --clr-glass-border: #cbd4de;
    --clr-text: #243247;
    --clr-text-dim: #617086;
    --shadow-depth: 0 14px 34px -18px rgba(42, 56, 78, .30);
}

html[data-theme="light"] body {
    background: linear-gradient(160deg, #e7ecf0 0%, #f2f3ef 72%) !important;
    color: #243247 !important;
}

html[data-theme="light"] .app-shell,
html[data-theme="light"] .landing,
html[data-theme="light"] .auth-wrap {
    color: #243247 !important;
}

html[data-theme="light"] .sidebar {
    background: rgba(229, 234, 239, .96) !important;
    border-color: #c7d0da !important;
    color: #243247 !important;
}

html[data-theme="light"] .sidebar .brand,
html[data-theme="light"] .sidebar nav a {
    color: #526178 !important;
}
html[data-theme="light"] .sidebar nav a:hover,
html[data-theme="light"] .sidebar nav a.active {
    background: #d6e0ea !important;
    color: #172337 !important;
}

html[data-theme="light"] .glass-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .data-form-card,
html[data-theme="light"] .class-progress-card,
html[data-theme="light"] .late-qr-intro,
html[data-theme="light"] .late-manual-card,
html[data-theme="light"] .late-scanner-card,
html[data-theme="light"] .late-student-warning,
html[data-theme="light"] .secretary-status-card,
html[data-theme="light"] .secretary-final-card {
    background: #f7f8f5 !important;
    border-color: #cbd4de !important;
    color: #243247 !important;
    box-shadow: 0 12px 28px -18px rgba(42, 56, 78, .28) !important;
}

html[data-theme="light"] .topbar .who,
html[data-theme="light"] .card-description,
html[data-theme="light"] .token-timer,
html[data-theme="light"] .today-token-meta,
html[data-theme="light"] .landing-header p,
html[data-theme="light"] .role-card p,
html[data-theme="light"] .auth-card .sub,
html[data-theme="light"] .field label {
    color: #637188 !important;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .field input,
html[data-theme="light"] .field select,
html[data-theme="light"] .form-select {
    background: #f8f9f6 !important;
    color: #213047 !important;
    border-color: #bdc8d4 !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: #8290a2 !important;
    opacity: 1;
}
html[data-theme="light"] option {
    background: #f8f9f6 !important;
    color: #213047 !important;
}

html[data-theme="light"] table {
    color: #26354a !important;
}
html[data-theme="light"] th {
    color: #53637a !important;
    border-color: #d2d9e1 !important;
}
html[data-theme="light"] td {
    color: #26354a !important;
    border-color: #d8dee5 !important;
}

html[data-theme="light"] .btn-outline {
    color: #25344a !important;
    border-color: #b9c5d1 !important;
}
html[data-theme="light"] .alert-error {
    color: #8d2637 !important;
    background: #fbe8eb !important;
    border-color: #e8a8b2 !important;
}
html[data-theme="light"] .alert-success {
    color: #176344 !important;
    background: #e2f4ec !important;
    border-color: #9fd2bb !important;
}

/* Dashboard admin v1.3.21+ */
html[data-theme="light"] .db21-class-card,
html[data-theme="light"] .db21-analysis,
html[data-theme="light"] .db21-date-form,
html[data-theme="light"] .db21-metric,
html[data-theme="light"] .db21-analysis-card,
html[data-theme="light"] .db21-dist,
html[data-theme="light"] .db21-pending-note {
    background: #f7f8f5 !important;
    border-color: #cbd5df !important;
    color: #243247 !important;
    box-shadow: 0 12px 28px -18px rgba(42,56,78,.28) !important;
}
html[data-theme="light"] .db21-pending-late {
    background: #fff1df !important;
    border-color: #e4c59d !important;
}
html[data-theme="light"] .db21-title p,
html[data-theme="light"] .db21-section-head p,
html[data-theme="light"] .db21-footer-note,
html[data-theme="light"] .db21-metric small,
html[data-theme="light"] .db21-analysis-card span,
html[data-theme="light"] .db21-dist span,
html[data-theme="light"] .db21-dist small,
html[data-theme="light"] .db21-class-name .student-total,
html[data-theme="light"] .db21-pending-note span {
    color: #66758a !important;
}
html[data-theme="light"] .db21-pending-note strong,
html[data-theme="light"] .db21-class-name h3,
html[data-theme="light"] .db21-analysis strong {
    color: #223047 !important;
}

/* Rekap Kehadiran */
html[data-theme="light"] .rk17-head p { color:#66758a !important; }
html[data-theme="light"] .rk17-tab {
    background: #e4eaf0 !important;
    border-color: #c6d0dc !important;
    color: #52647c !important;
}
html[data-theme="light"] .rk17-tab.active {
    background: #d6e5f6 !important;
    border-color: #73a6df !important;
    color: #173c6a !important;
    box-shadow: inset 0 -2px 0 #397fca !important;
}
html[data-theme="light"] .rk17-filter,
html[data-theme="light"] .rk17-panel,
html[data-theme="light"] .rk17-card,
html[data-theme="light"] .rk17-class-metric,
html[data-theme="light"] .rk17-person,
html[data-theme="light"] .rk17-student-head,
html[data-theme="light"] .rk17-timeline-item {
    background: #f7f8f5 !important;
    border-color: #cbd5df !important;
    color: #243247 !important;
}
html[data-theme="light"] .rk17-filter label,
html[data-theme="light"] .rk17-card span,
html[data-theme="light"] .rk17-card small,
html[data-theme="light"] .rk17-class-metric span,
html[data-theme="light"] .rk17-legend span,
html[data-theme="light"] .rk17-pagination,
html[data-theme="light"] .rk17-table td small,
html[data-theme="light"] .rk17-person small,
html[data-theme="light"] .rk17-student-head small,
html[data-theme="light"] .rk17-timeline-item .meta,
html[data-theme="light"] .event-text,
html[data-theme="light"] .empty-state {
    color: #68778c !important;
}
html[data-theme="light"] .rk17-filter input,
html[data-theme="light"] .rk17-filter select,
html[data-theme="light"] .rk17-btn.ghost,
html[data-theme="light"] .rk17-person {
    background: #f2f4f2 !important;
    color: #26364c !important;
    border-color: #c3ced9 !important;
}
html[data-theme="light"] .rk17-table th {
    background: #e8edf1 !important;
    color: #506178 !important;
    border-color: #ced7e0 !important;
}
html[data-theme="light"] .rk17-table td { color:#26364c !important; }
html[data-theme="light"] .rk17-table tr:hover td { background:#eef2f3 !important; }
html[data-theme="light"] .rk17-period-table th:first-child,
html[data-theme="light"] .rk17-period-table td:first-child,
html[data-theme="light"] .rk17-period-table th:nth-child(2),
html[data-theme="light"] .rk17-period-table td:nth-child(2) {
    background: #edf1f2 !important;
}

/* Laporan & Analisis */
html[data-theme="light"] body .la-wrap { color:#243247 !important; }
html[data-theme="light"] .la-head p,
html[data-theme="light"] .la-sub,
html[data-theme="light"] .la-filter label,
html[data-theme="light"] .la-card span,
html[data-theme="light"] .la-card small,
html[data-theme="light"] .la-list-row .muted,
html[data-theme="light"] .la-legend {
    color:#66758a !important;
}
html[data-theme="light"] .la-filter,
html[data-theme="light"] .la-panel,
html[data-theme="light"] .la-card,
html[data-theme="light"] .la-list-row,
html[data-theme="light"] .la-kpi-inline span {
    background:#f7f8f5 !important;
    border-color:#cbd5df !important;
    color:#243247 !important;
    box-shadow:none !important;
}
html[data-theme="light"] .la-filter input,
html[data-theme="light"] .la-filter select,
html[data-theme="light"] .la-btn,
html[data-theme="light"] .la-tab {
    background:#edf1f2 !important;
    border-color:#c4ced9 !important;
    color:#33465f !important;
}
html[data-theme="light"] .la-tab.active,
html[data-theme="light"] .la-btn.primary {
    background:#326fc0 !important;
    color:#fff !important;
    border-color:#326fc0 !important;
}
html[data-theme="light"] .la-table-wrap { border-color:#ccd6e0 !important; }
html[data-theme="light"] .la-table th {
    background:#e8edf1 !important;
    color:#506178 !important;
    border-color:#d2dae2 !important;
}
html[data-theme="light"] .la-table td {
    color:#26364c !important;
    border-color:#d7dee5 !important;
}
html[data-theme="light"] .la-table tbody tr:hover { background:#eef2f3 !important; }
html[data-theme="light"] .la-meter { background:#dfe5ea !important; }
html[data-theme="light"] .la-note {
    background:#e6eef7 !important;
    border-color:#b9cde3 !important;
    color:#31506f !important;
}

/* Sekretaris / presensi pengecualian */
html[data-theme="light"] .secretary-bv-note {
    background:#e4f3ed !important;
    border-color:#a8d2c2 !important;
    color:#285b48 !important;
}
html[data-theme="light"] .secretary-bv-note strong { color:#204b3c !important; }
html[data-theme="light"] .secretary-table thead th,
html[data-theme="light"] .secretary-postfinal-table thead th {
    background:#e8edf1 !important;
    color:#394b61 !important;
}
html[data-theme="light"] .secretary-table tbody td,
html[data-theme="light"] .secretary-postfinal-table tbody td,
html[data-theme="light"] .secretary-table tbody td strong,
html[data-theme="light"] .secretary-postfinal-table tbody td strong,
html[data-theme="light"] .secretary-status-card,
html[data-theme="light"] .secretary-final-card {
    color:#243247 !important;
}
html[data-theme="light"] .secretary-student-name small,
html[data-theme="light"] .secretary-table .autosave-status,
html[data-theme="light"] .secretary-final-card small,
html[data-theme="light"] .secretary-status-card small {
    color:#68778c !important;
}
html[data-theme="light"] .secretary-derived,
html[data-theme="light"] .timeline-morning,
html[data-theme="light"] .timeline-item {
    background:#eef2f3 !important;
    color:#243247 !important;
}
html[data-theme="light"] .secretary-derived strong { color:#243247 !important; }
html[data-theme="light"] .secretary-modal { background:rgba(53,65,81,.38) !important; }
html[data-theme="light"] .secretary-modal-card {
    background:#f7f8f5 !important;
    color:#243247 !important;
    border-color:#c8d2dc !important;
}
html[data-theme="light"] .modal-x { color:#243247 !important; }
html[data-theme="light"] .secretary-physical-confirm {
    background:#eef1f2 !important;
    color:#243247 !important;
    border-color:#c9d2dc !important;
}

/* QR/token/petugas */
html[data-theme="light"] .today-token-value {
    background:#e8edf1 !important;
    border-color:#c4ced8 !important;
    color:#17263c !important;
}
html[data-theme="light"] .late-open-countdown,
html[data-theme="light"] .late-fallback-student {
    background:#eef2f3 !important;
    color:#243247 !important;
}
html[data-theme="light"] .permanent-qr-print,
html[data-theme="light"] #qrcode-render {
    background:#ffffff !important; /* QR sengaja tetap putih untuk kontras scan */
}

/* Toggle global */
.smanda-theme-toggle {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 5000;
    min-width: 104px;
    height: 42px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    border: 1px solid rgba(147, 169, 215, .34);
    background: rgba(13, 29, 63, .93);
    color: #eef4ff;
    box-shadow: 0 10px 28px rgba(2, 8, 23, .28);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font: 700 13px/1 var(--font-body);
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.smanda-theme-toggle:hover { transform: translateY(-2px); }
.smanda-theme-toggle:focus-visible {
    outline: 3px solid rgba(51,214,166,.30);
    outline-offset: 2px;
}
.smanda-theme-toggle__icon { font-size: 17px; line-height:1; }

html[data-theme="light"] .smanda-theme-toggle {
    background: rgba(242, 244, 241, .96);
    color: #26364c;
    border-color: #bac6d2;
    box-shadow: 0 10px 24px rgba(60,72,92,.18);
}

@media (max-width: 720px) {
    .smanda-theme-toggle {
        right: 12px;
        bottom: 12px;
        min-width: 94px;
        height: 40px;
        padding: 0 12px;
    }
}

@media print {
    .smanda-theme-toggle { display:none !important; }
}


/* ================================================================
   v1.3.30 — Mode Terang: font lebih tebal + kontras lebih tinggi
   ================================================================ */

/* Dasar tipografi mode terang */
html[data-theme="light"] body,
html[data-theme="light"] .app-shell,
html[data-theme="light"] .main,
html[data-theme="light"] .landing,
html[data-theme="light"] .auth-wrap {
    color: #1d2939 !important;
    font-weight: 500;
}

/* Judul dan teks penting */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6,
html[data-theme="light"] strong,
html[data-theme="light"] b {
    color: #162235 !important;
    font-weight: 800 !important;
}

/* Teks umum, label, informasi sekunder */
html[data-theme="light"] p,
html[data-theme="light"] label,
html[data-theme="light"] small,
html[data-theme="light"] .card-description,
html[data-theme="light"] .topbar .who,
html[data-theme="light"] .field label {
    color: #40516a !important;
    font-weight: 600;
}

/* Sidebar */
html[data-theme="light"] .sidebar .brand {
    color: #18263a !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .sidebar nav a {
    color: #34465f !important;
    font-weight: 650 !important;
}
html[data-theme="light"] .sidebar nav a:hover,
html[data-theme="light"] .sidebar nav a.active {
    color: #122035 !important;
    font-weight: 800 !important;
}

/* Input dan kontrol */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .field input,
html[data-theme="light"] .field select,
html[data-theme="light"] .form-select {
    color: #172337 !important;
    font-weight: 600 !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: #5f7087 !important;
    font-weight: 550 !important;
}

/* Tabel umum */
html[data-theme="light"] table {
    color: #1f2d42 !important;
}
html[data-theme="light"] th {
    color: #2c3d55 !important;
    font-weight: 800 !important;
}
html[data-theme="light"] td {
    color: #24344b !important;
    font-weight: 600 !important;
}
html[data-theme="light"] td strong {
    color: #172337 !important;
    font-weight: 800 !important;
}

/* Tombol */
html[data-theme="light"] button,
html[data-theme="light"] .btn,
html[data-theme="light"] .rk17-btn,
html[data-theme="light"] .la-btn {
    font-weight: 800 !important;
}

/* ---------------------------------------------------------------
   Rekap Kehadiran Siswa
   --------------------------------------------------------------- */
html[data-theme="light"] .rk17-head p {
    color: #40516a !important;
    font-weight: 650 !important;
}

html[data-theme="light"] .rk17-tab {
    color: #33465f !important;
    font-weight: 750 !important;
}
html[data-theme="light"] .rk17-tab.active {
    color: #123f73 !important;
    font-weight: 850 !important;
}

/* Card ringkasan: label, angka, persentase lebih terbaca */
html[data-theme="light"] .rk17-card span {
    color: #32445e !important;
    font-weight: 850 !important;
}
html[data-theme="light"] .rk17-card strong {
    font-weight: 900 !important;
}
html[data-theme="light"] .rk17-card small {
    color: #40516a !important;
    font-weight: 700 !important;
}

/* Semantic colors dibuat lebih gelap khusus mode terang */
html[data-theme="light"] .rk17-card.tw strong,
html[data-theme="light"] .status-chip.tw,
html[data-theme="light"] .status-tw {
    color: #168447 !important;
}
html[data-theme="light"] .rk17-card.tl strong,
html[data-theme="light"] .status-chip.tl,
html[data-theme="light"] .status-tl {
    color: #b66500 !important;
}
html[data-theme="light"] .rk17-card.s strong,
html[data-theme="light"] .status-chip.s,
html[data-theme="light"] .status-s {
    color: #245fa9 !important;
}
html[data-theme="light"] .rk17-card.i strong,
html[data-theme="light"] .status-chip.i,
html[data-theme="light"] .status-i {
    color: #7540bd !important;
}
html[data-theme="light"] .rk17-card.d strong,
html[data-theme="light"] .status-chip.d,
html[data-theme="light"] .status-d {
    color: #087d78 !important;
}
html[data-theme="light"] .rk17-card.tk strong,
html[data-theme="light"] .status-chip.tk,
html[data-theme="light"] .status-tk {
    color: #c13d4d !important;
}
html[data-theme="light"] .rk17-card.bv strong,
html[data-theme="light"] .status-chip.bv,
html[data-theme="light"] .status-bv {
    color: #475a74 !important;
}

/* Badge status di tabel tetap berwarna, tetapi teks lebih tebal */
html[data-theme="light"] .rk17-badge,
html[data-theme="light"] [class*="status-chip"],
html[data-theme="light"] [class*="badge"] {
    font-weight: 800 !important;
}

/* Tabel Rekap */
html[data-theme="light"] .rk17-table th {
    color: #304158 !important;
    font-weight: 850 !important;
}
html[data-theme="light"] .rk17-table td {
    color: #24344b !important;
    font-weight: 600 !important;
}
html[data-theme="light"] .rk17-table td strong {
    color: #142238 !important;
    font-weight: 850 !important;
}
html[data-theme="light"] .rk17-table td small {
    color: #52647c !important;
    font-weight: 600 !important;
}
html[data-theme="light"] .rk17-person,
html[data-theme="light"] .rk17-student-head,
html[data-theme="light"] .rk17-timeline-item {
    color: #223149 !important;
}
html[data-theme="light"] .rk17-person small,
html[data-theme="light"] .rk17-student-head small,
html[data-theme="light"] .rk17-timeline-item .meta,
html[data-theme="light"] .event-text,
html[data-theme="light"] .empty-state {
    color: #4c5e76 !important;
    font-weight: 600 !important;
}

/* ---------------------------------------------------------------
   Dashboard admin
   --------------------------------------------------------------- */
html[data-theme="light"] .db21-class-name h3,
html[data-theme="light"] .db21-analysis strong {
    color: #172337 !important;
    font-weight: 850 !important;
}
html[data-theme="light"] .db21-class-name .student-total,
html[data-theme="light"] .db21-title p,
html[data-theme="light"] .db21-section-head p,
html[data-theme="light"] .db21-footer-note,
html[data-theme="light"] .db21-metric small,
html[data-theme="light"] .db21-analysis-card span,
html[data-theme="light"] .db21-dist span,
html[data-theme="light"] .db21-dist small,
html[data-theme="light"] .db21-pending-note span {
    color: #45566e !important;
    font-weight: 650 !important;
}
html[data-theme="light"] .db21-metric strong,
html[data-theme="light"] .db21-analysis-card strong,
html[data-theme="light"] .db21-dist strong {
    font-weight: 900 !important;
}

/* ---------------------------------------------------------------
   Laporan & Analisis
   --------------------------------------------------------------- */
html[data-theme="light"] .la-wrap {
    color: #1f2d42 !important;
}
html[data-theme="light"] .la-head p,
html[data-theme="light"] .la-sub,
html[data-theme="light"] .la-filter label,
html[data-theme="light"] .la-card span,
html[data-theme="light"] .la-card small,
html[data-theme="light"] .la-list-row .muted,
html[data-theme="light"] .la-legend {
    color: #45566e !important;
    font-weight: 650 !important;
}
html[data-theme="light"] .la-card strong,
html[data-theme="light"] .la-list-row strong {
    color: #172337 !important;
    font-weight: 850 !important;
}
html[data-theme="light"] .la-table th {
    color: #304158 !important;
    font-weight: 850 !important;
}
html[data-theme="light"] .la-table td {
    color: #24344b !important;
    font-weight: 600 !important;
}

/* ---------------------------------------------------------------
   Sekretaris / Pengurus Kelas
   --------------------------------------------------------------- */
html[data-theme="light"] .secretary-table thead th,
html[data-theme="light"] .secretary-postfinal-table thead th {
    color: #2c3d55 !important;
    font-weight: 850 !important;
}
html[data-theme="light"] .secretary-table tbody td,
html[data-theme="light"] .secretary-postfinal-table tbody td {
    color: #24344b !important;
    font-weight: 600 !important;
}
html[data-theme="light"] .secretary-table tbody td strong,
html[data-theme="light"] .secretary-postfinal-table tbody td strong,
html[data-theme="light"] .secretary-status-card,
html[data-theme="light"] .secretary-final-card {
    color: #172337 !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .secretary-student-name small,
html[data-theme="light"] .secretary-table .autosave-status,
html[data-theme="light"] .secretary-final-card small,
html[data-theme="light"] .secretary-status-card small {
    color: #4d6078 !important;
    font-weight: 600 !important;
}

/* ---------------------------------------------------------------
   Toggle tema
   --------------------------------------------------------------- */
html[data-theme="light"] .smanda-theme-toggle {
    color: #1d2b40 !important;
    font-weight: 850 !important;
    border-color: #9dacbd !important;
}


/* ================================================================
   v1.3.31 — MODE TERANG: KONTRAS MENYELURUH
   Memperbaiki badge/status/label yang masih terlalu pucat.
   ================================================================ */

/* Teks umum di area aplikasi dibuat lebih tegas */
html[data-theme="light"] .main,
html[data-theme="light"] .main p,
html[data-theme="light"] .main span,
html[data-theme="light"] .main td,
html[data-theme="light"] .main li,
html[data-theme="light"] .main a,
html[data-theme="light"] .main label,
html[data-theme="light"] .main small {
    font-weight: 600;
}

html[data-theme="light"] .main td,
html[data-theme="light"] .main .current-state,
html[data-theme="light"] .main .event-text {
    color: #1f2f46 !important;
}

/* ----------------------------------------------------------------
   Rekap Kehadiran: badge sebenarnya memakai .badge + .st-*
   ---------------------------------------------------------------- */
html[data-theme="light"] .badge {
    font-weight: 850 !important;
    border: 1px solid transparent !important;
    text-shadow: none !important;
}

html[data-theme="light"] .badge.st-tw {
    background: #dcefe3 !important;
    color: #126b39 !important;
    border-color: #a8d3b9 !important;
}
html[data-theme="light"] .badge.st-tl {
    background: #f9e8c9 !important;
    color: #8d5000 !important;
    border-color: #dfbd7f !important;
}
html[data-theme="light"] .badge.st-s {
    background: #dce9f8 !important;
    color: #1f5794 !important;
    border-color: #abc6e5 !important;
}
html[data-theme="light"] .badge.st-i {
    background: #e9e1f6 !important;
    color: #6638a4 !important;
    border-color: #c9b5e6 !important;
}
html[data-theme="light"] .badge.st-d {
    background: #d8eeee !important;
    color: #086c68 !important;
    border-color: #9fcfcf !important;
}
html[data-theme="light"] .badge.st-tk {
    background: #f7dede !important;
    color: #a22f3d !important;
    border-color: #e3afb6 !important;
}
html[data-theme="light"] .badge.st-bv {
    background: #e4e9ee !important;
    color: #34465e !important;
    border-color: #bcc8d4 !important;
}

/* Badge Final Kelas */
html[data-theme="light"] .final-badge {
    font-weight: 850 !important;
    border: 1px solid transparent !important;
}
html[data-theme="light"] .final-badge.final-ok,
html[data-theme="light"] .final-ok {
    background: #dcefe3 !important;
    color: #126b39 !important;
    border-color: #a8d3b9 !important;
}
html[data-theme="light"] .final-badge.final-run,
html[data-theme="light"] .final-run {
    background: #dce9f8 !important;
    color: #1f5794 !important;
    border-color: #abc6e5 !important;
}
html[data-theme="light"] .final-badge.final-wait,
html[data-theme="light"] .final-wait {
    background: #f9e8c9 !important;
    color: #8d5000 !important;
    border-color: #dfbd7f !important;
}
html[data-theme="light"] .final-badge.final-alert,
html[data-theme="light"] .final-alert {
    background: #f7dede !important;
    color: #a22f3d !important;
    border-color: #e3afb6 !important;
}

/* ----------------------------------------------------------------
   Status lama / status umum di halaman lain
   ---------------------------------------------------------------- */
html[data-theme="light"] .badge-hadir,
html[data-theme="light"] .attendance-status.is-on-time,
html[data-theme="light"] .attendance-status.is-excused,
html[data-theme="light"] .attendance-status.is-dispensation {
    background: #dcefe3 !important;
    color: #126b39 !important;
    border-color: #a8d3b9 !important;
    font-weight: 850 !important;
}

html[data-theme="light"] .badge-terlambat,
html[data-theme="light"] .attendance-status.is-late {
    background: #f9e8c9 !important;
    color: #8d5000 !important;
    border-color: #dfbd7f !important;
    font-weight: 850 !important;
}

html[data-theme="light"] .attendance-status.is-failed,
html[data-theme="light"] .attendance-status.is-absent {
    background: #f7dede !important;
    color: #a22f3d !important;
    border-color: #e3afb6 !important;
    font-weight: 850 !important;
}

html[data-theme="light"] .attendance-status.is-not-tried {
    background: #e4e9ee !important;
    color: #34465e !important;
    border-color: #bcc8d4 !important;
    font-weight: 850 !important;
}

html[data-theme="light"] .attendance-status,
html[data-theme="light"] .status-badge,
html[data-theme="light"] .schedule-status,
html[data-theme="light"] .student-role-badge,
html[data-theme="light"] .token-status,
html[data-theme="light"] .report-period-badge,
html[data-theme="light"] .attendance-code-entry-badge,
html[data-theme="light"] .attendance-code-entry-status,
html[data-theme="light"] .fallback-help-badge,
html[data-theme="light"] .fallback-security-badge,
html[data-theme="light"] .fallback-risk-badge,
html[data-theme="light"] .ios-compat-badge,
html[data-theme="light"] .ios-location-status {
    font-weight: 800 !important;
}

/* Status aktif/nonaktif */
html[data-theme="light"] .status-badge.is-active,
html[data-theme="light"] .schedule-status.is-active,
html[data-theme="light"] .ios-location-status.is-success {
    background: #dcefe3 !important;
    color: #126b39 !important;
    border-color: #a8d3b9 !important;
}
html[data-theme="light"] .status-badge.is-inactive,
html[data-theme="light"] .schedule-status.is-inactive {
    background: #e4e9ee !important;
    color: #34465e !important;
    border-color: #bcc8d4 !important;
}
html[data-theme="light"] .ios-location-status.is-working {
    background: #dce9f8 !important;
    color: #1f5794 !important;
    border-color: #abc6e5 !important;
}
html[data-theme="light"] .ios-location-status.is-error {
    background: #f7dede !important;
    color: #a22f3d !important;
    border-color: #e3afb6 !important;
}

/* Problem / audit status */
html[data-theme="light"] .problem-status {
    font-weight: 850 !important;
}
html[data-theme="light"] .problem-status.is-new {
    background: #f7dede !important;
    color: #a22f3d !important;
    border-color: #e3afb6 !important;
}
html[data-theme="light"] .problem-status.is-resolved {
    background: #dcefe3 !important;
    color: #126b39 !important;
    border-color: #a8d3b9 !important;
}
html[data-theme="light"] .problem-status.is-device {
    background: #f9e8c9 !important;
    color: #8d5000 !important;
    border-color: #dfbd7f !important;
}
html[data-theme="light"] .problem-status.is-system {
    background: #e9e1f6 !important;
    color: #6638a4 !important;
    border-color: #c9b5e6 !important;
}
html[data-theme="light"] .problem-status.is-muted {
    background: #e4e9ee !important;
    color: #34465e !important;
    border-color: #bcc8d4 !important;
}

/* Laporan & Analisis badges */
html[data-theme="light"] .la-badge {
    font-weight: 850 !important;
}
html[data-theme="light"] .la-badge.ok {
    background: #dcefe3 !important;
    color: #126b39 !important;
    border-color: #a8d3b9 !important;
}
html[data-theme="light"] .la-badge.warn {
    background: #f9e8c9 !important;
    color: #8d5000 !important;
    border-color: #dfbd7f !important;
}
html[data-theme="light"] .la-badge.bad {
    background: #f7dede !important;
    color: #a22f3d !important;
    border-color: #e3afb6 !important;
}
html[data-theme="light"] .la-badge.muted {
    background: #e4e9ee !important;
    color: #34465e !important;
    border-color: #bcc8d4 !important;
}

/* Dashboard card badge */
html[data-theme="light"] .db21-badge {
    font-weight: 850 !important;
}
html[data-theme="light"] .db21-badge.final {
    background: #dcefe3 !important;
    color: #126b39 !important;
    border-color: #a8d3b9 !important;
}
html[data-theme="light"] .db21-badge.pending {
    background: #f9e8c9 !important;
    color: #8d5000 !important;
    border-color: #dfbd7f !important;
}
html[data-theme="light"] .db21-badge.action {
    background: #f7dede !important;
    color: #a22f3d !important;
    border-color: #e3afb6 !important;
}

/* Angka/status khusus pada Rekap */
html[data-theme="light"] .late-min {
    color: #8d5000 !important;
    font-weight: 900 !important;
}
html[data-theme="light"] .current-state {
    color: #172337 !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .event-text {
    color: #34465e !important;
    font-weight: 650 !important;
}

/* NISN / teks kecil harus tetap terbaca */
html[data-theme="light"] .rk17-table td small,
html[data-theme="light"] .secretary-table td small,
html[data-theme="light"] .secretary-postfinal-table td small,
html[data-theme="light"] .student-meta,
html[data-theme="light"] .muted {
    color: #4b5d74 !important;
    font-weight: 600 !important;
}

/* Button outline pada mode terang */
html[data-theme="light"] .rk17-btn.ghost,
html[data-theme="light"] .btn-outline,
html[data-theme="light"] .la-btn:not(.primary) {
    color: #1e2e45 !important;
    font-weight: 800 !important;
    border-color: #aebdcc !important;
}

/* Jangan ubah Mode Gelap. Semua override hanya data-theme=light. */


/* =====================================================================
   v1.3.32 — AUDIT SEMUA HALAMAN PHP: KONTRAS MODE TERANG
   Audit source: 51 file PHP
   - 22 halaman PHP merender UI/HTML
   - 29 file PHP backend/API/include/cron tanpa UI visual
   ===================================================================== */

html[data-theme="light"] {
    --light-text-strong: #122035;
    --light-text: #1f3047;
    --light-text-mid: #344860;
    --light-text-muted: #4c6078;
    --light-border: #b8c5d2;
    --light-panel: #f6f7f4;
    --light-panel-alt: #edf1f2;
}

/* ---------- Tipografi dasar seluruh halaman UI ---------- */
html[data-theme="light"] body {
    color: var(--light-text) !important;
    font-weight: 550;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6 {
    color: var(--light-text-strong) !important;
    font-weight: 850 !important;
}

html[data-theme="light"] .main > p,
html[data-theme="light"] .main > small,
html[data-theme="light"] .card-description,
html[data-theme="light"] .muted,
html[data-theme="light"] .sub,
html[data-theme="light"] .who,
html[data-theme="light"] .student-meta,
html[data-theme="light"] .token-timer,
html[data-theme="light"] .today-token-meta,
html[data-theme="light"] .backup-small-note,
html[data-theme="light"] .import-note,
html[data-theme="light"] .student-search-help,
html[data-theme="light"] .schedule-rule-list,
html[data-theme="light"] .server-clock {
    color: var(--light-text-muted) !important;
    font-weight: 600 !important;
}

/* ---------- Sidebar / navigasi ---------- */
html[data-theme="light"] .sidebar .brand {
    color: #122035 !important;
    font-weight: 850 !important;
}
html[data-theme="light"] .sidebar nav a {
    color: #30455e !important;
    font-weight: 700 !important;
}
html[data-theme="light"] .sidebar nav a:hover,
html[data-theme="light"] .sidebar nav a.active {
    color: #102039 !important;
    font-weight: 850 !important;
}

/* ---------- Form / input / tombol ---------- */
html[data-theme="light"] label,
html[data-theme="light"] .field label {
    color: #334860 !important;
    font-weight: 700 !important;
}
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .form-select {
    color: #17263b !important;
    font-weight: 650 !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: #596c84 !important;
    font-weight: 600 !important;
}
html[data-theme="light"] .btn,
html[data-theme="light"] button,
html[data-theme="light"] .crud-button {
    font-weight: 800 !important;
}
html[data-theme="light"] .btn-outline,
html[data-theme="light"] .crud-cancel-link {
    color: #20334c !important;
    border-color: #aebdcb !important;
    font-weight: 800 !important;
}

/* ---------- Tabel umum ---------- */
html[data-theme="light"] table {
    color: #1e3047 !important;
}
html[data-theme="light"] th {
    color: #2c4058 !important;
    font-weight: 850 !important;
}
html[data-theme="light"] td {
    color: #20334b !important;
    font-weight: 600 !important;
}
html[data-theme="light"] td strong {
    color: #102037 !important;
    font-weight: 850 !important;
}
html[data-theme="light"] td small {
    color: #4b6079 !important;
    font-weight: 600 !important;
}

/* ---------- CRUD / data master ---------- */
html[data-theme="light"] .crud-form-heading,
html[data-theme="light"] .crud-list-heading,
html[data-theme="light"] .schedule-heading,
html[data-theme="light"] .report-section-heading {
    color: #17283f !important;
    font-weight: 850 !important;
}
html[data-theme="light"] .crud-edit {
    color: #12633b !important;
    background: #dcefe3 !important;
    border-color: #a3cfb5 !important;
    font-weight: 850 !important;
}
html[data-theme="light"] .crud-delete {
    color: #9f2f3d !important;
    background: #f7dede !important;
    border-color: #e0adb4 !important;
    font-weight: 850 !important;
}
html[data-theme="light"] .import-note,
html[data-theme="light"] .backup-guide,
html[data-theme="light"] .backup-list {
    color: #3d516a !important;
    font-weight: 600 !important;
}

/* ---------- Alert / warning ---------- */
html[data-theme="light"] .alert-error,
html[data-theme="light"] .import-progress-error {
    color: #8c2837 !important;
    background: #f8e1e5 !important;
    border-color: #dea5ae !important;
    font-weight: 700 !important;
}
html[data-theme="light"] .alert-success {
    color: #145d3d !important;
    background: #e0f1e8 !important;
    border-color: #9bcab5 !important;
    font-weight: 700 !important;
}
html[data-theme="light"] .backup-security-note,
html[data-theme="light"] .ios-browser-warning {
    color: #754708 !important;
    background: #f8ead3 !important;
    border-color: #dbbd87 !important;
    font-weight: 700 !important;
}

/* =====================================================================
   DASHBOARD ADMIN — seluruh elemen custom inline admin/dashboard.php
   ===================================================================== */
html[data-theme="light"] .db21-title p,
html[data-theme="light"] .db21-section-head p,
html[data-theme="light"] .db21-footer-note {
    color: #3d526c !important;
    font-weight: 650 !important;
}
html[data-theme="light"] .db21-date-form span {
    color: #2c4058 !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .db21-date-form input {
    color: #13233a !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .db21-class-name .student-total {
    color: #3e536c !important;
    font-weight: 700 !important;
}
html[data-theme="light"] .db21-class-name h3 {
    color: #102037 !important;
    font-weight: 900 !important;
}
html[data-theme="light"] .db21-metric small {
    color: #344a63 !important;
    font-weight: 750 !important;
}
html[data-theme="light"] .db21-metric strong {
    font-weight: 900 !important;
}
html[data-theme="light"] .db21-metric.tw strong { color:#126b39 !important; }
html[data-theme="light"] .db21-metric.tl strong { color:#8d5000 !important; }
html[data-theme="light"] .db21-metric.s strong  { color:#1f5794 !important; }
html[data-theme="light"] .db21-metric.i strong  { color:#6638a4 !important; }
html[data-theme="light"] .db21-metric.d strong  { color:#086c68 !important; }
html[data-theme="light"] .db21-metric.tk strong { color:#a22f3d !important; }

html[data-theme="light"] .db21-pending-late {
    background: #f8e7cc !important;
    border-color: #d8b474 !important;
}
html[data-theme="light"] .db21-pending-late span {
    color: #7b4907 !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .db21-pending-late strong {
    color: #8d5000 !important;
    font-weight: 900 !important;
}
html[data-theme="light"] .db21-pending-note strong {
    color: #14253c !important;
    font-weight: 900 !important;
}
html[data-theme="light"] .db21-pending-note span {
    color: #344a63 !important;
    font-weight: 700 !important;
}
html[data-theme="light"] .db21-card-link {
    color: #1b5796 !important;
    font-weight: 850 !important;
}
html[data-theme="light"] .db21-card-link:hover {
    color: #0e3e75 !important;
}
html[data-theme="light"] .db21-analysis-card span,
html[data-theme="light"] .db21-dist span,
html[data-theme="light"] .db21-dist small {
    color: #3e536c !important;
    font-weight: 700 !important;
}
html[data-theme="light"] .db21-dist-title,
html[data-theme="light"] .db21-analysis-card strong,
html[data-theme="light"] .db21-dist strong {
    color: #14253c !important;
    font-weight: 900 !important;
}
html[data-theme="light"] .db21-empty {
    color: #3d526c !important;
    font-weight: 700 !important;
}

/* Dashboard badges */
html[data-theme="light"] .db21-badge.final {
    color:#126b39 !important;background:#dcefe3 !important;border-color:#a8d3b9 !important;
}
html[data-theme="light"] .db21-badge.pending {
    color:#7e4800 !important;background:#f8e8cb !important;border-color:#ddb97c !important;
}
html[data-theme="light"] .db21-badge.action {
    color:#952d3a !important;background:#f6dfe2 !important;border-color:#ddaab2 !important;
}
html[data-theme="light"] .db21-badge {
    font-weight:900 !important;
}

/* =====================================================================
   REKAP KEHADIRAN — seluruh status dan teks custom
   ===================================================================== */
html[data-theme="light"] .rk17-head p,
html[data-theme="light"] .rk17-filter label,
html[data-theme="light"] .rk17-class-metric span,
html[data-theme="light"] .rk17-legend span,
html[data-theme="light"] .rk17-pagination,
html[data-theme="light"] .rk17-person small,
html[data-theme="light"] .rk17-student-head small,
html[data-theme="light"] .rk17-timeline-item .meta,
html[data-theme="light"] .empty-state {
    color:#435870 !important;
    font-weight:650 !important;
}
html[data-theme="light"] .rk17-tab {
    color:#30455e !important;
    font-weight:800 !important;
}
html[data-theme="light"] .rk17-tab.active {
    color:#113e72 !important;
    font-weight:900 !important;
}
html[data-theme="light"] .rk17-filter input,
html[data-theme="light"] .rk17-filter select,
html[data-theme="light"] .rk17-btn {
    color:#192a41 !important;
    font-weight:750 !important;
}
html[data-theme="light"] .rk17-btn.primary,
html[data-theme="light"] .rk17-page.active {
    color:#ffffff !important;
}
html[data-theme="light"] .rk17-table th {
    color:#2b4058 !important;
    font-weight:900 !important;
}
html[data-theme="light"] .rk17-table td {
    color:#20334b !important;
    font-weight:600 !important;
}
html[data-theme="light"] .rk17-table td small {
    color:#4b6079 !important;
    font-weight:650 !important;
}
html[data-theme="light"] .rk17-person {
    color:#182a41 !important;
    font-weight:750 !important;
}
html[data-theme="light"] .event-text {
    color:#344a63 !important;
    font-weight:700 !important;
}
html[data-theme="light"] .late-min {
    color:#8d5000 !important;
    font-weight:900 !important;
}
html[data-theme="light"] .current-state {
    color:#14253c !important;
    font-weight:850 !important;
}

/* Semua bentuk class status, bukan hanya kombinasi .badge.st-* */
html[data-theme="light"] .st-tw,
html[data-theme="light"] .badge-hadir,
html[data-theme="light"] .attendance-status.is-on-time {
    color:#126b39 !important;background:#dcefe3 !important;border-color:#a8d3b9 !important;font-weight:900 !important;
}
html[data-theme="light"] .st-tl,
html[data-theme="light"] .badge-terlambat,
html[data-theme="light"] .attendance-status.is-late {
    color:#7e4800 !important;background:#f8e8cb !important;border-color:#ddb97c !important;font-weight:900 !important;
}
html[data-theme="light"] .st-s {
    color:#1f5794 !important;background:#dce9f8 !important;border-color:#abc6e5 !important;font-weight:900 !important;
}
html[data-theme="light"] .st-i {
    color:#6638a4 !important;background:#e9e1f6 !important;border-color:#c9b5e6 !important;font-weight:900 !important;
}
html[data-theme="light"] .st-d {
    color:#086c68 !important;background:#d8eeee !important;border-color:#9fcfcf !important;font-weight:900 !important;
}
html[data-theme="light"] .st-tk {
    color:#9f2f3d !important;background:#f7dede !important;border-color:#e3afb6 !important;font-weight:900 !important;
}
html[data-theme="light"] .st-bv {
    color:#30455e !important;background:#e2e8ed !important;border-color:#b9c6d2 !important;font-weight:900 !important;
}

/* Final Kelas */
html[data-theme="light"] .final-ok {
    color:#126b39 !important;background:#dcefe3 !important;border-color:#a8d3b9 !important;font-weight:900 !important;
}
html[data-theme="light"] .final-run {
    color:#1f5794 !important;background:#dce9f8 !important;border-color:#abc6e5 !important;font-weight:900 !important;
}
html[data-theme="light"] .final-wait {
    color:#7e4800 !important;background:#f8e8cb !important;border-color:#ddb97c !important;font-weight:900 !important;
}
html[data-theme="light"] .final-alert {
    color:#9f2f3d !important;background:#f7dede !important;border-color:#e3afb6 !important;font-weight:900 !important;
}

/* =====================================================================
   LAPORAN & ANALISIS
   ===================================================================== */
html[data-theme="light"] .la-head p,
html[data-theme="light"] .la-filter label,
html[data-theme="light"] .la-sub,
html[data-theme="light"] .la-card span,
html[data-theme="light"] .la-card small,
html[data-theme="light"] .la-list-row .muted,
html[data-theme="light"] .la-empty,
html[data-theme="light"] .la-legend {
    color:#435870 !important;
    font-weight:650 !important;
}
html[data-theme="light"] .la-tab,
html[data-theme="light"] .la-btn {
    color:#2d425a !important;
    font-weight:800 !important;
}
html[data-theme="light"] .la-tab.active,
html[data-theme="light"] .la-btn.primary {
    color:#fff !important;
}
html[data-theme="light"] .la-table th {
    color:#2b4058 !important;
    font-weight:900 !important;
}
html[data-theme="light"] .la-table td,
html[data-theme="light"] .la-kpi-inline span {
    color:#20334b !important;
    font-weight:650 !important;
}
html[data-theme="light"] .la-note {
    color:#294b6d !important;
    font-weight:700 !important;
}
html[data-theme="light"] .la-badge.ok {
    color:#126b39 !important;background:#dcefe3 !important;border-color:#a8d3b9 !important;font-weight:900 !important;
}
html[data-theme="light"] .la-badge.warn {
    color:#7e4800 !important;background:#f8e8cb !important;border-color:#ddb97c !important;font-weight:900 !important;
}
html[data-theme="light"] .la-badge.bad {
    color:#9f2f3d !important;background:#f7dede !important;border-color:#e3afb6 !important;font-weight:900 !important;
}
html[data-theme="light"] .la-badge.muted {
    color:#30455e !important;background:#e2e8ed !important;border-color:#b9c6d2 !important;font-weight:900 !important;
}

/* =====================================================================
   SEKRETARIS / PENGURUS KELAS
   ===================================================================== */
html[data-theme="light"] .secretary-table tbody td,
html[data-theme="light"] .secretary-postfinal-table tbody td,
html[data-theme="light"] .secretary-status-card,
html[data-theme="light"] .secretary-final-card,
html[data-theme="light"] .secretary-derived {
    color:#20334b !important;
    font-weight:600 !important;
}
html[data-theme="light"] .secretary-table tbody td strong,
html[data-theme="light"] .secretary-postfinal-table tbody td strong,
html[data-theme="light"] .secretary-derived strong {
    color:#102037 !important;
    font-weight:900 !important;
}
html[data-theme="light"] .secretary-student-name small,
html[data-theme="light"] .secretary-table .autosave-status,
html[data-theme="light"] .secretary-final-card small,
html[data-theme="light"] .secretary-status-card small {
    color:#465b74 !important;
    font-weight:650 !important;
}
html[data-theme="light"] .autosave-status.is-saved {
    color:#126b39 !important;
    font-weight:800 !important;
}
html[data-theme="light"] .autosave-status.is-error {
    color:#9f2f3d !important;
    font-weight:800 !important;
}

/* =====================================================================
   AUDIT ABSENSI / PROBLEM LOG / TEKNIS
   ===================================================================== */
html[data-theme="light"] .problem-group-camera { color:#5f3c94 !important;font-weight:850 !important; }
html[data-theme="light"] .problem-group-gps { color:#245b91 !important;font-weight:850 !important; }
html[data-theme="light"] .problem-group-qr { color:#126b4a !important;font-weight:850 !important; }
html[data-theme="light"] .problem-group-network { color:#80500b !important;font-weight:850 !important; }
html[data-theme="light"] .problem-group-system { color:#973544 !important;font-weight:850 !important; }

html[data-theme="light"] .problem-status.is-new {
    color:#9f2f3d !important;background:#f7dede !important;border-color:#e3afb6 !important;font-weight:900 !important;
}
html[data-theme="light"] .problem-status.is-resolved {
    color:#126b39 !important;background:#dcefe3 !important;border-color:#a8d3b9 !important;font-weight:900 !important;
}
html[data-theme="light"] .problem-status.is-device {
    color:#7e4800 !important;background:#f8e8cb !important;border-color:#ddb97c !important;font-weight:900 !important;
}
html[data-theme="light"] .problem-status.is-system {
    color:#6638a4 !important;background:#e9e1f6 !important;border-color:#c9b5e6 !important;font-weight:900 !important;
}
html[data-theme="light"] .problem-status.is-muted {
    color:#30455e !important;background:#e2e8ed !important;border-color:#b9c6d2 !important;font-weight:900 !important;
}
html[data-theme="light"] .report-subtitle,
html[data-theme="light"] .report-status-badge,
html[data-theme="light"] .fallback-admin-stats,
html[data-theme="light"] .fallback-admin-filter {
    color:#344a63 !important;
    font-weight:700 !important;
}

/* =====================================================================
   STATUS AKTIF / JADWAL / IMPORT
   ===================================================================== */
html[data-theme="light"] .status-badge,
html[data-theme="light"] .schedule-status {
    font-weight:900 !important;
}
html[data-theme="light"] .status-badge.is-active,
html[data-theme="light"] .schedule-status.is-active {
    color:#126b39 !important;background:#dcefe3 !important;border-color:#a8d3b9 !important;
}
html[data-theme="light"] .status-badge.is-inactive,
html[data-theme="light"] .schedule-status.is-inactive {
    color:#9f2f3d !important;background:#f7dede !important;border-color:#e3afb6 !important;
}

/* =====================================================================
   QR / SCANNER / PETUGAS
   ===================================================================== */
html[data-theme="light"] .attendance-code-entry-heading p,
html[data-theme="light"] .attendance-code-help,
html[data-theme="light"] .attendance-code-entry-status,
html[data-theme="light"] .fallback-help-badge,
html[data-theme="light"] .fallback-security-badge,
html[data-theme="light"] .fallback-risk-badge {
    color:#3e536c !important;
    font-weight:650 !important;
}
html[data-theme="light"] .attendance-code-entry-status.is-error,
html[data-theme="light"] .scan-result-error .scan-result-icon,
html[data-theme="light"] .scan-result-row.is-failed strong {
    color:#9f2f3d !important;
    font-weight:850 !important;
}
html[data-theme="light"] .ios-location-status.is-success {
    color:#126b39 !important;background:#dcefe3 !important;border-color:#a8d3b9 !important;font-weight:850 !important;
}
html[data-theme="light"] .ios-location-status.is-working {
    color:#1f5794 !important;background:#dce9f8 !important;border-color:#abc6e5 !important;font-weight:850 !important;
}
html[data-theme="light"] .ios-location-status.is-error {
    color:#9f2f3d !important;background:#f7dede !important;border-color:#e3afb6 !important;font-weight:850 !important;
}

/* Autocomplete siswa: pada mode terang jangan mempertahankan dropdown gelap */
html[data-theme="light"] .student-suggestion-list {
    background:#f7f8f5 !important;
    border-color:#b8c5d2 !important;
    box-shadow:0 16px 34px rgba(55,70,92,.18) !important;
}
html[data-theme="light"] .student-suggestion-item {
    color:#1c2d44 !important;
}
html[data-theme="light"] .student-suggestion-item strong {
    color:#122035 !important;
    font-weight:850 !important;
}
html[data-theme="light"] .student-suggestion-item small,
html[data-theme="light"] .student-suggestion-message {
    color:#485d75 !important;
    font-weight:600 !important;
}
html[data-theme="light"] .student-suggestion-message.is-error {
    color:#9f2f3d !important;
}
html[data-theme="light"] .student-suggestion-message.is-loading {
    color:#245b91 !important;
}

/* =====================================================================
   RINGKASAN OPERASIONAL LAMA — tetap kontras jika halaman lama dibuka
   ===================================================================== */
html[data-theme="light"] .operational-universe-heading strong,
html[data-theme="light"] .operational-node-tried strong,
html[data-theme="light"] .operational-node-direct strong,
html[data-theme="light"] .operational-node-affected strong,
html[data-theme="light"] .operational-node-recovered strong,
html[data-theme="light"] .operational-node-not-tried strong,
html[data-theme="light"] .operational-recap-not-tried strong {
    font-weight:900 !important;
}
html[data-theme="light"] .operational-universe-heading strong { color:#263b57 !important; }
html[data-theme="light"] .operational-node-tried strong { color:#245b91 !important; }
html[data-theme="light"] .operational-node-direct strong,
html[data-theme="light"] .operational-node-recovered strong { color:#126b4a !important; }
html[data-theme="light"] .operational-node-affected strong { color:#80500b !important; }
html[data-theme="light"] .operational-node-not-tried strong,
html[data-theme="light"] .operational-recap-not-tried strong { color:#435870 !important; }

/* =====================================================================
   INSTALL / LOGIN / LANDING
   ===================================================================== */
html[data-theme="light"] .auth-card .sub,
html[data-theme="light"] .landing-header p,
html[data-theme="light"] .role-card p {
    color:#40556e !important;
    font-weight:650 !important;
}
html[data-theme="light"] .install-wrap,
html[data-theme="light"] .install-wrap p,
html[data-theme="light"] .install-wrap li,
html[data-theme="light"] .install-wrap legend,
html[data-theme="light"] .box,
html[data-theme="light"] .box p {
    color:#25384f !important;
    font-weight:600 !important;
}
html[data-theme="light"] .install-wrap .ok,
html[data-theme="light"] .box a {
    color:#126b39 !important;
    font-weight:850 !important;
}
html[data-theme="light"] .install-wrap .no {
    color:#9f2f3d !important;
    font-weight:850 !important;
}

/* ---------- Theme toggle ---------- */
html[data-theme="light"] .smanda-theme-toggle {
    color:#17283f !important;
    font-weight:900 !important;
    border-color:#9cacbd !important;
}

/* Mode gelap tidak disentuh oleh blok v1.3.32. */

/* =====================================================================
   v1.3.69 — Landing modern: logo besar kiri + akses role kanan
   ===================================================================== */
.landing-modern {
    position: relative;
    min-height: 100vh;
    width: 100%;
    padding: clamp(24px, 4vh, 44px) clamp(24px, 4vw, 70px);
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
}
.landing-modern::before,
.landing-modern::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -2;
    filter: blur(2px);
}
.landing-modern::before {
    width: 520px;
    height: 520px;
    left: -190px;
    top: -170px;
    background: radial-gradient(circle, rgba(51,214,166,.18) 0%, rgba(51,214,166,0) 68%);
}
.landing-modern::after {
    width: 620px;
    height: 620px;
    right: -240px;
    bottom: -260px;
    background: radial-gradient(circle, rgba(82,129,255,.20) 0%, rgba(82,129,255,0) 68%);
}

.landing-modern-shell {
    width: min(1320px, 100%);
    display: grid;
    grid-template-columns: minmax(360px, .92fr) minmax(520px, 1.08fr);
    align-items: stretch;
    gap: clamp(30px, 4.2vw, 66px);
}

.landing-brand-panel,
.landing-access-panel {
    position: relative;
    min-height: min(680px, calc(100vh - 70px));
}

.landing-brand-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(18px, 2.8vw, 38px);
}
.landing-brand-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 34px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.018));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    pointer-events: none;
}

.landing-brand-topline {
    position: absolute;
    top: clamp(20px, 3vw, 32px);
    left: clamp(22px, 3vw, 38px);
    z-index: 2;
}
.landing-brand-topline .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(51,214,166,.12);
    border: 1px solid rgba(51,214,166,.32);
    color: var(--clr-accent);
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .01em;
}
.landing-brand-topline .status-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--clr-accent);
    box-shadow: 0 0 0 0 rgba(51,214,166,.55);
    animation: pulse 2s infinite;
}

.school-logo-stage {
    position: relative;
    width: min(320px, 74%);
    aspect-ratio: 1 / 1;
    margin: 30px auto 24px;
    display: grid;
    place-items: center;
}
.school-logo-halo {
    position: absolute;
    inset: 7%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(51,214,166,.22), rgba(80,119,255,.12) 48%, transparent 70%);
    filter: blur(13px);
    transform: scale(1.12);
}
.school-logo-frame {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: 50%;
}
.school-logo {
    position: relative;
    z-index: 2;
    width: 88%;
    height: 88%;
    object-fit: contain;
    opacity: 0;
    transform: scale(.98);
    filter: drop-shadow(0 20px 34px rgba(0,0,0,.24));
    transition: opacity .2s ease, transform .25s ease;
}
.school-logo.is-ready {
    opacity: 1;
    transform: scale(1);
}
.school-logo-fallback {
    position: absolute;
    z-index: 1;
    width: 72%;
    height: 72%;
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-align: center;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.055);
    color: var(--clr-text);
    line-height: .9;
    box-shadow: inset 0 0 40px rgba(255,255,255,.035);
}
.school-logo-fallback strong {
    font-size: clamp(28px, 3vw, 42px);
    letter-spacing: .08em;
}
.school-logo-fallback span {
    margin-top: 6px;
    font-size: clamp(64px, 7vw, 92px);
    font-weight: 850;
}
.school-logo-fallback.is-hidden { opacity: 0; visibility: hidden; }

.landing-brand-copy {
    position: relative;
    z-index: 2;
    text-align: center;
}
.landing-school-name {
    color: var(--clr-accent);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .18em;
    margin-bottom: 12px;
}
.landing-brand-copy h1 {
    margin: 0;
    font-size: clamp(34px, 3.4vw, 48px);
    line-height: 1.08;
    letter-spacing: -.025em;
    font-weight: 750;
}
.landing-brand-line {
    width: 76px;
    height: 4px;
    border-radius: 999px;
    margin: 21px auto 0;
    background: linear-gradient(90deg, var(--clr-accent), #6f8fff);
    box-shadow: 0 8px 22px rgba(51,214,166,.2);
}

.landing-access-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(16px, 2.2vw, 28px) 0;
}
.landing-access-heading {
    margin-bottom: 22px;
}
.landing-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--clr-accent);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
}
.landing-access-heading h2 {
    margin: 0;
    font-size: clamp(27px, 2.5vw, 36px);
    line-height: 1.12;
    font-weight: 720;
}

.modern-role-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}
.modern-role-card {
    position: relative;
    min-height: 132px;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 16px;
    padding: 22px 22px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.15);
    background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.055));
    box-shadow: 0 18px 35px -26px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.055);
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.modern-role-card::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -68px;
    top: -68px;
    border-radius: 50%;
    background: rgba(51,214,166,.10);
    transition: transform .24s ease, background .24s ease;
}
.modern-role-card:hover,
.modern-role-card:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(51,214,166,.52);
    background: linear-gradient(145deg, rgba(255,255,255,.135), rgba(255,255,255,.07));
    box-shadow: 0 22px 42px -28px rgba(0,0,0,.82), 0 0 0 3px rgba(51,214,166,.06);
    outline: none;
}
.modern-role-card:hover::after,
.modern-role-card:focus-visible::after {
    transform: scale(1.2);
    background: rgba(51,214,166,.16);
}
.modern-role-icon {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    color: #8ef0d0;
    background: rgba(51,214,166,.105);
    border: 1px solid rgba(51,214,166,.20);
}
.modern-role-icon svg {
    width: 29px;
    height: 29px;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.modern-role-label {
    position: relative;
    z-index: 1;
    font-size: clamp(20px, 1.55vw, 24px);
    font-weight: 760;
    letter-spacing: -.01em;
}
.modern-role-arrow {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--clr-text-dim);
    background: rgba(255,255,255,.055);
    transition: transform .18s ease, color .18s ease, background .18s ease;
}
.modern-role-card:hover .modern-role-arrow,
.modern-role-card:focus-visible .modern-role-arrow {
    transform: translateX(3px);
    color: #071f19;
    background: var(--clr-accent);
}
.modern-role-card-admin {
    grid-column: 1 / -1;
}
.modern-role-card-admin .modern-role-icon {
    color: #aab9ff;
    background: rgba(111,143,255,.105);
    border-color: rgba(111,143,255,.22);
}
.modern-role-card-admin::after {
    background: rgba(111,143,255,.11);
}

html[data-theme="light"] .landing-brand-panel::before {
    border-color: rgba(97,112,134,.16);
    background: linear-gradient(145deg, rgba(255,255,255,.80), rgba(255,255,255,.42));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}
html[data-theme="light"] .school-logo-fallback {
    background: rgba(255,255,255,.52);
    border-color: rgba(97,112,134,.16);
}
html[data-theme="light"] .modern-role-card {
    background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(244,247,250,.78));
    border-color: #c8d2de;
    box-shadow: 0 18px 34px -27px rgba(48,62,83,.45), inset 0 1px 0 rgba(255,255,255,.95);
}
html[data-theme="light"] .modern-role-card:hover,
html[data-theme="light"] .modern-role-card:focus-visible {
    border-color: rgba(28,151,118,.58);
    background: #fbfcfa;
}
html[data-theme="light"] .modern-role-icon {
    color: #14785e;
    background: rgba(31,163,127,.10);
    border-color: rgba(31,163,127,.20);
}
html[data-theme="light"] .modern-role-card-admin .modern-role-icon {
    color: #4f63b5;
    background: rgba(79,99,181,.08);
    border-color: rgba(79,99,181,.18);
}
html[data-theme="light"] .modern-role-arrow {
    color: #607086;
    background: #edf1f4;
}
html[data-theme="light"] .landing-school-name,
html[data-theme="light"] .landing-eyebrow {
    color: #13795e !important;
}

@media (min-width: 901px) and (max-height: 760px) {
    .landing-modern {
        padding-top: 18px;
        padding-bottom: 18px;
    }
    .landing-brand-panel,
    .landing-access-panel {
        min-height: calc(100vh - 36px);
    }
    .school-logo-stage {
        width: min(260px, 66%);
        margin-top: 36px;
        margin-bottom: 14px;
    }
    .landing-brand-copy h1 {
        font-size: clamp(31px, 3vw, 41px);
    }
    .landing-brand-line { margin-top: 15px; }
    .landing-access-heading { margin-bottom: 15px; }
    .landing-access-heading h2 { font-size: clamp(25px, 2.3vw, 32px); }
    .modern-role-grid { gap: 12px; }
    .modern-role-card {
        min-height: 112px;
        padding: 16px 18px;
        grid-template-columns: 50px minmax(0, 1fr) 28px;
        gap: 13px;
        border-radius: 19px;
    }
    .modern-role-icon {
        width: 50px;
        height: 50px;
        border-radius: 15px;
    }
    .modern-role-icon svg { width: 26px; height: 26px; }
    .modern-role-label { font-size: 20px; }
}

@media (max-width: 980px) {
    .landing-modern {
        padding: 28px 22px 54px;
        overflow: visible;
    }
    .landing-modern-shell {
        grid-template-columns: 1fr;
        max-width: 760px;
        gap: 24px;
    }
    .landing-brand-panel,
    .landing-access-panel {
        min-height: auto;
    }
    .landing-brand-panel {
        padding: 34px 26px 30px;
    }
    .landing-brand-topline {
        position: static;
        display: flex;
        justify-content: center;
        margin-bottom: 8px;
    }
    .school-logo-stage {
        width: min(230px, 55vw);
        margin: 6px auto 12px;
    }
    .landing-brand-copy h1 br { display: none; }
    .landing-access-panel { padding: 6px 0 0; }
    .landing-access-heading { text-align: center; }
}

@media (max-width: 620px) {
    .landing-modern { padding: 20px 14px 42px; }
    .landing-brand-panel {
        padding: 26px 18px 24px;
        border-radius: 26px;
    }
    .landing-brand-panel::before { border-radius: 26px; }
    .school-logo-stage { width: min(190px, 57vw); }
    .landing-school-name { font-size: 12px; }
    .landing-brand-copy h1 {
        font-size: clamp(28px, 8vw, 36px);
        line-height: 1.1;
    }
    .landing-access-heading h2 { font-size: 26px; }
    .modern-role-grid { grid-template-columns: 1fr; gap: 11px; }
    .modern-role-card,
    .modern-role-card-admin {
        grid-column: 1;
        min-height: 94px;
        padding: 15px 16px;
        grid-template-columns: 48px minmax(0,1fr) 28px;
        gap: 13px;
        border-radius: 18px;
    }
    .modern-role-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }
    .modern-role-icon svg { width: 25px; height: 25px; }
    .modern-role-label { font-size: 20px; }
}


/* =====================================================================
   v1.3.70 — Landing seimbang: brand kiri = tinggi stack 5 role kanan
   ===================================================================== */
@media (min-width: 981px) {
    .landing-modern {
        padding-top: clamp(20px, 3vh, 32px);
        padding-bottom: clamp(20px, 3vh, 32px);
    }

    .landing-modern-shell {
        grid-template-columns: minmax(360px, .95fr) minmax(430px, 1.05fr);
        gap: clamp(28px, 3.8vw, 54px);
        align-items: stretch;
    }

    .landing-brand-panel,
    .landing-access-panel {
        min-height: min(650px, calc(100vh - 48px));
        height: min(650px, calc(100vh - 48px));
    }

    .landing-brand-panel {
        padding: clamp(22px, 2.5vw, 34px);
    }

    .landing-access-panel {
        padding: 0;
    }

    .modern-role-grid {
        height: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, minmax(0, 1fr));
        gap: 12px;
    }

    .modern-role-card,
    .modern-role-card-admin {
        grid-column: 1;
        min-height: 0;
        height: 100%;
        padding: 16px 20px;
        grid-template-columns: 52px minmax(0, 1fr) 30px;
        gap: 15px;
        border-radius: 20px;
    }

    .modern-role-icon {
        width: 52px;
        height: 52px;
        border-radius: 15px;
    }

    .modern-role-icon svg {
        width: 27px;
        height: 27px;
    }

    .modern-role-label {
        font-size: clamp(20px, 1.45vw, 23px);
    }

    .school-logo-stage {
        width: min(285px, 70%);
        margin-top: 34px;
        margin-bottom: 16px;
    }

    .landing-brand-copy h1 {
        font-size: clamp(32px, 3vw, 43px);
    }
}

@media (min-width: 981px) and (max-height: 760px) {
    .landing-brand-panel,
    .landing-access-panel {
        min-height: calc(100vh - 36px);
        height: calc(100vh - 36px);
    }

    .modern-role-grid {
        gap: 10px;
    }

    .modern-role-card,
    .modern-role-card-admin {
        padding: 12px 17px;
        grid-template-columns: 46px minmax(0, 1fr) 28px;
        border-radius: 17px;
    }

    .modern-role-icon {
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    .modern-role-icon svg {
        width: 24px;
        height: 24px;
    }

    .modern-role-label {
        font-size: 19px;
    }

    .school-logo-stage {
        width: min(235px, 62%);
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .landing-school-name {
        margin-bottom: 8px;
    }

    .landing-brand-copy h1 {
        font-size: clamp(29px, 2.7vw, 38px);
    }

    .landing-brand-line {
        margin-top: 12px;
    }
}

/* =====================================================================
   v1.3.71 — Landing lebih proporsional, tidak memenuhi satu layar
   ===================================================================== */
@media (min-width: 981px) {
    .landing-modern {
        min-height: 100vh;
        padding: clamp(42px, 7vh, 72px) clamp(28px, 4vw, 58px);
        align-items: center;
        overflow: auto;
    }

    .landing-modern-shell {
        width: min(1160px, 100%);
        grid-template-columns: minmax(350px, .92fr) minmax(430px, 1.08fr);
        gap: clamp(28px, 3vw, 40px);
        align-items: stretch;
    }

    .landing-brand-panel,
    .landing-access-panel {
        min-height: 0;
        height: auto;
    }

    .landing-brand-panel {
        padding: 26px 30px 28px;
        justify-content: center;
    }

    .landing-brand-panel::before {
        border-radius: 28px;
    }

    .landing-brand-topline {
        top: 22px;
        left: 26px;
    }

    .landing-brand-topline .status-badge {
        padding: 6px 12px;
        font-size: 12.5px;
    }

    .school-logo-stage {
        width: min(220px, 58%);
        margin: 38px auto 12px;
    }

    .landing-school-name {
        font-size: 13px;
        margin-bottom: 9px;
    }

    .landing-brand-copy h1 {
        font-size: clamp(31px, 2.7vw, 38px);
        line-height: 1.08;
    }

    .landing-brand-line {
        width: 68px;
        height: 3px;
        margin-top: 15px;
    }

    .landing-access-panel {
        padding: 0;
        justify-content: center;
    }

    .modern-role-grid {
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 11px;
    }

    .modern-role-card,
    .modern-role-card-admin {
        grid-column: 1;
        min-height: 90px;
        height: auto;
        padding: 14px 18px;
        grid-template-columns: 48px minmax(0, 1fr) 28px;
        gap: 14px;
        border-radius: 18px;
    }

    .modern-role-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .modern-role-icon svg {
        width: 25px;
        height: 25px;
    }

    .modern-role-label {
        font-size: clamp(19px, 1.35vw, 21px);
    }

    .modern-role-arrow {
        width: 28px;
        height: 28px;
    }
}

@media (min-width: 981px) and (max-height: 760px) {
    .landing-modern {
        padding-top: 28px;
        padding-bottom: 28px;
    }

    .landing-brand-panel,
    .landing-access-panel {
        min-height: 0;
        height: auto;
    }

    .modern-role-grid {
        gap: 9px;
    }

    .modern-role-card,
    .modern-role-card-admin {
        min-height: 82px;
        padding: 11px 16px;
        grid-template-columns: 44px minmax(0, 1fr) 26px;
        border-radius: 16px;
    }

    .modern-role-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .modern-role-icon svg {
        width: 23px;
        height: 23px;
    }

    .modern-role-label {
        font-size: 18px;
    }

    .school-logo-stage {
        width: min(190px, 54%);
        margin-top: 34px;
        margin-bottom: 8px;
    }

    .landing-brand-copy h1 {
        font-size: clamp(28px, 2.4vw, 34px);
    }
}

/* =====================================================================
   v1.3.72 — Card akses kanan lebih pendek + komposisi dipusatkan
   ===================================================================== */
@media (min-width: 981px) {
    .landing-modern {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .landing-modern-shell {
        width: min(1000px, 100%);
        margin-inline: auto;
        grid-template-columns: minmax(440px, 560px) minmax(300px, 360px);
        justify-content: center;
        gap: clamp(26px, 2.4vw, 34px);
        align-items: stretch;
    }

    .landing-brand-panel,
    .landing-access-panel {
        width: 100%;
    }

    .modern-role-grid {
        width: 100%;
    }

    .modern-role-card,
    .modern-role-card-admin {
        width: 100%;
    }
}

@media (min-width: 981px) and (max-width: 1120px) {
    .landing-modern-shell {
        width: min(920px, 100%);
        grid-template-columns: minmax(400px, 520px) minmax(285px, 340px);
        gap: 24px;
    }
}

/* =====================================================================
   v1.3.73 — Landing: background lebih modern + warna per role + brand simetris
   ===================================================================== */
.landing-modern {
    background:
        radial-gradient(circle at 14% 18%, rgba(34, 197, 190, .16) 0, rgba(34, 197, 190, 0) 31%),
        radial-gradient(circle at 86% 22%, rgba(99, 102, 241, .18) 0, rgba(99, 102, 241, 0) 34%),
        radial-gradient(circle at 72% 84%, rgba(168, 85, 247, .10) 0, rgba(168, 85, 247, 0) 31%),
        linear-gradient(135deg, #0d1737 0%, #14275b 52%, #101b43 100%);
}
.landing-modern::before {
    width: 680px;
    height: 680px;
    left: -280px;
    top: -300px;
    background: radial-gradient(circle, rgba(45, 212, 191, .15) 0%, rgba(45, 212, 191, 0) 68%);
    filter: blur(8px);
}
.landing-modern::after {
    width: 720px;
    height: 720px;
    right: -310px;
    bottom: -340px;
    background: radial-gradient(circle, rgba(99, 102, 241, .17) 0%, rgba(99, 102, 241, 0) 68%);
    filter: blur(10px);
}

.landing-brand-panel::before {
    background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        radial-gradient(circle at 50% 48%, rgba(67, 215, 191, .055), transparent 52%);
    border-color: rgba(255,255,255,.13);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 28px 60px -48px rgba(0,0,0,.92);
}

/* Judul sekolah dan judul sistem sengaja dibuat identik agar logo berada di pusat komposisi. */
.landing-brand-copy {
    width: 100%;
}
.landing-brand-copy-top,
.landing-brand-copy-bottom {
    position: relative;
    z-index: 3;
    text-align: center;
}
.landing-brand-title,
.landing-brand-copy h1.landing-brand-title,
.landing-school-name.landing-brand-title {
    margin: 0;
    color: var(--clr-text);
    font-family: inherit;
    font-size: clamp(29px, 2.45vw, 36px);
    line-height: 1.08;
    font-weight: 760;
    letter-spacing: -.025em;
}
.landing-school-name.landing-brand-title {
    margin: 0;
}
.landing-brand-copy-top {
    margin-bottom: 12px;
}
.landing-brand-copy-bottom {
    margin-top: 10px;
}
.school-logo-stage {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}
.landing-brand-line,
.landing-brand-topline {
    display: none !important;
}

/* Warna tiap role: tetap lembut agar teks terbaca, tetapi role mudah dibedakan. */
.modern-role-card {
    --role-rgb: 51, 214, 166;
    --role-accent: #72e7c8;
    background:
        linear-gradient(110deg, rgba(var(--role-rgb), .20) 0%, rgba(var(--role-rgb), .105) 42%, rgba(255,255,255,.055) 100%);
    border-color: rgba(var(--role-rgb), .32);
    box-shadow:
        0 20px 38px -30px rgba(0,0,0,.88),
        inset 0 1px 0 rgba(255,255,255,.065);
}
.modern-role-card::after {
    background: rgba(var(--role-rgb), .18);
}
.modern-role-card .modern-role-icon {
    color: var(--role-accent);
    background: rgba(var(--role-rgb), .16);
    border-color: rgba(var(--role-rgb), .34);
}
.modern-role-card:hover,
.modern-role-card:focus-visible {
    border-color: rgba(var(--role-rgb), .58);
    background:
        linear-gradient(110deg, rgba(var(--role-rgb), .27) 0%, rgba(var(--role-rgb), .14) 46%, rgba(255,255,255,.075) 100%);
    box-shadow:
        0 24px 44px -31px rgba(0,0,0,.90),
        0 0 0 3px rgba(var(--role-rgb), .07),
        inset 0 1px 0 rgba(255,255,255,.08);
}
.modern-role-card:hover::after,
.modern-role-card:focus-visible::after {
    background: rgba(var(--role-rgb), .27);
}
.modern-role-card:hover .modern-role-arrow,
.modern-role-card:focus-visible .modern-role-arrow {
    color: #07151f;
    background: var(--role-accent);
}

.role-siswa {
    --role-rgb: 34, 211, 238;
    --role-accent: #78e9f8;
}
.role-petugas {
    --role-rgb: 245, 158, 11;
    --role-accent: #ffd27a;
}
.role-sekretaris {
    --role-rgb: 168, 85, 247;
    --role-accent: #d6adff;
}
.role-staff {
    --role-rgb: 34, 197, 94;
    --role-accent: #8ee9aa;
}
.role-admin,
.modern-role-card-admin.role-admin {
    --role-rgb: 99, 102, 241;
    --role-accent: #b0b8ff;
}

html[data-theme="light"] .landing-modern {
    background:
        radial-gradient(circle at 14% 18%, rgba(20, 184, 166, .11) 0, rgba(20, 184, 166, 0) 32%),
        radial-gradient(circle at 86% 22%, rgba(99, 102, 241, .10) 0, rgba(99, 102, 241, 0) 35%),
        linear-gradient(135deg, #edf5f5 0%, #eef2fb 54%, #f5f3fb 100%);
}
html[data-theme="light"] .landing-brand-panel::before {
    background:
        linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.52)),
        radial-gradient(circle at 50% 48%, rgba(20, 184, 166, .05), transparent 52%);
    border-color: rgba(98,112,134,.18);
}
html[data-theme="light"] .landing-brand-title,
html[data-theme="light"] .landing-brand-copy h1.landing-brand-title,
html[data-theme="light"] .landing-school-name.landing-brand-title {
    color: #17283f !important;
}
html[data-theme="light"] .modern-role-card {
    background:
        linear-gradient(110deg, rgba(var(--role-rgb), .16) 0%, rgba(var(--role-rgb), .085) 45%, rgba(255,255,255,.84) 100%);
    border-color: rgba(var(--role-rgb), .30);
    box-shadow: 0 20px 38px -31px rgba(48,62,83,.40), inset 0 1px 0 rgba(255,255,255,.92);
}
html[data-theme="light"] .modern-role-card:hover,
html[data-theme="light"] .modern-role-card:focus-visible {
    border-color: rgba(var(--role-rgb), .48);
    background:
        linear-gradient(110deg, rgba(var(--role-rgb), .21) 0%, rgba(var(--role-rgb), .11) 45%, rgba(255,255,255,.92) 100%);
}
html[data-theme="light"] .modern-role-card .modern-role-icon {
    color: color-mix(in srgb, var(--role-accent), #17283f 45%);
    background: rgba(var(--role-rgb), .12);
    border-color: rgba(var(--role-rgb), .26);
}

@media (min-width: 981px) {
    .landing-brand-panel {
        justify-content: center;
        gap: 0;
    }
    .landing-brand-copy-top {
        margin-top: 2px;
        margin-bottom: 9px;
    }
    .landing-brand-copy-bottom {
        margin-top: 9px;
    }
}

@media (max-width: 980px) {
    .landing-brand-copy-top {
        margin-bottom: 8px;
    }
    .landing-brand-copy-bottom {
        margin-top: 8px;
    }
    .landing-brand-title,
    .landing-brand-copy h1.landing-brand-title,
    .landing-school-name.landing-brand-title {
        font-size: clamp(25px, 6vw, 34px);
    }
}

/* =====================================================================
   v1.3.74 — Landing mengikuti opsi visual Nunito Sans
   Catatan: logo sekolah TIDAK diubah; hanya layout/typography/background.
   ===================================================================== */
.landing-modern {
    --landing-font: "Nunito Sans", "Segoe UI", Arial, sans-serif;
    font-family: var(--landing-font);
    background:
        radial-gradient(ellipse at 4% 4%, rgba(53, 81, 235, .42) 0 8%, rgba(53, 81, 235, 0) 23%),
        radial-gradient(ellipse at 100% 91%, rgba(117, 62, 242, .38) 0 10%, rgba(117, 62, 242, 0) 30%),
        radial-gradient(circle at 9% 30%, rgba(83, 86, 255, .10) 0 2.8%, transparent 3.2%),
        radial-gradient(circle at 89% 32%, rgba(51, 121, 255, .17) 0 1.2%, transparent 1.8%),
        linear-gradient(140deg, #071a45 0%, #09204f 45%, #0d1d4b 68%, #141f5e 100%);
    isolation: isolate;
}
.landing-modern::before,
.landing-modern::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
}
.landing-modern::before {
    width: 460px;
    height: 460px;
    left: -280px;
    bottom: -250px;
    background: radial-gradient(circle at 60% 40%, rgba(13, 83, 180, .58), rgba(13, 83, 180, 0) 70%);
    box-shadow: 560px -635px 0 -390px rgba(31, 90, 220, .26);
    filter: none;
}
.landing-modern::after {
    width: 520px;
    height: 180px;
    right: -90px;
    bottom: -48px;
    border-radius: 58% 42% 0 0 / 65% 48% 0 0;
    background: linear-gradient(132deg, rgba(12, 74, 208, .10), rgba(91, 75, 255, .26) 48%, rgba(163, 55, 235, .48));
    transform: rotate(-12deg);
    filter: blur(2px);
}

@media (min-width: 981px) {
    .landing-modern {
        min-height: 100vh;
        padding: clamp(34px, 5.2vh, 56px) 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: auto;
    }

    .landing-modern-shell {
        width: min(840px, calc(100vw - 56px));
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(390px, 430px) minmax(285px, 320px);
        gap: 28px;
        align-items: center;
        justify-content: center;
    }

    .landing-brand-panel {
        min-height: 0;
        height: 424px;
        padding: 24px 32px 26px;
        border-radius: 32px;
        justify-content: center;
        overflow: hidden;
        background:
            linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.028) 58%),
            radial-gradient(circle at 50% 48%, rgba(48, 138, 255, .12), transparent 48%);
        border: 1px solid rgba(170, 206, 255, .22);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.11),
            0 28px 58px -34px rgba(0,0,0,.72),
            0 0 30px rgba(46, 141, 255, .07);
    }
    .landing-brand-panel::before {
        inset: 0;
        border-radius: inherit;
        background:
            linear-gradient(150deg, rgba(255,255,255,.065), transparent 34%),
            linear-gradient(180deg, transparent 72%, rgba(17, 104, 255, .035));
        border: 0;
        box-shadow: none;
    }
    .landing-brand-panel::after {
        content: "";
        position: absolute;
        inset: auto 15% -1px 15%;
        height: 2px;
        border-radius: 999px;
        background: linear-gradient(90deg, transparent, rgba(75, 175, 255, .72), transparent);
        box-shadow: 0 0 16px rgba(75, 175, 255, .42);
        pointer-events: none;
    }

    .landing-brand-copy-top {
        margin: 0 0 10px;
    }
    .landing-school-name.landing-brand-title {
        font-family: var(--landing-font);
        font-size: 20px;
        line-height: 1.15;
        font-weight: 800;
        letter-spacing: .025em;
        color: #f7faff;
    }

    .school-logo-stage {
        width: 188px !important;
        max-width: 48%;
        margin: 0 auto 10px !important;
    }
    .school-logo-frame {
        filter: drop-shadow(0 12px 22px rgba(0,0,0,.20));
    }
    .school-logo-halo {
        width: 122%;
        height: 122%;
        background: radial-gradient(circle, rgba(62, 148, 255, .15), rgba(62, 148, 255, 0) 67%);
    }

    .landing-brand-copy-bottom {
        margin-top: 0;
    }
    .landing-brand-copy h1.landing-brand-title {
        font-family: var(--landing-font);
        font-size: 36px;
        line-height: 1.12;
        font-weight: 800;
        letter-spacing: -.025em;
        color: #f8fbff;
        text-shadow: 0 2px 18px rgba(0,0,0,.10);
    }

    .landing-access-panel {
        width: 100%;
        padding: 0;
        min-height: 0;
        justify-content: center;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .modern-role-grid {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 11px;
    }
    .modern-role-card,
    .modern-role-card-admin {
        min-height: 0;
        height: 76px;
        padding: 8px 13px 8px 9px;
        grid-template-columns: 54px minmax(0, 1fr) 24px;
        gap: 12px;
        border-radius: 16px;
        background:
            linear-gradient(100deg, rgba(var(--role-rgb), .17) 0%, rgba(24, 52, 102, .72) 27%, rgba(30, 48, 98, .82) 100%);
        border: 1px solid rgba(var(--role-rgb), .55);
        box-shadow:
            0 16px 24px -20px rgba(0,0,0,.72),
            inset 0 1px 0 rgba(255,255,255,.08);
        overflow: hidden;
        position: relative;
        transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .modern-role-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 12px;
        bottom: 12px;
        width: 3px;
        border-radius: 0 999px 999px 0;
        background: var(--role-accent);
        box-shadow: 0 0 12px rgba(var(--role-rgb), .52);
    }
    .modern-role-card::after {
        content: "";
        position: absolute;
        right: -24px;
        top: -28px;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: rgba(var(--role-rgb), .10);
        pointer-events: none;
    }
    .modern-role-card:hover,
    .modern-role-card:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(var(--role-rgb), .82);
        background:
            linear-gradient(100deg, rgba(var(--role-rgb), .23) 0%, rgba(26, 57, 111, .80) 28%, rgba(34, 51, 105, .88) 100%);
        box-shadow:
            0 20px 32px -21px rgba(0,0,0,.78),
            0 0 0 3px rgba(var(--role-rgb), .06),
            inset 0 1px 0 rgba(255,255,255,.10);
    }

    .modern-role-icon {
        width: 54px;
        height: 54px;
        border-radius: 13px;
        color: #fff;
        background:
            linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.03)),
            rgba(var(--role-rgb), .62);
        border: 1px solid rgba(var(--role-rgb), .86);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.22),
            0 8px 20px -12px rgba(var(--role-rgb), .95);
    }
    .modern-role-icon svg {
        width: 28px;
        height: 28px;
        stroke: currentColor;
        stroke-width: 1.8;
    }
    .modern-role-label {
        font-family: var(--landing-font);
        font-size: 20px;
        line-height: 1;
        font-weight: 700;
        letter-spacing: -.01em;
        color: #f8fbff;
    }
    .modern-role-arrow {
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        background: transparent;
        color: var(--role-accent);
        font-family: Arial, sans-serif;
        font-size: 0;
        font-weight: 700;
    }
    .modern-role-arrow::before {
        content: "›";
        font-size: 31px;
        line-height: 1;
        transform: translateY(-1px);
    }
    .modern-role-card:hover .modern-role-arrow,
    .modern-role-card:focus-visible .modern-role-arrow {
        color: #fff;
        background: transparent;
    }
}

@media (min-width: 981px) and (max-height: 700px) {
    .landing-modern {
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .landing-modern-shell {
        width: min(800px, calc(100vw - 48px));
        grid-template-columns: minmax(370px, 410px) minmax(275px, 305px);
        gap: 24px;
    }
    .landing-brand-panel {
        height: 386px;
        padding: 20px 28px 22px;
    }
    .landing-school-name.landing-brand-title {
        font-size: 18px;
    }
    .school-logo-stage {
        width: 154px !important;
        margin-bottom: 8px !important;
    }
    .landing-brand-copy h1.landing-brand-title {
        font-size: 32px;
    }
    .modern-role-grid {
        gap: 9px;
    }
    .modern-role-card,
    .modern-role-card-admin {
        height: 70px;
        grid-template-columns: 48px minmax(0, 1fr) 22px;
    }
    .modern-role-icon {
        width: 48px;
        height: 48px;
    }
    .modern-role-icon svg {
        width: 25px;
        height: 25px;
    }
    .modern-role-label {
        font-size: 18px;
    }
}

@media (max-width: 980px) {
    .landing-modern {
        font-family: var(--landing-font);
    }
    .landing-brand-panel {
        background:
            linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
            radial-gradient(circle at 50% 48%, rgba(48, 138, 255, .10), transparent 48%);
    }
    .landing-school-name.landing-brand-title {
        font-family: var(--landing-font);
        font-weight: 800;
        letter-spacing: .02em;
    }
    .landing-brand-copy h1.landing-brand-title {
        font-family: var(--landing-font);
        font-weight: 800;
        letter-spacing: -.02em;
    }
    .modern-role-label {
        font-family: var(--landing-font);
        font-weight: 700;
    }
    .modern-role-card {
        border-color: rgba(var(--role-rgb), .48);
    }
}

/* Light mode keeps the same layout but softens the background. */
html[data-theme="light"] .landing-modern {
    background:
        radial-gradient(ellipse at 4% 4%, rgba(71, 116, 232, .17) 0 8%, transparent 24%),
        radial-gradient(ellipse at 100% 91%, rgba(133, 78, 238, .14) 0 10%, transparent 30%),
        linear-gradient(140deg, #eaf2ff 0%, #edf3fb 49%, #f1efff 100%);
}
html[data-theme="light"] .landing-brand-panel {
    background:
        linear-gradient(145deg, rgba(255,255,255,.91), rgba(255,255,255,.64)),
        radial-gradient(circle at 50% 48%, rgba(48, 138, 255, .08), transparent 48%);
    border-color: rgba(68, 104, 162, .20);
}
html[data-theme="light"] .landing-school-name.landing-brand-title,
html[data-theme="light"] .landing-brand-copy h1.landing-brand-title {
    color: #13284b !important;
}
html[data-theme="light"] .modern-role-card {
    background:
        linear-gradient(100deg, rgba(var(--role-rgb), .14) 0%, rgba(255,255,255,.88) 36%, rgba(245,248,255,.93) 100%);
    border-color: rgba(var(--role-rgb), .42);
}
html[data-theme="light"] .modern-role-label {
    color: #172c4c;
}


/* ================================================================
   v1.3.76 — Mobile UX layer
   Desktop tetap mengikuti desain sebelumnya. Aturan di bawah hanya
   aktif pada layar HP / <= 720 px.
   ================================================================ */
.smanda-mobile-appbar,
.smanda-mobile-sidebar-overlay,
.smanda-mobile-drawer-close,
.smanda-mobile-table-hint {
    display: none;
}

@media (max-width: 720px) {
    /* ---- Navigasi: sidebar desktop menjadi drawer ---- */
    body.smanda-mobile-nav-ready .app-shell {
        display: block;
        min-height: 100vh;
    }
    body.smanda-mobile-nav-ready .sidebar {
        position: fixed !important;
        z-index: 10030;
        inset: 0 auto 0 0;
        width: min(320px, 86vw) !important;
        height: 100dvh;
        max-height: 100dvh;
        padding: 24px 16px 28px !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-right: 1px solid var(--clr-glass-border) !important;
        border-bottom: 0 !important;
        background: rgba(8, 23, 51, .985);
        box-shadow: 22px 0 52px rgba(0,0,0,.34);
        transform: translateX(-104%);
        transition: transform .22s ease;
        -webkit-overflow-scrolling: touch;
    }
    html[data-theme="light"] body.smanda-mobile-nav-ready .sidebar {
        background: rgba(246, 249, 253, .992) !important;
        box-shadow: 22px 0 52px rgba(39, 57, 82, .18);
    }
    body.smanda-mobile-nav-ready .sidebar.smanda-mobile-drawer-open {
        transform: translateX(0);
    }
    body.smanda-mobile-nav-open {
        overflow: hidden;
        touch-action: none;
    }
    body.smanda-mobile-nav-ready .sidebar .brand {
        display: block;
        margin: 4px 48px 22px 0;
        font-size: 16px;
        line-height: 1.4;
    }
    body.smanda-mobile-nav-ready .sidebar nav a,
    body.smanda-mobile-nav-ready .sidebar .sidebar-menu-group summary {
        min-height: 46px;
        padding: 11px 14px;
        display: flex;
        align-items: center;
        font-size: 15.5px;
        line-height: 1.35;
    }
    body.smanda-mobile-nav-ready .sidebar .sidebar-menu-group-links a {
        min-height: 44px;
        padding-top: 9px;
        padding-bottom: 9px;
    }
    .smanda-mobile-appbar {
        position: fixed;
        z-index: 10010;
        top: 0;
        left: 0;
        right: 0;
        height: 58px;
        display: flex;
        align-items: center;
        gap: 11px;
        padding: max(7px, env(safe-area-inset-top)) 14px 7px;
        background: rgba(8, 24, 53, .93);
        border-bottom: 1px solid rgba(145, 171, 219, .20);
        box-shadow: 0 8px 24px rgba(0,0,0,.16);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
    html[data-theme="light"] .smanda-mobile-appbar {
        background: rgba(247, 249, 252, .95);
        border-bottom-color: #c7d1dc;
        box-shadow: 0 8px 24px rgba(67, 80, 100, .12);
    }
    .smanda-mobile-menu-button,
    .smanda-mobile-drawer-close {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        border-radius: 12px;
        border: 1px solid rgba(147, 169, 215, .30);
        background: rgba(255,255,255,.06);
        color: var(--clr-text);
        font: 800 22px/1 var(--font-body);
        cursor: pointer;
    }
    html[data-theme="light"] .smanda-mobile-menu-button,
    html[data-theme="light"] .smanda-mobile-drawer-close {
        background: #fff;
        border-color: #c4cfda;
        color: #203049;
    }
    .smanda-mobile-appbar-title {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: var(--clr-text);
        font-size: 16px;
        font-weight: 800;
        letter-spacing: -.01em;
    }
    .smanda-mobile-drawer-close {
        display: grid;
        place-items: center;
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 2;
        font-size: 27px;
    }
    .smanda-mobile-sidebar-overlay {
        position: fixed;
        z-index: 10020;
        inset: 0;
        display: block;
        background: rgba(1, 7, 19, .58);
        opacity: 0;
        visibility: hidden;
        transition: opacity .20s ease, visibility .20s ease;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .smanda-mobile-sidebar-overlay.is-visible {
        opacity: 1;
        visibility: visible;
    }
    body.smanda-mobile-nav-ready .main {
        width: 100%;
        padding: 76px 14px 28px !important;
        overflow-x: hidden;
    }

    /* ---- Topbar tidak lagi saling menekan di layar sempit ---- */
    .topbar {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 18px;
    }
    .topbar h1 {
        font-size: 22px !important;
        line-height: 1.2;
    }
    .topbar .who {
        display: block;
        max-width: 100%;
        font-size: 13.5px !important;
        line-height: 1.45;
        white-space: normal;
    }

    /* ---- Cegah auto-zoom iPhone dan perbesar target sentuh ---- */
    input,
    select,
    textarea,
    .form-select,
    .field select,
    .field input,
    .field textarea {
        font-size: 16px !important;
    }
    input[type="checkbox"],
    input[type="radio"] {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
    }
    .btn,
    a.btn,
    button:not(.modal-x):not(.smanda-mobile-menu-button):not(.smanda-mobile-drawer-close),
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
    }

    /* ---- Tipografi minimum untuk informasi yang memang perlu dibaca ---- */
    .card-description,
    .attendance-toolbar,
    .attendance-legend-note,
    .alert,
    small,
    .muted,
    .hint,
    .help-text {
        font-size: 13px !important;
        line-height: 1.5;
    }
    table th,
    table td {
        font-size: 13px !important;
        line-height: 1.4;
    }
    table th {
        font-size: 13px !important;
    }

    /* ---- Tabel besar: tetap tabel, tetapi lebih mudah digeser dan dibaca ---- */
    .table-scroll,
    .crud-table-scroll,
    .student-table-scroll,
    .rk17-table-wrap,
    .la-table-wrap,
    .ah47-table-wrap,
    .rtl53-table-wrap {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
    }
    .smanda-mobile-table-hint {
        display: flex;
        align-items: center;
        gap: 7px;
        margin: 8px 0 10px;
        padding: 9px 11px;
        border: 1px solid rgba(111, 153, 226, .24);
        border-radius: 10px;
        background: rgba(44, 91, 166, .10);
        color: var(--clr-text-dim);
        font-size: 13px;
        line-height: 1.35;
    }
    .smanda-mobile-table-hint::before {
        content: "↔";
        color: var(--clr-accent);
        font-size: 18px;
        font-weight: 800;
    }
    .smanda-mobile-scroll-table table thead th {
        position: sticky;
        top: 0;
        z-index: 4;
        background: #142748;
    }
    html[data-theme="light"] .smanda-mobile-scroll-table table thead th {
        background: #e9eef5 !important;
    }
    .smanda-mobile-scroll-table .smanda-sticky-name-col {
        position: sticky;
        left: 0;
        z-index: 3;
        background: #102442 !important;
        box-shadow: 8px 0 14px -12px rgba(0,0,0,.72);
    }
    .smanda-mobile-scroll-table thead .smanda-sticky-name-col {
        z-index: 6;
        background: #142748 !important;
    }
    html[data-theme="light"] .smanda-mobile-scroll-table .smanda-sticky-name-col {
        background: #f7f9fc !important;
        box-shadow: 8px 0 14px -12px rgba(50,64,84,.42);
    }
    html[data-theme="light"] .smanda-mobile-scroll-table thead .smanda-sticky-name-col {
        background: #e9eef5 !important;
    }

    /* ---- Sekretaris: tabel siswa berubah menjadi card per siswa di HP ---- */
    .attendance-table-card:has(.secretary-table),
    .attendance-table-card:has(.secretary-postfinal-table) {
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }
    .table-scroll:has(.secretary-table),
    .table-scroll:has(.secretary-postfinal-table) {
        overflow: visible !important;
    }
    .secretary-table,
    .secretary-postfinal-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border: 0 !important;
    }
    .secretary-table thead,
    .secretary-postfinal-table thead {
        display: none !important;
    }
    .secretary-table tbody,
    .secretary-postfinal-table tbody {
        display: grid !important;
        gap: 12px;
    }
    .secretary-table tbody tr,
    .secretary-postfinal-table tbody tr {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 14px;
        padding: 13px 14px;
        border: 1px solid rgba(143, 169, 221, .22);
        border-radius: 14px;
        background: rgba(255,255,255,.045);
        box-shadow: 0 12px 28px -24px rgba(0,0,0,.70);
    }
    html[data-theme="light"] .secretary-table tbody tr,
    html[data-theme="light"] .secretary-postfinal-table tbody tr {
        background: #fff;
        border-color: #c9d3df;
        box-shadow: 0 10px 24px -22px rgba(45,58,76,.35);
    }
    .secretary-table tbody td,
    .secretary-postfinal-table tbody td {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-width: 0;
        padding: 8px 0 !important;
        border: 0 !important;
        white-space: normal !important;
        text-align: right;
    }
    .secretary-table tbody td::before,
    .secretary-postfinal-table tbody td::before {
        content: attr(data-mobile-label);
        flex: 0 0 auto;
        color: var(--clr-text-dim);
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .025em;
        text-align: left;
    }
    .secretary-table tbody td.secretary-student-name,
    .secretary-postfinal-table tbody td:nth-child(2) {
        grid-column: 1 / -1;
        display: block !important;
        padding: 2px 0 10px !important;
        border-bottom: 1px solid rgba(143,169,221,.17) !important;
        text-align: left;
    }
    .secretary-table tbody td.secretary-student-name::before,
    .secretary-postfinal-table tbody td:nth-child(2)::before {
        display: block;
        margin-bottom: 4px;
        content: "Siswa";
    }
    .secretary-table tbody td.secretary-student-name strong,
    .secretary-postfinal-table tbody td:nth-child(2) strong {
        font-size: 16px !important;
        line-height: 1.35;
    }
    .secretary-table tbody td[data-mobile-label="Detail"],
    .secretary-table tbody td[data-mobile-label="Simpan"],
    .secretary-postfinal-table tbody td[data-mobile-label="Aksi"] {
        grid-column: 1 / -1;
    }
    .secretary-table tbody td[data-mobile-label="Detail"] {
        display: block !important;
        text-align: left;
        padding-top: 10px !important;
        border-top: 1px solid rgba(143,169,221,.15) !important;
    }
    .secretary-table tbody td[data-mobile-label="Detail"]::before {
        display: block;
        margin-bottom: 8px;
    }
    .secretary-table .secretary-detail-fields,
    .secretary-table .secretary-si-fields,
    .secretary-table .secretary-source,
    .secretary-table .secretary-proof,
    .secretary-table .secretary-note {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    .secretary-table .secretary-si-fields {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }
    .secretary-table .sk47-tl-time {
        width: 100px !important;
        min-width: 100px !important;
    }
    .secretary-table .autosave-status {
        font-size: 13px !important;
    }
    .secretary-postfinal-table .btn {
        width: 100%;
    }

    /* ---- Modal dan kartu form tidak terlalu mepet tepi layar ---- */
    .secretary-modal-card,
    .modal-card {
        width: min(94vw, 560px) !important;
        max-height: calc(100dvh - 30px) !important;
        overflow-y: auto;
    }
}

@media (max-width: 420px) {
    body.smanda-mobile-nav-ready .main {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }
    .secretary-table tbody tr,
    .secretary-postfinal-table tbody tr {
        grid-template-columns: 1fr;
    }
    .secretary-table tbody td,
    .secretary-postfinal-table tbody td {
        grid-column: 1 / -1;
    }
}