/* ==========================================================================
   Tanya data — gaya bersama untuk halaman masuk, aplikasi, dan konsol.
   Satu berkas supaya ketiganya tidak pernah melenceng satu sama lain.

   Nada yang dituju mengikuti claude.ai: latar kertas hangat, satu aksen terracotta,
   sudut membulat, judul berhuruf serif, garis tipis sebagai pemisah, angka rata kanan
   dengan lebar digit tetap. Tanpa gradien latar dan tanpa animasi yang tidak menjelaskan apa pun.
   ========================================================================== */

:root{
  --sans:"Inter",ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --r-kecil:5px; --r:7px; --r-besar:9px;
  --sela:16px;

  /* Terang — kertas hangat, bukan putih kebiruan. Aksen terracotta dipakai untuk
     tindakan dan penanda aktif. Warna bagan banyak-seri (--s1..--s7 di bawah)
     sengaja tidak ikut berubah: palet itu sudah diuji keterbacaannya. */
  --kanvas:#FAF9F5;
  --kartu:#FFFFFF;
  --kartu-2:#F6F5F0;
  --kartu-3:#EDEBE3;
  --garis:#E4E1D8;
  --garis-kuat:#D2CEC2;
  --tinta:#1A1915;
  --tinta-2:#45433C;
  --tinta-3:#726F67;
  --aksen:#B84F2E;
  --aksen-kuat:#993C1F;
  --aksen-lembut:#FCF4F0;
  /* Sorotan teks. Diukur, bukan dikira-kira: warna sebelumnya
     (--aksen-lembut) berkontras 1,09:1 terhadap latar kartu — teksnya
     tersorot dan Ctrl+C menyalin, tapi tidak ada yang terlihat berubah,
     jadi terbaca seolah tidak bisa dipilih. Yang ini 2,02:1 terhadap
     latar, dan teksnya tetap 8,72:1 di atasnya. */
  --sorotan:#F9A26C;
  --atas-aksen:#FFFFFF;
  --aksen-tanda:#F0DACC;   /* penanda menu aktif — sengaja lebih pekat dari --aksen-lembut
                              supaya terlihat di atas sidebar yang juga hangat */
  --aksen-garis:#E6C6B4;
  --hijau:#3B7551; --hijau-lembut:#EEF4EF; --hijau-garis:#C0D8C8;
  --merah:#AF4028; --merah-lembut:#FAEEEA; --merah-garis:#EDC6B8;
  --kuning:#8F5D1C; --kuning-lembut:#FAF3E6; --kuning-garis:#E4CEA4;
  --seri-1:#B84F2E;
  --bayang-1:0 1px 2px rgba(26,25,21,.05);
  --bayang-2:0 4px 14px -6px rgba(26,25,21,.13);
  --bayang-3:0 18px 36px -14px rgba(26,25,21,.2);
  --cincin:0 0 0 3px rgba(184,79,46,.18);
  --kpi-1:#2a78d6; --kpi-2:#0f8f9e; --kpi-3:#6b5bd2; --kpi-4:#c9453a;
  --kpi-5:#1baf7a; --kpi-6:#b8722a;
  --kepala-tabel:#F1EDE6;
  /* Palet 11 klaster pelanggan (RFM) -- kategorikal, sengaja tidak memakai
     --merah untuk klaster "merugi" supaya tidak terbaca sebagai alarm; yang
     "aktif tapi merugi" (--kl-8) dibuat lebih hangat/jenuh daripada yang
     "pasif" (--kl-7) supaya urutan urgensinya tetap kebaca lewat warna.
     --kl-9..11 ditambah saat tangga nama positif diperluas dari 6 ke 9
     tingkat (fitur Monetary jadi revenue) -- nomor 1-8 sengaja TIDAK
     dirombak karena --kl-4/5/6/7/8 juga dipakai ulang di WARNA_RISIKO. */
  --kl-1:#B8862E; --kl-2:#1BAF7A; --kl-3:#0F8F9E; --kl-4:#2A78D6;
  --kl-5:#6B5BD2; --kl-6:#8A8F98; --kl-7:#A6564B; --kl-8:#C9723A;
  --kl-9:#7A9A3D; --kl-10:#B85C82; --kl-11:#3AA0C9;
}

html[data-tema="gelap"]{
  color-scheme:dark;
  /* Navy, bukan abu hangat. Diambil dari GSI Sales Arena: latar biru-hitam,
     kartu sedikit lebih terang, garis pemisah kebiruan. */
  --kanvas:#080D18;
  --kartu:#0F1725;
  --kartu-2:#0C1320;
  --kartu-3:#17203254;
  --garis:#1E2A40;
  --garis-kuat:#2C3A55;
  --tinta:#E8EFFA;
  --tinta-2:#A9B6CB;
  --tinta-3:#7C8AA3;
  --aksen:#2D7FF9;
  --aksen-kuat:#5A9BFF;
  --aksen-lembut:#12203A;
  /* Gelap: 2,50:1 terhadap latar kartu, teks 6,22:1 di atasnya.
     Sebelumnya 1,11:1 — sama tidak terlihatnya. */
  --sorotan:#2E5796;
  --aksen-garis:#26426E;
  --aksen-tanda:#152949;
  --atas-aksen:#FFFFFF;
  --hijau:#2BD47D; --hijau-lembut:#0C2419; --hijau-garis:#1B5238;
  --merah:#F0435C; --merah-lembut:#2A1019; --merah-garis:#6B2233;
  --kuning:#F5B23D; --kuning-lembut:#2A1F0C; --kuning-garis:#6B4E1B;
  --seri-1:#2D7FF9;
  --bayang-1:0 1px 2px rgba(0,0,0,.5);
  --bayang-2:0 6px 18px -8px rgba(0,0,0,.7);
  --bayang-3:0 20px 40px -16px rgba(0,0,0,.8);
  --cincin:0 0 0 3px rgba(45,127,249,.28);
  /* Warna garis aksen kartu angka, berputar berurutan. */
  --kpi-1:#2D7FF9; --kpi-2:#22D3C5; --kpi-3:#7C5CFF; --kpi-4:#F0435C;
  --kpi-5:#2BD47D; --kpi-6:#F5B23D;
  --kepala-tabel:#141C2C;
  --kl-1:#E0B24E; --kl-2:#2BD47D; --kl-3:#22D3C5; --kl-4:#2D7FF9;
  --kl-5:#7C5CFF; --kl-6:#8A93A6; --kl-7:#C97B6E; --kl-8:#E0924F;
  --kl-9:#9DC456; --kl-10:#E084AC; --kl-11:#4FC3E8;
}
}

html[data-tema="terang"]{color-scheme:light}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;background:var(--kanvas);color:var(--tinta);font-family:var(--sans);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
  font-feature-settings:"cv05","ss01";overflow:hidden;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;color:inherit}
:focus-visible{outline:2px solid var(--aksen);outline-offset:2px}
::selection{background:var(--sorotan);color:var(--tinta)}
.aura{display:none}                     /* latar dekoratif lama, sengaja dimatikan */

/* ---------------------------------------------------------------- kerangka
   Menu mengambang: isi halaman memakai seluruh lebar layar, daftar laman
   dipanggil lewat tombol ☰ dan muncul di atasnya. Tabel dan bagan jauh lebih
   sering dibaca daripada daftar menunya, jadi ruang layar diberikan ke isinya. */
.bingkai{display:flex;flex-direction:column;height:100dvh;min-height:0}
.bingkai > main{flex:1;min-height:0}
.isi-kanan{display:flex;flex-direction:column;min-height:0;min-width:0}

.sisi,aside.sisi{
  position:fixed;top:0;bottom:0;left:0;z-index:60;width:min(280px,86vw);
  display:flex;flex-direction:column;gap:2px;padding:18px 14px;min-height:0;
  background:var(--kartu-2);border-right:1px solid var(--garis);
  box-shadow:var(--bayang-3);
  visibility:hidden;transform:translateX(-100%);
  transition:transform .18s ease,visibility .18s;
}
html[data-menu="buka"] .sisi{visibility:visible;transform:none}

.tirai{position:fixed;inset:0;z-index:55;background:rgba(26,25,21,.34);
  opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s}
html[data-tema="gelap"] .tirai{background:rgba(0,0,0,.52)}
html[data-menu="buka"] .tirai{opacity:1;visibility:visible}

@media (prefers-reduced-motion:reduce){.sisi,.tirai{transition:none}}

/* Pemanggil menu, sejajar judul halaman supaya tidak menutupi apa pun. */
.tbl-menu{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;border-radius:var(--r);border:1px solid var(--garis);
  background:var(--kartu);color:var(--tinta-2);transition:.14s}
.tbl-menu:hover{background:var(--kartu-3);color:var(--tinta);border-color:var(--garis-kuat)}
.tbl-menu svg{width:19px;height:19px;display:block}
.tutup-menu{margin-left:auto;flex:none;width:30px;height:30px;border-radius:var(--r-kecil);
  display:grid;place-items:center;color:var(--tinta-3);align-self:flex-start}
.tutup-menu:hover{background:var(--kartu-3);color:var(--tinta)}
.tutup-menu svg{width:17px;height:17px;display:block}
.merek{display:flex;align-items:center;gap:11px;padding:2px 8px 18px}
.logo{
  width:34px;height:34px;border-radius:var(--r);flex:none;display:grid;place-items:center;
  background:var(--aksen);color:var(--atas-aksen);box-shadow:var(--bayang-1);
}
.logo svg{width:18px;height:18px;color:var(--atas-aksen)}
.merek h1,.merek b{font-family:var(--serif);font-size:18.5px;font-weight:500;letter-spacing:0;
  margin:0;display:block;line-height:1.25}
.merek .sub,.merek span span{font-size:12px;color:var(--tinta-3);font-family:var(--mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:180px}
.judul-kelompok{font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-3);padding:16px 10px 6px;margin:0}
.sisi .bawah{margin-top:auto;display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--garis)}
.sisi .baris-kecil{display:flex;gap:8px}
.sisi .baris-kecil form{display:contents}
.sisi .baris-kecil .tbl{flex:1;justify-content:center}

/* ---------------------------------------------------------------- tombol */
.tbl{
  display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:var(--r);
  border:1px solid var(--garis);background:var(--kartu);color:var(--tinta-2);
  font-size:13.5px;font-weight:550;transition:background .14s,border-color .14s,color .14s;
  box-shadow:var(--bayang-1);white-space:nowrap;
}
.tbl:hover{background:var(--kartu-3);color:var(--tinta);border-color:var(--garis-kuat)}
.tbl:active{transform:translateY(.5px)}
.tbl svg{width:16px;height:16px;flex:none}
.tbl.ikon{padding:8px}
a.tbl{text-decoration:none}
/* Tombol utama bergradien, seperti tombol Mode Display di Sales Arena. Ujung
   gradiennya sengaja lebih tua daripada aksen kartu: teks putih di atas #7C5CFF
   hanya mencapai 4,35:1 dan di atas #2D7FF9 3,81:1 — keduanya di bawah ambang.
   Yang dipakai di sini 5,45:1 dan 4,76:1, dan warnanya masih terbaca sama. */
.tbl.utama{background:linear-gradient(135deg,#6D4DE6,#1F6FE0);
  border-color:transparent;color:#fff;font-weight:650;border-radius:var(--r);
  letter-spacing:.02em}
.tbl.utama:hover{background:linear-gradient(135deg,#7C5CFF,#2D7FF9);
  border-color:transparent;color:#fff}
.tbl.utama:hover{background:var(--aksen-kuat);border-color:var(--aksen-kuat);color:var(--atas-aksen)}
.tbl.bahaya:hover{color:var(--merah);border-color:var(--merah-garis);background:var(--merah-lembut)}
.tbl:disabled{opacity:.5;cursor:not-allowed}

/* tombol navigasi di sidebar */
.sisi .tbl{
  width:100%;justify-content:flex-start;border-color:transparent;background:none;
  box-shadow:none;font-weight:550;padding:9px 10px;color:var(--tinta-2);
}
/* Tombol menu dua baris: nama laman, lalu divisinya sebagai anak judul.
   Sebelumnya divisi berdiri sebagai baris judul sendiri — untuk divisi yang
   hanya berisi satu laman, judulnya makan tempat lebih banyak daripada isinya. */
.sisi .tbl{border-radius:var(--r);align-items:flex-start;padding-top:9px;padding-bottom:9px}
.sisi .tbl svg{margin-top:1px}
.sisi .tbl .teks{display:grid;gap:1px;text-align:left;min-width:0}
.sisi .tbl .anak{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--tinta-3);font-weight:400;text-transform:lowercase}
.sisi .tbl.aktif .anak{color:var(--aksen-kuat);opacity:.75}
.sisi .tbl:hover{background:var(--kartu-3);border-color:transparent;color:var(--tinta)}
.sisi .tbl.utama{background:var(--aksen);border-color:var(--aksen);color:var(--atas-aksen);
  box-shadow:var(--bayang-1);justify-content:center;margin-bottom:4px}
.sisi .tbl.utama:hover{background:var(--aksen-kuat)}
.sisi .tbl.aktif{background:var(--aksen-tanda);color:var(--aksen-kuat);font-weight:600}

/* Dibatasi ke #nav — nav konsol. Ditulis sebagai `nav button` polos, aturan ini
   mengenai tombol di dalam <nav> mana pun: bilah tab aplikasi dan bilah lompat
   antar bagian ikut dipaksa selebar penuh dan menumpuk vertikal. Bug itu sudah
   dua kali muncul dengan gejala berbeda sebelum sumbernya ketemu. */
#nav button{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:var(--r);
  color:var(--tinta-2);font-size:13.5px;font-weight:550;text-align:left;transition:.14s;
}
#nav button:hover{background:var(--kartu-3);color:var(--tinta)}
#nav button.aktif{background:var(--aksen-tanda);color:var(--aksen-kuat);font-weight:600}
#nav button svg{width:17px;height:17px;flex:none}
.tautan-app{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r);
  font-size:13.5px;color:var(--tinta-2);text-decoration:none;border:1px solid var(--garis);
  background:var(--kartu);box-shadow:var(--bayang-1)}
.tautan-app:hover{background:var(--kartu-3);color:var(--tinta)}
.tautan-app svg{width:16px;height:16px}

/* ---------------------------------------------------------------- lencana */
.cip,.pil,.tag{
  display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:var(--r-kecil);
  border:1px solid var(--garis);background:var(--kartu-2);color:var(--tinta-3);
  font-size:11.5px;font-family:var(--mono);white-space:nowrap;
}
.cip{padding:6px 10px}
.tag svg,.pil svg{width:12px;height:12px}
.cip.awas,.pil.awas,.tag.awas{color:var(--kuning);background:var(--kuning-lembut);border-color:var(--kuning-garis)}
.pil.aman,.tag.aman{color:var(--hijau);background:var(--hijau-lembut);border-color:var(--hijau-garis)}
.pil.admin{color:var(--aksen);background:var(--aksen-lembut);border-color:var(--aksen-garis)}
.titik-hidup{width:7px;height:7px;border-radius:50%;background:var(--hijau);flex:none}
.titik-hidup.mati{background:var(--merah)}
.lencana{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--garis);background:var(--kartu);font-size:12px;color:var(--tinta-2);
  margin-bottom:20px}

.akun{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--r);
  border:1px solid var(--garis);background:var(--kartu-2)}
.akun .ava,.ava{width:26px;height:26px;border-radius:var(--r-kecil);flex:none;background:var(--aksen);
  display:grid;place-items:center;font-size:11.5px;font-weight:650;color:var(--atas-aksen);letter-spacing:.02em}
.akun .nm{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.akun .peran{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tinta-3);padding:2px 6px;border-radius:4px;
  background:var(--kartu-3);border:1px solid var(--garis)}

/* ---------------------------------------------------------------- panel & kartu */
main{flex:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);min-height:0}
main.tunggal{grid-template-columns:minmax(0,1fr)}
main.tunggal .jejak{display:none}   /* belum ada langkah, atau peran pengguna */
.panel{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  scrollbar-color:var(--garis-kuat) transparent}
.panel::-webkit-scrollbar{width:10px;height:10px}
.panel::-webkit-scrollbar-thumb{background:var(--garis-kuat);border-radius:10px;
  border:3px solid transparent;background-clip:content-box}
#panel-obrolan{padding:28px 28px 12px}
.jejak{border-left:1px solid var(--garis);background:var(--kartu-2);padding:0 20px 16px}
.jejak-kepala{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:10px;
  padding:18px 2px 12px;background:var(--kartu-2);border-bottom:1px solid var(--garis);margin-bottom:14px}
.jejak-kepala::after{display:none}
.jejak-kepala h2{font-size:11.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-3);margin:0}
.jejak-kepala .hitung{margin-left:auto}

.kartu{border:1px solid var(--garis);border-radius:var(--r-besar);background:var(--kartu);
  margin-bottom:var(--sela);overflow:clip;box-shadow:var(--bayang-1)}
/* clip, bukan hidden: keduanya memotong sama rapi di sudut lengkung, tapi
   hidden menjadikan kartu sebuah wadah gulung — dan kepala tabel yang menempel
   akan menempel pada kartu yang tidak pernah menggulir, bukan pada layar. */
