/* TEMA HSC-OPS – Malex Buku Kas. data-tema: terang|gelap; data-warna: navy|teal */
:root,:root[data-tema="terang"]{
--luar:#eff4f6;--bg:#eff4f6;--kartu:#ffffff;--kartu2:#e9eff1;
--tinta:#17202a;--muted:#5d6b73;--garis:rgba(15,42,46,.14);
--merah:#b52e2e;--merah2:#fbe9e9;--kuning:#8a5a00;--kuning2:#fff3d6;
--hijau-ok:#006300;--hijau2:#e3f4e3;
--emas:#5d7377;--emas-t:#44525a;
--sb-bg:#f7fafb;--sb-fg:#2b3a3f;--sb-dim:#5d7377;
--sh-sm:0 1px 2px rgba(15,42,46,.06);--sh-md:0 8px 20px -8px rgba(15,42,46,.14);
--sh-lg:0 10px 26px -8px rgba(15,42,46,.16);--sh-bingkai:none;
--r-sm:9px;--r-md:12px;--r-lg:14px;--r-bingkai:14px;
--font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--font-mono:ui-monospace,"SF Mono",Consolas,monospace;
}
/* warna aksen: navy (default) & teal, nilai persis hsc-ops */
:root,:root[data-warna="navy"]{
--aksen:#2b5fa8;--aksen-t:#1e4478;--aksen2:rgba(43,95,168,.10);--aksen-rgb:43,95,168;
--sb-aktif-bg:#d8e4f5;--sb-aktif-fg:#163a68;
--tb-grad:linear-gradient(105deg,#2b5fa8 0%,#1e4478 58%,#142c50 100%);
--tb-shadow:rgba(43,95,168,.48);
--sh-aksen:0 8px 22px -8px rgba(43,95,168,.5);
}
:root[data-warna="teal"]{
--aksen:#0f766e;--aksen-t:#0b5d57;--aksen2:rgba(15,118,110,.10);--aksen-rgb:15,118,110;
--sb-aktif-bg:#d7eae7;--sb-aktif-fg:#0b4f49;
--tb-grad:linear-gradient(105deg,#14958a 0%,#0f766e 58%,#0a4f4a 100%);
--tb-shadow:rgba(15,118,110,.42);
--sh-aksen:0 8px 22px -8px rgba(15,118,110,.5);
}
/* tema gelap: turunan navy/teal di atas latar gelap kebiruan */
:root[data-tema="gelap"]{
--luar:#0f1720;--bg:#0f1720;--kartu:#182230;--kartu2:#1f2b3a;
--tinta:#e6edf3;--muted:#9fb0bd;--garis:rgba(255,255,255,.12);
--merah:#f28b82;--merah2:#3a2223;--kuning:#f2c14e;--kuning2:#3a3118;
--hijau-ok:#7ee2a8;--hijau2:#1b3a2a;
--emas:#9fb0bd;--emas-t:#c5d1da;
--sb-bg:#131c27;--sb-fg:#d7e0e8;--sb-dim:#8ea0ae;
--sh-sm:0 1px 2px rgba(0,0,0,.4);--sh-md:0 8px 20px -8px rgba(0,0,0,.6);--sh-lg:0 10px 26px -8px rgba(0,0,0,.7);
}
:root[data-tema="gelap"][data-warna="navy"],:root[data-tema="gelap"]{
--aksen:#7fb0f0;--aksen-t:#4c86d8;--aksen2:rgba(127,176,240,.14);--sb-aktif-bg:#22395c;--sb-aktif-fg:#cfe0fa;
}
:root[data-tema="gelap"][data-warna="teal"]{
--aksen:#5ad3c6;--aksen-t:#2fb3a5;--aksen2:rgba(90,211,198,.14);--sb-aktif-bg:#1c4541;--sb-aktif-fg:#c9f1ec;
}
/* KERANGKA: sidebar kiri (lipat) + banner + konten; HP: laci + nav bawah */
body{background:var(--luar);color:var(--tinta);font:14px/1.5 var(--font);display:block;padding:0;height:auto;min-height:100vh}
#app{max-width:none;width:100%;height:100vh;height:100dvh;margin:0;border:0;border-radius:0;box-shadow:none;
  background:var(--bg);display:flex;flex-direction:row;overflow:hidden}
#sb{width:232px;flex:none;margin:12px 0 12px 12px;background:var(--sb-bg);color:var(--sb-fg);border:1px solid var(--garis);
  border-radius:14px;box-shadow:var(--sh-md);display:flex;flex-direction:column;overflow:hidden;transition:width .18s}
