/* ==========================================================================
   Generator Perangkat Ajar - Style & Print Formatting
   ========================================================================== */

body {
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Cegah halaman ikut bergeser mendatar karena tabel dokumen yang lebar.
   Tabel tetap bisa di-scroll di dalam wadahnya sendiri. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, svg, table, pre {
    max-width: 100%;
}

/* Scrollbar Kustom */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ==========================================================================
   AKSESIBILITAS
   ========================================================================== */

/* Skip link: tersembunyi sampai difokuskan (tetap bisa dipakai keyboard) */
.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    position: fixed;
    top: 12px;
    left: 12px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 10px 16px;
    overflow: visible;
    clip: auto;
    z-index: 200;
    background-color: #1d4ed8;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25);
}

/* Cincin fokus yang jelas untuk navigasi keyboard */
:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Konten utama yang difokuskan via skip link tidak boleh menampilkan outline */
#main-content:focus {
    outline: none;
}

/* Hormati preferensi pengguna yang mengurangi animasi */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   TAMPILAN KERTAS DOKUMEN (Simulasi A4)
   ========================================================================== */
.paper-document {
    background-color: #ffffff;
    width: 100%;
    max-width: 21cm;
    min-height: 29.7cm;
    margin: 0 auto;
    padding: 2.2cm 2cm;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15), 0 12px 20px -6px rgba(0, 0, 0, 0.08);
    color: #000000;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 11pt;
    line-height: 1.5;
    position: relative;
    border-radius: 2px;
}

/* Mode Edit Langsung */
.paper-document[contenteditable="true"] {
    outline: 2px dashed #3b82f6;
    outline-offset: 4px;
    cursor: text;
}
.paper-document[contenteditable="true"] *:hover {
    background-color: rgba(59, 130, 246, 0.03);
}

/* --------------------------------------------------------------------------
   Orientasi kertas pratinjau mengikuti hasil cetak:
   Kisi-kisi & Kartu Soal LANDSCAPE, Naskah Soal (dan Modul Ajar) PORTRAIT.
   Class ini dipasang oleh app.js (perbaruiOrientasiKertas()).
   -------------------------------------------------------------------------- */
.paper-document.paper-landscape {
    max-width: 29.7cm;
    min-height: 21cm;
    padding: 2cm 1.5cm;
}

/* Media soal (tabel/grafik/diagram) tidak boleh melebar keluar kotak kartu */
.paper-document .media-soal,
.paper-document .isi-soal {
    width: 100%;
    max-width: 100%;
}
.paper-document .media-soal table,
.paper-document .isi-soal table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
    border-collapse: collapse;
}
.paper-document .media-soal th,
.paper-document .media-soal td,
.paper-document .isi-soal th,
.paper-document .isi-soal td {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}
.paper-document .media-soal img,
.paper-document .isi-soal img {
    max-width: 100%;
    height: auto;
}

/* Judul Dokumen */
.paper-document h1 {
    font-size: 16pt;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 3px double #000000;
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 20px;
    color: #000000;
    line-height: 1.3;
}

.paper-document h2 {
    font-size: 13pt;
    font-weight: bold;
    text-align: center;
    border: 1.5px solid #000000;
    padding: 9px 12px;
    border-radius: 4px;
    margin-top: 25px;
    margin-bottom: 18px;
    background-color: #f8fafc;
    color: #000000;
    text-transform: uppercase;
}

.paper-document h3 {
    font-size: 12pt;
    font-weight: bold;
    border-bottom: 1px solid #000000;
    padding-bottom: 4px;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #1e3a8a;
}

.paper-document h4 {
    font-size: 11pt;
    font-weight: bold;
    margin-top: 14px;
    margin-bottom: 6px;
    color: #0f172a;
}

.paper-document p { margin-bottom: 10px; text-align: justify; }
.paper-document ul, .paper-document ol { margin-left: 24px; margin-bottom: 12px; }
.paper-document li { margin-bottom: 4px; }

/* Tabel Presisi (Web & Word) */
.paper-document table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    border: 1px solid #000000;
}