/* Judul kartu diberi alas tipis dan garis bawah, supaya tiap kartu terbaca
   sebagai satu bagian laporan — bukan teks yang mengambang di atas isinya. */
/* Judul bagian tebal, huruf besar, berjarak — nada yang dipakai Sales Arena. */
.kartu > h2,.kartu.lipat > summary > h2{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-2);margin:0;padding:13px 18px;background:var(--kartu-2);
  border-bottom:1px solid var(--garis)}
.kartu > p.ket{margin:0;padding:13px 18px 0;color:var(--tinta-3);font-size:13px;max-width:80ch}
/* Klaster risiko: keterangan kartu dibiarkan selebar kartunya (bukan 80ch) --
   diminta khusus untuk laman ini, jadi disaring lewat id section-nya supaya
   laman lain tidak ikut berubah. */
#lembar-klaster_risiko .kartu > p.ket{max-width:none}
/* Jaraknya diberikan sebagai margin pada keterangannya, bukan padding pada
   wadah gulir. Padding pada wadah gulir ikut tergulir, sehingga kepala tabel
   yang lengket berhenti beberapa piksel di bawah tepi atas dan sisa baris di
   atasnya terlihat menyembul — persis gejala yang dilaporkan. */
.kartu > p.ket:has(+ .gulung),.kartu > p.ket:has(+ .isi){padding-bottom:13px}
.kartu .isi{padding:16px 18px}
/* Kepala kartu kini bergaris bawah, jadi garis atas bawaan bagan/tabel yang
   langsung menempel di bawahnya jadi dobel. */
.kartu > h2 + .gulung,
.kartu > h2 + .isi > .bagan:first-child,
.kartu > h2 + .isi > .batang:first-child{border-top:none}
.kartu > h2 + .isi > .bagan:first-child{padding-top:0}

/* Jumlah kolomnya dipasang skrip lewat gaya sebaris (lihat seimbangkanKPI),
   supaya tiap baris penuh dan tidak ada kartu yatim. Yang di sini cadangan
   sebelum skripnya sempat jalan: 215px, karena pada 190px enam kartu dipaksa
   muat sebaris dan "Rp240,72 juta" tidak cukup ruang. */
.angka-besar{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:14px;margin-bottom:var(--sela)}
/* Garis aksen di tepi kiri, warnanya berputar. Ciri paling khas Sales Arena:
   deretan kartu angka jadi bisa dibedakan sekilas tanpa membaca judulnya. */
/* Kisi tiga baris: judul, angka, keterangan. Baris judul dan keterangan
   berukuran tetap supaya angka besarnya mulai di garis yang sama di seluruh
   kartu — tanpa ini, judul yang membungkus dua baris menggeser angkanya ke
   bawah sendirian. */
.kotak-angka{padding:16px 18px 16px 20px;border-radius:var(--r-besar);
  border:1px solid var(--garis);background:var(--kartu);box-shadow:var(--bayang-1);
  position:relative;overflow:hidden;
  display:grid;grid-template-rows:auto 1fr auto;align-content:start;
  /* Jadi acuan ukuran bagi angka di dalamnya (lihat .nl) */
  container-type:inline-size}
.kotak-angka::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--kpi-1)}
.angka-besar > .kotak-angka:nth-child(6n+2)::before{background:var(--kpi-2)}
.angka-besar > .kotak-angka:nth-child(6n+3)::before{background:var(--kpi-3)}
.angka-besar > .kotak-angka:nth-child(6n+4)::before{background:var(--kpi-4)}
.angka-besar > .kotak-angka:nth-child(6n+5)::before{background:var(--kpi-5)}
.angka-besar > .kotak-angka:nth-child(6n)::before{background:var(--kpi-6)}
.kotak-angka .nm{font-size:11.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;
  color:var(--tinta-3);min-height:2.4em;line-height:1.2}
/* Angka besar tidak boleh membungkus: "Rp1,94 miliar" yang patah jadi dua baris
   merusak deretnya. Ukurannya mengikuti lebar kartu lewat clamp() supaya
   menyusut sendiri di kartu sempit. */
/* 10,5cqw = 10,5% lebar kartunya sendiri. Pada kartu 296px (empat sebaris)
   menyentuh batas atas 30px; pada 226px (lima sebaris) menyusut ke ~24px —
   cukup untuk "Rp39,32 miliar" tanpa terpotong. */
.kotak-angka .nl{font-family:var(--serif);font-size:clamp(18px,10.5cqw,30px);font-weight:500;
  letter-spacing:0;margin:4px 0 2px;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15;
  /* Tinggi barisnya dipatok pada ukuran font terbesar. Tanpa ini, baris berisi
     dua kartu (fontnya menyentuh batas 30px) jadi 5px lebih tinggi daripada
     baris berisi empat kartu. */
  min-height:35px;display:flex;align-items:flex-end}
.kotak-angka .pen{font-family:var(--mono);font-size:11px;color:var(--tinta-3)}
#ek-kpi .kotak-angka{min-height:176px;
  grid-template-rows:auto minmax(8px,1fr) auto auto auto minmax(8px,1fr);
  align-content:stretch}
#ek-kpi .kotak-angka::after{content:"";grid-row:6}
#ek-kpi .kotak-angka .nm{min-height:2.4em}
#ek-kpi .kotak-angka .nl{grid-row:3;align-items:end;margin:0 0 4px}
#ek-kpi .kotak-angka .pen{min-height:3.2em;line-height:1.55;display:block;
  overflow:visible;grid-row:4}
#ek-kpi .kotak-angka > div:nth-child(4){grid-row:5}
#ek-kpi .kotak-angka .progres{margin-top:2px}

/* ---------------------------------------------------------------- percakapan */
.aliran{max-width:740px;margin:0 auto;padding-bottom:28px}
main.tunggal .aliran{max-width:820px}
.giliran{animation:naik .28s ease-out both}
@keyframes naik{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.tanya{display:flex;gap:12px;align-items:flex-start;margin:28px 0 14px;padding:14px 16px;
  border:1px solid var(--garis);border-radius:var(--r-besar);background:var(--kartu-3);
  font-weight:550;color:var(--tinta)}
.aliran > .giliran:first-child .tanya{margin-top:0}

.jawab{position:relative;padding:22px 24px;font-size:16px;line-height:1.75;color:var(--tinta);
  border:1px solid var(--garis);border-radius:var(--r-besar);background:var(--kartu);
  box-shadow:var(--bayang-1)}
.jawab::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:0 3px 3px 0;background:var(--aksen)}
.jawab.galat{border-color:var(--merah-garis);background:var(--merah-lembut)}
.jawab.galat::before{background:var(--merah)}
.jawab p{margin:0 0 .8em}
.jawab p:last-child{margin-bottom:0}
.jawab h3{margin:.1em 0 .45em;font:650 15px/1.45 var(--font);
  color:var(--tinta);letter-spacing:0}
.jawab ul,.jawab ol{margin:.3em 0 .9em;padding-left:1.25em}
.jawab li{margin:.35em 0}
.jawab li::marker{color:var(--tinta-3)}
.jawab strong{font-weight:650}
.jawab code{font-family:var(--mono);font-size:.85em;background:var(--kartu-3);
  color:var(--tinta);padding:2px 6px;border-radius:5px;border:1px solid var(--garis)}
.jawab .gulung{margin:.6em 0 1em;border:1px solid var(--garis);border-radius:var(--r);max-height:none}
.jawab table{font-size:13.5px}
.jawab th{background:var(--kartu-3)}
.jawab td{color:var(--tinta)}
.jawab.hidup > :last-child{display:inline}
.jawab.hidup::after{content:"";display:inline-block;width:2px;height:1em;margin-left:3px;
  vertical-align:-2px;background:var(--aksen);animation:kedip 1s steps(2) infinite}
@keyframes kedip{0%,100%{opacity:1}50%{opacity:0}}

.catatan{display:flex;gap:10px;color:var(--tinta-2);font-size:13.5px;padding:11px 14px;
  margin:12px 0 0;border-radius:var(--r);background:var(--kartu-2);border:1px solid var(--garis)}
.catatan svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--tinta-3)}

.memuat{margin:14px 0 0}
.memuat .teks{display:flex;align-items:center;gap:10px;color:var(--tinta-2);font-size:13.5px}
.pusar{width:15px;height:15px;flex:none;border-radius:50%;border:2px solid var(--garis-kuat);
  border-top-color:var(--aksen);animation:putar .7s linear infinite}
@keyframes putar{to{transform:rotate(1turn)}}
.rel{margin-top:10px;height:2px;border-radius:2px;overflow:hidden;background:var(--kartu-3);max-width:260px}
.rel i{display:block;height:100%;width:34%;border-radius:2px;background:var(--aksen);
  animation:lari 1.4s ease-in-out infinite}
@keyframes lari{0%{transform:translateX(-100%)}100%{transform:translateX(360%)}}

/* layar sambutan */
.kosong{max-width:740px;margin:0 auto;padding-top:5vh}
/* Selama belum ada percakapan, sambutan diletakkan di tengah ruang yang tersisa;
   sebelumnya ia menempel ke atas dan menyisakan ruang menganga di bawah contoh.
   "safe center" dipakai supaya di layar pendek isinya kembali rata atas, bukan
   terpotong di bagian yang tak bisa digulir. */
#panel-obrolan:has(#kosong:not([hidden])){display:flex;flex-direction:column;
  justify-content:safe center}
#panel-obrolan:has(#kosong:not([hidden])) .kosong{padding-top:0}
.kosong h2{font-family:var(--serif);font-size:clamp(29px,3.4vw,39px);line-height:1.18;
  font-weight:500;letter-spacing:-.005em;margin:0 0 12px}
.kosong h2 span{color:var(--aksen)}
.kosong p.intro{color:var(--tinta-2);margin:0 0 28px;max-width:60ch;font-size:15px}
.judul-kecil{font-size:11.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-3);margin:0 0 12px}
.contoh{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.contoh button{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:15px;
  border-radius:var(--r-besar);border:1px solid var(--garis);background:var(--kartu);
  color:var(--tinta-2);font-size:13.5px;line-height:1.5;transition:.14s;box-shadow:var(--bayang-1)}
.contoh button:hover{border-color:var(--aksen-garis);background:var(--aksen-lembut);color:var(--tinta)}
.contoh .ik{width:30px;height:30px;border-radius:var(--r);flex:none;display:grid;place-items:center;
  background:var(--aksen-lembut);color:var(--aksen);border:1px solid var(--aksen-garis)}
.contoh .ik svg{width:15px;height:15px}

/* ---------------------------------------------------------------- kotak tanya */
.kotak{padding:14px 28px 18px;border-top:1px solid var(--garis);background:var(--kartu)}
.dalam{max-width:740px;margin:0 auto}
main.tunggal ~ .kotak .dalam{max-width:820px}
.gubuk{display:flex;gap:10px;align-items:flex-end;padding:10px 10px 10px 14px;
  border:1px solid var(--garis-kuat);border-radius:var(--r-besar);background:var(--kartu);
  transition:box-shadow .14s,border-color .14s;box-shadow:var(--bayang-1)}
.gubuk:focus-within{border-color:var(--aksen);box-shadow:var(--cincin)}
.gubuk textarea{flex:1;resize:none;border:none;background:none;padding:7px 0;max-height:180px;
  outline:none;font-size:15px;line-height:1.55;box-shadow:none}
.gubuk textarea::placeholder{color:var(--tinta-3)}
.gubuk textarea:focus{box-shadow:none;border-color:transparent}   /* cincin fokusnya milik .gubuk */
.kirim{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--r);
  background:linear-gradient(135deg,#6D4DE6,#1F6FE0);color:#fff;font-weight:650;
  font-size:13.5px;flex:none;transition:.14s}
.kirim:hover:not(:disabled){background:var(--aksen-kuat)}
.kirim:disabled{opacity:.45;cursor:not-allowed}
.kirim svg{width:16px;height:16px}
.bantu{display:flex;gap:16px;align-items:center;margin:10px 2px 0;font-size:12px;
  color:var(--tinta-3);flex-wrap:wrap}
kbd{font-family:var(--mono);font-size:10.5px;border:1px solid var(--garis-kuat);
  border-bottom-width:2px;border-radius:4px;padding:1px 5px;color:var(--tinta-2);background:var(--kartu-2)}

/* ---------------------------------------------------------------- jejak kerja */
.langkah{border:1px solid var(--garis);border-radius:var(--r-besar);background:var(--kartu);
  margin-bottom:12px;overflow:hidden;box-shadow:var(--bayang-1);animation:naik .28s ease-out both}
.langkah.gagal{border-color:var(--merah-garis)}
.lg-judul{display:flex;gap:11px;align-items:center;padding:13px 15px;font-size:13.5px;font-weight:600}
.no{width:22px;height:22px;flex:none;border-radius:var(--r-kecil);display:grid;place-items:center;
  font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--aksen);
  background:var(--aksen-lembut);border:1px solid var(--aksen-garis)}
.langkah.gagal .no{color:var(--merah);background:var(--merah-lembut);border-color:var(--merah-garis)}
.lg-judul .apa{flex:1;min-width:0;color:var(--tinta)}
.lipat{color:var(--tinta-3);padding:3px;border-radius:var(--r-kecil)}
.lipat:hover{color:var(--tinta);background:var(--kartu-3)}
.lipat svg{width:16px;height:16px;transition:transform .2s}
.langkah.tutup .lipat svg{transform:rotate(-90deg)}
.langkah.tutup .lg-badan{display:none}

pre.sql{margin:0;padding:14px 15px;background:var(--kartu-2);border-top:1px solid var(--garis);
  font-family:var(--mono);font-size:12px;line-height:1.7;white-space:pre-wrap;word-break:break-word;
  color:var(--tinta-2);max-height:260px;overflow:auto}
.sql .k{color:var(--aksen);font-weight:500}
.sql .f{color:var(--hijau)}
.sql .s{color:var(--kuning)}
.sql .n{color:var(--tinta)}
.sql .c{color:var(--tinta-3);font-style:italic}

.kaki{display:flex;align-items:center;gap:8px;padding:11px 13px;border-top:1px solid var(--garis);
  flex-wrap:wrap;background:var(--kartu-2)}
.kaki .aksi{margin-left:auto;display:flex;gap:6px}
.kaki .aksi button{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--tinta-3);
  padding:5px 10px;border-radius:var(--r-kecil);border:1px solid transparent;transition:.14s}
.kaki .aksi button:hover{color:var(--tinta);background:var(--kartu);border-color:var(--garis)}
.kaki .aksi svg{width:13px;height:13px}
.pesan-galat{padding:13px 15px;border-top:1px solid var(--garis);color:var(--merah);
  background:var(--merah-lembut);font-size:13px;line-height:1.55}

/* ---------------------------------------------------------------- tabel */
.gulung{overflow:auto;max-height:440px;border-top:1px solid var(--garis)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--garis);vertical-align:middle}
/* Latar kepala kolom harus pekat. Sebelumnya --kartu-3 yang setengah tembus,
   jadi baris yang lewat di belakangnya terlihat menembus kepala tabel. */
th{position:sticky;top:0;z-index:2;font-weight:650;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tinta-3);background:var(--kepala-tabel);
  white-space:nowrap}
