/*
 * Lab Kora — arah B "Jalur Uji" (dipilih Fahmi 22 Okt 2026, docs/09-log/lab-konsep).
 * Token disalin NILAINYA dari keluarga Sprint: C:\Koramo\crm-koracoconut\web\src\styles\sprint.css (dinaikkan 4 Sep 2026
 * supaya teks >= 4.5:1 di latar tergelap tempat ia dipakai; mandor membaca HP di bawah matahari). Jangan melembutkan
 * warna teks tanpa mengukur ulang. Gradien sidebar dari SidebarSprint.tsx.
 * Ukuran teks minimal 13 px isi / 12 px keterangan (catatan render v1).
 */
:root {
  --sp-daun: #27764A;
  --sp-daun-tua: #226B43;
  --sp-daun-muda: #8FD694;
  --sp-daun-kabut: #D8EEE0;
  --sp-embun: #EAF3ED;
  --sp-kartu: #FFFFFF;
  --sp-arang: #1C2B24;
  --sp-abu: #61716A;
  --sp-abu-muda: #66706B;
  --sp-garis: #D7E5DC;
  --sp-garis-tegas: #818984;
  --sp-mentari: #FFB84D;
  --sp-mentari-kabut: #FFEACB;
  --amber: #926110;
  --sp-terakota: #AE4223;
  --sp-terakota-kabut: #FBDDD3;
  --sp-langit: #336D9A;
  --sp-langit-kabut: #DCEBFA;
  --sp-lavender: #665D9C;
  --sp-lavender-kabut: #E5E1F8;
  --sidebar-atas: #123A28;
  --sidebar-bawah: #0E2F20;
  --sp-r-kecil: 12px;
  --sp-r-sedang: 18px;
  --sp-r-besar: 24px;
  --sp-r-pil: 999px;
  --sp-bayang-1: 0 1px 2px rgba(28,43,36,.04), 0 4px 12px rgba(28,43,36,.05);
  --sp-bayang-2: 0 2px 4px rgba(28,43,36,.05), 0 10px 28px rgba(28,43,36,.08);
  --sp-cepat: 140ms;
  --sp-pegas: cubic-bezier(.34,1.56,.64,1);
  --huruf: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 15px/1.5 var(--huruf);
  background: var(--sp-embun);
  color: var(--sp-arang);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--sp-daun); }
.angka, td.n, .n { font-variant-numeric: tabular-nums; }
.redup { color: var(--sp-abu); font-size: 13px; }

/* ── kerangka: nav bawah di HP, sidebar hijau di desktop ── */
.kerangka { min-height: 100vh; }
.kepala {
  position: sticky; top: 0; z-index: 5; background: var(--sp-kartu); border-bottom: 1px solid var(--sp-garis);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px max(16px, env(safe-area-inset-left)) 10px max(16px, env(safe-area-inset-right));
}
.merek { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sp-arang); }
.merek img { height: 26px; width: auto; display: block; }
.merek .pintu { font-weight: 800; font-size: 17px; padding-left: 10px; border-left: 1px solid var(--sp-garis-tegas); }
.siapa { text-align: right; font-size: 13px; line-height: 1.3; }
.siapa b { display: block; font-size: 14px; }
.isi {
  max-width: 980px; margin: 0 auto;
  padding: 20px max(16px, env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr);
}
.isi > *, .daftar > *, .kisi > *, .dua > *, .ubin > * { min-width: 0; }
body { overflow-x: hidden; }
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--sp-kartu);
  border-top: 1px solid var(--sp-garis); display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
}
.nav a {
  display: grid; justify-items: center; gap: 2px; padding: 8px 2px; border-radius: var(--sp-r-kecil);
  color: var(--sp-abu); text-decoration: none; font-size: 12px; font-weight: 700;
}
.nav a svg { width: 20px; height: 20px; }
.nav a[aria-current="page"] { background: var(--sp-daun-kabut); color: var(--sp-daun); }
.nav .lencana { display: none; }
.nav .merek-nav, .nav .pengguna-nav { display: none; }

