/* ============================================================
   HisaabBox Stitch Pro — Premium UI (Frontend Redesign)
   Blue primary + polished light/dark. Icons fixed. Dense layout.
   ============================================================ */

:root, [data-theme="light"] {
  --primary: #4F46E5;
  --primary-hover: #4338CA;
  --primary-soft: #EEF2FF;
  --primary-ring: rgba(79, 70, 229, 0.22);
  --primary-text: #3730A3;

  --success: #059669;
  --success-soft: #ECFDF5;
  --warning: #D97706;
  --warning-soft: #FFFBEB;
  --danger: #DC2626;
  --danger-soft: #FEF2F2;
  --info: #0284C7;
  --info-soft: #E0F2FE;

  --bg: #F1F4F9;
  --bg-elevated: #FFFFFF;
  --bg-soft: #F7F9FC;
  --bg-hover: #EEF2F7;
  --bg-input: #FFFFFF;

  --border: #E2E8F0;
  --border-strong: #CBD5E1;

  --text: #0F172A;
  --text-2: #334155;
  --muted: #64748B;
  --dim: #94A3B8;

  --sidebar-bg: #FFFFFF;
  --sidebar-border: #E2E8F0;
  --sidebar-text: #475569;
  --sidebar-muted: #94A3B8;
  --sidebar-hover: #F1F5F9;
  --sidebar-active: #4F46E5;
  --sidebar-active-text: #FFFFFF;

  --topbar-bg: rgba(255,255,255,0.86);
  --shadow-xs: 0 1px 2px rgba(15,23,42,.05);
  --shadow-sm: 0 2px 8px rgba(15,23,42,.06);
  --shadow: 0 8px 24px rgba(15,23,42,.08);
  --shadow-lg: 0 20px 48px rgba(15,23,42,.12);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --radius-lg: 16px;
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 78px;
  --topbar-h: 60px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --icon: 18px;
}

[data-theme="dark"] {
  --primary: #6366F1;
  --primary-hover: #818CF8;
  --primary-soft: rgba(99,102,241,.14);
  --primary-ring: rgba(99,102,241,.28);
  --primary-text: #A5B4FC;

  --success: #34D399;
  --success-soft: rgba(52,211,153,.12);
  --warning: #FBBF24;
  --warning-soft: rgba(251,191,36,.12);
  --danger: #F87171;
  --danger-soft: rgba(248,113,113,.12);
  --info: #38BDF8;
  --info-soft: rgba(56,189,248,.12);

  --bg: #0B0F14;
  --bg-elevated: #121820;
  --bg-soft: #0F141B;
  --bg-hover: #1A2230;
  --bg-input: #0F141B;

  --border: #243041;
  --border-strong: #334155;

  --text: #E8EEF6;
  --text-2: #C7D2E0;
  --muted: #8B9BB0;
  --dim: #64748B;

  --sidebar-bg: #0D1219;
  --sidebar-border: #1C2533;
  --sidebar-text: #A8B4C6;
  --sidebar-muted: #6B7A90;
  --sidebar-hover: #161E2A;
  --sidebar-active: #4F46E5;
  --sidebar-active-text: #FFFFFF;

  --topbar-bg: rgba(13,18,25,.88);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
  --shadow: 0 10px 28px rgba(0,0,0,.4);
  --shadow-lg: 0 24px 56px rgba(0,0,0,.5);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}

/* Tell the browser which palette to paint its OWN widgets with. This is what makes the
   native date picker, the number spinners, the select drop-down list and the page
   scrollbars follow the dark theme instead of staying white. */
:root,[data-theme="light"]{color-scheme:light}
[data-theme="dark"]{color-scheme:dark}

/* Fallback skin for any input that isn't wrapped in a .field / .input class — table
   cells, inline editors, quick filters. Without this they fall back to the browser's
   white box and stand out in dark mode. .field/.input rules are more specific and win. */
/* :where() keeps this at zero specificity so every existing rule — .field input,
   .search input, .cart-line input, the POS editors — still overrides it. */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"])),
:where(select),
:where(textarea){
  background:var(--bg-input);color:var(--text);
  border:1px solid var(--border);border-radius:9px;padding:7px 9px;outline:none
}
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"])):focus,
:where(select):focus,:where(textarea):focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)}
:where(input,textarea)::placeholder{color:var(--dim)}
/* Date / time fields: keep the little calendar glyph visible on a dark surface */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.75)}
input[type="date"],input[type="time"],input[type="month"]{min-height:38px}
button{cursor:pointer;border:none;background:none}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
img{max-width:100%;height:auto;display:block}
.hidden{display:none!important}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* CRITICAL: every SVG icon is fixed size */
svg{width:var(--icon);height:var(--icon);flex:0 0 auto;display:inline-block;vertical-align:middle;stroke:currentColor;fill:none}
.btn svg,.nav-item svg,.btn-icon svg,.search svg,.topbar svg,.sidebar-foot svg,.scan-ready svg{width:18px;height:18px}
.logo svg,.logo-lg svg{width:22px;height:22px}
.stat .stat-ico svg{width:20px;height:20px}
.product-tile .pt-ico svg{width:22px;height:22px}
.empty-ico svg{width:48px;height:48px;opacity:.35}
.modal-hd svg,.toast svg{width:16px;height:16px}

::-webkit-scrollbar{width:10px;height:10px;background:var(--bg-soft)}
::-webkit-scrollbar-track{background:var(--bg-soft)}
::-webkit-scrollbar-corner{background:var(--bg-soft)}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px;border:2px solid var(--bg-soft)}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
*{scrollbar-color:var(--border-strong) var(--bg-soft)}

