/* ============================================================
   DuQan One — Design System (2026 · light · professional)
   Calm retail-counter UI: high legibility, restrained palette,
   one committed accent (deep teal/pine), true-neutral surfaces.
   ============================================================ */
:root{
  /* DuQan One — brand green (per brand guide). Confident forest green. */
  --brand:#0B7A4E; --brand-600:#0A6A44; --brand-700:#064A30;
  --brand-50:#ECF7F0; --brand-100:#CFEBDB; --brand-200:#A7DCC0;
  --brand-ink:#052A1E;
  --brand-grad:linear-gradient(135deg,#5BD07A 0%,#11875A 55%,#064A30 100%);

  /* Multi-color accent families — each domain gets its own refined hue.
     All foreground/background pairs verified ≥4.5:1 for text use. */
  --indigo:#4f46c4; --indigo-50:#eef0fc; --indigo-100:#e0e3fb; --indigo-grad:linear-gradient(135deg,#6d63e6,#4f46c4);
  --violet:#8b3fc4; --violet-50:#f5edfc; --violet-grad:linear-gradient(135deg,#a85ee0,#8b3fc4);
  --rose:#c0356b;   --rose-50:#fcecf2;   --rose-grad:linear-gradient(135deg,#e25b8c,#c0356b);
  --teal:#0e7c8b;   --teal-50:#e7f4f6;   --teal-grad:linear-gradient(135deg,#2aa3b2,#0e7c8b);
  --amber:#9a6700;  --amber-50:#fbf3e2;  --amber-grad:linear-gradient(135deg,#d99a1f,#9a6700);
  --sky:#1f6f8b;    --sky-50:#eaf2f5;    --sky-grad:linear-gradient(135deg,#3f9ab8,#1f6f8b);

  /* Semantic (muted, professional — not candy) */
  --success:#1a7f54; --success-50:#eaf5ef; --success-grad:linear-gradient(135deg,#2ba56e,#1a7f54);
  --warning:#9a6700; --warning-50:#fbf3e2;
  --danger:#B23A2B;  --danger-50:#f8ece9; --danger-grad:linear-gradient(135deg,#cf5142,#B23A2B);
  --info:#1f6f8b;    --info-50:#eaf2f5;

  /* Surfaces — warm cream "paper" canvas (brand signature) so white cards float & pop */
  --bg:#F6F3EC; --surface:#ffffff; --surface-2:#F4F1E8; --surface-3:#ECE7DB;
  --border:#E7E2D7; --border-strong:#D6CFBF;
  --bg-grad:
    radial-gradient(1150px 560px at 6% -14%, #DBEFE3 0%, rgba(219,239,227,0) 55%),
    radial-gradient(1050px 540px at 99% -10%, #ECF7F0 0%, rgba(236,247,240,0) 52%),
    radial-gradient(900px 700px at 52% 120%, #EFEADE 0%, rgba(239,234,222,0) 55%),
    linear-gradient(180deg,#F6F3EC,#F0ECE0);

  /* Text — warm green-ink + sage (per brand guide), AA on white & cream */
  --text:#16201C;       /* near-black green ink */
  --text-2:#3C4A43;     /* secondary sage, strong contrast */
  --text-3:#5E6F66;     /* tertiary/labels sage */

  /* Radii — soft, modern (cards 15, controls 10, pills full) */
  --radius:15px; --radius-sm:10px; --radius-lg:18px; --radius-xl:22px;

  /* Elevation — layered, single-purpose. Soft ambient + tight contact shadow. */
  --shadow-xs:0 1px 1px rgba(16,32,29,.04);
  --shadow-sm:0 1px 2px rgba(16,32,29,.05), 0 2px 6px -2px rgba(16,32,29,.06);
  --shadow-md:0 2px 4px -2px rgba(16,32,29,.08), 0 10px 24px -8px rgba(16,32,29,.14);
  --shadow-lg:0 8px 16px -8px rgba(16,32,29,.16), 0 24px 48px -16px rgba(16,32,29,.22);
  --shadow-brand:0 8px 20px -8px rgba(11,122,78,.42);
  --ring:0 0 0 3px var(--brand-100);

  --sidebar-w:252px;
  --font:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Schibsted Grotesk','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* Figures (prices, totals, stat values) keep their previous typeface — unchanged by the rebrand */
  --num:'Spline Sans','Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);            /* ease-out-quint */
  --spring:cubic-bezier(.34,1.56,.64,1);       /* gentle overshoot */

  /* z-scale (semantic, never arbitrary) */
  --z-dropdown:30; --z-sticky:40; --z-nav:50; --z-scrim:100; --z-modal:110; --z-toast:200;
}
/* Omani Rial symbol — custom glyph mapped to the "$" slot. When a shop uses the
   Rial, we prepend this font so any "$" renders as the Rial symbol (per-character
   fallback leaves digits/letters on the normal fonts). */
@font-face{
  font-family:'Glyphter';
  src:url('../fonts/Glyphter.woff') format('woff'), url('../fonts/Glyphter.ttf') format('truetype');
  font-weight:normal;font-style:normal;font-display:swap;
}
body.cur-rial{
  --font:'Glyphter','Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Glyphter','Schibsted Grotesk','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --num:'Glyphter','Spline Sans','Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
.cur-glyph{font-family:'Glyphter',var(--font)}
/* ===== Per-shop accent themes (super-admin only). Default green = :root. =====
   Each overrides the brand ramp, gradient, brand shadow and canvas wash. All
   --brand-700 (used for text on light) are dark enough for ≥4.5:1 contrast. */
body.theme-blue{
  --brand:#2563eb;--brand-600:#1d4ed8;--brand-700:#1e40af;--brand-50:#eff6ff;--brand-100:#dbeafe;--brand-200:#bfdbfe;--brand-ink:#1e3a8a;
  --brand-grad:linear-gradient(135deg,#3b82f6 0%,#2563eb 55%,#1d4ed8 100%);
  --shadow-brand:0 8px 20px -8px rgba(37,99,235,.42);
  --bg-grad:radial-gradient(1150px 560px at 6% -14%,#dbeafe 0%,rgba(219,234,254,0) 55%),radial-gradient(1050px 540px at 99% -10%,#e4e2fb 0%,rgba(228,226,251,0) 52%),radial-gradient(900px 700px at 52% 120%,#fbe6ef 0%,rgba(251,230,239,0) 55%),linear-gradient(180deg,#eef1f6,#e9edf4);
}
body.theme-violet{
  --brand:#7c3aed;--brand-600:#6d28d9;--brand-700:#5b21b6;--brand-50:#f5f3ff;--brand-100:#ede9fe;--brand-200:#ddd6fe;--brand-ink:#4c1d95;
  --brand-grad:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 55%,#6d28d9 100%);
  --shadow-brand:0 8px 20px -8px rgba(124,58,237,.42);
  --bg-grad:radial-gradient(1150px 560px at 6% -14%,#ede9fe 0%,rgba(237,233,254,0) 55%),radial-gradient(1050px 540px at 99% -10%,#e0f2fe 0%,rgba(224,242,254,0) 52%),radial-gradient(900px 700px at 52% 120%,#fbe6ef 0%,rgba(251,230,239,0) 55%),linear-gradient(180deg,#f0eef6,#eae8f4);
}
body.theme-rose{
  --brand:#e11d48;--brand-600:#be123c;--brand-700:#9f1239;--brand-50:#fff1f2;--brand-100:#ffe4e6;--brand-200:#fecdd3;--brand-ink:#881337;
  --brand-grad:linear-gradient(135deg,#f43f5e 0%,#e11d48 55%,#be123c 100%);
  --shadow-brand:0 8px 20px -8px rgba(225,29,72,.42);
  --bg-grad:radial-gradient(1150px 560px at 6% -14%,#ffe4e6 0%,rgba(255,228,230,0) 55%),radial-gradient(1050px 540px at 99% -10%,#e4e2fb 0%,rgba(228,226,251,0) 52%),radial-gradient(900px 700px at 52% 120%,#fef3c7 0%,rgba(254,243,199,0) 55%),linear-gradient(180deg,#f6eef0,#f4e9ec);
}
body.theme-orange{
  --brand:#ea580c;--brand-600:#c2410c;--brand-700:#9a3412;--brand-50:#fff7ed;--brand-100:#ffedd5;--brand-200:#fed7aa;--brand-ink:#7c2d12;
  --brand-grad:linear-gradient(135deg,#f97316 0%,#ea580c 55%,#c2410c 100%);
  --shadow-brand:0 8px 20px -8px rgba(234,88,12,.42);
  --bg-grad:radial-gradient(1150px 560px at 6% -14%,#ffedd5 0%,rgba(255,237,213,0) 55%),radial-gradient(1050px 540px at 99% -10%,#e4e2fb 0%,rgba(228,226,251,0) 52%),radial-gradient(900px 700px at 52% 120%,#fde68a 0%,rgba(253,230,138,0) 55%),linear-gradient(180deg,#f6f1ea,#f4ede4);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{font-family:var(--font);background:var(--bg);color:var(--text);
  line-height:1.5;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:1rem;color:var(--text)}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.02em;color:var(--text)}
.tabular{font-variant-numeric:tabular-nums lining-nums}
::selection{background:var(--brand-100);color:var(--brand-ink)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm)}

/* ---------- Layout ---------- */
.app{display:flex;min-height:100dvh}
.sidebar{width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);
  position:fixed;top:0;left:0;height:100dvh;display:flex;flex-direction:column;z-index:var(--z-nav)}
.main{margin-left:var(--sidebar-w);flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg-grad);background-attachment:fixed}
.content{padding:30px 34px 64px;max-width:1380px;width:100%;margin:0 auto}
@media(max-width:1100px){.content{padding:24px 22px 56px}}

/* ---------- Brand / Sidebar ---------- */
.brand{display:flex;align-items:center;gap:11px;padding:22px 22px 18px}
.brand-mark{width:38px;height:38px;border-radius:11px;background:var(--brand-grad);
  display:grid;place-items:center;color:#fff;flex-shrink:0;
  box-shadow:var(--shadow-brand), inset 0 1px 0 rgba(255,255,255,.25)}
.brand-mark svg{width:20px;height:20px}
.brand-name{font-family:var(--display);font-weight:600;font-size:1.18rem;letter-spacing:-.025em;color:var(--text)}
.nav{padding:8px 14px;flex:1;overflow-y:auto}
.nav-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-3);padding:16px 10px 7px}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;
  color:var(--text-2);font-weight:500;font-size:.92rem;margin-bottom:1px;
  transition:background .16s var(--ease),color .16s var(--ease);position:relative}
.nav-item svg{width:18px;height:18px;flex-shrink:0;opacity:.85}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.active{background:linear-gradient(90deg,var(--brand-50),rgba(238,246,243,.4));color:var(--brand-700);font-weight:600}
.nav-item.active svg{opacity:1}
.nav-item.active::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--brand-grad)}
.nav-foot{padding:14px;border-top:1px solid var(--border)}
.user-chip{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--brand-100);color:var(--brand-700);
  display:grid;place-items:center;font-weight:600;font-size:.85rem;font-family:var(--display)}

/* ---------- Topbar ---------- */
.topbar{height:66px;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;
  padding:0 34px;position:sticky;top:0;z-index:var(--z-sticky)}
@media(max-width:1100px){.topbar{padding:0 22px}}
.topbar h1{font-size:1.3rem;font-weight:600;letter-spacing:-.025em}
.topbar .sub{color:var(--text-3);font-size:.84rem;font-weight:450;margin-top:1px}
.menu-btn{display:none}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(16,32,40,.04), 0 12px 30px -18px rgba(16,32,40,.30)}
.card-pad{padding:22px}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,var(--brand-50),transparent)}
.card-head h3{font-size:1.02rem;font-weight:600;letter-spacing:-.015em}
.grid{display:grid;gap:18px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

/* ---------- Stat cards ---------- */
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 20px 18px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition:box-shadow .24s var(--ease),transform .24s var(--ease),border-color .24s var(--ease)}
/* subtle top accent bar — colour set per icon variant below */
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--brand-grad);opacity:.9}
.stat:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--border-strong)}
.stat-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:15px;color:#fff;
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.25)}
.stat-ico svg{width:21px;height:21px}
.stat-label{color:var(--text-2);font-size:.82rem;font-weight:550;margin-bottom:5px;letter-spacing:-.01em}
.stat-value{font-family:var(--num);font-size:1.82rem;font-weight:600;letter-spacing:-.03em;line-height:1.05}
.stat-sub{font-size:.78rem;color:var(--text-3);margin-top:6px;font-weight:450}