.paper-document th,
.paper-document td {
    border: 1px solid #000000;
    padding: 7px 9px;
    vertical-align: top;
    text-align: left;
    color: #000000;
    font-size: 10.5pt;
    line-height: 1.45;
    /* Cegah teks panjang (URL, kode, nama berkas) merusak lebar kolom */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Tabel bersarang (nested) tidak perlu margin bawah & garis ganda */
.paper-document td > table,
.paper-document th > table {
    margin-bottom: 0;
    border: none;
}

/* Daftar di dalam sel tabel lebih rapat agar tabel tidak melebar berlebihan */
.paper-document td > ol,
.paper-document td > ul {
    margin: 0;
    padding-left: 18px;
}

.paper-document td li {
    margin-bottom: 3px;
}

/* Sub-judul bagian (I. IDENTIFIKASI, II. DESAIN, III. LANGKAH) */
.paper-document td[colspan="3"] {
    line-height: 1.4;
}

/* Blok tanda tangan jangan pecah antar halaman */
.paper-document table tr {
    page-break-inside: avoid;
    break-inside: avoid;
}

/* Kotak Pemahaman Bermakna tidak terpotong */
.paper-document .pemahaman-bermakna-box,
.paper-document .answer-box {
    page-break-inside: avoid;
    break-inside: avoid;
}

.paper-document th {
    background-color: #e2e8f0;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    color: #000000;
}

/* Box Pemahaman Bermakna */
.paper-document .pemahaman-bermakna-box {
    background-color: #ecfccb;
    border: 1px solid #bef264;
    padding: 10px 14px;
    border-radius: 4px;
    margin: 10px 0;
}
.paper-document .pemahaman-bermakna-box strong { color: #365314; display: block; margin-bottom: 4px; }
.paper-document .pemahaman-bermakna-box em { color: #3f6212; font-style: italic; }

/* Kotak Jawaban LKPD */
.paper-document .answer-box {
    border: 1.5px dashed #64748b;
    border-radius: 4px;
    padding: 14px;
    min-height: 90px;
    color: #64748b;
    margin-top: 8px;
    background-color: #fafafa;
    font-style: italic;
    font-size: 10pt;
}

/* Tabel Tanpa Garis (Tanda Tangan & Identitas) */
.paper-document .no-border-table,
.paper-document .no-border-table th,
.paper-document .no-border-table td,
.paper-document table.no-border,
.paper-document table.no-border td,
.paper-document table.no-border th {
    border: none !important;
    border-width: 0 !important;
    padding: 4px 8px;
}

/* Blok Tanda Tangan */
.signature-section {
    width: 100%;
    margin-top: 35px;
    page-break-inside: avoid;
    break-inside: avoid;
}

/* Ikon Material */
.material-symbols-rounded {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Animasi */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Fallback bila font dokumen dimuat offline */
@media print {
    .paper-document { font-family: Arial, Helvetica, sans-serif; }
}

/* ==========================================================================
   RESPONSIF — TAMPILAN HP & TABLET
   Kertas A4 tidak bisa diperkecil sampai 100% di layar HP tanpa merusak
   keterbacaan tabel. Solusinya: di layar kecil, kertas ditampilkan sebagai
   lebar penuh dengan padding ramping, dan tabel lebar boleh di-scroll
   mendatar di dalam kartunya sendiri (bukan menggeser seluruh halaman).
   Tampilan cetak / Export PDF TIDAK terpengaruh oleh aturan di bawah ini.
   ========================================================================== */

/* Kertas: beri jarak aman di layar kecil */
@media (max-width: 1024px) {
    .paper-document {
        padding: 1.4cm 1.2cm;
        min-height: auto;
        box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.12);
    }
    .paper-document.paper-landscape {
        padding: 1.4cm 1.2cm;
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .paper-document {
        padding: 16px 14px;
        font-size: 10.5pt;
        line-height: 1.45;
        border-radius: 0;
    }
    .paper-document.paper-landscape {
        padding: 16px 14px;
        min-height: auto;
    }

    .paper-document h1 { font-size: 13pt; padding-bottom: 8px; margin-bottom: 14px; }
    .paper-document h2 { font-size: 11.5pt; padding: 7px 8px; margin-top: 18px; margin-bottom: 12px; }
    .paper-document h3 { font-size: 11pt; margin-top: 14px; }

    /* Tabel dokumen: font lebih kecil + padding rapat agar tidak meluber */
    .paper-document th,
    .paper-document td {
        padding: 5px 6px;
        font-size: 9.5pt;
        line-height: 1.4;
    }

    /* Kolom label kiri pada tabel identitas (170px) terlalu lebar di HP */
    .paper-document td[style*="width: 170px"],
    .paper-document td[style*="width: 165px"] {
        width: 40% !important;
        font-size: 9pt;
    }

    /* Tabel bersarang di dalam sel: cegah dorongan keluar */
    .paper-document td > table {
        width: 100% !important;
        table-layout: fixed;
    }

    /* Tabel no-border (identitas & tanda tangan) boleh memakai lebar otomatis */
    .paper-document td > table.no-border-table {
        table-layout: auto;
    }

    .paper-document ul,
    .paper-document ol { margin-left: 18px; }

    /* Kata panjang (mis. kode/URL) jangan sampai merusak layout */
    .paper-document td,
    .paper-document th,
    .paper-document p,
    .paper-document li { overflow-wrap: anywhere; word-break: break-word; }

    /* Blok tanda tangan: jarak tanda tangan dirapatkan */
    .signature-section { margin-top: 24px; }
}

@media (max-width: 480px) {
    .paper-document {
        padding: 12px 10px;
        font-size: 10pt;
    }

    .paper-document th,
    .paper-document td {
        padding: 4px 5px;
        font-size: 9pt;
    }

    /* Di layar sangat kecil, label identitas pindah ke atas nilainya */
    .paper-document td[style*="width: 170px"] {
        width: 38% !important;
        font-size: 8.5pt;
    }
}

/* Wadah kertas: di HP jangan pakai padding besar + jangan paksa center */
@media (max-width: 640px) {
    #result-section .p-4.md\:p-10 {
        padding: 8px !important;
    }

    /* Ubah tab menjadi scroll mendatar agar tidak berdesakan */
    #tabs-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        width: 100%;
        gap: 4px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    #tabs-container::-webkit-scrollbar { height: 4px; }
    #tabs-container > * { flex: 0 0 auto; white-space: nowrap; }

    /* Tombol aksi toolbar: ringkas di HP */
    #result-section .no-print button {
        height: 34px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 11px;
    }

    #result-section .no-print button .material-symbols-rounded {
        font-size: 16px;
    }

    /* Toolbar hasil: jangan sticky di HP agar tidak memakan layar */
    #result-section > .no-print.sticky {
        position: static !important;
    }
}

