/* Kasir Skye Petshop — gaya aplikasi
   Palet: kuning #FFD758 / #FCE59A, biru #2BBBD7 / #218DAE, netral hitam #0C1114 + putih.
   Token warna didefinisikan lengkap di :root, lalu ditimpa untuk tema gelap. */

:root{
  --kuning:#FFD758; --kuning-lembut:#FCE59A;
  --biru:#2BBBD7;   --biru-tua:#218DAE;
  --hitam:#0C1114;  --putih:#FFFFFF;

  --ground:#EDF2F4;
  --panel:#FFFFFF;
  --panel-2:#F5F9FA;
  --garis:#D3E0E4;
  --garis-kuat:#B4C8CE;
  --teks:#0C1114;
  --teks-2:#4C6068;
  --teks-3:#7B8F96;
  --rail:#0C1114;
  --rail-teks:#EAF2F4;
  --rail-teks-2:#8FA6AD;
  --biru-dalam:#1B7B99;
  --info:#1B7B99;
  --info-bg:#E2F5FA;
  --baik:#15803D; --baik-bg:#DCFCE7;
  --awas:#8A5A06; --awas-bg:#FDF0C8;
  --kritis:#B4232A; --kritis-bg:#FDE4E4;
  --hover-baris:#FCE59A;
  --hover-teks:#0C1114;
  --bayang:0 1px 2px rgba(12,17,20,.06), 0 8px 24px -12px rgba(12,17,20,.18);
  --r:4px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#080C0E; --panel:#121A1E; --panel-2:#0E1518;
    --garis:#223137; --garis-kuat:#31454C;
    --teks:#EAF2F4; --teks-2:#9FB4BB; --teks-3:#71888F;
    --rail:#04080A; --rail-teks:#EAF2F4; --rail-teks-2:#7E969E;
    --biru-dalam:#12414F;
    --info:#4FCDE4; --info-bg:#0C2A33;
    --baik:#5EE08D; --baik-bg:#0C2C1A;
    --awas:#FCE59A; --awas-bg:#33290A;
    --kritis:#FCA5A5; --kritis-bg:#331416;
    --hover-baris:#2E2607;
    --hover-teks:#FFE9A8;
    --bayang:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -14px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --ground:#080C0E; --panel:#121A1E; --panel-2:#0E1518;
  --garis:#223137; --garis-kuat:#31454C;
  --teks:#EAF2F4; --teks-2:#9FB4BB; --teks-3:#71888F;
  --rail:#04080A; --rail-teks:#EAF2F4; --rail-teks-2:#7E969E;
  --biru-dalam:#12414F;
  --info:#4FCDE4; --info-bg:#0C2A33;
  --baik:#5EE08D; --baik-bg:#0C2C1A;
  --awas:#FCE59A; --awas-bg:#33290A;
  --kritis:#FCA5A5; --kritis-bg:#331416;
  --hover-baris:#2E2607;
  --hover-teks:#FFE9A8;
  --bayang:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -14px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--teks);
  font-family:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  font-size:13px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--biru);outline-offset:1px}
.num{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.lbl{font-family:"Archivo","Archivo Narrow",system-ui,sans-serif;font-weight:700;
     font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--teks-3)}

.app{display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:600px}

/* ---------- status bar ---------- */
.bar{display:flex;align-items:stretch;background:var(--rail);color:var(--rail-teks);
     border-bottom:3px solid var(--kuning);flex:0 0 auto}