/* ---------- Shell ---------- */
.app-shell{display:flex;min-height:100vh;background:var(--bg)}

.sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);z-index:50;
  background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);
  display:flex;flex-direction:column;transition:width .2s ease;
}
.sidebar.collapsed{width:var(--sidebar-w-collapsed)}
.sidebar-brand{
  display:flex;align-items:center;gap:12px;padding:16px 16px;
  border-bottom:1px solid var(--sidebar-border);min-height:var(--topbar-h)
}
.sidebar-brand .logo{
  width:40px;height:40px;border-radius:12px;flex:0 0 auto;
  background:linear-gradient(145deg,var(--primary),#3730A3);
  color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;
  box-shadow:0 6px 16px var(--primary-ring);overflow:hidden
}
/* HisaabBox mark used when the shop hasn't uploaded its own logo */
.sidebar-brand .logo.brand-mark{background:none;padding:0}
.sidebar-brand .logo.brand-mark img{width:40px;height:40px;display:block;border-radius:12px}
.sidebar-brand .logo img{width:100%;height:100%;object-fit:contain}
.sidebar-brand .brand-text{overflow:hidden;min-width:0}
.sidebar-brand .brand-text strong{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-brand .brand-text span{display:block;font-size:11px;color:var(--sidebar-muted);margin-top:1px}

.sidebar-nav{flex:1;overflow:auto;padding:10px 10px 16px;scrollbar-width:thin}
.nav-section{
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sidebar-muted);padding:14px 12px 6px
}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:2px;
  border-radius:10px;color:var(--sidebar-text);font-weight:600;font-size:13.5px;
  transition:background .12s,color .12s,transform .12s
}
.nav-item:hover{background:var(--sidebar-hover);color:var(--text)}
.nav-item.active{
  background:var(--sidebar-active);color:var(--sidebar-active-text);
  box-shadow:0 6px 16px var(--primary-ring)
}
.nav-item .nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-section{display:none}
.sidebar.collapsed .nav-item{justify-content:center;padding:12px}
.sidebar.collapsed .sidebar-brand{justify-content:center;padding:16px 10px}

.sidebar-foot{padding:12px;border-top:1px solid var(--sidebar-border)}
.sidebar-foot .btn{width:100%;justify-content:flex-start}
.sidebar.collapsed .sidebar-foot .btn{justify-content:center}
.sidebar.collapsed .sidebar-foot .nav-label{display:none}

.main{margin-left:var(--sidebar-w);flex:1;min-width:0;transition:margin-left .2s ease;display:flex;flex-direction:column}
.sidebar.collapsed ~ .main{margin-left:var(--sidebar-w-collapsed)}

.topbar{
  position:sticky;top:0;z-index:40;height:var(--topbar-h);
  display:flex;align-items:center;gap:12px;padding:0 20px;
  background:var(--topbar-bg);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--border)
}
.topbar-title{font-size:17px;font-weight:750;letter-spacing:-.02em}
.topbar-sub{font-size:12px;color:var(--muted);font-weight:500;margin-left:4px}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px}

/* Hamburger button — hidden on desktop, shown on mobile via the responsive block.
   Selector is .btn.btn-menu (not .btn-menu) on purpose: .btn sets display:inline-flex
   further down this file, and at equal specificity the later rule wins — which is why
   the hamburger was leaking onto desktop. Two classes outrank one. */
.btn.btn-menu{display:none}
/* Dim overlay behind the mobile slide-in sidebar */
.sidebar-backdrop{display:none;position:fixed;inset:0;z-index:45;background:rgba(15,23,42,.5);-webkit-tap-highlight-color:transparent}

.content{padding:20px 22px 32px;max-width:1560px;width:100%;margin:0 auto;flex:1}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 14px;border-radius:10px;border:1px solid transparent;
  font-weight:650;font-size:13.5px;line-height:1;white-space:nowrap;
  transition:background .12s,border-color .12s,box-shadow .12s,transform .08s,color .12s
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 12px var(--primary-ring)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-secondary{background:var(--bg-elevated);border-color:var(--border);color:var(--text);box-shadow:var(--shadow-xs)}
.btn-secondary:hover{background:var(--bg-hover);border-color:var(--border-strong)}
.btn-ghost{background:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--bg-hover);color:var(--text)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger-outline{background:transparent;border:1px solid color-mix(in srgb,var(--danger) 45%, transparent);color:var(--danger)}
.btn-danger-outline:hover{background:var(--danger-soft)}
.btn-success{background:var(--success);color:#fff}
.btn-sm{padding:7px 11px;font-size:12.5px;border-radius:8px;gap:6px}
.btn-lg{padding:12px 18px;font-size:14.5px;border-radius:12px}
.btn-icon{
  width:38px;height:38px;padding:0;border-radius:10px;
  border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-2)
}
.btn-icon:hover{background:var(--bg-hover);color:var(--text)}
.btn-icon.sm{width:32px;height:32px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:12px;font-weight:650;color:var(--muted)}
.field input,.field select,.field textarea,
.input,.select,.textarea{
  width:100%;background:var(--bg-input);border:1px solid var(--border);
  border-radius:10px;padding:10px 12px;outline:none;color:var(--text);
  transition:border-color .12s, box-shadow .12s, background .12s
}
.field input:focus,.field select:focus,.field textarea:focus,
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)
}
.field textarea,.textarea{min-height:92px;resize:vertical}
.check{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--text-2)}
.check input{width:15px;height:15px;accent-color:var(--primary)}