#app.lipat #sb{width:64px}
#sb .merek{display:flex;align-items:center;gap:10px;padding:16px 14px;border-bottom:1px solid var(--garis)}
#sb .logo{width:34px;height:34px;border-radius:9px;background:var(--tb-grad);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
#sb .merek b{font-size:15px;white-space:nowrap}
#sb .merek small{display:block;font-size:11px;color:var(--sb-dim);white-space:nowrap}
#sb .grup{padding:14px 12px 4px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sb-dim);font-weight:700;white-space:nowrap}
#sb nav{display:block;background:none;border:0;padding:0 10px;flex:1;overflow-y:auto}
#sb nav>div{display:block;padding:0;max-width:none}
#sb nav button{display:flex;flex-direction:row;align-items:center;gap:10px;width:100%;padding:10px 10px;margin:2px 0;border:0;border-radius:9px;
  background:none;color:var(--sb-fg);font-size:13.5px;font-weight:600;text-align:left;cursor:pointer;white-space:nowrap}
#sb nav button svg{width:18px;height:18px;flex:none;transform:none;stroke:var(--aksen);stroke-width:1.9}
#sb nav button:hover{background:var(--aksen2)}
#sb nav button.aktif{background:var(--sb-aktif-bg);color:var(--sb-aktif-fg)}
#sb nav button.aktif svg{transform:none;stroke:var(--sb-aktif-fg)}
#sb .akun{padding:12px 14px;border-top:1px solid var(--garis);display:flex;align-items:center;gap:10px;white-space:nowrap}
#sb .akun .ava{width:30px;height:30px;border-radius:50%;background:var(--aksen2);color:var(--aksen);display:grid;place-items:center;font-weight:800;flex:none}
#sb .akun small{display:block;font-size:11px;color:var(--sb-dim)}
#app.lipat #sb .merek b,#app.lipat #sb .merek small,#app.lipat #sb .grup,#app.lipat #sb nav button span,#app.lipat #sb .akun div{display:none}
#app.lipat #sb nav button{justify-content:center;padding:10px 0}
#app.lipat #sb .akun{justify-content:center}
#konten{flex:1;min-width:0;display:flex;flex-direction:column;padding:12px 12px 0 12px;overflow:hidden}
/* BANNER (header lama) + main + komponen */
header#kepala{flex:none;background:var(--tb-grad);color:#fff;border:0;border-radius:12px;padding:12px 16px;
  box-shadow:0 10px 24px -10px var(--tb-shadow);display:none;align-items:center;gap:12px;margin-bottom:12px}
header#kepala .judul{color:#fff;font-size:16px;font-weight:700;letter-spacing:0}
header#kepala .sub{color:rgba(255,255,255,.82);font-size:12px}
header#kepala .kanan{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;font-weight:600}
header#kepala .ham{width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.14);
  color:#fff;font-size:16px;display:grid;place-items:center;flex:none;cursor:pointer}
