/*
 * Gaya dashboard BISINDO.
 *
 * Tiga hal yang dijaga: kontras memadai (minimal 4,5:1 untuk teks biasa),
 * fokus papan ketik yang selalu terlihat, dan tata letak yang tetap utuh
 * saat teks diperbesar sampai 200%. Satuan rem dipakai agar ukuran ikut
 * setelan peramban pengguna.
 */

:root {
    color-scheme: light dark;

    --latar:        #f6f7f9;
    --kertas:       #ffffff;
    --tinta:        #16181d;
    --tinta-lembut: #4a4f58;
    --garis:        #d7dae0;
    --sorot:        #0b5fa5;
    --sorot-tinta:  #ffffff;
    --hidup:        #0f6b3d;
    --hidup-latar:  #e3f4ea;
    --tunggu:       #7a4a00;
    --tunggu-latar: #fdf1dc;
    --bahaya:       #9a1d1d;
    --bahaya-latar: #fbe6e6;
    --radius:       .6rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --latar:        #14161a;
        --kertas:       #1d2026;
        --tinta:        #eceef2;
        --tinta-lembut: #a8aeb9;
        --garis:        #343943;
        --sorot:        #6fb3ef;
        --sorot-tinta:  #0d1117;
        --hidup:        #7fd9a6;
        --hidup-latar:  #14301f;
        --tunggu:       #f0c274;
        --tunggu-latar: #33280f;
        --bahaya:       #f29b9b;
        --bahaya-latar: #371818;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0);
    background: var(--latar);
    color: var(--tinta);
    font: 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Tautan lewati: tersembunyi sampai difokuskan dengan papan ketik. */
.lewati {
    position: absolute;
    left: -9999px;
    padding: .75rem 1rem;
    background: var(--sorot);
    color: var(--sorot-tinta);
    z-index: 10;
}
.lewati:focus { left: .5rem; top: .5rem; }

.kepala {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem clamp(1rem, 4vw, 2rem);
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
    background: var(--kertas);
    border-bottom: 1px solid var(--garis);
}
.kepala h1 { margin: 0; font-size: 1.25rem; }

.wadah {
    max-width: 44rem;
    margin: 0 auto;
    padding: 1.5rem clamp(1rem, 4vw, 2rem);
    display: grid;
    gap: 1.25rem;
}

.kartu {
    background: var(--kertas);
    border: 1px solid var(--garis);
    border-radius: var(--radius);
    padding: 1.25rem;
}
.kartu h2 { margin: 0 0 .75rem; font-size: 1.05rem; }

.penjelasan { color: var(--tinta-lembut); margin: .5rem 0 0; }
.bantuan { color: var(--tinta-lembut); font-size: .9rem; margin: .3rem 0 0; }

/* -- kabar -- */
.kabar {
    margin: 0;
    padding: .75rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--garis);
    background: var(--kertas);
}
.kabar.berhasil { background: var(--hidup-latar);  border-color: var(--hidup);  color: var(--hidup); }
.kabar.galat    { background: var(--bahaya-latar); border-color: var(--bahaya); color: var(--bahaya); }

/* -- lencana status -- */
.lencana {
    display: inline-block;
    margin: 0;
    padding: .4rem .8rem;
    border-radius: 2rem;
    font-weight: 600;
    border: 1px solid;
}
.lencana.hidup  { background: var(--hidup-latar);  border-color: var(--hidup);  color: var(--hidup); }
.lencana.tunggu { background: var(--tunggu-latar); border-color: var(--tunggu); color: var(--tunggu); }
.lencana.mati   { background: var(--bahaya-latar); border-color: var(--bahaya); color: var(--bahaya); }

/* -- rincian -- */
.rincian {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 1rem 0 0;
}
.rincian dt { font-size: .85rem; color: var(--tinta-lembut); }
.rincian dd { margin: .15rem 0 0; font-weight: 600; font-size: 1.1rem; }

/* -- langkah -- */
.langkah { margin: 0 0 1rem; padding-left: 1.3rem; }
.langkah li { margin-bottom: .35rem; }

/* -- QR -- */
.wadah-qr {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 16.5rem;
    /* Putih tetap, juga dalam mode gelap: pemindai QR memerlukan kontras
       hitam-di-atas-putih. QR terbalik warna sering gagal dibaca. */
    background: #ffffff;
    border: 1px solid var(--garis);
    border-radius: var(--radius);
    padding: 1rem;
}
.wadah-qr img { display: block; width: 16.5rem; height: 16.5rem; max-width: 100%; }
.wadah-qr .penjelasan { color: #4a4f58; text-align: center; }

/* -- borang -- */
.borang { display: grid; gap: 1rem; justify-items: start; }
.baris { display: grid; gap: .3rem; width: 100%; }
.baris label { font-weight: 600; }

input, textarea {
    width: 100%;
    padding: .6rem .7rem;
    font: inherit;
    color: var(--tinta);
    background: var(--latar);
    border: 1px solid var(--garis);
    border-radius: var(--radius);
}
input:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }

/* -- kolom sandi dengan tombol lihat/sembunyikan -- */

/*
 * Tombolnya duduk DI DALAM kolom isian, menempel di tepi kanan — bukan di
 * bawahnya. Kolomnya diberi ruang kosong di kanan selebar tombol supaya
 * teks sandi tidak pernah tertimpa ikon.
 */
.baris-sandi { position: relative; display: block; }

.baris-sandi input { width: 100%; padding-inline-end: 3rem; }

.lihat-sandi {
    position: absolute;
    inset-inline-end: .25rem;

    /*
     * Posisi tegaknya dipatok di tengah kolom secara tegas, bukan
     * diserahkan kepada perilaku bawaan. Tanpa `top` dan `transform`,
     * tombol berposisi mutlak ini jatuh ke bawah kolom pada sebagian
     * peramban — persis keluhan yang muncul saat pertama dipasang.
     */
    top: 50%;
    transform: translateY(-50%);

    /*
     * Sasaran sentuh 2,5rem (40 px) — sedikit lebih kecil dari kolomnya
     * sendiri agar tidak menyembul keluar, tetapi tetap nyaman ditekan
     * dengan jari. Ikonnya sendiri hanya 20 px; sisanya ruang tekan yang
     * tidak terlihat.
     */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;

    padding: 0;
    color: var(--tinta-lembut);
    background: none;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
}

.lihat-sandi:hover { color: var(--tinta); }

/*
 * Pergantian ikon dikendalikan dari sini, bukan dari JavaScript.
 *
 * Semula kedua ikon diberi atribut `hidden` dan JavaScript yang
 * membukatutupnya. Itu keliru: `hidden` TIDAK berlaku pada elemen <svg>,
 * sebab aturan bawaan peramban `[hidden] { display: none }` hanya mengenai
 * elemen bernamespace HTML, sedangkan <svg> bernamespace SVG. Akibatnya
 * kedua ikon tampil berjejer.
 *
 * Dengan menyandarkannya pada `aria-pressed` — yang memang sudah wajib ada
 * demi pembaca layar — keadaan tombol hanya punya satu sumber kebenaran,
 * dan ikonnya tidak mungkin lagi berselisih dengan keterangan yang
 * diumumkan kepada pengguna pembaca layar.
 */
.lihat-sandi .ikon-mata-tutup { display: none; }
.lihat-sandi[aria-pressed="true"] .ikon-mata { display: none; }
.lihat-sandi[aria-pressed="true"] .ikon-mata-tutup { display: block; }

/*
 * Saat sandi sedang terlihat, tombolnya diberi warna sorot. Keadaan itu
 * jangan hanya ditandai oleh ikon yang berganti — perbedaan warna membantu
 * orang yang sulit membedakan dua bentuk ikon yang mirip. Pembaca layar
 * mendapat keterangan yang sama lewat aria-pressed dan aria-label.
 */
.lihat-sandi[aria-pressed="true"] { color: var(--sorot); }

/* Garis fokus dirapatkan ke dalam supaya tidak terpotong tepi kolom. */
.lihat-sandi:focus-visible { outline-offset: -2px; }

@media (prefers-reduced-motion: no-preference) {
    .lihat-sandi { transition: color .15s ease; }
}

/* -- menu pengurus di bilah kepala -- */

/*
 * Dibangun dari <details>/<summary>, bukan tombol + JavaScript. Dengan
 * begitu menu tetap dapat dibuka meski JavaScript mati, dan peramban sudah
 * menyediakan sendiri perilaku papan ketiknya. JavaScript hanya menambahkan
 * kemudahan: menutup lewat Esc dan lewat klik di luar.
 */
.menu-pengurus { position: relative; }

.menu-pengurus > summary {
    /* Segitiga bawaan dibuang; penandanya digambar sendiri di bawah. */
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    user-select: none;
}

.menu-pengurus > summary::-webkit-details-marker { display: none; }

.menu-pengurus > summary::after {
    content: "";
    width: .4rem;
    height: .4rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-.1em) rotate(45deg);
}

.menu-pengurus[open] > summary::after { transform: translateY(.1em) rotate(-135deg); }

.menu-isi {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + .4rem);
    z-index: 20;

    display: grid;
    gap: .15rem;
    min-width: 12rem;
    padding: .35rem;

    background: var(--kertas);
    border: 1px solid var(--garis);
    border-radius: var(--radius);
    box-shadow: 0 6px 20px rgb(0 0 0 / .18);
}