/* ---------- Measurement entry: single-column values + aligned checkbox grid ---------- */
.meas-fields{display:flex;flex-direction:column;gap:14px}
.meas-fields>.field{width:100%}
.meas-check{display:flex;flex-direction:column;gap:6px}
.meas-check-name{font-size:12.5px;font-weight:700;color:var(--text-2)}
.opt-grid{display:grid;gap:8px}
.opt-cell{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:10px;
  padding:9px 11px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--text);
  background:var(--bg-elevated);user-select:none;transition:border-color .12s,background .12s,box-shadow .12s}
.opt-cell:hover{border-color:var(--border-strong);background:var(--bg-hover)}
.opt-cell input{width:16px;height:16px;accent-color:var(--primary);margin:0;flex:0 0 auto}
.opt-cell span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.opt-cell:has(input:checked){border-color:var(--primary);background:var(--primary-ring);box-shadow:0 0 0 1px var(--primary) inset}
@media (max-width: 640px){
  /* On small screens, never squeeze the checkbox grid below 2 columns */
  .opt-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ---------- Template editor: drag-to-reorder fields & options ---------- */
.tpl-field-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.drag-handle{cursor:grab;color:var(--muted);display:inline-flex;align-items:center;line-height:0;
  padding:2px;border-radius:6px;touch-action:none;flex:0 0 auto}
.drag-handle:hover{color:var(--text);background:var(--bg-hover)}
.drag-handle:active{cursor:grabbing}
.tpl-field.dragging,.opt-list [data-oi].dragging{opacity:.45}
.tpl-field.drag-over{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-ring)}
.opt-list [data-oi].drag-over{outline:2px dashed var(--primary);outline-offset:2px;border-radius:6px}

/* ---------- Cards ---------- */
.card{
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xs)
}
.card-hd{
  display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--border)
}
.card-hd h3{font-size:14px;font-weight:750;letter-spacing:-.01em}
.card-bd{padding:16px}

/* ---------- Stats ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stat{
  position:relative;overflow:hidden;
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:16px 16px 14px;box-shadow:var(--shadow-xs)
}
.stat .stat-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.stat .stat-ico{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--primary-soft);color:var(--primary)
}
.stat.success .stat-ico{background:var(--success-soft);color:var(--success)}
.stat.warning .stat-ico{background:var(--warning-soft);color:var(--warning)}
.stat.danger .stat-ico{background:var(--danger-soft);color:var(--danger)}
.stat.info .stat-ico{background:var(--info-soft);color:var(--info)}
.stat .label{font-size:12px;font-weight:650;color:var(--muted)}
.stat .value{font-size:24px;font-weight:800;letter-spacing:-.03em;margin-top:10px;color:var(--text)}
.stat.success .value{color:var(--success)}
.stat.warning .value{color:var(--warning)}
.stat.danger .value{color:var(--danger)}
.stat.info .value{color:var(--info)}
.stat .hint{margin-top:6px;font-size:12px;color:var(--muted)}

/* ---------- Tables ---------- */
.table-wrap{
  overflow:auto;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--bg-elevated)
}
table.data{width:100%;border-collapse:separate;border-spacing:0;min-width:680px}
table.data th,table.data td{
  padding:12px 14px;text-align:left;border-bottom:1px solid var(--border);
  white-space:nowrap;vertical-align:middle
}
table.data th{
  font-size:11px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);background:var(--bg-soft);position:sticky;top:0;z-index:1
}
table.data tbody tr{transition:background .1s}
table.data tbody tr:hover td{background:var(--bg-hover)}
table.data tr:last-child td{border-bottom:none}
/* A <td> made into a flex container stops behaving like a table cell — it no longer
   lines up with the rest of its row, which made the action buttons sit off-centre.
   Keep it a real cell and space the buttons inline instead. */
table.data td.actions{
  display:table-cell;vertical-align:middle;white-space:nowrap;font-size:0
}
table.data td.actions>*{vertical-align:middle;margin-right:6px;font-size:14px}
table.data td.actions>*:last-child{margin-right:0}
table.data .row-sub{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-top:2px}
/* Booking rows whose delivery is due within 2 days (or already late) */
table.data tbody tr.row-duesoon td{background:var(--danger-soft) !important;box-shadow:inset 3px 0 0 var(--danger)}
table.data tbody tr.row-duesoon:hover td{background:color-mix(in srgb,var(--danger) 16%, transparent) !important}
table.data tbody tr.row-duesoon strong{color:var(--danger)}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:4px 9px;
  border-radius:999px;font-size:11.5px;font-weight:700;line-height:1.2;
  border:1px solid transparent
}
.badge-gray{background:var(--bg-soft);color:var(--muted);border-color:var(--border)}
.badge-blue{background:var(--primary-soft);color:var(--primary-text)}
.badge-green{background:var(--success-soft);color:var(--success)}
.badge-amber{background:var(--warning-soft);color:var(--warning)}
.badge-red{background:var(--danger-soft);color:var(--danger)}
.badge-sky{background:var(--info-soft);color:var(--info)}
[data-theme="dark"] .badge-blue{color:var(--primary-text)}

/* ---------- Toolbar / search / tabs ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.sort-ctl{display:inline-flex;align-items:center;gap:6px;font-size:12.5px}
.toolbar .spacer{flex:1}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.page-head h2{font-size:20px;font-weight:800;letter-spacing:-.03em}
.page-head p{color:var(--muted);font-size:13px;margin-top:3px}

.search{
  display:flex;align-items:center;gap:8px;height:40px;min-width:240px;
  padding:0 12px;border-radius:10px;background:var(--bg-elevated);
  border:1px solid var(--border);box-shadow:var(--shadow-xs);color:var(--muted)
}
.search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring);color:var(--text)}
/* ONE highlight per search box. The wrapper owns the border and the focus ring; the
   input inside must never paint its own. Without the :focus/:focus-visible reset the
   generic `input:focus` rule drew a second rounded ring INSIDE the wrapper's ring —
   which read as two search bars stacked on top of each other. */
