/* =====================================================================
   DJOYLAND — SATU SUMBER TAMPILAN
   =====================================================================
   Sebelum berkas ini ada, 582 baris CSS tersebar di sepuluh halaman, dan
   tiga di antaranya mendefinisikan token yang persis sama hasil salin-tempel.
   Akibatnya sistem terasa seperti sepuluh situs berbeda, dan setiap halaman
   baru jadi kesempatan baru untuk salah.

   ATURAN:
   1. Warna, jarak, dan tipografi HANYA didefinisikan di sini.
   2. Halaman tidak menulis :root sendiri. Kalau butuh warna baru,
      tambahkan tokennya di sini — jangan patok nilai heksa di halaman.
   3. Halaman hanya boleh menulis CSS untuk hal yang benar-benar khas
      dirinya (mis. grafik batang jam di dashboard).

   Dimuat sebagai berkas terpisah, bukan inline, supaya peramban bisa
   menyimpannya di cache satu kali untuk seluruh halaman.
   ===================================================================== */

:root {
    /* --- netral: abu hangat, senada dengan merah/kuning brand ketimbang
           abu-biru dingin --- */
    --bg:        #F7F6F3;
    --kartu:     #FFFFFF;
    --kartu-2:   #FAF9F6;
    --tinta:     #1A1A1A;
    --redup:     #6B6B67;
    --samar:     #9A9A95;
    --garis:     #E5E3DC;
    --garis-2:   #EFEDE7;

    /* --- warna utama: merah Djoyland. Dipisah dari --bahaya (semantik
           error) walau sama-sama merah — beda pemakaian: --utama untuk
           aksen brand/navigasi aktif/tombol utama, --bahaya khusus
           status gagal/selisih/error. Kalau dua-duanya diubah jadi satu
           token, "tombol simpan" dan "transaksi gagal" jadi tidak bisa
           dibedakan warnanya. --- */
    --utama:     #D62828;
    --utama-2:   #A61E1E;
    --utama-bg:  #FCE9E9;
    --utama-tep: #F3B8B8;

    /* --- kuning brand: aksen kedua (CTA sekunder, sorotan), dipetakan
           ke token semantik --awas (peringatan) supaya satu token
           dipakai untuk dua tujuan yang secara makna memang berdekatan. --- */
    --ok:        #1C7A48;  --ok-bg:    #E3F2E9;  --ok-tep:   #BFE3CE;
    --awas:      #8A6A00;  --awas-bg:  #FFF6D9;  --awas-tep: #EDD98F;
    --bahaya:    #A03528;  --bahaya-bg:#FBE8E5;  --bahaya-tep:#F0C6BF;
    --netral:    #66655F;  --netral-bg:#F0EFE9;  --netral-tep:#DEDCD3;

    /* Kuning brand murni — dipakai elemen yang benar-benar harus kuning
       (badge sekunder, sorot grafik), terpisah dari --awas supaya
       "peringatan" tidak otomatis mengikat ke satu nilai kuning yang
       sama dengan aksen dekoratif. */
    --kuning-brand: #E8B800;

    /* --- bentuk & bayangan --- */
    --r-kecil:   6px;
    --r:         10px;
    --r-besar:   14px;
    --bayang:    0 1px 2px rgba(16,32,31,.05), 0 1px 3px rgba(16,32,31,.04);
    --bayang-2:  0 4px 12px rgba(16,32,31,.07), 0 1px 3px rgba(16,32,31,.05);

    /* --- tipografi --- */
    --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;

    /* --- jarak: satu tangga, bukan angka acak per halaman --- */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px;

    /* --- ALIAS SEMENTARA ---------------------------------------------
       Nama-nama ini dipakai halaman-halaman lama sebelum dj.css ada.
       Dibiarkan hidup supaya migrasi tidak harus menyentuh ratusan
       rujukan sekaligus — nilainya tetap satu sumber, cuma namanya dua.

       HALAMAN BARU JANGAN MEMAKAI INI. Pakai nama di atas.
       Hapus blok ini setelah seluruh halaman disisir. ------------------ */
    --card:    var(--kartu);
    --ink:     var(--tinta);
    --dim:     var(--redup);
    --line:    var(--garis);
    --okbg:    var(--ok-bg);
    --bad:     var(--bahaya);  --badbg:    var(--bahaya-bg);
    --warn:    var(--awas);    --warnbg:   var(--awas-bg);
    --jalan:   var(--awas);    --jalanbg:  var(--awas-bg);
    --belum:   var(--netral);  --belumbg:  var(--netral-bg);
    --biru:    var(--utama);
    --garis2:  var(--garis-2);
    --utama-gelap: var(--utama-2);

    /* Dipakai pos.blade.php dan landing.blade.php. */
    --hijau:   var(--ok);
    --merah:   var(--bahaya);
    --kuning:  var(--awas);
    --aksen:   var(--utama);
    --lembut:  var(--kartu-2);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:        #141312;
        --kartu:     #1E1D1B;
        --kartu-2:   #262523;
        --tinta:     #F2F1ED;
        --redup:     #A8A69F;
        --samar:     #7A7973;
        --garis:     #35332F;
        --garis-2:   #292825;

        --utama:     #EF5350;
        --utama-2:   #F27B78;
        --utama-bg:  #351C1B;
        --utama-tep: #5A2C29;

        --ok:        #62C08C;  --ok-bg:    #12301F;  --ok-tep:   #1E4A31;
        --awas:      #E8B800;  --awas-bg:  #332B0C;  --awas-tep: #4E4318;
        --bahaya:    #E28D7E;  --bahaya-bg:#341A15;  --bahaya-tep:#4E2820;
        --netral:    #A3A29A;  --netral-bg:#26251F;  --netral-tep:#3A382F;

        --kuning-brand: #F0C635;

        --bayang:    0 1px 2px rgba(0,0,0,.3);
        --bayang-2:  0 4px 14px rgba(0,0,0,.38);
    }
}

