/* Layout: sistem pentadbiran. Bar atas biru, jalur sambutan, menu putih di kiri, kad statistik, jadual berpagar oren. */
:root{
  --bg:#eef2f7; --panel:#ffffff; --ink:#1c2533; --muted:#647086; --line:#e1e6ee; --zebra:#f6f8fb; --hover:#eef4fd;
  --brand:#1f7be0; --brand-deep:#1665c0; --accent:#1f7be0; --accent-ink:#ffffff; --accent-soft:#e6f0fc;
  --rule:#f29b1d; --side:#ffffff; --side-ink:#2b3445; --side-on:#eef4fd;
  --c-cyan:#16b9e0; --c-green:#22b573; --c-orange:#f29b1d; --c-red:#e8384f;
  --s1:#3b8ff0; --s2:#2b3445; --s3:#4fd17a; --s4:#a066e0; --sall:#f08a2c;
  --good:#1d8a52; --warn:#b36b05; --bad:#d33045;
  --f-display:"Figtree","Segoe UI",system-ui,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f141c; --panel:#171e29; --ink:#e3e9f2; --muted:#93a0b5; --line:#263041; --zebra:#1b2330; --hover:#1d2a3d;
  --brand:#1a5fae; --brand-deep:#144c8c; --accent:#4d9bf2; --accent-ink:#0b1525; --accent-soft:#1a2b44;
  --rule:#e9962a; --side:#131a24; --side-ink:#d3dbe8; --side-on:#1d2a3d;
  --s2:#c9d3e2; --good:#4fc88a; --warn:#e9a640; --bad:#f06b7c; color-scheme:dark}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:1.5}
[hidden]{display:none!important}
.boot{position:fixed;inset:0;display:grid;place-items:center;color:var(--muted);background:var(--bg);z-index:100}
.app{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:100%}
aside{background:var(--side);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
.brand{background:var(--brand-deep);color:#fff;height:54px;padding:0 16px;display:flex;align-items:center;gap:9px;font-family:var(--f-display);font-weight:800;font-size:14.5px;letter-spacing:.005em;text-transform:uppercase;flex:none}
.brand img{width:30px;height:auto;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.brand .dot{width:7px;height:7px;border-radius:50%;background:#4fd17a;flex:none}
.brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
nav{display:flex;flex-direction:column;padding:8px 0}
nav a{color:var(--side-ink);text-decoration:none;padding:9px 16px;display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;border-left:3px solid transparent}
nav a svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
nav a:hover{background:var(--side-on)}
nav a.on{background:var(--side-on);border-left-color:var(--accent);color:var(--accent);font-weight:600}
nav .badge{margin-left:auto;background:var(--c-red);color:#fff;border-radius:99px;font-size:10.5px;padding:0 7px;font-weight:600}
.side-foot{margin-top:auto;padding:12px 16px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.logout{margin-top:8px;width:100%;font:inherit;font-size:12.5px;font-weight:600;color:var(--bad);background:none;border:1px solid var(--line);border-radius:6px;padding:7px;cursor:pointer}
.mainc{min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--brand);color:#fff;height:54px;display:flex;align-items:center;gap:10px;padding:0 16px;position:sticky;top:0;z-index:20}
.menu-btn{background:none;border:0;color:#fff;font-size:22px;cursor:pointer;padding:4px 8px;line-height:1;display:none}
.quick{display:flex;gap:6px;margin-left:auto;align-items:center;min-width:0}
.qb{font:inherit;font-size:12px;font-weight:600;border:0;border-radius:4px;padding:6px 11px;color:#fff;cursor:pointer;white-space:nowrap;text-decoration:none}
.qb.g{background:var(--c-green)} .qb.c{background:var(--c-cyan)} .qb.o{background:var(--c-orange)}
.tdate{font-family:var(--f-mono);font-size:12.5px;font-weight:500;white-space:nowrap}
.tuser{font-size:12.5px;font-weight:600;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
main{padding-block:0 40px}
.band{background:var(--brand);color:#fff;padding:14px 16px 58px}
.band h1{color:#fff}
.band .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;align-items:center}
.band select{width:auto;min-width:170px;background:#fff;color:#1c2533;border:0;color-scheme:light}
.content{padding:20px 16px 0;display:flex;flex-direction:column;gap:18px}
.band+.content{margin-top:-46px;padding-top:0}
h1{font-family:var(--f-display);font-weight:700;font-size:22px;margin:0;text-wrap:balance}
h2{font-family:var(--f-display);font-weight:700;font-size:15px;margin:0;display:flex;align-items:center;gap:8px}
h2 svg{width:16px;height:16px;stroke:var(--rule);fill:none;stroke-width:2}
h3{font-family:var(--f-display);font-size:14px;margin:0 0 6px}
.sub{color:var(--muted);margin:2px 0 0}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.btn{font:inherit;font-weight:600;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:7px 13px;border-radius:5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:13.5px}
.btn:hover{border-color:var(--muted)}
.btn.pri{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.ok{background:var(--c-green);color:#fff;border-color:var(--c-green)}
.btn.sm{padding:3px 9px;font-size:12px;font-weight:500}
.btn.tiny{padding:2px 8px;font-size:11.5px;font-weight:600;background:var(--c-cyan);border-color:var(--c-cyan);color:#fff}
.btn.danger{color:var(--bad)}
.btn.danger.arm{background:var(--bad);color:#fff;border-color:var(--bad)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn:focus-visible,nav a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.qb:focus-visible,.tab:focus-visible{outline:2px solid var(--rule);outline-offset:2px}
.panel{background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--rule);border-radius:4px;min-width:0}
.panel.plain{border-top:1px solid var(--line)}
.panel-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;flex-wrap:wrap}
.panel-b{padding:0 16px 16px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.stat{background:var(--panel);border-radius:4px;box-shadow:0 1px 2px rgba(20,40,80,.08);padding:14px;display:flex;align-items:center;gap:12px;min-width:0;border:1px solid var(--line)}
.stat .ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--c)}
.stat .ic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stat .l{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.stat .v{font-family:var(--f-mono);font-size:18px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-weight:600;font-size:12px;color:var(--ink);padding:9px 12px;border-bottom:2px solid var(--line);white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:nth-child(odd) td{background:var(--zebra)}
tbody tr:hover td{background:var(--hover)}
td.num,th.num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
td.act{white-space:nowrap}
td.act .btn{margin-right:4px}
tfoot td{font-weight:600;border-top:2px solid var(--ink);background:none!important}
.muted{color:var(--muted)} .small{font-size:12px}
.loc{color:var(--accent)}
.link{color:var(--accent);cursor:pointer;background:none;border:0;padding:0;font:inherit;text-decoration:underline;text-underline-offset:2px}
.tag{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:3px;color:#fff;white-space:nowrap;background:var(--muted)}
.tag.paid{background:var(--c-green)} .tag.due{background:var(--c-orange)} .tag.part{background:var(--c-cyan)} .tag.late{background:var(--c-red)}
.tag.ship{background:#1c2533} .tag.cancel{background:var(--c-red)} .tag.pend{background:var(--c-orange)} .tag.ret{background:var(--s4)}
.tag.recv{background:var(--c-green)} .tag.ord{background:var(--c-cyan)} .tag.off{background:var(--muted)}
.tag.ex{background:transparent;color:var(--warn);border:1px solid currentColor}
@media (prefers-color-scheme:dark){.tag.ship{background:#45536a}}
.neg{color:var(--bad)} .pos{color:var(--good)}
.tbl-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 16px 14px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.empty{padding:24px 12px;text-align:center;color:var(--muted);font-size:13px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
input,select,textarea{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:7px 10px;width:100%;min-width:0}
textarea{min-height:76px;resize:vertical}
input[type=checkbox],input[type=radio]{width:auto}
.toolbar input,.toolbar select{width:auto}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:500;color:var(--muted);min-width:0}
label.chk{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink);flex-direction:row}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form .full{grid-column:1/-1}
.hint{font-size:11.5px;color:var(--muted)}
.tabs{display:flex;gap:2px;border-bottom:2px solid var(--line);overflow-x:auto;scrollbar-width:thin}
.tab{font:inherit;font-weight:600;font-size:13.5px;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:9px 16px;cursor:pointer;color:var(--muted);white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.filters{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;padding:0 16px 14px}
.overlay{position:fixed;inset:0;background:rgba(12,20,34,.5);display:grid;place-items:start center;padding:24px 12px;z-index:50;overflow-y:auto}
.modal{background:var(--panel);border-radius:6px;width:100%;max-width:580px;border-top:3px solid var(--accent);margin:auto 0}
.modal.wide{max-width:980px}
.modal .panel-b{display:flex;flex-direction:column;gap:14px;padding-top:4px}
.modal-f{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.items{min-width:640px}
.items input{padding:5px 8px}
.items td{padding:6px 8px;background:none!important}
.items td.num input{text-align:right;font-family:var(--f-mono)}
.items .pname{min-width:200px}
.sum{margin-left:auto;width:min(100%,340px);display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center;font-size:13.5px}
.sum .tot{font-weight:700;font-size:15px}
.sum input{width:110px;text-align:right;font-family:var(--f-mono);padding:4px 8px}
.sum .n{font-family:var(--f-mono);text-align:right;font-variant-numeric:tabular-nums}
.pay-row{display:grid;grid-template-columns:150px 130px 1fr auto;gap:8px;align-items:center}
.calc{display:flex;justify-content:space-between;font-family:var(--f-mono);background:var(--accent-soft);color:var(--accent);padding:8px 12px;border-radius:4px;font-size:13px}
.banner{background:color-mix(in srgb,var(--rule) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--rule) 40%,var(--line));border-radius:4px;padding:9px 14px;font-size:13px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.alert{background:color-mix(in srgb,var(--bad) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--bad) 40%,var(--line));color:var(--bad);border-radius:4px;padding:8px 12px;font-size:13px}
.toast{position:fixed;right:16px;bottom:16px;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:6px;font-weight:500;z-index:80;max-width:min(92vw,420px)}
.toast.err{background:var(--bad);color:#fff}
.pl td{padding:9px 16px}
.pl tbody tr td{background:none}
.pl tr.tot td{font-weight:600;border-top:2px solid var(--ink)}
.chart svg{width:100%;height:auto;display:block}
.legend{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend span::before{content:"";width:12px;height:3px;border-radius:2px;background:var(--c)}
.filter-sel{background:#fff;color:#1c2533;border:0;border-radius:4px;font:inherit;font-size:12.5px;font-weight:600;padding:6px 10px;color-scheme:light}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px}
.kv dt{color:var(--muted)} .kv dd{margin:0;word-break:break-word}
.msg{padding:12px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.msg .t{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.unread{border-left:3px solid var(--rule)}
.scrim{display:none}
/* login */
.login{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);background:var(--panel)}
.login-side{background:var(--brand);color:#fff;padding:40px 40px 40px max(24px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:28px;justify-content:space-between}
.login-side .lb{font-family:var(--f-display);font-weight:800;font-size:20px;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.login-side .lb img{width:56px;height:auto;flex:none}
.doc .biz{display:flex;align-items:flex-start;gap:12px}
.doc .biz img{width:62px;height:auto;flex:none}
.receipt .rlogo{width:74px;height:auto;margin:0 auto 4px;display:block}
.login-side h1{font-size:38px;line-height:1.12;max-width:15ch;color:#fff}
.login-side p{color:rgba(255,255,255,.85);max-width:46ch;margin:10px 0 0}
.notice{background:rgba(255,255,255,.1);border-left:3px solid var(--rule);border-radius:4px;padding:14px 16px;max-width:52ch;font-size:13.5px}
.notice b{display:block;margin-bottom:4px;font-family:var(--f-display);font-size:15px}
.login-copy{font-size:12px;color:rgba(255,255,255,.7)}
.login-main{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.login-box{width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px}
.login-box h2{font-size:26px}
.pw{position:relative}
.pw input{padding-right:70px}
.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--accent);cursor:pointer;padding:4px 8px}
.btn.wide{width:100%;justify-content:center;padding:10px}
/* POS */
.pos{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:16px;align-items:start}
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:0 16px 16px}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px;text-align:left;font:inherit;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;gap:4px;min-height:92px}
.pcard:hover{border-color:var(--accent);background:var(--hover)}
.pcard b{font-size:12.5px;line-height:1.3}
.pcard .pr{font-family:var(--f-mono);color:var(--accent);font-weight:500;margin-top:auto}
.pcard[disabled]{opacity:.5;cursor:not-allowed}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 12px}
.chip{font:inherit;font-size:12px;font-weight:600;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:4px 11px;border-radius:99px;cursor:pointer}
.chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.cart-line{display:grid;grid-template-columns:minmax(0,1fr) 78px 84px auto;gap:6px;align-items:center;padding:8px 16px;border-top:1px solid var(--line)}
.cart-line input{padding:4px 6px;text-align:right;font-family:var(--f-mono)}
.cart-tot{display:grid;gap:8px;padding:12px 0;border-top:2px solid var(--ink);margin-top:8px}.cart-tot>*{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}.cart-tot input{width:110px;text-align:right}.cart-tot .g{font-family:var(--f-display);font-size:20px;font-weight:700}
.pos-pay{padding:0 16px 16px;display:flex;flex-direction:column;gap:10px}
.method-btns{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.method-btns .chip{border-radius:5px;padding:8px}
/* cetak */
.print-area{display:none}
.doc{font-family:var(--f-body);color:#111;font-size:12.5px;max-width:780px;margin:0 auto}
.doc h1{font-size:22px;color:#111;margin:0}
.doc .row{display:flex;justify-content:space-between;gap:20px;margin-bottom:14px}
.doc table{font-size:12px}
.doc th{border-bottom:2px solid #111;color:#111}
.doc td{border-bottom:1px solid #ccc;background:none!important}
.doc .tot td{font-weight:700}
.doc .foot{margin-top:24px;font-size:11px;color:#444}
.receipt{max-width:300px;font-family:var(--f-mono);font-size:11.5px}
.receipt table{font-size:11.5px}
@media print{
  body>*:not(.print-area){display:none!important}
  .print-area{display:block!important}
  body{background:#fff}
}
@media (max-width:1100px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))} .pos{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  aside{position:fixed;left:0;top:0;bottom:0;width:250px;z-index:40;transform:translateX(-105%);transition:transform .2s}
  body.navopen aside{transform:none}
  body.navopen .scrim{display:block;position:fixed;inset:0;background:rgba(12,20,34,.45);z-index:39}
  .menu-btn{display:block}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .quick .qb,.tdate{display:none}
  .login{grid-template-columns:minmax(0,1fr)}
  .login-side{padding:28px 24px}
  .login-side h1{font-size:28px}
  .form.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:540px){
  .form,.form.c3{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:minmax(0,1fr)}
  .tuser{max-width:150px}
  .pay-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cart-line{grid-template-columns:minmax(0,1fr) 64px 78px auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.band .sub{color:rgba(255,255,255,.88)}.sum .tot{border-top:2px solid var(--ink);padding-top:6px}.sum b{font-family:var(--f-mono);text-align:right}
.head{padding:16px 16px 4px}.content .head{padding-left:0;padding-right:0}