:root{
  --hijau:#2f6b3a; --hijau-tua:#1e4a27; --hijau-muda:#e8f3ea;
  --emas:#d99b1e; --emas-muda:#fdf4e3; --duri:#7a5c1e;
  --bg:#f6f7f5; --panel:#fff; --garis:#e3e6e1; --teks:#1d221e; --redup:#6b7568;
  --merah:#c0392b; --merah-muda:#fdeceb; --biru:#2c6fa8;
  --r:10px; --bayang:0 1px 3px rgba(20,35,20,.08), 0 8px 24px rgba(20,35,20,.05);
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--teks);font-size:14px;line-height:1.5}
button,input,select,textarea{font-family:inherit;font-size:14px}
a{color:var(--hijau);text-decoration:none}
h1,h2,h3,h4{margin:0 0 .5rem;line-height:1.25}
h1{font-size:1.5rem} h2{font-size:1.15rem} h3{font-size:1rem}
.hide{display:none!important}

/* ---------- LOGIN ---------- */
#login{position:fixed;inset:0;display:grid;place-items:center;
  background:linear-gradient(140deg,#1e4a27,#2f6b3a 45%,#d99b1e);padding:1rem;z-index:100}
.login-box{background:#fff;border-radius:16px;padding:2rem;width:min(400px,100%);box-shadow:0 20px 60px rgba(0,0,0,.25)}
.login-box img.logo{display:block;width:min(250px,80%);height:auto;margin:.2rem auto .6rem}
.login-box p.sub{text-align:center;color:var(--redup);margin:0 0 1.5rem;font-size:.85rem}

/* ---------- LAYOUT ---------- */
#app{display:grid;grid-template-columns:222px 1fr;min-height:100vh}
aside{background:var(--hijau-tua);color:#dbe7dc;padding:1rem .6rem;position:sticky;top:0;height:100vh;overflow-y:auto}
aside .merek{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem 1rem;font-weight:700;color:#fff;font-size:1.05rem}
aside .merek img.ic{width:30px;height:30px;object-fit:contain;flex:none}
aside .merek #btnMenu{display:none}
nav button{display:flex;align-items:center;gap:.6rem;width:100%;background:none;border:0;color:#c3d6c6;
  padding:.55rem .7rem;border-radius:8px;cursor:pointer;text-align:left;font-size:.9rem}
nav button:hover{background:rgba(255,255,255,.09);color:#fff}
nav button.aktif{background:var(--emas);color:#2a1e00;font-weight:600}
nav .grup{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:#7fa085;padding:1rem .7rem .3rem}
main{padding:1.2rem 1.4rem 3rem;max-width:1500px;width:100%}
header.top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.1rem;flex-wrap:wrap}
header.top .who{font-size:.8rem;color:var(--redup);text-align:right}

/* ---------- KOMPONEN ---------- */
.panel{background:var(--panel);border:1px solid var(--garis);border-radius:var(--r);padding:1rem;box-shadow:var(--bayang);margin-bottom:1rem}
.panel > h3{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
.grid{display:grid;gap:.9rem}
.grid > *{min-width:0}          /* anak grid boleh menyusut, jangan melar ikut isi tabel */
.panel{min-width:0}
.tabel-bungkus{max-width:100%}
.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.baris{display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-end}
.tumbuh{flex:1;min-width:130px}

label{display:block;font-size:.75rem;font-weight:600;color:var(--redup);margin-bottom:.2rem;text-transform:uppercase;letter-spacing:.03em}
input,select,textarea{width:100%;padding:.5rem .6rem;border:1px solid var(--garis);border-radius:8px;background:#fff;color:var(--teks)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--hijau);outline-offset:-1px;border-color:var(--hijau)}
input[readonly]{background:#f4f5f3;color:var(--redup)}
textarea{min-height:60px;resize:vertical}
.field{margin-bottom:.7rem}

.btn{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .85rem;border:1px solid var(--garis);
  background:#fff;border-radius:8px;cursor:pointer;font-weight:600;color:var(--teks);white-space:nowrap}
.btn:hover{background:#f2f4f1}
.btn.utama{background:var(--hijau);border-color:var(--hijau);color:#fff}
.btn.utama:hover{background:var(--hijau-tua)}
.btn.emas{background:var(--emas);border-color:var(--emas);color:#2a1e00}
.btn.bahaya{background:var(--merah);border-color:var(--merah);color:#fff}
.btn.kecil{padding:.28rem .55rem;font-size:.78rem;font-weight:500}
.btn:disabled{opacity:.5;cursor:not-allowed}

table{width:100%;border-collapse:collapse;font-size:.86rem}
.tabel-bungkus{overflow-x:auto;-webkit-overflow-scrolling:touch}
th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--redup);
  padding:.5rem .55rem;border-bottom:2px solid var(--garis);white-space:nowrap;background:#fafbf9;position:sticky;top:0}
td{padding:.5rem .55rem;border-bottom:1px solid var(--garis);vertical-align:middle}
tbody tr:hover{background:#fafcf9}
tfoot td{font-weight:700;border-top:2px solid var(--garis);background:#fafbf9}
.ka{text-align:right} .te{text-align:center}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

.kpi{background:var(--panel);border:1px solid var(--garis);border-radius:var(--r);padding:.85rem;box-shadow:var(--bayang)}
.kpi .judul{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--redup);font-weight:700}
.kpi .nilai{font-size:1.4rem;font-weight:700;margin:.25rem 0 .1rem;font-variant-numeric:tabular-nums}
.kpi .ket{font-size:.75rem;color:var(--redup)}
.kpi.hijau{border-left:4px solid var(--hijau)} .kpi.emas{border-left:4px solid var(--emas)}
.kpi.merah{border-left:4px solid var(--merah)} .kpi.biru{border-left:4px solid var(--biru)}

.tag{display:inline-block;padding:.12rem .45rem;border-radius:999px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.tag.lunas{background:var(--hijau-muda);color:var(--hijau-tua)}
.tag.sebagian{background:var(--emas-muda);color:var(--duri)}
.tag.belum,.tag.hutang{background:var(--merah-muda);color:var(--merah)}
.tag.batal{background:#eee;color:#777;text-decoration:line-through}
.tag.distributor{background:#e6effa;color:var(--biru)}
.tag.retail{background:var(--hijau-muda);color:var(--hijau-tua)}
.plus{color:var(--hijau);font-weight:600} .minus{color:var(--merah);font-weight:600}

dialog{border:0;border-radius:14px;padding:0;width:min(880px,95vw);box-shadow:0 24px 70px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(20,30,20,.55)}
dialog .kepala{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.1rem;border-bottom:1px solid var(--garis);position:sticky;top:0;background:#fff;z-index:2}
dialog .isi{padding:1.1rem;max-height:72vh;overflow-y:auto}
dialog .kaki{display:flex;justify-content:flex-end;gap:.5rem;padding:.85rem 1.1rem;border-top:1px solid var(--garis);background:#fafbf9;position:sticky;bottom:0}
.tutup{background:none;border:0;font-size:1.4rem;cursor:pointer;color:var(--redup);line-height:1}

.pesan{padding:.6rem .8rem;border-radius:8px;margin-bottom:.8rem;font-size:.85rem}
.pesan.err{background:var(--merah-muda);color:var(--merah);border:1px solid #f2c7c2}
.pesan.ok{background:var(--hijau-muda);color:var(--hijau-tua);border:1px solid #c3ddc8}
.kosong{text-align:center;padding:2rem 1rem;color:var(--redup)}
.kosong .ic{font-size:2rem;display:block;margin-bottom:.4rem;opacity:.5}

#toast{position:fixed;bottom:1.2rem;right:1.2rem;z-index:200;display:flex;flex-direction:column;gap:.5rem}
.toast{background:var(--hijau-tua);color:#fff;padding:.7rem 1rem;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.25);font-size:.86rem;animation:masuk .2s}
.toast.err{background:var(--merah)}
@keyframes masuk{from{opacity:0;transform:translateY(8px)}}

.bar{height:8px;background:var(--hijau-muda);border-radius:4px;overflow:hidden;min-width:60px}
.bar > i{display:block;height:100%;background:var(--hijau)}
.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--garis);margin-bottom:1rem;overflow-x:auto}
.tabs button{background:none;border:0;padding:.55rem .85rem;cursor:pointer;color:var(--redup);font-weight:600;
  border-bottom:3px solid transparent;white-space:nowrap}
.tabs button.aktif{color:var(--hijau-tua);border-bottom-color:var(--emas)}
.mini{font-size:.75rem;color:var(--redup)}
.sparkline{display:flex;align-items:flex-end;gap:3px;height:48px}
.sparkline i{flex:1;background:var(--hijau);border-radius:2px 2px 0 0;min-height:2px;opacity:.85}

@media (max-width:820px){
  /* baris 1 = bilah atas (setinggi isinya), baris 2 = konten (sisa layar).
     tanpa ini, bilah hijau ikut meregang di halaman yang isinya pendek */
  #app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;
    align-content:start;overflow-x:hidden}

  /* ---- bilah atas: logo + nama + tombol menu ---- */
  aside{position:sticky;top:0;height:auto;padding:.55rem .8rem;display:block;
    overflow:visible;z-index:60;min-width:0;max-width:100vw;
    box-shadow:0 2px 10px rgba(0,0,0,.18)}
  aside .merek{display:flex;align-items:center;gap:.5rem;padding:0;font-size:1rem;white-space:nowrap;
    position:static;background:none;box-shadow:none}
  aside .merek img.ic{width:28px;height:28px}
  aside .merek #merekNama{overflow:hidden;text-overflow:ellipsis}
  aside .merek #btnMenu{display:block;margin-left:auto;flex:none;background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.28);color:#fff;font-weight:700;font-size:.82rem;
    padding:.45rem .75rem;border-radius:9px;cursor:pointer;min-height:40px}
  aside .merek #btnMenu:active{background:rgba(255,255,255,.28)}

  /* ---- menu sebagai blok besar, bukan geser ---- */
  nav{display:none}
  aside.buka nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;
    margin-top:.7rem;padding-bottom:.3rem}
  nav .grup{display:block;grid-column:1/-1;padding:.6rem .2rem .1rem;font-size:.68rem;color:#8fb095}
  nav .grup:first-of-type{padding-top:.2rem}
  nav button{width:auto;min-height:58px;white-space:normal;text-align:left;line-height:1.25;
    font-size:.86rem;padding:.6rem .7rem;border-radius:11px;background:rgba(255,255,255,.09);
    color:#eaf3eb;align-items:center}
  nav button:active{transform:scale(.97)}
  nav button.aktif{background:var(--emas);color:#2a1e00}

  /* ---- isi halaman ---- */
  main{padding:1rem .8rem 3rem;min-width:0;max-width:100vw;overflow-x:hidden}
  header.top{margin-bottom:.9rem}
  header.top .who{text-align:left;font-size:.72rem}
  h1{font-size:1.25rem}
  .panel{padding:.8rem;border-radius:12px}
  .grid{gap:.6rem}
  .kpi .nilai{font-size:1.3rem}
  .baris{gap:.45rem}
  .baris > div{flex:1 1 46%;min-width:0}

  /* tombol & kolom isian nyaman disentuh */
  .btn{min-height:42px;padding:.55rem .9rem}
  .btn.kecil{min-height:34px}
  input,select,textarea{font-size:16px;padding:.6rem}   /* 16px = iOS tidak auto-zoom */

  /* tabel biasa di dalam panel: label boleh turun baris supaya tidak terpotong */
  .panel table{width:100%}
  .panel table td:not(.num):not(.ka),.panel table th:not(.num):not(.ka){
    white-space:normal;overflow-wrap:break-word}
  .tag{white-space:nowrap}                 /* label status jangan pecah per huruf */

  /* tabel data: kolom pertama tetap terlihat saat digeser */
  .tabel-bungkus{overflow-x:auto;border-radius:8px}
  table{font-size:.8rem}
  th,td{padding:.45rem .5rem}
  .tabel-bungkus table th:first-child,
  .tabel-bungkus table td:first-child{position:sticky;left:0;background:#fff;z-index:1;
    box-shadow:2px 0 4px -2px rgba(0,0,0,.15)}
  .tabel-bungkus table th:first-child{background:#fafbf9}
  tbody tr:hover td:first-child{background:#fafcf9}

  /* dialog jadi satu layar penuh */
  dialog{position:fixed;inset:0;width:auto;max-width:none;height:100dvh;max-height:100dvh;
    border-radius:0;margin:0}
  dialog .isi{max-height:none;height:calc(100dvh - 128px);padding:.9rem}
  dialog .kepala,dialog .kaki{padding:.75rem .9rem}
  dialog .kepala h2{font-size:1rem}
  dialog .kaki{flex-wrap:wrap}
  dialog .kaki .btn{flex:1 1 auto;justify-content:center}

  .sparkline{height:40px}
}

/* ---- layar HP: semua panel jadi satu kolom penuh ---- */
@media (max-width:560px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .baris > div{flex:1 1 100%}
  h1{font-size:1.2rem}
}

/* ---- baris item transaksi jadi kartu bertumpuk di layar kecil ---- */
@media (max-width:700px){
  #beliItem thead,#jualItem thead{display:none}
  #beliItem,#jualItem{display:block}
  #beliItem tbody,#jualItem tbody{display:block}
  #beliItem tbody tr,#jualItem tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;
    border:1px solid var(--garis);border-radius:12px;padding:.7rem;margin-bottom:.6rem;background:#fafbf9}
  #beliItem td,#jualItem td{display:block;border:0;padding:0;text-align:left}
  #beliItem td[data-label]::before,#jualItem td[data-label]::before{
    content:attr(data-label);display:block;font-size:.66rem;font-weight:700;letter-spacing:.04em;
    text-transform:uppercase;color:var(--redup);margin-bottom:.18rem}
  #beliItem td.penuh,#jualItem td.penuh{grid-column:1/-1}
  #beliItem td.nilai,#jualItem td.nilai{align-self:end;font-weight:700}
  #beliItem td.hapus,#jualItem td.hapus{grid-column:1/-1;text-align:right}
  #beliItem td.hapus .btn,#jualItem td.hapus .btn{width:100%;justify-content:center;min-height:38px}
}

@media print{ aside,header.top,.btn,.tabs,#toast{display:none!important} #app{grid-template-columns:1fr} .panel{box-shadow:none;border:0} }