/* =========================================================
   Eeventus Admin — sistem reka bentuk asas
   Tiada gaya inline (CSP style-src 'self'). Token jenama daripada laman utama.
   Kelas komponen: .btn .field .input .select .textarea .card .pill .tabs .table .cards .pager .toast .modal .empty .skel .kv .stack .row
   ========================================================= */
@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/poppins-500.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/poppins-700.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-weight:500 700;font-style:normal;font-display:swap;src:url("../fonts/fraunces-var.woff2") format("woff2")}

:root{
  --plum-950:#1f1428;--plum-900:#2c1d38;--plum-800:#4c3959;--plum-700:#5e4872;--plum-600:#74559a;--plum-500:#8567af;
  --lilac-50:#faf7fe;--lilac-100:#f3edfc;--lilac-200:#e7dcf8;--lilac-300:#d6c3f4;--lilac-400:#b396d9;
  --bg:#f4f1f8;--card:#fff;--ink:#2b2035;--ink-soft:#4e4058;--muted:#675775;--line:#e4dbef;--line-strong:#cfc2de;
  --focus:#74559a;
  --ok:#1f6a45;--ok-bg:#e4f5ec;--warn:#8a4f00;--warn-bg:#fff1d6;--info:#1f4e9c;--info-bg:#e6efff;
  --bad:#a3231b;--bad-bg:#fde8e6;--violet:#5b3d8f;--violet-bg:#efe6fb;--grey:#55505e;--grey-bg:#ecebee;--orange:#8a2b00;--orange-bg:#ffe4d6;
  --r-sm:.45rem;--r-md:.75rem;--r-lg:1.1rem;
  --shadow-sm:0 1px 2px rgba(44,29,56,.06),0 2px 8px rgba(44,29,56,.05);
  --shadow-md:0 10px 30px -12px rgba(44,29,56,.35);
  --font:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-head:"Fraunces",Georgia,"Times New Roman",serif;
  --sidebar-w:15.5rem;--topbar-h:3.5rem;--bottombar-h:3.9rem;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 .9375rem/1.55 var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.25}
h1{font-family:var(--font-head);font-size:1.5rem;font-weight:600;letter-spacing:-.01em}
h2{font-size:1.05rem}
h3{font-size:.95rem}
p{margin:0}
a{color:var(--plum-600);text-underline-offset:2px}
a:hover{color:var(--plum-800)}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
#main:focus,#main:focus-visible{outline:none}                      /* sasaran fokus atur cara (tabindex=-1) selepas navigasi: bukan kawalan, tiada kontur */
.muted{color:var(--muted)}
.small{font-size:.8125rem}
.nowrap{white-space:nowrap}
.right{text-align:right}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em}
.clip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ---------- susun atur ---------- */
.stack{display:flex;flex-direction:column;gap:1rem}
.stack-sm{display:flex;flex-direction:column;gap:.5rem}
.row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.row--between{justify-content:space-between}
.row--nowrap{flex-wrap:nowrap}
.grow{flex:1 1 auto;min-width:0}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media (max-width:900px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid2,.grid3{grid-template-columns:minmax(0,1fr)}}

