/* KEMET Retail (kmet.io) · family palette with retail navy/blue; derived from Restaurants core.css 2026-09-30 */
/* KEMET core: tokens, reset, buttons, shared components · generated from docs/design/2026-09-29-redesign/concept-src (approved concept). Edit here, keep tokens-only colors. */
/* =====================================================================
   TOKEN PLAN · Direction B "ضيافة خليجية راقية"
   Layout concept:
   - Landing: one bold place only. The hero is a deep "tamr" (date) room
     lit by a warm pendant glow; the headline is Ruqaa (menu-board /
     shop-sign hand). The product object is a real thermal receipt.
     Next section: a brass kitchen ticket rail; each module hangs as a
     paper ticket with a live mini UI. Paper stays paper in dark mode.
   - Console: calm stone ground, date-colored sidebar (shared identity),
     a ruled "ledger" strip for KPIs instead of card tiles, panels only
     where content is a unit. Brass is used for: active nav, primary
     action, the current month. Nothing else shouts.
   Color tokens (core 6): --ground (stone) · --surface · --ink (qahwa)
     · --brass · --date (hero/sidebar) · --paper (receipt/tickets)
   Status: --ok (cardamom) · --warn (saffron) · --bad (pomegranate)
   Font roles: --f-display Aref Ruqaa (hero + section titles + brand
     moments) · --f-body IBM Plex Sans Arabic (all UI, tabular Latin
     digits) · --f-mono IBM Plex Mono (slugs, domains, receipts, amounts)
   Numbers: Latin digits everywhere, KWD 3 decimals, tabular-nums.
   ===================================================================== */