td{color:var(--tinta-2)}
tbody tr:hover td{background:var(--kartu-2)}
tbody tr:last-child td{border-bottom:none}
td.angka,th.angka{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Tanda operasi (- dan =) di jenjang laba rugi. Bukan .hening: kelas itu untuk
   pesan "tidak ada data" dan membawa padding, yang di dalam sel tabel justru
   menambah tinggi baris 17px dan membuat deretnya bergerigi. */
.tanda-operasi{color:var(--tinta-3);font-family:var(--mono)}

/* ------------------------------------------------------------- blok temuan
   Kalimat pendek yang menyebut angka lalu langsung mengatakan artinya. Nadanya
   ditandai garis warna di kiri, bukan latar berwarna — deretan blok berlatar
   warna terbaca seperti peringatan galat, padahal kebanyakan hanya keterangan. */
.temuan{list-style:none;margin:0;padding:14px 16px;display:grid;gap:10px}
.temuan li{position:relative;padding-left:14px;font-size:13.5px;line-height:1.6;
  color:var(--tinta-2)}
.temuan li::before{content:"";position:absolute;left:0;top:.45em;bottom:.35em;width:3px;
  border-radius:2px;background:var(--tinta-3)}
.temuan li b{color:var(--tinta);font-weight:650}
.temuan li.baik::before{background:var(--hijau)}
.temuan li.awas::before{background:var(--kuning)}
.temuan li.buruk::before{background:var(--merah)}
.kartu > .isi > .temuan:first-child{padding-top:14px}

/* ---------------------------------------------------------- kartu roadmap
   Sama bahasa visualnya dengan .temuan (garis aksen di kiri, bukan latar
   berwarna) tapi satu kartu per temuan — tiap temuan punya angka dampak,
   kalimat, dan rekomendasi sendiri, terlalu panjang untuk satu baris <li>. */
.kartu-roadmap{position:relative;padding:14px 16px 14px 20px;border-radius:var(--r);
  background:var(--kartu-2);border:1px solid var(--garis)}
.kartu-roadmap + .kartu-roadmap{margin-top:10px}
/* Kartu temuan selebar penuh halaman membuat judul (kiri) dan angka dampak
   (kanan) terpisah jauh di layar lebar -- mata harus melompat jauh untuk
   membandingkannya. Disusun jadi grid supaya tiap kartu maksimal ~460px,
   sejajar 2 (atau lebih) kolom pada layar lebar. */
.kartu-roadmap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:12px}
.kartu-roadmap-grid .kartu-roadmap{margin-top:0}
.kartu-roadmap::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  border-radius:var(--r) 0 0 var(--r);background:var(--kuning)}
.kartu-roadmap:nth-child(-n+2)::before{background:var(--merah)}
.rm-kepala{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.rm-dampak{font-family:var(--mono);font-weight:700;font-size:14.5px;color:var(--tinta)}
.kartu-roadmap h3{margin:0 0 6px;font-size:14.5px;font-weight:650;color:var(--tinta)}
.kartu-roadmap > p{margin:0 0 8px;font-size:13.5px;line-height:1.6;color:var(--tinta-2)}
.kartu-roadmap > p b{color:var(--tinta);font-weight:650}
.rm-aksi{color:var(--tinta-2)}
.rm-aksi b{color:var(--tinta)}
.rm-ranking{list-style:none;margin:0 0 10px;padding:8px 10px;border:1px solid var(--garis);
  border-radius:var(--r);background:var(--kartu-3);display:flex;flex-direction:column;gap:4px;
  max-height:220px;overflow-y:auto}
.rm-ranking li{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:2px 0}
.rm-ranking li.aktif{font-weight:650;color:var(--tinta)}
.rm-ranking li:not(.aktif){color:var(--tinta-2)}
.rm-ranking .no{font-family:var(--mono);color:var(--tinta-3);width:26px;flex:none}
.rm-ranking .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ------------------------------------------------------ pivot umur x cabang */
.bingkai-app main.konsol td.sel-umur-sedang{background:var(--kuning-lembut)}
.bingkai-app main.konsol td.sel-umur-berat{background:var(--merah-lembut);color:var(--merah);font-weight:650}
.bingkai-app main.konsol tr.baris-total td{border-top:2px solid var(--garis-kuat);
  background:var(--kartu-2);font-weight:650}

/* Matriks ROQ mutasi (Barang yang Perlu Dibeli): sel overstock (ROQ negatif)
   ditandai abu muda -- warna tetap (tidak ikut var tema terang/gelap), teks
   digelapkan supaya tetap terbaca di atasnya pada kedua tema. */
.bingkai-app main.konsol td.sel-roq-lebih{background:#3D3D3D;color:#E5E5E5}

/* ---------------- klaster pelanggan (RFM): kartu, lencana, peta ---------------- */
.kl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;
  padding:14px 16px}
.kl-kartu{border:1px solid var(--garis);border-left:4px solid var(--kl-warna,var(--aksen));
  border-radius:var(--r);padding:14px 16px;background:var(--kartu-2)}
.kl-kartu .kl-judul{display:flex;align-items:center;gap:8px;font-weight:650;font-size:14.5px;
  color:var(--tinta);margin-bottom:2px}
.kl-kartu .kl-titik{width:9px;height:9px;border-radius:50%;background:var(--kl-warna,var(--aksen));
  flex:none}
.kl-kartu .kl-n{color:var(--tinta-3);font-size:12px;margin-bottom:10px}
.kl-kartu .kl-metrik{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;
  color:var(--tinta-2);margin-bottom:9px;padding-bottom:9px;border-bottom:1px dashed var(--garis)}
.kl-kartu .kl-metrik b{display:block;color:var(--tinta);font-variant-numeric:tabular-nums;
  font-size:13.5px}
.kl-kartu p{font-size:12.8px;line-height:1.55;color:var(--tinta-2);margin:0 0 8px}
.kl-kartu .kl-aksi{font-size:12.5px;line-height:1.55;padding:8px 10px;border-radius:var(--r-kecil);
  background:var(--kartu);border:1px solid var(--garis)}
.kl-kartu .kl-aksi b{color:var(--tinta)}
/* Peringatan disambiguasi "collection days panjang vs DPD tinggi" (lihat
   _catatan_termin_panjang di klaster_risiko.py) -- gaya kuning/peringatan,
   beda dari .kl-aksi supaya kelihatan ini catatan interpretasi, bukan
   langkah tindak lanjut. */
.kl-catatan{font-size:12px;line-height:1.55;padding:7px 10px;border-radius:var(--r-kecil);
  background:var(--kuning-lembut);border:1px solid var(--kuning-garis);color:var(--kuning);
  margin:0 0 8px}
/* Baris rumus opsional di dalam .kotak-angka (dipakai glosarium klaster
   risiko, lihat details.rincian-cara di lembar Kelompok Risiko Pembayaran)
   -- ditaruh di antara .nl (frasa besar) dan .pen (keterangan), gaya
   monospace kecil supaya kebaca sebagai notasi/rumus, bukan kalimat biasa. */
.kotak-angka .rumus{font-size:10.5px;color:var(--tinta-3);
  font-family:ui-monospace,Consolas,monospace;margin:2px 0 4px}
.kl-lencana{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:3px 10px 3px 8px;border-radius:99px;white-space:nowrap;
  color:var(--kl-warna,var(--aksen));
  background:color-mix(in srgb, var(--kl-warna,var(--aksen)) 16%, var(--kartu-2));
  border:1px solid color-mix(in srgb, var(--kl-warna,var(--aksen)) 42%, var(--garis))}
.kl-lencana::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--kl-warna,var(--aksen))}
/* Tabel "Data per pelanggan": 8 kolom kena aturan .padat (padding dirapatkan
   jadi 9px, lihat aturan table.padat td/th di atas), dan pil warna-warni di
   kolom Kelompok bikin kolom "Transaksi terakhir" di sebelahnya kelihatan
   mepet. Renggangkan sisi kirinya saja supaya lebih ke tengah antara kolom
   Kelompok & Recency, tanpa mengubah tabel 7-kolom-atau-lebih lain di app ini. */
#kl-tabel table td:nth-child(4),#kl-tabel table th:nth-child(4){padding-left:28px}
.kl-peta{padding:6px 16px 16px}
.kl-peta svg{width:100%;max-width:760px;height:auto;overflow:visible;display:block;margin:0 auto}
.kl-peta .sb{stroke:var(--garis)}
.kl-peta .kisi{stroke:var(--garis);stroke-dasharray:2 3}
.kl-peta text{fill:var(--tinta-3);font-size:11px;font-family:var(--sans)}
.kl-peta .lbl{fill:var(--tinta);font-size:11.5px;font-weight:600;pointer-events:none}
.kl-peta circle{stroke:var(--kartu);stroke-width:1.5;fill-opacity:.78;cursor:pointer}
.kl-peta circle:hover{fill-opacity:1}
.kl-peta-detail{margin:12px auto 0;max-width:760px;padding:12px 14px;border:1px solid var(--garis);
  border-left:4px solid var(--kl-warna,var(--aksen));border-radius:var(--r);background:var(--kartu-2)}
.kl-peta-detail .kl-judul{display:flex;align-items:center;gap:8px;font-weight:650;font-size:14px}
.kl-peta-detail .kl-titik{width:9px;height:9px;border-radius:50%;background:var(--kl-warna,var(--aksen));flex:none}
.kl-peta-detail .kl-metrik{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--tinta-2);
  margin:8px 0}
.kl-peta-detail .kl-metrik b{display:block;color:var(--tinta);font-variant-numeric:tabular-nums;font-size:13.5px}
.kl-peta-detail p{margin:0;font-size:12.8px;line-height:1.55;color:var(--tinta-2)}
.kl-peta-legenda{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px auto 0;max-width:760px;
  padding-top:12px;border-top:1px dashed var(--garis)}
.kl-peta-legenda button{display:flex;align-items:center;gap:6px;border:none;background:none;
  padding:3px 6px;cursor:pointer;color:var(--tinta-2);font-size:12px;border-radius:var(--r-kecil);font:inherit}
.kl-peta-legenda button:hover{background:var(--kartu-2);color:var(--tinta)}
.kl-peta-legenda .titik{width:9px;height:9px;border-radius:50%;flex:none}

/* ---------------- riwayat pembelian per pelanggan (modal) ---------------- */
.kl-nama-tautan{background:none;border:none;padding:0;color:var(--aksen);cursor:pointer;
  font:inherit;text-align:left;text-decoration:underline;text-decoration-color:transparent;
  transition:text-decoration-color .15s}
.kl-nama-tautan:hover{text-decoration-color:var(--aksen)}
.kl-tirai{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:80;display:flex;
  align-items:center;justify-content:center;padding:24px}
.kl-modal{background:var(--kartu);border:1px solid var(--garis-kuat);border-radius:var(--r-besar);
  max-width:760px;width:100%;max-height:85vh;display:flex;flex-direction:column;box-shadow:var(--bayang-3)}
/* Modal detail faktur/brand/sales: tabelnya sampai 7-9 kolom dengan nama
   barang panjang -- 760px bikin tiap nama barang pecah 3-4 baris. */
.kl-modal.lebar{max-width:1100px}
.kl-modal-kepala{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--garis);cursor:grab}
/* Geser modal dari kepalanya -- lihat listener drag generik di dasbor.html.
   user-select dimatikan selama menggeser supaya teks di baliknya tidak ikut
   terpilih waktu mouse bergerak cepat. */
body.menggeser-modal{user-select:none}
body.menggeser-modal .kl-modal-kepala{cursor:grabbing}
.kl-modal-kepala h3{font-family:var(--serif);font-size:19px;margin:0}
.kl-modal-kepala p{margin:2px 0 0;font-size:12.5px;color:var(--tinta-3)}
.kl-modal-tutup{border:none;background:none;color:var(--tinta-3);cursor:pointer;font-size:22px;
  line-height:1;padding:4px 8px;border-radius:var(--r-kecil)}
.kl-modal-tutup:hover{background:var(--kartu-2);color:var(--tinta)}
.kl-modal-isi{padding:16px 20px;overflow:auto}
/* Judul antar-bagian di dalam modal analisa brand/sales -- beberapa tabel
   berbeda ditumpuk dalam satu modal yang sama, butuh pemisah ringan supaya
   tidak terbaca sebagai satu tabel raksasa. */
.kl-modal-isi h4.judul-blok{margin:22px 0 10px;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3)}
.kl-modal-isi h4.judul-blok:first-child{margin-top:0}

/* ---------------- paginasi tabel klaster ---------------- */
.kl-halaman{display:flex;align-items:center;gap:10px;padding:10px 16px;
  border-top:1px solid var(--garis);flex-wrap:wrap}
.kl-halaman button{padding:6px 12px;border:1px solid var(--garis-kuat);border-radius:var(--r-kecil);
  background:var(--kartu);color:var(--tinta);cursor:pointer;font-size:12.5px}
.kl-halaman button:disabled{opacity:.4;cursor:not-allowed}
.kl-halaman button:not(:disabled):hover{background:var(--kartu-2)}
.kl-halaman .ket{color:var(--tinta-3);font-size:12.5px;margin-left:auto}

/* Tinggi bagan dipatok supaya deretan kartu di satu laman sejajar. Sebelumnya
   tingginya mengikuti isi — satu laman bisa memuat tiga tinggi berbeda dan
   terbaca seperti tata letak yang tidak disengaja.

   Yang dipatok HANYA kotak yang benar-benar memuat bagan. Memakai `.isi` polos
   ikut mengenai baris pencarian dan blok temuan yang kebetulan berkelas sama —
   kotak cari setinggi 264px menyisakan lubang besar di sekeliling satu kolom
   isian. */
.bingkai-app main.konsol .kartu > .isi:has(svg, .batang, .bagan){
  min-height:var(--tinggi-bagan,264px);
  /* Isi yang lebih pendek daripada kotaknya ditengahkan, bukan dibiarkan
     menempel di atas. Ruang kosong yang terbagi rata di atas dan bawah terbaca
     sebagai jarak yang disengaja; ruang kosong yang menumpuk di bawah terbaca
     sebagai ada yang gagal dimuat. */
  display:flex;flex-direction:column;justify-content:center}
/* Anaknya tetap boleh mengembang kalau memang bisa (bagan batang, daftar
   progres) — penengahan hanya berlaku untuk yang tidak bisa. */
.bingkai-app main.konsol .kartu > .isi:has(.batang, .daftar-progres) > *{width:100%}
.bingkai-app main.konsol .kisi-2 .kartu > .isi:has(svg, .batang, .bagan){
  --tinggi-bagan:248px}
/* Kotak yang memuat tabel tidak ikut dipatok — tabel pendek yang dipaksa
   setinggi bagan justru menyisakan ruang kosong di bawahnya. */
.bingkai-app main.konsol .kartu > .isi:has(table){min-height:0}

/* ---------------------------------------------------------------- bagan */
.bagan{padding:14px 15px;border-top:1px solid var(--garis)}
.bagan + .bagan{border-top:1px dashed var(--garis)}
.bagan-kepala{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.bagan-kepala .jdl{font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tinta-3)}
.bagan-kepala .rng{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--tinta-3)}
svg.garis{display:block;width:100%;height:78px}
svg.garis .area{fill:var(--seri-1);opacity:.12}
svg.garis .jalur{fill:none;stroke:var(--seri-1);stroke-width:2;stroke-linejoin:round}

.bagan-kaki{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--mono);
  font-size:11px;color:var(--tinta-3);gap:8px}
.bagan-kaki span{white-space:nowrap}
/* height:100% + auto-rows 1fr: barisnya membagi rata tinggi kotaknya, jadi
   bagan berisi empat baris mengisi ruang yang ada alih-alih menggantung di
   atas lubang. min-height tiap baris tetap menjaga yang isinya banyak agar
   tidak berdesakan. */
.batang{display:grid;gap:8px;height:100%;align-content:stretch;
  grid-auto-rows:minmax(22px,1fr)}
.bagan .baris,.batang .baris{display:grid;grid-template-columns:minmax(96px,26%) 1fr minmax(104px,auto);
  gap:14px;align-items:center;font-size:12.5px;min-height:22px}
/* Nama panjang dibiarkan turun baris, bukan dipotong titik-titik — "08. Transit
   (AOL Syst…" tidak memberi tahu apa pun. */
.batang .label,.bagan .label{white-space:normal;overflow-wrap:anywhere;line-height:1.35;
  color:var(--tinta-2)}
.batang .jalur,.bagan .jalur{height:8px;border-radius:0 4px 4px 0;position:relative;
  background:var(--kartu-3)}
.batang .isi,.bagan .isi{position:absolute;left:0;top:0;height:100%;border-radius:0 4px 4px 0;
  background:var(--seri-1);min-width:2px;transform-origin:left;padding:0;
  animation:tumbuh .4s cubic-bezier(.2,.7,.3,1) both}
