/* NOMM - antarmuka operasional.
   Tema terang tunggal: latar putih, aksen hijau, sidebar kiri.
   Seluruh warna ditetapkan eksplisit; tidak mengikuti tema perangkat. */

:root{
  color-scheme: light;

  --ground:#FFFFFF;          /* latar halaman */
  --surface:#FFFFFF;         /* kartu & panel */
  --surface-2:#F8FAF9;       /* kepala tabel, baris hover */
  --surface-3:#F1F5F3;

  --ink:#0F1B17;
  --ink-soft:#5B6B65;
  --ink-faint:#8A9A94;

  --rule:#E8EDEA;
  --rule-strong:#D8E0DC;

  --accent:#16A34A;          /* hijau utama */
  --accent-dark:#12833C;
  --accent-soft:#E9F7EE;
  --accent-line:#16A34A;
  --accent-ink:#FFFFFF;

  --crit:#C0392B;  --crit-soft:#FCEBE9;
  --warn:#B26A00;  --warn-soft:#FDF2E0;
  --info:#2F6DB5;  --info-soft:#E8F0FA;
  --ok:#16A34A;    --ok-soft:#E9F7EE;
  --baru:#6D4AAE; --baru-soft:#F0EBFA;   /* order yang baru terdeteksi hari ini */
  --segera:#0E7C86; --segera-soft:#E3F4F5; /* PO keluar, SO belum terbit */
  --salam-ink:#5A4600; --salam-soft:#FEF6CF;  /* sapaan selamat bekerja */

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sidebar:236px;
  --shadow:0 1px 2px rgba(15,27,23,.04);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ================= kerangka ================= */
.app{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar);flex:0 0 var(--sidebar);background:var(--surface);
  border-right:1px solid var(--rule);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:16px 16px 14px}
.sidebar .brand .mark{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto}
.sidebar .brand .mark img,.sidebar .brand .mark svg{display:block}
.sidebar .brand b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.sidebar .brand span{display:block;font-size:11.5px;color:var(--ink-faint)}

.sidebar .pilih{margin:0 12px 14px;padding:9px 12px;border:1px solid var(--rule-strong);border-radius:9px;
  display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-soft);background:var(--surface)}
.sidebar .pilih b{color:var(--ink);font-weight:600;font-size:12.5px}
.sidebar .pilih .kanan{margin-left:auto;color:var(--ink-faint);font-size:11px}

.sidebar .gulirnav{flex:1;overflow-y:auto;padding:0 10px 10px}
.navsec{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);padding:14px 8px 6px}
.navsec.tebal{color:var(--ink-soft);border-top:1px solid var(--rule);margin-top:8px;padding-top:16px}
.sidebar nav{display:flex;flex-direction:column;gap:1px}
.sidebar nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  color:var(--ink-soft);font-size:13.5px;line-height:1.3}
.sidebar nav a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.sidebar nav a.aktif{background:var(--accent-soft);color:var(--accent-dark);font-weight:600}
.sidebar nav a .ic{width:17px;flex:0 0 17px;display:grid;place-items:center;opacity:.85}
.sidebar nav a .lencana{margin-left:auto;background:var(--crit);color:#fff;font-family:var(--mono);
  font-size:9.5px;font-weight:700;padding:1px 5px;border-radius:8px}

.sidebar .akun{border-top:1px solid var(--rule);padding:12px 14px;display:flex;align-items:center;gap:10px}
.sidebar .akun .av{width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--accent-dark);
  display:grid;place-items:center;font-weight:700;font-size:13px;flex:0 0 auto}
.sidebar .akun .nm{min-width:0}
.sidebar .akun .nm b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .akun .nm span{display:block;font-size:11px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .akun form{margin-left:auto}
.sidebar .akun a.nm{color:inherit;text-decoration:none}
.sidebar .akun a.nm:hover b{text-decoration:underline}
/* formulir pengguna: isian yang tidak berlaku untuk tingkat akses terpilih */
[data-untuk-akses].mati{opacity:.45}
[data-untuk-akses].mati select{cursor:not-allowed}
/* kotak centang sumber order pada formulir divisi */
.pilih-centang{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.pilih-centang label{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:400;
  color:var(--ink);text-transform:none;letter-spacing:0;cursor:pointer}
.pilih-centang input{width:auto;margin:0}
/* kolom Sisa untuk order selesai: statis - tanggal RFS dan hasilnya */
.klok-selesai{display:inline-flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1.25;white-space:nowrap}
.klok-selesai .tgl-selesai{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--ink)}
.klok-selesai [class^="hasil-"]{font-size:11px}
.klok-selesai .hasil-tepat{color:var(--ok)}
.klok-selesai .hasil-terlambat{color:var(--crit)}
.klok-selesai .hasil-cancel,.klok-selesai .hasil-tanpa{color:var(--ink-soft)}
/* panel Perbarui board Presale OGP (UC-OGP-35) */
.grid-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 14px}
.isian-board{min-width:0}
.isian-board label{display:block;margin-bottom:4px}
.isian-board select,.isian-board input,.isian-board textarea{width:100%;min-width:0}
.isian-board textarea{min-height:56px}
.isian-board.lebar{grid-column:1/-1}
/* Banner Tim NOC di Dashboard (UC-OGP-40) */
.banner-noc{border:1px solid var(--rule);border-left:4px solid var(--accent);background:var(--surface);
  border-radius:10px;padding:12px 16px;margin-bottom:16px;font-size:13px;color:var(--ink)}