/* Icon tiles now use gradients + white glyphs for a premium, multi-colour feel.
   Each colour also tints that card's top accent bar. */
.ico-blue{background:var(--brand-grad)}
.stat:has(.ico-blue)::before{background:var(--brand-grad)}
.ico-green{background:var(--success-grad)}
.stat:has(.ico-green)::before{background:var(--success-grad)}
.ico-amber{background:var(--amber-grad)}
.stat:has(.ico-amber)::before{background:var(--amber-grad)}
.ico-red{background:var(--danger-grad)}
.stat:has(.ico-red)::before{background:var(--danger-grad)}
.ico-indigo{background:var(--indigo-grad)}
.stat:has(.ico-indigo)::before{background:var(--indigo-grad)}
.ico-violet{background:var(--violet-grad)}
.stat:has(.ico-violet)::before{background:var(--violet-grad)}
.ico-rose{background:var(--rose-grad)}
.stat:has(.ico-rose)::before{background:var(--rose-grad)}
.ico-teal{background:var(--teal-grad)}
.stat:has(.ico-teal)::before{background:var(--teal-grad)}
.ico-gray{background:linear-gradient(135deg,#8a938f,#6b7572)}
.stat:has(.ico-gray)::before{background:linear-gradient(135deg,#8a938f,#6b7572)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:0 16px;height:42px;border-radius:var(--radius-sm);font-weight:550;font-size:.9rem;
  letter-spacing:-.01em;white-space:nowrap;
  transition:background .16s var(--ease),box-shadow .16s var(--ease),transform .08s var(--ease),border-color .16s var(--ease)}
.btn svg{width:17px;height:17px}
.btn:active{transform:translateY(.5px)}
.btn-primary{background:var(--brand-grad);color:#fff;box-shadow:var(--shadow-brand), inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .16s var(--ease),box-shadow .2s var(--ease),filter .2s var(--ease)}
.btn-primary:hover{filter:brightness(1.06);box-shadow:0 10px 24px -8px rgba(5,150,105,.55), inset 0 1px 0 rgba(255,255,255,.2);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0);filter:brightness(.96)}
.btn-ghost{background:var(--surface);color:var(--text);border:1px solid var(--border-strong)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--text-3)}
.btn-success{background:var(--success);color:#fff}
.btn-success:hover{filter:brightness(.96)}
.btn-danger{background:var(--danger-50);color:var(--danger)}
.btn-danger:hover{background:#f7ddd9}
.btn-sm{height:34px;padding:0 11px;font-size:.84rem;border-radius:7px}
.btn-lg{height:50px;padding:0 22px;font-size:.98rem}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-block{width:100%}

/* ---------- Forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:.84rem;font-weight:550;color:var(--text-2);margin-bottom:6px;letter-spacing:-.01em}
.input,.select{width:100%;padding:0 13px;height:44px;border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--text);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
textarea.input{padding:11px 13px;height:auto;line-height:1.5}
.input:focus,.select:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.input::placeholder{color:var(--text-3)}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7572' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:38px}
.hint{font-size:.78rem;color:var(--text-3);margin-top:6px;line-height:1.45}
.row{display:flex;gap:14px}
.row>*{flex:1}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.045em;
  color:var(--text-3);padding:11px 18px;border-bottom:1px solid var(--border);background:var(--surface-2)}
td{padding:13px 18px;border-bottom:1px solid var(--border);font-size:.9rem;color:var(--text)}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s var(--ease)}
tbody tr:hover{background:var(--surface-2)}
.t-right{text-align:right}.t-center{text-align:center}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:.74rem;font-weight:600;letter-spacing:-.005em;line-height:1.4}
.badge-green{background:var(--success-50);color:var(--success)}
.badge-amber{background:var(--warning-50);color:var(--warning)}
.badge-red{background:var(--danger-50);color:var(--danger)}
.badge-gray{background:var(--surface-3);color:var(--text-2)}
.badge-blue{background:var(--brand-50);color:var(--brand-700)}
.badge-indigo{background:var(--indigo-50);color:var(--indigo)}
.badge-violet{background:var(--violet-50);color:var(--violet)}
.badge-rose{background:var(--rose-50);color:var(--rose)}
.badge-teal{background:var(--teal-50);color:var(--teal)}

/* ---------- Tabs ---------- */
.tabs{display:inline-flex;gap:3px;background:var(--surface-3);padding:3px;border-radius:10px}
.tab{padding:8px 15px;border-radius:7px;font-weight:550;font-size:.87rem;color:var(--text-2);
  transition:all .16s var(--ease)}
.tab:hover{color:var(--text)}
.tab.active{background:var(--surface);color:var(--brand-700);box-shadow:var(--shadow-xs);font-weight:600}

/* ---------- Modal ---------- */
.modal-scrim{position:fixed;inset:0;background:rgba(16,32,29,.42);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:var(--z-scrim);
  padding:22px;
  padding-bottom:calc(22px + env(safe-area-inset-bottom));
  animation:fade .18s var(--ease)}
.modal-scrim.show{display:flex}
.modal{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  width:100%;max-width:520px;max-height:90vh;max-height:90dvh;z-index:var(--z-modal);
  display:flex;flex-direction:column;overflow:hidden;
  animation:pop .24s var(--ease)}
.modal-lg{max-width:780px}
/* Full-size form modal (e.g. Add/Edit Product) — roomy, with large, legible fields */
.modal-full{max-width:1140px;width:94vw;max-height:94vh}
@media(min-width:900px){ .modal-full{width:90vw} }
.modal-full .input,.modal-full .select{height:46px;font-size:1rem}
.modal-full .modal-body table .input,.modal-full .modal-body table .select{height:42px;font-size:.96rem;padding:9px 11px}
.modal-full .modal-body table td{padding:7px 7px;vertical-align:middle}
.modal-full .modal-body table th{font-size:.78rem}
.modal-full .modal-body .table-wrap{overflow-x:auto}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;
  border-bottom:1px solid var(--border);flex-shrink:0}
.modal-head h3{font-size:1.16rem;font-weight:600;letter-spacing:-.02em}
.modal-body{padding:24px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto;min-height:0}
.modal-foot{padding:18px 24px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;
  flex-shrink:0;background:var(--surface)}
.x-btn{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:var(--text-3);
  transition:background .14s,color .14s}
.x-btn:hover{background:var(--surface-2);color:var(--text)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.97) translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Toast ---------- */
.toasts{position:fixed;bottom:24px;right:24px;z-index:var(--z-toast);display:flex;flex-direction:column;gap:10px}
.toast{background:var(--text);color:#fff;padding:13px 17px;border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);font-size:.9rem;font-weight:500;display:flex;align-items:center;gap:10px;
  animation:slidein .24s var(--ease);max-width:360px}
.toast svg{width:18px;height:18px;flex-shrink:0}
.toast.ok{background:var(--brand-700)}.toast.err{background:var(--danger)}
@keyframes slidein{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}

/* ---------- Empty state ---------- */
.empty{text-align:center;padding:50px 24px;color:var(--text-3)}
.empty svg{width:46px;height:46px;margin-bottom:13px;opacity:.45}
.empty h4{font-size:1rem;font-weight:600;color:var(--text-2);margin-bottom:4px}

/* ---------- Login ---------- */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:22px;
  background:radial-gradient(120% 120% at 50% -10%, var(--brand-50) 0%, var(--bg) 55%)}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);width:100%;max-width:404px;padding:38px 34px}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:13px;margin-bottom:30px}