:root{
  color-scheme: light;
  --ground:#EEF1F6; --surface:#FBFCFE; --sunk:#E2E7EF;
  --ink:#0F1B2D; --ink-2:#4A5870; --ink-3:#7A869A;
  --line:#CFD7E3; --line-2:#DFE5EE;
  --brass:#86652B; --brass-hi:#C9A45C; --brass-wash:#EEE5D1; --on-brass:#0F1B2D;
  --date:#0B2A52; --date-2:#10356A; --date-3:#1C4A85; --on-date:#EEF3FB; --on-date-2:#A8BCD9;
  --paper:#FBFAF6; --paper-2:#EFECE4; --paper-ink:#1B2433; --paper-mute:#6B7486;
  --ok:#4C6A38; --ok-wash:#E0E8D6; --warn:#9C5F14; --warn-wash:#F3E5CC; --bad:#A1302A; --bad-wash:#F4DDD9;
  --focus:#0F1B2D;
  --f-display:"Aref Ruqaa","Noto Naskh Arabic","Traditional Arabic","Times New Roman",serif;
  --f-body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,"Geeza Pro",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,"Courier New",monospace;
  --r:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ground:#0A1220; --surface:#101B2C; --sunk:#070D18;
    --ink:#E8EDF5; --ink-2:#A7B4C8; --ink-3:#7887A0;
    --line:#23324A; --line-2:#18263B;
    --brass:#D4AF68; --brass-hi:#D6B16B; --brass-wash:#3A2F1D;
    --date:#071A36; --date-2:#0B2447; --date-3:#15345F;
    --paper:#EEEAE1; --paper-2:#E0DBD0;
    --ok:#97B47E; --ok-wash:#233020; --warn:#E3A857; --warn-wash:#3A2C17; --bad:#EA7E73; --bad-wash:#3E201C;
    --focus:#D6B16B;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#0A1220; --surface:#101B2C; --sunk:#070D18;
  --ink:#E8EDF5; --ink-2:#A7B4C8; --ink-3:#7887A0;
  --line:#23324A; --line-2:#18263B;
  --brass:#D4AF68; --brass-hi:#D6B16B; --brass-wash:#3A2F1D;
  --date:#071A36; --date-2:#0B2447; --date-3:#15345F;
  --paper:#EEEAE1; --paper-2:#E0DBD0;
  --ok:#97B47E; --ok-wash:#233020; --warn:#E3A857; --warn-wash:#3A2C17; --bad:#EA7E73; --bad-wash:#3E201C;
  --focus:#D6B16B;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.6;overflow-x:hidden}
a{color:inherit}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.num,.mono{font-variant-numeric:tabular-nums lining-nums}
.mono{font-family:var(--f-mono);letter-spacing:0}
.ltr{direction:ltr;unicode-bidi:isolate}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:is(.ic,.ui-icon){width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:clamp(16px,4vw,48px)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding-inline:22px;border-radius:8px;border:1px solid transparent;font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s}
.btn-brass{background:var(--brass-hi);color:var(--on-brass)}
.btn-brass:hover{background:#D8B670}
.btn-sm{height:36px;padding-inline:14px;font-size:14px}


/* =====================================================================
   KEMET · shared components (extends base.css tokens — never hardcode colors
   that change between themes; use var(--…) tokens only)
   Semantic: --ok (cardamom green) · --warn (saffron) · --bad (pomegranate)
   Brand:    --date (Kemet deep green: hero, sidebar) · --brass / --brass-hi (Kemet gold)
   ===================================================================== */

/* ---------- buttons ---------- */
.btn-line{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-line:hover{border-color:var(--ink-3)}
.btn-quiet{background:none;color:var(--ink-2);border-color:transparent}
.btn-quiet:hover{color:var(--ink);background:var(--sunk)}
.btn-green{background:var(--date);color:var(--on-date)}
.btn-green:hover{background:var(--date-2)}
.btn-danger{background:var(--bad);color:#fff}
.btn-danger-line{background:var(--surface);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.btn-danger-line:hover{background:var(--bad-wash)}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn :is(.ic,.ui-icon){width:16px;height:16px}
.link{color:var(--brass);font-weight:500;text-underline-offset:4px}
.link:hover{color:var(--ink)}

/* ---------- forms ---------- */
.form{display:grid;gap:16px}
.form-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:grid;gap:6px;min-width:0}
.field>label,.field .lbl{font-size:13.5px;font-weight:600;color:var(--ink)}
.field .opt{font-weight:400;color:var(--ink-3);font-size:12.5px;margin-inline-start:6px}
.input,.select,.textarea{width:100%;min-width:0;height:44px;padding-inline:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:14.5px}
.textarea{height:auto;min-height:96px;padding-block:10px;line-height:1.7;resize:vertical}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:14px 19px,19px 19px;background-size:5px 5px;background-repeat:no-repeat;padding-inline-end:32px}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px color-mix(in srgb,var(--brass-hi) 25%,transparent)}
.input.ltr,.input[dir="ltr"]{direction:ltr;text-align:left;font-family:var(--f-mono);font-size:14px}
.help{font-size:12.5px;color:var(--ink-3);margin:0;line-height:1.6}
.err-msg{font-size:12.5px;color:var(--bad);margin:0}
.field.has-err .input{border-color:var(--bad)}
.affix{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden;direction:ltr}
.affix .input{border:0;border-radius:0;height:42px}
.affix span{display:flex;align-items:center;padding-inline:10px;background:var(--sunk);color:var(--ink-2);font-family:var(--f-mono);font-size:13.5px;white-space:nowrap}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.6}
.check input{width:18px;height:18px;margin-top:3px;accent-color:var(--date)}
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;font-size:14px}
.switch input{appearance:none;width:38px;height:22px;border-radius:11px;background:var(--line);position:relative;cursor:pointer;flex:none;transition:background .15s}
.switch input::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:var(--surface);transition:inset-inline-start .15s}
.switch input:checked{background:var(--ok)}
.switch input:checked::after{inset-inline-start:19px}
.radio-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.radio-card{position:relative;display:grid;gap:4px;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer}
.radio-card:has(input:checked){border-color:var(--brass);box-shadow:0 0 0 1px var(--brass)}
.radio-card input{position:absolute;inset-block-start:16px;inset-inline-end:16px;accent-color:var(--date)}
.otp{display:flex;gap:8px;direction:ltr;justify-content:flex-end}
.otp input{width:46px;height:54px;text-align:center;font:500 22px var(--f-mono);border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}