.brand{display:flex;align-items:center;gap:10px;padding:8px 16px;border-right:1px solid #1E2A2F}
.mark{width:30px;height:30px;border-radius:50%;background:var(--kuning);color:#0C1114;
      display:grid;place-items:center;font-family:"Archivo",sans-serif;font-weight:800;font-size:13px;flex:0 0 auto}
.brand b{font-family:"Archivo",sans-serif;font-weight:800;font-size:15px;letter-spacing:-.01em;display:block;line-height:1.15}
.brand span{font-size:9.5px;color:var(--rail-teks-2);letter-spacing:.09em;text-transform:uppercase;font-weight:700}
.clock{display:flex;align-items:center;gap:10px;padding:6px 16px;border-right:1px solid #1E2A2F}
.clock .t{display:flex;flex-direction:column;line-height:1.15}
#jam{font-family:"IBM Plex Mono",monospace;font-size:21px;font-weight:600;color:var(--kuning);letter-spacing:.01em}
#tgl{font-size:10.5px;color:var(--rail-teks-2);font-weight:500}
.tzchip{font-size:9px;font-weight:800;letter-spacing:.11em;background:#16232A;color:var(--biru);
        padding:3px 6px;border-radius:3px;border:1px solid #24363E}
.meta{display:flex;align-items:center;gap:22px;padding:0 16px;margin-left:auto;flex-wrap:wrap}
.meta .cell{display:flex;flex-direction:column;justify-content:center;gap:1px}
.meta .cell .lbl{color:var(--rail-teks-2)}
.meta .cell b{font-size:12.5px;font-weight:600}
.meta .cell b.mono{font-family:"IBM Plex Mono",monospace;color:var(--biru)}
.tema{background:none;border:1px solid #2A383E;color:var(--rail-teks-2);border-radius:var(--r);
      padding:5px 9px;cursor:pointer;font-size:11px;font-weight:600;align-self:center}
.tema:hover{border-color:var(--kuning);color:var(--kuning)}

/* ---------- tabs ---------- */
.tabs{display:flex;background:var(--rail);flex:0 0 auto;padding:0 8px;border-bottom:1px solid var(--garis)}
.tab{appearance:none;background:none;border:0;border-bottom:3px solid transparent;
     padding:9px 20px;cursor:pointer;color:var(--rail-teks-2);
     font-family:"Archivo",sans-serif;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.tab:hover{color:var(--rail-teks)}
.tab[aria-selected="true"]{color:var(--kuning);border-bottom-color:var(--kuning)}

/* ---------- workspace ---------- */
.view{flex:1 1 auto;min-height:0;display:none;flex-direction:column}
.view.on{display:flex}
.work{display:flex;flex:1 1 auto;width:100%;min-height:0}
.rail{flex:0 0 378px;min-width:0;background:var(--panel);border-right:1px solid var(--garis);
      display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;min-height:0;background:var(--panel-2)}

.sec{border-bottom:1px solid var(--garis)}
.sec>h2{margin:0;padding:9px 14px;background:var(--panel-2);border-bottom:1px solid var(--garis);
        font-family:"Archivo",sans-serif;font-weight:700;font-size:11px;letter-spacing:.1em;
        text-transform:uppercase;color:var(--teks-2);display:flex;align-items:center;gap:8px}
.sec>h2 .dot{width:7px;height:7px;border-radius:2px;background:var(--kuning);flex:0 0 auto}
.sec>h2 .dot.b{background:var(--biru)}
.secbody{padding:11px 14px;display:flex;flex-direction:column;gap:9px}

/* ---------- fields ---------- */
.f{display:flex;flex-direction:column;gap:4px;min-width:0}
.f>label{font-family:"Archivo",sans-serif;font-weight:700;font-size:10px;letter-spacing:.09em;
         text-transform:uppercase;color:var(--teks-3)}
.inp{width:100%;padding:7px 9px;background:var(--panel);border:1px solid var(--garis-kuat);border-radius:var(--r);
     color:var(--teks)}
.inp:focus{outline:none;border-color:var(--biru);box-shadow:0 0 0 3px rgba(43,187,215,.2)}
.inp[readonly]{background:var(--panel-2);color:var(--teks-2);border-style:dashed}
.inp.big{font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:600;padding:9px 10px}
.inp.mono{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.hint{font-size:11px;color:var(--teks-3)}
.kosong kbd{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:700;background:var(--hitam);color:var(--kuning);border-radius:3px;padding:2px 6px}

/* ---------- barcode field ---------- */
.scan{position:relative}
.scan .inp{padding-left:34px;letter-spacing:.03em}
.scan .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);pointer-events:none;
          display:flex;gap:1.5px;align-items:center;height:15px}
.scan .ic i{display:block;width:1.5px;height:100%;background:var(--teks-3)}
.scan .ic i:nth-child(2){width:3px}
.scan .ic i:nth-child(4){width:2.5px;height:70%}
.scan .ic i:nth-child(5){width:1px}
.sug{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 3px);background:var(--panel);
     border:1px solid var(--garis-kuat);border-radius:var(--r);box-shadow:var(--bayang);
     max-height:272px;overflow-y:auto}
.sug[hidden]{display:none}
.sug button{display:flex;width:100%;gap:8px;align-items:baseline;text-align:left;background:none;border:0;
            border-bottom:1px solid var(--garis);padding:6px 9px;cursor:pointer;color:var(--teks)}
.sug button:last-child{border-bottom:0}
.sug button:hover,.sug button.hi{background:var(--hover-baris);color:var(--hover-teks)}
.sug .k{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--teks-3);flex:0 0 auto;width:100px;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sug .n{flex:1 1 auto;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sug .p{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;flex:0 0 auto}

/* ---------- buttons ---------- */
.btn{appearance:none;border:1px solid var(--garis-kuat);background:var(--panel);color:var(--teks);
     padding:7px 12px;border-radius:var(--r);cursor:pointer;font-weight:600;font-size:12px;
     display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.btn:hover{border-color:var(--biru-dalam);color:var(--info)}
.btn .fk{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:700;color:var(--teks-3)}
.btn:hover .fk{color:var(--info)}
.btn.utama{background:var(--kuning);border-color:#E0B93A;color:#0C1114;font-weight:700}
.btn.utama:hover{background:#FFE07C;border-color:#CFA828;color:#0C1114}
.btn.utama .fk{color:#7A6110}
.btn.utama:hover .fk{color:#7A6110}
.btn.biru{background:var(--biru-dalam);border-color:var(--biru-dalam);color:#fff}
.btn.biru:hover{background:#218DAE;border-color:#218DAE;color:#fff}
.btn.biru .fk,.btn.biru:hover .fk{color:rgba(255,255,255,.72)}
.btn.kecil{padding:4px 9px;font-size:11px}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- bayar ---------- */
.tot{display:flex;flex-direction:column;gap:1px;padding:12px 14px;background:var(--hitam);border-radius:var(--r)}
.tot .lbl{color:#8FA6AD}
.tot .v{font-family:"IBM Plex Mono",monospace;font-size:28px;font-weight:700;letter-spacing:-.025em;
        color:var(--kuning);line-height:1.05}
.tot .sub{font-size:11px;color:#8FA6AD;display:flex;justify-content:space-between;gap:8px;margin-top:6px;
          padding-top:6px;border-top:1px solid #1E2A2F;font-family:"IBM Plex Mono",monospace}
.kembali{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 12px;
         background:var(--info-bg);border:1px solid var(--biru);border-radius:var(--r)}
.kembali .v{font-family:"IBM Plex Mono",monospace;font-size:21px;font-weight:700;color:var(--info)}
.cepat{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cepat button{padding:6px 3px;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
              background:var(--panel-2);border:1px solid var(--garis-kuat);border-radius:var(--r);
              cursor:pointer;color:var(--teks-2)}
.cepat button:hover{background:var(--kuning);border-color:#E0B93A;color:#0C1114}

/* .sub juga dipakai sub-tab Pembelian — jangan bocorkan latar & padding-nya ke kotak total */
.tot .sub{background:none;padding:6px 0 0;border-bottom:0}

/* ---------- shortcut legend ---------- */
.sk{margin-top:auto;border-top:1px solid var(--garis);background:var(--panel-2);padding:11px 14px}
.sk h3{margin:0 0 8px;font-family:"Archivo",sans-serif;font-weight:700;font-size:10px;letter-spacing:.1em;
       text-transform:uppercase;color:var(--teks-3)}
.sk ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.sk li:last-child{grid-column:1 / -1}
.sk li{display:flex;align-items:baseline;gap:9px;font-size:11.5px;color:var(--teks-2)}
.sk kbd{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:700;background:var(--hitam);color:var(--kuning);
        border-radius:3px;padding:2px 6px;flex:0 0 auto;min-width:36px;text-align:center;letter-spacing:.03em}

/* ---------- table ---------- */
.tblhead{display:flex;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid var(--garis);
         background:var(--panel);flex:0 0 auto;flex-wrap:wrap}
.tblhead h2{margin:0;font-family:"Archivo",sans-serif;font-weight:700;font-size:12px;letter-spacing:.09em;
            text-transform:uppercase;color:var(--teks)}
.tblhead .kanan{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;background:var(--info-bg);color:var(--info);
      padding:2px 9px;border-radius:99px;border:1px solid rgba(43,187,215,.42)}
.pill.k{background:var(--awas-bg);color:var(--awas);border-color:rgba(255,215,88,.55)}
.scroller{flex:1 1 auto;min-height:0;overflow:auto}
table{width:100%;border-collapse:collapse}
thead th{position:sticky;top:0;z-index:5;background:var(--biru-dalam);color:#fff;text-align:left;
         font-family:"Archivo",sans-serif;font-weight:700;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
         padding:8px 10px;white-space:nowrap;border-right:1px solid rgba(255,255,255,.16)}
thead th:last-child{border-right:0}
tbody td{padding:6px 10px;border-bottom:1px solid var(--garis);vertical-align:middle}
tbody tr:nth-child(even){background:rgba(43,187,215,.05)}
tbody tr:hover{background:var(--hover-baris);color:var(--hover-teks)}
tbody tr.pick{box-shadow:inset 3px 0 0 var(--kuning)}
.r{text-align:right}.c{text-align:center}
.kosong{padding:46px 20px;text-align:center;color:var(--teks-3)}
.kosong b{display:block;font-family:"Archivo",sans-serif;font-size:14px;color:var(--teks-2);margin-bottom:5px;
          letter-spacing:.05em;text-transform:uppercase}
.no{width:40px;color:var(--teks-3);font-family:"IBM Plex Mono",monospace;font-size:11px}
.cellin{width:100%;max-width:108px;padding:3px 6px;border:1px solid transparent;border-radius:3px;background:transparent;
        font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;text-align:right;color:inherit}
.cellin:hover{border-color:var(--garis-kuat);background:var(--panel)}
.cellin:focus{outline:none;border-color:var(--biru);background:var(--panel);box-shadow:0 0 0 2px rgba(43,187,215,.22);color:var(--teks)}
.hapus{border:0;background:none;cursor:pointer;color:var(--teks-3);padding:2px 7px;border-radius:3px;line-height:1;font-size:15px}
.hapus:hover{background:var(--kritis-bg);color:var(--kritis)}
.tag{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
     padding:2px 6px;border-radius:3px;background:var(--panel-2);color:var(--teks-2);border:1px solid var(--garis);white-space:nowrap}
.stok{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;padding:1px 8px;border-radius:3px;white-space:nowrap}
.stok.ada{background:var(--baik-bg);color:var(--baik)}
.stok.tipis{background:var(--awas-bg);color:var(--awas)}
.stok.habis{background:var(--kritis-bg);color:var(--kritis)}

/* ---------- footer fn strip ---------- */
.fn{flex:0 0 auto;display:flex;background:var(--rail);border-top:3px solid var(--kuning);overflow-x:auto}
.fn button{flex:1 1 0;min-width:108px;background:none;border:0;border-right:1px solid #18242A;cursor:pointer;
           padding:7px 12px;display:flex;align-items:center;gap:9px;color:var(--rail-teks-2);text-align:left}
.fn button:hover{background:#141F24;color:var(--rail-teks)}
.fn button b{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:700;color:var(--kuning);flex:0 0 auto}
.fn button span{font-size:11px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.fn .keluar b{color:#F79E9E}

/* ---------- pembelian ---------- */
.sub{display:flex;gap:10px;padding:9px 14px;background:var(--panel);border-bottom:1px solid var(--garis);
     flex:0 0 auto;align-items:center;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--garis-kuat);border-radius:var(--r);overflow:hidden}
.seg button{appearance:none;border:0;background:var(--panel);padding:6px 18px;cursor:pointer;
            font-family:"Archivo",sans-serif;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
            color:var(--teks-2);border-right:1px solid var(--garis-kuat)}
.seg button:last-child{border-right:0}
.seg button:hover{background:var(--panel-2)}
.seg button[aria-selected="true"]{background:var(--kuning);color:#0C1114}
.pane{display:none;flex:1 1 auto;min-height:0;flex-direction:column}
.pane.on{display:flex}
.grid2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;padding:14px 14px 0;align-items:start}
.kartu{background:var(--panel);border:1px solid var(--garis);border-radius:var(--r);box-shadow:var(--bayang)}
.kartu>h2{margin:0;padding:9px 13px;border-bottom:1px solid var(--garis);background:var(--panel-2);
          font-family:"Archivo",sans-serif;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
          color:var(--teks-2);display:flex;align-items:center;gap:8px}
.kartu>h2 .dot{width:7px;height:7px;border-radius:2px;background:var(--biru);flex:0 0 auto}
.kartu>h2 .dot.k{background:var(--kuning)}
.kartu .body{padding:13px}
.dl{display:grid;grid-template-columns:76px minmax(0,1fr);gap:8px 12px;align-items:baseline;margin:0}
.dl dt{font-family:"Archivo",sans-serif;font-weight:700;font-size:10px;letter-spacing:.08em;
       text-transform:uppercase;color:var(--teks-3)}
.dl dd{margin:0;font-size:12.5px;min-width:0;overflow-wrap:anywhere}
.dl dd.mono{font-family:"IBM Plex Mono",monospace;font-size:12px}
.entri{padding:14px;display:flex;flex-direction:column;gap:11px}
.entri .baris{display:grid;grid-template-columns:minmax(120px,1fr) minmax(180px,2.1fr) 92px 118px 84px 124px;gap:9px;align-items:end}
.prosesbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:10px 13px;background:var(--panel-2);
           border:1px solid var(--garis);border-radius:var(--r)}
.prosesbar .lbl{margin-right:2px}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;
       background:rgba(6,10,12,.66)}
.modal[hidden]{display:none}
.box{background:var(--panel);border:1px solid var(--garis-kuat);border-radius:6px;
     box-shadow:0 24px 64px -20px rgba(0,0,0,.6);
     width:min(1120px,100%);max-height:min(780px,100%);display:flex;flex-direction:column;overflow:hidden}
.box.kecil{width:min(480px,100%)}
.box.sedang{width:min(700px,100%)}
.box>header{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--hitam);color:#fff;flex:0 0 auto}
.box>header h2{margin:0;font-family:"Archivo",sans-serif;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.box>header .sub2{font-size:11px;color:#8FA6AD}
.box>header .x{margin-left:auto;background:none;border:1px solid #2A383E;color:#8FA6AD;border-radius:3px;
               padding:4px 10px;cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600}
.box>header .x:hover{border-color:var(--kuning);color:var(--kuning)}
.filters{display:flex;gap:9px;padding:10px 14px;border-bottom:1px solid var(--garis);background:var(--panel-2);
         flex-wrap:wrap;flex:0 0 auto;align-items:center}
.filters .inp{flex:1 1 240px;min-width:180px}
.filters select.inp{flex:0 0 auto;min-width:158px}
.boxfoot{padding:9px 14px;border-top:1px solid var(--garis);background:var(--panel-2);flex:0 0 auto;
         display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:11px;color:var(--teks-3)}

/* ---------- laporan ---------- */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:1px;background:var(--garis);
     border-bottom:1px solid var(--garis);flex:0 0 auto}
.kpi>div{background:var(--panel);padding:12px 14px}
.kpi .lbl{display:block;margin-bottom:3px}
.kpi b{font-family:"IBM Plex Mono",monospace;font-size:20px;font-weight:700;letter-spacing:-.02em;display:block}
.kpi .d{font-size:10.5px;color:var(--teks-3);margin-top:2px}
.kpi .laba b{color:var(--info)}
.lapbody{overflow-y:auto;flex:1 1 auto;min-height:0}

/* ---------- struk ---------- */
.strukwrap{background:var(--ground);padding:18px;overflow-y:auto;flex:1 1 auto;min-height:0}
.struk{background:#fff;color:#0C1114;width:326px;margin:0 auto;padding:18px 20px;
       font-family:"IBM Plex Mono",monospace;font-size:11.5px;line-height:1.5;box-shadow:0 2px 14px rgba(0,0,0,.18)}
.struk h3{margin:0;text-align:center;font-family:"Archivo",sans-serif;font-size:15px;letter-spacing:.08em}
.struk .ctr{text-align:center;font-size:10px;line-height:1.45;color:#444}
.struk hr{border:0;border-top:1px dashed #AAB;margin:8px 0}
.struk .l{display:flex;justify-content:space-between;gap:8px}
.struk .item{margin-bottom:5px}
.struk .item .nm{font-size:10.5px;overflow-wrap:anywhere}
.struk .big{font-weight:700;font-size:13px}

.note{display:flex;gap:9px;align-items:flex-start;padding:9px 12px;background:var(--info-bg);
      border-left:3px solid var(--biru);border-radius:0 var(--r) var(--r) 0;font-size:11.5px;color:var(--teks-2)}
.note b{color:var(--teks);font-weight:600}
.toast{position:fixed;left:50%;bottom:66px;transform:translateX(-50%);z-index:200;background:var(--hitam);
       color:#fff;border-left:4px solid var(--kuning);padding:10px 18px;border-radius:var(--r);
       box-shadow:0 12px 34px -12px rgba(0,0,0,.6);font-size:12.5px;font-weight:600;max-width:92vw}
.toast[hidden]{display:none}

@media (max-width:1180px){
  .entri .baris{grid-template-columns:minmax(110px,1fr) minmax(150px,1.6fr) 84px 108px 76px 112px}
}
@media (max-width:1040px){
  .rail{flex:0 0 336px}
  .grid2{grid-template-columns:1fr}
  .meta{gap:14px}
  .entri .baris{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  .app{height:auto;min-height:100vh}
  .work{flex-direction:column}
  .rail{flex:0 0 auto;border-right:0;border-bottom:1px solid var(--garis);overflow:visible}
  .main{min-height:360px}
  .clock{border-right:0}
  .bar{flex-wrap:wrap}
  .meta{margin-left:0;padding:8px 16px;width:100%;border-top:1px solid #1B262B}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{
  .bar,.tabs,.fn,.rail,.tblhead,.filters,.boxfoot,.box>header,.toast{display:none!important}
  .modal{position:static;background:none;padding:0}
  .box{border:0;box-shadow:none;max-height:none;width:auto}
  .strukwrap{background:#fff;padding:0;overflow:visible}
  .struk{box-shadow:none;width:auto;max-width:326px}
}



/* =====================================================================
   LOGIN, LOGOUT, AKUN, DAN CHAT
   ===================================================================== */
[hidden]{display:none!important}

:root{
  --gelembung-saya:#FCE59A;
  --gelembung-saya-teks:#0C1114;
  --meta-saya:#6E6337;
  --centang-abu:#7A7456;
  --centang-biru:#1B7B99;
  --pola-chat:#DCE6E9;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --gelembung-saya:#3A300C;
    --gelembung-saya-teks:#FFF3CC;
    --meta-saya:#CFC39A;
    --centang-abu:#B5AE92;
    --centang-biru:#4FCDE4;
    --pola-chat:#1A262B;
  }
}
:root[data-theme="dark"]{
  --gelembung-saya:#3A300C;
  --gelembung-saya-teks:#FFF3CC;
  --meta-saya:#CFC39A;
  --centang-abu:#B5AE92;
  --centang-biru:#4FCDE4;
  --pola-chat:#1A262B;
}

/* ---------- popup masuk ---------- */
body.terkunci{overflow:hidden}

/* Semua ukuran di popup memakai em, dan ukuran dasarnya mengikuti lebar layar:
   15px di HP, sekitar 17px di laptop, sampai 20px di monitor besar. */
.layar-masuk{position:fixed;inset:0;z-index:300;display:flex;overflow-y:auto;
  padding:max(14px,3vh) 14px;background:#0C1114;
  font-size:clamp(15px, calc(11.5px + .42vw), 20px)}
.masuk-latar{position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(60vmax 40vmax at 12% 8%, rgba(255,215,88,.11), transparent 62%),
    radial-gradient(56vmax 38vmax at 92% 96%, rgba(43,187,215,.13), transparent 62%),
    radial-gradient(rgba(234,242,244,.07) 1px, transparent 1.3px) 0 0 / 22px 22px}

/* margin:auto memusatkan kartu tanpa memotong bagian atasnya di layar pendek */
.masuk-kartu{position:relative;margin:auto;width:min(100%,25em);background:var(--panel);color:var(--teks);
  border-radius:.8em;overflow:hidden;
  box-shadow:0 1.8em 4.5em -1.4em rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06);
  animation:masuk-muncul .22s ease-out}
@keyframes masuk-muncul{from{transform:translateY(12px) scale(.985)}to{transform:none}}

.masuk-kepala{display:flex;align-items:center;gap:.7em;padding:.8em 1.2em;background:#0C1114;color:#EAF2F4;
  border-bottom:3px solid var(--kuning)}
.masuk-kepala .mark{width:2.25em;height:2.25em;font-size:.85em;flex:0 0 auto}
.masuk-merek{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.masuk-merek b{font-family:"Archivo",sans-serif;font-weight:800;font-size:1em;letter-spacing:-.01em;white-space:nowrap}
.masuk-merek small{margin-top:.25em;font-size:.6em;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:#8FA6AD;white-space:nowrap}
.masuk-waktu{margin-left:auto;display:flex;align-items:center;gap:.45em;flex:0 0 auto}
#masukJam{font-family:"IBM Plex Mono",monospace;font-size:1em;font-weight:600;color:var(--kuning);
  font-variant-numeric:tabular-nums}
.masuk-waktu .tzchip{font-size:.55em}

.masuk-form{display:flex;flex-direction:column;gap:.9em;padding:1.45em 1.45em 1.3em}
.masuk-form h1{margin:0;font-family:"Archivo",sans-serif;font-weight:800;font-size:1.7em;line-height:1.15;
  letter-spacing:-.02em;color:var(--teks);text-wrap:balance}
.masuk-sub{margin:-.5em 0 .1em;color:var(--teks-2);font-size:.88em;line-height:1.5}
.masuk-kolom{display:flex;flex-direction:column;gap:.8em}
.masuk-form .f{gap:.35em}
.masuk-form .f>label{font-size:.66em}
/* minimal 16px agar HP tidak memperbesar halaman saat kolom disentuh */
.masuk-form .teks-besar{font-size:max(16px,1em);padding:.68em .8em;border-radius:.4em}
.teks-besar{font-size:15px;padding:10px 12px}
.pw{position:relative}
.pw .inp{padding-right:6.2em}
.pw-lihat{position:absolute;right:.4em;top:50%;transform:translateY(-50%);border:0;background:var(--panel-2);
  color:var(--teks-2);font-size:.72em;font-weight:700;letter-spacing:.03em;padding:.55em .85em;border-radius:.3em;cursor:pointer}
.pw-lihat:hover{color:var(--info)}
.masuk-galat,.form-galat{margin:0;padding:.65em .85em;background:var(--kritis-bg);color:var(--kritis);
  border-left:3px solid var(--kritis);border-radius:0 var(--r) var(--r) 0;font-size:12.5px;line-height:1.5}
.masuk-galat{font-size:.84em}
.masuk-tombol,.masuk-pulihkan{justify-content:center;font-size:1em;padding:.78em 1em;border-radius:.45em}
.masuk-pulihkan{display:none}
.masuk-info{margin:0;display:flex;align-items:center;gap:.55em;font-size:.76em;line-height:1.45;color:var(--teks-3)}
.masuk-info::before{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--teks-3);flex:0 0 auto}
.masuk-info.ok::before{background:#22C55E}
.masuk-info.lokal::before{background:var(--kuning)}
.masuk-info.awas{color:var(--kritis)}
.masuk-info.awas::before{background:var(--kritis)}
.masuk-bantuan{display:none;margin:0;padding:.7em .85em;font-size:.78em;line-height:1.55;color:var(--teks-2);
  background:var(--panel-2);border:1px solid var(--garis);border-radius:.4em}
.masuk-bantuan kbd{font-family:"IBM Plex Mono",monospace;font-size:.9em;padding:0 .3em;background:var(--panel);
  border:1px solid var(--garis-kuat);border-bottom-width:2px;border-radius:3px}

/* Sebelum aplikasi siap: form disembunyikan dan titik status berdenyut.
   Setelah 8 detik muncul petunjuk — lewat CSS saja, jadi tetap tampil
   walau JavaScript tidak berjalan sama sekali. */
.layar-masuk[data-keadaan="memuat"] .masuk-kolom,
.layar-masuk[data-keadaan="memuat"] .masuk-galat,
.layar-masuk[data-keadaan="gagal-muat"] .masuk-kolom,
.layar-masuk[data-keadaan="gagal-muat"] .masuk-tombol{display:none!important}
.layar-masuk[data-keadaan="memuat"] .masuk-info::before{background:var(--kuning);animation:masuk-denyut 1s ease-in-out infinite}
@keyframes masuk-denyut{50%{opacity:.25}}
.layar-masuk[data-keadaan="memuat"] .masuk-bantuan{display:block;max-height:0;margin-top:-.9em;padding-top:0;padding-bottom:0;
  border-width:0;overflow:hidden;animation:masuk-bantuan 0s 8s forwards!important}
@keyframes masuk-bantuan{to{max-height:20em;margin-top:0;padding-top:.7em;padding-bottom:.7em;border-width:1px}}
.layar-masuk[data-keadaan="gagal-muat"] .masuk-pulihkan{display:flex}
/* jam digerakkan aplikasi; bila aplikasi gagal dimuat, jangan tampilkan --:--:-- */
.layar-masuk[data-keadaan="gagal-muat"] .masuk-waktu{visibility:hidden}

.tanpa-js{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:24px;background:#0C1114;
  color:#FFD758;font:600 15px/1.7 system-ui,sans-serif;text-align:center}

@media (max-width:480px){
  .layar-masuk{padding:12px}
  .masuk-kepala{padding:.75em 1em}
  .masuk-form{padding:1.2em 1.1em 1.1em}
  .masuk-merek small{display:none}
}
/* HP dimiringkan: kartu tetap utuh dan bisa digulir */
@media (max-height:520px){
  .layar-masuk{padding-top:10px;padding-bottom:10px}
  .masuk-sub{display:none}
}

/* ---------- tombol di status bar ---------- */
.akun-btn{appearance:none;background:none;border:0;color:inherit;text-align:left;cursor:pointer;
  padding:4px 8px;margin:-4px -8px;border-radius:var(--r)}
.akun-btn:hover{background:#16232A}
.akun-btn:hover b{color:var(--kuning)}
.bar-btn{position:relative;display:inline-flex;align-items:center;gap:7px;align-self:center;background:none;
  border:1px solid #2A383E;color:var(--rail-teks);border-radius:var(--r);padding:6px 11px;cursor:pointer;
  font-size:12px;font-weight:600;white-space:nowrap}
.bar-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.bar-btn:hover{border-color:var(--biru);color:var(--biru)}
.chat-btn.ada-baru{border-color:var(--kuning);color:var(--kuning)}
.chat-btn[aria-expanded="true"]{background:#1B7B99;border-color:#1B7B99;color:#fff}
.logout-btn:hover{border-color:#F79E9E;color:#F79E9E}
.lencana{position:absolute;top:-8px;right:-8px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;
  background:var(--kuning);color:#0C1114;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:700;
  display:grid;place-items:center;box-shadow:0 0 0 2px var(--rail)}

/* ---------- avatar ---------- */
.avatar{width:38px;height:38px;border-radius:50%;background:#1B7B99;color:#fff;display:grid;place-items:center;
  font-family:"Archivo",sans-serif;font-weight:800;font-size:13px;letter-spacing:.02em;flex:0 0 auto}
.avatar:empty{visibility:hidden}
.avatar.besar{width:52px;height:52px;font-size:17px}

/* ---------- modal akun ---------- */
.akun-isi{padding:16px;display:flex;flex-direction:column;gap:18px;overflow-y:auto;min-height:0}
.akun-profil{display:flex;align-items:center;gap:13px}
.akun-profil b{display:block;font-family:"Archivo",sans-serif;font-size:18px;font-weight:800}
.akun-profil small{display:block;margin-top:2px;color:var(--teks-3);font-size:12px}
.akun-form,.akun-admin{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--garis)}
.akun-admin .akun-form{border-top:0;padding-top:2px}
.akun-form h3,.akun-admin h3{margin:0;font-family:"Archivo",sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--teks-2)}
.akun-admin .hint{margin:-4px 0 0}
.akun-daftar{list-style:none;margin:0;padding:0;border:1px solid var(--garis);border-radius:var(--r)}
.akun-daftar li{display:flex;align-items:center;gap:11px;padding:9px 12px;border-bottom:1px solid var(--garis)}
.akun-daftar li:last-child{border-bottom:0}
.akun-daftar .avatar{width:32px;height:32px;font-size:11.5px}
.akun-daftar .nm{flex:1 1 auto;min-width:0}
.akun-daftar .nm b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.akun-daftar .nm small{color:var(--teks-3);font-size:11px}
.akun-daftar .akun-kosong{justify-content:center;color:var(--teks-3);font-size:12.5px;padding:14px}

/* ---------- panel chat ---------- */
.chat{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(840px,100vw);display:flex;flex-direction:column;
  background:var(--panel);border-left:1px solid var(--garis-kuat);box-shadow:-24px 0 60px -30px rgba(0,0,0,.55)}
.chat.tunggal{width:min(460px,100vw)}
.chat-kepala{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--hitam);color:#fff;
  border-bottom:3px solid var(--kuning);flex:0 0 auto}
.chat-kepala h2{margin:0;font-family:"Archivo",sans-serif;font-weight:800;font-size:15px;letter-spacing:.01em}
.chat-sub{display:block;margin-top:1px;font-size:11px;color:#8FA6AD}
.chat-kepala .x{margin-left:auto;background:none;border:1px solid #2A383E;color:#8FA6AD;border-radius:3px;
  padding:4px 10px;cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600}
.chat-kepala .x:hover{border-color:var(--kuning);color:var(--kuning)}

.chat-badan{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:290px minmax(0,1fr)}
.chat.tunggal .chat-badan{grid-template-columns:minmax(0,1fr)}
.chat.tunggal .chat-kontak{display:none}

.chat-kontak{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--garis);background:var(--panel)}
.chat-daftar{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1 1 auto}
.chat-kelola{margin:10px 12px;align-self:flex-start}
.chat-info{padding:22px 16px;color:var(--teks-3);font-size:12.5px;line-height:1.6}
.chat-info .btn{margin-top:10px}

.kontak{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:10px 14px;background:none;
  border:0;border-bottom:1px solid var(--garis);cursor:pointer;color:var(--teks)}
.kontak:hover{background:var(--panel-2)}
.kontak.aktif{background:var(--info-bg);box-shadow:inset 3px 0 0 var(--biru)}
.kontak .isi{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.kontak .baris1,.kontak .baris2{display:flex;align-items:center;gap:8px;min-width:0}
.kontak .baris1 b{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.kontak time{flex:0 0 auto;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--teks-3)}
.kontak.ada-baru time{color:var(--awas);font-weight:700}
.pratinjau{display:block;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12px;color:var(--teks-2)}
.pratinjau .tanda{margin-right:3px;vertical-align:-2px}
.pratinjau.redup{color:var(--teks-3);font-style:italic}
.kontak.ada-baru .pratinjau{color:var(--teks);font-weight:600}
.kontak .tanda.baca{color:var(--info)}
.belum{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--kuning);color:#0C1114;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:700;display:grid;place-items:center}

.chat-ruang{display:flex;flex-direction:column;min-height:0;min-width:0}
.ruang-kepala{display:flex;align-items:center;gap:11px;min-height:58px;padding:9px 14px;flex:0 0 auto;
  border-bottom:1px solid var(--garis);background:var(--panel)}
.ruang-kepala .avatar{width:34px;height:34px;font-size:12px}
.ruang-nama{display:flex;flex-direction:column;min-width:0}
.ruang-nama b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ruang-nama small{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--teks-3)}
.ruang-kembali{display:none;background:none;border:0;padding:0 6px 3px 0;font-size:28px;line-height:1;color:var(--teks-2);cursor:pointer}
.chat-status{flex:0 0 auto;padding:6px 14px;background:var(--awas-bg);color:var(--awas);font-size:11.5px;font-weight:600}

.chat-pesan{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:3px;
  padding:12px 16px 18px;background-color:var(--panel-2);
  background-image:radial-gradient(var(--pola-chat) 1px,transparent 1.2px);background-size:18px 18px}
.tanggal-chat{position:sticky;top:0;z-index:1;align-self:center;margin:10px 0 6px}
.tanggal-chat span{display:inline-block;padding:3px 11px;border-radius:99px;background:var(--panel);
  border:1px solid var(--garis);color:var(--teks-2);font-size:11px;font-weight:600;box-shadow:0 1px 2px rgba(12,17,20,.06)}

.gelembung{max-width:min(78%,520px);margin-top:2px;padding:6px 10px 5px;border-radius:10px;
  box-shadow:0 1px 1px rgba(12,17,20,.08)}
.gelembung p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13.5px;line-height:1.45}
.gelembung.dia{align-self:flex-start;background:var(--panel);border:1px solid var(--garis);border-top-left-radius:3px;color:var(--teks)}
.gelembung.saya{align-self:flex-end;background:var(--gelembung-saya);border-top-right-radius:3px;color:var(--gelembung-saya-teks)}
.gelembung .meta{display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-top:1px;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--teks-3)}
.gelembung.saya .meta{color:var(--meta-saya)}
.gelembung.gagal{outline:1px solid var(--kritis)}

.tanda{display:inline-flex;align-items:center;line-height:0}
.centang{width:16px;height:11px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.centang.dua{width:19px}
.centang.jam{width:12px;height:12px;stroke-width:1.4}
.tanda.kirim,.tanda.terima,.tanda.tunggu{color:var(--centang-abu)}
.tanda.baca{color:var(--centang-biru)}
.tanda.gagal{width:15px;height:15px;justify-content:center;border-radius:50%;background:var(--kritis);color:#fff;
  font-size:10px;font-weight:700;line-height:1}
.ulang{display:block;margin-top:4px;padding:0;background:none;border:0;color:var(--kritis);font-size:11px;
  font-weight:700;cursor:pointer;text-decoration:underline}

.chat-kosong{margin:auto;max-width:280px;padding:20px;text-align:center;color:var(--teks-3);font-size:12.5px;line-height:1.55}
.chat-kosong b{display:block;margin-bottom:4px;font-family:"Archivo",sans-serif;font-size:14px;color:var(--teks-2)}

.chat-tulis{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;flex:0 0 auto;
  border-top:1px solid var(--garis);background:var(--panel)}
.chat-tulis textarea{flex:1 1 auto;min-height:40px;max-height:132px;resize:none;padding:10px 14px;
  border:1px solid var(--garis-kuat);border-radius:20px;background:var(--panel);color:var(--teks);font-size:13.5px;line-height:1.4}
.chat-tulis textarea:focus{outline:none;border-color:var(--biru);box-shadow:0 0 0 3px rgba(43,187,215,.2)}
.chat-tulis textarea:disabled{background:var(--panel-2);cursor:not-allowed}
.chat-kirim{width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;border:0;border-radius:50%;
  background:#1B7B99;color:#fff;cursor:pointer}
.chat-kirim svg{width:18px;height:18px;margin-left:2px;fill:currentColor;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.chat-kirim:hover:not(:disabled){background:#218DAE}
.chat-kirim:disabled{opacity:.4;cursor:not-allowed}

@media (max-width:720px){
  .chat-badan{grid-template-columns:minmax(0,1fr)}
  .chat:not(.tunggal).lihat-ruang .chat-kontak{display:none}
  .chat:not(.tunggal):not(.lihat-ruang) .chat-ruang{display:none}
  .chat:not(.tunggal) .ruang-kembali{display:block}
  .bar-btn span:not(.lencana){display:none}
}
@media print{
  .chat,.layar-masuk{display:none!important}
}

/* ---------- akun utama, peran, dan peringatan sesi ---------- */
.masuk-galat.peringatan{background:var(--awas-bg);color:var(--awas);border-left-color:var(--kuning)}
.masuk-form input:disabled,.masuk-form button.pw-lihat:disabled{opacity:.55;cursor:not-allowed}
.avatar.owner{background:#0C1114;color:var(--kuning);box-shadow:inset 0 0 0 2px var(--kuning)}
.akun-daftar .nm em{font-style:normal;font-weight:600;color:var(--teks-3)}
.chip-utama{display:inline-block;margin-left:7px;padding:1px 6px;border-radius:3px;background:var(--kuning);
  color:#0C1114;font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;vertical-align:1px}
.kunci-akun{flex:0 0 auto;font-size:11px;color:var(--teks-3);white-space:nowrap}
.akun-baru{grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,.8fr)}


/* =====================================================================
   PERAN, LAPORAN OWNER, GRAFIK, POPUP PEMBAYARAN, NOTIFIKASI CHAT
   ===================================================================== */

/* Warna seri grafik — diuji kontras, pita kecerahan, dan buta warna
   (protan/deutan) terhadap permukaan kartu tema terang #FFFFFF dan
   gelap #121A1E. Seri 1 = omset / pemasukan, seri 2 = laba / pengeluaran. */
:root{
  --seri-1:#218DAE; --seri-2:#C98500;
  --grid:#E3EBEE;   --sumbu:#B4C8CE;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --seri-1:#1FA3C2; --seri-2:#C98500;
    --grid:#223137;   --sumbu:#31454C;
  }
}
:root[data-theme="dark"]{
  --seri-1:#1FA3C2; --seri-2:#C98500;
  --grid:#223137;   --sumbu:#31454C;
}

/* ---------- utilitas teks ---------- */
.kecil{font-size:11px}
.num.kecil{font-size:11.5px}
.redup{color:var(--teks-3)}
.tebal{font-weight:600}
.negatif{color:var(--kritis)!important}

/* ---------- tab lebih dari dua ---------- */
.tabs{overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{white-space:nowrap;flex:0 0 auto}

/* ---------- baris saringan (periode dsb.) ---------- */
.saringan{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:9px 14px;background:var(--panel);
  border-bottom:1px solid var(--garis);flex:0 0 auto}
.saringan>.inp{width:auto;min-width:0}
.saringan>input[type="search"]{flex:1 1 220px;max-width:340px}
.saringan-info{margin-left:auto;font-size:11px;color:var(--teks-3)}
.saringan .pill.saringan-info{color:var(--info)}
.periode{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.periode select.inp{width:auto}
.periode input.inp{width:142px;padding:6px 8px}
.periode-sd{font-size:11px;color:var(--teks-3)}

.scroller.laporan{padding:14px;display:flex;flex-direction:column;gap:14px;background:var(--ground)}
.memuat{opacity:.55;transition:opacity .15s}

/* ---------- angka utama & kartu angka ---------- */
.ringkas-atas{display:grid;grid-template-columns:minmax(250px,1fr) minmax(0,2.6fr);gap:14px}
.hero{background:var(--hitam);color:#fff;border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;
  justify-content:center;gap:4px;border-bottom:3px solid var(--kuning);box-shadow:var(--bayang)}
.hero .lbl{color:#8FA6AD}
.hero-nilai{font-family:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;font-weight:600;font-size:clamp(30px,3.4vw,48px);
  line-height:1.05;letter-spacing:-.02em;color:var(--kuning);overflow-wrap:anywhere}
.hero-sub{font-size:11.5px;color:#B7C7CC;line-height:1.5}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:1px;background:var(--garis);
  border:1px solid var(--garis);border-radius:var(--r);overflow:hidden;box-shadow:var(--bayang)}
.tiles.tiga{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
#dbKartu{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{background:var(--panel);padding:12px 14px;display:flex;flex-direction:column;gap:3px;min-width:0}
.tile-nilai{font-family:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;font-weight:600;font-size:21px;letter-spacing:-.01em;
  line-height:1.2;color:var(--teks);overflow-wrap:anywhere}
.tile-sub{font-size:11px;color:var(--teks-3);line-height:1.4}

/* ---------- susunan kartu laporan ---------- */
.grid-laporan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.grid-laporan>.lebar{grid-column:1 / -1}
.kartu>h2{flex-wrap:wrap}
.h2-sub{font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:500;font-size:11px;letter-spacing:0;text-transform:none;color:var(--teks-3)}
.h2-aksi{margin-left:auto;display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;text-transform:none;letter-spacing:0}
.h2-aksi .inp.kecil{width:auto;padding:3px 6px;font-size:11px}
.alat-tabel{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:9px 13px;border-bottom:1px solid var(--garis)}
.alat-tabel>label{font-family:"Archivo",sans-serif;font-weight:700;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--teks-3)}
.alat-tabel select.inp{width:auto}
.alat-tabel input[type="search"]{flex:1 1 220px;max-width:340px}
.alat-tabel .hint{flex:1 1 260px}
.tabel-gulir{overflow-x:auto}
.tabel-gulir>table thead th{position:static}
.kartu .kosong.kecil,.kosong.kecil{padding:24px 16px}
.rincian{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.rincian.tiga{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.rincian h3,.lap-grid h3,.lap-faktur h3{margin:0 0 6px;font-family:"Archivo",sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--teks-2)}
#tRecap th[data-kolom].urut-aktif::after{content:" ▾"}
td.urut-aktif{font-weight:700}

/* tabel ringkas di dalam kartu */
/* jendela absensi per akun (Owner) */
.box.lebar{max-width:820px}
.absen-alat{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.absen-alat .inp{width:auto;min-width:130px}
.absen-gaji{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:10px 0 6px}
.absen-gaji .f{margin:0;min-width:190px}
.absen-gaji .hint{flex:1 1 100%;margin:0}
.absen-rinci{max-height:320px;overflow-y:auto}
.absen-daftar{display:flex;flex-direction:column;gap:6px}
.absen-baris{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;
  padding:8px 10px;border:1px solid var(--garis);border-radius:6px;background:var(--panel-2)}
.absen-baris .nama{font-weight:700}
.absen-baris .rinci{font-size:11.5px;color:var(--teks-2)}
.absen-baris .angka{font-variant-numeric:tabular-nums;font-weight:700}

/* ---------- layar masuk v4: customer & staf ---------- */
.masuk-pilih{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 14px;padding:4px;border-radius:10px;background:var(--panel-2);
  border:1px solid var(--garis)}
.masuk-pilih button{padding:9px 10px;border:0;border-radius:7px;background:none;color:var(--teks-2);font:inherit;font-weight:700;
  font-size:13px;cursor:pointer}
.masuk-pilih button:hover{color:var(--teks)}
.masuk-pilih button[aria-selected="true"]{background:var(--kuning);color:#0C1114;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.layar-masuk[data-mode="staf"] .masuk-pilih button[aria-selected="true"]{background:var(--rail);color:var(--rail-teks)}
.layar-masuk[data-mode="staf"] .masuk-kartu{border-top:3px solid var(--rail)}
.masuk-langkah{margin:0 0 10px;padding:8px 10px;border-radius:8px;background:var(--info-bg);color:var(--info);font-size:12px}
.masuk-ganti{margin:10px 0 0;text-align:center;font-size:12.5px;color:var(--teks-2)}
.tautan{background:none;border:0;padding:0;margin-left:4px;color:var(--biru-tua);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline}
.tautan:hover{color:var(--biru)}
.pw-lihat{font-size:15px;line-height:1}

/* ---------- layar customer (member) ---------- */
body.mode-member{overflow:auto}
.wadah-member{min-height:100vh;background:var(--ground)}
.member-atas{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--rail);color:var(--rail-teks);flex-wrap:wrap}
.member-atas .mark{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--kuning);color:#0C1114;font-weight:800}
.member-merek b{display:block;font-size:14px}
.member-merek small{color:var(--rail-teks-2);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.member-akun{margin-left:auto;text-align:right;line-height:1.3}
.member-akun b{display:block;font-size:13px}
.member-akun small{color:var(--rail-teks-2);font-size:11px}
.member-isi{max-width:900px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:14px}
.member-kartu{padding:18px;border-radius:14px;background:linear-gradient(135deg,var(--kuning) 0%,#FCE59A 100%);color:#0C1114;
  box-shadow:0 2px 10px rgba(0,0,0,.08)}
.member-kartu .lbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5C4A10}
.member-stempel{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.member-stempel .stempel{width:26px;height:26px;border-radius:50%;border:2px solid #0C1114;opacity:.35}
.member-stempel .stempel.isi{background:#0C1114;opacity:1}
.member-angka{display:block;font-size:26px;font-variant-numeric:tabular-nums}
.member-ket{margin:4px 0 0;font-size:12.5px;color:#3A3105}
.member-hadiah{margin-top:12px;padding:10px 12px;border-radius:10px;background:rgba(12,17,20,.86);color:#fff}
.member-hadiah b{display:block;font-size:14px}
.member-hadiah span{font-size:11.5px;color:#C9D6DA}
tr.member-rinci td{padding:2px 10px 8px 14px;background:var(--panel-2)}
tr.member-rinci span{display:inline-block;margin-right:12px;font-size:11.5px;color:var(--teks-2)}

/* member pada layar kasir */
/* pemilih member di panel Bayar (antara Kembali dan Proses Pembayaran) */
.sel-member{display:flex;align-items:flex-end;gap:8px;margin:10px 0 0}
.sel-member .f.scan{flex:1;margin:0;position:relative}
.sel-member .btn.kecil{flex:0 0 auto;margin-bottom:1px}
.sel-member .sug{z-index:5}

/* layar Absensi */
#tAbsen tr.hari-ini td{background:var(--kuning-lembut);font-weight:700}
.absen-kartu-tombol{padding:12px 14px}
.absen-tombol{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.absen-tombol .btnrow{margin:0}
.absen-tombol .absen-judul{font-size:14px}
.absen-tombol .hint{margin:2px 0 0}
.absen-tombol .btn{min-width:140px}
#tAbsenAkun tbody td{padding:7px 8px}

/* rincian orderan per faktur di Jenis Laporan */
.btn-rincian{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;margin:0;cursor:pointer;
  color:var(--teks);font:inherit;font-weight:700;text-align:left}
.btn-rincian:hover{color:var(--biru)}
.btn-rincian .panah{display:inline-block;width:11px;color:var(--teks-2);transition:transform .12s ease}
.btn-rincian[aria-expanded="true"] .panah{transform:rotate(90deg);color:var(--biru)}
.btn-rincian.kecil{font-weight:400;font-size:11px;color:var(--teks-2)}
tr.baris-rincian>td{padding:0 0 0 26px;background:var(--panel-2)}
.kotak-rincian{padding:8px 10px 10px;border-left:3px solid var(--biru)}
.kotak-rincian .kepala{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11px;color:var(--teks-2);margin-bottom:6px}
.kotak-rincian .kepala b{color:var(--teks)}
.t-rincian{width:100%;font-size:11.5px;border-collapse:collapse}
.t-rincian thead th{position:static;background:transparent;color:var(--teks-2);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.03em;border-bottom:1px solid var(--garis);padding:4px 6px;text-align:left}
.t-rincian thead th.r{text-align:right}
.t-rincian thead th.c{text-align:center}
.t-rincian tbody td{padding:4px 6px;border-bottom:1px solid var(--garis)}
.t-rincian tbody tr:last-child td{border-bottom:0}
.t-rincian tfoot th{padding:4px 6px;font-size:11px;border-top:1px solid var(--garis-kuat);text-align:right}
.t-rincian tfoot th.kiri{text-align:left}
.t-ringkas{font-size:12px}
.t-ringkas thead th{position:static;background:var(--panel-2);color:var(--teks-2);border-right:0;border-bottom:1px solid var(--garis-kuat);padding:6px 8px}
.t-ringkas tbody td{padding:5px 8px}
.t-ringkas tfoot th{padding:6px 8px;text-align:left;border-top:1px solid var(--garis-kuat);font-weight:700;font-size:12px}
.t-ringkas tfoot th.r{text-align:right}

/* ---------- halaman tabel 10 / 20 / 50 ---------- */
.pager{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:8px 13px;border-top:1px solid var(--garis);
  font-size:11.5px;color:var(--teks-2);background:var(--panel)}
.pager label{display:inline-flex;gap:6px;align-items:center}
.pager select.inp{width:auto;padding:3px 6px;font-size:11.5px}
.pager-info{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.pager-nav{margin-left:auto;display:inline-flex;gap:6px;align-items:center}
.pager-nav button{width:30px;height:28px;border:1px solid var(--garis-kuat);background:var(--panel);border-radius:var(--r);
  cursor:pointer;font-size:15px;line-height:1;color:var(--teks)}
.pager-nav button:hover:not(:disabled){border-color:var(--biru);color:var(--info)}
.pager-nav button:disabled{opacity:.4;cursor:not-allowed}
.pager-ke{font-family:"IBM Plex Mono",monospace;min-width:46px;text-align:center}
#p-list .pager{flex:0 0 auto}

/* ---------- grafik ---------- */
.grafik{position:relative;min-height:60px}
.g-kanvas{position:relative;outline:none;border-radius:var(--r)}
.g-kanvas:focus-visible{box-shadow:0 0 0 2px var(--biru)}
.g-svg{display:block;overflow:visible}
.g-sumbu{fill:var(--teks-3);font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-variant-numeric:tabular-nums}
.g-label{fill:var(--teks-2);font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:11px;font-weight:600;
  paint-order:stroke;stroke:var(--panel);stroke-width:3px;stroke-linejoin:round}
.g-grid{stroke:var(--grid);stroke-width:1;shape-rendering:crispEdges}
.g-dasar{stroke:var(--sumbu);stroke-width:1;shape-rendering:crispEdges}
.g-garis{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.g-area{stroke:none;fill-opacity:.1}
.g-titik{stroke:var(--panel);stroke-width:2}
.g-silang{stroke:var(--sumbu);stroke-width:1;shape-rendering:crispEdges}
.g-tangkap,.g-latar-sorot{fill:transparent}
.g-kelompok.aktif .g-latar-sorot{fill:var(--panel-2)}
.g-kelompok.aktif .g-kolom{filter:brightness(1.1)}
.g-garis.seri-1{stroke:var(--seri-1)} .g-area.seri-1,.g-titik.seri-1,.g-kolom.seri-1{fill:var(--seri-1)}
.g-garis.seri-2{stroke:var(--seri-2)} .g-area.seri-2,.g-titik.seri-2,.g-kolom.seri-2{fill:var(--seri-2)}
.g-legenda{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:11.5px;color:var(--teks-2)}
.g-legenda li{display:inline-flex;align-items:center;gap:7px}
.g-kunci{display:inline-block;flex:0 0 auto}
.g-kunci.garis{width:14px;height:2px;border-radius:1px}
.g-kunci.kotak{width:10px;height:10px;border-radius:2px}
.g-kunci.seri-1{background:var(--seri-1)}
.g-kunci.seri-2{background:var(--seri-2)}
.g-kunci.tanpa-warna{background:transparent}
.g-tip{position:absolute;z-index:20;pointer-events:none;min-width:156px;max-width:260px;padding:8px 10px;background:var(--panel);
  color:var(--teks);border:1px solid var(--garis-kuat);border-radius:6px;box-shadow:var(--bayang);font-size:12px}
.g-tip-judul{display:block;margin-bottom:4px;font-size:11px;font-weight:600;color:var(--teks-2);overflow-wrap:anywhere}
.g-tip-baris{display:flex;align-items:center;gap:7px;line-height:1.55}
.g-tip-baris strong{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600}
.g-tip-baris span{color:var(--teks-3);font-size:11px}
.g-tip .g-kunci.garis{width:12px}

.g-hbar{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.g-hbar li{display:grid;grid-template-columns:20px minmax(90px,40%) minmax(0,1fr);gap:10px;align-items:center;padding:4px 4px;
  border-radius:var(--r);outline:none;font-size:12px}
.g-hbar li:hover,.g-hbar li:focus-visible{background:var(--panel-2)}
.g-hbar li:focus-visible{box-shadow:inset 0 0 0 2px var(--biru)}
.g-hbar-no{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--teks-3);text-align:right}
.g-hbar-nama{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-hbar-jalur{display:flex;align-items:center;gap:8px;min-width:0}
.g-hbar-isi{display:block;height:16px;min-width:2px;width:calc((100% - 5.8em) * var(--p));border-radius:0 4px 4px 0;background:var(--seri-1)}
.g-hbar-isi.seri-2{background:var(--seri-2)}
.g-hbar-nilai{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- chip status & sumber ---------- */
.metode{display:inline-block;padding:1px 7px;border-radius:3px;border:1px solid var(--garis-kuat);background:var(--panel-2);
  color:var(--teks);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.status-dana{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border-radius:99px;font-size:11px;font-weight:600;white-space:nowrap}
.status-dana::before{font-size:10px}
.status-dana.pending{background:var(--awas-bg);color:var(--awas)}
.status-dana.pending::before{content:"◷"}
.status-dana.cair{background:var(--baik-bg);color:var(--baik)}
.status-dana.cair::before{content:"✓"}
.info-kas{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;white-space:nowrap}
.info-kas i{font-style:normal;font-size:9px}
.info-kas.masuk{color:var(--baik)}
.info-kas.keluar{color:var(--kritis)}
.kategori-kas{display:inline-block;padding:1px 7px;border-radius:3px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.kategori-kas.owner{background:var(--hitam);color:var(--kuning)}
.kategori-kas.admin{background:var(--info-bg);color:var(--info)}
.sumber-kas{display:inline-block;padding:1px 7px;border-radius:99px;font-size:10.5px;font-weight:600;white-space:nowrap;
  border:1px solid var(--garis)}
.sumber-kas.ai{background:var(--awas-bg);color:var(--awas)}
.sumber-kas.manual{background:var(--panel-2);color:var(--teks-2)}
.sumber-kas.otomatis{background:var(--info-bg);color:var(--info)}
td.aksi{white-space:nowrap}
tbody tr.pick{background:var(--info-bg)}

/* ---------- dana pending ---------- */
.pending-total{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.pending-total b{font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:600;font-size:26px;letter-spacing:-.01em}
.pending-total span{font-size:11px;color:var(--teks-3)}
.pending-daftar{list-style:none;margin:0 0 12px;padding:0;border-top:1px solid var(--garis)}
.pending-daftar li{display:grid;grid-template-columns:70px 1fr auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--garis);font-size:12.5px}

/* ---------- formulir di kartu ---------- */
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:end}
.form-grid .lebar{grid-column:1 / -1}
.baris-isian td{background:var(--panel-2);padding:6px 6px;vertical-align:middle}
.baris-isian .inp{padding:5px 7px;min-width:92px}
.baris-isian #kiKeterangan{min-width:180px}
.baris-isian #kiTanggal{min-width:128px}
.baris-galat td{padding:0;border-bottom:0}
.baris-galat .form-galat{margin:4px 6px 6px}
.seg button[aria-pressed="true"]{background:var(--kuning);color:#0C1114}
.seg.kecil button{padding:3px 10px;font-size:10px}

/* ---------- AI Agent ---------- */
.agen-grid{display:grid;grid-template-columns:minmax(320px,1fr) minmax(0,1.25fr);gap:14px;align-items:start}
.agen{display:flex;flex-direction:column;min-height:0}
.agen-log{display:flex;flex-direction:column;gap:8px;padding:12px;height:clamp(300px,52vh,560px);overflow-y:auto;background:var(--panel-2)}
.agen-log>*{flex-shrink:0}
.agen-pesan{max-width:94%;padding:8px 11px;border-radius:10px;font-size:13px;line-height:1.5}
.agen-pesan p{margin:0 0 4px}
.agen-pesan p:last-child{margin-bottom:0}
.agen-pesan.saya{align-self:flex-end;background:var(--gelembung-saya);color:var(--gelembung-saya-teks);border-top-right-radius:3px;white-space:pre-wrap}
.agen-pesan.agen{align-self:flex-start;background:var(--panel);border:1px solid var(--garis);border-top-left-radius:3px}
.draf{margin-top:8px;padding:10px;border:1px solid var(--garis-kuat);border-radius:6px;background:var(--panel-2);display:flex;flex-direction:column;gap:8px}
.draf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.draf-grid .lebar{grid-column:span 2}
.draf-grid .inp{padding:5px 7px}
.draf-cek{margin:0;font-size:11px;color:var(--teks-3)}
.draf-cek.awas{color:var(--awas)}
.inp.tebakan{border-color:#E0B93A;background:var(--awas-bg);box-shadow:0 0 0 2px rgba(255,215,88,.28)}
.draf.tersimpan{background:var(--baik-bg);border-color:transparent;font-size:12px;display:block;line-height:1.6}
.draf.tersimpan>b:first-child{color:var(--baik)}
.draf.dibuang{background:none;border-style:dashed;font-size:11.5px;color:var(--teks-3);font-style:italic;display:block}
.agen-contoh{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 0;border-top:1px solid var(--garis)}
.chip-contoh{border:1px solid var(--garis-kuat);background:var(--panel);color:var(--teks-2);border-radius:99px;padding:3px 10px;
  font-size:11px;cursor:pointer}
.chip-contoh:hover{border-color:var(--kuning);color:var(--teks)}
.agen-tulis{display:flex;gap:8px;align-items:flex-end;padding:10px 12px}
.agen-tulis textarea{flex:1 1 auto;min-height:40px;max-height:140px;resize:none;padding:9px 12px;border:1px solid var(--garis-kuat);
  border-radius:8px;background:var(--panel);color:var(--teks);font-size:13.5px;line-height:1.4}
.agen-tulis textarea:focus{outline:none;border-color:var(--biru);box-shadow:0 0 0 3px rgba(43,187,215,.2)}
.agen-data{display:flex;flex-direction:column;gap:14px;min-width:0}
.rekap-angka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:10px}
.rekap-angka>div{display:flex;flex-direction:column;gap:2px;padding:8px 10px;background:var(--panel-2);border-radius:var(--r)}
.rekap-angka b{font-size:14px;font-weight:600;overflow-wrap:anywhere}

/* ---------- popup metode pembayaran & cairkan dana ---------- */
.bayar-isi{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;min-height:0}
.bayar-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 14px;background:var(--hitam);border-radius:var(--r)}
.bayar-total .lbl{color:#8FA6AD}
.bayar-total b{font-size:26px;font-weight:700;color:var(--kuning);letter-spacing:-.02em}
.bayar-metode{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px}
.bayar-metode button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 10px 9px;
  border:2px solid var(--garis-kuat);border-radius:8px;background:var(--panel);color:var(--teks);cursor:pointer;text-align:left}
.bayar-metode button:hover{border-color:var(--biru)}
.bayar-metode button[aria-checked="true"]{border-color:#E0B93A;background:var(--kuning-lembut);color:#0C1114}
.bayar-metode button[aria-checked="true"] span{color:#5C4A10}
.bayar-metode kbd{position:absolute;top:6px;right:7px;font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--teks-3)}
.bayar-metode b{font-family:"Archivo",sans-serif;font-size:15px;font-weight:800}
.bayar-metode span{font-size:10.5px;color:var(--teks-3);line-height:1.3}
.bayar-tunai{display:flex;flex-direction:column;gap:9px}
.kembali .v.kurang{color:var(--kritis)}
.lap-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;padding:14px}
.lap-faktur{padding:0 14px 14px}

/* ---------- notifikasi chat: besar, di bagian atas ---------- */
.notif-chat{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:250;width:min(660px,calc(100vw - 24px));
  display:flex;align-items:flex-start;gap:14px;padding:16px 16px 18px 18px;background:#0C1114;color:#fff;border-radius:12px;
  border:1px solid #2A383E;border-left:6px solid var(--kuning);box-shadow:0 22px 60px -18px rgba(0,0,0,.75);overflow:hidden}
.notif-chat.muncul{animation:notif-turun .3s cubic-bezier(.2,.8,.2,1)}
@keyframes notif-turun{from{transform:translate(-50%,-28px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.notif-chat .avatar{width:48px;height:48px;font-size:16px;box-shadow:0 0 0 2px var(--kuning)}
.notif-isi{flex:1 1 auto;min-width:0}
.notif-kepala{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 9px}
.notif-label{font-family:"Archivo",sans-serif;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--kuning)}
.notif-kepala b{font-family:"Archivo",sans-serif;font-size:18px;font-weight:800;letter-spacing:-.01em}
.notif-kepala small{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#8FA6AD}
.notif-kepala time{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:12px;color:#B7C7CC}
.notif-isi p{margin:6px 0 0;font-size:15.5px;line-height:1.5;color:#EAF2F4;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.notif-lain{display:block;margin-top:5px;font-size:12px;font-weight:600;color:var(--kuning)}
.notif-aksi{display:flex;align-items:center;gap:6px;flex:0 0 auto;align-self:center}
.notif-aksi .btn{padding:9px 16px;font-size:13px}
.notif-tutup{width:36px;height:36px;border:1px solid #2A383E;background:none;color:#B7C7CC;border-radius:8px;font-size:22px;line-height:1;cursor:pointer}
.notif-tutup:hover{border-color:var(--kuning);color:var(--kuning)}

/* ---------- layar sempit ---------- */
@media (max-width:1100px){
  .grid-laporan,.agen-grid{grid-template-columns:minmax(0,1fr)}
  .ringkas-atas{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  #dbKartu{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:440px){
  #dbKartu{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .saringan-info{margin-left:0;flex-basis:100%}
  .periode input.inp{width:128px}
  .bayar-metode{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lap-grid{grid-template-columns:minmax(0,1fr)}
  .draf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .rekap-angka{grid-template-columns:minmax(0,1fr)}
  .notif-chat{flex-wrap:wrap;padding:14px}
  .notif-aksi{width:100%;justify-content:flex-end}
  .scroller.laporan{padding:10px}
}
@media print{
  .notif-chat,.saringan,.pager{display:none!important}
}

/* ---------- jenis laporan ---------- */
.pilih-laporan{position:relative;display:inline-flex;flex-wrap:wrap;margin:0;padding:0;border:1px solid var(--garis-kuat);
  border-radius:var(--r);overflow:hidden;background:var(--panel)}
.pilih-laporan legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pilih-laporan label{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;cursor:pointer;font-size:12px;font-weight:600;
  color:var(--teks-2);border-right:1px solid var(--garis-kuat)}
.pilih-laporan label:last-of-type{border-right:0}
.pilih-laporan input{margin:0;accent-color:#218DAE}
.pilih-laporan label:has(input:checked){background:var(--kuning);color:#0C1114}
.pilih-laporan label:focus-within{box-shadow:inset 0 0 0 2px var(--biru)}
#tLaporan tfoot th{position:static;padding:8px 10px;text-align:left;background:var(--panel-2);color:var(--teks);
  border-top:2px solid var(--garis-kuat);font-size:12px;font-weight:700}
#tLaporan tfoot th.r{text-align:right}
#tLaporan tfoot th.c{text-align:center}
.jl-catatan{margin:10px 13px 0}
.rincian-laporan{display:flex;flex-direction:column;gap:12px}
.rincian-laporan h3{margin:0;font-family:"Archivo",sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teks-2)}
.baris-pemasukan td{font-weight:600}
#areaCetakLaporan{display:none}
@media print{
  body.cetak-laporan>*:not(#areaCetakLaporan){display:none!important}
  body.cetak-laporan #areaCetakLaporan{display:block;color:#000;font:10.5px/1.4 "IBM Plex Sans",Arial,sans-serif}
  #areaCetakLaporan .btn-rincian{color:#000;font-weight:700}
  #areaCetakLaporan .btn-rincian .panah{display:none}
  #areaCetakLaporan tr.baris-rincian>td{background:#f4f4f4;padding-left:14px}
  #areaCetakLaporan .kotak-rincian{border-left:2px solid #999;padding:5px 7px}
  #areaCetakLaporan .t-rincian{font-size:9.5px}
  #areaCetakLaporan h1{font-size:15px;margin:0 0 2px}
  #areaCetakLaporan p{margin:0 0 6px}
  #areaCetakLaporan table{width:100%;border-collapse:collapse;margin:6px 0 10px}
  #areaCetakLaporan th,#areaCetakLaporan td{position:static;border:1px solid #999;padding:3px 5px;background:none!important;color:#000!important}
  #areaCetakLaporan .tag{border:0;padding:0;background:none;font-size:inherit;text-transform:none;letter-spacing:0}
  #areaCetakLaporan .tiles{display:flex;flex-wrap:wrap;gap:6px;border:0;background:none;box-shadow:none}
  #areaCetakLaporan .tile{border:1px solid #999;padding:4px 8px}
  #areaCetakLaporan .redup{color:#444}
}

/* ---------- tombol tutup X ---------- */
.box>header .x,.chat-kepala .x{display:grid;place-items:center;width:34px;height:34px;padding:0;
  font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:22px;font-weight:400;line-height:1;border-radius:6px}

/* =====================================================================
   VERSI 2 — Laporan Grab, Master Produk, Laporan Stok, Laporan Keuangan,
   supplier & utang, cetak ulang struk, edit/hapus chat
   ===================================================================== */

/* ---------- pembelian: supplier & tempo ---------- */
.row-beli{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr);gap:10px}
.pilih-supplier{display:flex;gap:6px;align-items:center}
.pilih-supplier select{flex:1 1 auto;min-width:0}
.pilih-supplier .btn{flex:0 0 auto}
.tempo-baris{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:10px;align-items:end;margin:0 0 10px;
  padding:9px 10px;background:var(--awas-bg);border-radius:var(--r)}
.tempo-baris .hint{margin:0 0 7px;color:var(--teks-2)}
.status-beli{display:inline-block;padding:1px 8px;border-radius:99px;font-size:11px;font-weight:600;white-space:nowrap}
.status-beli.lunas{background:var(--baik-bg);color:var(--baik)}
.status-beli.utang{background:var(--awas-bg);color:var(--awas)}
.status-beli.lewat{background:var(--kritis-bg);color:var(--kritis)}
.pill.k.lewat{background:var(--kritis-bg);color:var(--kritis);border-color:rgba(180,35,42,.35)}

/* ---------- stok ---------- */
.status-stok{display:inline-block;min-width:34px;padding:1px 8px;border-radius:3px;font-size:11px;font-weight:600;
  text-align:center;white-space:nowrap}
.status-stok.aman{background:var(--baik-bg);color:var(--baik)}
.status-stok.menipis{background:var(--awas-bg);color:var(--awas)}
.status-stok.habis{background:var(--kritis-bg);color:var(--kritis)}
.status-stok.kosong{background:var(--panel-2);color:var(--teks-3);box-shadow:inset 0 0 0 1px var(--garis)}
.stok-peringatan{color:var(--kritis)}
.tile.perhatian .tile-nilai{color:var(--awas)}
.batas-stok label{font-size:11px;font-weight:600;color:var(--teks-3)}
.batas-stok .inp.kecil{width:72px}

.notif-stok{position:fixed;top:70px;right:16px;z-index:230;width:min(380px,calc(100vw - 32px));display:flex;flex-direction:column;gap:6px;
  padding:12px 14px 14px;background:var(--panel);color:var(--teks);border:1px solid var(--garis-kuat);border-left:6px solid #E0B93A;
  border-radius:10px;box-shadow:0 18px 50px -18px rgba(0,0,0,.55)}
.notif-stok.muncul{animation:notif-kanan .28s cubic-bezier(.2,.8,.2,1)}
@keyframes notif-kanan{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.ns-kepala{display:flex;align-items:center;justify-content:space-between}
.notif-stok .notif-label{color:var(--awas)}
.notif-stok .notif-tutup{width:30px;height:30px;font-size:20px;border-color:var(--garis-kuat);color:var(--teks-2)}
.ns-judul{font-family:"Archivo",sans-serif;font-size:17px;font-weight:800}
.notif-stok small{color:var(--teks-3);font-size:11.5px}
.ns-daftar{list-style:none;margin:2px 0 4px;padding:0;border-top:1px solid var(--garis)}
.ns-daftar li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:5px 0;border-bottom:1px solid var(--garis);font-size:12px}
.ns-daftar li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif-stok .btn{align-self:flex-start}
.stok-btn.ada-baru{border-color:#E0B93A;color:var(--kuning)}

/* ---------- laporan grab ---------- */
.grab-catatan{margin:0 13px 13px}

/* ---------- laporan keuangan ---------- */
.grid-keuangan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.t-keuangan{font-size:12.5px}
.t-keuangan td,.t-keuangan th{padding:5px 8px;border-bottom:1px solid var(--garis)}
.t-keuangan tbody tr:nth-child(even){background:none}
.t-keuangan tbody tr:hover{background:none;color:inherit}
.t-keuangan .k-judul th{position:static;background:var(--panel-2);color:var(--teks-2);text-align:left;border-right:0;padding-top:9px;
  font-family:"Archivo",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.t-keuangan .k-baris td:first-child{padding-left:18px;color:var(--teks-2)}
.t-keuangan .k-subtotal td{font-weight:600;border-top:1px solid var(--garis-kuat)}
.t-keuangan .k-total td{font-weight:800;font-size:13.5px;border-top:2px solid var(--teks);background:var(--info-bg)}
.ku-catatan{margin:0 0 8px;padding-left:18px;font-size:12px;line-height:1.6;color:var(--teks-2)}

/* ---------- cetak ulang struk ---------- */
.pu-judul{margin:6px 0 0;font-family:"Archivo",sans-serif;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--teks-2)}
.pu-daftar{list-style:none;margin:0;padding:0;max-height:260px;overflow-y:auto;border:1px solid var(--garis);border-radius:var(--r)}
.pu-daftar li{border-bottom:1px solid var(--garis)}
.pu-daftar li:last-child{border-bottom:0}
.pu-daftar button{display:grid;grid-template-columns:minmax(0,1.6fr) 46px 58px minmax(0,1fr);gap:8px;align-items:center;width:100%;
  padding:7px 10px;background:none;border:0;cursor:pointer;color:var(--teks);text-align:left;font-size:12px}
.pu-daftar button:hover,.pu-daftar button:focus-visible{background:var(--hover-baris);color:var(--hover-teks)}
.pu-daftar b{text-align:right}
.pu-info{padding:12px;color:var(--teks-3);font-size:12px}

/* ---------- chat: edit & hapus ---------- */
.chat-ruang{position:relative}
.gelembung{position:relative}
.gelembung .teks-dihapus{font-style:italic;color:var(--teks-3)}
.gelembung.dihapus{background:var(--panel)!important;color:var(--teks-3)!important;border:1px dashed var(--garis-kuat);box-shadow:none}
.gelembung .diedit{margin-right:4px;font-family:"IBM Plex Sans",system-ui,sans-serif;font-style:italic}
.gelembung.sedang-diedit{outline:2px solid var(--biru);outline-offset:1px}
.pesan-opsi{position:absolute;top:3px;left:-28px;width:24px;height:24px;display:grid;place-items:center;padding:0;border:1px solid var(--garis);
  border-radius:50%;background:var(--panel);color:var(--teks-2);font-size:14px;line-height:1;cursor:pointer;opacity:0;transition:opacity .12s}
.gelembung:hover .pesan-opsi,.pesan-opsi:focus-visible{opacity:1}
@media (hover:none){.pesan-opsi{opacity:.9}}
.menu-pesan{position:absolute;z-index:20;min-width:176px;display:flex;flex-direction:column;padding:4px;background:var(--panel);
  border:1px solid var(--garis-kuat);border-radius:8px;box-shadow:var(--bayang)}
.menu-pesan button{padding:8px 10px;border:0;border-radius:5px;background:none;text-align:left;font-size:12.5px;font-weight:600;color:var(--teks);cursor:pointer}
.menu-pesan button:hover,.menu-pesan button:focus-visible{background:var(--panel-2)}
.menu-pesan .bahaya{color:var(--kritis)}
.chat-edit{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 12px;flex:0 0 auto;
  background:var(--info-bg);border-top:1px solid var(--garis);font-size:12px;color:var(--teks-2)}

/* ---------- cetak laporan (PDF) ---------- */
@media print{
  #areaCetakLaporan .c-tebal td{font-weight:700}
  #areaCetakLaporan .pisah-cetak{page-break-after:always;height:0}
  #areaCetakLaporan .kaki-cetak{margin-top:10px;font-size:9px;color:#555}
  #areaCetakLaporan td.r,#areaCetakLaporan th.r{text-align:right}
}

/* ---------- layar sempit ---------- */
@media (max-width:1280px){ .grid-keuangan{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media (max-width:1100px){ #dbKartu{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:1040px){
  .row-beli,.tempo-baris{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){ .grid-keuangan{grid-template-columns:minmax(0,1fr)} }
@media (max-width:440px){ #dbKartu{grid-template-columns:minmax(0,1fr)} }

/* ---------- v2.1: promo, produk nonaktif, mutasi barang ---------- */
.tag.promo{background:var(--kuning);color:var(--hitam);font-weight:700}
.tag.promo.mati{background:var(--garis);color:var(--teks-2);font-weight:600}
.tag.mati{background:var(--garis);color:var(--teks-2)}
tr.baris-mati>td{opacity:.55}
tr.baris-mati>td:first-child{border-left:3px solid var(--garis)}
.aksi-produk{white-space:nowrap;display:flex;gap:4px;justify-content:center;flex-wrap:wrap}
.btn.bahaya{border-color:#C0392B;color:#C0392B}
.btn.bahaya:hover{background:#C0392B;color:#fff}
.harga-promo{color:#B36B00}

.pilih-hasil{display:flex;flex-direction:column;gap:2px;margin:-4px 0 8px}
.pilih-hasil .pilih-produk{text-align:left;background:var(--kartu);border:1px solid var(--garis);border-radius:8px;
  padding:6px 9px;font-size:12px;cursor:pointer}
.pilih-hasil .pilih-produk:hover{border-color:var(--biru);background:var(--ground)}
.promo-produk{margin:0 0 10px;padding:8px 10px;border-radius:8px;background:var(--ground);border:1px solid var(--garis);
  font-size:12px;font-weight:600}
.hari-promo{display:flex;flex-wrap:wrap;gap:6px}
.hari-promo .cek{flex:0 0 auto}
.cek{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:5px 9px;border:1px solid var(--garis);
  border-radius:999px;cursor:pointer;background:var(--kartu)}
.cek input{margin:0}
.cek:has(input:checked){border-color:var(--biru);background:rgba(43,187,215,.12);font-weight:700}
.cek.besar{border:0;background:none;padding:0;cursor:default}
.promo-judul{margin:14px 0 6px;font-family:"Archivo",sans-serif;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--teks-2)}
.promo-daftar{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;max-height:190px;overflow:auto}
.promo-daftar li{display:flex;align-items:center;gap:8px;border:1px solid var(--garis);border-radius:8px;padding:5px 8px}
.promo-daftar li.terpilih{border-color:var(--biru);background:rgba(43,187,215,.08)}
.promo-daftar li>button:first-child{flex:1 1 auto;text-align:left;background:none;border:0;cursor:pointer;font:inherit;
  display:flex;flex-direction:column;gap:1px}
.promo-daftar li span{font-size:11px;color:var(--teks-2)}
.promo-daftar li.redup{color:var(--teks-2);font-size:12px;justify-content:center}

.mutasi-tanda{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em}
.mutasi-tanda.masuk{background:rgba(33,141,174,.14);color:var(--biru-dalam)}
.mutasi-tanda.keluar{background:rgba(192,57,43,.12);color:#C0392B}
tr.mutasi-awal>td{border-top:1px solid var(--garis)}

@media (max-width:820px){
  .aksi-produk{flex-direction:column}
  .hari-promo{gap:4px}
}


/* ---------- cetak struk kasir: kertas 80 mm, tanpa isi layar lain ---------- */
#areaCetakStruk{display:none}
@media print{
  body.cetak-struk{background:#fff}
  body.cetak-struk #wadahAplikasi,body.cetak-struk .layar-masuk,body.cetak-struk .chat,
  body.cetak-struk .toast,body.cetak-struk #areaCetakLaporan{display:none!important}
  body.cetak-struk #areaCetakStruk{display:block!important}
  /* 68 mm di tengah kertas 80 mm: sisa ~6 mm kiri-kanan supaya tidak terpotong printer */
  body.cetak-struk .struk{width:68mm;max-width:68mm;margin:0 auto;padding:1.5mm 2mm 4mm;color:#000;
    font-size:9.6px;line-height:1.3;box-shadow:none}
  body.cetak-struk .struk h3{font-size:12.5px;letter-spacing:.05em}
  body.cetak-struk .struk .ctr{font-size:8.4px;line-height:1.3;color:#000}
  body.cetak-struk .struk hr{margin:1.3mm 0;border-top:1px dashed #000}
  body.cetak-struk .struk .l{gap:3px}
  body.cetak-struk .struk .item{margin-bottom:.9mm}
  body.cetak-struk .struk .item .nm{font-size:9.1px;line-height:1.25}
  body.cetak-struk .struk .big{font-size:11.5px}
}

/* ---------- v2.3: edit cashflow & baris laporan yang dihapus Owner ---------- */
.aksi-kas{white-space:nowrap;display:flex;gap:5px;align-items:center;justify-content:center}
.baris-isian tr.sedang-edit>td{background:rgba(43,187,215,.10)}
.baris-isian tr.sedang-edit>td:first-child{box-shadow:inset 3px 0 0 var(--biru)}
tr.baris-dihapus>td{opacity:.6}
tr.baris-dihapus>td:first-child{box-shadow:inset 3px 0 0 #C0392B}
.tanda-dihapus{display:inline-block;margin-top:2px;padding:1px 6px;border-radius:999px;background:rgba(192,57,43,.12);
  color:#C0392B;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.jl-sembunyi{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--teks-2);white-space:nowrap}