/* ===================== dasar ===================== */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: var(--s5) var(--s4) var(--s7);
    background: var(--bg);
    color: var(--tinta);
    font: 15px/1.55 var(--font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.wrap { max-width: 68rem; margin: 0 auto; }
.wrap-sempit { max-width: 44rem; margin: 0 auto; }

h1, h2, h3 { margin: 0; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: 1.5rem;  font-weight: 700; line-height: 1.2; }
h2 { font-size: .75rem;  font-weight: 700; color: var(--redup);
     text-transform: uppercase; letter-spacing: .09em; margin: var(--s6) 0 var(--s3); }
h3 { font-size: 1rem;    font-weight: 650; }

p { margin: 0; }
a { color: var(--utama); text-underline-offset: 2px; }

.sub    { color: var(--redup); margin: var(--s1) 0 var(--s5); }
.muted  { color: var(--redup); }
.samar  { color: var(--samar); }
.kecil  { font-size: .8rem; }
.num    { font-variant-numeric: tabular-nums; text-align: right; }
.sembunyi { display: none !important; }

code {
    font: .84em/1.4 var(--mono);
    background: var(--netral-bg);
    border: 1px solid var(--garis-2);
    padding: 1px 5px;
    border-radius: var(--r-kecil);
}

/* ===================== kartu ===================== */

.kartu {
    background: var(--kartu);
    border: 1px solid var(--garis);
    border-radius: var(--r);
    padding: var(--s4);
    box-shadow: var(--bayang);
}

/* ===================== angka ringkas ===================== */

.angka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--s2);
}
.angka > div {
    background: var(--kartu);
    border: 1px solid var(--garis);
    border-radius: var(--r);
    padding: var(--s3) var(--s4);
    box-shadow: var(--bayang);
}
.angka .lbl {
    color: var(--redup); font-size: .68rem; font-weight: 650;
    text-transform: uppercase; letter-spacing: .07em;
}
.angka .val {
    font-size: 1.35rem; font-weight: 750; margin-top: 2px;
    font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}

/* ===================== tabel ===================== */

.scroll {
    background: var(--kartu);
    border: 1px solid var(--garis);
    border-radius: var(--r);
    overflow-x: auto;
    box-shadow: var(--bayang);
}

table { width: 100%; border-collapse: collapse; font-size: .875rem; }