.search input,
.search input:hover,
.search input:focus,
.search input:focus-visible,
.search input:active{
  border:0;outline:0;box-shadow:none;border-radius:0;
  background:transparent;width:100%;height:100%;padding:0;margin:0;
  color:var(--text);min-height:0
}
.search input::placeholder{color:var(--dim)}
/* Same story for a select or textarea ever dropped inside a search bar */
.search select,.search select:focus,.search textarea,.search textarea:focus{
  border:0;outline:0;box-shadow:none;background:transparent;color:var(--text)
}

.tabs{
  display:inline-flex;gap:4px;padding:4px;border-radius:11px;
  background:var(--bg-soft);border:1px solid var(--border)
}
.tab{
  padding:8px 12px;border-radius:8px;font-weight:650;font-size:13px;
  color:var(--muted);transition:all .12s
}
.tab:hover{color:var(--text)}
.tab.active{background:var(--bg-elevated);color:var(--text);box-shadow:var(--shadow-xs)}

/* ---------- Modal / toast ---------- */
.modal-back{
  position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(2,6,23,.48);backdrop-filter:blur(5px)
}
.modal{
  width:min(720px,100%);max-height:min(90vh,920px);overflow:auto;
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:18px;box-shadow:var(--shadow-lg)
}
.modal.lg{width:min(980px,100%)}
.modal.xl{width:min(1180px,100%)}
.modal-hd{
  display:flex;align-items:center;gap:10px;padding:16px 18px;
  border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg-elevated);z-index:6
}
.modal-hd h3{font-size:16px;font-weight:750;letter-spacing:-.02em}
.modal-bd{padding:18px}
/* The sticky footer must out-rank the sticky <thead> inside any table in the modal
   body (table.data th is position:sticky;z-index:1) — without an explicit z-index
   the table header painted over the Close / Pay / Update Status buttons. */
.modal-ft{
  display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap;
  padding:14px 18px;border-top:1px solid var(--border);
  position:sticky;bottom:0;z-index:6;isolation:isolate;
  background:var(--bg-elevated);box-shadow:0 -8px 18px -8px rgba(2,6,23,.22)
}
/* Same guard the other way round: a sticky table header inside a modal body must
   stay under the modal chrome. */
.modal-bd table.data th{z-index:1}

#toast-root{position:fixed;right:18px;bottom:18px;z-index:120;display:flex;flex-direction:column;gap:8px}
.toast{
  min-width:280px;max-width:400px;padding:12px 14px;border-radius:12px;
  background:var(--bg-elevated);border:1px solid var(--border);border-left:4px solid var(--primary);
  box-shadow:var(--shadow);animation:slideIn .18s ease
}
.toast.success{border-left-color:var(--success)}
.toast.error{border-left-color:var(--danger)}
.toast .t-title{font-weight:750;font-size:13.5px}
.toast .t-msg{color:var(--muted);font-size:12.5px;margin-top:2px}
@keyframes slideIn{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

.empty{padding:48px 20px;text-align:center;color:var(--muted)}
.empty .empty-ico{margin:0 auto 12px;color:var(--dim)}
.empty strong{display:block;color:var(--text);font-size:15px;margin-bottom:6px}

/* ---------- POS ---------- */
.pos-layout{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,1fr);
  gap:14px;align-items:stretch;min-height:calc(100vh - var(--topbar-h) - 48px)
}
.pos-products{display:flex;flex-direction:column;gap:12px;min-width:0}
.pos-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pos-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:12px;overflow:auto;padding:2px 2px 8px;max-height:calc(100vh - 210px)
}
.product-tile{
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;
  padding:14px;cursor:pointer;transition:all .14s;min-height:158px;
  display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-xs);overflow:hidden
}
.product-tile:hover{
  border-color:var(--primary);box-shadow:0 10px 24px var(--primary-ring);
  transform:translateY(-2px)
}
.product-tile .pt-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.product-tile .pt-ico{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--primary-soft);color:var(--primary)
}
.product-tile.service{border-style:dashed}
.product-tile.service .pt-ico{background:var(--info-soft);color:var(--info)}
/* A grid row is sized from each tile's single-line (max-content) height, so a name that
   wraps to two lines used to spill out of the card. Reserving exactly two lines for the
   name keeps every tile the same height and nothing can overflow. Long names are
   ellipsised — the full name is in the tile's title tooltip. */