@media (min-width: 900px) {
  .kerangka { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
  .kepala .merek { display: none; }
  .nav {
    position: sticky; top: 0; height: 100vh; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 4px;
    background: linear-gradient(180deg, var(--sidebar-atas), var(--sidebar-bawah)); border: 0; padding: 20px 14px;
  }
  .nav .merek-nav { display: flex; align-items: center; gap: 10px; margin: 0 6px 22px; color: #FFFFFF; text-decoration: none; }
  .nav .merek-nav img { height: 28px; filter: brightness(0) invert(1); }
  .nav .merek-nav span { font-weight: 800; font-size: 18px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.35); }
  .nav a { display: flex; align-items: center; gap: 10px; justify-items: start; font-size: 14px; color: #D8EEE0; padding: 10px 12px; }
  .nav a[aria-current="page"] { background: var(--sp-daun); color: #FFFFFF; }
  .nav .lencana { display: inline-block; margin-left: auto; background: var(--sp-mentari); color: var(--sp-arang); border-radius: var(--sp-r-pil); font-size: 12px; padding: 0 8px; }
  .nav .pengguna-nav { display: block; margin-top: auto; border: 1px solid rgba(255,255,255,.2); border-radius: var(--sp-r-kecil); padding: 10px 12px; color: #FFFFFF; font-size: 13px; }
  .nav .pengguna-nav small { color: var(--sp-daun-muda); }
  .isi { padding-bottom: 40px; }
}

/* ── judul halaman ── */
.judul h1 { margin: 0; font-size: 26px; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.judul p { margin: 4px 0 0; color: var(--sp-abu); font-size: 14px; }
.baris { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
h2 { font-size: 16px; margin: 6px 0 0; }

/* ── kartu, strip status ── */
.kartu { background: var(--sp-kartu); border-radius: var(--sp-r-sedang); box-shadow: var(--sp-bayang-1); padding: 14px 16px; min-width: 0; }
.kartu.strip { border-left: 5px solid var(--warna, var(--sp-garis-tegas)); }
.daftar { display: grid; gap: 10px; }
a.kartu { text-decoration: none; color: inherit; display: block; transition: transform var(--sp-cepat) var(--sp-pegas); }
a.kartu:hover { transform: translateY(-1px); box-shadow: var(--sp-bayang-2); }
a.kartu:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .nav a:focus-visible {
  outline: 3px solid var(--sp-langit); outline-offset: 2px;
}
.kartu .kode { font-weight: 800; font-size: 16px; }
.st-menunggu, .st-antre { --warna: var(--sp-mentari); }
.st-lengkap, .st-uji, .st-terkirim { --warna: var(--sp-langit); }
.st-selesai, .st-aktif, .st-diterima { --warna: var(--sp-daun); }
.st-diajukan { --warna: var(--sp-lavender); }
.st-gagal, .st-ditolak { --warna: var(--sp-terakota); }
.st-draf, .st-arsip { --warna: var(--sp-garis-tegas); }

/* ── pil status ── */
.pil { display: inline-block; border-radius: var(--sp-r-pil); padding: 2px 10px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.pil.menunggu, .pil.antre { background: var(--sp-mentari-kabut); color: var(--amber); }
.pil.lengkap, .pil.uji, .pil.terkirim { background: var(--sp-langit-kabut); color: var(--sp-langit); }
.pil.selesai, .pil.aktif, .pil.diterima, .pil.lolos { background: var(--sp-daun-kabut); color: var(--sp-daun); }
.pil.diajukan { background: var(--sp-lavender-kabut); color: var(--sp-lavender); }
.pil.gagal, .pil.ditolak, .pil.luar { background: var(--sp-terakota-kabut); color: var(--sp-terakota); }
.pil.draf, .pil.arsip { background: #EDF2EF; color: var(--sp-abu); }

/* ── jalur stasiun (inti arah B) ── */
.jalur { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); position: relative; margin: 4px 0 2px; }
.jalur::before { content: ""; position: absolute; left: 12%; right: 12%; top: 13px; height: 4px; background: var(--sp-garis); border-radius: 2px; }
.jalur .stasiun { position: relative; display: grid; justify-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--sp-abu); text-align: center; }
.jalur .titik {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: var(--sp-kartu); border: 3px solid var(--sp-garis-tegas); color: var(--sp-abu);
}
.jalur .lewat .titik { background: var(--sp-daun); border-color: var(--sp-daun); color: #FFFFFF; }
.jalur .kini .titik { background: var(--sp-mentari); border-color: var(--sp-mentari); color: var(--sp-arang); }
.jalur .kini { color: var(--sp-arang); }

/* ── banner beranda ── */
.banner { background: var(--sp-daun-kabut); border-radius: var(--sp-r-besar); padding: 16px; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
.banner h2 { margin: 0; font-size: 18px; }
.banner img { width: 64px; height: 64px; }
.banner .jalur { grid-column: 1 / -1; }

/* ── ubin angka ── */
.ubin { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.ubin .kartu b { display: block; font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ubin .kartu span { font-size: 12px; color: var(--sp-abu); }

/* ── progres ── */
.progres { height: 8px; border-radius: 4px; background: var(--sp-garis); overflow: hidden; }
.progres > i { display: block; height: 100%; background: var(--sp-daun); }

/* ── formulir ── */
label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
input, select, textarea {
  font: inherit; font-size: 16px; color: var(--sp-arang); background: var(--sp-kartu);
  border: 1.5px solid var(--sp-garis-tegas); border-radius: var(--sp-r-kecil); padding: 10px 12px; width: 100%; min-width: 0;
}
input[readonly] { background: var(--sp-embun); border-color: var(--sp-garis); color: var(--sp-abu); }
textarea { min-height: 72px; resize: vertical; }
.kisi { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.dua { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .dua.lipat { grid-template-columns: 1fr; } }
.foto { border: 1.5px dashed var(--sp-garis-tegas); border-radius: var(--sp-r-kecil); padding: 10px; font-size: 13px; color: var(--sp-abu); }
.foto img { max-width: 100%; border-radius: 8px; display: block; margin-top: 6px; }
.galeri { display: flex; gap: 6px; flex-wrap: wrap; }
.galeri img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }

/* ── tombol ── */
.tombol, button {
  font: inherit; font-weight: 800; font-size: 15px; border-radius: var(--sp-r-pil); padding: 10px 18px; cursor: pointer;
  border: 2px solid var(--sp-daun); background: var(--sp-daun); color: #FFFFFF; text-decoration: none; display: inline-block; text-align: center;
}
.tombol:hover, button:hover { background: var(--sp-daun-tua); border-color: var(--sp-daun-tua); }
.tombol.garis, button.garis { background: var(--sp-kartu); color: var(--sp-daun); }
button.bahaya { background: var(--sp-kartu); color: var(--sp-terakota); border-color: var(--sp-terakota); }
button:disabled { background: var(--sp-garis); border-color: var(--sp-garis); color: var(--sp-abu); cursor: not-allowed; }
.aksi { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ── pesan ── */
.pesan { border-radius: var(--sp-r-kecil); padding: 10px 14px; font-size: 14px; border-left: 5px solid; }
.pesan.galat { background: var(--sp-terakota-kabut); border-color: var(--sp-terakota); color: var(--sp-arang); }
.pesan.info { background: var(--sp-mentari-kabut); border-color: var(--sp-mentari); }
.pesan.ok { background: var(--sp-daun-kabut); border-color: var(--sp-daun); }

/* ── tabel ── */
.gulir { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--sp-abu); border-bottom: 1.5px solid var(--sp-garis-tegas); padding: 6px 8px; }
td { border-bottom: 1px solid var(--sp-garis); padding: 8px; vertical-align: top; }
td.n, th.n { text-align: right; }

/* ── grafik batch uji: pita target, batang dari nol ── */
.grafik svg { width: 100%; max-width: 520px; height: auto; display: block; }
.grafik .pita { fill: var(--sp-daun-kabut); }
.grafik .garis-sumbu { stroke: var(--sp-garis-tegas); stroke-width: 1; }
.grafik .batang.dalam { fill: var(--sp-daun); }
.grafik .batang.luar { fill: var(--sp-terakota); }
.grafik text { fill: var(--sp-arang); font: 700 12px var(--huruf); }
.grafik text.redup { fill: var(--sp-abu); font-weight: 600; }

/* ── dialog Selesaikan ── */
details.dialog > summary { list-style: none; }
details.dialog > summary::-webkit-details-marker { display: none; }
details.dialog[open] > .kartu { margin-top: 10px; border: 2px solid var(--sp-daun); }
.batok-kecil { width: 44px; height: 44px; float: right; }

/* ── halaman masuk ── */
.masuk { min-height: 100vh; display: grid; place-items: center; padding: 24px max(16px, env(safe-area-inset-left)); }
.masuk .kartu { width: min(400px, 100%); display: grid; gap: 14px; padding: 24px; }
.siluet { position: fixed; right: -40px; bottom: -40px; width: 280px; opacity: .1; pointer-events: none; z-index: 0; }

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