/*
 * Butir menu dibuat seragam apa pun unsurnya: yang satu tautan, yang lain
 * tombol di dalam borang POST. Tanpa penyeragaman ini keduanya terlihat
 * seperti dua jenis kendali yang berbeda.
 */
.menu-isi a,
.menu-isi button {
    display: block;
    width: 100%;
    padding: .5rem .7rem;
    font: inherit;
    text-align: start;
    text-decoration: none;
    color: var(--tinta);
    background: none;
    border: 0;
    border-radius: calc(var(--radius) - .2rem);
    cursor: pointer;
}

.menu-isi a:hover,
.menu-isi button:hover { background: var(--latar); }

.menu-isi form { margin: 0; }

.menu-isi hr {
    margin: .2rem .3rem;
    border: 0;
    border-top: 1px solid var(--garis);
}

/* Tautan kembali di atas halaman ganti sandi. */
.kembali {
    display: inline-block;
    color: var(--sorot);
}

/* -- tombol -- */
.kendali { display: flex; flex-wrap: wrap; gap: .75rem; }

.tombol {
    padding: .6rem 1.1rem;
    font: inherit;
    font-weight: 600;
    color: var(--tinta);
    background: var(--latar);
    border: 1px solid var(--garis);
    border-radius: var(--radius);
    cursor: pointer;
}
.tombol.utama  { background: var(--sorot);  border-color: var(--sorot);  color: var(--sorot-tinta); }
.tombol.bahaya { background: var(--bahaya-latar); border-color: var(--bahaya); color: var(--bahaya); }
.tombol.kecil  { padding: .35rem .8rem; font-size: .9rem; }
.tombol:disabled { opacity: .5; cursor: not-allowed; }
.tombol:not(:disabled):hover { filter: brightness(1.08); }

/* Fokus wajib terlihat jelas — jangan pernah dihapus. Pengguna papan ketik
   tidak punya penunjuk tetikus untuk tahu di mana posisinya. */
:focus-visible {
    outline: 3px solid var(--sorot);
    outline-offset: 2px;
}

.kaki {
    max-width: 44rem;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2rem) 2rem;
    color: var(--tinta-lembut);
    font-size: .875rem;
}

code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .9em;
    background: var(--latar);
    padding: .1rem .3rem;
    border-radius: .25rem;
}

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


/* -- halaman pengaturan dan laporan -- */

/*
 * Label yang hanya untuk pembaca layar. Tabel petugas sudah punya judul
 * kolom, tetapi judul kolom saja tidak cukup: pembaca layar yang menyusuri
 * kolom isian satu per satu perlu tahu ini baris keberapa. Disembunyikan
 * dari mata, bukan dari pembaca layar — karena itu bukan display:none.
 */
.bantuan-layar {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.petugas { width: 100%; border-collapse: collapse; }
.petugas th { text-align: start; font-size: .9rem; padding: 0 .4rem .3rem 0; }
.petugas td { padding: 0 .4rem .5rem 0; vertical-align: top; }
.petugas td:last-child, .petugas th:last-child { padding-inline-end: 0; }

/* Pada layar ponsel, dua kolom berdampingan membuat keduanya terlalu
   sempit untuk dibaca. Ditumpuk saja. */
@media (max-width: 34rem) {
    .petugas thead { display: none; }
    .petugas tr { display: block; margin-bottom: 1rem; }
    .petugas td { display: block; padding-inline-end: 0; }
}

.kalimat {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.35;
    margin: .2rem 0 1rem;
}

.nomor-pelapor {
    font-size: 1.15rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin: .2rem 0 .8rem;
}

.rincian { width: 100%; border-collapse: collapse; font-size: .95rem; }
.rincian caption { text-align: start; margin-bottom: .4rem; }
.rincian th, .rincian td {
    text-align: start;
    padding: .35rem .5rem .35rem 0;
    border-bottom: 1px solid var(--garis);
}
.rincian td.ragu { color: var(--tunggu); font-weight: 600; }

.rekaman {
    width: 100%;
    max-height: 70vh;
    background: #000;
    border-radius: var(--radius);
}

/*
 * Dua tombol berdampingan di halaman laporan. Keduanya sebenarnya tautan,
 * bukan tombol, jadi garis bawahnya perlu dibuang dan jaraknya diatur
 * sendiri. Warna dan bentuknya sudah datang dari aturan `.tombol` yang ada.
 */
.kartu a.tombol {
    display: inline-block;
    margin: .2rem .4rem .2rem 0;
    text-decoration: none;
}