/* Admin & POS — shares tokens from app.css */
.adm{display:grid;grid-template-columns:1fr;min-height:100vh}
@media(min-width:900px){.adm{grid-template-columns:232px 1fr}}

.side{background:var(--brown-900);color:#D9CDBE;padding:14px 12px;display:none;flex-direction:column;gap:3px}
@media(min-width:900px){.side{display:flex;position:sticky;top:0;height:100vh;overflow-y:auto}}
.side .logo{display:flex;align-items:center;gap:9px;padding:6px 8px 16px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:10px}
.side .logo img{width:34px;height:34px;border-radius:50%}
.side .logo b{color:#fff;font-size:.9rem;line-height:1.2}
.side .logo span{display:block;font-size:.68rem;color:var(--green-400)}
.side a{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:9px;
  color:#CFC2B2;font-size:.87rem;font-weight:600}
.side a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.side a.on{background:var(--green-600);color:#fff}
.side .grp{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:#8C7E6E;padding:14px 11px 5px;font-weight:800}
.side form{margin-top:auto;padding-top:12px}

.adm-main{background:var(--bg);min-width:0;display:flex;flex-direction:column}
.adm-top{background:var(--paper);border-bottom:1px solid var(--ink-200);padding:11px 16px;
  display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:20}
.adm-top h1{margin:0;font-size:1.06rem}
.adm-top .who{margin-inline-start:auto;font-size:.8rem;color:var(--ink-500);text-align:end;line-height:1.3}
.adm-top .who b{color:var(--ink-900);display:block}
.adm-body{padding:16px;flex:1}
@media(min-width:900px){.adm-body{padding:22px}}

/* mobile admin nav */
.adm-nav{display:flex;gap:5px;overflow-x:auto;padding:9px 12px;background:var(--brown-900);scrollbar-width:none}
.adm-nav::-webkit-scrollbar{display:none}
.adm-nav a{flex:0 0 auto;padding:7px 13px;border-radius:999px;color:#CFC2B2;font-size:.82rem;font-weight:600;
  background:rgba(255,255,255,.08)}
.adm-nav a.on{background:var(--green-600);color:#fff}
.adm-nav a:hover{text-decoration:none;color:#fff}
@media(min-width:900px){.adm-nav{display:none}}

.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
@media(min-width:760px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--paper);border:1px solid var(--ink-200);border-radius:var(--radius);padding:15px}
.kpi .l{font-size:.73rem;color:var(--ink-500);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.kpi .v{font-size:1.32rem;font-weight:800;color:var(--brown-700);margin-top:5px;line-height:1.2}
.kpi .s{font-size:.74rem;color:var(--ink-400);margin-top:3px}
.kpi.warn .v{color:var(--warn)}
.kpi.ok .v{color:var(--ok)}

.tbl-wrap{overflow-x:auto;background:var(--paper);border:1px solid var(--ink-200);border-radius:var(--radius)}
table.tbl{width:100%;border-collapse:collapse;font-size:.85rem;min-width:600px}
table.tbl th{background:var(--brown-50);color:var(--ink-700);font-weight:700;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.03em;padding:10px 12px;text-align:start;
  border-bottom:1px solid var(--ink-200);white-space:nowrap;position:sticky;top:0}
table.tbl td{padding:10px 12px;border-bottom:1px solid var(--ink-100);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:var(--green-50)}
.num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------------------------------------------------------- POS */
.pos{display:grid;grid-template-columns:1fr;gap:13px;height:calc(100vh - 118px)}
@media(min-width:1000px){.pos{grid-template-columns:minmax(0,1fr) 370px}}
.pos-left{display:flex;flex-direction:column;min-height:0;gap:10px}
.pos-cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.pos-cats::-webkit-scrollbar{display:none}
.pos-cats a{flex:0 0 auto;padding:6px 12px;border-radius:999px;background:var(--paper);
  border:1px solid var(--ink-200);font-size:.8rem;font-weight:600;white-space:nowrap;color:var(--ink-700)}
.pos-cats a.on{background:var(--green-600);border-color:var(--green-600);color:#fff}
.pos-cats a:hover{text-decoration:none}
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:9px;
  overflow-y:auto;padding:2px 2px 10px;align-content:start;flex:1;min-height:0}
.pos-tile{background:var(--paper);border:1px solid var(--ink-200);border-radius:11px;padding:9px;
  cursor:pointer;text-align:start;display:flex;flex-direction:column;gap:3px;transition:.12s;min-height:96px}
.pos-tile:hover{border-color:var(--green-500);box-shadow:var(--shadow-2)}
.pos-tile:active{transform:scale(.97)}
.pos-tile .n{font-size:.79rem;font-weight:700;line-height:1.28;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pos-tile .v{font-size:.68rem;color:var(--ink-400)}
.pos-tile .p{font-size:.86rem;font-weight:800;color:var(--brown-700);margin-top:auto}
.pos-tile .st{font-size:.66rem;color:var(--ink-400)}
.pos-tile .im{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:var(--ink-100,#f0ece6);margin-bottom:6px}
.pos-tile.out{opacity:.5}
.pos-tile.out .st{color:var(--danger);font-weight:700}

.pos-cart{background:var(--paper);border:1px solid var(--ink-200);border-radius:var(--radius);
  display:flex;flex-direction:column;min-height:340px;max-height:calc(100vh - 130px)}
.pos-cart h3{margin:0;padding:13px 15px;border-bottom:1px solid var(--ink-200);font-size:.95rem}
.pos-lines{flex:1;overflow-y:auto;padding:6px 10px;min-height:120px}
.pos-line{display:grid;grid-template-columns:1fr auto;gap:5px;padding:9px 5px;border-bottom:1px solid var(--ink-100)}
.pos-line .nm{font-size:.83rem;font-weight:600;line-height:1.3}
.pos-line .mt{font-size:.71rem;color:var(--ink-400)}
.pos-line .rt{display:flex;align-items:center;gap:7px}
.pos-line .amt{font-weight:700;font-size:.85rem;min-width:78px;text-align:end;white-space:nowrap}
.pos-q{display:inline-flex;align-items:center;border:1px solid var(--ink-200);border-radius:7px;overflow:hidden}
.pos-q button{width:28px;height:28px;border:0;background:var(--bg);cursor:pointer;font-weight:800;color:var(--ink-700)}
.pos-q button:hover{background:var(--ink-100)}
.pos-q span{min-width:30px;text-align:center;font-weight:700;font-size:.82rem}
.pos-foot{border-top:1px solid var(--ink-200);padding:13px 15px;background:var(--brown-50);
  border-radius:0 0 var(--radius) var(--radius)}
.pos-total{display:flex;justify-content:space-between;font-size:1.22rem;font-weight:800;color:var(--brown-700);margin-bottom:11px}

/* receipt */
.receipt{max-width:340px;margin:22px auto;background:#fff;padding:20px;border:1px dashed var(--ink-300);
  font-family:"Courier New",monospace;font-size:12px;line-height:1.55;color:#000}
.receipt h2{text-align:center;font-size:14px;margin:0 0 3px}
.receipt .ctr{text-align:center}
.receipt hr{border:0;border-top:1px dashed #999;margin:9px 0}
.receipt table{width:100%;border-collapse:collapse}
.receipt td{padding:2px 0;vertical-align:top}
.receipt .r{text-align:right}
@media print{
  body{background:#fff}
  .noprint{display:none !important}
  .receipt{border:0;margin:0;max-width:100%}
}

/* login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:linear-gradient(135deg,var(--brown-800),var(--green-700))}
.login-card{background:var(--paper);border-radius:var(--radius-lg);padding:30px 26px;
  width:100%;max-width:394px;box-shadow:var(--shadow-3)}
.login-card .lg{text-align:center;margin-bottom:18px}
.login-card .lg img{width:64px;height:64px;margin:0 auto 9px;border-radius:50%}
.login-card h1{font-size:1.14rem;text-align:center;margin-bottom:3px}
.login-card .sub{text-align:center;color:var(--ink-500);font-size:.82rem;margin-bottom:20px}
.demo-creds{background:var(--gold-100);border:1px dashed #DCC48A;border-radius:9px;
  padding:11px 13px;font-size:.78rem;margin-top:16px;color:#6B4E10;line-height:1.7}
.demo-creds code{background:rgba(0,0,0,.06);padding:1px 5px;border-radius:4px;font-size:.92em}

/* POS line: keep long product names from covering the quantity controls */
.pos-line > div:first-child{min-width:0;overflow:hidden}
.pos-line .nm,.pos-line .mt{overflow:hidden;text-overflow:ellipsis}
.pos-line .mt{white-space:nowrap}
.pos-line .rt{position:relative;z-index:1;flex-shrink:0}
@media (pointer: coarse){ .pos-q button{width:36px;height:36px} }

/* Mobile POS layout fix (found by device testing):
   grid/flex children must be allowed to shrink, otherwise the product grid
   forces the register off-screen horizontally. */
.pos-left, .pos-cart{min-width:0}
.adm-main, .adm-body{min-width:0;max-width:100%}
.pos{min-width:0}
@media (max-width:999px){
  .pos{height:auto;grid-template-columns:minmax(0,1fr)}
  .pos-grid{max-height:52vh}
  .pos-cart{max-height:none}
}

/* ============================================================
   MOBILE VERSION — admin & POS on phones (≤720px)
   ============================================================ */
.pos-fab{display:none}
.pos-tile.added{border-color:var(--green-600);background:var(--green-50)}
@media (max-width:720px){
  input,select,textarea,.input{font-size:16px !important}
  .adm-top{padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));
    padding-top:calc(10px + env(safe-area-inset-top,0px))}
  .adm-top h1{font-size:1.08rem}
  .adm-top .who{font-size:.82rem}
  .adm-nav{position:sticky;top:0;z-index:19;padding:8px 12px}
  .adm-nav a{font-size:.88rem;padding:10px 15px}
  .adm-body{padding:12px 12px calc(20px + env(safe-area-inset-bottom,0px))}
  .kpi .l{font-size:.76rem}
  .kpi .s{font-size:.78rem}
  table.tbl{font-size:.9rem}
  table.tbl th{font-size:.76rem}

  /* POS: products fill the screen; the running total floats at the bottom */
  .pos{gap:12px}
  .pos-grid{max-height:none !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pos-tile{min-height:104px;padding:11px}
  .pos-tile .n{font-size:.88rem}
  .pos-tile .v,.pos-tile .st{font-size:.76rem}
  .pos-tile .p{font-size:.95rem}
  .pos-line .nm{font-size:.9rem}
  .pos-line .mt{font-size:.78rem}
  .pos-q button{width:40px !important;height:40px !important;font-size:1.05rem}
  .pos-q span{min-width:34px;font-size:.95rem}
  .pos-cart{scroll-margin-top:60px}
  .pos-foot .btn{min-height:52px;font-size:1rem}
  .pos-fab{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;
    display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;
    background:var(--green-700);color:#fff;box-shadow:var(--shadow-3);
    transform:translateY(140%);transition:transform .2s ease}
  .pos-fab.on{transform:none}
  .pos-fab:hover{text-decoration:none;color:#fff}
  .pos-fab .pf-l{display:flex;align-items:center;gap:6px;font-size:.95rem}
  .pos-fab b{font-size:1.02rem}
  .pos-fab .pf-go{margin-inline-start:auto;font-weight:800;background:rgba(255,255,255,.16);
    padding:6px 12px;border-radius:9px}
  .pos-left{padding-bottom:80px}

  .login-card{padding:26px 20px}
}

@media (max-width:720px){
  .pos-fab.away{transform:translateY(140%)}
  .pos-line{grid-template-columns:1fr}
  .pos-line .rt{justify-content:flex-end}
}

/* ---------------------------------------------------------- shifts */
.shift-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--paper);border:1px solid var(--ink-200);
  border-radius:var(--radius);padding:9px 12px;margin-bottom:12px;font-size:.9rem}
.shift-bar .btn{margin-inline-start:auto}
.shift-bar .dot{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--ok-bg);flex-shrink:0}
.shift-bar .dot.off{background:var(--ink-300);box-shadow:0 0 0 4px var(--ink-100)}
.shift-gate{max-width:440px;margin:24px auto;text-align:center}
.shift-gate .sg-ico{width:64px;height:64px;border-radius:50%;background:var(--green-50);color:var(--green-700);display:grid;place-items:center;margin:0 auto 12px}
.shift-gate .sg-form{text-align:start;margin-top:14px}
.shift-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.shift-actions{display:flex;gap:8px;flex-wrap:wrap}
.shift-grid{display:grid;gap:14px;margin-top:14px}
@media(min-width:900px){.shift-grid{grid-template-columns:1fr 1fr;align-items:start}}
.cash-form{display:grid;gap:8px;margin-bottom:10px}
.seg{display:flex;border:1.5px solid var(--ink-200);border-radius:var(--radius-sm);overflow:hidden}
.seg label{flex:1;cursor:pointer}
.seg input{position:absolute;opacity:0}
.seg span{display:block;text-align:center;padding:10px;font-weight:700;font-size:.88rem}
.seg input:checked + span{background:var(--green-600);color:#fff}
/* v13.1 — the segmented control was easy to mistake for plain text: give it a divider, a keyboard focus ring
   and, where the choice is money in vs money out, the same colours the amounts use in the table below. */
.seg label + label{border-inline-start:1.5px solid var(--ink-200)}
.seg input:focus-visible + span{outline:2px solid var(--green-700,#2f6b3a);outline-offset:-3px}
.seg-money span{padding:12px 10px}
.seg-money input[value="out"]:checked + span{background:var(--danger);color:#fff}
.seg-money input[value="in"]:checked + span{background:var(--green-600);color:#fff}
.denoms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px}
.denoms label{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.88rem}
.denoms label span{min-width:64px;text-align:end}
.denoms .input{min-height:40px;padding:7px 9px}
.quick-cash{display:flex;gap:6px;margin-top:6px}
.quick-cash .btn{flex:1;padding:6px 8px;min-height:36px}
.settings-grid{display:grid;gap:18px}
@media(min-width:980px){.settings-grid{grid-template-columns:minmax(0,1fr) 420px;align-items:start}}
.settings-grid .paper{max-width:100%}
.pair-card{margin-bottom:16px;border:2px solid var(--green-500)}
.pair-code{font:800 2.2rem/1.2 ui-monospace,Consolas,monospace;letter-spacing:.12em;color:var(--brown-700);margin:8px 0 10px}

/* ===================== inventory module (supplier, pembelian, stok, opname, keuangan, label) ===================== */
.inv-grid{display:grid;gap:0 16px;grid-template-columns:1fr}
@media (min-width:760px){.inv-grid{grid-template-columns:1fr 1fr}.inv-grid .span2{grid-column:1 / -1}.inv-grid.c3{grid-template-columns:1fr 1fr 1fr}}
.inv-stack{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.inv-stack>*{min-width:0}
.inv-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.inv-actions .grow{flex:1}
.inv-card h3{margin:0 0 12px;font-size:1rem}
.inv-meta{display:grid;gap:6px 18px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));font-size:.86rem}
.inv-meta div span{display:block;color:var(--ink-500);font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.inv-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.inv-chips a{padding:5px 12px;border-radius:999px;border:1px solid var(--ink-200);background:var(--paper);font-size:.82rem;font-weight:600;color:var(--ink-700);text-decoration:none}
.inv-chips a.on{background:var(--brown-800);border-color:var(--brown-800);color:#fff}
.inv-chips a b{font-weight:700;opacity:.7;margin-inline-start:3px}
.chip-info{background:var(--info-bg);color:var(--info)}
.chip-bad{background:var(--danger-bg);color:var(--danger)}
.inv-filter{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.inv-filter .input{min-height:38px;padding:6px 10px;width:auto;max-width:100%}
.inv-filter label{display:flex;flex-direction:column;font-size:.74rem;font-weight:600;color:var(--ink-500);gap:3px}
.inv-filter label.chk{flex-direction:row;align-items:center;gap:6px;font-size:.84rem;color:var(--ink-700);min-height:38px}
.inv-in{min-height:36px !important;padding:5px 8px !important}
.inv-in.num{text-align:end}
input.inv-qty{width:84px}
input.inv-money{width:120px}
.inv-pos{color:var(--ok);font-weight:700}
.inv-neg{color:var(--danger);font-weight:700}
.inv-totals{margin-inline-start:auto;min-width:260px;max-width:360px;font-size:.9rem}
.inv-totals div{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.inv-totals .grand{border-top:1px solid var(--ink-200);margin-top:4px;padding-top:8px;font-weight:800;font-size:1rem}
.inv-totals .input{width:130px;min-height:34px;padding:4px 8px;text-align:end}
/* variant picker */
.vpick{position:relative;margin-bottom:12px}
.vpick .input{padding-inline-start:38px}
.vpick > svg{position:absolute;inset-inline-start:11px;top:12px;color:var(--ink-400);pointer-events:none}
.vpick-list{position:absolute;z-index:30;inset-inline:0;top:calc(100% + 4px);background:var(--paper);border:1px solid var(--ink-200);border-radius:var(--radius-sm);box-shadow:var(--shadow-3);max-height:340px;overflow:auto;display:none}
.vpick-list.open{display:block}
.vpick-list button{display:flex;width:100%;gap:10px;justify-content:space-between;align-items:center;text-align:start;border:0;background:none;padding:9px 12px;border-bottom:1px solid var(--ink-100);cursor:pointer;font:inherit;font-size:.86rem}
.vpick-list button:hover,.vpick-list button.hl{background:var(--green-50)}
.vpick-list .sub{display:block;color:var(--ink-500);font-size:.76rem}
.vpick-list .empty{padding:12px;color:var(--ink-500);font-size:.85rem}
/* opname */
.opn-bar{position:sticky;top:0;z-index:20;background:var(--bg);padding:10px 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.opn-bar .scan{flex:1 1 260px;font-size:1rem;font-weight:600}
.opn-stat{font-size:.84rem;color:var(--ink-700)}
.opn-stat b{font-size:.95rem}
tr.opn-hit{outline:3px solid var(--gold-500);outline-offset:-3px}
tr.opn-done td:first-child{box-shadow:inset 4px 0 0 var(--green-500)}
tr.opn-diff td:first-child{box-shadow:inset 4px 0 0 var(--warn)}
.opn-save{font-size:.78rem;color:var(--ink-500);min-width:90px}
/* product photos */
.ph-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.ph-item{border:1px solid var(--ink-200);border-radius:var(--radius-sm);overflow:hidden;background:var(--paper);display:flex;flex-direction:column}
.ph-item img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--ink-100)}
.ph-item.prim{border:2px solid var(--green-600)}
.ph-item .ph-act{display:flex;gap:4px;flex-wrap:wrap;padding:6px}
.ph-item .ph-act form{display:inline}
.ph-item .ph-act .btn{padding:4px 8px;min-height:30px;font-size:.74rem}
.ph-item .ph-swap{display:flex;flex-direction:column;gap:4px;width:100%;border-top:1px dashed var(--ink-200);padding-top:6px;margin-top:2px}
.ph-item .ph-swap .input{padding:3px;font-size:.7rem}
.ph-var{margin-top:16px;border-top:1px solid var(--ink-200);padding-top:12px}
.ph-var h4{margin:0 0 4px}
/* print (A4 documents) */
.doc-a4{max-width:210mm;margin:0 auto;background:#fff;padding:14mm 12mm;color:#111;font-size:12px}
.doc-a4 h1{font-size:18px;margin:0 0 2px}
.doc-a4 table{width:100%;border-collapse:collapse;margin-top:10px}
.doc-a4 th,.doc-a4 td{border:1px solid #bbb;padding:5px 6px;text-align:start;vertical-align:top}
.doc-a4 th{background:#f2f2f2;font-size:11px}
.doc-a4 .num{text-align:end}
.doc-a4 .hd{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid #333;padding-bottom:8px;margin-bottom:10px}
.doc-a4 .meta{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px;margin-top:8px}
.doc-a4 .tot{margin-inline-start:auto;width:260px;margin-top:10px}
.doc-a4 .tot div{display:flex;justify-content:space-between;padding:2px 0}
.doc-a4 .sign{display:flex;justify-content:space-between;margin-top:40px;text-align:center}
.doc-a4 .sign div{width:40%;border-top:1px solid #333;padding-top:4px}
.printbar-a4{max-width:210mm;margin:12px auto;display:flex;gap:8px;padding:0 12px}
@media print{
  .printbar-a4,.noprint{display:none !important}
  body.print-a4{background:#fff}
  .doc-a4{padding:0;max-width:none}
}
/* ===================== end inventory module ===================== */

/* ---------------------------------------------------------- CRM: pelanggan, member & poin, promo, e-struk */
.crm-filter select.input{width:auto;min-height:44px;padding-block:8px}
.tier-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:.74rem;font-weight:700;
  color:var(--tc,#8A8F98);background:color-mix(in srgb,var(--tc,#8A8F98) 14%,#fff);border:1px solid color-mix(in srgb,var(--tc,#8A8F98) 35%,#fff)}
.tier-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tc,#8A8F98)}
.crm-grid2{display:grid;gap:0 14px;grid-template-columns:1fr}
@media(min-width:640px){.crm-grid2{grid-template-columns:1fr 1fr}}
.crm-form{max-width:760px}
.crm-seg span{padding:8px 6px;font-size:.84rem}
.crm-dup{margin-top:5px;color:var(--warn);font-weight:600}
.crm-detail{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:980px){.crm-detail{grid-template-columns:minmax(0,380px) minmax(0,1fr);align-items:start}}
.crm-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.crm-head h2{margin:0;font-size:1.15rem}
.crm-avatar{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.3rem;flex-shrink:0;
  color:#fff;background:var(--tc,#8A8F98)}
.crm-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:.88rem}
.crm-dl dt{color:var(--ink-500);font-weight:600}
.crm-dl dd{margin:0;overflow-wrap:anywhere}
.crm-side{display:grid;gap:14px}
.crm-kpis2{grid-template-columns:repeat(2,1fr)}
.crm-v-sm{font-size:1.1rem !important}
.crm-adjust h3{margin:0 0 10px}
.crm-adjust-row{display:grid;gap:8px;grid-template-columns:110px 1fr}
.crm-adjust-row .btn{grid-column:1/-1}
@media(min-width:640px){.crm-adjust-row{grid-template-columns:110px 1fr auto}.crm-adjust-row .btn{grid-column:auto}}
.crm-settings{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1440px){.crm-settings{grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:start}}
.crm-tiers .input{min-height:36px;padding:5px 8px;min-width:90px}
.crm-tiers td.num .input{text-align:end;max-width:130px}
.crm-tiers input[type=color]{width:38px;height:32px;border:1px solid var(--ink-200);border-radius:6px;padding:1px;background:#fff}
.crm-newrow td{background:var(--brown-50)}
/* member card (85.6 × 54 mm) */
.mcard-page{padding:12px 16px}
.mcard{width:85.6mm;height:54mm;margin:18px auto;border-radius:3.2mm;box-sizing:border-box;padding:4mm 4.5mm;display:flex;flex-direction:column;
  background:linear-gradient(135deg,var(--brown-900),var(--tc,#643409));color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.2);
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.mcard-top{display:flex;align-items:center;gap:2.5mm}
.mcard-top img{width:8mm;height:8mm;border-radius:50%;background:#fff}
.mcard-top b{display:block;font-size:2.9mm;line-height:1.2}
.mcard-top span{font-size:2.3mm;opacity:.8}
.mcard-top em{margin-inline-start:auto;font-style:normal;font-weight:800;font-size:2.6mm;border:.3mm solid rgba(255,255,255,.7);border-radius:99px;padding:.4mm 2mm;text-transform:uppercase;letter-spacing:.05em}
.mcard-name{margin-top:auto;font-weight:800;font-size:4mm;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcard-no{font:600 2.8mm/1.3 ui-monospace,Consolas,monospace;letter-spacing:.08em;opacity:.9;margin-bottom:1.2mm}
.mcard-bc{background:#fff;border-radius:1.5mm;padding:.8mm 1mm;display:flex;justify-content:center}
.mcard-bc svg{height:12mm;width:auto;max-width:100%}
@media print{.mcard{margin:0;box-shadow:none}.mcard-page{padding:0}}
/* promo */
.promo-grid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1000px){.promo-grid{grid-template-columns:1fr 1fr;align-items:start}}
.promo-form .seg span{padding:9px 6px;font-size:.84rem}
.promo-codeinput{text-transform:uppercase;font-family:ui-monospace,Consolas,monospace;letter-spacing:.06em}
.promo-code{font-family:ui-monospace,Consolas,monospace;background:var(--gold-100);color:var(--brown-700);padding:1px 6px;border-radius:5px;font-weight:700}
.promo-checks{display:flex;flex-wrap:wrap;gap:6px 14px;max-height:220px;overflow:auto;padding:8px 10px;border:1.5px solid var(--ink-200);border-radius:var(--radius-sm)}
.promo-checks label{display:flex;align-items:center;gap:6px;font-size:.86rem;font-weight:500;margin:0}
.promo-days{display:flex;flex-wrap:wrap;gap:6px}
.promo-days label{cursor:pointer;margin:0}
.promo-days input{position:absolute;opacity:0}
.promo-days span{display:block;min-width:46px;text-align:center;padding:8px 6px;border:1.5px solid var(--ink-200);border-radius:var(--radius-sm);font-weight:700;font-size:.84rem}
.promo-days input:checked + span{background:var(--green-600);border-color:var(--green-600);color:#fff}
.promo-days input:focus-visible + span{outline:2px solid var(--green-500)}
.promo-picker{position:relative}
.promo-results{position:absolute;z-index:30;left:0;right:0;top:100%;margin-top:4px;background:var(--paper);border:1px solid var(--ink-200);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-3);max-height:300px;overflow:auto}
.promo-results button{display:block;width:100%;text-align:start;padding:9px 12px;border:0;border-bottom:1px solid var(--ink-100);background:none;cursor:pointer;font:inherit}
.promo-results button:hover{background:var(--green-50)}
.promo-results button.on{opacity:.55}
.promo-results button b{display:block;font-size:.88rem}
.promo-results button span{font-size:.76rem;color:var(--ink-500)}
.promo-selected{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.promo-pill{display:inline-flex;align-items:center;gap:6px;background:var(--green-50);border:1px solid var(--green-400);color:var(--green-700);
  border-radius:999px;padding:3px 4px 3px 11px;font-size:.82rem;font-weight:600}
.promo-pill button{border:0;background:var(--green-100);color:var(--green-700);border-radius:50%;width:22px;height:22px;cursor:pointer;line-height:1;font-size:1rem}
.promo-summary{margin-top:14px}
/* public e-receipt */
body.print-page:has(.er){background:var(--bg)}
.er{padding:16px 12px 40px;max-width:440px;margin:0 auto;font-size:.92rem;color:var(--ink-900)}
.er-card{background:var(--paper);border:1px solid var(--ink-200);border-radius:var(--radius);box-shadow:var(--shadow-2);padding:20px 18px;position:relative;overflow:hidden}
.er-card::after{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--brown-700),var(--green-600),var(--gold-500))}
.er-empty{text-align:center}
.er-empty h1{font-size:1.1rem}
.er-head{text-align:center;border-bottom:1px dashed var(--ink-300);padding-bottom:12px}
.er-head img{border-radius:50%}
.er-head h1{font-size:1.05rem;margin:6px 0 4px;color:var(--brown-700)}
.er-head p{margin:0;font-size:.8rem;color:var(--ink-500)}
.er-banner{margin:12px 0 0;text-align:center;font-weight:800;color:var(--danger);background:var(--danger-bg);border-radius:var(--radius-sm);padding:8px;letter-spacing:.05em}
.er-void .er-items,.er-void .er-tot{opacity:.6}
.er-meta,.er-tot{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin:12px 0}
.er-meta dt,.er-tot dt{color:var(--ink-500)}
.er-meta dd,.er-tot dd{margin:0;text-align:end;font-variant-numeric:tabular-nums}
.er-items{list-style:none;margin:0;padding:10px 0;border-block:1px dashed var(--ink-300)}
.er-items li{padding:6px 0}
.er-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.er-row b{font-variant-numeric:tabular-nums;white-space:nowrap}
.er-name small{color:var(--ink-500)}
.er-sub{font-size:.8rem;color:var(--ink-500)}
.er-tot code{font-size:.75rem;background:var(--gold-100);padding:0 4px;border-radius:4px}
.er-tot .er-grand{font-size:1.1rem;font-weight:800;color:var(--ink-900);border-top:1px solid var(--ink-200);padding-top:6px}
.er-box{background:var(--brown-50);border-radius:var(--radius-sm);padding:10px 12px;margin:10px 0;display:grid;gap:4px}
.er-box h2{font-size:.9rem;margin:0 0 2px}
.er-points{background:var(--green-50)}
.er-foot{text-align:center;font-size:.8rem;color:var(--ink-500);border-top:1px dashed var(--ink-300);padding-top:10px;margin-top:12px}
.er-foot p{margin:2px 0}
.er-small{font-size:.72rem;margin-top:8px !important;opacity:.8}

/* ---------------------------------------------------------- reports: laporan, penjualan, dasbor */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.rpt-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.rpt-export{display:flex;gap:6px}
.rpt-filters{display:flex;flex-direction:column;gap:9px;margin-bottom:14px;padding:12px}
.rpt-presets{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.rpt-presets::-webkit-scrollbar{display:none}
.chip-btn{flex:0 0 auto;border:1px solid var(--ink-200);background:var(--paper);border-radius:999px;padding:6px 12px;
  font:inherit;font-size:.8rem;font-weight:600;color:var(--ink-700);cursor:pointer;white-space:nowrap}
.chip-btn:hover{border-color:var(--green-500)}
.chip-btn.on{background:var(--green-600);border-color:var(--green-600);color:#fff}
.rpt-dates,.rpt-fields,.rpt-go{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.rpt-dates .input{width:auto;flex:1 1 140px;max-width:180px}
.rpt-fields .input{width:auto;flex:1 1 150px;max-width:240px;min-height:38px;padding:7px 10px;font-size:.86rem}
.rpt-check{display:flex;align-items:center;gap:6px;font-size:.86rem;font-weight:600}
.rpt-kpis{margin-bottom:14px}
@media(min-width:1100px){.rpt-kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}}
.rpt-kpis .kpi .v{font-size:1.15rem;overflow-wrap:anywhere}
.rpt-chart{margin-bottom:14px}
.rpt-tbl td.strong{font-weight:800;color:var(--brown-700)}
.rpt-tbl td.wrap{white-space:normal;min-width:180px;max-width:340px}
.rpt-tbl tfoot td{background:var(--brown-50);font-weight:800;border-top:2px solid var(--ink-200);padding:10px 12px}
.rpt-void td{color:var(--ink-400);text-decoration:line-through;text-decoration-color:var(--ink-300)}
.rpt-void td:first-child,.rpt-void td:last-child{text-decoration:none}
.rpt-ok{color:var(--ok);font-weight:700}
.rpt-bad{color:var(--danger);font-weight:700}
.rpt-heat{display:block;min-width:26px;text-align:center;border-radius:5px;padding:3px 2px;font-size:.78rem;
  background:color-mix(in srgb,var(--green-600) calc(var(--h) * 85%),transparent);color:var(--ink-900)}
.rpt-sub{margin:22px 0 8px}
.rpt-sub h2{font-size:1rem;margin:0}
.rpt-note{display:flex;gap:6px;align-items:flex-start;margin-top:12px}
.rpt-hub{display:grid;gap:14px}
@media(min-width:760px){.rpt-hub{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1200px){.rpt-hub{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rpt-hub-h{display:flex;align-items:center;gap:8px;font-size:1rem;margin:0 0 8px;color:var(--brown-700)}
.rpt-list{list-style:none;margin:0;padding:0}
.rpt-list li + li{border-top:1px solid var(--ink-100)}
.rpt-list a{display:block;padding:9px 4px;color:var(--ink-900)}
.rpt-list a:hover{background:var(--green-50);text-decoration:none}
.rpt-list b{display:block;font-size:.9rem}
.rpt-list span{display:block;font-size:.78rem;color:var(--ink-500)}
/* chart (partials/chart.php) */
.rchart{margin:0}
.rchart figcaption{font-size:.8rem;font-weight:700;color:var(--ink-700);margin-bottom:8px}
.rc-body{display:flex;gap:6px}
.rc-y{display:flex;flex-direction:column;justify-content:space-between;font-size:.68rem;color:var(--ink-500);text-align:end;
  height:170px;padding-bottom:0;white-space:nowrap;min-width:44px}
.rchart.compact .rc-y,.rchart.compact .rc-svg{height:120px}
.rc-plot{flex:1;min-width:0}
.rc-svg{display:block;width:100%;height:170px;overflow:visible}
.rc-bar{fill:var(--green-600)}
.rc-bar.neg{fill:var(--danger)}
g:hover .rc-bar{fill:var(--brown-600)}
.rc-hit{fill:transparent}
.rc-grid{stroke:var(--ink-100);stroke-width:1}
.rc-base{stroke:var(--ink-300);stroke-width:1}
.rc-line{fill:none;stroke:var(--green-600);stroke-width:2;stroke-linejoin:round}
.rc-area{fill:var(--green-100)}
.rc-xl{display:grid;font-size:.66rem;color:var(--ink-500);margin-top:4px}
.rc-xl span{white-space:nowrap;overflow:visible;text-align:start}
.rc-xl-ends{display:flex;justify-content:space-between}
.rc-h{display:grid;gap:7px}
.rc-hrow{display:grid;grid-template-columns:minmax(80px,32%) 1fr auto;gap:8px;align-items:center;font-size:.8rem}
.rc-hl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-hb{background:var(--ink-100);border-radius:4px;height:12px;overflow:hidden}
.rc-hb i{display:block;height:100%;background:var(--green-600);border-radius:0 4px 4px 0}
.rc-hv{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
/* sale detail */
.sale-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:980px){.sale-grid{grid-template-columns:1fr 1fr;align-items:start}}
.ret-box{border:1px solid var(--ink-200);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:8px}
.ret-lines{margin:6px 0 0;padding-inline-start:18px}
.ret-form{display:grid;gap:10px;margin:12px 0;grid-template-columns:1fr}
@media(min-width:760px){.ret-form{grid-template-columns:2fr 1fr auto;align-items:end}}
/* dashboard */
.dash-kpis{margin-bottom:14px}
.dchg{font-weight:800;margin-inline-end:4px}
.dchg.up{color:var(--ok)}
.dchg.down{color:var(--danger)}
.kpi-link{display:block;color:inherit}
.kpi-link:hover{text-decoration:none;border-color:var(--warn)}
.dash-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:980px){.dash-grid{grid-template-columns:1fr 1fr}}
.dash-grid .section-head{margin-bottom:8px}
.dash-grid h2{font-size:.95rem;margin:0}
.dash-top{margin:0;padding-inline-start:20px;display:grid;gap:6px}
.dash-top li{font-size:.86rem}
.dash-top li span:first-child{display:inline-block;max-width:60%;vertical-align:bottom;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-top li b{margin:0 6px}
.dev-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ink-300);margin-inline-end:6px}
.dev-dot.on{background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg)}
/* shift: refunds */
.shift-refund{color:var(--danger)}

/* ===================== v12 bundles / raw materials (TN-3) ===================== */
.ptype-badge{font-size:.72rem;padding:1px 7px;vertical-align:middle;margin-inline-start:4px}
.ptype-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.ptype-tabs .chip{text-decoration:none;color:inherit;cursor:pointer}
.bnd .bnd-sum{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.bnd .vpick{margin-bottom:8px}
.bnd .inv-qty{width:90px}
.bnd-tbl td:first-child{min-width:150px}
/* TN-6 recipe + "used in" tables: stacked cards on phones (name on top, numbers below with their labels) */
@media (max-width:600px){
  .stack-sm{min-width:0 !important}
  .stack-sm thead{display:none}
  .stack-sm tr{display:grid;grid-template-columns:1fr 1fr 1fr auto;align-items:center;gap:2px 8px;padding:8px 10px;border-bottom:1px solid var(--line,#e7e2d9)}
  .stack-sm td{display:block;border:0 !important;padding:2px 0 !important;text-align:left !important}
  .stack-sm td:first-child{grid-column:1 / -1}
  .stack-sm td[data-l]::before{content:attr(data-l);display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted,#7a6f63)}
  .bnd .inv-qty{width:64px}
}
/* ===================== end v12 bundles ===================== */
/* ===================== security: users, permissions matrix, PIN, QRIS settings (WS-S) ===================== */
.usr-manage summary{list-style:none;cursor:pointer;display:inline-flex}
.usr-manage summary::-webkit-details-marker{display:none}
.usr-actions{display:flex;flex-direction:column;gap:6px;margin-top:8px;min-width:210px}
.usr-actions form{margin:0}
.usr-row{display:flex;gap:6px;flex-wrap:wrap}
.usr-row .input{width:auto;min-width:130px;flex:1}
.perm-wrap{max-height:75vh;overflow:auto}
.perm-tbl th.perm-role{font-size:.72rem;min-width:84px;text-align:center;vertical-align:bottom;position:sticky;top:0;background:var(--surface,#fff);z-index:1}
.perm-tbl td.perm-cell{text-align:center}
.perm-tbl td.perm-cell input{width:18px;height:18px}
.perm-tbl .perm-name{min-width:200px;position:sticky;left:0;background:var(--surface,#fff)}
.perm-tbl tr.perm-group td{background:var(--ink-50,#f6f3ef);font-size:.82rem}
.sec-checks{display:grid;gap:6px;grid-template-columns:1fr}
@media(min-width:620px){.sec-checks{grid-template-columns:1fr 1fr}}
.qris-info{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-bottom:12px}
.qris-meta{display:grid;gap:8px;grid-template-columns:1fr 1fr;flex:1;min-width:200px}
.qris-preview{width:200px;max-width:100%}
.qris-preview svg{display:block;width:100%;height:auto;border:1px solid var(--ink-100)}
.qris-bca{margin-top:8px}
.qris-bca summary{cursor:pointer;margin-bottom:8px}
/* ===================== online orders (v12 TN-4/TN-5): bell, list, detail ===================== */
.oo-bell{position:relative;display:inline-block;float:left;margin-right:10px;text-align:start}
.adm-top .who .oo-bell b{display:inline}
.oo-bell-btn{position:relative;width:38px;height:38px;border-radius:50%;border:1px solid var(--ink-200);background:var(--paper);color:var(--ink-700);display:grid;place-items:center;cursor:pointer}
.oo-bell-btn:hover{background:var(--ink-100)}
.oo-badge{display:inline-block;min-width:18px;padding:1px 5px;border-radius:999px;background:var(--danger);color:#fff;font-size:.7rem;font-weight:700;line-height:16px;text-align:center}
.oo-badge[hidden]{display:none}
.oo-bell-btn .oo-badge{position:absolute;top:-4px;right:-6px}
.oo-nav-badge{margin-inline-start:auto}
.oo-pop{position:absolute;top:calc(100% + 6px);right:-140px;width:320px;max-width:92vw;background:var(--paper);border:1px solid var(--ink-200);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.15);z-index:60;padding:10px;font-size:.85rem;color:var(--ink-700)}
.oo-pop[hidden]{display:none}
.oo-pop-h{display:flex;justify-content:space-between;gap:8px;margin-bottom:6px}
.oo-item{display:grid;grid-template-columns:auto 1fr auto;gap:6px;padding:7px 4px;border-bottom:1px solid var(--ink-100);color:inherit;text-decoration:none}
.oo-item:hover{background:var(--ink-100);text-decoration:none}
.oo-item span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oo-empty{padding:8px 4px}
.oo-pop-f{display:flex;justify-content:space-between;gap:8px;margin-top:8px}
.oo-perm{margin-top:6px}
.oo-list tr.oo-unseen td{background:var(--warn-bg,#FDF2E0)}
.oo-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:14px;align-items:start}
.oo-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.oo-act .input{flex:1;min-width:140px;min-height:38px;padding:6px 10px}
.oo-cancel{margin-top:6px}
.oo-cancel summary{cursor:pointer;color:var(--danger)}
.oo-contact{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.oo-timeline{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--ink-200)}
.oo-timeline li{display:flex;flex-direction:column;gap:2px;padding:0 0 12px;position:relative}
.oo-timeline li::before{content:"";position:absolute;left:-20px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--green-600)}
.oo-settings summary{cursor:pointer}
@media (max-width:760px){
  .oo-grid{grid-template-columns:minmax(0,1fr)}
  .oo-pop{position:fixed;left:8px;right:8px;top:58px;width:auto}
}
/* ===================== v12.1: refresh button in the header ===================== */
.adm-reload{float:left;margin-right:10px;width:38px;height:38px;border-radius:50%;border:1px solid var(--ink-200);background:var(--paper);color:var(--ink-700);display:grid;place-items:center;cursor:pointer;padding:0}
.adm-reload:hover{background:var(--ink-100)}
.adm-reload:focus-visible{outline:2px solid var(--brand,#8a5a2b);outline-offset:2px}
.adm-reload.spin svg{animation:adm-spin .8s linear infinite}
@keyframes adm-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.adm-reload.spin svg{animation:none}}
/* ===================== v12.6: product filters (category / brand / collection) + bulk actions ===================== */
.tax-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:0 0 10px}
.tax-f{display:flex;flex-direction:column;gap:3px;min-width:170px;flex:1 1 170px}
.tax-f>span{font-size:.75rem;color:var(--ink-500);font-weight:600}
.tax-f .input{min-height:44px}
.tax-filters .grow{flex:1 1 0;min-width:0}
.tax-active{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.tax-active .chip{text-decoration:none}
.tax-bulk{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;background:var(--ink-50,#f6f3ef);border:1px solid var(--ink-200);border-radius:10px;padding:10px 12px;margin:0 0 10px}
.tax-bulk[hidden]{display:none}
.tax-bulk b{align-self:center}
.tax-cb{width:34px;text-align:center}
.tax-cb input{width:18px;height:18px}
.tax-picks{display:flex;gap:8px;flex-wrap:wrap}
.tax-pick{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ink-200);border-radius:999px;padding:6px 12px;min-height:40px;cursor:pointer;background:var(--paper)}
.tax-pick input{width:18px;height:18px}
.tax-pick:has(input:checked){border-color:var(--green-600,#658845);background:var(--green-50,#f4f8ef)}
.tax-tbl td form{display:inline}
.tax-new{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
@media(max-width:640px){.tax-f{flex:1 1 100%}}

/* v13 — personal permissions, shown inside the person's "Kelola" panel on /admin/pengguna */
.usr-perms{margin:10px 0 0;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft,#fafafa);min-width:260px;max-width:520px}
.usr-perms-head{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.usr-perms-mod{margin:10px 0 4px;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.usr-perm{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 6px;border-radius:7px}
.usr-perm.on{background:rgba(22,163,74,.08)}
.usr-perm-n{display:flex;flex-direction:column;align-items:flex-start;font-size:.86rem;line-height:1.25}
.usr-perm-t{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.usr-perm-s{font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:1px 6px;border-radius:999px;background:rgba(217,119,6,.14);color:#b45309}
.usr-perm .input{width:auto;min-width:148px;font-size:.8rem;padding:4px 6px}
.usr-perm .input:disabled{opacity:.5}
.usr-perms-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}

/* ===================== v13: notification centre (/admin/notifikasi) + header bell ===================== */
.ntf-bell{position:relative;float:left;margin-right:10px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--ink-200);background:var(--paper);color:var(--ink-700);display:grid;place-items:center}
.ntf-bell:hover{background:var(--ink-100);text-decoration:none;color:var(--ink-900)}
.ntf-bell:focus-visible{outline:2px solid var(--green-500);outline-offset:2px}
.ntf-badge{position:absolute;top:-4px;right:-6px;min-width:18px;padding:1px 5px;border-radius:999px;
  background:var(--danger);color:#fff;font-size:.7rem;font-weight:700;line-height:16px;text-align:center}
.ntf-badge[hidden]{display:none}

.ntf-wrap{max-width:860px}
.ntf-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.ntf-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.ntf-allform{margin-inline-start:auto}
.ntf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ntf{display:grid;grid-template-columns:4px minmax(0,1fr) auto;gap:11px;align-items:start;
  background:var(--paper);border:1px solid var(--ink-200);border-radius:var(--radius-sm);
  padding:11px 13px 11px 0;overflow:hidden}
.ntf-bar{align-self:stretch;min-height:44px;background:var(--info)}
.ntf-warn .ntf-bar{background:var(--warn)}
.ntf-high .ntf-bar{background:var(--danger)}
.ntf.is-new{background:var(--green-50);border-color:var(--green-100)}
.ntf-main{min-width:0}
.ntf-h{display:flex;gap:7px;align-items:baseline;flex-wrap:wrap}
.ntf-h b{font-size:.94rem;line-height:1.35}
.ntf-b{margin:4px 0 0;font-size:.85rem;color:var(--ink-700);overflow-wrap:anywhere}
.ntf-m{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px;font-size:.75rem;color:var(--ink-500)}
.ntf-m>span+span::before{content:"·";margin-inline-end:6px;color:var(--ink-300)}
.ntf-m .num{font-weight:700;color:var(--brown-700)}
.ntf-exact{color:var(--ink-400);font-variant-numeric:tabular-nums}
.ntf-a{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.ntf-a form{margin:0}

.ntf-set{margin-top:20px}
.ntf-set summary{cursor:pointer}
.ntf-k{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 6px;
  border-top:1px solid var(--ink-100)}
.ntf-k.off{opacity:.62}
.ntf-k-n{display:flex;flex-direction:column;line-height:1.25;font-size:.88rem;min-width:0}
.ntf-k-n .small{font-size:.72rem}
.ntf-k form{margin:0}

@media(max-width:640px){
  .ntf{grid-template-columns:4px minmax(0,1fr);padding-bottom:9px}
  .ntf-a{grid-column:2;justify-content:flex-start;padding-inline-end:13px;margin-top:8px}
  .ntf-allform{margin-inline-start:0;width:100%}
  .ntf-allform .btn{width:100%}
  .ntf-h b{font-size:.92rem}
}

/* v13.3 — the category list (Kelola kategori) shares the brand/collection page */
.tax-ico{width:44px;padding-inline-end:0;vertical-align:middle}
.tax-ico svg{display:block}
.tax-act{display:flex;gap:4px;align-items:center;flex-wrap:nowrap}
.tax-act form{margin:0}
.tax-act .btn{padding-inline:8px}
@media(max-width:900px){.tax-act{flex-wrap:wrap}}
.tax-act .btn[disabled]{opacity:.35;pointer-events:none}
/* the inline edit row: one line on a laptop, stacked on a phone */
.tax-tbl .tax-edit{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;margin:0}
.tax-tbl .tax-edit .input{min-height:38px}
.tax-tbl .tax-edit .e-name{flex:2 1 150px;min-width:110px}
.tax-tbl .tax-edit .e-icon{flex:1 1 130px;min-width:110px}
.tax-tbl .tax-edit .e-ar{flex:1 1 110px;min-width:90px}
.tax-tbl .tax-edit .e-note{flex:2 1 150px;min-width:110px}
@media(max-width:900px){.tax-tbl .tax-edit{flex-wrap:wrap}.tax-tbl .tax-edit .input{flex:1 1 100%}}

/* v13.5 — collapsible sections in the side menu (<details>/<summary>, no JS needed to fold) */
.side .nav-grp{margin:1px 0}
/* normal case, not uppercase: "Kasir & Penjualan" has to fit a 232 px rail without being cut off */
.side .nav-grp>summary{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;cursor:pointer;
  color:#A99A89;font-size:.82rem;font-weight:700;list-style:none}
.side .nav-grp>summary::-webkit-details-marker{display:none}
.side .nav-grp>summary:hover{background:rgba(255,255,255,.06);color:#D9CDBE}
.side .nav-grp>summary .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side .nav-grp>summary svg{flex:none}
.side .nav-grp>summary .chev{transition:transform .15s ease;opacity:.7}
.side .nav-grp[open]>summary .chev{transform:rotate(90deg)}
.side .nav-grp[open]>summary{color:#D9CDBE}
/* a section that is folded but holds the page you are on would be a trap: it never renders folded (JS + server) */
.side .nav-items{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px;padding-inline-start:9px;
  border-inline-start:1px solid rgba(255,255,255,.12)}
.side .nav-items a{font-size:.85rem;padding:8px 10px}
/* the online-orders count also shows on the folded section, so nothing waiting is ever hidden */
.side .nav-grp>summary .oo-nav-badge{position:static;margin-inline-start:auto}
@media(prefers-reduced-motion:reduce){.side .nav-grp>summary .chev{transition:none}}

/* v13.6 — "+ Baru" inside the product form (assets/js/product-quickadd.js): add a category, brand, collection
   or supplier without leaving a half-filled form. Discreet by design — the dropdown stays the main thing. */
.qa-btn{display:inline-flex;align-items:center;margin-top:5px;padding:4px 9px;min-height:32px;
  font-size:.78rem;font-weight:600;color:var(--ink-500);border:1px dashed var(--ink-300);border-radius:999px}
.qa-btn:hover,.qa-btn:focus-visible{color:var(--green-600,#658845);border-color:var(--green-600,#658845);border-style:solid}
.qa-row{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:7px}
.qa-row[hidden]{display:none}
.qa-row .qa-input{flex:1 1 190px;min-width:150px}
.qa-msg{flex:1 0 100%;font-size:.78rem;color:var(--ink-500);margin-top:2px}
.qa-msg.qa-err{color:var(--danger)}
.qa-msg.qa-ok{color:var(--ok)}
@media(max-width:640px){.qa-btn{min-height:40px}}