@keyframes tumbuh{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.batang .nilai,.bagan .nilai{font-family:var(--mono);font-size:11.5px;color:var(--tinta-2);
  font-variant-numeric:tabular-nums}
.angka-besar .kotak-angka .nl{font-variant-numeric:tabular-nums}
/* Keterangan dipatok tepat dua baris: yang pendek diberi ruang, yang panjang
   dipotong. Tanpa batas atas, keterangan tiga baris membuat kartunya 6px lebih
   tinggi daripada tetangganya. Teks penuhnya tetap ada di tooltip. */
/* line-height dipatok supaya batas bawahnya bisa dihitung: dua baris = 3,2em.
   Sebelumnya batasnya 2,7em, lebih pendek daripada dua baris yang sebenarnya,
   jadi tidak pernah mengikat dan kartu berketerangan dua baris tetap 6px lebih
   tinggi daripada yang satu baris. */
.angka-besar .kotak-angka .pen{line-height:1.6;min-height:3.2em;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------------------------------------------------------------- rincian data */
.rincian{margin:14px 0 0;border:1px solid var(--garis);border-radius:var(--r-besar);
  background:var(--kartu);overflow:hidden;box-shadow:var(--bayang-1)}
.rincian-kepala{display:flex;align-items:center;gap:9px;width:100%;padding:12px 15px;
  text-align:left;font-size:13px;font-weight:600;color:var(--tinta-2);flex-wrap:wrap;transition:.14s}
.rincian-kepala:hover{color:var(--tinta);background:var(--kartu-2)}
.rincian-kepala .panah{width:15px;height:15px;flex:none;transition:transform .2s}
.rincian.buka .rincian-kepala .panah{transform:rotate(90deg)}
.rincian-kepala .pil{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;border:none;
  background:none;padding:0}
.rincian-isi{display:none}
.rincian.buka .rincian-isi{display:block;border-top:1px solid var(--garis)}
.rin-langkah + .rin-langkah{border-top:1px solid var(--garis)}
.rin-judul{display:flex;gap:10px;align-items:center;padding:12px 15px;font-size:13px;flex-wrap:wrap}
.rin-judul .apa{color:var(--tinta);font-weight:600}
.rin-judul .pil{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;border:none;background:none;padding:0}
.rincian pre.sql{font-size:11.5px;max-height:200px;border-radius:var(--r);border:1px solid var(--garis)}
.rincian .gulung{max-height:260px}
.rin-sql{padding:0 15px 14px;display:flex;gap:8px;flex-wrap:wrap}
.rin-sql button{font-size:12px;color:var(--tinta-3);padding:6px 11px;border-radius:var(--r-kecil);
  border:1px solid var(--garis);background:var(--kartu-2)}
.rin-sql button:hover{color:var(--tinta);background:var(--kartu-3)}
.rin-sql pre{flex-basis:100%;margin-top:2px}

/* ---------------------------------------------------------------- borang */
input,select,textarea{border:1px solid var(--garis-kuat);background:var(--kartu);
  border-radius:var(--r);padding:9px 12px;outline:none;width:100%;transition:.14s;
  box-shadow:var(--bayang-1)}
input:focus,select:focus,textarea:focus{border-color:var(--aksen);box-shadow:var(--cincin)}
input::placeholder,textarea::placeholder{color:var(--tinta-3)}
input.kecil{width:96px;padding:7px 10px;font-family:var(--mono);font-size:12.5px;text-align:right}
select.kecil{width:auto;max-width:180px;padding:7px 28px 7px 11px;font-size:13px;
  text-overflow:ellipsis}
label{display:block;font-size:11.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;
  color:var(--tinta-3);margin:0 0 7px}
.isian{display:grid;gap:0;align-content:start}
.isian input,.isian select,.isian button{align-self:start}
.isian .bantu{font-size:11.5px;color:var(--tinta-3);font-family:var(--mono);margin-top:6px}
.baris-isian{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
/* Pratinjau surel dipisah dalam iframe berpasir: isinya HTML penuh dengan gaya
   sendiri, dan menyuntikkannya langsung akan bertabrakan dengan gaya konsol. */
.pratinjau-surel{width:100%;height:520px;border:1px solid var(--garis);
  border-radius:var(--r);background:#fff;margin-top:10px}
.daftar-hasil{margin:0;padding-left:20px;font-size:13px;line-height:1.7;color:var(--tinta-2)}
.pilih-divisi{display:grid;gap:3px;min-width:132px}
.pilih-divisi label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tinta-2);
  white-space:nowrap;cursor:pointer}
.pilih-divisi input{margin:0;accent-color:var(--aksen)}
.pilih-divisi input:disabled + *,.pilih-divisi label:has(input:disabled){opacity:.55;cursor:default}
/* Lencana pesan yang belum berisi apa-apa jangan menyisakan pil kosong. */
.pil:empty{display:none}
.catatan{margin:0;padding:11px 13px;border-radius:var(--r);font-size:13px;line-height:1.6;
  border:1px solid var(--garis);background:var(--kartu-2);color:var(--tinta-2)}
.catatan.awas{border-color:var(--kuning-garis);background:var(--kuning-lembut);color:var(--kuning)}
.catatan.siap{border-color:var(--hijau-garis);background:var(--hijau-lembut);color:var(--hijau)}
span.awas{color:var(--kuning);font-weight:600}
/* Nama barang bisa sangat panjang. Dengan seluruh 1.095 barang ditampilkan,
   satu nama panjang cukup untuk melebarkan tabel keluar kartunya — jadi kolom
   namanya dipotong dengan elipsis, judul lengkapnya tetap ada di tooltip. */
/* Kode barang (kolom 1), namanya (2), dan nama pemasok (14) sama-sama bisa
   panjang; ketiganya dipotong dengan elipsis. Yang diukur menunjukkan kolom
   Kode-lah yang paling lebar — 195px — bukan nama barangnya. */
#fc-tabel td:nth-child(1),#fc-tabel td:nth-child(14){
  max-width:130px;overflow:hidden;text-overflow:ellipsis}
#fc-tabel td:nth-child(2),#fc-mutasi td:nth-child(1){
  max-width:240px;overflow:hidden;text-overflow:ellipsis}

.pilih-divisi .bantu{font-size:10.5px;color:var(--tinta-3);font-family:var(--mono);margin-top:2px}
.kisi{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.aksi-baris{display:flex;gap:7px;justify-content:flex-end}
.bilah-simpan{position:sticky;bottom:0;display:flex;gap:12px;align-items:center;padding:14px 18px;
  border-top:1px solid var(--garis);background:var(--kartu)}
textarea.konteks{min-height:58dvh;font-family:var(--mono);font-size:12.5px;line-height:1.7;resize:vertical}

/* ---------------------------------------------------------------- modal & toast */
.tirai{position:fixed;inset:0;z-index:50;background:rgba(16,24,40,.55);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:24px;animation:pudar .16s both}
@keyframes pudar{from{opacity:0}to{opacity:1}}
.modal{width:min(680px,100%);max-height:82dvh;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--garis);border-radius:var(--r-besar);background:var(--kartu);
  box-shadow:var(--bayang-3)}
.modal header{padding:18px 20px 14px;border-bottom:1px solid var(--garis);display:flex;
  align-items:center;gap:12px;background:none}
.modal h3{margin:0;font-size:15px;font-weight:650}
.modal .kanan{margin-left:auto}
.cari{display:flex;align-items:center;gap:10px;margin:14px 20px 12px;padding:9px 12px;
  border-radius:var(--r);border:1px solid var(--garis-kuat);background:var(--kartu-2)}
.cari:focus-within{border-color:var(--aksen);box-shadow:var(--cincin)}
.cari input{flex:1;border:none;background:none;outline:none;font-size:13.5px;padding:0;box-shadow:none}
.cari svg{width:16px;height:16px;color:var(--tinta-3);flex:none}
.daftar{overflow-y:auto;padding:0 20px 20px;display:grid;gap:8px}
.baris-tabel{display:flex;gap:12px;align-items:center;padding:11px 13px;border-radius:var(--r);
  border:1px solid var(--garis);background:var(--kartu-2);font-size:13px}
.baris-tabel .nm{font-family:var(--mono);font-size:12.5px;color:var(--tinta);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.baris-tabel .mt{margin-left:auto;display:flex;gap:7px;flex:none}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(12px);z-index:60;
  padding:11px 18px;border-radius:var(--r);border:1px solid var(--garis-kuat);background:var(--kartu);
  color:var(--tinta);font-size:13px;box-shadow:var(--bayang-3);opacity:0;pointer-events:none;
  transition:.2s;max-width:80vw}
.toast.tampil{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.gagal{color:var(--merah);border-color:var(--merah-garis);background:var(--merah-lembut)}

.hening{color:var(--tinta-3);font-size:13.5px;padding:16px 2px;line-height:1.65;max-width:60ch}
.sandi-baru{margin:14px 18px 18px;padding:13px 15px;border-radius:var(--r);
  border:1px solid var(--hijau-garis);background:var(--hijau-lembut);font-size:13.5px;color:var(--tinta)}
.sandi-baru code{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--tinta);
  background:var(--kartu);padding:3px 9px;border-radius:5px;margin:0 4px;border:1px solid var(--garis)}
.pemisah{margin:0;border:none;border-top:1px solid var(--garis)}

/* ---------------------------------------------------------------- konsol */
main.konsol{display:block;overflow-y:auto;padding:0 28px 44px;scrollbar-width:thin}
/* Lebar baca maksimum. Sejak menunya mengambang, isi memakai seluruh layar; di
   monitor lebar satu baris tabel melar sampai ~1900px dan mata kehilangan jejak
   barisnya saat menyeberang. Batangnya diberi ke isi, bukan ke wadah bergulir,
   supaya bilah gulir tetap menempel di tepi layar. */
main.konsol > *{max-width:1600px;margin-left:auto;margin-right:auto}
/* Judul dan bilah saringan berbagi satu baris selama muat; begitu saringannya
   banyak, bilahnya turun ke baris berikutnya alih-alih menggencet judulnya. */
/* Kepala halaman disusun seperti kepala dokumen: divisi pemiliknya, lalu judul,
   lalu keterangan singkat. Saringan turun ke barisnya sendiri — sebelumnya ia
   berbagi baris dengan judul dan mulai berdesakan begitu saringannya bertambah. */
.konsol header,header.konsol{position:sticky;top:0;z-index:5;display:block;
  padding:20px 0 0;background:var(--kanvas);
  border-bottom:1px solid var(--garis);margin-bottom:20px}
.baris-judul{display:flex;align-items:flex-start;gap:14px;padding-bottom:14px}
.baris-judul .teks-judul{flex:1 1 auto;min-width:0}
.baris-judul .tbl-menu{margin-top:4px}
.baris-judul .kanan{margin-left:auto;align-self:center}
.baris-judul > .tbl{flex:none;margin-top:2px}
.divisi{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--aksen);margin-bottom:5px}
.konsol header h1{white-space:nowrap}
.konsol header .ket{display:block;margin-top:3px}
/* Kotak saringan membagi rata lebar barisnya. Sebelumnya tiap kotak selebar
   teks terpanjangnya sendiri, jadi tujuh saringan pecah 6+1 dan satu kotak
   menggantung sendirian di baris kedua — kepala halaman membengkak dari 148px
   ke 191px hanya untuk itu. */
.baris-saring{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:11px 0;border-top:1px solid var(--garis)}
.bingkai-app main.konsol .baris-saring > *{flex:1 1 150px;min-width:0}
/* Kotak tanggal tidak ikut melar: isinya selalu selebar 10 aksara, dan
   melarkannya cuma menyisakan ruang kosong di dalam kotaknya. */
.bingkai-app main.konsol .baris-saring > input.kecil{flex:0 0 auto}
.bingkai-app main.konsol .baris-saring select.kecil{max-width:none;width:100%}
.baris-saring:empty{display:none}
h1{font-family:var(--serif);font-size:27px;font-weight:500;letter-spacing:-.005em;
  margin:0;line-height:1.2}
header .ket{font-size:13px;color:var(--tinta-3)}
header .kanan{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  row-gap:8px;justify-content:flex-end}
.konsol header .baris-judul .kanan{margin-left:auto}

/* Halaman tanya data tidak punya kepala sendiri; bilah ramping ini yang
   menampung pemanggil menu dan tindakan utamanya. */
.bilah-atas{display:flex;align-items:center;gap:12px;flex:none;
  padding:12px 20px;border-bottom:1px solid var(--garis);background:var(--kanvas)}
.bilah-atas .nama{font-family:var(--serif);font-size:19px;font-weight:500;line-height:1.2}
.bilah-atas .kanan{margin-left:auto;display:flex;align-items:center;gap:8px}
.bilah-atas .tbl{width:auto}

/* Kesegaran data — kapan isinya berhenti dan kapan tabelnya terakhir ditulis.
   Dua-duanya perlu: tabel bisa baru diperbarui pagi ini padahal isinya berhenti
   kemarin, dan angka di layar jadi terbaca sebagai penurunan. */
.segar{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px;
  padding:6px 12px;border-radius:var(--r-kecil);border:1px solid var(--garis);background:var(--kartu);
  font-family:var(--mono);font-size:11.5px;color:var(--tinta-2)}
.segar b{font-weight:600;color:var(--tinta)}
.segar .titik{width:7px;height:7px;border-radius:50%;background:var(--hijau);flex:none}
.segar.tertinggal{border-color:var(--kuning-garis);background:var(--kuning-lembut);
  color:var(--kuning)}
.segar.tertinggal .titik{background:var(--kuning)}
.segar.tertinggal b{color:var(--kuning)}
.bilah-atas .segar{margin:0}

/* Bilah lompat antar bagian pada laman gabungan. */
.lompat{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 var(--sela);padding:7px;
  border:1px solid var(--garis);border-radius:var(--r);background:var(--kartu)}
.lompat button{padding:6px 12px;border-radius:var(--r-kecil);font-size:12.5px;font-weight:550;
  color:var(--tinta-2);border:1px solid transparent;transition:.14s}
.lompat button:hover{background:var(--aksen-lembut);color:var(--aksen-kuat);
  border-color:var(--aksen-garis)}

/* ---------------------------------------------------------------- sidebar aplikasi
   Bentuknya mengikuti GSI Sales Arena: blok merek di atas, label kelompok huruf
   besar berjarak, item aktif bergaris aksen di kiri dengan latar bertinta, dan
   kartu akun terkunci di bawah. */
.bingkai-app{display:grid;grid-template-columns:232px minmax(0,1fr)}
.bingkai-app > main{min-height:0}

.sisi-app{display:flex;flex-direction:column;min-height:0;background:var(--kartu-2);
  border-right:1px solid var(--garis)}

.merek-app{display:flex;align-items:center;gap:11px;padding:16px 16px 14px;flex:none;
  border-bottom:1px solid var(--garis);color:var(--tinta);text-decoration:none}
.merek-app:hover{background:var(--kartu-3)}
.merek-app .logo{width:34px;height:34px;border-radius:var(--r);flex:none;display:grid;
  place-items:center;background:var(--aksen);color:#fff}
.merek-app .logo svg{width:18px;height:18px}
.merek-app .teks{display:grid;gap:1px;min-width:0}
.merek-app b{font-family:var(--serif);font-size:16.5px;font-weight:500;line-height:1.2}
.merek-app .tagline{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-3)}

.menu-app{flex:1;min-height:0;overflow-y:auto;padding:12px 10px;display:flex;
  flex-direction:column;gap:2px;scrollbar-width:thin;
  scrollbar-color:var(--garis-kuat) transparent}
.menu-app::-webkit-scrollbar{width:8px}
.menu-app::-webkit-scrollbar-thumb{background:var(--garis-kuat);border-radius:8px;
  border:2px solid transparent;background-clip:content-box}
.judul-sisi{margin:14px 0 5px;padding:0 8px;font-size:10px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-3)}
.judul-sisi:first-child{margin-top:2px}

.tautan-sisi{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;
  border-radius:var(--r);font-size:13px;font-weight:500;color:var(--tinta-2);
  text-align:left;text-decoration:none;position:relative;transition:.14s;
  border-left:3px solid transparent}
.tautan-sisi svg{width:17px;height:17px;flex:none;opacity:.85}
.tautan-sisi:hover{background:var(--kartu-3);color:var(--tinta)}
.tautan-sisi.aktif{background:var(--aksen-tanda);color:var(--aksen-kuat);font-weight:650;
  border-left-color:var(--aksen)}
.tautan-sisi.aktif svg{opacity:1}

.kaki-app{flex:none;padding:10px;border-top:1px solid var(--garis);display:flex;
  flex-direction:column;gap:2px}
.kaki-app .cip{margin-bottom:6px}
.akun-app{display:flex;align-items:center;gap:9px;margin-top:8px;padding:9px 10px;
  border-radius:var(--r);background:var(--kartu);border:1px solid var(--garis)}
.akun-app form{display:contents}
.akun-app .ava{width:28px;height:28px;border-radius:var(--r-kecil);flex:none;
  background:var(--aksen);color:#fff;display:grid;place-items:center;font-size:12px;
  font-weight:650}
.akun-app .teks{display:grid;gap:0;min-width:0;flex:1}
.akun-app .teks b{font-size:12.5px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.akun-app .teks span{font-family:var(--mono);font-size:9.5px;color:var(--tinta-3)}
.akun-app .tbl.ikon{width:28px;height:28px;flex:none;border:none;background:none}

/* Di layar sempit sidebar jadi satu baris yang bisa digeser. Seluruh isinya
   ikut menyamping — kalau kaki halaman tetap menumpuk ke bawah, bilahnya jadi
   setinggi 200px dan menyisakan lubang kosong di atas isi laman. */
@media (max-width:900px){
  .bingkai-app{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .sisi-app{flex-direction:row;align-items:center;overflow-x:auto;
    border-right:none;border-bottom:1px solid var(--garis)}
  .merek-app,.kaki-app{border:none;padding:8px 12px;flex-direction:row;
    align-items:center;gap:8px}
  .judul-sisi{display:none}
  .menu-app{flex-direction:row;align-items:center;overflow:visible;padding:8px}
  .tautan-sisi{white-space:nowrap;width:auto}
  .kaki-app .cip{margin:0}
  .akun-app{margin:0}
  .akun-app .teks{display:none}
}

/* ---------------------------------------------------------------- daftar aplikasi
   Halaman pertama setelah masuk: satu ubin per divisi. Sebelumnya seluruh laman
   ditumpuk di satu sidebar, sehingga orang purchasing menyusuri menu keuangan
   setiap hari. */
body.laman-aplikasi{overflow:auto;display:block}
/* main global dipakai halaman tanya data dan dibagi dua kolom; halaman aplikasi
   memakai elemen yang sama tapi butuh satu kolom penuh. */
main.isi-aplikasi{display:block;grid-template-columns:none}
.bilah-aplikasi{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 28px;border-bottom:1px solid var(--garis);background:var(--kartu)}
.bilah-aplikasi .merek{display:flex;align-items:center;gap:11px}
.bilah-aplikasi .kanan{margin-left:auto;display:flex;align-items:center;gap:10px}
.isi-aplikasi{max-width:1100px;margin:0 auto;padding:44px 28px 64px}
.sambutan-aplikasi h2{font-family:var(--serif);font-size:clamp(26px,3.2vw,34px);
  font-weight:500;margin:0 0 6px;letter-spacing:-.005em}
.sambutan-aplikasi p{margin:0 0 32px;color:var(--tinta-3);font-size:14px}

.kisi-aplikasi{display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr))}
.ubin{display:grid;justify-items:center;gap:4px;padding:24px 16px 20px;text-align:center;
  text-decoration:none;
  border:1px solid var(--garis);border-radius:var(--r-besar);background:var(--kartu);
  box-shadow:var(--bayang-1);transition:.16s;color:var(--tinta)}
