:root{
  --hijau:#00a7da; --hijau2:#1dcafe; --hijau-mud:#82e2ff;
  --biru:#0d6efd; --merah:#dc3545; --kuning:#ffc107; --oranye:#fd7e14;
  --abu:#6a7278; --bg:#f2f5f3; --card:#ffffff; --garis:#dfe5e1; --teks:#1c2b25;
  --radius:14px; --shadow:0 2px 10px rgba(15,81,50,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
     background:var(--bg);color:var(--teks);font-size:14px;padding-bottom:78px}
h1,h2,h3,h4{margin:0 0 8px}
a{color:var(--hijau2);text-decoration:none}
.hidden{display:none!important}

/* ---------- LOGIN ---------- */
#login{position:fixed;inset:0;background:linear-gradient(160deg,#00a7da,#1dcafe 55%,#82e2ff);
       display:flex;align-items:center;justify-content:center;padding:18px;z-index:999;overflow:auto}
.login-box{background:#fff;border-radius:20px;padding:26px 22px;width:100%;max-width:400px;
           box-shadow:0 18px 50px rgba(0,0,0,.28)}
.login-logo{width:300px;height:200;border-radius:20px;
            display:flex;align-items:center;justify-content:center;margin:0 auto 12px;}
.login-logo img{width:300px;height:100%;object-fit:cover;border-radius:10px}
.login-box h2{text-align:center;font-size:17px;color:#544f4f;text-shadow:0 1px 2px rgba(0,0,0,.15);margin:0 0 6px}
.login-box p.sub{text-align:center;color:var(--abu);font-size:12px;margin:0 0 18px}

/* ---------- FORM ---------- */
label{display:block;font-size:12px;font-weight:600;color:#44544c;margin:10px 0 4px}
input,select,textarea{width:100%;padding:11px 12px;border:1.5px solid var(--garis);border-radius:10px;
    font-size:14px;font-family:inherit;background:#fff;color:var(--teks);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--hijau2);box-shadow:0 0 0 3px rgba(21,115,71,.12)}
input[readonly]{background:#f1f3f2;color:#5a6b63}
textarea{min-height:64px;resize:vertical}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 16px;border:none;
     border-radius:10px;background:var(--hijau);color:#fff;font-size:14px;font-weight:600;cursor:pointer;
     width:100%;transition:.15s}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.sec{background:#e9edeb;color:#2f4038}
.btn.biru{background:var(--biru)} .btn.merah{background:var(--merah)}
.btn.kuning{background:var(--kuning);color:#4a3800} .btn.oranye{background:var(--oranye)}
.btn.abu{background:var(--abu)}
.btn.sm{padding:7px 11px;font-size:12.5px;width:auto}
.btn.xs{padding:5px 9px;font-size:11.5px;width:auto;border-radius:8px}
.row{display:flex;gap:10px} .row>*{flex:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;align-items:start}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 8px;align-items:start}
.fld{min-width:0}
.combo-satuan{display:flex;gap:6px}
.combo-satuan input{flex:1;min-width:0}
.combo-satuan select{flex:0 0 108px;width:108px;padding-left:8px;padding-right:6px}
@media(max-width:360px){.combo-satuan select{flex:0 0 92px;width:92px;font-size:12.5px;padding-left:6px}}
.grid2>.fld>label:first-child,.grid3>.fld>label:first-child,
.grid2>div>label:first-child,.grid3>div>label:first-child{margin-top:10px}
@media(max-width:400px){.grid3{grid-template-columns:1fr 1fr}}

/* ---------- LAYOUT ---------- */
header{position:sticky;top:0;background:linear-gradient(135deg,#00a7da,#6cd8f9);color:#fff;
       padding:12px 14px;display:flex;align-items:center;gap:10px;z-index:50;box-shadow:0 2px 12px rgba(0,0,0,.18)}
header .ttl{flex:1;min-width:0}
header .ttl b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header .ttl small{opacity:.85;font-size:11px}
.icon-btn{background:rgba(255,255,255,.16);border:none;color:#fff;width:36px;height:36px;border-radius:10px;
          font-size:16px;cursor:pointer;flex-shrink:0}
main{padding:14px;max-width:1100px;margin:0 auto}
.card{background:var(--card);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);margin-bottom:12px}
.card h3{font-size:14.5px;color:var(--hijau);display:flex;align-items:center;gap:7px;
         border-bottom:1.5px solid var(--hijau-mud);padding-bottom:8px;margin-bottom:12px}
.page{display:none} .page.aktif{display:block}

/* ---------- NAV BAWAH ---------- */
nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--garis);
    display:flex;z-index:60;box-shadow:0 -2px 14px rgba(0,0,0,.07)}
nav button{flex:1;background:none;border:none;padding:8px 2px 10px;font-size:10.5px;color:var(--abu);
           cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;font-weight:600}
nav button i{font-style:normal;font-size:19px;line-height:1}
nav button.aktif{color:var(--hijau)}

/* ---------- SIDEBAR ---------- */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(15,30,22,.45);z-index:70}
.sidebar-overlay.show{display:block}
aside#sidebar{position:fixed;top:0;left:0;bottom:0;width:250px;background:#fff;z-index:80;
  transform:translateX(-100%);transition:transform .22s ease;display:flex;flex-direction:column;
  padding:10px 0 14px;box-shadow:6px 0 24px rgba(0,0,0,.18);overflow-y:auto}