.login-brand .brand-mark{width:54px;height:54px;border-radius:15px}
.login-brand .brand-mark svg{width:28px;height:28px}

/* ---------- Utilities ---------- */
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}
.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.muted{color:var(--text-2)}.muted-3{color:var(--text-3)}
.fw-600{font-weight:600}.fw-700{font-weight:700}
.fs-sm{font-size:.85rem}.fs-lg{font-size:1.1rem}
.text-success{color:var(--success)}.text-danger{color:var(--danger)}.text-warning{color:var(--warning)}
.w-full{width:100%}.hidden{display:none!important}
.tabular{font-variant-numeric:tabular-nums}

/* ---------- POS specific ---------- */
.pos{display:grid;grid-template-columns:1fr 404px;gap:20px;align-items:start}
/* New billing layout: search on top (full width), then Quick Add (left) and
   Cart (right) on desktop. On mobile everything stacks as Search → Cart →
   Quick Add, matching DOM order. */
.pos2{display:grid;grid-template-columns:1fr 404px;grid-template-rows:auto auto;gap:20px;align-items:start}
.pos2-search{grid-column:1 / -1}
.pos2-grid{grid-column:1;grid-row:2}
.pos2-cart{grid-column:2;grid-row:2}
@media(max-width:1024px){
  .pos2{grid-template-columns:1fr}
  .pos2-search,.pos2-grid,.pos2-cart{grid-column:1}
  .pos2-search{grid-row:1}
  .pos2-cart{grid-row:2}
  .pos2-grid{grid-row:3}
}
.pos-search{position:relative}
.pos-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  max-height:344px;overflow-y:auto;z-index:var(--z-dropdown);display:none}
.pos-results.show{display:block}
.pos-result{padding:12px 15px;display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;border-bottom:1px solid var(--border);transition:background .12s var(--ease)}
.pos-result:last-child{border-bottom:none}
.pos-result:hover,.pos-result.hl{background:var(--brand-50)}
.cart{position:sticky;top:88px}
.cart-item{display:flex;align-items:center;gap:11px;padding:13px 0;border-bottom:1px solid var(--border)}
.cart-item img{max-width:38px;max-height:38px}
.ci-img{width:38px;height:38px;border-radius:6px;object-fit:cover;flex-shrink:0}
.ci-noimg{background:var(--surface-3)}
.ci-main{flex:1;min-width:0}
.ci-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-unit{margin-top:4px}
.ci-unit .select{width:auto;max-width:100%;padding-right:28px}
.ci-controls{display:flex;align-items:center;gap:11px;flex-shrink:0}
.ci-total{width:74px;text-align:right}
.qty-ctrl{display:flex;align-items:center;border:1px solid var(--border-strong);border-radius:8px;overflow:hidden}
.qty-ctrl button{width:30px;height:32px;display:grid;place-items:center;color:var(--text-2);font-weight:600;
  transition:background .12s}