/* Tabel lebar: beri area scroll mendatar miliknya sendiri
   supaya halaman utama tidak ikut geser */
.paper-document table {
    display: table;
}

/* ==========================================================================
   KEAMANAN WARNA TEKS
   Dokumen memakai beberapa elemen berlatar gelap dengan teks putih. Saat
   dicetak / diekspor ke Word / PDF, browser & Word sering MENGHAPUS
   background-color tetapi mempertahankan warna teks, sehingga muncul teks
   putih di atas putih (tidak terbaca). Aturan berikut memastikan setiap
   elemen berlatar gelap tetap punya teks gelap + border yang jelas.
   ========================================================================== */

/* Elemen berlatar gelap: paksa teks hitam dan beri garis batas */
.paper-document [style*="color: white"],
.paper-document [style*="color:white"],
.paper-document [style*="color: #fff"],
.paper-document [style*="color:#fff"],
.paper-document [style*="color: #ffffff"],
.paper-document [style*="color:#ffffff"],
.paper-document [style*="color: #FFF"],
.paper-document [style*="color:#FFF"],
.paper-document [style*="color: #FFFFFF"],
.paper-document [style*="color:#FFFFFF"] {
    color: #000000 !important;
}

.paper-document div[style*="background-color: #0284c7"],
.paper-document div[style*="background-color:#0284c7"],
.paper-document div[style*="background-color: #1e3a8a"],
.paper-document div[style*="background-color:#1e3a8a"],
.paper-document div[style*="background-color: #1e40af"],
.paper-document div[style*="background-color:#1e40af"],
.paper-document div[style*="background-color: #0369a1"],
.paper-document div[style*="background-color:#0369a1"],
.paper-document div[style*="background-color: #0c4a6e"],
.paper-document div[style*="background-color:#0c4a6e"],
.paper-document div[style*="background-color: #0f766e"],
.paper-document div[style*="background-color:#0f766e"],
.paper-document div[style*="background-color: #1f2937"],
.paper-document div[style*="background-color:#1f2937"],
.paper-document div[style*="background-color: #0f172a"],
.paper-document div[style*="background-color:#0f172a"] {
    border: 1px solid #000000;
}

/* Kotak berlatar sangat terang: beri garis tipis agar batasnya tetap terlihat */
.paper-document .answer-box,
.paper-document .pemahaman-bermakna-box {
    border-width: 1px;
    border-style: solid;
}