.ubin:hover{transform:translateY(-2px);box-shadow:var(--bayang-2);
  border-color:var(--garis-kuat)}
.ubin .gambar{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;
  margin-bottom:8px;color:#fff}
.ubin .gambar svg{width:26px;height:26px}
.ubin .nama{font-size:14.5px;font-weight:600}
.ubin .ket{font-size:11.5px;color:var(--tinta-3);line-height:1.45}

/* Warna ubin sengaja berbeda-beda supaya tiap aplikasi punya penanda tetap yang
   bisa dihafal letaknya, seperti ikon aplikasi di ponsel. */
.ubin[data-warna="biru"]   .gambar{background:#2a78d6}
.ubin[data-warna="hijau"]  .gambar{background:#1baf7a}
.ubin[data-warna="jingga"] .gambar{background:#eb6834}
.ubin[data-warna="ungu"]   .gambar{background:#6b5bd2}
.ubin[data-warna="merah"]  .gambar{background:#c9453a}
.ubin[data-warna="teal"]   .gambar{background:#0f8f9e}
.ubin[data-warna="abu"]    .gambar{background:#6e6b63}
.ubin[data-warna="kuning"] .gambar{background:#c99a2e}
.ubin[data-warna="hitam"]  .gambar{background:#2b2b2b}

@media (max-width:640px){
  .isi-aplikasi{padding:28px 18px 48px}
  .bilah-aplikasi{padding:12px 18px}
  .bilah-aplikasi .akun .nm{display:none}
}

/* ---------------------------------------------------------------- tab ponsel */
.tab{display:none;gap:8px;padding:12px 20px 0}
.tab button{flex:1;padding:9px;border-radius:var(--r);border:1px solid var(--garis);
  background:var(--kartu);font-size:13px;font-weight:600;color:var(--tinta-3)}
.tab button.aktif{color:var(--aksen);border-color:var(--aksen-garis);background:var(--aksen-lembut)}

@media (max-width:940px){
  .tab{display:flex}
  main{grid-template-columns:1fr}
  main[data-lihat="obrolan"] .jejak{display:none}
  main[data-lihat="jejak"] #panel-obrolan{display:none}
  #panel-obrolan{padding:20px 18px 10px}
  .kotak{padding:12px 18px 16px}
  .contoh{grid-template-columns:1fr}
  .kosong{padding-top:0}
  main.konsol{padding:0 16px 32px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
}

/* ---------------------------------------------------------------- dasbor */
/* align-items:start — kartu setinggi isinya sendiri. Tanpa ini, kartu dengan dua
   baris data ikut ditarik setinggi tetangganya yang lima baris, dan separuh
   badannya jadi ruang kosong. */
/* Batas 560px, bukan 430px. Di layar lebar 430px memuat tiga kartu sekaligus,
   dan setelah dikurangi kolom label serta kolom nilai, jalur batangnya tinggal
   ~100px — bagannya jadi hiasan, bukan alat baca. */
/* align-items:start membuat kartu berpasangan setinggi isinya masing-masing,
   dan yang pendek meninggalkan lubang di sebelah yang panjang — terukur sampai
   473px pada laman Beban. Diregangkan sama tinggi: isinya boleh berbeda, tapi
   kotaknya sejajar.

   margin-bottom juga perlu: .kartu biasa punya, .kisi-2 tidak, jadi jarak dari
   sepasang kartu ke kartu berikutnya 0 sementara antar kartu biasa 16px. */
.kisi-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(560px,100%),1fr));
  gap:var(--sela);align-items:stretch;margin-bottom:var(--sela)}
.kisi-2 > .kartu{margin-bottom:0;display:flex;flex-direction:column}
/* Isi terakhir yang mengembang, supaya ruang lebihnya jatuh ke bagan atau
   tabelnya — bukan menyisakan celah di bawah judul. */
.kisi-2 > .kartu > :last-child{flex:1 1 auto;min-height:0}

.delta{font-weight:650;font-family:var(--mono);font-size:10.5px}
.delta.naik{color:var(--hijau)}
.delta.turun{color:var(--merah)}
.kotak-angka .pen .delta{margin-right:4px}

.daftar-progres{display:grid;gap:12px;height:100%;align-content:stretch}
.baris-progres{display:grid;grid-template-columns:minmax(110px,17%) 1fr 46px minmax(170px,auto);
  gap:14px;align-items:center;font-size:13px}
.baris-progres .nm{font-weight:600;display:grid;line-height:1.35}
/* Dipakai juga di luar .baris-progres (mis. label ujung bar di Ringkasan
   eksekutif) -- supaya huruf/warnanya tetap sama di mana pun dipakai. */
.ket2{font-weight:400;font-size:11px;color:var(--tinta-3);font-family:var(--mono)}
.baris-progres .nilai{font-family:var(--mono);font-size:12px;color:var(--tinta-2);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.progres{position:relative;display:block;height:10px;border-radius:5px;background:var(--kartu-3);
  border:1px solid var(--garis);overflow:hidden}
.progres .isi{position:absolute;left:0;top:0;height:100%;border-radius:5px 0 0 5px;padding:0;
  animation:tumbuh .45s cubic-bezier(.2,.7,.3,1) both;transform-origin:left}
.progres .isi.penuh{background:var(--hijau)}
.progres .isi.cukup{background:var(--seri-1)}
.progres .isi.kurang{background:var(--kuning)}
.progres{overflow:visible}
.progres .tanda{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--tinta-2);
  border-radius:2px;opacity:.75}
.persen{font-family:var(--mono);font-size:11.5px;font-weight:500;min-width:42px;text-align:right;
  display:inline-block}
.persen.penuh{color:var(--hijau)}
.persen.cukup{color:var(--seri-1)}
.persen.kurang{color:var(--kuning)}

main.konsol > .hening{padding:0 0 18px;font-family:var(--mono);font-size:11.5px;max-width:none}
main.konsol header select.kecil[hidden]{display:none !important}


/* ---------------------------------------------------------------- seri kategori */
/* Urutan tetap dari palet tervalidasi; identitas selalu didampingi nama di legenda. */
:root{
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#4a3aa7;
  --s7:#98A2B3;
}
html[data-tema="gelap"]{
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#9085e9;
  --s7:#667085;
}
.tanda-seri{width:11px;height:11px;border-radius:3px;flex:none;display:inline-block;padding:0}
.tanda-seri.s1{background:var(--s1)} .tanda-seri.s2{background:var(--s2)}
.tanda-seri.s3{background:var(--s3)} .tanda-seri.s4{background:var(--s4)}
.tanda-seri.s5{background:var(--s5)} .tanda-seri.s6{background:var(--s6)}
.tanda-seri.s7{background:var(--s7)}

/* ---------------------------------------------------------------- batang berpasangan */
.batang-ganda .legenda{display:flex;gap:16px;align-items:center;font-size:12px;
  color:var(--tinta-2);margin-bottom:12px}
.batang-ganda .legenda span{display:inline-flex;align-items:center;gap:6px}
.batang-ganda .legenda .rng{margin-left:auto}
.batang-ganda .kolom{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:5px;
  align-items:end;height:132px}
.batang-ganda .grup{display:grid;grid-template-rows:1fr auto;gap:6px;height:100%;min-width:0}
.batang-ganda .pasangan{display:flex;gap:2px;align-items:flex-end;height:100%}
.batang-ganda .pasangan i{flex:1;border-radius:3px 3px 0 0;min-height:1px;position:relative;
  animation:naikBatang .4s cubic-bezier(.2,.7,.3,1) both;transform-origin:bottom}
@keyframes naikBatang{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.batang-ganda .pasangan i.a,.batang-ganda .pasangan i.s1{background:var(--s1)}
.batang-ganda .pasangan i.b,.batang-ganda .pasangan i.s2{background:var(--s2)}
.batang-ganda .pasangan i.s3{background:var(--s3)}
.batang-ganda .pasangan i.s4{background:var(--s4)}
.batang-ganda .pasangan i:hover{filter:brightness(1.12)}
.batang-ganda .petunjuk{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  margin-bottom:6px;padding:5px 8px;border-radius:var(--r-kecil);background:var(--tinta);
  color:var(--kanvas);font-size:11px;font-family:var(--sans);white-space:nowrap;opacity:0;
  pointer-events:none;transition:.12s;z-index:4}
.batang-ganda .pasangan i:hover .petunjuk{opacity:1}
.batang-ganda .lbl{font-size:10.5px;color:var(--tinta-3);text-align:center;font-family:var(--mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------------------------------------------------------------- donat */
/* Chart di atas (besar, persennya tertulis langsung di tiap potongan),
   legenda di bawah (bukan di samping) -- supaya chart bisa diperbesar tanpa
   bersaing ruang dengan daftar nama di sampingnya. */
.donat{display:flex;flex-direction:column;align-items:center;gap:14px}
.donat svg{width:200px;height:200px;max-width:100%}
.donat .potong{transition:filter .14s}
.donat .potong.s1{fill:var(--s1)} .donat .potong.s2{fill:var(--s2)}
.donat .potong.s3{fill:var(--s3)} .donat .potong.s4{fill:var(--s4)}
.donat .potong.s5{fill:var(--s5)} .donat .potong.s6{fill:var(--s6)}
.donat .potong.s7{fill:var(--s7)}
.donat .potong:hover{filter:brightness(1.08)}
.donat .label-donat{font-family:var(--mono);font-size:7px;font-weight:600;
  fill:#fff;pointer-events:none;paint-order:stroke;stroke:rgba(0,0,0,.35);stroke-width:1.5px}
.legenda-donat{display:grid;gap:8px;min-width:0;width:100%}
.legenda-donat .baris{display:grid;grid-template-columns:auto minmax(70px,1fr) auto;gap:8px 10px;
  align-items:center;font-size:12.5px}
.legenda-donat .nm{color:var(--tinta-2);line-height:1.35;overflow-wrap:anywhere}
.legenda-donat .nl{grid-column:2 / -1;font-size:11px;margin-top:-4px}
.legenda-donat .pr{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--tinta)}
.legenda-donat .nl{font-family:var(--mono);font-size:11.5px;color:var(--tinta-3);
  font-variant-numeric:tabular-nums}

/* Donat "Sebaran barang menurut lama bertahan" (Hari persediaan) saja --
   chart di kiri, legenda di kanan dalam 2 kolom, supaya ruang kosong di
   sampingnya terisi. Disasar lewat #id-sebaran, bukan .donat langsung, jadi
   tidak mengubah donat di laman lain. */
#id-sebaran .donat{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:32px}
#id-sebaran .donat svg{flex:none}
#id-sebaran .legenda-donat{flex:none;width:auto;grid-template-columns:repeat(2,minmax(150px,200px));
  gap:18px 36px;align-content:center}
#id-sebaran .legenda-donat .baris{row-gap:4px}
@media (max-width:560px){#id-sebaran .donat{justify-content:center}#id-sebaran .donat svg{margin:0 auto}}

/* -------------------------------------------------- bagan & tabel yang bisa diklik jadi saringan */
/* Dipasang lewat data-filter-kunci pada batang, potongan donat, dan baris
   legenda; lihat terapkanFilterKlik() di dasbor.html. Highlight lembut saat
   dilayang supaya jelas ini bisa diklik, tanpa mengubah bentuk aslinya. */
.batang .baris.boleh-klik,.batang-h .kelompok.boleh-klik,
.legenda-donat .baris.boleh-klik{cursor:pointer;border-radius:6px;transition:background-color .12s}
.batang .baris.boleh-klik:hover,.batang-h .kelompok.boleh-klik:hover,
.legenda-donat .baris.boleh-klik:hover{background:var(--aksen-lembut)}
.batang .baris.boleh-klik:hover .label,.batang-h .kelompok.boleh-klik:hover .label,
.legenda-donat .baris.boleh-klik:hover .nm{color:var(--aksen)}
.donat .potong.boleh-klik{cursor:pointer}
.donat .potong.boleh-klik:hover{filter:brightness(1.15)}
.baris-progres.boleh-klik{cursor:pointer;border-radius:6px;transition:background-color .12s}
.baris-progres.boleh-klik:hover{background:var(--aksen-lembut)}
.baris-progres.boleh-klik:hover .nm{color:var(--aksen)}
/* Baris tabel breakdown (per cabang/sales/brand) yang diklik menyaring —
   dipasang lewat pasangKlikBarisFilter() setelah tabelnya digambar. */
.bingkai-app main.konsol tbody tr.baris-klik{cursor:pointer}
.bingkai-app main.konsol tbody tr.baris-klik:hover td{background:var(--aksen-lembut)}
.bingkai-app main.konsol tbody tr.baris-klik:hover td:first-child{color:var(--aksen);font-weight:600}

/* ---------------------------------------------------------------- kartu tren per cabang */
.kisi-tren{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:var(--sela)}
.kisi-tren > .kartu{margin-bottom:0}
.tren-dua{display:grid;gap:18px}

/* isian tanggal & batang mini di dalam tabel */
input.kecil.tanggal{width:auto;padding:6px 9px;font-family:var(--mono);font-size:12px;text-align:left}
.jalur.mini{display:block;position:relative;height:7px;width:110px;border-radius:4px;
  background:var(--kartu-3);overflow:hidden}
.jalur.mini .isi{position:absolute;left:0;top:0;height:100%;background:var(--seri-1);
  border-radius:4px;padding:0}
td .jalur.mini{margin:0}

/* kartu angka dasbor: cukup sempit agar satu baris, cukup besar agar terbaca */
#skor,#b-skor,#m-skor,#p-skor,#ar-skor,#si-skor{
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
#skor .kotak-angka,#b-skor .kotak-angka,#m-skor .kotak-angka,
#p-skor .kotak-angka,#ar-skor .kotak-angka,#si-skor .kotak-angka{padding:14px 15px}
#skor .nl,#b-skor .nl,#m-skor .nl,#p-skor .nl,#ar-skor .nl,#si-skor .nl{
  font-size:19px;letter-spacing:-.015em;line-height:1.25}
#skor .pen,#b-skor .pen,#m-skor .pen,#p-skor .pen,#ar-skor .pen,#si-skor .pen{line-height:1.5}

/* tabel dengan sel bernilai skala — dipakai rasio stok dan pareto */
td .sel-skala{display:inline-block;padding:3px 8px;border-radius:var(--r-kecil);font-family:var(--mono);
  font-size:11.5px;font-weight:500}
.sel-skala.rendah{background:var(--hijau-lembut);color:var(--hijau);border:1px solid var(--hijau-garis)}
.sel-skala.sedang{background:var(--kuning-lembut);color:var(--kuning);border:1px solid var(--kuning-garis)}
.sel-skala.tinggi{background:var(--merah-lembut);color:var(--merah);border:1px solid var(--merah-garis)}

/* Sama warnanya dengan .sel-skala, tapi tanpa kotak/latar -- dipakai angka
   besar KPI yang sudah berdiri sendiri di kartunya sendiri, kotak tambahan
   di situ cuma bikin ramai. */
.warna-teks.rendah{color:var(--hijau)}
.warna-teks.sedang{color:var(--kuning)}
.warna-teks.tinggi{color:var(--merah)}

.baris-cari{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.baris-cari input{max-width:320px}
.baris-cari .tumbuh{flex:1 1 auto}
.baris-cari select.kecil.lebar{max-width:280px}
/* Baris kontrol geser "jumlah barang ditampilkan" (laman Barang yang Perlu
   Dibeli) — pola flex yang sama dengan .baris-cari, dipisah supaya lebar
   maksimum slidernya tidak ikut membatasi kotak pencarian di baris lain. */
.baris-geser{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.baris-geser input[type=range]{flex:1 1 180px;max-width:260px}
/* Tombol yang tampil seperti tautan di dalam sel tabel — dipakai kode barang
   yang bisa diklik untuk membuka detail per cabang. */
.tautan-baris{background:none;border:none;padding:0;margin:0;font:inherit;
  color:var(--seri-1);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
/* Kartu yang bisa dilipat: penjelasan cara kerja tidak perlu selalu terbuka. */
.kartu.lipat > summary{cursor:pointer;list-style:none}
.kartu.lipat > summary::-webkit-details-marker{display:none}
.kartu.lipat > summary > h2::after{content:"  ▸";color:var(--tinta-3)}
.kartu.lipat[open] > summary > h2::after{content:"  ▾"}
.lencana-opsional{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:99px;
  border:1px solid var(--garis);font-size:10.5px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--tinta-3);vertical-align:middle}
.alasan span.redup{color:var(--tinta-3);border-style:dashed}

/* ---- Tampilan sederhana (Target stok) ---- */
.mode-tampil{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.mode-tampil .mode-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-3);margin-right:4px}
.mode-tampil .tbl.aktif{background:var(--aksen-lembut);border-color:var(--aksen-garis);color:var(--aksen)}
#lembar-target_stok.sederhana .hanya-lengkap{display:none !important}
#lembar-target_stok:not(.sederhana) .hanya-sederhana{display:none !important}
/* Disamakan dengan .temuan li (Roadmap, Pareto, dst.) -- supaya kartu "Apa
   artinya untuk bisnis Anda" terasa satu keluarga dengan kartu temuan di
   laman lain, bukan ukuran huruf sendiri yang lebih besar. */
.sd-daftar{margin:0;padding-left:22px;font-size:13.5px;line-height:1.6;color:var(--tinta)}
.sd-daftar li{margin:4px 0}
.sd-daftar li b{color:var(--tinta);font-weight:650}

/* Kesimpulan berbahasa awam di Kecepatan tagih: kotak bergaris kiri berwarna
   menurut tingkat risikonya, sama seperti pil aman/awas/bahaya di tempat lain. */
.kt-kesimpulan{margin:14px 0 0;padding:12px 16px;border-radius:var(--r-kecil);font-size:13.5px;
  line-height:1.6;border:1px solid var(--garis);border-left:4px solid var(--garis-kuat);
  background:var(--kartu-2)}
.kt-kesimpulan.rendah{border-left-color:var(--hijau);background:var(--hijau-lembut)}
.kt-kesimpulan.sedang{border-left-color:var(--kuning);background:var(--kuning-lembut)}
.kt-kesimpulan.tinggi{border-left-color:var(--merah);background:var(--merah-lembut)}
.sd-tindakan{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:14px;
  margin-bottom:16px}
.sd-kartu{border:1px solid var(--garis);border-left:5px solid var(--garis-kuat);border-radius:var(--r-besar);
  background:var(--kartu);padding:16px 18px 14px;display:flex;flex-direction:column;gap:8px}
.sd-kartu.musim{border-left-color:var(--naik)}
.sd-kartu.laris{border-left-color:var(--aksen)}
.sd-kartu.genting{border-left-color:var(--turun)}
.sd-kepala{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.sd-kartu h3{margin:0;font-family:var(--serif);font-size:20px;font-weight:500;color:var(--tinta)}
.sd-kartu .untuk{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);
  margin-top:3px}
.sd-angka{font-family:var(--serif);font-size:22px;font-weight:500;color:var(--tinta);text-align:right;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.sd-angka small{display:block;font-family:var(--mono);font-size:11.5px;color:var(--tinta-3);font-weight:400}
.sd-kenapa{margin:0;font-size:14px;line-height:1.6;color:var(--tinta-2)}
.sd-sub{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);margin-top:4px}
.sd-kartu ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.6;color:var(--tinta-2)}
.sd-kartu li{margin:3px 0}
.sd-catatan{margin:0;font-size:13px;color:var(--tinta-3)}
.sd-kartu .kecil-tbl{align-self:flex-start;margin-top:4px}

/* Cetak: hanya isi laman, tanpa sidebar dan bilah saringan, semua tabel dibuka. */
@media print{
  .sisi-app,main.konsol > header,.mode-tampil,.bilah-tabel,.kaki-app{display:none !important}
  .bingkai-app{display:block}
  main.konsol{overflow:visible !important;height:auto !important}
  .gulung{max-height:none !important;overflow:visible !important}
  .kartu,.sd-kartu{break-inside:avoid}
  .sel-isi{border:none;background:transparent}
}


/* ---------------------------------------------------------------- batang mendatar berpasangan */
.batang-h .legenda{display:flex;gap:16px;align-items:center;font-size:12px;color:var(--tinta-2);
  margin-bottom:16px;flex-wrap:wrap}
.batang-h .legenda span{display:inline-flex;align-items:center;gap:7px}
.batang-h .isi-batang{display:grid;gap:11px}
.batang-h .kelompok{display:grid;grid-template-columns:minmax(140px,224px) minmax(0,1fr);
  gap:16px;align-items:center;padding:2px 0}
.batang-h .label{font-size:13px;color:var(--tinta);font-weight:550;line-height:1.35;
  overflow-wrap:anywhere}
.batang-h .deretan{display:grid;gap:4px;min-width:0}
.batang-h .deret{min-width:0;display:grid;gap:10px;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(96px,max-content)}
.batang-h .jalur{position:relative;display:block;height:16px;border-radius:0 4px 4px 0;
  background:color-mix(in srgb,var(--tinta-3) 7%,transparent)}
.batang-h .jalur .isi{top:3px;height:10px}
.batang-h .jalur .isi{position:absolute;left:0;top:0;height:100%;border-radius:0 4px 4px 0;
  padding:0;min-width:2px;transform-origin:left;
  animation:tumbuh .35s cubic-bezier(.2,.7,.3,1) both}
.batang-h .isi.s1{background:var(--s1)} .batang-h .isi.s2{background:var(--s2)}
.batang-h .isi.s3{background:var(--s3)} .batang-h .isi.s4{background:var(--s4)}
.batang-h .nilai{font-family:var(--mono);font-size:11.5px;color:var(--tinta-2);
  white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.batang-h{max-width:940px}
.batang,.bagan .batang{max-width:860px}

/* ---------------------------------------------------------------- garis banyak seri */
.garis-multi .legenda{display:flex;gap:16px;align-items:center;font-size:12px;color:var(--tinta-2);
  margin-bottom:18px;flex-wrap:wrap}
.garis-multi .legenda span{display:inline-flex;align-items:center;gap:7px}
.garis-multi .kanvas{position:relative;height:190px;margin:6px 0 0 88px}
.garis-multi svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.garis-multi .jalur{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.garis-multi .jalur.s1{stroke:var(--s1)} .garis-multi .jalur.s2{stroke:var(--s2)}
.garis-multi .jalur.s3{stroke:var(--s3)} .garis-multi .jalur.s4{stroke:var(--s4)}
.garis-multi .noktah{stroke:none}
/* Ruas menuju bulan yang belum penuh: putus-putus, noktahnya berongga. Ditaruh
   pada .garis-multi — bagan garis-ganda memakai kelas itu, bukan svg.garis. */
.garis-multi .jalur.berjalan{stroke-dasharray:5 4;opacity:.8}
/* Kekhususan sengaja disamakan dengan .noktah.s1 yang datang sesudahnya,
   kalau tidak isinya kembali terisi penuh. */
.garis-multi .noktah.berjalan{stroke-width:1.4}
.garis-multi .noktah.berjalan.s1{fill:var(--kartu);stroke:var(--s1)}
.garis-multi .noktah.berjalan.s2{fill:var(--kartu);stroke:var(--s2)}
.garis-multi .noktah.s1{fill:var(--s1)} .garis-multi .noktah.s2{fill:var(--s2)}
.garis-multi .noktah.s3{fill:var(--s3)} .garis-multi .noktah.s4{fill:var(--s4)}
.garis-multi .garis-bantu{position:absolute;left:0;right:0;display:flex;align-items:center;gap:8px;
  pointer-events:none}
.garis-multi .garis-bantu b{position:absolute;right:100%;margin-right:10px;font-weight:400;
  font-family:var(--mono);font-size:11px;color:var(--tinta-3);white-space:nowrap}
.garis-multi .garis-bantu i{flex:1;height:1px;background:var(--garis)}
.garis-multi .sasaran{position:absolute;inset:0}
.garis-multi .pita{position:absolute;top:0;bottom:0;width:26px;transform:translateX(-13px)}
.garis-multi .pita .petunjuk{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  margin-bottom:8px;padding:7px 10px;border-radius:var(--r-kecil);background:var(--tinta);
  color:var(--kanvas);font-size:11.5px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:.12s;z-index:5}
.garis-multi .pita:hover .petunjuk{opacity:1}
/* Petunjuk di tepi grafik menempel ke sisinya, bukan dipusatkan — kalau
   dipusatkan, separuhnya jatuh di luar kartu dan terpotong. Ditulis selengkap
   pemilih aslinya: `.petunjuk.tepi-kanan` saja kalah khusus dari
   `.garis-multi .pita .petunjuk`, dan kotaknya malah ikut mengerut. */
.batang-ganda .petunjuk.tepi-kanan,
.garis-multi .pita .petunjuk.tepi-kanan{left:auto;right:0;transform:none}
.batang-ganda .petunjuk.tepi-kiri,
.garis-multi .pita .petunjuk.tepi-kiri{left:0;right:auto;transform:none}
.garis-multi .sumbu-x{display:flex;justify-content:space-between;margin:10px 0 0 88px;
  font-family:var(--mono);font-size:11px;color:var(--tinta-3)}

/* Kolom tabel bisa diklik untuk mengurutkan. Penanda kecil selalu tampil supaya
   ketahuan bisa diklik, dan berubah jadi panah saat kolomnya dipakai mengurutkan. */
th{cursor:pointer;user-select:none;position:sticky;top:0}
th::after{content:"⇅";margin-left:6px;opacity:.35;font-weight:400}
th:hover{color:var(--tinta)}
th:hover::after{opacity:.7}
th[data-urut]{color:var(--aksen)}
th[data-urut]::after{opacity:1}
th[data-urut="naik"]::after{content:"↑"}
th[data-urut="turun"]::after{content:"↓"}

/* nominal yang ditulis langsung pada titik garis */
.garis-multi .angka-titik{position:absolute;transform:translate(-50%,-140%);font-family:var(--mono);
  font-size:11px;font-weight:500;white-space:nowrap;padding:1px 6px;border-radius:5px;
  background:color-mix(in srgb,var(--kartu) 88%,transparent);pointer-events:none;z-index:3}
.garis-multi .angka-titik.kanan{transform:translate(-100%,-140%)}
.garis-multi .angka-titik.kiri{transform:translate(0,-140%)}
.garis-multi .angka-titik.bawah{transform:translate(-50%,145%)}
.garis-multi .angka-titik.bawah.kanan{transform:translate(-100%,145%)}
.garis-multi .angka-titik.bawah.kiri{transform:translate(0,145%)}
.garis-multi .angka-titik.s1{color:var(--s1)} .garis-multi .angka-titik.s2{color:var(--s2)}
.garis-multi .angka-titik.s3{color:var(--s3)} .garis-multi .angka-titik.s4{color:var(--s4)}
.garis-multi .ringkas-seri{display:grid;gap:7px;margin:16px 0 0;padding-top:14px;
  border-top:1px solid var(--garis)}
.garis-multi .ringkas-seri .baris{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  font-size:12px;color:var(--tinta-3)}
.garis-multi .ringkas-seri .nm{font-weight:600;color:var(--tinta);min-width:56px}
.garis-multi .ringkas-seri b{font-family:var(--mono);font-weight:500;color:var(--tinta-2)}

/* Batang + garis dua sumbu (dipakai "Demand 12 minggu"): tidak punya garis
   bantu bernilai seperti garis-multi biasa, jadi lekukan kiri 88px-nya
   dicabut dan batangnya digambar langsung di svg yang sama dengan garisnya. */
.batang-garis-ganda .kanvas{margin-left:0}
.batang-garis-ganda .sumbu-x{margin-left:0}
.batang-garis-ganda .batang-ganda-sb{fill:var(--s1);opacity:.85}
/* Kolom klik tembus pandang: selebar satu kolom, jadi lebih gampang disasar
   (termasuk lewat sentuhan) daripada batang atau titik yang tipis, tanpa
   mengubah tampilan bagan. Diklik untuk menampilkan angka di .nilai-klik. */
.batang-garis-ganda .kanvas-klik{fill:transparent;cursor:pointer}
.batang-garis-ganda .nilai-klik{font-size:12px;color:var(--tinta-2);margin:2px 0 6px;
  font-variant-numeric:tabular-nums}
.batang-garis-ganda .nilai-klik[hidden]{display:none}

/* Bagan ringkas: dipakai bagan yang tidak perlu setinggi/selebar bagan utama
   (mis. Demand 12 minggu pada laman Barang yang Perlu Dibeli) — ukurannya
   proporsional, bukan melebar penuh mengikuti lebar kartunya. Dipasang
   bersama kelas .isi (lihat markup) supaya dapat jarak standar dari tepi
   kartu — tanpa .isi bagannya menempel rapat ke tepi kiri kartu. */
.bagan-kecil{max-width:640px}
.bagan-kecil .kanvas{height:130px}
.bagan-kecil .legenda{margin-bottom:10px;font-size:11.5px}

/* Warna henti gradien untuk batangGarisGanda (Demand 12 minggu) — dipasang
   lewat kelas, bukan atribut stop-color="var(...)" langsung di JS, supaya
   var() pasti diselesaikan lewat jalur CSS biasa. */
.henti-gradien.s1.atas{stop-color:var(--s1);stop-opacity:.5}
.henti-gradien.s1.bawah{stop-color:var(--s1);stop-opacity:.95}
.henti-gradien.s2.awal{stop-color:var(--s2);stop-opacity:.7}
.henti-gradien.s2.akhir{stop-color:var(--s2);stop-opacity:1}

/* "Total biaya jika membeli barang ini" (geser jumlah barang, laman Barang
   yang Perlu Dibeli) — kartu skor tunggal, bukan pil atau teks disorot biru;
   dibatasi lebarnya supaya tidak melar sepenuh baris seperti kartu KPI
   berjamak lainnya. */
.angka-besar-satu{grid-template-columns:minmax(215px,320px);margin:10px 0 4px}

/* -------------------------------------------------- laman Barang yang Perlu
   Dibeli: teks abu-abu beberapa tempat terlalu redup dibanding kartu lain,
   dan kepala tabelnya kurang tegas. Dinaikkan satu tingkat kontras
   (--tinta-3 -> --tinta-2, --tinta-2 -> --tinta) hanya di dalam laman ini
   supaya laman lain yang sudah memakai --tinta-3 dengan sengaja tidak ikut
   berubah. */
#lembar-refill .ket{color:var(--tinta-2)}
#lembar-refill .pil{color:var(--tinta-2)}
#lembar-refill .hening-sel{color:var(--tinta-2)}
#lembar-refill th{color:var(--tinta);font-weight:700}
#lembar-refill .rincian-alur{color:var(--tinta-2)}

/* Perkiraan Alur Mutasi: baris .batang standar (dipakai banyak laman lain)
   terlalu rapat untuk daftar ini, labelnya dua cabang sekaligus ("Cabang X →
   Cabang Y") — jaraknya ditambah di sini saja lewat #rf-alur, supaya laman
   lain yang memakai .batang tidak ikut berubah. Barisnya juga <details>
   (lihat alurMutasiDari), jadi sekalian diberi gaya lipat yang sama dengan
   .kartu.lipat: markah bawaan disembunyikan, diganti panah kecil. */
#rf-alur .baris{padding:7px 6px}
#rf-alur .baris .label{padding-right:10px}
#rf-alur .baris .nilai{padding-left:10px}
#rf-alur .baris-alur > summary{cursor:pointer;list-style:none}
#rf-alur .baris-alur > summary::-webkit-details-marker{display:none}
#rf-alur .baris-alur > summary::before{content:"▸";display:inline-block;width:14px;
  color:var(--tinta-3)}
#rf-alur .baris-alur[open] > summary::before{content:"▾"}
#rf-alur .baris-alur > summary.baris{grid-template-columns:14px minmax(96px,26%) 1fr minmax(104px,auto)}
#rf-alur .rincian-alur{display:grid;gap:4px;padding:6px 6px 10px 34px;font-size:12px;
  color:var(--tinta-2)}
#rf-alur .rincian-alur-baris{display:flex;justify-content:space-between;gap:14px}

/* Tabel di dasbor diberi ruang lebih tinggi — 300px hanya memuat empat baris,
   padahal isinya puluhan sampai ratusan. */
main.konsol .kartu > .gulung{border-top:1px solid var(--garis)}

/* ------------------------------------------------------------ tabel dasbor
   Setiap tabel menggulir di dalam wadahnya sendiri (.gulung), bukan ikut
   memanjangkan seluruh laman — supaya laman tidak perlu digulir berlarut-larut
   hanya karena satu tabel di tengahnya berisi ratusan baris.

   Kepala kolom menempel ke -1px, PUNCAK WADAHNYA SENDIRI (bukan ke kepala
   halaman): karena penggulirnya sekarang wadah tabel itu sendiri, bukan
   `main`, kepala kolom yang menempel ke `main` justru akan hanyut lewat batas
   atas wadahnya begitu tabelnya digulir. overscroll-behavior:contain
   menghentikan gulir mouse di ujung tabel, tidak diteruskan ke seluruh
   laman. */
.bingkai-app main.konsol .gulung{
  max-height:calc(100dvh - var(--tinggi-kepala,190px) - 132px);
  overflow-y:auto;overscroll-behavior:contain}
.bingkai-app main.konsol thead th{top:-1px}

/* Tabel yang tetap lebih lebar dari kartunya digulir mendatar. Kelas ini
   dipasang setelah diukur, bukan ditebak per tabel — lebar kolom bergantung
   pada isi datanya, jadi tabel yang sama bisa muat hari ini dan tidak besok.
   Jarak tempel kepalanya diatur dari skrip (lihat aturKepalaTabel). */
/* Wadah ini menggulir dua arah, dan itu disengaja. Kalau ia hanya menggulir
   mendatar, judul kolom di dalamnya tetap menempel pada puncaknya — dan
   puncak itu ikut hanyut bersama halaman, membawa judulnya bersembunyi di
   balik kepala halaman. Dengan tinggi maksimum, wadahnya sendiri yang diam:
   judul kolom menempel padanya dan tidak pernah pergi ke mana-mana. */
.bingkai-app main.konsol .gulung.gulung-x{overflow:auto;
  scrollbar-width:thin;scrollbar-color:var(--garis-kuat) transparent}
/* Tinggi maksimum hanya untuk tabel yang memang lebih tinggi daripada layar.
   Tabel lebar tapi pendek tidak butuh kotak gulir tegak: isinya sudah
   terlihat seluruhnya, dan memberinya kotak hanya menambah batang gulir yang
   tak pernah dipakai. */
.bingkai-app main.konsol .gulung.gulung-x.gulung-tinggi{
  max-height:calc(100dvh - var(--tinggi-kepala,190px) - 132px)}
.bingkai-app main.konsol .gulung-x::-webkit-scrollbar{width:9px}
.bingkai-app main.konsol .gulung-x::-webkit-scrollbar{height:9px}
.bingkai-app main.konsol .gulung-x::-webkit-scrollbar-thumb{background:var(--garis-kuat);
  border-radius:8px;border:2px solid transparent;background-clip:content-box}
.bingkai-app main.konsol .gulung-x thead th{top:-1px}
/* Kepala kolom ditarik 1px ke atas lewat jarak tempelnya (lihat dua aturan di
   atas), bukan lewat margin: margin tidak berlaku pada sel tabel, dan celah
   setipis rambut itu cukup untuk memperlihatkan baris yang lewat di belakang. */

/* Tabel yang sengaja digulir sendiri terlepas dari lebarnya (.gulung-x di atas
   hanya menyalakan gulir tegak kalau tabelnya JUGA lebih lebar dari kartunya
   — banyak tabel di laman Barang yang Perlu Dibeli sempit tapi bisa ribuan
   baris). overscroll-behavior: contain menghentikan gulir mouse di ujung
   tabel, bukan diteruskan ke halaman — jadi menggulir isi tabel sampai habis
   tidak tiba-tiba ikut menggulir seluruh laman. */
.bingkai-app main.konsol .gulung.gulung-panjang{max-height:460px;overflow-y:auto;
  overscroll-behavior:contain}
.bingkai-app main.konsol .gulung.gulung-panjang thead th{top:-1px}

/* Satu baris per baris. Isi yang membungkus ke 2-4 baris membuat tinggi baris
   berkisar 41px sampai 125px dan deretnya terlihat bergerigi; teks panjang
   lebih baik dipotong elipsis, judul lengkapnya tetap ada di tooltip. */
/* Tinggi baris dipatok, bukan dibiarkan mengikuti isi. Baris yang memuat pil
   (.sel-skala) tumbuh 7px lebih tinggi daripada baris berisi teks biasa, dan
   deret 100 baris dengan dua tinggi berselang-seling terlihat bergerigi. Isi
   sel sudah dijaga satu baris, jadi tinggi tetap aman. */
.bingkai-app main.konsol tbody td{height:var(--tinggi-baris,38px);
  padding-top:0;padding-bottom:0}
.bingkai-app main.konsol table.padat tbody td{--tinggi-baris:34px}
.bingkai-app main.konsol .kisi-2 tbody td{--tinggi-baris:34px}
.bingkai-app main.konsol td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Elipsis hanya bekerja pada teks yang langsung di dalam selnya. Kolom seperti
   Kode, Barang, dan Pemasok isinya dibungkus <span> demi tooltip, jadi yang
   meluber adalah span-nya dan teksnya terpotong tanpa tanda apa pun. Pil
   (.sel-skala, .cip) dikecualikan: kalau dijadikan blok, latarnya ikut melebar
   selebar kolom. */
.bingkai-app main.konsol td > span:only-child:not(.sel-skala):not(.cip):not(.alasan),
.bingkai-app main.konsol td > b:only-child{display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.bingkai-app main.konsol td > .sel-skala{max-width:100%;overflow:hidden;
  text-overflow:ellipsis;vertical-align:middle}
.bingkai-app main.konsol td:not(.angka){max-width:var(--kolom-teks,260px)}
.bingkai-app main.konsol td .sel-skala,
.bingkai-app main.konsol td .cip{white-space:nowrap}

/* Tabel berkolom banyak diberi napas lebih rapat supaya tetap muat tanpa
   digulir mendatar — menggulir mendatar untuk membaca satu baris jauh lebih
   melelahkan daripada tulisan yang sedikit lebih kecil. */
.bingkai-app main.konsol table.padat{font-size:12px}
/* Padding tegak dilepas: tinggi baris sudah dipatok lewat --tinggi-baris,
   dan padding tegak di sini justru menambahinya lagi. */
.bingkai-app main.konsol table.padat th{padding:8px 9px}
.bingkai-app main.konsol table.padat td{padding:0 9px}
.bingkai-app main.konsol table.padat td:not(.angka){max-width:var(--kolom-teks,190px)}

/* Kartu berdampingan hanya selebar setengah halaman, jadi tabelnya dirapatkan
   juga meski kolomnya sedikit — tanpa ini tabel lima kolom pun sudah menuntut
   gulungan mendatar hanya karena selisih 23px. */
.bingkai-app main.konsol .kisi-2 table{font-size:12px}
.bingkai-app main.konsol .kisi-2 th{padding:8px 9px}
.bingkai-app main.konsol .kisi-2 td{padding:0 9px}
.bingkai-app main.konsol .kisi-2 td:not(.angka){--kolom-teks:130px}

/* dua bagan berdampingan dengan skalanya masing-masing */
.kisi-bagan{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:26px}
.kisi-bagan .judul-kecil{margin-bottom:14px}
.kisi-bagan .batang{max-width:none}

/* pilihan periode butuh ruang lebih karena namanya panjang */
select.kecil.lebar{max-width:230px}
optgroup{font-weight:600;color:var(--tinta-3)}
optgroup option{font-weight:400;color:var(--tinta)}


/* ---------------------------------------------------------------- sidebar tertata */
/* Kepala dan blok akun tetap di tempatnya; hanya daftar menu yang bergulir, jadi
   identitas dan tombol keluar selalu terlihat berapa pun banyaknya laporan. */
.sisi .daftar{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;
  margin:0 -6px;padding:0 6px;scrollbar-width:thin;scrollbar-color:var(--garis-kuat) transparent;
  /* Bayangan yang hanya muncul kalau daftarnya memang masih berlanjut ke bawah.
     Dipasang lewat background-attachment: yang "local" ikut tergulir dan menutup
     bayangannya begitu sampai ujung. */
  background:
    linear-gradient(transparent, var(--kartu-2) 70%) bottom / 100% 22px no-repeat local,
    radial-gradient(farthest-side at 50% 100%, rgba(26,25,21,.11), transparent)
      bottom / 100% 7px no-repeat scroll;
}
html[data-tema="gelap"] .sisi .daftar{
  background:
    linear-gradient(transparent, var(--kartu-2) 70%) bottom / 100% 22px no-repeat local,
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.45), transparent)
      bottom / 100% 7px no-repeat scroll;
}
.sisi .daftar::-webkit-scrollbar{width:8px}
.sisi .daftar::-webkit-scrollbar-thumb{background:var(--garis-kuat);border-radius:8px;
  border:2px solid transparent;background-clip:content-box}
/* Judul kelompok menempel di atas saat digulir, jadi selalu jelas sedang di bagian mana. */
.sisi .daftar .judul-kelompok{position:sticky;top:0;z-index:2;background:var(--kartu-2);
  padding:12px 10px 6px;margin:0 -6px;padding-left:16px}
.sisi .daftar .judul-kelompok:first-child{padding-top:6px}
.sisi .pintasan-tetap{display:flex;flex-direction:column;gap:2px;padding-top:6px;
  border-top:1px solid var(--garis);margin-top:8px}

.sisi .tbl.kembali{border:1px solid var(--garis);background:var(--kartu-2);color:var(--tinta-2);
  justify-content:flex-start;margin-bottom:10px;font-weight:600}
.sisi .tbl.kembali:hover{background:var(--kartu-3);color:var(--tinta);border-color:var(--garis-kuat)}
.sisi .tbl.kembali svg{color:var(--tinta-3)}
.sisi .tbl.kembali:hover svg{color:var(--aksen)}

/* penanda lembar aktif: garis tipis di tepi kiri, bukan hanya warna latar */
.sisi .tbl.aktif{position:relative}
.sisi .tbl.aktif::before{content:"";position:absolute;left:-6px;top:6px;bottom:6px;width:3px;
  border-radius:0 3px 3px 0;background:var(--aksen)}

@media (max-width:940px){
  .sisi .daftar{flex-direction:row;flex-wrap:wrap;overflow:visible;margin:0;padding:0}
  .sisi .daftar .judul-kelompok{display:none}
  .sisi .pintasan-tetap{flex-direction:row;border:none;margin:0;padding:0}
  .sisi .tbl.kembali{margin:0}
}


/* ---------------------------------------------------------------- kelompok menu yang bisa dilipat */
/* Nama kelasnya sendiri: `.kelompok` sudah dipakai baris kategori pada bagan batang. */
.grup-menu{display:flex;flex-direction:column;gap:2px}
.grup-menu .judul-kelompok{display:flex;align-items:center;gap:6px;width:100%;
  position:sticky;top:0;z-index:2;background:var(--kartu-2);cursor:pointer;
  border:none;text-align:left;padding:12px 10px 6px;margin:0 -6px;padding-left:16px;
  font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-3);transition:color .14s}
.grup-menu .judul-kelompok:hover{color:var(--tinta-2)}
.grup-menu .judul-kelompok .panah{width:13px;height:13px;margin-left:auto;flex:none;
  transition:transform .18s;opacity:.7}
.grup-menu.tutup .judul-kelompok .panah{transform:rotate(-90deg)}
.grup-menu .isi-kelompok{display:flex;flex-direction:column;gap:2px;overflow:hidden}
.grup-menu.tutup .isi-kelompok{display:none}
/* Kelompok yang terlipat tetap menunjukkan bahwa isinya ada, lewat titik kecil. */
.grup-menu.tutup .judul-kelompok::after{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--garis-kuat);flex:none;margin-left:2px}


/* ------------------------------------------------------------ unduh tabel
   Tombol unduh duduk di atas tabelnya masing-masing, bukan di judul kartu:
   satu kartu bisa memuat dua tabel, dan tombol di judul tidak bisa menjelaskan
   yang mana yang akan terunduh. */
.bilah-tabel{display:flex;justify-content:flex-end;align-items:center;gap:8px;
  padding:9px 18px 0}
.bilah-tabel .jumlah-baris{margin-right:auto;color:var(--tinta-3);font-size:12px;
  font-family:var(--mono)}
.tbl-unduh{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  border:1px solid var(--garis);border-radius:var(--r);background:transparent;
  color:var(--tinta-2);font-size:11.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;cursor:pointer;font-family:inherit}
.tbl-unduh:hover{background:var(--kartu-2);color:var(--tinta);
  border-color:var(--garis-kuat)}
.tbl-unduh:focus-visible{outline:2px solid var(--aksen);outline-offset:2px}
.tbl-unduh svg{width:13px;height:13px;flex:none}
/* Sesaat setelah diklik, tombolnya menyebut apa yang terjadi. Unduhan browser
   tidak selalu terlihat, dan tanpa ini tidak ada tanda bahwa kliknya berhasil. */
.tbl-unduh.selesai{color:var(--naik);border-color:var(--naik)}


/* --------------------------------------------------------- saringan banyak
   Pengganti <select> untuk saringan yang boleh dipilih lebih dari satu.
   Elemen <select> aslinya tetap ada di DOM — disembunyikan — supaya kode dan
   uji yang membaca .value tidak perlu tahu soal ini. */
.pilih-banyak{position:relative;display:inline-flex;min-width:0}
.pilih-banyak > select{display:none}
.pilih-banyak .pb-kepala{display:flex;align-items:center;gap:7px;width:100%;
  padding:7px 10px;border:1px solid var(--garis);border-radius:var(--r);
  background:var(--kartu);color:var(--tinta);font:inherit;font-size:12.5px;
  cursor:pointer;text-align:left}
.pilih-banyak .pb-kepala:hover{border-color:var(--garis-kuat)}
.pilih-banyak .pb-kepala:focus-visible{outline:2px solid var(--aksen);outline-offset:1px}
.pilih-banyak .pb-kepala .teks{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.pilih-banyak .pb-kepala .anak-panah{flex:none;opacity:.55;font-size:10px}
/* Jumlah terpilih disebut angkanya, supaya tidak perlu dibuka untuk tahu. */
.pilih-banyak .pb-hitung{flex:none;padding:1px 6px;border-radius:99px;
  background:var(--aksen);color:#fff;font-size:10.5px;font-weight:700;
  font-family:var(--mono)}
.pilih-banyak[data-buka="1"] .pb-kepala{border-color:var(--aksen)}

.pilih-banyak .pb-laci{position:absolute;z-index:60;top:calc(100% + 5px);left:0;
  min-width:100%;max-width:340px;background:var(--kartu);
  border:1px solid var(--garis-kuat);border-radius:var(--r);
  box-shadow:var(--bayang-2, 0 10px 30px rgba(0,0,0,.35));padding:7px;
  display:none}
.pilih-banyak[data-buka="1"] .pb-laci{display:block}
.pilih-banyak .pb-cari{width:100%;padding:6px 9px;margin-bottom:6px;
  border:1px solid var(--garis);border-radius:var(--r);background:var(--kartu-2);
  color:var(--tinta);font:inherit;font-size:12.5px}
.pilih-banyak .pb-daftar{max-height:264px;overflow:auto;scrollbar-width:thin}
.pilih-banyak .pb-opsi{display:flex;align-items:center;gap:8px;padding:6px 8px;
  border-radius:var(--r);cursor:pointer;font-size:12.5px;line-height:1.3}
.pilih-banyak .pb-opsi:hover,.pilih-banyak .pb-opsi.pb-sorot{background:var(--kartu-2)}
/* Ukurannya disebut eksplisit: ada aturan global yang memberi width:100%
   pada input, dan kotak centang selebar 347px menyisakan nol untuk nama
   pilihannya — teksnya ada di DOM tapi tidak terlihat sama sekali. */
.pilih-banyak .pb-opsi input{flex:none;width:14px;height:14px;min-width:14px;
  margin:0;padding:0;accent-color:var(--aksen)}
/* flex:1 wajib disebut: tanpa itu span-nya menciut ke lebar 0 dan nama
   pilihannya tidak terlihat sama sekali, padahal teksnya ada di DOM. */
.pilih-banyak .pb-opsi span{flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pilih-banyak .pb-kaki{display:flex;justify-content:space-between;gap:8px;
  padding-top:7px;margin-top:6px;border-top:1px solid var(--garis)}
.pilih-banyak .pb-kaki button{padding:4px 9px;border:1px solid var(--garis);
  border-radius:var(--r);background:transparent;color:var(--tinta-2);
  font:inherit;font-size:11.5px;cursor:pointer}
.pilih-banyak .pb-kaki button:hover{background:var(--kartu-2);color:var(--tinta)}
.pilih-banyak .pb-kosong{padding:10px 8px;color:var(--tinta-3);font-size:12.5px}
/* Ikut melar seperti saringan lain di barisnya. */
.bingkai-app main.konsol .baris-saring > .pilih-banyak{flex:1 1 150px;min-width:0}

/* "Cara mencapainya" (Target stok): klik untuk detail lengkap, bukan hover --
   supaya jalan juga di layar sentuh, bukan cuma mouse. */
.cara-klik{background:none;border:none;padding:0;font:inherit;color:inherit;
  cursor:pointer;text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:2px}
.popup-cara{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;background:rgba(0,0,0,.45);padding:20px}
.popup-cara[hidden]{display:none}
.popup-cara-kartu{position:relative;background:var(--kartu);
  border:1px solid var(--garis-kuat);border-radius:var(--r);
  box-shadow:var(--bayang-2, 0 10px 30px rgba(0,0,0,.35));
  max-width:480px;max-height:70vh;overflow:auto;padding:32px 40px 20px 20px;
  font-size:13px;line-height:1.6;color:var(--tinta);white-space:pre-line}
.popup-cara-tutup{position:absolute;top:6px;right:6px;width:28px;height:28px;
  border:none;background:transparent;color:var(--tinta-2);font-size:20px;
  cursor:pointer;border-radius:var(--r);line-height:1}
.popup-cara-tutup:hover{background:var(--kartu-2);color:var(--tinta)}
.popup-cara-geser,.popup-rincian-geser{position:absolute;top:0;left:0;right:0;height:26px;
  cursor:move;touch-action:none;border-radius:var(--r) var(--r) 0 0;background:var(--kartu-2)}
.popup-cara-geser::after,.popup-rincian-geser::after{content:"";position:absolute;
  top:11px;left:50%;transform:translateX(-50%);width:36px;height:4px;border-radius:2px;
  background:var(--garis-kuat)}
.cara-rincian-klik{display:inline-block;margin-top:4px;padding:3px 10px;
  border:1px solid var(--garis-kuat);border-radius:999px;background:var(--kartu-2);
  color:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.cara-rincian-klik:hover{background:var(--garis-kuat)}
.popup-rincian{position:fixed;inset:0;z-index:210;display:flex;align-items:center;
  justify-content:center;background:rgba(0,0,0,.45);padding:20px}
.popup-rincian[hidden]{display:none}
.popup-rincian-kartu{position:relative;background:var(--kartu);
  border:1px solid var(--garis-kuat);border-radius:var(--r);
  box-shadow:var(--bayang-2, 0 10px 30px rgba(0,0,0,.35));
  max-width:420px;max-height:70vh;overflow:auto;padding:32px 40px 20px 20px;
  font-size:13px;line-height:1.6;color:var(--tinta)}
.popup-rincian-kartu h3{margin:0 0 8px;font-size:13px}
.popup-rincian-kartu ul{margin:0;padding-left:18px}
.popup-rincian-kartu li{margin-bottom:4px}
.popup-rincian-tutup{position:absolute;top:6px;right:6px;width:28px;height:28px;
  border:none;background:transparent;color:var(--tinta-2);font-size:20px;
  cursor:pointer;border-radius:var(--r);line-height:1}
.popup-rincian-tutup:hover{background:var(--kartu-2);color:var(--tinta)}

/* "Detail per Cabang" (Barang yang Perlu Dibeli): pop up juga, bukan tabel
   yang muncul di bawah daftar -- sama seperti pop up "Cara mencapainya" di
   Target stok, cuma lebih lebar karena isinya tabel, bukan teks. */
.popup-detail{position:fixed;inset:0;z-index:210;display:flex;align-items:center;
  justify-content:center;background:rgba(0,0,0,.45);padding:20px}
.popup-detail[hidden]{display:none}
.popup-detail-kartu{position:relative;background:var(--kartu);
  border:1px solid var(--garis-kuat);border-radius:var(--r);
  box-shadow:var(--bayang-2, 0 10px 30px rgba(0,0,0,.35));
  max-width:640px;max-height:80vh;overflow:auto;padding:32px 20px 20px;
  font-size:13px;line-height:1.6;color:var(--tinta)}
.popup-detail-kartu h3{margin:0 16px 10px;font-size:13px}
.popup-detail-geser{position:absolute;top:0;left:0;right:0;height:26px;
  cursor:move;touch-action:none;border-radius:var(--r) var(--r) 0 0;background:var(--kartu-2)}
.popup-detail-geser::after{content:"";position:absolute;
  top:11px;left:50%;transform:translateX(-50%);width:36px;height:4px;border-radius:2px;
  background:var(--garis-kuat)}
.popup-detail-tutup{position:absolute;top:6px;right:6px;width:28px;height:28px;
  border:none;background:transparent;color:var(--tinta-2);font-size:20px;
  cursor:pointer;border-radius:var(--r);line-height:1}
.popup-detail-tutup:hover{background:var(--kartu-2);color:var(--tinta)}


/* ------------------------------------------------------- rencana pembelian
   Sel yang bisa diisi orang. Bentuknya tetap sel tabel — hanya isinya kotak
   angka kecil — supaya tinggi barisnya tidak berubah dan tabelnya tetap rapi. */
.sel-isi{width:82px;padding:4px 7px;border:1px solid var(--garis);border-radius:var(--r);
  background:var(--kartu-2);color:var(--tinta);font:inherit;font-size:12.5px;
  font-family:var(--mono);text-align:right}
.sel-isi:focus{outline:2px solid var(--aksen);outline-offset:1px;border-color:var(--aksen)}
.sel-isi.diubah{border-color:var(--aksen);background:var(--aksen-lembut)}
.sel-isi.tersimpan{border-color:var(--naik)}
td:has(> .sel-isi){padding-top:3px;padding-bottom:3px}
/* Alasan tiap baris: pil-pil kecil. Dulu dipotong elipsis pada lebar kolom
   teks (260px) dan sisanya cuma ada di tooltip; pil ketiga dan seterusnya
   tidak pernah terbaca. Sekarang selnya dibiarkan selebar isinya; tabelnya
   sudah bisa digulir mendatar, jadi tidak ada yang hilang. */
.alasan{display:inline-flex;gap:4px;white-space:nowrap;vertical-align:middle}
.bingkai-app main.konsol td.sel-alasan,
.bingkai-app main.konsol table.padat td.sel-alasan{max-width:none}
/* Kolom keterangan bebas (Sebab, Keterangan) pada tabel rencana ikut dilebarkan. */
#rc-kurangi td:last-child,#tt-mutasi td:last-child,#tt-lindung td:last-child,
#tt-promo td:last-child{max-width:none}
.alasan span{padding:1px 7px;border-radius:99px;border:1px solid var(--garis);
  font-size:11px;color:var(--tinta-2);background:var(--kartu-2);white-space:nowrap}
.alasan span.genting{color:var(--turun);border-color:var(--turun)}
.alasan span.laris{color:var(--aksen);border-color:var(--aksen-garis)}
.alasan span.musim{color:var(--naik);border-color:var(--naik)}
.baris-anggaran{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.baris-anggaran input{flex:1 1 220px;min-width:180px;font-family:var(--mono);
  font-size:15px}
.baris-anggaran .awalan{color:var(--tinta-3);font-family:var(--mono)}
/* Pilihan sekunder di bawah kotak target: kalimat pendek dengan <select> di
   dalamnya, supaya kotak angkanya sendiri tetap yang paling menonjol. */
.baris-pilihan-target{display:flex;gap:14px 22px;align-items:center;flex-wrap:wrap;
  font-size:13px;color:var(--tinta-2);padding-top:0}
.baris-pilihan-target label{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  text-transform:none;letter-spacing:0;font-weight:500;font-size:13px;color:var(--tinta-2)}

/* Keterangan redup di dalam sel — tanpa padding, jadi tinggi barisnya tidak
   ikut menggelembung seperti .hening (yang berpadding 16px untuk paragraf). */
.hening-sel{color:var(--tinta-3)}
/* Sel langkah boleh membungkus: isinya beberapa baris langkah, bukan satu nilai. */
/* Sel cara: satu baris ringkas, dipotong elipsis; rinciannya di tooltip. */
#ts-tabel td:last-child{min-width:260px;max-width:460px}

/* Target stok: hijau = penjualan alami, kuning = diskon, merah = obral. */
.warna-hijau{color:var(--hijau);font-weight:600}
.warna-kuning{color:var(--kuning);font-weight:600}
.warna-merah{color:var(--merah);font-weight:600}
.alasan span.hijau{color:var(--hijau);background:var(--hijau-lembut);border-color:var(--hijau-garis)}
.alasan span.kuning{color:var(--kuning);background:var(--kuning-lembut);border-color:var(--kuning-garis)}
.alasan span.merah{color:var(--merah);background:var(--merah-lembut);border-color:var(--merah-garis)}

/* Kartu Stok optimal: daftar cara penurunan yang boleh dicentang. */
.dd-cara{margin-top:4px;font-size:11px}
.dd-cara summary{cursor:pointer;color:var(--tinta-2);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
.dd-isi{display:flex;flex-direction:column;gap:3px;padding:6px 0 2px}
.opt-baris{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tinta);cursor:pointer;
  text-transform:none;letter-spacing:0;font-weight:500}
.opt-nilai{margin-left:auto;color:var(--tinta-2);font-family:var(--mono)}
.opt-baris input[type="checkbox"]{width:auto;height:auto;flex:none;margin:0;padding:0}
.opt-nama{flex:1 1 auto;min-width:0}
.opt-nilai{white-space:nowrap;flex:none}

/* ---------------------------------------------------------- simulasi penawaran
   Kotak isian di dalam tabel dan sel hasil yang diperbarui di tempat. Baris rugi
   diberi garis merah di kiri, bukan latar merah: deretan latar berwarna terbaca
   seperti galat, padahal rugi di sini justru informasi yang dicari. */
.pil.buruk,.tag.buruk{color:var(--merah);background:var(--merah-lembut);border-color:var(--merah-garis)}
.sm-gulung{max-height:none}
.sm-kecil{font-size:11px;color:var(--tinta-3);line-height:1.5;font-family:var(--sans);font-weight:400;
  text-align:left;max-width:100%;white-space:normal}
td.angka .sm-kecil{text-align:right;margin-left:auto}
input.kecil.lebar{width:128px}
#sm-tabel td{vertical-align:top}
#sm-tabel td.sm-sel-catatan{white-space:normal;--kolom-teks:250px}
/* Tombol hapus duduk di sel catatan, di bawah pilnya: ia tindakan atas baris
   itu, bukan kolom tersendiri yang menambah lebar tabel. */
.sm-hapus{display:block;margin-top:5px;padding:3px 8px;font-size:11px}
#sm-tabel tr.sm-rugi > td:first-child{box-shadow:inset 3px 0 0 var(--merah)}
#sm-tabel td[id$="-laba"],#sm-tabel td[id$="-margin"]{font-weight:600;color:var(--tinta)}
#sm-tabel tr.sm-rugi td[id$="-laba"],#sm-tabel tr.sm-rugi td[id$="-margin"]{color:var(--merah)}
.sm-pakai{margin-top:5px;padding:3px 8px;font-size:11px}
label.pil input.kecil{width:64px;padding:3px 6px}
#sm-tabel tfoot td{background:var(--kartu-2);border-top:2px solid var(--garis-kuat);
  border-bottom:none;font-weight:650;color:var(--tinta);vertical-align:middle}
#sm-tabel tfoot .sm-kecil{font-weight:400}
#sm-tabel tfoot tr.sm-rugi td[id$="-laba"],#sm-tabel tfoot tr.sm-rugi td[id$="-margin"]{color:var(--merah)}
#sm-tabel tfoot tr.sm-rugi > td:first-child{box-shadow:inset 3px 0 0 var(--merah)}

details.rincian-cara{padding:0}
details.rincian-cara > summary{cursor:pointer;list-style:none;padding:14px 18px;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-3)}
details.rincian-cara > summary::-webkit-details-marker{display:none}
details.rincian-cara > summary::before{content:"\25B8 ";display:inline-block;
  margin-right:7px;transition:transform .14s}
details.rincian-cara[open] > summary::before{transform:rotate(90deg)}
details.rincian-cara > summary:hover{color:var(--tinta)}
details.rincian-cara[open] > summary{border-bottom:1px solid var(--garis)}

/* Kartu "kotak-angka" di glosarium (RFM, risiko pembayaran) berisi kalimat
   pendek, bukan angka KPI -- ukuran serif raksasa dan pemotongan dua baris
   yang dirancang untuk angka tidak cocok dipakai di sini, bikin tulisannya
   kebesaran dan kalimatnya terpotong tanpa cara membaca sisanya. */
.rincian-cara .kotak-angka .nl{font-family:inherit;font-size:15px;font-weight:650;
  white-space:normal;overflow:visible;text-overflow:clip;min-height:0;display:block}
.rincian-cara .kotak-angka .pen{-webkit-line-clamp:unset;display:block;min-height:0}

/* Keterangan kartu skor klaster butuh tiga baris supaya tidak terpotong. */
#kl-skor .kotak-angka .pen,#kr-skor .kotak-angka .pen{-webkit-line-clamp:3}

/* ---- Target stok: sel yang bisa dibuka dan diringkas ------------------------
   "show more / show less" kecil sekali dan di kanan isi selnya. */
.ket-lebih{flex:none;background:none;border:none;padding:0;margin:0;font:inherit;
  font-size:7px;line-height:1.6;letter-spacing:0;text-transform:none;font-weight:500;
  color:var(--aksen);cursor:pointer;white-space:nowrap;text-decoration:underline;
  text-decoration-style:dotted;text-underline-offset:1px;opacity:.9}
.ket-lebih:hover{text-decoration-style:solid;opacity:1}
.ket-lebih[hidden]{display:none}
.ket-sel,.riwayat-sel{display:flex;align-items:flex-start;gap:5px;padding:2px 0}
.ket-sel .ket-teks{flex:1 1 auto;min-width:0;font-size:12px;line-height:1.5;color:var(--tinta-2)}
.ket-sel.ringkas .ket-teks{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ket-sel.panjang .ket-teks{white-space:normal;overflow-wrap:anywhere}
.riwayat-isi{flex:1 1 auto;min-width:0}
.riwayat-isi > div{font-size:12px;line-height:1.5;white-space:nowrap}
#tl-tabel td:last-child{min-width:260px;max-width:460px}
/* Isian Days of Inventory: angka pendek, jangan ikut melebar seperti kotak target. */
.baris-anggaran input#tt-doi{flex:0 0 96px;min-width:0;width:96px}

/* ---- Target stok: simulasi Days of Inventory ------------------------------- */
.sim-hasil{margin:8px 16px 0;border:1px solid var(--garis);border-radius:var(--r);
  background:var(--kartu-2);max-height:264px;overflow:auto}
.sim-hasil[hidden]{display:none}
.sim-pilih{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;width:100%;text-align:left;
  padding:8px 12px;background:none;border:none;border-bottom:1px solid var(--garis);
  color:var(--tinta);font:inherit;font-size:13px;cursor:pointer}
.sim-pilih:last-child{border-bottom:none}
.sim-pilih:hover{background:var(--aksen-lembut)}
.sim-kosong-cari{padding:10px 12px}
#sim-tabel input.sim-doi{width:96px}
#sim-tabel td.sim-barang,#sim-tabel td.sim-lokasi{
  height:auto;min-width:150px;max-width:260px;white-space:normal;
  overflow-wrap:anywhere;text-overflow:clip;line-height:1.4;vertical-align:top
}
.sim-hapus{border:none;background:none;color:var(--tinta-3);font-size:18px;line-height:1;
  cursor:pointer;padding:2px 6px;border-radius:var(--r-kecil)}
.sim-hapus:hover{background:var(--kartu-2);color:var(--merah)}

/* Judul kolom simulasi boleh turun baris supaya seluruh kolom, termasuk hasilnya, muat tanpa menggulir mendatar. */
#sim-tabel th{white-space:normal;line-height:1.3;vertical-align:bottom}
#sim-tabel td,#sim-tabel th{padding-left:10px;padding-right:10px}
#sim-tabel .sim-harapan,#sim-tabel .sim-kurang{white-space:nowrap;min-width:110px}

/* ---- Target stok: tampilan dasbor ------------------------------------------
   Scorecard dikecilkan jadi deretan indikator ringkas; tabel dijadikan pusat
   halaman (kartu lebih tegas, kepala kolom pekat, baris selang-seling, teks lebih
   terang). Semuanya dibatasi pada laman ini lewat id section-nya. */
#lembar-target_stok .angka-besar{gap:10px;margin-bottom:14px}
#lembar-target_stok .kotak-angka{padding:9px 14px 9px 16px;border-radius:var(--r);
  grid-template-rows:auto auto auto;box-shadow:none}
#lembar-target_stok .kotak-angka .nm{min-height:0;font-size:10px;letter-spacing:.07em}
#lembar-target_stok .kotak-angka .nl{min-height:0;margin:3px 0 1px;
  font-size:clamp(16px,7.5cqw,21px);line-height:1.2}
#lembar-target_stok .angka-besar .kotak-angka .pen{min-height:0;font-size:10px;line-height:1.35;
  -webkit-line-clamp:2}
#lembar-target_stok .kotak-angka .dd-cara{margin-top:2px;font-size:10px}
#lembar-target_stok .opt-baris{font-size:11px}

/* Aturan penentuan: dilipat, teksnya sekunder. */
.aturan-ts{padding:0 18px 14px}
.aturan-ts > summary{cursor:pointer;list-style:none;font-size:12px;font-weight:600;color:var(--aksen);
  padding:4px 0}
.aturan-ts > summary::-webkit-details-marker{display:none}
.aturan-ts > summary::before{content:"\25B8";display:inline-block;margin-right:6px;transition:transform .14s}
.aturan-ts[open] > summary::before{transform:rotate(90deg)}
.aturan-ts ol{margin:6px 0 0;font-size:12.5px}

/* Kartu tabel: garis dan bayangan lebih tegas, judul lebih besar dengan penanda aksen. */
#lembar-target_stok .kartu-tabel{border-color:var(--garis-kuat);box-shadow:var(--bayang-2)}
#lembar-target_stok .kartu-tabel > h2{font-size:13px;letter-spacing:.06em;color:var(--tinta);
  padding:15px 18px;box-shadow:inset 3px 0 0 var(--aksen)}
#lembar-target_stok .kartu-tabel > p.ket{font-size:12px;line-height:1.55}
#lembar-target_stok .kartu-tabel > .isi{padding:12px 18px}
#lembar-target_stok table{font-size:13px}
#lembar-target_stok thead th{color:var(--tinta);border-bottom:2px solid var(--garis-kuat);font-size:11px}
#lembar-target_stok tbody td{color:var(--tinta);height:40px}
#lembar-target_stok tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--kartu-2) 65%, transparent)}
#lembar-target_stok tbody tr:hover td{background:var(--aksen-lembut)}
#lembar-target_stok td .hening-sel{color:var(--tinta-3)}