/* ---------- kerangka aplikasi ---------- */
.boot{display:grid;place-items:center;min-height:100vh;color:var(--muted)}
.app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;overflow:auto;background:linear-gradient(180deg,var(--plum-900),var(--plum-950));color:#f3edfc;display:flex;flex-direction:column;padding:1.1rem .8rem}
.brand{display:flex;align-items:center;gap:.6rem;padding:.3rem .55rem 1.2rem;color:#fff;text-decoration:none}
.brand__mark{width:2.1rem;height:2.1rem;border-radius:50%;background:var(--lilac-100);color:var(--plum-800);display:grid;place-items:center;font:700 .95rem var(--font-head)}
.brand__name{font:600 1.02rem var(--font-head);letter-spacing:.02em;line-height:1.1}
.brand__sub{display:block;font:500 .66rem var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--lilac-300)}
.nav{display:flex;flex-direction:column;gap:.15rem}
.nav a{display:flex;align-items:center;gap:.7rem;padding:.62rem .75rem;border-radius:var(--r-md);color:#e7dcf8;text-decoration:none;font-weight:500;min-height:2.75rem}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav a[aria-current="page"]{background:var(--lilac-100);color:var(--plum-900)}
.nav .badge{margin-left:auto}
.nav__ico{width:1.25rem;height:1.25rem;flex:none;display:inline-block}
.side-foot{margin-top:auto;padding:.9rem .6rem 0;border-top:1px solid rgba(255,255,255,.12);font-size:.8125rem;color:#cdbbe6}
.side-foot b{display:block;color:#fff;font-weight:600}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:none}
.bottombar{display:none}
.page{padding:1.5rem clamp(1rem,3vw,2rem) 3rem;max-width:80rem;width:100%;margin:0 auto}
.page__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.page__sub{color:var(--muted);font-size:.875rem;margin-top:.15rem}
@media (max-width:900px){
  .app{display:block}
  .sidebar{display:none}
  .topbar{display:flex;position:sticky;top:0;z-index:20;align-items:center;justify-content:space-between;gap:.75rem;height:var(--topbar-h);padding:0 1rem;background:var(--plum-900);color:#fff}
  .topbar .brand{padding:0;color:#fff}
  .bottombar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;background:#fff;border-top:1px solid var(--line);padding-bottom:var(--safe-b);box-shadow:0 -6px 18px -12px rgba(44,29,56,.4)}
  .bottombar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;min-height:var(--bottombar-h);padding:.35rem .2rem;color:var(--muted);text-decoration:none;font-size:.72rem;font-weight:500;position:relative}
  .bottombar a[aria-current="page"]{color:var(--plum-800);font-weight:600}
  .bottombar a[aria-current="page"]::before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;background:var(--plum-600)}
  .bottombar .badge{position:absolute;top:.3rem;left:calc(50% + .45rem)}
  .page{padding-bottom:calc(var(--bottombar-h) + var(--safe-b) + 2rem)}
}

/* ---------- butang ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:2.6rem;padding:.5rem 1rem;border:1px solid var(--line-strong);border-radius:var(--r-md);background:#fff;color:var(--ink);font-weight:500;cursor:pointer;text-decoration:none;line-height:1.2;transition:background .15s,border-color .15s,box-shadow .15s}
.btn:hover{background:var(--lilac-50);border-color:var(--plum-500)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.btn--primary{background:var(--plum-800);border-color:var(--plum-800);color:#fff}
.btn--primary:hover{background:var(--plum-700);border-color:var(--plum-700);color:#fff}
.btn--danger{background:#fff;border-color:#e3b3af;color:var(--bad)}
.btn--danger:hover{background:var(--bad-bg);border-color:var(--bad)}
.btn--wa{background:#1a7f43;border-color:#1a7f43;color:#fff}
.btn--wa:hover{background:#15693a;border-color:#15693a;color:#fff}
.btn--ghost{border-color:transparent;background:transparent}
.btn--ghost:hover{background:var(--lilac-100);border-color:transparent}
.btn--sm{min-height:2.1rem;padding:.25rem .65rem;font-size:.8125rem;border-radius:var(--r-sm)}
.btn--block{display:flex;width:100%}
.btn.is-loading{position:relative;color:transparent!important;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;animation:spin .7s linear infinite}
.btn:not(.btn--primary).is-loading::after{border-color:var(--line-strong);border-top-color:var(--plum-700)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn.is-loading::after{animation-duration:2s}}

/* ---------- borang ---------- */
.field{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.field>label,.field>.label{font-size:.8125rem;font-weight:600;color:var(--ink-soft)}
.input,.select,.textarea{width:100%;min-height:2.6rem;padding:.5rem .75rem;font-size:1rem;border:1px solid var(--line-strong);border-radius:var(--r-md);background:#fff;color:var(--ink)}
.textarea{min-height:5.5rem;resize:vertical;line-height:1.5}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{outline:3px solid var(--focus);outline-offset:0;border-color:var(--plum-600)}
.input[aria-invalid="true"],.field.is-invalid .input,.field.is-invalid .select,.field.is-invalid .textarea{border-color:var(--bad);background:#fffafa}
.field__err{color:var(--bad);font-size:.8125rem;min-height:0}
.field__hint{color:var(--muted);font-size:.78rem}
.check{display:flex;align-items:flex-start;gap:.55rem;cursor:pointer}
.check input{width:1.15rem;height:1.15rem;margin-top:.15rem;accent-color:var(--plum-700);flex:none}
.alert{padding:.7rem .9rem;border-radius:var(--r-md);border:1px solid;font-size:.875rem}
.alert--err{background:var(--bad-bg);border-color:#f0bcb8;color:#7a1a14}
.alert--warn{background:var(--warn-bg);border-color:#f2d398;color:#6d3d00}
.alert--ok{background:var(--ok-bg);border-color:#b5dfc7;color:#154d33}
.alert--info{background:var(--info-bg);border-color:#bfd4fb;color:#173f80}

/* ---------- kad ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--line)}
.card__body{padding:1.1rem}
.card__body--flush{padding:0}
.card__foot{padding:.8rem 1.1rem;border-top:1px solid var(--line);background:var(--lilac-50);border-radius:0 0 var(--r-lg) var(--r-lg)}
.kpi{padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.kpi__label{font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.kpi__value{font:600 1.6rem/1.15 var(--font-head);color:var(--plum-900)}
.kpi__sub{font-size:.8125rem;color:var(--muted)}
.kv{display:grid;grid-template-columns:minmax(6.5rem,32%) minmax(0,1fr);gap:.45rem .9rem;margin:0}
.kv dt{color:var(--muted);font-size:.8125rem;padding-top:.05rem}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}

/* ---------- pil status & lencana ---------- */
.pill{display:inline-flex;align-items:center;gap:.3rem;padding:.12rem .6rem;border-radius:999px;font-size:.75rem;font-weight:600;line-height:1.5;white-space:nowrap;background:var(--grey-bg);color:var(--grey)}
.pill--baru,.pill--menunggu{background:var(--warn-bg);color:var(--warn)}
.pill--disahkan,.pill--mencipta{background:var(--info-bg);color:var(--info)}
.pill--dihantar{background:var(--violet-bg);color:var(--violet)}
.pill--selesai,.pill--dibayar,.pill--ok{background:var(--ok-bg);color:var(--ok)}
.pill--batal,.pill--tamat,.pill--dibatalkan,.pill--muted{background:var(--grey-bg);color:var(--grey)}
.pill--gagal,.pill--ralat-chip,.pill--bad{background:var(--bad-bg);color:var(--bad)}
.pill--perlu-semak{background:var(--orange-bg);color:var(--orange)}
.pill--warn{background:var(--warn-bg);color:var(--warn)}
.pill--info{background:var(--info-bg);color:var(--info)}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.35rem;height:1.35rem;padding:0 .4rem;border-radius:999px;background:var(--orange);color:#fff;font-size:.72rem;font-weight:700;line-height:1}
.badge--soft{background:var(--lilac-200);color:var(--plum-800)}

/* ---------- tab ---------- */
.tabs{display:flex;gap:.25rem;overflow-x:auto;padding-bottom:.1rem;margin:0 0 .9rem;border-bottom:1px solid var(--line);scrollbar-width:thin}
.tabs a,.tabs button{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem .85rem;border:0;background:transparent;border-bottom:3px solid transparent;color:var(--ink-soft);font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer;min-height:2.75rem}
.tabs a:hover,.tabs button:hover{color:var(--plum-800);background:var(--lilac-50)}
.tabs [aria-current="true"],.tabs [aria-selected="true"]{color:var(--plum-800);border-bottom-color:var(--plum-700);font-weight:600}
.tabs .count{color:var(--muted);font-weight:400;font-size:.8125rem}

/* ---------- jadual & kad senarai ---------- */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:.875rem}
.table th{padding:.65rem .8rem;text-align:left;font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--lilac-50);border-bottom:1px solid var(--line);white-space:nowrap}
.table td{padding:.7rem .8rem;border-bottom:1px solid var(--line);vertical-align:middle}
.table tbody tr:hover{background:var(--lilac-50)}
.table tbody tr:last-child td{border-bottom:0}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
.table td.check-col,.table th.check-col{width:2.4rem;padding-right:0}
.cards{display:none}
.pager{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;padding:.8rem 1rem;border-top:1px solid var(--line)}

/* ---------- toast & modal ---------- */
.toasts{position:fixed;z-index:60;right:1rem;bottom:1rem;display:flex;flex-direction:column;gap:.5rem;width:min(24rem,calc(100vw - 2rem));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:.7rem;padding:.75rem .9rem;border-radius:var(--r-md);background:var(--plum-900);color:#fff;box-shadow:var(--shadow-md);font-size:.875rem}
.toast--ok{background:#17513a}
.toast--err{background:#8d1d17}
.toast__msg{flex:1;min-width:0;overflow-wrap:anywhere}
.toast button{border:0;background:transparent;color:inherit;cursor:pointer;font-weight:600;text-decoration:underline;padding:0 .2rem}
@media (max-width:900px){.toasts{left:1rem;right:1rem;bottom:calc(var(--bottombar-h) + var(--safe-b) + .75rem);width:auto}}
.modal-back{position:fixed;inset:0;z-index:70;background:rgba(31,20,40,.55);display:grid;place-items:center;padding:1rem}
.modal{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-md);width:min(30rem,100%);max-height:calc(100vh - 2rem);overflow:auto}
.modal__head{padding:1rem 1.2rem .4rem}
.modal__body{padding:.4rem 1.2rem 1rem}
.modal__foot{display:flex;justify-content:flex-end;gap:.6rem;flex-wrap:wrap;padding:.8rem 1.2rem;border-top:1px solid var(--line);background:var(--lilac-50);border-radius:0 0 var(--r-lg) var(--r-lg)}

/* ---------- kosong / rangka muat ---------- */
.empty{display:grid;place-items:center;gap:.4rem;text-align:center;padding:2.5rem 1rem;color:var(--muted)}
.empty b{color:var(--ink);font-size:1rem}
.skel{display:block;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--lilac-100),var(--lilac-50),var(--lilac-100));background-size:200% 100%;animation:shimmer 1.3s linear infinite;min-height:1rem}
@keyframes shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}

/* ---------- log masuk ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:1.2rem;background:radial-gradient(900px 520px at 90% -10%,rgba(133,103,175,.5),rgba(133,103,175,0) 60%),linear-gradient(165deg,#4c3959 0%,#33243f 55%,#241830 100%)}
.login__card{width:min(24rem,100%);background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:1.6rem 1.5rem}
.login__card h1{margin:.6rem 0 .2rem}

/* ---------- cetak (asas; label/slip ada fail sendiri) ---------- */
@media print{
  .no-print,.sidebar,.topbar,.bottombar,.toasts{display:none!important}
  body{background:#fff}
}

/* ---------- tambahan kongsi (komponen.js): pil nada, cip, kad pesanan ---------- */
.pill--dipulangkan{background:var(--orange-bg);color:var(--orange)}
.pill--tone-ok{background:var(--ok-bg);color:var(--ok)}
.pill--tone-warn{background:var(--warn-bg);color:var(--warn)}
.pill--tone-bad{background:var(--bad-bg);color:var(--bad)}
.pill--tone-info{background:var(--info-bg);color:var(--info)}
.pill--tone-violet{background:var(--violet-bg);color:var(--violet)}
.pill--tone-grey{background:var(--grey-bg);color:var(--grey)}
.chips{display:inline-flex;flex-wrap:wrap;gap:.25rem}
.chip{display:inline-flex;align-items:center;padding:.05rem .5rem;border-radius:.4rem;font-size:.72rem;font-weight:600;line-height:1.6;white-space:nowrap;background:var(--grey-bg);color:var(--grey);border:1px solid transparent}
.chip--ok{background:var(--ok-bg);color:var(--ok)}
.chip--warn{background:var(--warn-bg);color:var(--warn)}
.chip--bad{background:var(--bad-bg);color:var(--bad)}
.chip--info{background:var(--info-bg);color:var(--info)}
.chip--violet{background:var(--violet-bg);color:var(--violet)}
.sechead{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:0 0 .6rem}
.kpi--link{text-decoration:none;color:inherit}
.kpi--link:hover{border-color:var(--plum-500)}
.kpi--warn .kpi__value{color:var(--warn)}
.kpi--bad .kpi__value{color:var(--bad)}
.ocard{position:relative;display:flex;align-items:stretch;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-sm)}
.ocard__main{display:flex;flex-direction:column;gap:.3rem;flex:1 1 auto;min-width:0;padding:.8rem .9rem;color:inherit;text-decoration:none;border-radius:var(--r-md);min-height:2.75rem}
.ocard__main:hover{background:var(--lilac-50)}
.ocard__head{display:flex;justify-content:space-between;gap:.75rem;align-items:baseline}
.ocard__name{font-weight:600}
.ocard__amt{font-weight:600;color:var(--plum-900)}
.ocard__meta{display:flex;gap:.4rem;align-items:center;font-size:.78rem;color:var(--muted)}
.ocard__items{font-size:.8125rem;color:var(--ink-soft)}
.ocard__pills{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.ocard__ship{display:flex;gap:.35rem;align-items:center;font-size:.8125rem;color:var(--ink-soft)}
.ocard__ship .ico{width:1rem;height:1rem}
.ocard--select .ocard__pick{display:grid;place-items:center;padding:0 .2rem 0 .75rem;min-width:2.75rem}
.ocard--select .ocard__pick input{width:1.35rem;height:1.35rem}
.ocard.is-selected{border-color:var(--plum-600);box-shadow:0 0 0 2px var(--lilac-300)}

/* ---------- sepanduk pesanan baharu, kata laluan, bunyi ---------- */
.newbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.7rem;padding:.55rem clamp(1rem,3vw,2rem);background:var(--plum-800);color:#fff;font-size:.9rem}
.newbar b{flex:1 1 auto;font-weight:600}
.newbar .btn--ghost{color:#fff}
.newbar .btn--ghost:hover{background:rgba(255,255,255,.14)}
.newbar .ico{flex:none}
.passrow{display:flex;gap:.4rem;align-items:stretch}
.passrow .input{flex:1 1 auto;min-width:0}
.js-sound.is-off{opacity:.6}
.js-sound.is-loud{color:var(--orange)}
.side-foot .js-sound{color:#e7dcf8}
.side-foot .btn--ghost{color:#e7dcf8}
.side-foot .btn--ghost:hover{background:rgba(255,255,255,.1)}
.topbar .btn--ghost{color:#fff}
.topbar .btn--ghost:hover{background:rgba(255,255,255,.14)}
.topbar #offline-flag{color:#ffd9a8;font-weight:600}