/* ==========================================================================
   PRINT STYLING (A4 Standar Percetakan)
   ========================================================================== */
@media print {
    @page {
        size: A4 portrait;
        margin: 2cm 2cm 2cm 2cm;
    }

    /* Bank Soal: SEMUA dokumen A4 (konsisten dengan Modul Ajar).
       Kisi-kisi & Kartu Soal LANDSCAPE, Naskah Soal PORTRAIT.
       Chrome menghormati @page bernama + page:. */
    @page bank-landscape {
        size: A4 landscape;
        margin: 2.5cm 1.5cm 2cm 2.5cm;
    }
    @page kartu-landscape {
        size: A4 landscape;
        margin: 2.5cm 1.5cm 2cm 1.5cm;
    }
    #tab-content-kisiKisi { page: bank-landscape; }
    #tab-content-kartuSoal { page: kartu-landscape; }
    #tab-content-naskahSoal { page: auto; }

    body {
        background: #ffffff !important;
        color: #000000 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Sembunyikan elemen UI saat cetak */
    header,
    .navbar,
    #input-section,
    #loading-section,
    #sidebar,
    #sidebarOverlay,
    .no-print,
    #tabs-container,
    #toast-container,
    #editableNotice,
    dialog,
    footer {
        display: none !important;
    }

    #result-section {
        display: block !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: #ffffff !important;
        border-radius: 0 !important;
    }

    .paper-document {
        box-shadow: none !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: auto !important;
        border: none !important;
        margin: 0 !important;
    }

    /* Cetak semua dokumen dengan jeda halaman.
       Berlaku untuk Ctrl+P maupun tombol "Export PDF" (keduanya mencetak
       seluruh dokumen, bukan hanya tab aktif). */
    .tab-content {
        display: block !important;
        page-break-after: always;
        break-after: page;
    }
    .tab-content:last-child {
        page-break-after: auto;
        break-after: auto;
    }

    table { page-break-inside: auto; }
    tr { page-break-inside: avoid; page-break-after: auto; }
    thead { display: table-header-group; }

    /* Pastikan latar berwarna tetap tercetak (bukan putih polos) */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Bila printer tetap membuang latar, teks gelap + border menjamin terbaca */
    .paper-document h2,
    .paper-document th,
    .paper-document .answer-box,
    .paper-document .pemahaman-bermakna-box {
        border: 1px solid #000000 !important;
    }
}

/* ==========================================================================
   BATAS TERLIHAT (VISIBLE BOUNDARIES)
   ---------------------------------------------------------------------
   Desain awal memakai border putih di atas permukaan putih/terang. Di layar
   nyata (apalagi HP dengan kontras rendah) garis itu praktis hilang sehingga
   kartu dan kotak isian tampak tanpa batas. Blok ini memberi garis abu-abu
   tipis pada semua permukaan aplikasi, TANPA menyentuh .paper-document
   (dokumen tetap tidak berubah, termasuk saat cetak).
   ========================================================================== */

/* Kartu, panel, dan wadah permukaan kaca */
.card,
.glass,
.glass-strong,
.glass-soft {
    border-color: rgba(100, 116, 139, 0.32) !important;
}

/* Semua elemen Tailwind yang memakai garis putih pekat */
[class*="border-white"] {
    border-color: rgba(100, 116, 139, 0.32) !important;
}

/* Pemisah antar bagian (border-b / border-t) juga harus terlihat */
.border-b[class*="border-white"],
.border-t[class*="border-white"],
.border-l[class*="border-white"],
.border-r[class*="border-white"] {
    border-color: rgba(100, 116, 139, 0.34) !important;
}

/* Kotak isian: pastikan selalu bergaris, apa pun kelasnya */
.input,
.select,
.textarea {
    border: 1px solid #94A3B8 !important;
}

.input:focus,
.select:focus,
.textarea:focus {
    border-color: #0284C7 !important;
}

/* Tombol: batas yang jelas supaya bentuknya terbaca */
.btn {
    border-width: 1px;
}

.btn-outline,
.btn-ghost {
    border-color: rgba(100, 116, 139, 0.40) !important;
}

.btn-ghost {
    border-color: transparent !important;
}

.btn-ghost:hover {
    border-color: rgba(100, 116, 139, 0.30) !important;
}

/* Dokumen A4 TIDAK boleh terkena aturan di atas. Semua garis di dalam
   dokumen tetap hitam sesuai desain aslinya. */