.banner-noc .bn-sapa{display:flex;gap:10px;align-items:flex-start}
.banner-noc .bn-sapa .ikon{color:var(--accent);flex:0 0 auto;margin-top:1px}
.banner-noc .bn-blok{margin-top:10px;padding:9px 12px;border-radius:8px;border:1px solid}
.banner-noc .bn-selamat,.banner-noc .bn-ok{background:var(--ok-soft);border-color:#BEE7CC;color:#0E6B31}
.banner-noc .bn-telat{background:var(--crit-soft);border-color:#EBC9C4}
.banner-noc .bn-baru{background:var(--accent-soft);border-color:var(--rule)}
.banner-noc .bn-diupdate{background:var(--surface-2);border-color:var(--rule)}
.banner-noc .bn-kosong{background:var(--warn-soft);border-color:#f0d58a;color:#8a5a00}
.banner-noc .bn-baru>b{color:var(--accent-dark)}
.banner-noc .bn-telat>b{color:var(--crit)}
.banner-noc ul{margin:6px 0 0;padding-left:18px;max-height:230px;overflow:auto}
.banner-noc li{margin:3px 0;overflow-wrap:anywhere}
.banner-noc li a{color:inherit}
.banner-noc li .umur{color:var(--crit);white-space:nowrap}
/* Nama pemilik site pada banner akun pemantau (UC-INTI-34) */
.banner-noc li .bn-milik{display:inline-block;margin:0 4px;padding:0 6px;border-radius:999px;font-size:10.5px;
  font-weight:700;letter-spacing:.02em;color:var(--accent-dark);background:var(--accent-soft);border:1px solid var(--rule);white-space:nowrap}
/* Tanda menu belum selesai */
.beta:not(.tag){display:inline-block;padding:1px 6px;border-radius:999px;font-size:9.5px;font-weight:700;vertical-align:middle;
  letter-spacing:.04em;text-transform:uppercase;line-height:1.5;color:#8a5a00;background:#fff1cc;border:1px solid #f0d58a}
.sidebar nav a .beta{margin-left:auto}
.kepala .beta{margin-left:8px}
.daftar-berkas{margin:0 0 6px;padding-left:18px;font-size:12.5px;color:var(--ink-soft);overflow-wrap:anywhere}
/* Analisa Tim NOC (UC-INTI-31) */
.tabel-analisa td,.tabel-analisa th{vertical-align:top}
.tabel-analisa .nama-noc{white-space:nowrap;font-weight:600}
.tabel-analisa td.total{background:var(--surface-2)}
.rinci-nilai{font-size:10.5px;color:var(--ink-faint);white-space:nowrap;margin-top:1px}
.nilai-ok{color:var(--ok)} .nilai-warn{color:var(--warn)} .nilai-crit{color:var(--crit)}
.grid-hari{border-collapse:collapse;font-size:11px;min-width:100%}
.grid-hari th,.grid-hari td{border:1px solid var(--rule);padding:3px 2px;text-align:center;min-width:26px;height:30px}
.grid-hari th{font-weight:600;color:var(--ink-soft);background:var(--surface-2)}
.grid-hari .kiri{text-align:left;padding:3px 8px;white-space:nowrap;position:sticky;left:0;background:var(--surface);z-index:1}
.grid-hari td .kd{display:block;font-size:9.5px;color:var(--ink-faint);line-height:1}
.grid-hari td b{display:block;font-size:11.5px;line-height:1.2}
.h-jaga-update{background:var(--ok-soft)} .h-jaga-update b{color:var(--ok)}
.h-jaga-kosong{background:var(--crit-soft)}
.h-jaga-nanti{background:var(--surface-2)}
.h-libur{background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 3px,var(--surface) 3px,var(--surface) 6px)}
.h-luar b,.h-update b{color:var(--info)}
.legenda-hari{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;color:var(--ink-soft);align-items:center}
.legenda-hari span{display:inline-flex;align-items:center;gap:5px}
.legenda-hari i{width:14px;height:12px;border:1px solid var(--rule);display:inline-block}
.legenda-hari i.h-luar{background:var(--info-soft)}
/* halaman Akun saya */
.profil-akun{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 16px;margin:0;font-size:13.5px}
.profil-akun dt{color:var(--ink-faint)}
.profil-akun dd{margin:0;min-width:0;overflow-wrap:anywhere}
.tautan{background:none;border:0;color:var(--ink-faint);cursor:pointer;font:inherit;font-size:11.5px;padding:2px 4px}
.tautan:hover{color:var(--crit)}

.wrap{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:48px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:10px;
  padding:0 22px;background:var(--surface);position:sticky;top:0;z-index:20}
.topbar .jejak{font-size:13px;color:var(--ink-soft);display:flex;align-items:center;gap:8px}
.topbar .jejak .ic{opacity:.5}

/* Peringatan shift (UC-INTI-71, Johan G W 2026-10-07): pita merah bertulisan putih yang berjalan,
   menyala 30 menit sebelum shift usai dan padam 3 jam sesudahnya. Lekat di atas, di atas topbar —
   karena itu topbar digeser ke bawahnya lewat kelas .ada-banner, bukan saling menimpa. */
.banner-shift{position:sticky;top:0;z-index:30;height:34px;display:flex;align-items:center;
  background:var(--crit);color:#fff;overflow:hidden;font-size:12.5px;font-weight:600;letter-spacing:.01em}
.banner-shift.tenggang{background:#8E2A1F}
/* Sapaan "selamat bekerja" (UC-INTI-73): kuning lembut, tulisan cokelat tua —
   rasio kontrasnya 8,35:1, jadi ia tetap terbaca walau latarnya selembut ini. */
.banner-shift.salam{background:var(--salam-soft);color:var(--salam-ink)}
/* Sapaannya jauh lebih pendek daripada peringatan merah: dengan 26 detik ia akan lebih lama
   kosong daripada terbaca, maka jalannya dipercepat. */
.banner-shift.salam .bs-jalan{animation-duration:16s}
.ada-banner .topbar{top:34px}
.banner-shift .bs-jalan{display:flex;gap:64px;white-space:nowrap;padding-left:100%;
  animation:bs-geser 26s linear infinite;will-change:transform}
.banner-shift:hover .bs-jalan{animation-play-state:paused}
@keyframes bs-geser{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){
  /* Tulisan berjalan menyulitkan sebagian orang membaca; yang penting isinya terbaca, bukan geraknya. */
  .banner-shift .bs-jalan{animation:none;padding-left:0;gap:0;white-space:normal;overflow:hidden;
    text-overflow:ellipsis;padding-inline:16px}
  .banner-shift .bs-jalan span + span{display:none}
}
@media print{ .banner-shift{display:none} }
.topbar .kanan{margin-left:auto;display:flex;align-items:center;gap:14px}
main{padding:22px 22px 70px;flex:1}
main.lebar{max-width:none}

/* ================= judul halaman ================= */
.pagehead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:18px}
h1{font-size:23px;font-weight:700;letter-spacing:-.025em;margin:0;flex:1;min-width:220px}
.aksi{display:flex;gap:8px;flex-wrap:wrap}
h2{font-size:15px;margin:24px 0 9px;font-weight:650;letter-spacing:-.01em}
h3{font-size:13.5px;margin:18px 0 7px;font-weight:600}
.zonatajuk{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin:20px 0 8px}

/* ================= kartu statistik ================= */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px}
.stat{background:var(--surface);border:1px solid var(--rule);border-radius:11px;padding:13px 15px 14px;
  display:flex;align-items:flex-start;gap:10px;box-shadow:var(--shadow)}
.stat .isi{min-width:0;flex:1}
.stat .k{font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint)}
.stat .v{font-size:25px;font-weight:700;letter-spacing:-.03em;line-height:1.2;margin-top:3px;
  font-variant-numeric:tabular-nums}
.stat .d{font-size:11.5px;color:var(--ink-faint);margin-top:1px}
.stat .ikon{width:30px;height:30px;border-radius:9px;background:var(--surface-3);color:var(--ink-faint);
  display:grid;place-items:center;flex:0 0 auto}
.stat.crit .v{color:var(--crit)} .stat.crit .ikon{background:var(--crit-soft);color:var(--crit)}
.stat.warn .v{color:var(--warn)} .stat.warn .ikon{background:var(--warn-soft);color:var(--warn)}
.stat.info .v{color:var(--info)} .stat.info .ikon{background:var(--info-soft);color:var(--info)}
.stat.ok   .v{color:var(--ok)}   .stat.ok   .ikon{background:var(--ok-soft);color:var(--ok)}

/* ================= panel ================= */
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:11px;overflow:hidden;
  box-shadow:var(--shadow)}
.panel + .panel{margin-top:14px}
.panel .kepala{padding:12px 15px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:10px;
  font-size:13.5px;font-weight:650;color:var(--ink)}
.panel .kepala .ikon{width:26px;height:26px;border-radius:8px;background:var(--accent-soft);color:var(--accent-dark);
  display:grid;place-items:center;flex:0 0 auto}
.panel .kepala .kanan{margin-left:auto;font-weight:400;font-size:12.5px;color:var(--ink-soft);
  display:flex;align-items:center;gap:8px}
.panel .isi{padding:15px}
.grid2{display:grid;gap:14px}
@media(min-width:1000px){.grid2{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}}

/* ================= tabel ================= */
.gulir{overflow-x:auto}
.gulir table.padat{min-width:1180px}
/* Rekap bulanan hanya enam kolom angka: ia tidak boleh ikut dipaksa selebar tabel KPI. */
.gulir table.padat.ringkas{min-width:620px}
td.nama{min-width:250px}
td.nama b{font-weight:600;line-height:1.35}
td.ringkas{max-width:280px}
table{border-collapse:collapse;width:100%;font-size:13px}
thead th{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);
  text-align:left;padding:10px 13px;background:var(--surface);border-bottom:1px solid var(--rule);
  white-space:nowrap}