header#kepala .tengah{flex:1;min-width:0}
header#kepala .pengguna{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);white-space:nowrap;min-width:0}
header#kepala .pengguna .ava{width:28px;height:28px;border-radius:50%;background:#fff;color:var(--aksen);display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
header#kepala .pengguna b{display:block;font-size:13px;line-height:1.1;color:#fff}
header#kepala .pengguna small{display:block;font-size:11px;color:rgba(255,255,255,.82)}
header#kepala .keluar{flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:9px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
header#kepala .keluar:hover{background:rgba(255,255,255,.26)}
@media (max-width:599px){header#kepala .pengguna div{display:none}header#kepala .pengguna{padding:3px}header#kepala .keluar span{display:none}header#kepala .keluar{width:34px;padding:0;justify-content:center}}
main{flex:1;overflow-y:auto;padding:0 2px 24px}
#navb{display:none}
.kartu{border-radius:var(--r-lg);box-shadow:var(--sh-sm);border:1px solid var(--garis)}
h1{font-size:20px;font-weight:700;letter-spacing:0}
h2{font-size:11px;letter-spacing:.12em;font-weight:700}
.tombol{border-radius:var(--r-md);box-shadow:var(--sh-sm)}
.tombol.utama{background:var(--aksen);color:#fff;box-shadow:var(--sh-aksen)}
.tombol.utama:hover{background:var(--aksen-t)}
.pil.aktif{background:var(--aksen);color:#fff;border-color:var(--aksen)}
.tampil.aktif{border-color:var(--aksen);box-shadow:0 0 0 3px rgba(var(--aksen-rgb),.18)}
.hijau{color:var(--hijau-ok)}
.spanduk.hijau{background:var(--hijau2);color:var(--hijau-ok)}
.langkah{color:var(--aksen)}
#toast{background:#17202a;color:#fff;border-radius:12px;box-shadow:var(--sh-lg)}
#toast button{background:var(--aksen);color:#fff}
.angka,.tampil,td.angka,th.angka{font-family:var(--font-mono)}
table th{background:var(--kartu2);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700}
.badge.ok{background:var(--hijau2);color:var(--hijau-ok)}.badge.warn{background:var(--kuning2);color:var(--kuning)}.badge.bad{background:var(--merah2);color:var(--merah)}
input[type=text],input[type=password],input[type=date],textarea,select{border-radius:10px;border:1px solid var(--garis);background:var(--kartu);color:var(--tinta)}
input:focus,textarea:focus,select:focus{border-color:var(--aksen)!important;box-shadow:0 0 0 3px rgba(var(--aksen-rgb),.18)!important;outline:none}
/* HP < 900px: sidebar jadi laci geser + nav bawah; desktop: konten maks 1100px */
#sb-tirai{display:none}
@media (min-width:900px){
  main{padding:0 2px 24px}
  main{padding-right:16px;max-width:none!important;margin-left:0!important;margin-right:0!important;width:100%}
  main>*:not(.auth-bungkus){max-width:1100px;margin-left:0!important;margin-right:auto!important}
}
@media (max-width:899px){
  #sb{position:fixed;left:0;top:0;bottom:0;margin:0;border-radius:0 14px 14px 0;width:260px;z-index:80;transform:translateX(-105%);transition:transform .2s}
  #app.laci #sb{transform:none}
  #app.lipat #sb{width:260px}
  #app.lipat #sb .merek b,#app.lipat #sb .merek small,#app.lipat #sb .grup,#app.lipat #sb nav button span,#app.lipat #sb .akun div{display:initial}
  #app.lipat #sb nav button{justify-content:flex-start;padding:10px}
  #sb-tirai{position:fixed;inset:0;background:rgba(15,32,46,.45);z-index:70}
  #app.laci #sb-tirai{display:block}
  #konten{padding:10px 10px 0}
  header#kepala{padding:10px 12px;margin-bottom:10px}
  #navb{display:block;flex:none;background:var(--kartu);border-top:1px solid var(--garis);padding-bottom:max(4px,env(safe-area-inset-bottom,0))}
  #navb>div{display:flex;padding:6px 6px 2px}
  #navb button{flex:1;border:0;background:none;padding:6px 2px 6px;font-size:11px;font-weight:700;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px;border-radius:9px}
  #navb button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  #navb button.aktif{color:var(--aksen)}
  #toast{bottom:78px}
  .tampil{font-size:28px}
}

/* ===== LAYAR MASUK (gaya hsc-ops): satu kartu, tengah halaman) ===== */
#app.auth{background:var(--luar)}
#app.auth #sb,#app.auth #navb,#app.auth header#kepala,#app.auth #sb-tirai{display:none!important}
#app.auth #konten{padding:0}
#app.auth main{display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto;
  max-width:none!important;margin:0!important;width:100%}
.auth-bungkus{width:100%;max-width:400px;margin:auto}
.auth-kartu{background:var(--kartu);border:1px solid var(--garis);border-radius:16px;padding:30px 28px;
  box-shadow:0 12px 40px rgba(15,42,46,.12)}
:root[data-tema="gelap"] .auth-kartu{box-shadow:0 12px 40px rgba(0,0,0,.45)}
.auth-kartu>.kartu{background:none;border:0;box-shadow:none;padding:0;margin:0}
.auth-kartu .logo{width:44px;height:44px;border-radius:11px;background:var(--aksen);color:#fff;
  display:grid;place-items:center;margin:0 0 14px}
.auth-kartu .logo svg{width:24px;height:24px}
.auth-kartu h1{font-size:19px;margin:0 0 4px;color:var(--tinta)}
.auth-kartu h2{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin:20px 0 8px}
.auth-kartu>.tombol,.auth-kartu>.tombol.polos{width:100%;margin-top:10px}
.auth-kaki{text-align:center;font-size:11.5px;color:var(--muted);margin:16px 0 0}
@media (max-width:899px){#app.auth main{padding:18px 14px}}

#app.auth main>.auth-bungkus{margin-left:auto!important;margin-right:auto!important}
.auth-kartu .grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.auth-kartu .grid .tombol{width:100%;margin:0;white-space:normal;text-align:center}
.auth-kartu .tombol.kecil{width:100%}
@media (max-width:479px){.auth-kartu .grid{grid-template-columns:1fr}}

/* Isi kartu masuk rata tengah */
.auth-kartu{text-align:center}
.auth-kartu .logo{margin:0 auto 14px}
.auth-kartu h1,.auth-kartu h2,.auth-kartu p,.auth-kartu .label,.auth-kartu .kecil{text-align:center}
.auth-kartu .tombol{justify-content:center;text-align:center}
.auth-kartu .dots{justify-content:center}
.auth-kartu input{text-align:center}
.auth-kartu .spanduk{text-align:center}

.auth-kartu h2,.auth-kartu .label{text-align:center!important}
.auth-kartu .grid{justify-content:center}
.auth-kartu .grid,.auth-kartu .grid3{grid-auto-flow:row}

.auth-kartu h2{display:flex;justify-content:center}
.auth-kartu .grid{grid-template-columns:repeat(auto-fit,minmax(150px,220px));justify-content:center}

/* ===== KPI CARD (di bawah banner) ===== */
.kpi-baris{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.kpi{background:var(--kartu);border:1px solid var(--garis);border-radius:var(--r-md);box-shadow:var(--sh-sm);
  padding:14px 16px;display:flex;align-items:center;gap:12px;position:relative;overflow:hidden;text-align:left}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.kpi.kas::before{background:var(--aksen)}
.kpi.bri::before{background:#0ca30c}
.kpi.paspay::before{background:var(--kuning)}
.kpi-ikon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:none}
.kpi-ikon svg{width:20px;height:20px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kpi.kas .kpi-ikon{background:var(--aksen2);color:var(--aksen)}
.kpi.kas .kpi-ikon svg{stroke:var(--aksen)}
.kpi.bri .kpi-ikon{background:rgba(12,163,12,.10);color:#0ca30c}
.kpi.bri .kpi-ikon svg{stroke:#0ca30c}
.kpi.paspay .kpi-ikon{background:rgba(250,178,25,.14);color:#b07d00}
.kpi.paspay .kpi-ikon svg{stroke:#b07d00}
.kpi-isi{min-width:0;flex:1}
.kpi-label{display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.kpi-nilai{display:block;font-family:var(--font-mono);font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--tinta);margin:2px 0 3px;overflow:hidden;text-overflow:ellipsis}
.kpi-d{font-size:11px;font-weight:700}
.kpi-d.naik{color:#0ca30c}
.kpi-d.turun{color:var(--merah,#d03b3b)}
.kpi-d.nol{color:var(--muted);font-weight:600}
@media (max-width:899px){.kpi-baris{grid-template-columns:1fr;gap:10px}.kpi{padding:12px 14px}.kpi-nilai{font-size:17px}}