.paper-document,
.paper-document table,
.paper-document th,
.paper-document td {
    border-color: #000000 !important;
}

/* ==========================================================================
   DESIGN SYSTEM - GLASS / CLAY
   ---------------------------------------------------------------------
   Seluruh kelas di blok ini berada DI LUAR .paper-document, jadi dokumen
   cetak tidak tersentuh sama sekali.
   ========================================================================== */

/* --- CANVAS: mesh gradient 3 warna pastel ------------------------------- */
.app-canvas {
    background:
        radial-gradient(60% 45% at 12% 8%, #FFE5EC 0%, rgba(255, 229, 236, 0) 60%),
        radial-gradient(55% 40% at 88% 12%, #E2F1FF 0%, rgba(226, 241, 255, 0) 62%),
        radial-gradient(60% 50% at 70% 95%, #FFF3E0 0%, rgba(255, 243, 224, 0) 60%),
        linear-gradient(135deg, #F4F6FB 0%, #EBF1F9 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* --- GLASS -------------------------------------------------------------- */
/* Blur HANYA pada 3 permukaan (header, toolbar, sidebar/modal) supaya
   performa tetap ringan di Android kelas bawah.
   Border memakai abu-abu agar batas permukaan tetap terlihat, bukan putih
   di atas putih yang praktis hilang. */
.glass {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(100, 116, 139, 0.28);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.glass-strong {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(100, 116, 139, 0.30);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

/* Glass tanpa blur - nyaris identik secara visual, biaya ~0 */
.glass-soft {
    background: rgba(255, 255, 255, 0.80);
    border: 1px solid rgba(100, 116, 139, 0.26);
}

/* --- CLAY: ikon bervolume lembut (tanpa aset gambar) -------------------- */
.clay {
    box-shadow:
        inset 0 -3px 6px rgba(15, 23, 42, 0.07),
        inset 0 3px 6px rgba(255, 255, 255, 0.85),
        0 8px 16px -10px rgba(15, 23, 42, 0.28);
}

.clay-cyan {
    background: linear-gradient(160deg, #7FE3FF 0%, #2AD1FF 55%, #00A3FF 100%);
    color: #06304A;
}

.clay-sky {
    background: linear-gradient(160deg, #BFE6FF 0%, #7CC7F5 55%, #0EA5E9 100%);
    color: #053243;
}

.clay-orange {
    background: linear-gradient(160deg, #FFC48A 0%, #FF9F43 55%, #FF7043 100%);
    color: #5A2405;
}

.clay-rose {
    background: linear-gradient(160deg, #FFC2CE 0%, #FF8FA5 55%, #FF4D6D 100%);
    color: #4A0A19;
}

.clay-slate {
    background: linear-gradient(160deg, #F1F5F9 0%, #E2E8F0 55%, #CBD5E1 100%);
    color: #334155;
}

/* --- STATE AKTIF: gradasi oranye (tab dokumen terpilih) ----------------- */
.tab-btn.tab-active {
    background-image: linear-gradient(180deg, #FF9F43 0%, #FF7043 100%);
    background-color: transparent;
    color: #5A2405;
    border-color: transparent;
    box-shadow: 0 10px 18px -12px rgba(255, 112, 67, 0.85);
}

.tab-btn.tab-active:hover {
    background-image: linear-gradient(180deg, #FFAB55 0%, #FF7C51 100%);
}

.tab-btn.tab-active .material-symbols-rounded {
    color: #5A2405 !important;
}

/* --- CHIP SEMANTIS (4 badge dari DNA desain) ---------------------------- */
/*   Working    #FFE8D6 / #A15700
     Productive #D6E4FF / #0A5BDF
     Study      #FFE0E6 / #D20026
     Creative   #E0F2FE / #0A74A3                              */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.4;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.chip-working {
    background: #FFE8D6;
    color: #A15700;
    border-color: #FBD3AE;
}

.chip-productive {
    background: #D6E4FF;
    color: #0A5BDF;
    border-color: #B9D1FF;
}

.chip-study {
    background: #FFE0E6;
    color: #D20026;
    border-color: #FFC6D1;
}

.chip-creative {
    background: #E0F2FE;
    color: #0A74A3;
    border-color: #BFE5FB;
}

/* netral untuk tipe dokumen kelima (Tindak Lanjut) */
.chip-neutral {
    background: #F1F5F9;
    color: #475569;
    border-color: #E2E8F0;
}

/* ungu untuk tipe dokumen Bank Soal (Kisi-kisi, Kartu Soal, Naskah Soal) */
.chip-bank {
    background: #EDE9FE;
    color: #6D28D9;
    border-color: #DDD6FE;
}

/* titik warna penanda tipe dokumen */
.dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex: none;
}

.dot-working {
    background: #FF8A00;
}

.dot-productive {
    background: #3B82F6;
}

.dot-study {
    background: #FF4D6D;
}

.dot-creative {
    background: #0EA5E9;
}

.dot-neutral {
    background: #64748B;
}

.dot-bank {
    background: #7C3AED;
}

/* --- INPUT daisyUI -> permukaan kaca ------------------------------------ */
/* Border HARUS terlihat: sebelumnya memakai putih di atas putih sehingga
   kotak isian tampak tanpa garis sama sekali. */
body .input,
body .select,
body .textarea {
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px solid #94A3B8;
    color: #1E293B;
}

body .input:hover,
body .select:hover,
body .textarea:hover {
    border-color: #64748B;
}

body .input:focus,
body .select:focus,
body .textarea:focus {
    outline: 2px solid rgba(0, 163, 255, 0.55);
    outline-offset: 0;
    border-color: #0284C7;
}

body .input::placeholder,
body .textarea::placeholder {
    color: #7C8CA3;
}

/* Kotak isian yang dinonaktifkan/readonly tetap punya garis yang jelas */
body .input:disabled,
body .select:disabled,
body .textarea:disabled {
    border-color: #CBD5E1;
    background-color: #F1F5F9;
}

/* checkbox = state aktif (oranye) */
body .checkbox.checkbox-primary {
    --chkbg: #FF7043;
    --chkfg: #FFFFFF;
    color: #FFFFFF;
}

body .checkbox.checkbox-primary:checked {
    border-color: #FF7043;
}

/* --- CETAK: netralkan seluruh efek kaca & bayangan ---------------------- */
/* Dokumen A4 (.paper-document) tidak boleh berubah satu piksel pun. */
@media print {
    .glass,
    .glass-strong,
    .glass-soft {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: #FFFFFF !important;
        border-color: #E2E8F0 !important;
        box-shadow: none !important;
    }

    .app-canvas {
        background: #FFFFFF !important;
        background-image: none !important;
        background-attachment: scroll !important;
    }

    .clay,
    .clay-cyan,
    .clay-sky,
    .clay-orange,
    .clay-rose,
    .clay-slate {
        background: #F1F5F9 !important;
        color: #1E293B !important;
        box-shadow: none !important;
    }

    .tab-btn.tab-active {
        background-image: none !important;
        background: #FF7043 !important;
        color: #5A2405 !important;
        box-shadow: none !important;
    }

    /* meja kertas: pertahankan warna asli agar hasil cetak tidak berubah */
    .paper-desk {
        background: rgba(226, 232, 240, 0.9) !important;
    }
}

/* ==========================================================================
   LAYAR KUNCI PIN
   ---------------------------------------------------------------------
   Selalu memakai teks gelap di atas latar terang — sama seperti bagian lain
   aplikasi, agar tidak bergantung pada background-color (yang dibuang Word
   dan sering hilang saat dicetak).
   ========================================================================== */

.pin-key {
    height: 52px;
    border-radius: 14px;
    font-size: 19px;
    font-weight: 700;
    color: #0f172a;
    background-color: #f8fafc;
    border: 1px solid #94a3b8;
    transition: background-color 0.12s ease, transform 0.06s ease, border-color 0.12s ease;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.pin-key:hover {
    background-color: #e2e8f0;
    border-color: #64748b;
}

.pin-key:active {
    transform: scale(0.96);
    background-color: #cbd5e1;
}

.pin-key:focus-visible {
    outline: 3px solid #0284c7;
    outline-offset: 2px;
}

.pin-key-aksi {
    color: #334155;
    background-color: #eef2f7;
}

.pin-dot {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid #94a3b8;
    background-color: transparent;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.pin-dot-isi {
    background-color: #0369a1;
    border-color: #0c4a6e;
}

/* Getaran halus saat PIN salah */
@keyframes pinGetar {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}

.pin-getar {
    animation: pinGetar 0.4s ease;
}

/* Layar kunci tidak ikut tercetak */
@media print {
    #pinScreen {
        display: none !important;
    }
}