.product-tile .pt-name{
  font-weight:750;line-height:1.25;font-size:13.5px;color:var(--text);
  min-height:2.5em;overflow:hidden;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical
}
.product-tile .pt-meta{
  font-size:12px;color:var(--muted);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.product-tile .pt-price{margin-top:auto;font-weight:800;font-size:15px;color:var(--primary);white-space:nowrap}

.pos-cart{
  display:flex;flex-direction:column;background:var(--bg-elevated);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;min-height:0;box-shadow:var(--shadow-sm)
}
.pos-cart-hd{
  padding:14px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;background:var(--bg-soft)
}
.pos-cart-hd strong{font-size:14px;font-weight:750}
.pos-cart-items{flex:1;overflow:auto;padding:10px;max-height:calc(100vh - 460px);min-height:180px}
.cart-line{
  display:grid;gap:6px;padding:12px;border-radius:12px;margin-bottom:8px;
  border:1px solid var(--border);background:var(--bg-soft)
}
.cart-line .cl-name{font-weight:750;font-size:13.5px}
.cart-line .cl-meta{font-size:12px;color:var(--muted)}
.cart-line .cl-qty{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}
.cart-line .cl-qty button{
  width:28px;height:28px;border-radius:8px;border:1px solid var(--border);
  background:var(--bg-elevated);font-weight:750;color:var(--text)
}
.cart-line .cl-qty button:hover{background:var(--bg-hover)}
.cart-line .cl-qty input{
  width:56px;text-align:center;border:1px solid var(--border);border-radius:8px;
  padding:6px;background:var(--bg-elevated)
}
.pos-cart-ft{border-top:1px solid var(--border);padding:12px 14px;background:var(--bg-soft)}
.totals-row{display:flex;justify-content:space-between;margin:5px 0;color:var(--text-2);font-size:13.5px}
.totals-row.grand{font-size:18px;font-weight:800;color:var(--text);margin-top:8px;padding-top:8px;border-top:1px dashed var(--border)}

.customer-chip{
  display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:11px;
  background:var(--primary-soft);border:1px solid color-mix(in srgb,var(--primary) 25%, transparent)
}
.customer-chip strong{font-size:13px}
.scan-ready{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;
  color:var(--success);font-weight:750;padding:6px 10px;border-radius:999px;
  background:var(--success-soft);border:1px solid color-mix(in srgb,var(--success) 25%, transparent)
}
.scan-ready i{
  width:8px;height:8px;border-radius:50%;background:var(--success);
  display:inline-block;box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 20%, transparent)
}

/* ---------- Booking calendar ---------- */
.cal-wrap{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xs)}
.cal-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-dow{padding:10px;text-align:center;font-size:11px;font-weight:750;color:var(--muted);background:var(--bg-soft);border-bottom:1px solid var(--border)}
.cal-day{min-height:96px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:8px}
.cal-day:nth-child(7n){border-right:none}
.cal-day.out{background:var(--bg-soft);opacity:.55}
.cal-day.today{background:var(--primary-soft)}
.cal-day.sel{box-shadow:inset 0 0 0 2px var(--primary)}
.cal-day.out{cursor:default}
.cal-day .dnum{font-size:12px;font-weight:750;margin-bottom:6px;color:var(--text-2)}
.cal-pill{
  display:block;font-size:10.5px;padding:3px 6px;border-radius:7px;margin-bottom:3px;
  font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer
}
.cal-pill.received{background:var(--info-soft);color:var(--info)}
.cal-pill.in_progress{background:var(--warning-soft);color:var(--warning)}
.cal-pill.ready{background:var(--success-soft);color:var(--success)}
.cal-pill.delivered{background:var(--bg-soft);color:var(--muted)}
.cal-pill.urgent{outline:2px solid var(--danger)}

.pipeline{display:flex;gap:10px;flex-wrap:wrap}
.pipe{
  flex:1;min-width:120px;background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:14px;padding:14px;cursor:pointer;transition:.14s;box-shadow:var(--shadow-xs)
}
.pipe:hover,.pipe.active{border-color:var(--primary);box-shadow:0 8px 20px var(--primary-ring)}
.pipe .n{font-size:24px;font-weight:800;letter-spacing:-.03em}
.pipe .l{color:var(--muted);font-size:12px;font-weight:700;margin-top:4px}