/* ---------- page header extras (console) ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--ink-3);margin-block-end:6px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs span[aria-hidden]{color:var(--line)}
.ph .sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-block-start:6px;font-size:13.5px;color:var(--ink-3)}

/* ---------- toolbar / filters ---------- */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 18px;border-block-end:1px solid var(--line-2)}
.toolbar .input,.toolbar .select{height:36px;font-size:13.5px}
.toolbar .search{height:36px;max-width:320px;background:var(--surface)}
.toolbar .grow{flex:1}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding-inline:12px;border-radius:99px;border:1px solid var(--line);background:var(--surface);font-size:13px;color:var(--ink-2);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.chip b{font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- data table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{font-weight:500;color:var(--ink-3);font-size:12.5px;text-align:start;padding:10px 18px;border-block-end:1px solid var(--line-2);white-space:nowrap;background:color-mix(in srgb,var(--sunk) 35%,transparent)}
.tbl td{padding:12px 18px;border-block-end:1px solid var(--line-2);vertical-align:middle}
.tbl tbody tr:last-child td{border-block-end:0}
.tbl tbody tr:hover{background:color-mix(in srgb,var(--sunk) 40%,transparent)}
.tbl .num,.tbl td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl td.end,.tbl th.end{text-align:end}
.tbl .t{font-weight:600;color:var(--ink)}
.tbl small{display:block;color:var(--ink-3);font-size:12px;margin-block-start:2px}
.tbl a.row-link{color:inherit;text-decoration:none}
.tbl a.row-link:hover .t{text-decoration:underline;text-underline-offset:3px}
.tbl .mono{font-size:12.5px;color:var(--ink-2)}
/* severity stripe on a row or list item (from direction C) */
.sev{box-shadow:inset -3px 0 0 var(--sev,transparent)}
[dir="ltr"] .sev{box-shadow:inset 3px 0 0 var(--sev,transparent)}
.sev-crit{--sev:var(--bad)} .sev-warn{--sev:var(--warn)} .sev-info{--sev:var(--brass-hi)} .sev-ok{--sev:var(--ok)}

/* ---------- status badges (text + color, never color alone) ---------- */
.st.n{background:var(--sunk);color:var(--ink-2)}
.st.i{background:var(--brass-wash);color:var(--brass)}
.st.g{background:color-mix(in srgb,var(--date) 12%,var(--surface));color:var(--date)}
[data-theme="dark"] .st.g{color:var(--ink)}
.st::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-inline-end:6px;vertical-align:1px}
.st.nodot::before{display:none}
.new-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--brass);border:1px dashed var(--brass-hi);border-radius:4px;padding:0 6px;margin-inline-start:6px;vertical-align:middle;white-space:nowrap}

/* ---------- page tabs (underline) ---------- */
.ptabs{display:flex;gap:4px;border-block-end:1px solid var(--line);margin-block-end:20px;overflow-x:auto;scrollbar-width:none}
.ptabs a,.ptabs button{position:relative;display:inline-flex;align-items:center;gap:6px;padding:10px 14px;font-size:14px;color:var(--ink-2);text-decoration:none;background:none;border:0;white-space:nowrap;font-weight:500}
.ptabs a:hover,.ptabs button:hover{color:var(--ink)}
.ptabs [aria-current="page"],.ptabs [aria-selected="true"]{color:var(--ink);font-weight:600}
.ptabs [aria-current="page"]::after,.ptabs [aria-selected="true"]::after{content:"";position:absolute;inset-inline:10px;bottom:-1px;height:2px;background:var(--brass-hi);border-radius:2px}
.ptabs .cnt{font-size:11.5px;padding:0 6px;border-radius:99px;background:var(--sunk);color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ---------- key/value ---------- */
.kv{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:10px 20px;margin:0;font-size:14px}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.kv-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px 32px}

/* ---------- stat mini (inside panels; use .ledger for page-level KPIs) ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface)}
.stats>div{padding:14px 18px;border-inline-start:1px solid var(--line-2)}
.stats>div:first-child{border-inline-start:0}
.stats dt,.stats .k{font-size:12.5px;color:var(--ink-3)}
.stats dd,.stats .v{margin:4px 0 0;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.stats small{display:block;font-size:12px;color:var(--ink-3);margin-block-start:2px}

/* ---------- callouts ---------- */
.callout{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:8px;background:var(--sunk);font-size:13.5px;line-height:1.7;color:var(--ink)}
.callout :is(.ic,.ui-icon){margin-top:3px;color:var(--ink-2)}
.callout.warn{background:var(--warn-wash)} .callout.warn :is(.ic,.ui-icon){color:var(--warn)}
.callout.bad{background:var(--bad-wash)} .callout.bad :is(.ic,.ui-icon){color:var(--bad)}
.callout.ok{background:var(--ok-wash)} .callout.ok :is(.ic,.ui-icon){color:var(--ok)}
.callout.brand{background:var(--brass-wash)} .callout.brand :is(.ic,.ui-icon){color:var(--brass)}
.callout b{font-weight:600}

/* ---------- empty state ---------- */
.empty{display:grid;justify-items:center;text-align:center;gap:8px;padding:40px 20px;color:var(--ink-2)}
.empty :is(.ic,.ui-icon){width:28px;height:28px;color:var(--ink-3)}
.empty h3{margin:0;font-size:15px;color:var(--ink)}
.empty p{margin:0;font-size:13.5px;max-width:42ch}