thead th::after{content:"\2195";opacity:.35;margin-left:5px;font-size:10px}
thead th.polos::after{content:""}
tbody td{padding:11px 13px;border-bottom:1px solid var(--rule);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
th.r,td.r{text-align:right}
th.c,td.c{text-align:center}
.kode{font-family:var(--mono);font-size:11.5px;white-space:nowrap}
.klok{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.klok.c-lewat{color:var(--crit);font-weight:700}
.klok.c-dekat{color:var(--warn);font-weight:600}
.kosong{padding:34px 16px;color:var(--ink-faint);font-size:13px;text-align:center}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.samar{color:var(--ink-faint)}
.mono{font-family:var(--mono);font-size:11.5px}
.tautkanan{color:var(--accent);font-weight:600;white-space:nowrap}

/* chip avatar seperti kolom Mitra */
.orang{display:block;min-width:0}
.orang .nm{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ================= pil & tag ================= */
.pil{display:inline-block;font-size:10.5px;font-weight:650;letter-spacing:.03em;padding:3px 8px;
  border-radius:20px;white-space:nowrap}
.k-critical{background:var(--crit-soft);color:var(--crit)}
.k-warning{background:var(--warn-soft);color:var(--warn)}
.k-penting{background:var(--info-soft);color:var(--info)}
.k-baru{background:var(--baru-soft);color:var(--baru)}
.k-segera-hadir{background:var(--segera-soft);color:var(--segera)}
.k-selesai{background:var(--ok-soft);color:var(--ok)}
.s-belum{background:var(--warn-soft);color:var(--warn)}
.s-progress{background:var(--accent-soft);color:var(--accent-dark)}
.s-pending{background:var(--surface-3);color:var(--ink-soft)}
.s-selesai{background:var(--ok-soft);color:var(--ok)}
.s-tutup{background:var(--surface-3);color:var(--ink-faint)}
.s-batal{background:var(--surface-3);color:var(--ink-faint);text-decoration:line-through}
.tag{display:inline-block;font-size:10.5px;padding:3px 7px;border-radius:6px;background:var(--surface-3);
  color:var(--ink-soft);white-space:nowrap}

/* ================= form ================= */
form.kartu{background:var(--surface);border:1px solid var(--rule);border-radius:11px;padding:18px;
  box-shadow:var(--shadow)}
.baris{display:grid;gap:13px;margin-bottom:13px}
@media(min-width:720px){.baris.dua{grid-template-columns:1fr 1fr}.baris.tiga{grid-template-columns:1fr 1fr 1fr}}
label{display:block;font-size:11.5px;font-weight:600;color:var(--ink-soft);margin-bottom:5px}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=datetime-local],
select,textarea{
  width:100%;padding:9px 11px;font:inherit;font-size:13px;color:var(--ink);background:var(--surface);
  border:1px solid var(--rule-strong);border-radius:8px}
input:hover,select:hover,textarea:hover{border-color:var(--ink-faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
textarea{min-height:84px;resize:vertical}
select{cursor:pointer}
.bantu{font-size:11.5px;color:var(--ink-faint);margin-top:5px}
button,.tombol{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;font:inherit;font-size:13px;
  font-weight:600;border-radius:9px;border:1px solid var(--rule-strong);background:var(--surface);
  color:var(--ink);cursor:pointer;white-space:nowrap;box-shadow:var(--shadow)}
button:hover,.tombol:hover{background:var(--surface-2);text-decoration:none}
.utama{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.utama:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:var(--accent-ink)}
.bahaya{color:var(--crit);border-color:#EBC9C4}
.bahaya:hover{background:var(--crit-soft)}
.kecil{padding:6px 11px;font-size:12px;border-radius:8px}
button[disabled]{opacity:.45;cursor:not-allowed}
.inline{display:inline}

/* pencarian di kepala panel */
.cari{position:relative}
.cari input{padding-left:32px;min-width:230px;border-radius:9px}
.cari .ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink-faint);
  pointer-events:none;display:grid;place-items:center}

/* ================= kabar ================= */
.kabar{padding:11px 15px;border-radius:9px;margin-bottom:14px;font-size:13px;border:1px solid}
.kabar.sukses{background:var(--ok-soft);border-color:#BEE7CC;color:#0E6B31}
.kabar.galat{background:var(--crit-soft);border-color:#EBC9C4;color:var(--crit)}
.catatan{border:1px solid var(--rule);border-left:3px solid var(--accent);background:var(--surface);
  border-radius:9px;padding:12px 15px;font-size:12.5px;color:var(--ink-soft);margin-bottom:14px}
.catatan b{color:var(--ink)}
.catatan.warnbar{border-left-color:var(--warn)}

/* ================= detail ================= */
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:11px;overflow:hidden}
.dl>div{background:var(--surface);padding:11px 14px}
.dl dt{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 4px}
.dl dd{margin:0;font-size:13px;font-weight:600}
.linimasa{list-style:none;margin:0;padding:0}
.linimasa li{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--rule);font-size:12.5px}
.linimasa li:last-child{border-bottom:0}
.linimasa .w{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.linimasa .t small{display:block;color:var(--ink-faint);font-size:11.5px;margin-top:2px}

/* ================= corong ================= */
.corong{display:flex;gap:7px;flex-wrap:wrap}
.corong .tahap{flex:1;min-width:104px;background:var(--surface-2);border:1px solid var(--rule);
  border-radius:9px;padding:10px 11px}
.corong .tahap .n{font-size:9.5px;font-weight:600;color:var(--ink-faint);letter-spacing:.1em}
.corong .tahap .a{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.corong .tahap .l{font-size:11px;color:var(--ink-soft)}
.corong .tahap.lolos{background:var(--accent-soft);border-color:#BEE7CC}
.corong .tahap.lolos .a{color:var(--accent-dark)}

/* ================= kpi ================= */
.kpi{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:11px;
  overflow:hidden;margin:0 0 18px}
.kpi>div{background:var(--surface);padding:14px 16px}
.kpi h5{font-size:14px;font-weight:650;margin:0 0 4px}
.kpi .form{font-family:var(--mono);font-size:11.5px;color:var(--accent-dark);margin:0 0 5px;line-height:1.5}
.kpi .tgt{font-size:12.5px;color:var(--ink-soft);margin:0}

/* ================= prinsip / hari ================= */
.prin,.days{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:11px;overflow:hidden}
.prin li,.days li{background:var(--surface);margin:0;padding:14px 16px;display:grid;
  grid-template-columns:30px 1fr;gap:14px;align-items:start}
.prin b,.days .d{font-family:var(--mono);font-size:11px;color:var(--accent-dark);font-weight:700;padding-top:2px}
.days .w em{font-style:normal;display:block;font-size:11.5px;color:var(--ink-faint);margin-top:3px}

/* ================= tab & filter ================= */
.tabmini{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabmini a{padding:6px 12px;border-radius:8px;font-size:12.5px;color:var(--ink-soft);
  border:1px solid var(--rule-strong);background:var(--surface)}
.tabmini a:hover{background:var(--surface-2);text-decoration:none}
.tabmini a.aktif{background:var(--accent-soft);color:var(--accent-dark);border-color:#BEE7CC;font-weight:600}
.filter{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px;
  background:var(--surface);border:1px solid var(--rule);border-radius:11px;padding:13px 15px;
  box-shadow:var(--shadow)}
.filter>div{min-width:136px}
.filter label{margin-bottom:4px}

/* Penyaring boleh-lebih-dari-satu (UC-INTI-94). Tertutup ia selebar dropdown biasa supaya
   bilah penyaring tetap setinggi satu baris; daftar centangnya MELAYANG di atas isi halaman,
   bukan mendorongnya — membuka saringan tidak boleh menggeser tabel yang sedang dibaca. */
.saring-banyak{position:relative}
.saring-banyak>summary{list-style:none;cursor:pointer;user-select:none;
  border:1px solid var(--rule);border-radius:8px;padding:7px 26px 7px 10px;background:var(--surface);
  font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.saring-banyak>summary::-webkit-details-marker{display:none}
.saring-banyak>summary::after{content:"\25BE";position:absolute;right:9px;top:7px;color:var(--ink-faint)}
.saring-banyak[open]>summary{border-color:var(--accent);border-bottom-left-radius:0;border-bottom-right-radius:0}
.saring-banyak .isi-saring{position:absolute;z-index:30;left:0;right:0;min-width:168px;
  max-height:248px;overflow:auto;background:var(--surface);border:1px solid var(--accent);
  border-top:0;border-radius:0 0 8px 8px;box-shadow:var(--shadow);padding:6px 4px}
.saring-banyak .isi-saring label{display:flex;align-items:center;gap:7px;margin:0;
  padding:5px 8px;border-radius:6px;font-size:13px;text-transform:none;letter-spacing:0;
  font-family:var(--sans);color:var(--ink);cursor:pointer;white-space:nowrap}
.saring-banyak .isi-saring label:hover{background:var(--surface-2)}
.saring-banyak .isi-saring input{width:auto;margin:0;flex:none}

/* ========== foto perangkat spare (UC-NOC-41 tahap 2) ========== */
/* Deret kartu yang membungkus sendiri: di ponsel satu kolom, di layar lebar beberapa. Lebar
   minimumnya 210px supaya keterangan geotag di bawahnya tidak pernah terpotong — keterangan itulah
   yang membuat fotonya menjadi bukti, bukan sekadar gambar. */
.foto-deret{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.foto-kartu{border:1px solid var(--rule);border-radius:11px;overflow:hidden;background:var(--surface)}
.foto-kartu img{display:block;width:100%;height:150px;object-fit:cover;background:var(--surface-2)}
.foto-ket{padding:8px 10px;font-size:12.5px}
.foto-ket .tag{font-size:11px}
.foto-ket .rinci-nilai{margin-top:2px}
.foto-ket .k-crit{color:var(--crit)}

/* Peta rak (UC-NOC-42 tahap 2). Dibaca dari puncak ke dasar seperti rak sungguhan, dan tiap baris
   setinggi satu U supaya perangkat 3U benar-benar terlihat memakan tiga baris — itulah yang
   membuat peta ini jujur tentang ruang yang tersisa. */
.rakbaris{display:flex;align-items:center;gap:10px;padding:5px 9px;border:1px solid var(--rule);
  border-radius:7px;min-height:30px;font-size:13px}
.rakU{flex:0 0 46px;font-size:11.5px;text-align:right}
.rakbaris .rinci-nilai{margin-top:1px}

/* ================= login ================= */
body.polos{display:grid;place-items:center;min-height:100vh;padding:20px;background:var(--surface-2)}
.masuk{width:100%;max-width:368px;background:var(--surface);border:1px solid var(--rule);
  border-radius:14px;padding:28px;box-shadow:0 4px 22px rgba(15,27,23,.06)}
.masuk .logo{display:flex;align-items:center;gap:10px;margin-bottom:5px}
.masuk .logo img,.masuk .logo svg{display:block}
.masuk .logo b{font-size:16px;font-weight:700;letter-spacing:-.01em}
.masuk p.sub{color:var(--ink-faint);font-size:12.5px;margin:0 0 20px}
.masuk button{width:100%;justify-content:center;margin-top:8px}
.jejakbawah{font-size:11.5px;color:var(--ink-faint);margin-top:22px;text-align:center}

@media (max-width:900px){
  .app{flex-direction:column}
  .sidebar{width:auto;flex:none;height:auto;position:static;border-right:0;border-bottom:1px solid var(--rule)}
  .sidebar .gulirnav{max-height:none}
  .sidebar nav{flex-direction:row;flex-wrap:wrap}
  .navsec{padding:10px 8px 4px}
}


/* ================= papan NOC (dashboard layar ruang NOC) ================= */
/* Kotak ringkasan selalu mengisi lebar penuh sampai tepi kanan (lurus dengan panel shift),
   berapa pun jumlah kotaknya: satu baris bila muat, bila tidak baris terakhir ikut melebar. */
.papan{display:flex;flex-wrap:wrap;gap:14px}
.papan > .papan-kotak{flex:1 1 196px;min-width:0}
.papan-kotak{display:flex;flex-direction:column;gap:2px;padding:20px 22px 22px;border-radius:14px;
  border:1px solid var(--rule);background:var(--surface);box-shadow:var(--shadow);
  color:var(--ink);text-decoration:none;position:relative;transition:box-shadow .12s,transform .12s}
.papan-kotak:hover{text-decoration:none;box-shadow:0 4px 16px rgba(15,27,23,.09);transform:translateY(-1px)}
.papan-kotak .kepala{display:flex;align-items:center;gap:10px}
.papan-kotak .kepala .k{flex:1}
.papan-kotak .ikon{width:34px;height:34px;border-radius:10px;flex:0 0 auto;
  display:grid;place-items:center;background:var(--surface-3);color:var(--ink-faint)}
.papan-kotak .isi{display:flex;align-items:flex-start;gap:16px;margin:6px 0 2px}
.papan-kotak .isi .v{margin:0}
.papan-kotak .k{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-faint)}
.papan-kotak .v{font-size:48px;font-weight:800;line-height:1;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.papan-kotak .d{font-size:13px;color:var(--ink-soft)}
.papan-kotak .d.tegas{color:var(--crit);font-weight:700}

/* panel "NOC hari ini" di kanan judul dashboard.
   Warnanya menyatakan KEADAAN, bukan jam jaga - API USDM tidak memberi jam. */
.shift-kini{display:flex;flex-direction:column;gap:6px;align-items:flex-end;
  padding:9px 12px;border:1px solid var(--rule);border-radius:12px;background:var(--surface);
  box-shadow:var(--shadow);max-width:min(520px,52vw)}
.shift-kini .kepala{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.shift-kini .kepala .ic{display:grid;place-items:center;color:var(--ink-faint)}
.shift-kini .kepala .tgl{font-family:var(--mono);font-size:10.5px;letter-spacing:0;
  text-transform:none;color:var(--ink-faint);opacity:.8}
.shift-kini .kepala .tgl b{font-weight:700;letter-spacing:.06em;opacity:.95}
.shift-kini .orang{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}
.shift-orang{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;
  font-size:12.5px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.shift-orang i{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;opacity:.7}
/* sedang jaga: satu-satunya yang ditonjolkan */
.shift-orang.ok{background:var(--ok);color:var(--accent-ink);border-color:var(--ok);
  box-shadow:0 0 0 3px var(--ok-soft)}
.shift-orang.ok b{color:var(--accent-ink);opacity:.85}
/* shift berikutnya: kuning tegas + jamnya (UC-INTI-25). Sengaja jauh lebih pekat dari
   .lain (kuning pucat = shift tidak dikenali) supaya keduanya tidak tertukar. Teks gelap
   #3A2C00 di atas #FACC15 berkontras +/-10:1. */
.shift-orang.berikut{background:#FACC15;color:#3A2C00;border-color:#EAB308;box-shadow:0 0 0 3px #FEF3C7}
.shift-orang.berikut b{color:#3A2C00;opacity:.9}
.shift-orang.berikut i{opacity:.85}
/* shift sebelumnya: abu-abu berisi, terbaca penuh tetapi tidak bersaing dengan hijau/kuning */
.shift-orang.sebelum{background:#E5E7EB;color:#3F4A46;border-color:#D1D5DB}
.shift-orang.sebelum b{color:#3F4A46;opacity:.85}
.shift-kini .ket .lalu{color:var(--ink-faint)}
.shift-kini .ket .lanjut{color:#7A5C00;font-weight:600}
/* belum mulai - jelas terbaca, tetapi tidak bersaing dengan yang sedang jaga */
.shift-orang.nanti{background:var(--surface-2);color:var(--ink-soft);border-color:var(--rule-strong)}
/* sudah usai - paling redup, hanya untuk melengkapi gambaran hari itu */
.shift-orang.usai{background:transparent;color:var(--ink-faint);border-color:var(--rule)}
.shift-orang.lain{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-soft)}
.shift-orang.libur{background:var(--surface-2);color:var(--ink-faint);
  border-color:var(--rule);text-decoration:line-through;text-decoration-thickness:1px}
.shift-orang b{font-weight:600;font-size:10.5px;font-family:var(--mono);opacity:.75;letter-spacing:-.02em}
.shift-kini.kosong .ket{color:var(--warn)}
.shift-kini .ket.sepi{color:var(--warn)}
.shift-kini .ket{font-size:11px;color:var(--ink-soft)}
@media (max-width:900px){ .shift-kini{max-width:100%;align-items:flex-start} }

/* penanda fitur yang belum matang */
.tag.beta{background:var(--warn-soft);color:var(--warn);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;margin-left:8px}

/* pop-up dalam halaman */
body.lapis-terbuka{overflow:hidden}
/* [hidden] bawaan peramban hanya display:none dengan kekhususan rendah, sehingga
   .lapis{display:flex} mengalahkannya dan pop-up justru selalu tampil. Aturan ini yang
   membuat atribut hidden benar-benar berlaku - tanpa !important, cukup lebih khusus. */
.lapis[hidden]{display:none}
.lapis{position:fixed;inset:0;z-index:60;background:rgba(15,27,23,.42);
  display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow:auto}
.lapis-kotak{background:var(--surface);border:1px solid var(--rule-strong);border-radius:14px;
  box-shadow:0 18px 48px rgba(15,27,23,.22);width:min(720px,100%);max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden}
.lapis-kotak > .kepala{display:flex;align-items:center;gap:10px;padding:14px 18px;
  border-bottom:1px solid var(--rule);background:var(--surface-2);
  font-weight:700;font-size:14.5px}
.lapis-kotak > .kepala .tutup{margin-left:auto;background:none;border:0;cursor:pointer;
  font-size:24px;line-height:1;color:var(--ink-faint);padding:0 4px}
.lapis-kotak > .kepala .tutup:hover{color:var(--ink)}
.lapis-kotak > .isi{padding:16px 18px;overflow:auto}
.lapis-kotak .linimasa{padding:0;margin:0}
.lapis-kotak .kepala-kecil{font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);margin:18px 0 8px;
  padding-top:14px;border-top:1px solid var(--rule)}
/* isi dokumen Log Progress: teks apa adanya, jaraknya dijaga agar mudah dibaca */
.dokumen{font-family:var(--sans);font-size:13.5px;line-height:1.75;white-space:pre-wrap;
  word-break:break-word;margin:0;padding:14px 16px;border:1px solid var(--rule);
  border-radius:10px;background:var(--surface-2);color:var(--ink);max-height:46vh;overflow:auto}

/* pemilih nama NOC pada daftar hasil klik kotak papan */
.sortir-noc{display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  padding:10px 14px;border-bottom:1px solid var(--rule);background:var(--surface-2)}
.sortir-noc .judul{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);margin-right:4px}
.sortir-noc .pilihan{display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border:1px solid var(--rule-strong);border-radius:999px;
  background:var(--surface);color:var(--ink-soft);font-size:12.5px;text-decoration:none;
  transition:border-color .12s,color .12s}
.sortir-noc .pilihan:hover{text-decoration:none;border-color:var(--accent);color:var(--ink)}
.sortir-noc .pilihan b{font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-faint)}
.sortir-noc .pilihan.aktif{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.sortir-noc .pilihan.aktif b{color:var(--accent-ink);opacity:.85}
.papan-kotak.crit .v{color:var(--crit)} .papan-kotak.crit .ikon{background:var(--crit-soft);color:var(--crit)}
.papan-kotak.warn .v{color:var(--warn)} .papan-kotak.warn .ikon{background:var(--warn-soft);color:var(--warn)}
.papan-kotak.info .v{color:var(--info)} .papan-kotak.info .ikon{background:var(--info-soft);color:var(--info)}
.papan-kotak.ok   .v{color:var(--ok)}   .papan-kotak.ok   .ikon{background:var(--ok-soft);color:var(--ok)}
.papan-kotak.baru .v{color:var(--baru)} .papan-kotak.baru .ikon{background:var(--baru-soft);color:var(--baru)}
.papan-kotak.segera .v{color:var(--segera)} .papan-kotak.segera .ikon{background:var(--segera-soft);color:var(--segera)}
.papan-kotak.terpilih{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.papan-kotak.crit.terpilih{border-color:var(--crit);box-shadow:0 0 0 3px var(--crit-soft)}
.papan-kotak.warn.terpilih{border-color:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.papan-kotak.info.terpilih{border-color:var(--info);box-shadow:0 0 0 3px var(--info-soft)}
.petunjuk{margin-top:18px;text-align:center;font-size:13.5px;color:var(--ink-faint)}

/* tabel papan: lebih besar agar terbaca dari jarak layar dinding */
table.papan-tabel{font-size:15px}
table.papan-tabel thead th{font-size:11px;padding:12px 15px}
table.papan-tabel tbody td{padding:14px 15px}
table.papan-tabel .klok{font-size:16px;font-weight:700}
table.papan-tabel .kode{font-size:13px}
table.papan-tabel .nama{min-width:280px;font-weight:500}

/* ================= alur proses ================= */
.alur{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;
  background:var(--surface);border:1px solid var(--rule);border-radius:11px;padding:12px 15px;
  box-shadow:var(--shadow)}
.alur .tahap{display:flex;flex-direction:column;padding:5px 11px;border-radius:8px;
  background:var(--surface-2);font-size:12.5px;font-weight:600;color:var(--ink-soft);line-height:1.25}
.alur .tahap i{font-style:normal;font-size:10.5px;font-weight:400;color:var(--ink-faint)}
.alur .tahap.kini{background:var(--accent-soft);color:var(--accent-dark)}
.alur .tahap.kini i{color:var(--accent-dark);opacity:.8}
.alur .panah{color:var(--ink-faint);font-size:13px}


/* ringkasan order pada papan: baris kedua berisi reseller + site status */
.ringkas-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;
  font-size:12.5px;color:var(--ink-soft)}
.pil.site-ok{background:var(--ok-soft);color:var(--ok)}
.pil.site-crit{background:var(--crit-soft);color:var(--crit)}
.pil.site-warn{background:var(--warn-soft);color:var(--warn)}
.pil.site-netral{background:var(--info-soft);color:var(--info)}
table.papan-tabel .ringkas-sub{font-size:13.5px}


/* rincian per sumber: di ruang kosong kanan angka, satu baris per sumber */
.papan-kotak{padding-bottom:16px}
.papan-kotak .sumber{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
  padding-top:5px;max-height:74px;overflow-y:auto}
.papan-kotak .sumber span{display:flex;align-items:baseline;gap:6px;font-size:11px;color:var(--ink-faint);
  line-height:1.35}
.papan-kotak .sumber i{font-style:normal;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.papan-kotak .sumber b{font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums}


/* kolom Last update pada daftar Critical/Warning/Penting/Baru (UC-OGP-34) */
td.sel-upd{min-width:230px;max-width:360px}
.tgl-upd{font-weight:650;white-space:nowrap;font-size:13px}
.tgl-upd span{font-weight:400;font-size:11.5px}
.tgl-upd .basi{color:var(--crit)}
.teks-upd{font-size:12.5px;color:var(--ink-soft);margin-top:2px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* summary kotak Selesai (UC-OGP-33): donut per bulan dan per NOC, sebelum daftarnya */
.grid-donut{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:12px;padding:14px 15px}
.kartu-donut{border:1px solid var(--rule);border-radius:10px;padding:12px 14px;background:var(--surface)}
.kartu-donut.kartu-utama{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.kartu-donut .judul{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-weight:650;font-size:13.5px;margin-bottom:6px}
.kartu-donut .judul span{font-weight:400;font-size:11.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.kartu-donut .badan{display:flex;align-items:center;gap:12px}
.donut{flex:none;display:block}
.donut circle{transition:opacity .15s}
.donut:hover circle{opacity:.55}
.donut circle:hover{opacity:1}
.donut-angka{font-size:21px;font-weight:700;fill:var(--ink);font-variant-numeric:tabular-nums}
.donut-ket{font-size:9.5px;fill:var(--ink-soft)}
.legenda-donut{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
.legenda-donut li{display:grid;grid-template-columns:10px minmax(0,1fr) auto 22px;align-items:center;gap:6px;
  font-size:12.5px;color:var(--ink-soft)}
.legenda-donut .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legenda-donut i{width:10px;height:10px;border-radius:3px}
.legenda-donut b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:650}
.legenda-donut .n{color:var(--ink-faint);font-size:11.5px;text-align:right;font-variant-numeric:tabular-nums}
.catatan-donut{margin-top:8px;font-size:11.5px;color:var(--ink-faint)}
/* rincian per bulan satu NOC: melayang di bawah kartu saat kursor di atasnya (atau kartu difokus) */
.panel.luber{overflow:visible}
.kartu-donut.ada-rincian{position:relative;outline:none}
.kartu-donut.ada-rincian:hover,.kartu-donut.ada-rincian:focus-within{border-color:var(--accent)}
.rincian-noc{display:none;position:absolute;z-index:30;left:-1px;right:-1px;top:calc(100% + 8px);
  background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:11px 13px 10px;
  box-shadow:0 10px 28px rgba(15,23,42,.16);animation:muncul-rincian .12s ease-out}
.rincian-noc::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px} /* jembatan kursor */
.kartu-donut.ada-rincian:hover .rincian-noc,.kartu-donut.ada-rincian:focus-within .rincian-noc{display:block}
@keyframes muncul-rincian{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.rincian-noc .rj{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-weight:650;font-size:12.5px;margin-bottom:8px}
.rincian-noc .rj span{font-weight:400;font-size:11px;color:var(--ink-faint);white-space:nowrap}
.rincian-noc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rincian-noc li{display:grid;grid-template-columns:62px minmax(0,1fr) 36px 22px;align-items:center;gap:7px;font-size:12px;color:var(--ink-soft)}
.rincian-noc .bl{white-space:nowrap}
.rincian-noc .batang{display:flex;gap:2px;height:12px;border-radius:3px;overflow:hidden}
.rincian-noc .batang i{display:block;min-width:3px}
.rincian-noc .batang.kosong{border:1px dashed var(--rule);align-items:center;padding:0 5px}
.rincian-noc .batang em{font-size:10.5px;color:var(--ink-faint);font-style:normal;white-space:nowrap}
.rincian-noc b{color:var(--ink);font-weight:650;text-align:right;font-variant-numeric:tabular-nums}
.rincian-noc .n{color:var(--ink-faint);font-size:11px;text-align:right;font-variant-numeric:tabular-nums}
.rincian-noc .kunci{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:9px;padding-top:8px;border-top:1px solid var(--rule);font-size:11px;color:var(--ink-soft)}
.rincian-noc .kunci span{display:inline-flex;align-items:center;gap:5px}
.rincian-noc .kunci i{width:9px;height:9px;border-radius:2px}
.lihat-tabel{border-top:1px solid var(--rule);padding:9px 15px 11px;font-size:12.5px}
.lihat-tabel summary{cursor:pointer;color:var(--ink-soft)}
.lihat-tabel table{margin-top:8px}
/* Analisa Tim NOC - peringkat & blok per NOC (UC-INTI-31, 2026-09-16) */
.tabel-analisa .urutan{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--surface-2);color:var(--ink-soft);font-weight:700;font-size:11.5px}
.tabel-analisa .urutan.juara{background:var(--ok-soft);color:var(--ok)}
.tabel-analisa b.skor{font-size:15px}
.blok-noc{border-top:1px solid var(--rule)}
.blok-noc:first-child{border-top:0}
.kepala-noc{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:9px 15px;background:var(--surface-2);
  font-weight:600;font-size:13px}
.kepala-noc .kanan{margin-left:auto;font-weight:400;font-size:11.5px;color:var(--ink-soft)}
.dua-kolom{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 18px;padding:10px 15px}
.dua-kolom>div{min-width:0}
.judul-kolom{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);margin-bottom:6px}
.daftar-site{list-style:none;margin:0;padding:0;max-height:260px;overflow:auto;font-size:12.5px}
.daftar-site li{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--rule)}
.daftar-site li:last-child{border-bottom:0}
.daftar-site li a{color:inherit;min-width:0;overflow-wrap:anywhere}
.daftar-site li>span{margin-left:auto;white-space:nowrap;font-size:11px}
.daftar-site.sepi .umur{color:var(--crit)}
.daftar-site .rinci-nilai{white-space:normal}
.h-jaga-sebagian{background:var(--warn-soft)} .h-jaga-sebagian b{color:var(--warn)}
.legenda-hari i.h-jaga-sebagian{background:var(--warn-soft)}
/* Dashboard Tim NOC: banner 80% sejajar kotak "NOC sedang jaga" 20% (Johan G W, 2026-09-16) */
.baris-atas{display:flex;gap:14px;align-items:stretch;margin-bottom:16px}
.baris-atas .banner-noc{flex:1 1 80%;min-width:0;margin-bottom:0}
/* Deretan jendela menempati tempat banner; kotak jaga 80% dari ukuran lamanya (Johan G W, 2026-09-20) */
.baris-atas .papan{flex:1 1 84%;min-width:0}
.baris-atas .kolom-jaga{flex:0 0 16%;min-width:0;display:flex}
.papan-kotak.tugas .v{color:var(--accent)} .papan-kotak.tugas .ikon{background:var(--accent-soft);color:var(--accent)}
.papan > .papan-kotak{flex:1 1 150px;padding:16px 16px 18px}
.papan-kotak .v{font-size:40px}
.banner-noc{margin-bottom:0}
.baris-atas .shift-kini{width:100%;max-width:100%;align-items:stretch}
.baris-atas .shift-kini .kepala{flex-wrap:wrap;gap:4px}
/* isi kotak disusun vertikal */
.baris-atas .shift-kini .orang{flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:4px}
.baris-atas .shift-kini .orang .shift-orang{width:100%;justify-content:space-between}
/* NOC sebelumnya & berikutnya: 80% dari ukuran semula */
.baris-atas .shift-orang.sebelum,.baris-atas .shift-orang.berikut{font-size:10px;padding:2px 7px}
.baris-atas .shift-orang.sebelum b,.baris-atas .shift-orang.berikut b{font-size:8.5px}
.baris-atas .shift-orang.sebelum i,.baris-atas .shift-orang.berikut i{font-size:7.5px}
@media (max-width:1100px){
  .baris-atas{flex-wrap:wrap}
  .baris-atas .banner-noc,.baris-atas .kolom-jaga{flex:1 1 100%}
}

/* Pop-up pratinjau berkas evidence (Johan G W, 2026-09-20) */
.lapis-kotak.lapis-berkas{width:min(1100px,100%);max-height:92vh}
.lapis-berkas > .kepala .nama{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lapis-berkas > .kepala .unduh-luar{margin-left:auto;font-size:12px;font-weight:600}
.lapis-berkas > .kepala .tutup{margin-left:12px}
.lapis-berkas > .isi{padding:0;background:var(--surface-2);display:flex;
  align-items:center;justify-content:center;min-height:40vh}
.lapis-berkas > .isi img{max-width:100%;max-height:80vh;display:block}
.lapis-berkas > .isi iframe{width:100%;height:80vh;border:0;background:#fff;color-scheme:light}
.lapis-berkas > .isi .dokumen{width:100%;max-height:80vh;margin:0;border:0;border-radius:0;background:var(--surface)}
.daftar-berkas .unduh{margin-left:8px;font-size:11px;color:var(--ink-faint)}
.daftar-berkas .unduh:hover{color:var(--ink)}

/* Linimasa Log Progress pada detail order OGP (Johan G W, 2026-09-20) */
.panel-log{overflow:hidden}
.log-kepala{background:var(--ok,#16a34a);color:#fff;font-weight:700;font-size:12px;
  letter-spacing:.08em;text-align:center;padding:9px 12px}
.log-kepala.selesai{background:#0f7a43}
.log-linimasa{list-style:none;margin:0;padding:14px 16px 6px;max-height:540px;overflow-y:auto;position:relative}
.log-linimasa li{position:relative;padding:0 0 14px 34px}
/* garis penghubung antar titik, berhenti pada titik terakhir */
.log-linimasa li::before{content:"";position:absolute;left:10px;top:20px;bottom:-2px;
  width:2px;background:var(--rule)}
.log-linimasa li:last-child{padding-bottom:4px}
.log-linimasa li:last-child::before{display:none}
.log-linimasa .tanda{position:absolute;left:0;top:4px;width:22px;height:22px;border-radius:50%;
  background:var(--ok,#16a34a);display:flex;align-items:center;justify-content:center}
.log-linimasa .tanda::after{content:"";width:8px;height:4px;border-left:2px solid #fff;
  border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.log-linimasa .kartu{border:1px solid var(--rule);border-radius:10px;background:var(--surface);
  padding:9px 12px 10px}
.log-linimasa .kartu .atas{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.log-linimasa .kartu .sumber{background:var(--surface-2);border-radius:5px;padding:1px 7px;
  font-size:10.5px;font-weight:700;color:var(--ink-faint);max-width:60%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.log-linimasa .kartu .tgl{font-size:10.5px;color:var(--ink-faint)}
.log-linimasa .kartu p{margin:0;font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
@media (max-width:720px){ .log-linimasa{max-height:none} }

/* Pilihan sebab cancel/stuck oleh tim AO (UC-OGP-43, 2026-09-20) */
.pilihan-sebab{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;margin:6px 0;
  border:1px solid var(--rule);border-radius:9px;cursor:pointer;background:var(--surface)}
.pilihan-sebab:hover{border-color:var(--rule-strong)}
.pilihan-sebab input{margin-top:3px}
.pilihan-sebab span{display:block;font-size:13px}
.pilihan-sebab small{display:block;color:var(--ink-faint);font-size:11.5px;margin-top:2px}

/* Kartu penilaian pada menu Kinerja NOC (Johan G W, 2026-09-20) */
.nilai-kegiatan{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.nilai-kegiatan > .skor{flex:0 0 132px;border:1px solid var(--rule);border-radius:12px;
  background:var(--surface-2);padding:14px 10px;text-align:center}
.nilai-kegiatan > .skor b{display:block;font-size:44px;font-weight:800;line-height:1;letter-spacing:-.03em}
.nilai-kegiatan > .skor span{display:block;font-size:11px;color:var(--ink-faint);margin-top:4px}
.nilai-kegiatan > .skor.nilai-ok b{color:var(--ok)}
.nilai-kegiatan > .skor.nilai-warn b{color:var(--warn)}
.nilai-kegiatan > .skor.nilai-crit b{color:var(--crit)}
.nilai-kegiatan > table{flex:1 1 320px}
@media (max-width:720px){ .nilai-kegiatan > .skor{flex:1 1 100%} }

/* Kinerja NOC dirombak (UC-INTI-66, Johan G W 2026-10-06): lingkaran nilai, grafik bulanan,
   dan bilah capaian tiap unsur. Semuanya SVG/CSS sendiri, tanpa pustaka grafik. */
.gauge{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.gauge svg{width:88px;height:88px;flex:0 0 auto}
.gauge-teks b{display:block;font-size:13px;line-height:1.3}
.gauge-teks span{display:block;font-size:11px;color:var(--ink-faint);margin-top:2px}
.grid-kinerja{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.kartu-kinerja{display:block;border:1px solid var(--rule);border-radius:12px;padding:12px;
  text-decoration:none;color:inherit;background:var(--surface);transition:border-color .12s,box-shadow .12s}
.kartu-kinerja:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.grafik{margin:0 0 12px}
.grafik figcaption{font-size:11px;color:var(--ink-soft);margin-bottom:4px}
.grafik svg{width:100%;max-width:560px;height:auto;display:block}
.unsur-kinerja td.bilah{min-width:150px}
.bilah-luar{height:8px;border-radius:5px;background:var(--surface-3);overflow:hidden;margin-bottom:3px}
.bilah-isi{height:100%;border-radius:5px}
.bilah-angka{font-size:11px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
/* Sebaran pembaruan tiap hari jaga (UC-INTI-68): satu batang satu hari, supaya hari jaga yang
   kosong terlihat sebagai kekosongan, bukan tersamar di dalam rata-rata. */
.hari-jaga{display:flex;align-items:flex-end;gap:3px;height:72px;padding-top:4px;overflow-x:auto}
.hari-jaga .hj{flex:1 0 14px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.hari-jaga .hj-batang{width:100%;border-radius:3px 3px 0 0;min-height:3px}
.hari-jaga .hj-batang.ok{background:var(--ok)}
.hari-jaga .hj-batang.warn{background:var(--warn)}
.hari-jaga .hj-batang.crit{background:var(--crit);opacity:.45}
.hari-jaga .hj-batang.kosong{background:var(--surface-3)}
.hari-jaga .hj span{font-size:9px;color:var(--ink-faint);margin-top:2px;line-height:1}
/* Legenda grafik banyak deret (UC-INTI-70): titik berwarna menandai identitas, namanya tetap
   memakai warna teks — supaya warna tidak pernah menjadi satu-satunya penanda. */
.legenda-garis{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px}
.legenda-garis span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-soft)}
.legenda-garis i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.titik-deret{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:-1px}
/* Kinerja harian (UC-INTI-72): satu lipatan satu hari jaga, memakai panah yang sama dengan lipatan
   rincian History Site supaya cara membukanya satu macam saja di seluruh NOMM. */
.hari-rinci{border-top:1px solid var(--rule);padding:6px 0}
.hari-rinci:first-of-type{border-top:0}
.hari-rinci > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;font-size:12.5px;padding:3px 2px;border-radius:7px}
.hari-rinci > summary::-webkit-details-marker{display:none}
.hari-rinci > summary:hover{background:var(--surface-2)}
.hari-rinci > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hari-rinci > summary .rw-panah{width:8px;height:8px;flex:0 0 auto;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .12s;opacity:.75}
.hari-rinci[open] > summary .rw-panah{transform:rotate(225deg) translate(-2px,-2px)}
.hari-rinci .gulir{margin-top:4px}
/* Panel yang dapat ditutup-buka (UC-NOC-22): judul panelnya sendiri yang diklik. Panahnya sama
   dengan lipatan lain di NOMM supaya cara membukanya satu macam saja. */
.panel-lipat > summary{list-style:none;cursor:pointer;user-select:none}
.panel-lipat > summary::-webkit-details-marker{display:none}
.panel-lipat > summary:hover{background:var(--surface-2)}
.panel-lipat > summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.panel-lipat > summary .rw-panah{width:8px;height:8px;flex:0 0 auto;margin-right:2px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .12s;opacity:.65}
.panel-lipat[open] > summary .rw-panah{transform:rotate(225deg) translate(-2px,-2px)}
@media (max-width:720px){
  .gauge{width:100%}
  .unsur-kinerja td.bilah{min-width:110px}
}

/* ================= tampilan ponsel (Johan G W, 2026-09-20) =================
   Menu samping menjadi laci yang tertutup secara bawaan, sehingga isi halaman langsung terlihat.
   Penanda .menu-tik adalah kotak centang tersembunyi - dibuka lewat label, tanpa JavaScript. */
.menu-tik{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.kepala-hp{display:flex;align-items:center;gap:8px}
/* di layar lebar isi menu tetap satu kolom yang memenuhi tinggi sidebar seperti sebelumnya */
.sidebar .isi-nav{display:flex;flex-direction:column;flex:1;min-height:0}
.kepala-hp .brand{flex:1;min-width:0}
.menu-tombol{display:none}

@media (max-width:900px){
  .sidebar{position:sticky;top:0;z-index:50;max-height:100vh;overflow:auto;box-shadow:0 1px 0 var(--rule)}
  .kepala-hp{padding-right:12px}
  .menu-tombol{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
    padding:8px 12px;border:1px solid var(--rule-strong);border-radius:10px;
    font-size:13px;font-weight:600;background:var(--surface-2);color:var(--ink);cursor:pointer;
    min-height:40px}
  .menu-tombol:active{background:var(--rule)}
  .sidebar .isi-nav{display:none}
  .menu-tik:checked ~ .isi-nav{display:block}
  /* menu terbuka: satu butir per baris supaya mudah disentuh */
  .sidebar nav{flex-direction:column}
  .sidebar nav a{min-height:42px;font-size:14px}
  .sidebar .gulirnav{max-height:62vh;overflow:auto}
  main{padding:14px 14px 56px}
  .pagehead h1{font-size:21px}
  .topbar{padding:8px 14px}
  /* isian formulir memenuhi lebar layar, tidak berdesakan dua kolom */
  .filter{gap:8px}
  .filter > div{min-width:100%}
  .filter label{margin-bottom:2px}
  .panel > .isi{padding:12px 14px}
  .panel > .kepala{padding:11px 14px;font-size:13.5px}
  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .grid-donut{grid-template-columns:1fr}
  .dua-kolom{grid-template-columns:1fr}
  /* tabel lebar tetap digulir mendatar, dengan sentuhan yang lancar */
  .gulir{-webkit-overflow-scrolling:touch}
  .gulir table{font-size:12.5px}
  /* tombol dan tautan cukup besar untuk jari */
  .tombol,.tombol.kecil,button{min-height:38px}
}
@media (max-width:420px){
  /* dua kotak sebaris tetap terbaca di layar 360-414 px, jadi papan tidak terlalu panjang */
  .papan > .papan-kotak{flex:1 1 calc(50% - 7px);padding:12px 12px 14px}
  .papan-kotak .v{font-size:30px}
  .papan-kotak .k{font-size:10.5px;letter-spacing:.06em}
  .papan-kotak .d{font-size:11.5px}
  .papan-kotak .ikon{width:26px;height:26px}
  main{padding:12px 12px 52px}
}

/* Ponsel: formulir saring dua kolom, dan baris tabel tidak memanjang karena teks ringkasan */
@media (max-width:900px){
  .filter{display:grid;grid-template-columns:1fr 1fr;align-items:end}
  .filter > div{min-width:0}
  /* isian pencarian dan tombol memenuhi lebar */
  .filter > div:first-child{grid-column:1 / -1}
  .filter > div:last-child{grid-column:1 / -1}
  .filter input[type=text],.filter input[type=date],.filter select{width:100%}
  .gulir td.ringkas{max-width:200px}
  /* baris kedua (nama site berulang) disembunyikan di ponsel supaya baris tabel tidak memanjang */
  .gulir td.ringkas > .samar.mono{display:none}
  .gulir td{padding-top:8px;padding-bottom:8px}
}

/* Kelompok menu dapat dilipat: judulnya diklik -> submenunya hilang / muncul (Johan G W, 2026-09-21) */
.grup-nav > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  user-select:none;border-radius:8px}
.grup-nav > summary::-webkit-details-marker{display:none}
.grup-nav > summary:hover{color:var(--ink)}
.grup-nav > summary .panah-lipat{margin-left:auto;width:9px;height:9px;flex:0 0 auto;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .12s;opacity:.7}
.grup-nav[open] > summary .panah-lipat{transform:rotate(225deg) translate(-2px,-2px)}
.grup-nav > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Tombol menutup menu di ponsel: panah ke atas, di bagian paling bawah daftar menu */
.tutup-menu-hp{display:none}
@media (max-width:900px){
  .tutup-menu-hp{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
    margin:8px 12px 12px;padding:10px 14px;min-height:42px;border:1px solid var(--rule-strong);
    border-radius:10px;background:var(--surface-2);color:var(--ink-soft);
    font-size:12.5px;font-weight:600;user-select:none}
  .tutup-menu-hp:active{background:var(--rule)}
  .tutup-menu-hp .panah-atas{width:9px;height:9px;flex:0 0 auto;
    border-left:1.8px solid currentColor;border-top:1.8px solid currentColor;
    transform:rotate(45deg) translate(1px,1px)}
}

/* ================= menu samping dapat dilipat (Johan G W, 2026-10-03) =================
   Masukan tim Presales: di layar lebar menu tidak dapat ditutup - tombolnya dulu hanya ada di tampilan
   ponsel. Penanda .lipat-tik adalah kotak centang tersembunyi; tombolnya ada di bilah atas. Tanpa JavaScript. */
.lipat-tik{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.lipat-tombol{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:10px;flex:0 0 auto;
  border:1px solid var(--rule-strong);border-radius:8px;background:var(--surface);color:var(--ink-soft);cursor:pointer}
.lipat-tombol:hover{background:var(--surface-2);color:var(--ink)}
.lipat-tik:checked ~ .wrap .lipat-tombol{background:var(--accent-soft);border-color:#BEE7CC;color:var(--accent-dark)}
@media (min-width:901px){
  .sidebar{transition:margin-left .18s ease}
  /* tertutup: sidebar digeser keluar layar, isi halaman melebar sendiri */
  .lipat-tik:checked ~ .sidebar{margin-left:calc(-1 * var(--sidebar));opacity:0;pointer-events:none}
}
@media (max-width:900px){
  /* di ponsel laci sudah punya tombolnya sendiri di kepala menu */
  .lipat-tombol{display:none}
}

/* History Site (UC-INTI-48, Johan G W 2026-10-04): garis waktu perjalanan satu site. */
.rw-tahap{display:flex;gap:14px;padding:11px 0;border-top:1px solid var(--rule)}
.rw-tahap:first-child{border-top:0;padding-top:2px}
.rw-kiri{flex:0 0 130px}
.rw-fase{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-dark)}
.rw-tgl{font-size:11.5px}
.rw-isi{flex:1;min-width:0}
.rw-judul{font-size:13px;font-weight:600;margin-bottom:5px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.rw-baris{display:flex;gap:10px;font-size:12px;padding:1.5px 0}
.rw-baris .k{flex:0 0 148px;color:var(--ink-soft)}
.rw-baris .v{min-width:0;word-break:break-word}
.nilai-board{font-size:13px;color:var(--ink);word-break:break-word;padding:2px 0}
/* Rincian tiap tahap tertutup bawaannya (Johan G W, 2026-10-06): panahnya ke bawah saat tertutup,
   ke atas saat terbuka. Tanpa skrip — <details> sendiri yang mengerjakannya. */
.rw-lipat > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;color:var(--ink-soft);user-select:none;padding:2px 7px 2px 4px;border-radius:7px;
  border:1px solid var(--rule);background:var(--surface-2)}
.rw-lipat > summary::-webkit-details-marker{display:none}
.rw-lipat > summary:hover{color:var(--ink);border-color:var(--rule-strong)}
.rw-lipat > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rw-lipat > summary .rw-panah{width:8px;height:8px;flex:0 0 auto;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .12s;opacity:.75}
.rw-lipat[open] > summary .rw-panah{transform:rotate(225deg) translate(-2px,-2px)}
.rw-lipat[open] > summary{margin-bottom:4px}
.rw-rinci{padding-left:2px}
@media (max-width:700px){
  .rw-tahap{flex-direction:column;gap:4px}
  .rw-kiri{flex:none;display:flex;gap:8px;align-items:baseline}
  .rw-baris{flex-direction:column;gap:0}
  .rw-baris .k{flex:none;font-size:11px}
  /* di ponsel tombol lipatnya diperbesar supaya nyaman ditekan jari */
  .rw-lipat > summary{padding:6px 10px 6px 7px}
}

/* Isi jam gangguan sekaligus (UC-NOC-10, Johan G W 2026-10-04). */
.jam-massal input.mini,.jam-massal select.mini{font-size:12px;padding:3px 5px;border:1px solid var(--rule-strong);
  border-radius:6px;background:var(--surface);color:var(--ink);max-width:132px}
.jam-massal input[type=time].mini,.jam-massal input[type=date].mini{font-variant-numeric:tabular-nums}
.jam-massal td{vertical-align:middle}
.jam-massal input[type=checkbox]{width:16px;height:16px}

/* Catatan data belum utuh (T-22, Johan G W 2026-10-04). */
.kabar.awas{background:var(--warn-soft,#FFF6E5);border-color:#EBDCC4;color:#8A5A00}

/* Pop-up "Cara penilaian" (UC-INTI-76, Johan G W 2026-10-09).
   Bekerja TANPA JavaScript: pembuka dan penutupnya label yang menunjuk satu kotak centang
   tersembunyi — idiom yang sama dengan pelipat menu samping, jadi ia tetap bekerja walau app.js
   gagal dimuat. Tombolnya rata kanan, sejajar dengan baris filter bulan. */
.cara-tik{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
/* Label kosong di dalamnya menyamakan tingginya dengan isian Bulan, persis seperti tombol lain
   pada baris filter — itulah sebabnya ia sejajar, bukan melayang di atas. */
.cara-bungkus{margin-left:auto}
/* margin-bottom:0 membatalkan .filter label{margin-bottom:4px} — tanpa itu tombolnya naik 4px
   dari saudara-saudaranya, sebab ia label sedangkan mereka <a>/<button>. */
.cara-buka{cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
/* .filter label{margin-bottom:4px} lebih kuat daripada .cara-buka saja (elemen+kelas vs kelas),
   jadi pembatalannya harus ikut menyebut .filter — tanpa itu tombolnya naik 4px dari saudaranya. */
.filter .cara-buka{margin-bottom:0}
.cara-buka svg{display:block}
.cara-modal{display:none}
.cara-tik:checked ~ .cara-modal{display:block}
.cara-tirai{position:fixed;inset:0;background:rgba(15,27,23,.45);z-index:60;cursor:pointer;display:block}
.cara-isi{position:fixed;z-index:61;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(760px,calc(100vw - 32px));max-height:min(80vh,760px);overflow:auto;
  background:var(--surface);border:1px solid var(--rule-strong);border-radius:12px;
  box-shadow:0 18px 48px rgba(15,27,23,.22)}
/* Memakai kelas .panel supaya kepala dan isinya bergaya sama dengan panel lain; yang di bawah ini
   hanya menambahkan perilaku khas pop-up. */
.cara-isi > .kepala{position:sticky;top:0;background:var(--surface);z-index:1;border-radius:12px 12px 0 0}
.cara-tutup{cursor:pointer;user-select:none;color:var(--ink-soft);font-weight:600}
.cara-tutup:hover{color:var(--ink)}
.cara-tabel td{vertical-align:top;padding:9px 10px;line-height:1.5}
.cara-tabel .cara-nama{width:230px;white-space:normal;color:var(--ink)}
.cara-tabel tr + tr td{border-top:1px solid var(--rule)}
@media (max-width:760px){
  .cara-bungkus{margin-left:0}
  .cara-tabel .cara-nama{width:auto;display:block;border:0;padding-bottom:0}
  .cara-tabel td{display:block}
  .cara-tabel tr + tr td:first-child{border-top:1px solid var(--rule)}
}
@media print{ .cara-bungkus,.cara-modal{display:none} }

/* Batang mendatar, satu deret dan bertumpuk (UC-INTI-79, Johan G W 2026-10-09).
   Dipakai ringkasan Coverage & Ondesk: namanya panjang, jadi batangnya mendatar supaya namanya
   terbaca utuh tanpa dimiringkan. */
.batang-mendatar{display:flex;flex-direction:column;gap:7px;padding:14px 15px}
.bm-baris{display:grid;grid-template-columns:minmax(120px,210px) 1fr minmax(62px,auto);
  align-items:center;gap:12px}
.bm-label{font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bm-jalur{background:var(--surface-3);border-radius:5px;height:18px;overflow:hidden;display:flex}
.bm-isi{height:100%;border-radius:5px;min-width:3px;transition:width .2s}
.bm-nilai{font-size:13px;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.bm-ket{font-size:11px;color:var(--ink-faint);font-weight:400}
/* Bertumpuk: jalurnya selebar totalnya, segmen di dalamnya berbagi ruang menurut nilainya.
   Celah 2px BERWARNA PERMUKAAN memisahkan segmen - bukan garis tepi, supaya batasnya tetap
   terbaca walau dua warnanya berdekatan di mata sebagian pembaca. */
.bertumpuk .bm-jalur{background:none;gap:2px;min-width:3px}
.bm-seg{height:18px;min-width:3px;display:grid;place-items:center;font-size:10.5px;font-weight:600;
  color:#fff;border-radius:3px;overflow:hidden}
.bm-seg:first-child{border-radius:5px 3px 3px 5px}
.bm-seg:last-child{border-radius:3px 5px 5px 3px}
.bm-legenda{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:4px;font-size:12px;color:var(--ink-soft)}
.bm-kunci{display:inline-flex;align-items:center;gap:6px}
.bm-kotak{width:11px;height:11px;border-radius:3px;display:inline-block}
@media (max-width:700px){
  .bm-baris{grid-template-columns:1fr;gap:3px}
  .bm-nilai{text-align:left}
}
@media (prefers-reduced-motion:reduce){ .bm-isi{transition:none} }