aside#sidebar.buka{transform:translateX(0)}
aside#sidebar .sb-head{display:flex;align-items:center;justify-content:space-between;
  padding:8px 16px 12px;margin-bottom:6px;border-bottom:1.5px solid var(--hijau-mud)}
aside#sidebar .sb-head b{color:var(--hijau);font-size:14.5px}
aside#sidebar .sb-close{background:#f1f3f2;border:none;width:30px;height:30px;border-radius:8px;
  font-size:15px;color:#556;cursor:pointer;flex-shrink:0}
aside#sidebar .sb-sep{height:1px;background:var(--garis);margin:8px 14px}
aside#sidebar button{display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;
  text-align:left;padding:12px 16px;font-size:13.5px;font-weight:600;color:#3a4a43;cursor:pointer}
aside#sidebar button i{font-style:normal;font-size:17px;width:20px;text-align:center;flex-shrink:0}
aside#sidebar button:active{background:#f2f6f4}
aside#sidebar button.nav-item.aktif{background:#e6f7fb;color:var(--hijau)}
aside#sidebar button.keluar{color:var(--merah);margin-top:auto}
@media(min-width:860px){
  header{left:250px}
  main{margin-left:250px;max-width:none}
  nav{left:250px}
  aside#sidebar{transform:none;box-shadow:none;border-right:1px solid var(--garis)}
  aside#sidebar .sb-close{display:none}
  .sidebar-overlay{display:none!important}
  header .icon-btn:first-child{display:none}
}

/* ---------- STAT ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
.stat{background:#fff;border-radius:var(--radius);padding:12px;box-shadow:var(--shadow);border-left:4px solid var(--hijau)}
.stat.b{border-left-color:var(--biru)} .stat.m{border-left-color:var(--merah)}
.stat.k{border-left-color:var(--kuning)} .stat.o{border-left-color:var(--oranye)}
.stat .lbl{font-size:11px;color:var(--abu);font-weight:600;margin-bottom:3px}
.stat .val{font-size:16px;font-weight:800;line-height:1.2}
.stat .sub{font-size:10.5px;color:var(--abu);margin-top:2px}

/* ---------- TABEL ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px;border:1px solid var(--garis)}
table{width:100%;border-collapse:collapse;font-size:12.5px;background:#fff;min-width:480px}
th{background:var(--hijau);color:#fff;padding:9px 8px;text-align:left;font-weight:600;white-space:nowrap;font-size:11.5px}
td{padding:8px;border-bottom:1px solid #eef2f0;vertical-align:middle}
tr:nth-child(even) td{background:#fafcfb}
td.r,th.r{text-align:right} td.c,th.c{text-align:center}
.aksi-td{white-space:nowrap;display:flex;gap:4px}
.badge{display:inline-block;padding:3px 8px;border-radius:20px;font-size:10.5px;font-weight:700}
.b-hijau{background:#d1e7dd;color:#0a3622} .b-merah{background:#f8d7da;color:#842029}
.b-kuning{background:#fff3cd;color:#664d03} .b-biru{background:#cfe2ff;color:#084298}
.b-abu{background:#e9ecef;color:#41464b}

/* ---------- MODAL ---------- */
.modal{position:fixed;inset:0;background:rgba(15,30,22,.6);display:none;align-items:flex-end;
       justify-content:center;z-index:200;backdrop-filter:blur(2px)}
.modal.buka{display:flex}
.modal-box{background:#fff;border-radius:20px 20px 0 0;width:100%;max-width:640px;max-height:94vh;
           overflow-y:auto;padding:16px;animation:naik .22s ease}