/* ---------- Split panes / lists ---------- */
.split{display:grid;grid-template-columns:320px 1fr;gap:14px;min-height:520px}
.list-pane{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.list-pane .lp-hd{padding:12px;border-bottom:1px solid var(--border)}
.list-pane .lp-body{overflow:auto;flex:1}
.list-item{padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s}
.list-item:hover,.list-item.active{background:var(--primary-soft)}
.list-item strong{display:block;font-size:13.5px}
.list-item span{color:var(--muted);font-size:12px}

/* Measurement value chips (sample style) */
.naap-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:12px;box-shadow:var(--shadow-xs)}
.naap-card .naap-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.naap-card .naap-head h4{font-size:15px;font-weight:750}
.naap-card .naap-head p{color:var(--muted);font-size:12.5px;margin-top:3px}
.naap-grid-vals{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.naap-val{
  background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;padding:10px 12px
}
.naap-val .k{font-size:10px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.naap-val .v{font-size:18px;font-weight:800;margin-top:4px;letter-spacing:-.02em}

/* Auth */
/* ---------- Sign-in (full-screen split layout) ---------- */
.auth-shell{
  min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1.15fr .85fr;
  background:var(--bg);overflow:hidden
}

/* Left: brand panel */
.auth-art{
  position:relative;overflow:hidden;display:flex;align-items:center;color:#fff;
  background:
    radial-gradient(900px 620px at 12% 8%,  #2B5BFF 0%, transparent 58%),
    radial-gradient(760px 620px at 92% 92%, #0A2FC4 0%, transparent 55%),
    linear-gradient(155deg, #0141EB 0%, #0A2AA8 52%, #061A6E 100%)
}
/* faint blueprint grid */
.auth-art::before{
  content:"";position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(1000px 700px at 30% 40%,#000 0%,transparent 78%);
          mask-image:radial-gradient(1000px 700px at 30% 40%,#000 0%,transparent 78%)
}
/* soft glow orbs */
.auth-art::after{
  content:"";position:absolute;width:520px;height:520px;right:-160px;top:-140px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 62%);filter:blur(6px)
}
/* the global `svg{stroke:currentColor}` rule beats a stroke="" attribute, so the
   artwork's colour is set here rather than on the element */
.stitch-art{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;stroke:#fff;
  /* keep the drawing off the headline — it fades in towards the right */
  -webkit-mask-image:linear-gradient(102deg,transparent 0%,transparent 44%,#000 90%);
          mask-image:linear-gradient(102deg,transparent 0%,transparent 44%,#000 90%)
}
.stitch-art circle[fill="#fff"]{stroke:none}
.stitch-art .run{stroke-dasharray:14 12;animation:stitchRun 3.2s linear infinite}
.stitch-art .run-2{stroke-dasharray:10 14;animation:stitchRun 4.6s linear infinite reverse}
.stitch-art .pulse{animation:orbPulse 5s ease-in-out infinite}
@keyframes stitchRun{to{stroke-dashoffset:-52}}
@keyframes orbPulse{0%,100%{opacity:.30}50%{opacity:.85}}

.auth-art-inner{position:relative;z-index:2;padding:clamp(34px,5vw,74px);color:#fff;max-width:640px}
.auth-brand{display:flex;align-items:center;gap:13px;margin-bottom:clamp(28px,6vh,60px)}
/* a soft white ring lifts the blue mark off the blue panel */
.auth-brand img{
  width:48px;height:48px;border-radius:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.30), 0 0 0 3px rgba(255,255,255,.22)
}
.auth-brand .bt{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.auth-brand .bt span{display:block;font-size:11.5px;font-weight:600;opacity:.72;letter-spacing:.14em;text-transform:uppercase;margin-top:3px}
.auth-art h2{font-size:clamp(30px,3.6vw,46px);font-weight:850;letter-spacing:-.035em;line-height:1.1}
.auth-art h2 em{font-style:normal;background:linear-gradient(90deg,#fff,#A9C4FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-art .lede{margin-top:14px;font-size:clamp(14px,1.15vw,16px);line-height:1.6;opacity:.82;max-width:30em}
.auth-points{list-style:none;margin:clamp(24px,4vh,38px) 0 0;padding:0;display:grid;gap:12px}
.auth-points li{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:600}
.auth-points .tick{
  width:26px;height:26px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25)
}
.auth-points .tick svg{width:15px;height:15px}
.auth-stats{display:flex;gap:26px;margin-top:clamp(26px,5vh,46px);flex-wrap:wrap}
.auth-stats div{min-width:96px}
.auth-stats b{display:block;font-size:22px;font-weight:850;letter-spacing:-.02em}
.auth-stats span{font-size:11.5px;opacity:.72;font-weight:600;letter-spacing:.05em;text-transform:uppercase}

/* Right: form panel */
.auth-form-side{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,4vw,56px);background:var(--bg-elevated)
}
/* a whisper of brand colour so the panel doesn't read as a blank sheet */
.auth-form-side::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 420px at 88% 4%, var(--primary-ring), transparent 62%),
             radial-gradient(520px 380px at 6% 100%, var(--primary-soft), transparent 60%)
}
.auth-form-side>*{position:relative;z-index:1}
.auth-topbar{position:absolute;top:18px;right:20px;display:flex;gap:8px;align-items:center}
.auth-box{width:min(400px,100%)}
.auth-mark{display:none;margin-bottom:18px}
.auth-mark img{width:56px;height:56px;border-radius:16px;box-shadow:0 8px 20px var(--primary-ring)}
.auth-box h1{font-size:clamp(26px,2.4vw,32px);font-weight:850;letter-spacing:-.035em}
.auth-box .sub{color:var(--muted);margin:8px 0 26px;font-size:14px}
.auth-alert{
  display:flex;gap:9px;align-items:flex-start;margin-bottom:18px;padding:11px 13px;border-radius:12px;
  background:var(--danger-soft);border:1px solid var(--danger);color:var(--danger);font-size:13px;font-weight:600
}
.auth-alert svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px}
.in-group{margin-bottom:14px}
.in-group>label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:7px}
.in-wrap{
  display:flex;align-items:center;gap:10px;height:50px;padding:0 14px;border-radius:13px;
  background:var(--bg-input);border:1.5px solid var(--border);
  transition:border-color .14s,box-shadow .14s,background .14s
}
.in-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-ring);background:var(--bg-elevated)}
.in-wrap>svg{width:18px;height:18px;color:var(--muted);flex:0 0 auto}
.in-wrap:focus-within>svg{color:var(--primary)}
.in-wrap input{
  flex:1;min-width:0;height:100%;border:0!important;outline:0;background:transparent!important;
  box-shadow:none!important;padding:0;font-size:14.5px;font-weight:550;color:var(--text)
}
.in-wrap .peek{
  border:0;background:none;color:var(--muted);padding:4px;border-radius:8px;display:grid;place-items:center
}
.in-wrap .peek:hover{color:var(--text);background:var(--bg-hover)}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 22px}
.auth-row .check{font-size:13px;font-weight:600;color:var(--text-2)}
.auth-row .hint{font-size:12.5px;color:var(--muted)}
.btn-auth{
  width:100%;height:50px;border-radius:13px;font-size:15px;font-weight:750;letter-spacing:-.01em;
  display:flex;align-items:center;justify-content:center;gap:9px;color:#fff;border:0;
  background:linear-gradient(135deg,var(--primary),#1E3AC7);
  box-shadow:0 12px 26px var(--primary-ring);transition:transform .12s,box-shadow .16s,opacity .16s
}
.btn-auth:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 16px 34px var(--primary-ring)}
.btn-auth:active:not(:disabled){transform:translateY(0)}
.btn-auth:disabled{opacity:.72;cursor:default;box-shadow:none}
.btn-auth .spin{
  width:17px;height:17px;border-radius:50%;border:2.2px solid rgba(255,255,255,.4);
  border-top-color:#fff;animation:spin .7s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
.auth-legal{margin-top:26px;text-align:center;font-size:11.5px;color:var(--dim);line-height:1.7}
.auth-legal b{color:var(--muted);letter-spacing:.04em}

@media (max-width:980px){
  .auth-shell{grid-template-columns:1fr}
  /* the brand panel becomes a compact banner above the form */
  .auth-art{min-height:210px;align-items:flex-end}
  .auth-art-inner{padding:24px 22px 26px;max-width:none}
  .auth-art h2{font-size:25px}
  .auth-art .lede,.auth-points,.auth-stats{display:none}
  .auth-brand{margin-bottom:14px}
  .auth-form-side{padding:26px 20px 40px}
}
@media (max-width:560px){
  .auth-art{display:none}
  .auth-mark{display:block}
  .auth-form-side{min-height:100vh;min-height:100dvh;align-items:flex-start;padding-top:52px}
}
@media (prefers-reduced-motion:reduce){
  .stitch-art .run,.stitch-art .run-2,.stitch-art .pulse{animation:none}
}

/* User chip */
.user-chip{
  display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;
  border-radius:999px;background:var(--bg-elevated);border:1px solid var(--border)
}
.user-chip .av{
  width:28px;height:28px;border-radius:999px;display:grid;place-items:center;
  background:var(--primary-soft);color:var(--primary);font-weight:800;font-size:11px
}

/* Chart container */
.chart-box{position:relative;height:220px;width:100%}
.chart-box.tall{height:252px}
.chart-box canvas{width:100%!important;height:100%!important;display:block}

/* Trend chart — legend chips, per-series totals, hover tooltip */
.chart-legend{display:flex;gap:6px;flex-wrap:wrap}
.lg-chip{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);
  border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight:650;line-height:1;
  transition:opacity .15s,border-color .15s
}
.lg-chip:hover{border-color:var(--border-strong)}
.lg-chip i{width:9px;height:9px;border-radius:2px;display:inline-block}
.lg-chip.off{opacity:.42}
.lg-chip.off i{background:var(--muted)!important}
.chart-totals{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.chart-totals .ct-item{
  display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);
  background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;padding:6px 10px
}
.chart-totals .ct-item strong{color:var(--text);font-size:12.5px}
.chart-totals .ct-item.off{opacity:.4}
.chart-totals .ct-dot{width:8px;height:8px;border-radius:999px}
.chart-tip{
  display:none;position:absolute;z-index:5;pointer-events:none;min-width:160px;
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;
  box-shadow:var(--shadow);padding:8px 10px;font-size:12px
}
.chart-tip .tt-hd{font-weight:750;margin-bottom:5px;color:var(--text)}
.chart-tip .tt-row{display:flex;align-items:center;gap:6px;margin-top:3px;color:var(--muted)}
.chart-tip .tt-row .tt-dot{width:8px;height:8px;border-radius:999px;flex:none}
.chart-tip .tt-row .tt-lbl{flex:1}
.chart-tip .tt-row strong{color:var(--text);font-weight:700}
.chart-tip .tt-row .tt-c{
  min-width:18px;text-align:center;font-size:10px;border-radius:6px;
  background:var(--bg-soft);border:1px solid var(--border);padding:0 4px
}

/* Cloth Stock — total value card in the page header */
.stock-cards{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch}
.stock-total{
  display:flex;align-items:center;gap:12px;min-width:250px;
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:12px 16px;box-shadow:var(--shadow-xs)
}
.stock-total .st-ico{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:var(--primary-soft);color:var(--primary)
}
.stock-total .st-lbl{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.01em}
.stock-total .st-val{font-size:21px;font-weight:800;letter-spacing:-.03em;color:var(--text);margin-top:2px}
.stock-total .st-hint{font-size:11.5px;color:var(--muted);margin-top:2px}

/* Segmented switch (existing / new supplier) */
.seg{display:inline-flex;background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:3px;gap:3px}
.seg .seg-btn{
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  padding:6px 14px;border-radius:9px;font-size:12.5px;font-weight:650;font-family:inherit
}
.seg .seg-btn.active{background:var(--bg-elevated);color:var(--text);box-shadow:var(--shadow-xs)}
.seg .seg-btn:disabled{opacity:.45;cursor:not-allowed}

/* Purchase entry form */
.purchase-form .pf-block{padding:14px 0;border-bottom:1px solid var(--border)}
.purchase-form .pf-block:first-child{padding-top:0}
.purchase-form .pf-block:last-child{border-bottom:0;padding-bottom:0}
.purchase-form .pf-title{font-size:13px;font-weight:750;color:var(--text);margin-bottom:8px}
/* One control per cell, every row a single line, so all columns line up. */
table.data.purchase-table{min-width:1120px}
table.data.purchase-table th,table.data.purchase-table td{vertical-align:middle;padding:7px 6px}
table.data.purchase-table input,table.data.purchase-table select{
  display:block;width:100%;padding:7px 8px;font-size:12.5px;border-radius:9px;
  background:var(--bg-input);color:var(--text);border:1px solid var(--border)
}
table.data.purchase-table input:focus,table.data.purchase-table select:focus{
  border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)
}
table.data.purchase-table input::placeholder{color:var(--dim)}
/* Read-only cells for a row that restocks an item the shop already carries */
table.data.purchase-table .pu-fixed{
  display:block;font-size:12.5px;color:var(--text-2);padding:7px 2px;
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
table.data.purchase-table .pu-cat{display:flex;gap:4px;align-items:center}
table.data.purchase-table .pu-cat select{flex:1;min-width:0}
table.data.purchase-table .pu-cat .btn{flex:0 0 auto;padding:7px 8px}
table.data.purchase-table .pu-line{font-weight:700;white-space:nowrap}
table.data.purchase-table .pu-rm{padding:6px}
.purchase-form .pf-totals{
  margin-top:12px;margin-left:auto;max-width:340px;
  background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:10px 14px
}
.purchase-form .pt-row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--muted);padding:3px 0}
.purchase-form .pt-row strong{color:var(--text)}
.purchase-form .pt-row.grand{border-top:1px solid var(--border);margin-top:4px;padding-top:7px;font-size:14px}
.purchase-form .pt-row.grand strong{font-size:15px;font-weight:800}
.purchase-form .pt-row.due strong{color:var(--danger)}
.pf-footsum{display:flex;gap:16px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.pf-footsum strong{color:var(--text);font-size:14px;font-weight:800;margin-left:4px}
.pf-footsum .owing strong{color:var(--danger)}

/* Print */
@media print{
  .sidebar,.topbar,.no-print{display:none!important}
  .main{margin:0!important}
  .content{padding:0!important}
  body{background:#fff;color:#000}
}

/* Responsive */
@media (max-width: 1180px){
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pos-layout{grid-template-columns:1fr}
  .pos-grid{max-height:none}
  .pos-cart-items{max-height:260px}
  .split{grid-template-columns:1fr}
  .form-grid,.form-grid.cols-3,.form-grid.cols-4{grid-template-columns:1fr 1fr}
  .stock-total{min-width:0;flex:1 1 220px}
}
@media (max-width: 800px){
  .sidebar{transform:translateX(-105%);width:min(var(--sidebar-w),86vw);box-shadow:var(--shadow-lg);transition:transform .22s ease}
  /* Never keep the sidebar in collapsed (icon-only) mode on mobile — show full labels */
  .sidebar.collapsed{width:min(var(--sidebar-w),86vw)}
  .sidebar.collapsed .brand-text,.sidebar.collapsed .nav-label,.sidebar.collapsed .nav-section{display:revert}
  .sidebar.collapsed .nav-item{justify-content:flex-start;padding:11px 12px}
  .sidebar.collapsed .sidebar-foot .btn{justify-content:flex-start}
  .sidebar.open{transform:none}
  .sidebar.open ~ .sidebar-backdrop{display:block}
  .main,.sidebar.collapsed ~ .main{margin-left:0}
  /* Collapse button in the sidebar footer is pointless on mobile */
  #collapseBtn{display:none}

  .btn.btn-menu{display:inline-flex}
  .topbar{padding:0 12px;gap:8px}
  .topbar-title{font-size:16px}
  /* Keep the user's name from crowding the bar — show the avatar chip compactly */
  .user-chip span:not(.av){display:none}

  .content{padding:14px 12px 28px}
  .form-grid,.form-grid.cols-3,.form-grid.cols-4{grid-template-columns:1fr}
  .stock-cards{width:100%}
  .stock-total{width:100%}
  .chart-box.tall{height:230px}
  .chart-totals .ct-item{flex:1 1 140px}
  .purchase-form .pf-totals{max-width:none;margin-left:0}
  .stat-grid{grid-template-columns:1fr 1fr}
  .page-head{flex-wrap:wrap}
  .page-head .btn,.page-head > div:last-child{width:100%}
  .page-head > div:last-child{display:flex;flex-wrap:wrap;gap:8px}
  .pipe{flex:1 1 40%}
  .modal{width:100%;max-width:100%;border-radius:14px 14px 0 0;max-height:92vh}
  .modal-back{align-items:flex-end}
}
@media (max-width: 460px){
  .stat-grid{grid-template-columns:1fr}
  .tabs{width:100%;overflow:auto}
  .search{width:100%}
  .page-head h2{font-size:18px}
}

/* Small helper line under a form input */
.field .hint{display:block;margin-top:5px;font-size:12px;color:var(--muted);line-height:1.4}

/* ---------- Customer number column ---------- */
/* The number the shop and the factory call out loud — printed on every naap slip —
   so it needs to be readable at a glance across the counter. */
table.data td.custno{font-size:15px;font-weight:800;letter-spacing:.6px;color:var(--text);white-space:nowrap}

/* ---------- Clickable table rows ---------- */
/* Bookings (and any other list where the whole row is the "open" action). */
table.data tbody tr.rowlink{cursor:pointer}
table.data tbody tr.rowlink:hover td{background:var(--bg-hover)}
table.data tbody tr.rowlink:active td{background:var(--primary-soft,var(--bg-hover))}

/* ---------- Sticky horizontal scrollbar for wide tables ---------- */
/* Pinned to the bottom of the viewport so the user never has to scroll to the
   end of a long table just to pan left/right. Driven by the TableScroll module at the bottom of assets/js/ui.js */
.sticky-xscroll{
  position:fixed;bottom:0;z-index:60;height:16px;
  overflow-x:auto;overflow-y:hidden;display:none;
  background:var(--bg-elevated);border-top:1px solid var(--border);
  border-radius:8px 8px 0 0;box-shadow:0 -6px 16px rgba(2,6,23,.14);
  scrollbar-width:thin;scrollbar-color:var(--primary) transparent
}
.sticky-xscroll.show{display:block}
.sticky-xscroll-inner{height:1px}
.sticky-xscroll::-webkit-scrollbar{height:16px}
.sticky-xscroll::-webkit-scrollbar-track{background:transparent}
.sticky-xscroll::-webkit-scrollbar-thumb{
  background:var(--primary);border-radius:999px;
  border:4px solid transparent;background-clip:content-box
}
.sticky-xscroll::-webkit-scrollbar-thumb:hover{background:var(--primary);background-clip:content-box;border-width:3px}
@media print{.sticky-xscroll{display:none !important}}