/* ---------- timeline ---------- */
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl li{position:relative;display:grid;grid-template-columns:64px 1fr;gap:12px;padding-block:10px;font-size:13.5px;line-height:1.65}
.tl li::before{content:"";position:absolute;inset-inline-start:78px;top:16px;width:9px;height:9px;border-radius:50%;background:var(--surface);border:2px solid var(--ink-3)}
.tl li::after{content:"";position:absolute;inset-inline-start:82px;top:28px;bottom:-6px;width:1px;background:var(--line)}
.tl li:last-child::after{display:none}
.tl li>div{padding-inline-start:26px;min-width:0}
.tl time{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;padding-block-start:2px}
.tl li.ok::before{border-color:var(--ok);background:var(--ok)}
.tl li.warn::before{border-color:var(--warn)}
.tl li.bad::before{border-color:var(--bad);background:var(--bad)}
.tl li.now::before{border-color:var(--brass-hi);background:var(--brass-hi);box-shadow:0 0 0 4px var(--brass-wash)}
.tl b{font-weight:600}
.tl p{margin:2px 0 0;color:var(--ink-2)}

/* ---------- stepper (signup /start) ---------- */
.stepper{display:flex;gap:0;list-style:none;margin:0;padding:0;counter-reset:s}
.stepper li{flex:1;display:grid;gap:6px;font-size:13px;color:var(--ink-3);position:relative;padding-block-start:14px}
.stepper li::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;border-radius:2px;background:var(--line)}
.stepper li+li{margin-inline-start:8px}
.stepper li.done{color:var(--ink-2)} .stepper li.done::before{background:var(--ok)}
.stepper li.cur{color:var(--ink);font-weight:600} .stepper li.cur::before{background:var(--brass-hi)}

/* ---------- confirm dialog (static design of destructive confirmation) ---------- */
.dlg-back{position:relative;display:grid;place-items:center;padding:32px 16px;border-radius:var(--r);background:color-mix(in srgb,var(--date) 55%,transparent)}
.dlg{width:min(460px,100%);background:var(--surface);border-radius:12px;box-shadow:0 24px 60px -20px rgba(0,0,0,.5);overflow:hidden}
.dlg-h{padding:18px 20px 0;display:flex;gap:12px;align-items:flex-start}
.dlg-h :is(.ic,.ui-icon){width:22px;height:22px;color:var(--bad);margin-top:3px}
.dlg-h h3{margin:0;font-size:17px}
.dlg-b{padding:10px 20px 18px;font-size:14px;color:var(--ink-2);line-height:1.75;display:grid;gap:12px}
.dlg-b ul{margin:0;padding-inline-start:18px}
.dlg-f{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-block-start:1px solid var(--line-2);background:color-mix(in srgb,var(--sunk) 40%,transparent)}
dialog.dlg{padding:0;border:0;color:var(--ink)}
dialog.dlg::backdrop{background:rgba(6,18,40,.55)}

/* ---------- misc ---------- */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-block-start:1px solid var(--line-2);font-size:13px;color:var(--ink-3)}
.pager .pg{display:flex;gap:4px}
.pager .pg a,.pager .pg span{min-width:32px;height:32px;display:grid;place-items:center;border-radius:6px;border:1px solid var(--line);text-decoration:none;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pager .pg [aria-current]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.dot-live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-wash);vertical-align:1px}
.av.sm{width:28px;height:28px;font-size:11.5px}
.av.lg{width:48px;height:48px;font-size:16px;border-radius:12px}
.mono-box{font-family:var(--f-mono);font-size:12.5px;background:var(--sunk);border:1px solid var(--line-2);border-radius:6px;padding:10px 12px;direction:ltr;text-align:left;overflow-x:auto;white-space:pre;color:var(--ink)}
.hr{height:1px;background:var(--line-2);border:0;margin:0}
.muted{color:var(--ink-3)}
.stack{display:grid;gap:18px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.space{justify-content:space-between}

@media (max-width:760px){
  .form-2{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv dd{margin-block-end:10px}
  .tbl th,.tbl td{padding-inline:14px}
  .toolbar{padding-inline:14px}
  .stats>div{border-inline-start:0;border-block-start:1px solid var(--line-2)}
  .stats>div:first-child{border-block-start:0}
}

/* ---------- console/Blade integration ---------- */
.ic,.ui-icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.flash{display:flex;gap:10px;align-items:flex-start;margin-block-end:16px}
.flash ul{margin:4px 0 0;padding-inline-start:18px}
a.btn{text-decoration:none}
.tbl-x{overflow-x:auto;position:relative}
[dir="ltr"] .select{background-position:calc(100% - 19px) 19px,calc(100% - 14px) 19px}
.btn-green{border-color:color-mix(in srgb,var(--brass-hi) 55%,transparent)}
a.chip,a.act{text-decoration:none;display:inline-flex;align-items:center}

/* ---------- retail product accent (kmet.io) ---------- */
:root{--retail:#2563EB;--retail-wash:#E3ECFD}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--retail:#7AA5FF;--retail-wash:#16284A}}
:root[data-theme="dark"]{--retail:#7AA5FF;--retail-wash:#16284A}