@keyframes naik{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;
            position:sticky;top:-16px;background:#fff;padding:6px 0 10px;border-bottom:1.5px solid var(--hijau-mud);z-index:2}
.modal-head h3{font-size:15px;color:var(--hijau);margin:0}
.tutup{background:#f1f3f2;border:none;width:32px;height:32px;border-radius:9px;font-size:17px;cursor:pointer;color:#556}
@media(min-width:700px){.modal{align-items:center}.modal-box{border-radius:18px}}

/* ---------- ITEM TRANSAKSI ---------- */
.item-baris{background:#f7faf8;border:1px solid var(--garis);border-radius:11px;padding:10px;margin-bottom:8px}
.item-baris .hd{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.item-baris .hd b{font-size:12.5px}
.total-box{background:linear-gradient(135deg,#0f5132,#157347);color:#fff;border-radius:12px;padding:12px;margin-top:10px}
.total-box .br{display:flex;justify-content:space-between;padding:3px 0;font-size:13px}
.total-box .br.big{font-size:17px;font-weight:800;border-top:1.5px solid rgba(255,255,255,.35);margin-top:6px;padding-top:8px}

/* ---------- MISC ---------- */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:88px;background:#1c2b25;color:#fff;
       padding:11px 18px;border-radius:11px;font-size:13px;z-index:900;box-shadow:0 6px 22px rgba(0,0,0,.3);
       max-width:90%;text-align:center;white-space:pre-line}
.loading{position:fixed;inset:0;background:rgba(255,255,255,.75);display:none;align-items:center;
         justify-content:center;z-index:800;flex-direction:column;gap:10px}
.loading.on{display:flex}
.spin{width:42px;height:42px;border:4px solid var(--hijau-mud);border-top-color:var(--hijau);
      border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.kosong{text-align:center;padding:26px 10px;color:var(--abu)}
.kosong .em{font-size:40px;display:block;margin-bottom:6px}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:10px}
.tabs button{background:#fff;border:1.5px solid var(--garis);border-radius:20px;padding:7px 14px;
             font-size:12.5px;white-space:nowrap;cursor:pointer;font-weight:600;color:#4a5a52}
.tabs button.aktif{background:var(--hijau);color:#fff;border-color:var(--hijau)}
.cari{position:relative;margin-bottom:10px}
.alert{padding:10px 12px;border-radius:10px;font-size:12.5px;margin-bottom:10px}
.alert.w{background:#fff3cd;color:#664d03;border-left:4px solid var(--kuning)}
.alert.i{background:#cfe2ff;color:#084298;border-left:4px solid var(--biru)}
.alert.d{background:#f8d7da;color:#842029;border-left:4px solid var(--merah)}
.bar{height:8px;background:#e9edeb;border-radius:6px;overflow:hidden;margin-top:4px}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,#157347,#20c997)}
.mini{font-size:11px;color:var(--abu)}

/* ---------- CETAK ---------- */
#cetak{display:none}
.struk58{width:48mm;margin:0 auto;color:#000;font-family:'Courier New',monospace;
  font-size:11px;font-weight:700;line-height:1.42;white-space:normal}
@media print{
  body>*{display:none!important}
  #cetak{display:block!important;padding:0;margin:0}
  @page{size:A4;margin:12mm}
}
@media print{
  body.mode-struk #cetak{display:block!important}
  body.mode-struk .struk58{width:auto}
}
@page struk{size:58mm auto;margin:2mm}

#cetak .kop{display:flex;gap:12px;border-bottom:3px double #000;padding-bottom:8px;margin-bottom:12px}
#cetak .kop .lg{width:54px;height:54px;border:2px solid #0f5132;border-radius:10px;display:flex;
                align-items:center;justify-content:center;font-size:26px}
#cetak h2{font-size:16px;margin:0} #cetak .kop small{font-size:10.5px;line-height:1.45;display:block}
#cetak .judul{text-align:center;font-size:15px;font-weight:800;letter-spacing:1px;
              text-decoration:underline;margin:10px 0 12px}
#cetak table{width:100%;border-collapse:collapse;font-size:11px;min-width:0}
#cetak th,#cetak td{border:1px solid #444;padding:5px 6px;background:#fff!important;color:#000}
#cetak th{background:#e8f0ec!important;text-align:left}
#cetak .info{display:flex;justify-content:space-between;gap:20px;font-size:11.5px;margin-bottom:10px}
#cetak .ttd{display:flex;justify-content:space-between;margin-top:34px;font-size:11.5px;text-align:center}
#cetak .ttd div{width:30%}
#cetak .ttd .sp{height:52px}