.qty-ctrl button:hover{background:var(--surface-2);color:var(--text)}
.qty-ctrl input{width:42px;text-align:center;border:none;border-left:1px solid var(--border);
  border-right:1px solid var(--border);height:32px;padding:0}
.qty-ctrl input:focus{outline:none}
.summary-row{display:flex;justify-content:space-between;padding:7px 0;font-size:.92rem;color:var(--text-2)}
.summary-row.total{font-family:var(--num);font-size:1.32rem;font-weight:600;color:var(--text);
  letter-spacing:-.02em;padding-top:14px;margin-top:6px;border-top:1.5px solid var(--border)}

/* ---- Billing page refresh ---- */
/* Cart card stands out as the focal "checkout" panel */
.pos2-cart .card{border:1.5px solid var(--brand-200);box-shadow:0 6px 22px rgba(5,150,105,.12)}
.pos2-cart .card-head h3{position:relative;padding-left:13px}
.pos2-cart .card-head h3::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:18px;border-radius:3px;background:var(--brand)}
/* the totals sit in a soft tinted tray so the amount reads clearly */
#cart-summary .mt-2{background:linear-gradient(180deg,var(--brand-50),transparent);
  border:1px solid var(--brand-100);border-radius:12px;padding:12px 14px;margin-top:14px}
