/* ===========================================================================
   DAPROS (Dashboard Provisioning) — tema Argon
   Tata letak dan warna chrome meniru Argon Dashboard (Creative Tim):
   sidebar putih dengan ikon berwarna, pita gradien biru di kepala konten,
   kartu putih bersudut lembut yang menindih pita itu, dan tipografi Open Sans.

   Yang TIDAK berubah: seluruh nama kelas dan struktur data. Berkas PHP tidak
   perlu disentuh untuk pergantian tema ini.

   Warna di dalam chart tetap memakai ramp yang sudah lolos uji kontras dan
   buta warna — sudah diuji ulang terhadap permukaan kartu putih Argon.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

:root {
  color-scheme: light;

  /* --- permukaan --- */
  --plane:      #f8f9fe;   /* latar halaman Argon */
  --surface:    #ffffff;   /* kartu */
  --surface-2:  #f6f9fc;
  --surface-3:  #e9ecef;

  /* --- tinta --- */
  --ink:        #32325d;   /* judul */
  --ink-2:      #525f7f;   /* teks isi */
  --ink-3:      #8898aa;   /* redup */
  --grid:       #e9ecef;
  --garis:      #e9ecef;

  /* --- identitas Argon --- */
  --primer:     #5e72e4;
  --primer-tua: #324cdd;
  --info:       #11cdef;
  --sukses:     #2dce89;
  --bahaya:     #f5365c;
  --peringatan: #fb6340;
  --gelap:      #172b4d;
  --gelap-2:    #1a174d;
  --grad-kepala: linear-gradient(87deg, #11cdef 0, #1171ef 100%);
  --grad-gelap:  linear-gradient(87deg, #172b4d 0, #1a174d 100%);
  --grad-primer: linear-gradient(87deg, #5e72e4 0, #825ee4 100%);
  --kepala-ink: #ffffff;

  --tombol-bg:  #5e72e4;
  --tombol-ink: #ffffff;
  --avatar-bg:  #5e72e4;

  /* --- ramp ordinal umur order (lolos uji pada permukaan #ffffff) --- */
  --aging-1:    #eda28c;
  --aging-2:    #dd7756;
  --aging-3:    #c14b28;
  --aging-4:    #8c220e;

  /* --- segmen kohort: jadi PS / masih proses / kendala / batal --- */
  --koh-1:      #1baf7a;   /* jadi PS      */
  --koh-2:      #2a78d6;   /* masih proses */
  --koh-3:      #eb6834;   /* kendala      */
  --koh-4:      #b0b8c4;   /* batal — netral, sengaja tanpa warna status */

  /* --- seri kategorikal branch / service area --- */
  --br-1:       #2a78d6;
  --br-2:       #eb6834;
  --br-3:       #1baf7a;
  --br-4:       #eda100;
  --br-5:       #e87ba4;

  /* --- ramp ordinal slot waktu --- */
  --slot-1:     #86b6ef;
  --slot-2:     #5598e7;
  --slot-3:     #2a78d6;
  --slot-4:     #1c5cab;
  --slot-5:     #104281;

  --seri-1:     #2a78d6;
  --seri-2:     #eb6834;
  --batang:     #2a78d6;
  --baik:       #2dce89;

  --r:          8px;
  --r-kecil:    6px;
  --bayang:     0 0 2rem 0 rgba(136, 152, 170, .15);
  --bayang-2:   0 15px 35px rgba(50, 50, 93, .2), 0 5px 15px rgba(0, 0, 0, .17);
  --sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --plane:#0f1424; --surface:#182135; --surface-2:#1f2940; --surface-3:#2b3550;
    --ink:#f4f5f7; --ink-2:#c3cbe0; --ink-3:#8f9bb6;
    --grid:#2b3550; --garis:#2b3550;
    --primer:#7d8cf0; --primer-tua:#5e72e4; --info:#3ad7f5; --sukses:#3ddc98;
    --bahaya:#ff5c7c; --peringatan:#ff7d54;
    --gelap:#101728; --gelap-2:#141033;
    --grad-kepala: linear-gradient(87deg, #0d7f96 0, #0b4a96 100%);
    --grad-gelap:  linear-gradient(87deg, #101728 0, #141033 100%);
    --grad-primer: linear-gradient(87deg, #5e72e4 0, #7b5ee4 100%);
    --kepala-ink:#ffffff;
    --tombol-bg:#5e72e4; --tombol-ink:#ffffff; --avatar-bg:#5e72e4;
    --aging-1:#f8cdbe; --aging-2:#ee9c86; --aging-3:#dd6e50; --aging-4:#c04e2c;
    --br-1:#3987e5; --br-2:#d95926; --br-3:#199e70; --br-4:#c98500; --br-5:#d55181;
  --koh-1:#199e70; --koh-2:#3987e5; --koh-3:#d95926; --koh-4:#6b7789;
    --slot-1:#cde2fb; --slot-2:#9ec5f4; --slot-3:#6da7ec; --slot-4:#3987e5; --slot-5:#256abf;
    --seri-1:#3987e5; --seri-2:#d95926; --batang:#3987e5; --baik:#2dce89;
    --bayang: 0 0 2rem 0 rgba(0, 0, 0, .45);
    --bayang-2: 0 15px 35px rgba(0, 0, 0, .6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:#0f1424; --surface:#182135; --surface-2:#1f2940; --surface-3:#2b3550;
  --ink:#f4f5f7; --ink-2:#c3cbe0; --ink-3:#8f9bb6;
  --grid:#2b3550; --garis:#2b3550;
  --primer:#7d8cf0; --primer-tua:#5e72e4; --info:#3ad7f5; --sukses:#3ddc98;
  --bahaya:#ff5c7c; --peringatan:#ff7d54;
  --gelap:#101728; --gelap-2:#141033;
  --grad-kepala: linear-gradient(87deg, #0d7f96 0, #0b4a96 100%);
  --grad-gelap:  linear-gradient(87deg, #101728 0, #141033 100%);
  --grad-primer: linear-gradient(87deg, #5e72e4 0, #7b5ee4 100%);
  --kepala-ink:#ffffff;
  --tombol-bg:#5e72e4; --tombol-ink:#ffffff; --avatar-bg:#5e72e4;
  --aging-1:#f8cdbe; --aging-2:#ee9c86; --aging-3:#dd6e50; --aging-4:#c04e2c;
  --br-1:#3987e5; --br-2:#d95926; --br-3:#199e70; --br-4:#c98500; --br-5:#d55181;
  --koh-1:#199e70; --koh-2:#3987e5; --koh-3:#d95926; --koh-4:#6b7789;
  --slot-1:#cde2fb; --slot-2:#9ec5f4; --slot-3:#6da7ec; --slot-4:#3987e5; --slot-5:#256abf;
  --seri-1:#3987e5; --seri-2:#d95926; --batang:#3987e5; --baik:#2dce89;
  --bayang: 0 0 2rem 0 rgba(0, 0, 0, .45);
  --bayang-2: 0 15px 35px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--plane); color: var(--ink-2);
  font-family: var(--sans); font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
svg { width: 20px; height: 20px; display: block; }

/* ======================================================= kerangka */
.cangkang { display: grid; grid-template-columns: 250px 1fr; min-height: 100%; }
.utama { display: flex; flex-direction: column; min-width: 0; }

/* ======================================================= sisi kiri (putih, gaya Argon) */
.sisi {
  background: var(--surface); color: var(--ink-2);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  border-right: 1px solid var(--garis);
  box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .08);
}
.merek {
  display: flex; align-items: center; gap: 11px;
  padding: 20px 22px 18px; border-bottom: 1px solid var(--garis);
}
.lencana {
  width: 38px; height: 38px; border-radius: 10px; background: var(--grad-primer);
  color: #fff; font-weight: 700; font-size: 13px;
  display: grid; place-items: center; letter-spacing: -.02em; flex: none;
  box-shadow: 0 4px 6px rgba(50, 50, 93, .11);
}
.merek-teks b { display: block; font-size: 15px; color: var(--ink); letter-spacing: -.01em; font-weight: 700; }
.merek-teks small { display: block; font-size: 11px; color: var(--ink-3); }

.nav { flex: 1; overflow-y: auto; padding: 8px 14px 16px; }
.nav-grup {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); padding: 16px 10px 6px; font-weight: 700;
}
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 11px;
  border-radius: var(--r-kecil); text-decoration: none; font-size: 13.5px;
  font-weight: 600; color: var(--ink-2); margin-bottom: 2px;
}
.nav-item:hover { color: var(--primer); }
.nav-item.aktif { color: var(--primer); background: rgba(94, 114, 228, .08); }
.nav-ikon { flex: none; color: var(--ink-3); }
.nav-ikon svg { width: 18px; height: 18px; }
.nav-item.aktif .nav-ikon { color: var(--primer); }
/* ikon berwarna bergantian, seperti sidebar Argon */
.nav-item:nth-of-type(5n+1) .nav-ikon { color: var(--primer); }
.nav-item:nth-of-type(5n+2) .nav-ikon { color: var(--info); }
.nav-item:nth-of-type(5n+3) .nav-ikon { color: var(--peringatan); }
.nav-item:nth-of-type(5n+4) .nav-ikon { color: var(--sukses); }
.nav-item:nth-of-type(5n+5) .nav-ikon { color: var(--bahaya); }
.nav-panah { margin-left: auto; font-size: 17px; line-height: 1; color: var(--primer); }
.sisi-kaki { padding: 14px 22px 18px; font-size: 11px; color: var(--ink-3); border-top: 1px solid var(--garis); }
.sisi-kaki .redup { opacity: .8; }

/* ======================================================= bilah atas */
.bilah {
  display: flex; align-items: center; gap: 14px; padding: 14px 26px;
  background: var(--grad-kepala); color: var(--kepala-ink);
  position: sticky; top: 0; z-index: 30;
}
.cari {
  flex: 1; max-width: 460px; display: flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px; padding: 8px 17px; color: rgba(255, 255, 255, .85);
}
.cari input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 13px; color: #fff; outline: none; }
.cari input::placeholder { color: rgba(255, 255, 255, .7); }
.cari:focus-within { background: rgba(255, 255, 255, .26); }
.bilah-kanan { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.peran-pilih { display: flex; white-space: nowrap; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; padding: 3px; }
.peran-pilih a {
  text-decoration: none; font-size: 12px; font-weight: 600; padding: 5px 12px;
  border-radius: 999px; color: rgba(255, 255, 255, .85);
}
.peran-pilih a.aktif { background: #fff; color: var(--primer); }

.ikon-tombol {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; text-decoration: none;
}
.ikon-tombol:hover { background: rgba(255, 255, 255, .3); }
.hanya-kecil { display: none; }

.profil { display: flex; align-items: center; gap: 10px; padding-left: 6px; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; background: #fff;
  color: var(--primer); display: grid; place-items: center;
  font-size: 12px; font-weight: 700; flex: none;
  box-shadow: 0 4px 6px rgba(50, 50, 93, .15);
}
.profil-teks b { display: block; font-size: 13px; line-height: 1.3; color: #fff; font-weight: 600; }
.profil-teks small { display: block; font-size: 11px; color: rgba(255, 255, 255, .78); max-width: 220px; }

/* ======================================================= bilah tab */
.tab-bilah {
  display: flex; gap: 4px; padding: 0 26px;
  background: var(--grad-kepala); overflow-x: auto;
}
.tab-bilah a {
  padding: 11px 15px 13px; font-size: 13px; font-weight: 600; text-decoration: none;
  color: rgba(255, 255, 255, .78); border-bottom: 3px solid transparent; white-space: nowrap;
}
.tab-bilah a:hover { color: #fff; }
.tab-bilah a.aktif { color: #fff; border-bottom-color: #fff; }

/* ======================================================= isi
   Pita gradien diperpanjang lalu konten ditarik naik menindihnya —
   ini ciri khas tata letak Argon. */
.isi { padding: 0 26px 40px; flex: 1; background: var(--plane); }
/* Pita gradien menempel pada blok judul supaya tingginya selalu pas dengan
   panjang teksnya — tidak ada lagi keterangan yang terpotong di tepi pita. */
.judul-halaman {
  background: var(--grad-kepala);
  margin: 0 -26px; padding: 22px 26px 78px;
}
/* Elemen sesudah judul ditarik naik menindih pita — ciri tata letak Argon.
   Jejak navigasi dikecualikan karena warnanya untuk latar terang. */
.judul-halaman + *:not(.jejak) { margin-top: -56px; position: relative; z-index: 1; }

.kaki { padding: 18px 26px 28px; font-size: 11.5px; color: var(--ink-3); text-align: center; }

.judul-halaman { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.judul-halaman h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.judul-halaman p { margin: 5px 0 0; font-size: 13px; color: rgba(255, 255, 255, .85); max-width: 820px; }
.judul-halaman p code { background: rgba(255, 255, 255, .18); padding: 1px 5px; border-radius: 4px; }
.judul-halaman strong { color: #fff; }
.judul-kanan { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.kisi { display: grid; gap: 22px; margin-bottom: 22px; }
.kisi.rata-atas { align-items: start; }
.k-5 { grid-template-columns: repeat(5, 1fr); }
.k-4 { grid-template-columns: repeat(4, 1fr); }
.k-3 { grid-template-columns: repeat(3, 1fr); }
.k-2 { grid-template-columns: repeat(2, 1fr); }
.k-21 { grid-template-columns: 2fr 1fr; }
.k-12 { grid-template-columns: 1fr 2fr; }
@media (max-width: 1500px) { .k-5 { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 1240px) { .k-4 { grid-template-columns: repeat(2,1fr); } .k-21,.k-12 { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .k-5 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 900px)  { .k-3, .k-2 { grid-template-columns: 1fr; } }
@media (max-width: 620px)  { .k-4, .k-5 { grid-template-columns: 1fr; } }

.kartu {
  background: var(--surface); border: 0;
  border-radius: var(--r); box-shadow: var(--bayang); padding: 20px 22px;
  min-width: 0;
}
.kartu > h2, .kartu > .do-kepala > h2 {
  margin: 0 0 3px; font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink); display: flex; align-items: center; gap: 9px;
}
.kartu > h2 svg, .kartu > .do-kepala > h2 svg { width: 17px; height: 17px; color: var(--primer); }
.kartu > .ket { margin: 0 0 16px; font-size: 12.5px; color: var(--ink-3); }
.kartu code, .kaki code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: .92em; }

/* ---------------------------------------------- kartu sorot / gradien gelap */
.sorot {
  background: var(--grad-gelap); color: #fff; border: 0;
  display: flex; flex-direction: column;
}
.sorot h2, .sorot .ket { color: #fff; }
.sorot .ket { opacity: .7; }
.sorot-baris { display: flex; gap: 30px; flex-wrap: wrap; margin-top: auto; padding-top: 16px; align-items: flex-end; }
.rata-atas .sorot-baris { margin-top: 0; }
.sorot-nilai { font-size: 30px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.sorot-label { font-size: 11px; opacity: .7; margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; }
.sorot-pita {
  display: inline-block; background: var(--grad-primer); color: #fff;
  font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 999px;
}

/* ---------------------------------------------- kartu KPI gaya Argon */
.kpi { display: flex; flex-direction: column; gap: 5px; position: relative; }
.kpi .judul {
  font-size: 11.5px; color: var(--ink-3); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; padding-right: 60px;
}
.kpi .nilai { font-size: 28px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; color: var(--ink); }
.kpi .nilai .sat { font-size: 14px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.kpi .kaki2 { font-size: 12px; color: var(--ink-3); }
.kpi .pojok {
  position: absolute; top: -2px; right: -2px; width: 46px; height: 46px;
  border-radius: 50%; background: var(--grad-primer); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 4px 6px rgba(50, 50, 93, .11);
}
.kpi .pojok svg { width: 19px; height: 19px; }
/* warna lencana ikon bergantian seperti Argon */
.kisi > .kpi:nth-child(4n+1) .pojok { background: linear-gradient(87deg, #f5365c 0, #f56036 100%); }
.kisi > .kpi:nth-child(4n+2) .pojok { background: linear-gradient(87deg, #fb6340 0, #fbb140 100%); }
.kisi > .kpi:nth-child(4n+3) .pojok { background: linear-gradient(87deg, #ffd600 0, #beff00 100%); color: #32325d; }
.kisi > .kpi:nth-child(4n+4) .pojok { background: linear-gradient(87deg, #11cdef 0, #1171ef 100%); }
.kpi.sorot-kiri { box-shadow: var(--bayang), inset 3px 0 0 0 var(--primer); }
.meter { height: 4px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
.meter > i { display: block; height: 100%; background: var(--primer); border-radius: 3px; }
.meter.m1 > i { background: var(--aging-1); } .meter.m2 > i { background: var(--aging-2); }
.meter.m3 > i { background: var(--aging-3); } .meter.m4 > i { background: var(--aging-4); }

/* ---------------------------------------------- aksi cepat */
.aksi-kisi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.aksi {
  display: block; text-decoration: none; padding: 14px 15px;
  border: 1px solid var(--garis); border-radius: var(--r-kecil); background: var(--surface);
}
.aksi:hover { border-color: var(--primer); box-shadow: 0 4px 10px rgba(50, 50, 93, .08); }
.aksi svg { width: 18px; height: 18px; color: var(--primer); margin-bottom: 8px; }
.aksi b { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.aksi small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* ---------------------------------------------- lencana / chip gaya Argon */
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px;
  border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .03em;
  border: 0; background: var(--surface-2); color: var(--ink-2);
}
.chip i { font-style: normal; font-size: 9px; line-height: 1; }
.chip.f-NORMAL { background: #fdeee9; color: #b4542f; }
.chip.f-ATENSI { background: #fce4da; color: #a2421f; }
.chip.f-KRITIS { background: #f8ddd4; color: #8f3418; }
.chip.f-AGING  { background: #f3d3ca; color: #7a1d0b; }
.chip.f-NORMAL i { color: var(--aging-1); }
.chip.f-ATENSI i { color: var(--aging-2); }
.chip.f-KRITIS i { color: var(--aging-3); }
.chip.f-AGING  i { color: var(--aging-4); }
.chip.n-baik   { background: #e6f9f1; color: #1a7f53; }
.chip.n-proses { background: #e8f0fc; color: #1c5cab; }
.chip.n-atensi { background: #fdeee9; color: #a2421f; }
.chip.n-kritis { background: #fde7ec; color: #b32340; }
.chip.n-netral { background: var(--surface-2); color: var(--ink-3); }
.chip.n-baik i { color: var(--sukses); } .chip.n-proses i { color: var(--primer); }
.chip.n-atensi i { color: var(--peringatan); } .chip.n-kritis i { color: var(--bahaya); }
.chip.n-netral i { color: var(--ink-3); }
:root[data-theme="dark"] .chip, :root:where(:not([data-theme="light"])) .chip { }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .chip.f-NORMAL,
  :root:where(:not([data-theme="light"])) .chip.f-ATENSI,
  :root:where(:not([data-theme="light"])) .chip.f-KRITIS,
  :root:where(:not([data-theme="light"])) .chip.f-AGING,
  :root:where(:not([data-theme="light"])) .chip.n-baik,
  :root:where(:not([data-theme="light"])) .chip.n-proses,
  :root:where(:not([data-theme="light"])) .chip.n-atensi,
  :root:where(:not([data-theme="light"])) .chip.n-kritis { background: var(--surface-3); color: var(--ink); }
}
:root[data-theme="dark"] .chip.f-NORMAL, :root[data-theme="dark"] .chip.f-ATENSI,
:root[data-theme="dark"] .chip.f-KRITIS, :root[data-theme="dark"] .chip.f-AGING,
:root[data-theme="dark"] .chip.n-baik,   :root[data-theme="dark"] .chip.n-proses,
:root[data-theme="dark"] .chip.n-atensi, :root[data-theme="dark"] .chip.n-kritis {
  background: var(--surface-3); color: var(--ink);
}

/* ---------------------------------------------- filter */
.filter {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  background: var(--surface); border: 0; border-radius: var(--r);
  padding: 16px 18px; margin-bottom: 22px; box-shadow: var(--bayang);
}
.filter label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.filter select, .filter input, .borang input, .borang select, .borang textarea {
  font: inherit; font-size: 13px; padding: 9px 12px; border-radius: var(--r-kecil);
  border: 1px solid var(--garis); background: var(--surface); color: var(--ink-2); min-width: 138px;
  box-shadow: 0 1px 3px rgba(50, 50, 93, .06);
}
.filter select:focus, .filter input:focus, .borang :focus {
  outline: 0; border-color: var(--primer); box-shadow: 0 0 0 3px rgba(94, 114, 228, .16);
}

.tombol {
  font: inherit; font-size: 12.5px; font-weight: 700; padding: 10px 19px; border-radius: var(--r-kecil);
  border: 1px solid transparent; background: var(--tombol-bg); color: var(--tombol-ink);
  cursor: pointer; text-decoration: none; display: inline-block;
  box-shadow: 0 4px 6px rgba(50, 50, 93, .11); transition: transform .12s ease, box-shadow .12s ease;
}
.tombol:hover { transform: translateY(-1px); box-shadow: 0 7px 14px rgba(50, 50, 93, .1); }
.tombol.utama2 { background: var(--grad-primer); }
.tombol.hantu { background: var(--surface); color: var(--ink-2); border-color: var(--garis); box-shadow: 0 1px 3px rgba(50,50,93,.08); }
.tombol.kecil { padding: 6px 13px; font-size: 11.5px; }

/* ---------------------------------------------- tabel gaya Argon */
.gulung { overflow-x: auto; margin: 0 -22px -20px; padding: 0 0 4px; }
.kartu > .gulung > table.data { margin-bottom: 0; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td { padding: 12px 13px; text-align: left; border-bottom: 1px solid var(--garis); vertical-align: middle; }
/* sel tepi menempel ke padding kartu, seperti tabel Argon */
table.data th:first-child, table.data td:first-child { padding-left: 22px; }
table.data th:last-child,  table.data td:last-child  { padding-right: 22px; }
table.data thead th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); font-weight: 700; white-space: nowrap;
  background: var(--surface-2); border-bottom: 1px solid var(--garis);
  position: sticky; top: 0; z-index: 2;
}
table.data td.n, table.data th.n { text-align: center; font-variant-numeric: tabular-nums; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody td { color: var(--ink-2); }
table.data tbody td strong { color: var(--ink); }
table.data tfoot td { font-weight: 700; color: var(--ink); background: var(--surface-2); border-bottom: 0; }
.bar-mini { height: 4px; border-radius: 3px; background: var(--primer); display: inline-block; vertical-align: middle; min-width: 2px; }
.kode-branch { font-size: 10px; font-weight: 700; color: #fff; background: var(--primer); letter-spacing: .04em; padding: 2px 6px; border-radius: 4px; }

/* ---------------------------------------------- angka yang bisa diklik */
.ak {
  font: inherit; font-variant-numeric: tabular-nums; font-weight: 600;
  background: none; border: 0; padding: 1px 4px; margin: -1px -4px; border-radius: 4px;
  color: var(--primer); cursor: pointer; text-decoration: none;
  border-bottom: 1px dashed rgba(94, 114, 228, .45);
}
.ak:hover { background: var(--primer); color: #fff; border-bottom-color: transparent; }
.ak:focus-visible { outline: 2px solid var(--primer); outline-offset: 1px; }
.ak-nol { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kpi .nilai .ak { color: var(--ink); font-size: inherit; font-weight: inherit; border-bottom: 0; }
.kpi .nilai .ak:hover { background: var(--primer); color: #fff; }
.sorot .ak { color: #fff; border-bottom-color: rgba(255, 255, 255, .4); }
.sorot .ak:hover { background: #fff; color: var(--gelap); }

/* ---------------------------------------------- heatmap */
table.panas td.sel { text-align: center; font-variant-numeric: tabular-nums; position: relative; }
table.panas td.sel .ak { display: block; width: 100%; text-align: center; border-bottom: 0; }
table.panas td.sel .ak-nol { display: block; width: 100%; text-align: center; }
table.panas thead th { vertical-align: bottom; line-height: 1.3; }
.s0 { background: transparent; }
.s1 { background: color-mix(in srgb, var(--aging-1) 26%, transparent); }
.s2 { background: color-mix(in srgb, var(--aging-2) 34%, transparent); }
.s3 { background: color-mix(in srgb, var(--aging-3) 42%, transparent); }
.s4 { background: color-mix(in srgb, var(--aging-4) 52%, transparent); }
.s4 .ak, .s4 .ak-nol { color: var(--ink); }
table.panas.biru .s1 { background: color-mix(in srgb, var(--slot-1) 32%, transparent); }
table.panas.biru .s2 { background: color-mix(in srgb, var(--slot-2) 34%, transparent); }
table.panas.biru .s3 { background: color-mix(in srgb, var(--slot-3) 34%, transparent); }
table.panas.biru .s4 { background: color-mix(in srgb, var(--slot-4) 38%, transparent); }

/* ---------------------------------------------- chart */
.kartu:has(.kanvas) { display: flex; flex-direction: column; }
.kanvas { position: relative; height: 280px; flex: 1 1 auto; min-height: 250px; }
.kanvas.tinggi { height: 350px; min-height: 310px; }
.kanvas.pendek { height: 190px; min-height: 170px; }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); margin-bottom: 12px; }
.legenda span { display: inline-flex; align-items: center; gap: 7px; }
.legenda b { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.kanvas .gagal-chart {
  position: absolute; inset: 0; display: grid; place-items: center;
  border: 1px dashed var(--grid); border-radius: var(--r-kecil); padding: 20px;
}
.kanvas .gagal-chart p { margin: 0; max-width: 320px; text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
/* chart di dalam kartu gelap */
.sorot .kanvas .gagal-chart { border-color: rgba(255,255,255,.25); }
.sorot .kanvas .gagal-chart p { color: rgba(255,255,255,.75); }

/* ---------------------------------------------- catatan */
.catatan {
  border-left: 3px solid var(--primer); background: var(--surface);
  padding: 14px 17px; border-radius: var(--r-kecil); font-size: 13px;
  color: var(--ink-2); margin-bottom: 22px; box-shadow: var(--bayang);
}
.catatan strong { color: var(--ink); }
.catatan.bahaya { border-left-color: var(--bahaya); }
.catatan.baik { border-left-color: var(--sukses); }

/* ---------------------------------------------- borang */
.borang { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.borang label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.borang label.lebar { grid-column: 1 / -1; }
.borang label > span { display: block; }
.borang textarea { min-height: 90px; resize: vertical; text-transform: none; }
.borang .wajib::after { content: ' *'; color: var(--bahaya); }
@media (max-width: 700px) { .borang { grid-template-columns: 1fr; } }

/* ---------------------------------------------- popup */
.tirai {
  position: fixed; inset: 0; background: rgba(23, 43, 77, .55); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 24px; z-index: 100;
}
.tirai[hidden] { display: none; }
.popup {
  background: var(--surface); border-radius: 10px; box-shadow: var(--bayang-2);
  width: min(1000px, 100%); max-height: min(84vh, 780px); display: flex; flex-direction: column;
}
.popup > header {
  display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px 16px;
  border-bottom: 1px solid var(--garis);
}
.popup > header h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.popup > header p { margin: 3px 0 0; font-size: 12px; color: var(--ink-3); }
.popup > header .ikon-tombol {
  margin-left: auto; background: var(--surface-2); border-color: var(--garis); color: var(--ink-2);
}
.popup > header .ikon-tombol:hover { background: var(--surface-3); }
.popup-isi { overflow: auto; padding: 0 0 8px; flex: 1; }
.popup-isi > .gulung { margin: 0; }
.popup-isi > .catatan, .popup-isi > .pasangan, .popup-isi > h3,
.popup-isi > ul, .popup-isi > p { margin-left: 22px; margin-right: 22px; }
.popup > footer {
  padding: 14px 22px; border-top: 1px solid var(--garis); font-size: 12px;
  color: var(--ink-3); display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.popup .memuat { padding: 48px; text-align: center; color: var(--ink-3); font-size: 13px; }

.pasangan { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 20px; margin: 16px 0; }
.pasangan div { min-width: 0; }
.pasangan dt { font-size: 10.5px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.pasangan dd { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); word-break: break-word; }

.linimasa { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--garis); }
.linimasa li { position: relative; padding: 0 0 16px 16px; font-size: 12.5px; }
.linimasa li::before {
  content: ''; position: absolute; left: -24px; top: 5px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--ink-3);
}
.linimasa li.baru::before { border-color: var(--primer); background: var(--primer); }
.linimasa strong { color: var(--ink); }
.linimasa .waktu { color: var(--ink-3); font-size: 11px; }
.linimasa .catat { color: var(--ink-2); margin-top: 3px; }

/* ---------------------------------------------- cuaca */
.cuaca-kini { display: flex; align-items: center; gap: 14px; margin: 12px 0 14px; }
.cuaca-ikon { font-size: 34px; line-height: 1; flex: none; }
.cuaca-suhu { font-size: 30px; font-weight: 700; letter-spacing: -.025em; line-height: 1.05; color: var(--ink); }
.cuaca-desc { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.cuaca-sub  { font-size: 11.5px; color: var(--ink-3); }
.jam-strip { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.jam-sel {
  flex: 1 1 0; min-width: 44px; text-align: center; border: 1px solid var(--garis);
  border-radius: var(--r-kecil); padding: 8px 2px; background: var(--surface-2);
}
.jam-sel.hujan { border-color: var(--primer); background: rgba(94, 114, 228, .1); }
.jam-sel b { display: block; font-size: 10px; color: var(--ink-3); font-weight: 700; }
.jam-sel .ik { font-size: 17px; line-height: 1.4; }
.jam-sel .su { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.cuaca-rinci { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); margin-top: 12px; }
.cuaca-rinci b { color: var(--ink); font-weight: 700; }

/* ---------------------------------------------- halaman masuk */
.masuk-latar {
  min-height: 100vh; display: grid; place-items: center; padding: 30px 20px;
  background: var(--grad-gelap); position: relative; overflow: hidden;
}
.masuk-latar::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 45%;
  background: var(--plane); clip-path: ellipse(75% 100% at 50% 100%);
}
.masuk-kotak { position: relative; z-index: 1; width: min(420px, 100%); }
.masuk-merek { text-align: center; color: #fff; margin-bottom: 22px; }
.masuk-merek .lencana { margin: 0 auto 12px; width: 52px; height: 52px; font-size: 16px; border-radius: 14px; }
.masuk-merek h1 { margin: 0; font-size: 21px; font-weight: 700; }
.masuk-merek p { margin: 5px 0 0; font-size: 13px; opacity: .78; }
.masuk-kartu { background: var(--surface); border-radius: 10px; box-shadow: var(--bayang-2); padding: 28px 26px; }
.masuk-kartu h2 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--ink); }
.masuk-kartu .ket { margin: 0 0 20px; font-size: 12.5px; color: var(--ink-3); }
.masuk-kartu label { display: block; margin-bottom: 15px; font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.masuk-kartu input {
  display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 14px;
  padding: 11px 14px; border-radius: var(--r-kecil); border: 1px solid var(--garis);
  background: var(--surface); color: var(--ink-2); text-transform: none;
  box-shadow: 0 1px 3px rgba(50, 50, 93, .06);
}
.masuk-kartu input:focus { outline: 0; border-color: var(--primer); box-shadow: 0 0 0 3px rgba(94, 114, 228, .16); }
.masuk-kartu .tombol { width: 100%; text-align: center; padding: 12px; font-size: 13.5px; margin-top: 4px; }
.masuk-galat {
  background: #fde7ec; color: #b32340; border-radius: var(--r-kecil);
  padding: 11px 14px; font-size: 12.5px; margin-bottom: 18px; font-weight: 600;
}
:root[data-theme="dark"] .masuk-galat { background: var(--surface-3); color: var(--bahaya); }
.masuk-kaki { text-align: center; margin-top: 20px; font-size: 12px; color: var(--ink-2); line-height: 1.7; }

/* ---------------------------------------------- responsif */
/* pemilih penyamaran peran adalah alat uji — sembunyikan di layar sempit */
@media (max-width: 1340px) { .peran-pilih { display: none; } }

@media (max-width: 1000px) {
  .cangkang { grid-template-columns: 1fr; }
  .sisi {
    position: fixed; inset: 0 auto 0 0; width: 262px; z-index: 60;
    transform: translateX(-100%); transition: transform .18s ease;
  }
  .sisi.buka { transform: none; box-shadow: var(--bayang-2); }
  .hanya-kecil { display: grid; }
  .isi { padding: 0 16px 30px; }
  .isi::before { margin: 0 -16px; }
  .bilah { padding: 11px 16px; }
  .tab-bilah { padding: 0 16px; }
  .profil-teks { display: none; }
  .peran-pilih a { padding: 5px 9px; font-size: 11.5px; }
  .gulung { margin: 0 -22px -20px; }
}
@media (max-width: 560px) {
  .sorot-baris { gap: 20px; }
  .aksi-kisi { grid-template-columns: 1fr; }
  .judul-halaman h1 { font-size: 19px; }
  .kartu { padding: 16px; }
  table.data th, table.data td { padding: 10px 11px; }
  table.data th:first-child, table.data td:first-child { padding-left: 16px; }
  table.data th:last-child,  table.data td:last-child  { padding-right: 16px; }
  .gulung { margin: 0 -16px -16px; }
}

/* ------------------------------------------------ panel lipat (service area) */
details.lipat {
  border: 1px solid var(--garis); border-radius: 8px;
  margin: 0 0 10px; background: var(--surface);
}
details.lipat[open] { box-shadow: var(--bayang); }
details.lipat > summary {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; cursor: pointer; list-style: none;
  border-radius: 8px; transition: background .15s;
}
details.lipat > summary::-webkit-details-marker { display: none; }
details.lipat > summary:hover { background: var(--surface-2); }
details.lipat > summary::before {
  content: '▸'; color: var(--ink-3); font-size: 13px; flex: none;
  transition: transform .15s; display: inline-block;
}
details.lipat[open] > summary::before { transform: rotate(90deg); }
.lipat-nama b { font-size: 13.5px; color: var(--ink); }
.lipat-sub { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.lipat-kanan { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lipat-ikon { font-size: 18px; line-height: 1; }
.lipat-desc { font-size: 12.5px; color: var(--ink-2); }
.lipat-suhu { font-size: 13.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.lipat-beban { font-size: 12px; color: var(--ink-3); }
details.lipat > .gulung { margin: 0 -1px -1px; }
details.lipat table.data { margin-bottom: 0; }
details.lipat table.data thead th { background: var(--surface-2); }
@media (max-width: 760px) {
  details.lipat > summary { gap: 8px; }
  .lipat-kanan { margin-left: 0; width: 100%; }
}

/* ------------------------------------------------ filter pilih banyak */
.pilih-banyak {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 11px; color: var(--ink-3); font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
}
.pb-bungkus { position: relative; }
.pb-tombol {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border: 1px solid var(--garis); border-radius: var(--r-kecil);
  background: var(--surface); color: var(--ink);
  font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0;
  cursor: pointer; list-style: none; user-select: none;
}
.pb-tombol::-webkit-details-marker { display: none; }
.pb-tombol::marker { content: ''; }
.pb-tombol:hover { border-color: var(--primer); }
.pb-tombol:focus-visible { outline: 2px solid var(--primer); outline-offset: 1px; }
.pb-bungkus[data-terisi] .pb-tombol { border-color: var(--primer); font-weight: 600; }
.pb-bungkus[open] .pb-tombol { border-color: var(--primer); }
.pb-ringkas { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-panah { flex: none; color: var(--ink-3); font-size: 11px; transition: transform .15s; }
.pb-bungkus[open] .pb-panah { transform: rotate(180deg); }
.pb-panel {
  /* Rata kanan sebagai bawaan: kontrol ini biasanya filter paling kanan,
     jadi panel melebar ke dalam kartu, bukan keluar tepi layar. */
  position: absolute; z-index: 60; top: calc(100% + 5px); right: 0; left: auto;
  min-width: max(100%, 224px); max-width: min(320px, 86vw);
  background: var(--surface); border: 1px solid var(--garis);
  border-radius: var(--r-kecil); box-shadow: var(--bayang); padding: 8px;
}
.pb-panel.pb-kiri { left: 0; right: auto; }
.pb-daftar { max-height: 236px; overflow-y: auto; }
.filter .pb-item, .pb-item {
  display: flex; flex-direction: row; align-items: center; gap: 9px;
  padding: 6px 7px; border-radius: 5px; margin: 0;
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  text-transform: none; letter-spacing: 0; cursor: pointer;
}
.pb-item:hover { background: var(--surface-2); }
.filter .pb-item input[type=checkbox], .pb-item input[type=checkbox] {
  width: 15px; height: 15px; min-width: 15px; flex: none;
  margin: 0; padding: 0; accent-color: var(--primer); cursor: pointer;
}
.pb-item span { flex: 1 1 auto; }
.pb-kosong { margin: 6px 7px; font-size: 12px; color: var(--ink-3); font-weight: 500; text-transform: none; }
.pb-alat { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--garis); }
.pb-alat button {
  flex: 1 1 0; padding: 6px 8px; font: inherit; font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--garis); border-radius: 5px; background: var(--surface-2);
  color: var(--ink-2); cursor: pointer; text-transform: none; letter-spacing: 0;
}
.pb-alat button:hover { border-color: var(--primer); color: var(--primer); }
.pb-alat .pb-terap { background: var(--primer); border-color: var(--primer); color: #fff; }
.pb-alat .pb-terap:hover { filter: brightness(1.08); color: #fff; }

/* PS/RE di atas ambang sehat — ditulis cukup spesifik supaya tidak kalah
   oleh warna teks kartu KPI maupun sel tabel. */
.psre-baik,
.kartu .psre-baik,
.kartu .nilai .psre-baik,
table.data td .psre-baik,
table.data td strong .psre-baik { color: var(--baik); font-weight: 700; }

/* di atas kartu sorot latar gelap, hijau standar kurang terbaca */
.sorot .psre-baik, .sorot-pita .psre-baik { color: #8ef0c4; }

/* ------------------------------------------------ navigasi halaman popup */
#popup-kaki { flex-wrap: wrap; gap: 10px 14px; }
.halaman { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.hal-tombol {
  min-width: 30px; height: 30px; padding: 0 8px;
  border: 1px solid var(--garis); border-radius: 6px; background: var(--surface);
  color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.hal-tombol:hover:not(:disabled) { border-color: var(--primer); color: var(--primer); }
.hal-tombol:disabled { opacity: .4; cursor: default; }
.hal-tombol.aktif {
  background: var(--primer); border-color: var(--primer); color: #fff; cursor: default;
}
.hal-elipsis { padding: 0 2px; color: var(--ink-3); font-size: 12.5px; }

/* ------------------------------------------------ Dashboard Order */
.do-tabel { font-size: 12.5px; }
.do-tabel th, .do-tabel td { white-space: nowrap; }
.do-tabel thead tr.do-grup th { text-align: center; border-bottom: 1px solid var(--garis); }
.do-tabel thead tr.do-grup th[rowspan] { vertical-align: bottom; }
.do-tabel thead tr.do-grup th:first-child { text-align: left; }
/* pita kelompok kolom: lewat = hangat, hari ini = kuning, mendatang = dingin */
.do-tabel th.do-lewat,     .do-tabel td.do-lewat     { background: rgba(245, 54, 92, .055); }
.do-tabel th.do-hariini,   .do-tabel td.do-hariini,
.do-tabel th.do-hi                                   { background: rgba(251, 176, 64, .10); }
.do-tabel th.do-mendatang, .do-tabel td.do-mendatang { background: rgba(17, 113, 239, .05); }
.do-tabel td.do-redup .ak { color: var(--ink-3); }
.do-tabel tr.do-branch td { background-color: var(--surface-2); font-weight: 600; border-top: 1px solid var(--garis); }
.do-tabel tr.do-branch td.do-lewat     { background-image: linear-gradient(rgba(245,54,92,.055), rgba(245,54,92,.055)); }
.do-tabel tr.do-branch td.do-hariini   { background-image: linear-gradient(rgba(251,176,64,.10), rgba(251,176,64,.10)); }
.do-tabel tr.do-branch td.do-mendatang { background-image: linear-gradient(rgba(17,113,239,.05), rgba(17,113,239,.05)); }
.do-anak { padding-left: 22px; position: relative; color: var(--ink-2); }
.do-anak::before { content: '└'; position: absolute; left: 6px; color: var(--ink-3); }
.do-tabel tfoot tr.do-total td { font-weight: 700; border-top: 2px solid var(--garis); }
table.data.do-tabel th, table.data.do-tabel td { padding: 10px 9px; }
table.data.do-tabel th:first-child, table.data.do-tabel td:first-child { padding-left: 22px; }
table.data.do-tabel th:last-child,  table.data.do-tabel td:last-child  { padding-right: 22px; }
table.data.do-tabel thead th { font-size: 10.5px; letter-spacing: .02em; }
/* tabel status punya 13 kolom — dirapatkan supaya muat di layar 1440 px */
table.data.do-status { font-size: 12px; }
table.data.do-status th, table.data.do-status td { padding-left: 6px; padding-right: 6px; }
table.data.do-status th:first-child, table.data.do-status td:first-child { padding-left: 22px; }
table.data.do-status th:last-child,  table.data.do-status td:last-child  { padding-right: 22px; }
table.data.do-status thead th { font-size: 10px; letter-spacing: 0; }

/* ------------------------------------------------ Dashboard Order: buka-tutup branch */
.do-kepala { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.kartu > .do-kepala > h2 { margin-right: auto; margin-bottom: 0; }
.do-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.do-toggle:focus-visible { outline: 2px solid var(--primer); outline-offset: 3px; border-radius: 4px; }
.do-panah {
  display: inline-block; width: 12px; color: var(--ink-3); font-size: 11px;
  transition: transform .15s;
}
.do-kelompok.buka .do-panah { transform: rotate(90deg); color: var(--primer); }
.do-jml { font-size: 10.5px; font-weight: 600; color: var(--ink-3); margin-left: 2px; }
/* Hanya disembunyikan kalau JavaScript aktif — tanpa JS semua baris tetap terlihat. */
.js .do-lipat .do-kelompok:not(.buka) tr.do-area,
.js .do-lipat .do-kelompok:not(.buka) tr.do-sto { display: none; }
.js .do-lipat tr.do-sto:not(.buka) { display: none; }
.do-lipat tr.do-branch td:first-child { cursor: pointer; }
table.data.do-tabel td.do-sorot, table.data.do-tabel th.do-sorot { background: rgba(94,114,228,.06); }

/* Bilah filter harus berada di atas kartu-kartu di bawahnya, supaya panel
   pilih-banyak (Tipe CRM, Produk) tidak tertimpa isi tabel sehingga tampak
   transparan. */
form.filter, .judul-halaman + form.filter { position: relative; z-index: 50; }
.pb-panel { background: var(--surface); background-clip: padding-box; box-shadow: 0 8px 26px rgba(50, 50, 93, .18), 0 2px 6px rgba(0, 0, 0, .08); }

/* kolom RE di Dashboard Order */
table.data.do-tabel th.do-re, table.data.do-tabel td.do-re { border-right: 1px solid var(--garis); }
/* 16 kolom — dirapatkan sedikit supaya muat di layar 1440 px */
table.data.do-lipat:not(.do-status) th, table.data.do-lipat:not(.do-status) td { padding-left: 7px; padding-right: 7px; }
table.data.do-lipat:not(.do-status) th:first-child, table.data.do-lipat:not(.do-status) td:first-child { padding-left: 22px; }
table.data.do-lipat:not(.do-status) th:last-child,  table.data.do-lipat:not(.do-status) td:last-child  { padding-right: 22px; }

/* Semua angka di tabel rata tengah (permintaan 23/09/2026). */
table.data td.n, table.data th.n,
table.data tfoot td.n, table.data thead th.n { text-align: center; }

/* ------------------------------------------------ logo DAPROS
   Logo berwarna biru muda di atas latar transparan. Bayangan dibuat dengan
   drop-shadow (mengikuti bentuk huruf, bukan kotak) supaya tetap timbul di
   sidebar putih; di halaman masuk logo diletakkan di ubin putih agar tidak
   tenggelam di latar gradasi biru. */
.logo {
  width: 44px; height: 44px; flex: none; object-fit: contain; display: block;
  filter: drop-shadow(0 3px 4px rgba(17, 113, 239, .28)) drop-shadow(0 1px 1px rgba(50, 50, 93, .14));
  transition: transform .2s ease, filter .2s ease;
}
.merek:hover .logo { transform: translateY(-1px) rotate(-3deg);
  filter: drop-shadow(0 6px 8px rgba(17, 113, 239, .34)) drop-shadow(0 1px 2px rgba(50, 50, 93, .16)); }
.masuk-merek .logo {
  width: 84px; height: 84px; margin: 0 auto 14px; padding: 12px; box-sizing: border-box;
  background: #fff; border-radius: 22px;
  box-shadow: 0 14px 30px rgba(50, 50, 93, .22), 0 4px 10px rgba(0, 0, 0, .10);
  filter: drop-shadow(0 3px 3px rgba(17, 113, 239, .25));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55)); }
}
:root[data-theme="dark"] .logo { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55)); }
:root[data-theme="dark"] .masuk-merek .logo { background: #fff; }

/* tingkat ketiga: STO di bawah service area */
.do-cucu { padding-left: 46px; position: relative; color: var(--ink-3); font-size: 12px; }
.do-cucu::before { content: '└'; position: absolute; left: 30px; color: var(--garis); }
.do-toggle-sa { font-weight: 600; }
.do-toggle-sa .do-panah { font-size: 10px; }
.do-lipat tr.do-sto td { background: var(--plane); }