th, td {
    padding: var(--s3) var(--s4);
    text-align: left;
    border-bottom: 1px solid var(--garis-2);
    white-space: nowrap;
}
th {
    color: var(--redup); font-weight: 700; font-size: .68rem;
    text-transform: uppercase; letter-spacing: .07em;
    background: var(--kartu-2);
    position: sticky; top: 0;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--kartu-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ===================== pil status ===================== */

.pil {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 2rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.pil.ok     { background: var(--ok-bg);     color: var(--ok);     border-color: var(--ok-tep); }
.pil.jalan,
.pil.warn   { background: var(--awas-bg);   color: var(--awas);   border-color: var(--awas-tep); }
.pil.bad    { background: var(--bahaya-bg); color: var(--bahaya); border-color: var(--bahaya-tep); }
.pil.belum,
.pil.flat   { background: var(--netral-bg); color: var(--netral); border-color: var(--netral-tep); }

/* ===================== kendali ===================== */

input, select, textarea, button {
    font: inherit;
    padding: var(--s2) var(--s3);
    border: 1px solid var(--garis);
    border-radius: var(--r-kecil);
    background: var(--kartu);
    color: var(--tinta);
    /* 40px: batas nyaman untuk disentuh jari, bukan hanya diklik tetikus. */
    min-height: 40px;
}
input::placeholder { color: var(--samar); }

:is(input, select, textarea, button, a, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--utama);
    outline-offset: 2px;
}

button { cursor: pointer; font-weight: 650; }
button:hover:not(:disabled) { background: var(--kartu-2); }
button:disabled { opacity: .5; cursor: not-allowed; }

button.utama {
    background: var(--utama); color: #fff; border-color: transparent;
    box-shadow: var(--bayang);
}
button.utama:hover:not(:disabled) { background: var(--utama-2); }

button.bahaya { color: var(--bahaya); border-color: var(--bahaya-tep); }

/* ===================== pesan ===================== */

.pesan {
    padding: var(--s3) var(--s4);
    border-radius: var(--r-kecil);
    border: 1px solid transparent;
    font-size: .9rem;
}
.pesan.ok   { background: var(--ok-bg);     color: var(--ok);     border-color: var(--ok-tep); }
.pesan.err  { background: var(--bahaya-bg); color: var(--bahaya); border-color: var(--bahaya-tep); }
.pesan.awas { background: var(--awas-bg);   color: var(--awas);   border-color: var(--awas-tep); }

/* Kotak catatan bergaris kiri — dipakai untuk peringatan panjang. */
.banner {
    background: var(--awas-bg);
    border: 1px solid var(--awas-tep);
    border-left: 3px solid var(--awas);
    border-radius: var(--r-kecil);
    padding: var(--s3) var(--s4);
    margin-bottom: var(--s5);
    font-size: .9rem;
}
.banner b { color: var(--awas); }

/* ===================== layar masuk ===================== */
/* Dipakai bersama oleh semua halaman React yang memegang token sendiri
   (Loket, Admin Wahana, Kelola Staf). Sebelum ini tiap halaman menata
   layar login-nya sendiri dengan gaya inline yang sedikit beda, dan
   judulnya memakai <h2> yang di sistem ini justru bergaya label kecil —
   jadi terlihat belum jadi. Satu komponen, satu tampilan. */
/* KP-206: flex (bukan grid) + lebar penuh supaya kotak SELALU di tengah,
   termasuk di HP — sebelumnya kotak menempel kiri-atas di layar sempit. */
.masuk {
    width: 100%;
    min-height: calc(100vh - 7rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s5) 0;
    box-sizing: border-box;
}
.masuk-kotak {
    position: relative;
    width: 100%;
    max-width: 24rem;
    margin: 0 auto;
    background: var(--kartu);
    border: 1px solid var(--garis);
    border-radius: var(--r-besar);
    padding: var(--s6) var(--s5) var(--s5);
    box-shadow: var(--bayang-2);
    overflow: hidden;
}
/* Garis aksen merek di atas kotak. */
.masuk-kotak::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--utama);
}
/* Lambang merek dibuat dari teks yang sudah ada (tanpa ubah markup di
   tiap halaman): kotak merah berisi huruf pertama + nama. */
.masuk-merek {
    display: flex; align-items: center; gap: .6rem;
    font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em;
    color: var(--tinta); margin-bottom: var(--s5);
}
.masuk-merek::before {
    content: "D"; display: grid; place-items: center; flex: none;
    width: 2.1rem; height: 2.1rem; border-radius: .6rem;
    background: var(--utama); color: #fff; font-size: 1.05rem; font-weight: 800;
}
.masuk-judul {
    font-size: 1.35rem; font-weight: 750; letter-spacing: -0.02em;
    margin: 0 0 var(--s1); color: var(--tinta);
    text-transform: none;   /* menang atas gaya h2 kalau dipakai di tag h2 */
}
.masuk-sub { color: var(--redup); font-size: .875rem; margin: 0 0 var(--s5); line-height: 1.5; }
.masuk-kotak label {
    display: block; font-size: .78rem; font-weight: 650;
    color: var(--tinta); margin: var(--s4) 0 6px;
}
.masuk-kotak input {
    width: 100%; box-sizing: border-box; height: 2.75rem; padding: 0 .85rem;
    border: 1px solid var(--garis); border-radius: var(--r-kecil);
    background: var(--kartu); font-size: .95rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.masuk-kotak input:focus {
    outline: none; border-color: var(--utama);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--utama) 18%, transparent);
}
.masuk-kotak .utama { width: 100%; height: 2.85rem; margin-top: var(--s5); font-weight: 700; }
.masuk-kotak .pesan { margin: 0 0 var(--s2); }
.masuk-catatan {
    color: var(--samar); font-size: .8rem; margin: var(--s4) 0 0; padding-top: var(--s4);
    border-top: 1px solid var(--garis); text-align: center;
}
.masuk-catatan a { color: var(--redup); text-decoration: none; }
.masuk-catatan a:hover { color: var(--utama); }

/* ===================== bar ===================== */

.bar {
    height: 12px; background: var(--netral-bg); border-radius: 2rem;
    overflow: hidden; margin: var(--s3) 0 var(--s2);
    border: 1px solid var(--garis-2);
}
.bar > i { display: block; height: 100%; background: var(--ok); border-radius: 2rem; transition: width .4s ease; }

.barkecil {
    height: 6px; width: 7.5rem; background: var(--netral-bg);
    border-radius: 2rem; overflow: hidden;
}
.barkecil > i { display: block; height: 100%; border-radius: 2rem; }

/* ===================== tata letak kecil ===================== */

.tumpuk  { display: flex; flex-direction: column; gap: var(--s3); }
.deret   { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.kolom2  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 44rem) { .kolom2 { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}