#cart-summary .summary-row.total{border-top-color:var(--brand-200)}
/* big, confident complete-sale button */
#checkoutBtn{border-radius:13px;font-size:1.02rem;letter-spacing:.01em;
  box-shadow:0 6px 16px rgba(16,150,90,.28)}
#checkoutBtn:active{transform:translateY(1px)}
/* search card gets a subtle lift */
.pos2-search .card{box-shadow:var(--shadow-md)}
.pos2-search .input{height:48px;font-size:1rem}
/* Quick Add tiles a touch more tactile */
.pos2-grid .prod-tile{border-radius:14px}
.pos2-grid .prod-tile:hover{transform:translateY(-2px)}
@media(max-width:1024px){
  /* on mobile the cart isn't sticky (it's a normal stacked card) */
  .pos2-cart.cart{position:static;top:auto}
}

/* ====== Full-screen POS (New Sale) ======
   Hide the app sidebar so billing uses the whole width; the menu button in
   the topbar still slides it back in as an overlay. Quick Add fills the left,
   a big Cart sits beside it, and the Total + Complete Sale dock the bottom-right. */
body.pos-full .sidebar{transform:translateX(-100%);transition:transform .26s var(--ease);box-shadow:var(--shadow-lg)}
body.pos-full .sidebar.open{transform:none}
body.pos-full .main{margin-left:0}
body.pos-full .menu-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;color:var(--text-2)}
body.pos-full .menu-btn:hover{background:var(--surface-2)}
body.pos-full .scrim-nav{position:fixed;inset:0;background:rgba(16,32,29,.4);z-index:45;display:none}
body.pos-full .scrim-nav.show{display:block}
body.pos-full .content{max-width:none;padding:10px 22px 110px}
/* Reclaim vertical space on the sale screen: thin topbar, no subtitle */
body.pos-full .topbar{height:46px}
body.pos-full .topbar h1{font-size:1.02rem}
body.pos-full .topbar .sub{display:none}
/* Trim the scan/search bar */
body.pos-full .pos2{gap:12px}
body.pos-full .pos2-search .card-pad{padding:8px 12px}
body.pos-full .pos2-search .input{height:42px;font-size:.95rem}
body.pos-full .pos2-search .hint{display:none}
body.pos-full #camScanBtn{height:42px !important}
/* Tighter card headers + padding so more products fit */
body.pos-full .pos2-grid .card-head,body.pos-full .pos2-cart .card-head{padding:8px 14px}
body.pos-full .pos2-grid .card-pad{padding:10px 12px}
.pos-dock{display:none}
@media(min-width:1025px){
  body.pos-full .pos2{grid-template-columns:400px minmax(0,1fr)} /* narrow Quick Add, wide Cart */
  body.pos-full .pos2-cart.cart{position:sticky;top:80px}
  body.pos-full #cart-summary > #checkoutBtn{display:none} /* replaced by the fixed dock */
  body.pos-full #payField{display:none}                    /* payment moves to the dock */
  /* Compact Quick Add — small tiles WITH product photos */
  body.pos-full .prod-grid-compact{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
  body.pos-full .prod-tile-compact{padding:7px;border-radius:11px;display:flex;flex-direction:column;gap:4px;text-align:left}
  body.pos-full .prod-tile-compact .pt-c-img{width:100%;height:62px;border-radius:8px;object-fit:cover;background:var(--surface-2);display:grid;place-items:center;color:var(--text-3);flex-shrink:0}
  body.pos-full .prod-tile-compact .pt-c-img svg{width:22px;height:22px}
  body.pos-full .prod-tile-compact .pt-c-name{font-weight:600;font-size:.76rem;line-height:1.2;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  body.pos-full .prod-tile-compact .pt-c-price{color:var(--brand-700);font-weight:600;font-size:.78rem;font-family:var(--num)}
  body.pos-full .prod-tile-compact .pt-c-strike{text-decoration:line-through;color:var(--text-3);font-size:.66rem;font-weight:400;font-family:var(--font)}
  body.pos-full .prod-tile-compact.pt-gen{border-color:var(--brand-200);background:var(--brand-50)}
  body.pos-full .prod-tile-compact.pt-gen .pt-c-img{background:var(--surface);border:1px dashed var(--brand-200);color:var(--brand-700)}
  /* Quick Add scrolls internally so the page stays one window */
  body.pos-full .pos2-grid .card-pad{max-height:calc(100vh - 162px);overflow-y:auto}
  /* keep the whole sale in one window: the item list scrolls inside the cart
     while the customer/discount/totals stay put */
  body.pos-full #cart-items{max-height:calc(100vh - 350px);min-height:140px;overflow-y:auto;overflow-x:hidden;margin-right:-6px;padding-right:6px}
  body.pos-full .pos-dock.show{
    display:flex;align-items:center;gap:20px;
    position:fixed;right:26px;bottom:24px;z-index:var(--z-sticky);
    background:var(--surface);border:1.5px solid var(--brand-200);border-radius:18px;
    padding:13px 16px 13px 22px;min-width:440px;max-width:calc(100vw - 52px);
    box-shadow:0 18px 44px -18px rgba(5,150,105,.5), 0 8px 20px -12px rgba(16,32,40,.28);
    animation:dockIn .26s var(--spring)}
  .pos-dock .pd-total{font-family:var(--num);font-size:1.7rem;font-weight:700;letter-spacing:-.03em;line-height:1.05}
  .pos-dock .pd-label{font-size:.72rem;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
  .pos-dock #payMethodDock{height:44px;min-width:108px;border-radius:12px;margin-left:auto;font-weight:600}
  .pos-dock #checkoutBtnDock{white-space:nowrap;border-radius:13px}
}
@keyframes dockIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* Keyboard payment-mode popup (Enter to open, Enter to complete) */
.pay-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.pay-opt{padding:18px 14px;border:1.5px solid var(--border-strong);border-radius:12px;font-weight:600;
  font-size:1.02rem;background:var(--surface);color:var(--text);display:flex;align-items:center;justify-content:center;gap:8px;transition:border-color .14s,background .14s}
.pay-opt:hover{border-color:var(--brand-200)}
.pay-opt.sel{border-color:var(--brand);background:var(--brand-50);color:var(--brand-700);box-shadow:var(--ring)}
.pay-opt .pay-key{font-size:.7rem;color:var(--text-3);font-weight:600;border:1px solid var(--border);border-radius:5px;padding:0 5px}
/* ---- Single-window POS (desktop) ----
   Keep the whole sale on one screen: the cart's item list scrolls internally
   so the totals and Complete Sale button stay visible no matter how many lines
   are added, and the Quick Add grid scrolls within its own card. */
@media(min-width:1025px){
  /* The cart item LIST scrolls inside itself; the totals + Complete Sale button
     sit below it and are always fully visible (never clipped). max() keeps a
     sensible minimum height on short screens. */
  #cart-items{max-height:max(150px, calc(100vh - 440px));overflow-y:auto;overflow-x:hidden;margin-right:-8px;padding-right:8px}
  .pos2-cart .cart-item{padding:9px 0}      /* tighter rows = more items visible */
  /* Quick Add grid scrolls within its card so the page stays near one screen. */
  .pos2-grid>.card>.card-pad{max-height:max(220px, calc(100vh - 210px));overflow-y:auto}
}
.qty-ctrl input{width:48px}                  /* a little wider for values like 1.25 */

/* product tiles for POS quick add */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.prod-tile{border:1px solid var(--border);border-radius:var(--radius);padding:14px;cursor:pointer;
  background:var(--surface);transition:border-color .16s var(--ease),box-shadow .16s var(--ease),transform .1s var(--ease)}
.prod-tile:hover{border-color:var(--brand-200);box-shadow:var(--shadow-md)}
.prod-tile:active{transform:scale(.985)}
.prod-tile .pt-name{font-weight:600;font-size:.88rem;margin-bottom:4px;line-height:1.3;letter-spacing:-.01em}
.prod-tile .pt-price{color:var(--brand-700);font-weight:600;font-family:var(--num)}
.prod-tile .pt-stock{font-size:.74rem;color:var(--text-3);margin-top:2px}

/* Quick Add: clean single-line layout (image toggle OFF) — when images
   are off there's nothing to lay out vertically, so each product becomes
   one compact row that spans the full grid width instead of a square tile. */
#grid:has(.prod-tile-line){grid-template-columns:1fr}
.prod-grid-line{grid-template-columns:1fr !important}
.prod-tile-line{padding:11px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.pt-line-name{font-weight:600;font-size:.88rem;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.pt-line-meta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.pt-line-price{color:var(--brand-700);font-weight:700;font-family:var(--num);font-size:.86rem}
.pt-line-stock{font-size:.72rem;color:var(--text-3);white-space:nowrap}
@media (max-width:480px){
  .pt-line-meta{gap:8px}
  .pt-line-stock{display:none} /* keep the line truly clean on very small phones */
}

/* barcode label */
.label-card{border:1px dashed var(--border-strong);border-radius:var(--radius-sm);padding:16px;
  text-align:center;background:var(--surface)}
.label-card svg{max-width:100%}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .pos{grid-template-columns:1fr}
  .cart{position:static}
}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);transition:transform .26s var(--ease);box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .menu-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;color:var(--text-2)}
  .menu-btn:hover{background:var(--surface-2)}
  .topbar{padding:0 16px}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .row{flex-direction:column;gap:0}
  .row>*{width:100%}
  .scrim-nav{position:fixed;inset:0;background:rgba(16,32,29,.4);z-index:45;display:none}
  .scrim-nav.show{display:block}
  /* Cart item reflows: top row = image + name + remove; bottom row = unit + qty + total */
  .cart-item{flex-wrap:wrap;row-gap:10px;align-items:flex-start}
  .ci-main{flex:1 1 auto;order:1}
  .ci-controls{order:3;width:100%;justify-content:space-between;gap:8px}
  .cart-item>.x-btn{display:none} /* (none here) */
  .ci-controls .ci-total{flex:1;width:auto}

  /* ---- Table-to-card reflow ----
     Any table whose cells carry a data-label attribute switches from a
     row/column grid to a stack of bordered cards — each cell becomes its
     own labelled line. Tables WITHOUT data-label are untouched (still
     side-scroll), so converting pages one at a time is zero-risk to the
     rest. Tag the table itself with class="cards-mobile" to opt in. */
  table.cards-mobile thead{display:none}
  table.cards-mobile, table.cards-mobile tbody, table.cards-mobile tr, table.cards-mobile td{display:block;width:auto}
  table.cards-mobile tr{
    border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px;
    padding:10px 14px;background:var(--surface);box-shadow:var(--shadow-xs);
  }
  table.cards-mobile tr:hover{background:var(--surface)}
  table.cards-mobile td{
    border-bottom:none;padding:6px 0;display:flex;align-items:flex-start;
    justify-content:space-between;gap:12px;font-size:.88rem;
  }
  table.cards-mobile td[data-label]::before{
    content:attr(data-label);flex-shrink:0;font-size:.7rem;font-weight:600;
    text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);
    padding-top:1px;
  }
  table.cards-mobile td:not([data-label])::before{ content:none }
  /* a cell can opt out of the label row (e.g. a full-width name/title or
     an actions row of buttons) by adding data-label="" (empty) or the
     no-label helper class */
  table.cards-mobile td.card-full{display:block;text-align:left}
  table.cards-mobile td.card-full::before{content:none}
  table.cards-mobile td.card-actions{justify-content:flex-end;flex-wrap:wrap;padding-top:10px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---- Mobile sticky cart summary bar ---- */
.mobile-cart-bar{display:none}
@media(max-width:1024px){
  .mobile-cart-bar.show{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
    background:var(--ink,#0f172a);color:#fff;border-radius:14px;padding:12px 14px;
    box-shadow:0 8px 24px rgba(0,0,0,.22);z-index:60;
  }
  .mcb-info{display:flex;flex-direction:column;gap:1px;min-width:0}
  .mcb-qty{font-size:.72rem;color:rgba(255,255,255,.7)}
  .mcb-total{font-size:1.05rem;font-weight:700}
  .mcb-view{flex-shrink:0;padding:9px 18px;font-size:.85rem}
  body.has-cart-bar .content{padding-bottom:84px}
}

/* ---- Notification bell + panel (shop & admin topbar) ---- */
.notif-wrap{position:relative;display:inline-flex}
.notif-bell{position:relative;width:40px;height:40px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
.notif-bell:hover{background:var(--surface-2);color:var(--text)}
.notif-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger);color:#fff;font-size:.66rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--surface)}
.notif-panel{position:absolute;top:48px;right:0;width:340px;max-width:88vw;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 50px rgba(15,23,42,.18);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;z-index:60;overflow:hidden}
.notif-panel.show{opacity:1;visibility:visible;transform:translateY(0)}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--border);font-weight:650;font-size:.86rem}
.notif-readall{border:0;background:none;color:var(--brand-700);font-size:.74rem;font-weight:600;cursor:pointer}
.notif-readall:hover{text-decoration:underline}
.notif-list{max-height:62vh;overflow:auto}
.notif-item{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-bottom:1px solid var(--border);text-decoration:none;color:inherit;cursor:pointer}
.notif-item:hover{background:var(--surface-2)}
.notif-item.unread{background:var(--brand-50)}
.notif-item.unread:hover{background:var(--brand-100)}
.notif-ico{flex-shrink:0;font-size:1.05rem;line-height:1.3}
.notif-tx{min-width:0;display:flex;flex-direction:column;gap:1px}
.notif-ti{font-weight:600;font-size:.82rem;color:var(--text)}
.notif-bo{font-size:.76rem;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.notif-dt{font-size:.68rem;color:var(--text-3);margin-top:2px}
.notif-empty{padding:26px 14px;text-align:center;color:var(--text-3);font-size:.82rem}

/* ---- Ticket chat bubbles ---- */
.chat-msg{max-width:82%;padding:8px 11px;border-radius:12px;margin-bottom:7px}
.chat-msg .chat-meta{font-size:.68rem;opacity:.7;margin-bottom:2px}
.chat-msg.them{background:var(--surface-2);border:1px solid var(--border);border-bottom-left-radius:4px;margin-right:auto}
.chat-msg.me{background:var(--brand-50);border:1px solid var(--brand-200);border-bottom-right-radius:4px;margin-left:auto}

/* ---- Mobile topbar controls (keep bell + page actions usable, never break layout) ---- */
.hide-sm{display:inline}
@media(max-width:768px){
  .topbar{gap:8px}
  .topbar h1{font-size:1.08rem}
  .topbar>div:last-child{min-width:0;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .topbar>div:last-child::-webkit-scrollbar{display:none}
  .topbar .btn{padding:8px 10px;font-size:.78rem;white-space:nowrap;flex-shrink:0}
  .notif-bell{flex-shrink:0;width:38px;height:38px}
  /* fixed so the dropdown isn't clipped by the scrollable toolbar */
  .notif-panel{position:fixed;top:56px;right:8px;left:auto;width:min(340px,92vw)}
  .hide-sm{display:none!important}
  .modal{width:94vw;max-width:94vw}
}
@media(max-width:480px){
  .topbar .btn span:not(.hide-sm):not(.notif-badge){font-size:.74rem}
  .card-pad{padding:14px}
}

/* ---- DuQan One logo placements ---- */
.brand-mark.has-logo{background:none;box-shadow:none;padding:0}
.brand-mark.has-logo img{width:100%;height:100%;object-fit:contain;display:block}
.login-logo{width:186px;max-width:62%;height:auto;display:block}
@media(max-width:520px){ .login-logo{width:150px;max-width:58%} }

/* ---- Copyright footer ---- */
.app-foot{text-align:center;color:var(--text-3);font-size:.74rem;letter-spacing:.01em;padding:16px 16px 24px}
body.pos-full .app-foot{display:none}
.login-foot{text-align:center;color:var(--text-3);font-size:.76rem;margin-top:18px}