:root {
  --navy:#1A3C5E; --navy-2:#0F2540; --navy-3:#08182B; --navy-l:#EBF0F6; --navy-m:#B8CAD9; --navy-h:#2A557D;
  --orange:#E8622A; --orange-d:#C44B16; --orange-l:#FDF1EB; --orange-m:#F8C9B2;
  --green:#1D7A50; --green-l:#E6F5EE; --green-m:#A6D5BD;
  --red:#B83232;   --red-l:#FDECEC;   --red-m:#E8A8A8;
  --amber:#A0620A; --amber-l:#FEF4E3; --amber-m:#F0CE85;
  --purple:#5C3FA0;--purple-l:#EEE9F8;
  --teal:#167D8E;  --teal-l:#E5F4F6;
  --text:#0D1117; --text-2:#2F3744; --muted:#5C6474; --muted-2:#6B7280;
  --border:#E2E6ED; --border-2:#CDD3DD;
  --bg:#F4F6FA; --bg-2:#EDF0F5; --white:#FFFFFF;
  /* Aliases for the .bank-ds design-system token names, so global rules that
     reference them (the item-search dropdown, .av-modal title) resolve outside
     .bank-ds instead of silently falling back to inherited colours. The scoped
     .bank-ds block still overrides these where it applies. */
  --ink:var(--text); --ink3:var(--muted); --line2:var(--border-2);
  --shadow-sm: 0 1px 2px rgba(13,17,23,0.04), 0 1px 3px rgba(13,17,23,0.04);
  --shadow:    0 2px 6px rgba(13,17,23,0.05), 0 4px 14px rgba(13,17,23,0.06);
  --shadow-lg: 0 8px 24px rgba(13,17,23,0.10), 0 2px 8px rgba(13,17,23,0.06);
  --shadow-pop:0 16px 48px rgba(15,37,64,0.22);
  --r-sm:5px; --r:8px; --r-lg:12px; --r-xl:16px;
  --sans:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Layout chrome heights — kept as variables so layouts can subtract them. */
  --topbar-h: 52px;
  --tabbar-h: 64px;  /* mobile bottom tab bar */
  --sidebar-w: 232px;
  --aside-w: 460px;  /* desktop cart-panel width */
  /* Min recommended touch target. */
  --touch: 44px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; max-width: 100vw; overflow-x: hidden; }
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  font-size: 14px;            /* mobile base ≥ 14px */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; min-height: var(--touch); padding: 0 10px; }
input, select, textarea { font: inherit; color: inherit; font-size: 16px; }   /* 16px to prevent iOS zoom */
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }

/* Accessibility — keyboard focus ring */
*:focus { outline: none; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }

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

/* Print clean-up — hide chrome */
@media print {
  .topbar, .sidebar, .tabbar, .pos-mobile-bar, .flash-wrap { display: none !important; }
  .app { display: block; height: auto; }
  .main, .scrollarea { overflow: visible; height: auto; }
}
.mono { font-family: var(--mono); font-feature-settings: 'tnum' 1; }
.num  { font-family: var(--mono); font-feature-settings: 'tnum' 1; font-weight: 500; }
.ttu  { text-transform: uppercase; letter-spacing: 0.10em; }
.muted{ color: var(--muted); }

/* Responsive helpers — use to hide/show at breakpoints */
.mobile-only { display: block; }
.desktop-only { display: none !important; }
.desktop-only.inline { display: none !important; }
/* The `hidden` HTML attribute MUST win over `.mobile-only { display: block }`,
   otherwise mobile-scoped overlays (sheet backdrops etc.) stay mounted and
   swallow every tap/scroll on the page even when "closed". */
.mobile-only[hidden], .desktop-only[hidden], [hidden] { display: none !important; }

/* ============================================================
   App shell — mobile first
   - mobile: stacked, sidebar replaced by bottom tab bar
   - md (≥768): sidebar reappears, layout becomes grid
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: var(--topbar-h) 1fr var(--tabbar-h);
  /* 100vh on iOS Safari and most Android browsers includes the area under
     the collapsing URL bar, which makes the tabbar disappear when the bar
     is expanded. 100dvh (dynamic viewport height) follows the actual
     visible area, which is what we want — falls back to 100vh on older
     browsers that don't support dvh yet. */
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  overflow: hidden;   /* anything below the tabbar must scroll INSIDE the .scrollarea */
}
.topbar {
  background: var(--navy-2); color: #fff;
  display: flex; align-items: center;
  padding: 0 12px;
  gap: 8px;
  position: relative; z-index: 30;
  min-height: var(--topbar-h);
}

.sidebar { display: none; }                    /* hidden on mobile */
.tabbar  { display: flex; }                    /* shown on mobile  */

/* Bottom tab bar (mobile).
   Always fixed to the bottom of the viewport — using position: fixed (not
   just grid placement) so it stays put when the URL bar collapses on mobile
   Safari/Chrome, when soft keyboards push content around, or when the PWA
   chrome changes height. Layers: padding-bottom uses the iOS safe-area
   inset so the labels never sit under the home indicator. */
.tabbar {
  background: var(--white);
  border-top: 1px solid var(--border);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  z-index: 40;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  min-height: var(--tabbar-h);
  padding-bottom: env(safe-area-inset-bottom, 0);
  /* iOS PWA: tell the browser this element is its own paint layer so it
     doesn't get re-flowed by the rubber-band scroll. */
  transform: translateZ(0);
  will-change: transform;
}
.tab-item {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px; padding: 8px 4px; min-height: var(--touch);
  color: var(--muted); font-size: 10.5px; font-weight: 500;
  text-decoration: none; text-align: center;
  position: relative;
}
.tab-item .ico { opacity: 0.9; }
.tab-item.active { color: var(--navy); }
.tab-item.active::before {
  content: ''; position: absolute; top: 0; left: 20%; right: 20%;
  height: 3px; background: var(--orange); border-radius: 0 0 2px 2px;
}
.tab-item .badge {
  position: absolute; top: 4px; right: calc(50% - 18px);
  background: var(--orange); color: #fff; font-size: 9.5px; font-weight: 600;
  font-family: var(--mono); padding: 1px 5px; border-radius: 8px;
  min-width: 14px; height: 14px; line-height: 12px; text-align: center;
}

/* Top brand area */
.brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.brand-mark { width: 28px; height: 28px; background: var(--orange); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--navy-2); letter-spacing: -0.04em; }
.brand-text { display: none; font-weight: 600; font-size: 14px; letter-spacing: -0.005em; }
@media (min-width: 768px) { .brand-text { display: block; } }
.brand-text small { display: block; font-weight: 400; font-size: 9.5px; color: rgba(255,255,255,0.5); letter-spacing: 0.14em; text-transform: uppercase; margin-top: -1px; }
/* Hide the explicit date/time on mobile — the OS clock is enough */
.topbar-clock { display: none; }
/* On desktop the clock is absolutely centred in the topbar so it sits dead
   centre regardless of how wide the left (brand/branch) or right (sync/user)
   clusters are. pointer-events:none so the (non-interactive) text never blocks
   clicks on anything it might overlap on a narrow desktop window. */
@media (min-width: 768px) {
  .topbar-clock {
    display: inline-flex; align-items: center; gap: 6px;
    color: rgba(255,255,255,0.65); font-size: 11.5px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; white-space: nowrap;
  }
}

.branch-pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); padding: 4px 10px 4px 8px; border-radius: 6px; font-size: 12px; color: rgba(255,255,255,0.85); cursor: pointer; min-height: 32px; }
.branch-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: #2EE07E; }
.top-spacer { flex: 1; }
.sync-chip { display: none; align-items: center; gap: 8px; font-size: 11.5px; color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.06); padding: 5px 11px 5px 9px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.10); }
.sync-chip .pulse { width: 7px; height: 7px; border-radius: 50%; background: #2EE07E; box-shadow: 0 0 0 0 rgba(46,224,126,0.7); animation: pulse 2.2s infinite; }
.sync-chip.warn .pulse { background: #FFC04A; animation: none; }
.sync-chip.err  .pulse { background: #FF6B6B; animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(46,224,126,0.55); } 60% { box-shadow: 0 0 0 7px rgba(46,224,126,0); } 100% { box-shadow: 0 0 0 0 rgba(46,224,126,0); } }
.user-chip { display: flex; align-items: center; gap: 9px; padding: 4px 10px 4px 4px; border-radius: 22px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); cursor: pointer; min-height: 36px; }
.user-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 600; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.user-info { display: none; }
.user-info .nm { font-size: 12px; font-weight: 500; color: #fff; line-height: 1.1; }
.user-info .rl { font-size: 10px; color: rgba(255,255,255,0.55); text-transform: capitalize; }

/* Main / scroll area */
/* min-height/min-width:0 are load-bearing: .main is a grid item and .scrollarea
   a flex child, both of which default to min-*:auto and so refuse to shrink
   below their content. Without min-height:0 the tall product/list content forces
   the 1fr grid row past 100dvh, the whole .app grows taller than the viewport,
   and the document itself scrolls — leaving a blank band below the content once
   you scroll to the bottom (most visible in Safari). Pinning them to 0 keeps all
   scrolling inside .scrollarea, exactly as .settings-shell already does. */
.main { overflow: hidden; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* Global back bar (admin shell) — a slim, always-visible strip above the
   scrolling content. flex: none so it never gets squeezed by the scrollarea. */
.adm-backbar { flex: none; padding: 12px 16px 0; }
.adm-backbtn { gap: 6px; }
.adm-backbtn-ico { display: inline-flex; transform: rotate(180deg); }
@media (min-width: 768px) { .adm-backbar { padding: 14px 24px 0; } }
/* position:relative makes .scrollarea the containing block for its absolutely
   positioned descendants (e.g. the sr-only #bulkLive live region, picker
   dropdowns). Without it those escape to the initial containing block and their
   static-position offset stretches the document height — so the body scrolls
   into a blank band below the viewport-height .app. Containing + clipping them
   here keeps the document itself unscrollable. */
.scrollarea { position: relative; flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.page-head { background: var(--white); border-bottom: 1px solid var(--border); padding: 12px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-head h1 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.page-head .crumb { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; }
.page-head .actions { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Controls — base mobile sizes (44px touch min) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; background: var(--white); border: 1px solid var(--border-2); color: var(--text-2); text-decoration: none; min-height: var(--touch); }
.btn:hover { background: var(--bg); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); }
.btn-accent { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn-accent:hover { background: var(--orange-d); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--bg); }
.btn-danger { color: var(--red); }
.btn-sm { padding: 6px 10px; font-size: 13px; min-height: 36px; }
.btn-lg { padding: 13px 18px; font-size: 15px; min-height: 52px; }
.btn-block { width: 100%; }
.btn[disabled], .btn:disabled { opacity: 0.5; cursor: not-allowed; }

.input { width: 100%; padding: 11px 13px; background: var(--white); border: 1px solid var(--border-2); border-radius: 8px; font-size: 16px; color: var(--text); min-height: var(--touch); }
.input:focus { border-color: var(--navy); outline: 0; box-shadow: 0 0 0 3px rgba(26,60,94,0.10); }
.input.lg { padding: 13px 16px; font-size: 16px; min-height: 52px; }
.input.sm { padding: 7px 10px; font-size: 14px; min-height: 36px; }
.label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.08em; }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 11px; font-size: 11px; font-weight: 600; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.chip.navy{background:var(--navy-l);color:var(--navy);} .chip.orange{background:var(--orange-l);color:var(--orange-d);}
.chip.green{background:var(--green-l);color:var(--green);} .chip.red{background:var(--red-l);color:var(--red);}
.chip.amber{background:var(--amber-l);color:var(--amber);} .chip.purple{background:var(--purple-l);color:var(--purple);}
.chip.teal{background:var(--teal-l);color:var(--teal);}   .chip.gray{background:var(--bg-2);color:var(--muted);}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}

.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card-h { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.card-h h3 { font-size: 14px; font-weight: 600; }
.card-b { padding: 14px 16px; }

.kbd { display: inline-flex; align-items: center; padding: 1px 5px; background: var(--bg-2); border: 1px solid var(--border-2); border-bottom-width: 2px; border-radius: 4px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); line-height: 1.4; }

/* Tables — horizontally scrollable on mobile */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 100%; }
table.t th, table.t td { text-align: left; padding: 10px 12px; vertical-align: middle; }
table.t thead th { background: var(--bg); color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.t tbody tr { border-bottom: 1px solid var(--border); }
table.t tbody tr:last-child { border-bottom: 0; }
table.t tbody tr:hover { background: var(--bg); }
table.t td.r { text-align: right; }
table.t td.c { text-align: center; }

.hr { height: 1px; background: var(--border); border: 0; }
.pad { padding: 16px; }

/* Responsive KPI grid — 2-up phones, 4-up tablet+ */
.kpi-grid, .kpi-grid-3 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.kpi-grid .card-b, .kpi-grid-3 .card-b { padding: 12px 14px; }
.kpi-grid .label, .kpi-grid-3 .label { font-size: 10.5px; }
/* Auto-shrink the big number so long UGX values don't overflow at 320px */
.kpi-grid .card-b > div[style*="font-size:22px"],
.kpi-grid-3 .card-b > div[style*="font-size:22px"] {
  font-size: 17px !important;
  word-break: break-all;
  line-height: 1.15;
}
@media (min-width: 640px) {
  .kpi-grid    { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .kpi-grid-3  { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .kpi-grid .card-b > div[style*="font-size:22px"],
  .kpi-grid-3 .card-b > div[style*="font-size:22px"] {
    font-size: 22px !important;
    word-break: normal;
  }
}
@media (min-width: 1024px) {
  .kpi-grid .card-b, .kpi-grid-3 .card-b { padding: 16px 18px; }
}

/* Responsive 2-pane content grid — stacks on phone, splits on tablet+ */
.split-2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 768px) { .split-2 { grid-template-columns: 2fr 1fr; gap: 18px; } }

/* EOD reconciliation — stacked on mobile, 2-then-4-up on tablet+ */
.eod-recon { grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .eod-recon { grid-template-columns: repeat(4, 1fr); } }

/* Settings shell — sub-nav becomes a select on mobile */
.settings-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.settings-nav { display: none; }
@media (min-width: 768px) {
  .settings-shell { display: grid; grid-template-columns: 236px 1fr; }
  .settings-nav { display: block; background: var(--white); border-right: 1px solid var(--border); overflow: auto; }
  .settings-shell .scrollarea { padding: 22px 24px !important; }
}
@media (min-width: 1024px) {
  .settings-shell .scrollarea { padding: 22px 28px !important; }
}

/* Sticky table headers on scrollable lists */
.t-sticky thead th { position: sticky; top: 0; z-index: 1; }

/* Two-column form layout — stacks on phones, side-by-side on tablet+ */
.form-2col { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .form-2col { grid-template-columns: 1fr 1fr; } }

/* Lazy-image hover */
img[loading="lazy"] { background: var(--bg-2); }

/* Toast / flash */
.flash-wrap { position: fixed; left: 12px; right: 12px; top: calc(var(--topbar-h) + 8px); display: flex; flex-direction: column; gap: 8px; z-index: 60; pointer-events: none; }
.flash { background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: 8px; box-shadow: var(--shadow-lg); padding: 11px 16px 11px 14px; font-size: 13px; pointer-events: auto; animation: toast-in 240ms cubic-bezier(.16,1,.3,1); }
.flash.err { border-left-color: var(--red); }
.flash.info{ border-left-color: var(--navy); }
.flash .tt { font-weight: 600; font-size: 13px; }
.flash .ts { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
@keyframes toast-in { from { opacity: 0; transform: translate(8px,-6px); } to { opacity: 1; transform: translate(0,0); } }

/* Payment method buttons (cart panel + checkout page) */
.pm-btn { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 6px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--white); color: var(--text-2); font-size: 12px; font-weight: 500; cursor: pointer; min-height: 64px; }
.pm-btn:hover { background: var(--bg); }
.pm-btn.act { background: var(--navy); border-color: var(--navy); color: #fff; }
.pm-btn.act svg { stroke: #fff; }
.pm-btn[disabled] { cursor: not-allowed; }

/* Item cards (POS grid) */
.cat-pill { padding: 7px 12px; border-radius: 16px; font-size: 13px; color: var(--text-2); background: var(--white); border: 1px solid var(--border); min-height: 36px; line-height: 1.2; }
.cat-pill.act { background: var(--navy); border-color: var(--navy); color: #fff; }
.tier-pill { padding: 6px 14px; border-radius: 16px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--text-2); background: var(--white); border: 1px solid var(--border-2); cursor: pointer; min-height: 36px; display: inline-flex; align-items: center; gap: 4px; }
.tier-pill:hover { border-color: var(--border-2); background: var(--bg); }
.tier-pill.act { background: var(--orange-l); border-color: var(--orange-d); color: var(--orange-d); }
/* Disabled (locked-non-active) tier — greyed-out, no pointer, no hover. */
.tier-pill.disabled, .tier-pill[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.tier-pill.disabled:hover, .tier-pill[disabled]:hover { background: var(--white); border-color: var(--border-2); }

.item-card { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; position: relative; transition: border-color 120ms, transform 120ms; width: 100%; min-height: var(--touch); }
.item-card:hover { border-color: var(--navy-m); transform: translateY(-1px); }
.item-card[disabled] { opacity: 0.55; cursor: not-allowed; }
.item-card[disabled]:hover { border-color: var(--border); transform: none; }
.item-card .thumb-wrap { position: relative; margin-bottom: 2px; }
.item-card .stock-bdg { position: absolute; top: 6px; right: 6px; font-family: var(--mono); font-weight: 600; font-size: 10.5px; background: rgba(255,255,255,0.85); padding: 1px 6px; border-radius: 10px; color: var(--text-2); }
.item-card .cat { font-size: 10px; font-weight: 600; color: var(--orange-d); text-transform: uppercase; letter-spacing: 0.10em; }
.item-card .name { font-size: 13.5px; font-weight: 500; line-height: 1.25; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-card .price { font-family: var(--mono); font-weight: 600; font-size: 14px; color: var(--navy); margin-top: auto; }
.item-card .meta { font-size: 11px; color: var(--muted); font-family: var(--mono); line-height: 1.35; }

/* Tile placeholder for item images */
.tile { display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:8px; font-weight:700; letter-spacing:-0.02em; position:relative; overflow:hidden; flex-shrink:0; color:var(--muted); background:var(--bg-2); }
.tile.Oils         { background:linear-gradient(135deg,#FBE4C6 0%,#F5D198 100%); color:#7A4A0F; }
.tile.Sugar        { background:linear-gradient(135deg,#F8D7E0 0%,#EFB8C6 100%); color:#7E2D44; }
.tile.Grains       { background:linear-gradient(135deg,#F0E1B2 0%,#E2CC83 100%); color:#6A5612; }
.tile.Soap         { background:linear-gradient(135deg,#CFE0F2 0%,#A8C7E6 100%); color:#1B466F; }
.tile.Spreads      { background:linear-gradient(135deg,#FBE8A4 0%,#F2D670 100%); color:#7A5810; }
.tile.Spices       { background:linear-gradient(135deg,#F2BFA5 0%,#E89E7D 100%); color:#7B361A; }
.tile.Beverages    { background:linear-gradient(135deg,#BFE0DC 0%,#92CCC4 100%); color:#0F4B4A; }
.tile.Personal     { background:linear-gradient(135deg,#DCC9F0 0%,#BFA1E2 100%); color:#3D1F75; }
.tile.Dairy        { background:linear-gradient(135deg,#F0E8D2 0%,#DCCFA8 100%); color:#5C4923; }
.tile.Household    { background:linear-gradient(135deg,#D6D9E0 0%,#B5BCC8 100%); color:#3A4250; }

/* Modal — full-screen on mobile, centered card on desktop */
.modal-bd { position: fixed; inset: 0; background: rgba(15,37,64,0.45); z-index: 50; display: flex; align-items: stretch; justify-content: stretch; }
.modal { background: var(--white); width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.modal-h { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; min-height: 56px; }
.modal-h h2 { font-size: 16px; font-weight: 600; }
.modal-h .close { margin-left: auto; padding: 8px; border-radius: 6px; color: var(--muted); min-height: var(--touch); min-width: var(--touch); display: inline-flex; align-items: center; justify-content: center; }
.modal-h .close:hover { background: var(--bg); }
.modal-b { padding: 16px; overflow: auto; flex: 1; }
.modal-f { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0)); }

/* Pop-overs (branch / user dropdowns) */
.pop { position: absolute; top: calc(100% + 6px); background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-pop); min-width: 240px; padding: 6px; z-index: 40; }
.pop-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 6px; color: var(--text-2); text-align: left; font-size: 14px; min-height: var(--touch); }
.pop-item:hover { background: var(--bg); }
.pop-item.act { background: var(--navy-l); color: var(--navy); }
.pop-title { padding: 8px 12px; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.10em; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .pop-toggle { background: rgba(255,255,255,0.13); }

/* ============================================================
   sm — 480px+ (large phones)
   ============================================================ */
@media (min-width: 480px) {
  .flash-wrap { left: auto; right: 16px; width: min(360px, calc(100vw - 32px)); }
}

/* ============================================================
   md — 768px+ (tablets)
   ============================================================ */
@media (min-width: 768px) {
  .app {
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: var(--topbar-h) 1fr;
  }
  .topbar { grid-column: 1 / -1; padding: 0 16px 0 20px; gap: 14px; }
  .sidebar { display: flex; flex-direction: column; background: var(--white); border-right: 1px solid var(--border); overflow: hidden; min-height: 0; }
  .tabbar { display: none; }                  /* hide bottom tab bar */
  .user-info { display: block; }
  .sync-chip { display: inline-flex; }
  .page-head { padding: 14px 24px; }
  .page-head h1 { font-size: 19px; }
  .pad { padding: 22px 24px; }
  body { font-size: 13.5px; }
  .btn { padding: 7px 13px; font-size: 13px; min-height: 38px; }
  .btn-sm { padding: 5px 10px; font-size: 12px; min-height: 32px; }
  .btn-lg { padding: 11px 18px; font-size: 14px; min-height: 46px; }
  .input { padding: 8px 11px; font-size: 13px; min-height: 38px; }
  .input.lg { padding: 10px 13px; font-size: 14px; min-height: 44px; }
  .modal-bd { align-items: center; justify-content: center; padding: 16px; }
  .modal { width: min(680px, calc(100vw - 32px)); height: auto; max-height: calc(100vh - 32px); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); animation: modal-in 220ms cubic-bezier(.16,1,.3,1); }
  @keyframes modal-in { from { opacity: 0; transform: scale(0.97) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
}

/* Sidebar nav (md+). flex:1 + min-height:0 + overflow-y lets a long nav (the
   admin sidebar) scroll while the footer stays pinned; harmless for the short
   POS sidebar. */
.nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.nav::-webkit-scrollbar { width: 8px; }
.nav::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }

/* Topbar shell-jump buttons — solid orange accent so they stand out.
   .backoffice-btn (POS → Admin) and .pos-btn (Admin → POS). */
.backoffice-btn, .pos-btn { background: var(--orange); color: #fff; border: 1px solid var(--orange); gap: 6px; font-weight: 600; box-shadow: var(--shadow-sm); }
.backoffice-btn:hover, .pos-btn:hover { background: var(--orange-d); border-color: var(--orange-d); color: #fff; }
.backoffice-btn .ico, .pos-btn .ico { opacity: 1; }
.backoffice-btn svg, .pos-btn svg { stroke: #fff; }
.nav-section { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); padding: 14px 12px 6px; font-weight: 600; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 6px; color: var(--text-2); font-size: 13.5px; font-weight: 500; width: 100%; text-align: left; position: relative; min-height: 42px; }
.nav-item:hover { background: var(--bg); }
.nav-item.active { background: var(--navy-l); color: var(--navy); }
.nav-item.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--orange); border-radius: 0 2px 2px 0; }
.nav-item .ico { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; display: inline-flex; align-items: center; justify-content: center; }
.nav-item .badge { margin-left: auto; font-size: 10px; font-weight: 600; background: var(--orange); color: #fff; padding: 1px 6px; border-radius: 9px; font-family: var(--mono); }
.nav-item .badge.gray { background: var(--bg-2); color: var(--muted); }
.nav-item .badge.red  { background: var(--red); }
.sidebar-foot { margin-top: auto; padding: 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); }
.sidebar-foot .row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sidebar-foot .row + .row { margin-top: 6px; }
.sidebar-foot .v { color: var(--text-2); font-family: var(--mono); font-size: 11px; }

/* ============================================================
   lg — 1024px+ (desktop)
   ============================================================ */
@media (min-width: 1024px) {
  body { font-size: 13.5px; }
  .page-head { padding: 14px 28px; }
  .pad { padding: 22px 28px; }
}

/* ============================================================
   POS Shell layout — single column mobile, 60/40 split on tablet+
   ============================================================ */
.pos-shell { display: flex; flex-direction: column; height: 100%; overflow: auto; padding-bottom: 84px; }  /* room for mobile sticky bar */
.pos-items { padding: 12px; background: var(--bg); }
.pos-cart  { display: none; }  /* mobile + tablet portrait: cart panel hidden — see /pos/checkout */
.pos-stacked { display: block; }      /* mobile + tablet portrait stacked controls */
@media (min-width: 1024px) { .pos-stacked { display: none; } }

.pos-mobile-bar { position: fixed; left: 0; right: 0; bottom: var(--tabbar-h); background: var(--white); border-top: 1px solid var(--border); padding: 10px 12px; display: flex; align-items: center; gap: 10px; z-index: 25; }
@media (min-width: 768px) { .pos-mobile-bar { bottom: 0; left: var(--sidebar-w); } }
.pos-mobile-bar .summary { flex: 1; min-width: 0; }
.pos-mobile-bar .summary .lbl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.pos-mobile-bar .summary .total { font-family: var(--mono); font-weight: 700; font-size: 18px; color: var(--navy); line-height: 1.15; }

/* 60/40 split only kicks in at landscape-tablet+ (≥1024px). Portrait tablets
   use the mobile single-column layout for usability. */
@media (min-width: 1024px) {
  .pos-shell {
    display: grid;
    grid-template-columns: 1fr 460px;
    grid-template-rows: 1fr;
    overflow: hidden;
    height: 100%;
    padding-bottom: 0;
  }
  .pos-items { padding: 16px 16px 16px 28px; overflow: auto; border-right: 1px solid var(--border); border-bottom: 0; }
  .pos-cart  { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--white); }
  .pos-mobile-bar { display: none; }
}

/* ============================================================
   POS mobile layout refinements (phone-first)
   ============================================================ */
/* Product grid: 2-up on phones, denser auto-fill on larger screens. */
.pos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 480px) { .pos-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } }
@media (min-width: 1024px) { .pos-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }
/* Items-page tier switcher is only useful on phones (where the list collapses to
   one price column); desktop shows all three tier columns, so hide it there. */
@media (min-width: 768px) { .tier-switch-m { display: none !important; } }

/* Trim card chrome on phones for clean, tappable tiles. */
@media (max-width: 767px) {
  /* Sticky bottom tab bar on mobile. The grid layout already reserves a
     --tabbar-h row for it, but Mobile Safari's collapsing URL bar moves the
     "true" viewport, so the tabbar drifts off-screen when the user scrolls.
     Pinning it via position:fixed keeps it docked regardless of browser
     chrome. iOS PWA edge cases handled by:
       - z-index 40 sits above .pos-mobile-bar (25) and modal scrims
       - transform: translateZ(0) puts the tabbar on its own paint layer so
         it doesn't get re-flowed by the rubber-band overscroll
       - padding-bottom: env(safe-area-inset-bottom) keeps the labels above
         the iOS home indicator without needing a bottom offset
       - overscroll-behavior: contain on body prevents the document from
         scrolling past the viewport edges, which is the most common cause
         of the tabbar appearing to "move" under the user's thumb. */
  body { overscroll-behavior: contain; overscroll-behavior-y: contain; }
  .tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    box-shadow: 0 -1px 6px rgba(15, 37, 64, 0.06);
    transform: translateZ(0);
  }
  /* Scrollarea needs bottom clearance so content isn't hidden under the fixed
     tab bar. iOS safe-area inset is already baked into --tabbar-h's padding. */
  .scrollarea { padding-bottom: calc(var(--tabbar-h) + 12px); }
  /* When the POS mobile cart bar is shown it sits ABOVE the tabbar, so the
     scrollarea needs even more clearance — bar height + tabbar height. */
  body:has(.pos-mobile-bar.is-active) .scrollarea { padding-bottom: calc(var(--tabbar-h) + 72px); }

  .item-card { padding: 8px; gap: 4px; border-radius: 9px; }
  .item-card .cat, .item-card .meta { display: none; }
  .item-card .name { font-size: 12.5px; min-height: 2.4em; }
  .item-card .price { font-size: 13.5px; }
  .item-card .thumb-wrap img, .item-card .thumb-wrap > div { aspect-ratio: 1.4 / 1 !important; }

  /* Phones only: slim the Sales + Items LIST tables to Item · selected-tier
     price · stock. Desktop keeps the full table untouched. */
  .t-pos .col-img, .t-pos .col-sku, .t-pos .item-sub, .t-pos .col-tier:not(.tier-on),
  .t-items .col-img, .t-items .col-sku, .t-items .col-cat, .t-items .item-sub, .t-items .col-tier:not(.tier-on) {
    display: none;
  }

  /* Phones: drop the category filter strip (search covers it) ... */
  #pos-cats { display: none !important; }
  /* ... and slim the search bar (still 16px text so iOS doesn't zoom). */
  #pos-search { min-height: 42px; padding-top: 9px; padding-bottom: 9px; }

  /* §4 — Tier picker: THREE separate rounded pills with 10px gaps. Each pill
     sits on its own white background with a 1px border; the active one fills
     with the tier's colour (navy / purple / orange). Sized to match the
     search row beneath it so the two rows form a clean vertical rhythm. */
  .pos-tiers {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin-bottom: 14px !important;
    flex-wrap: nowrap !important;
    justify-content: stretch !important;
  }
  .pos-tiers form { display: block !important; width: 100% !important; margin: 0; }
  .pos-tiers .tier-pill {
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background-color 140ms, color 140ms, border-color 140ms, box-shadow 140ms;
  }
  .pos-tiers .tier-pill:not(.act):hover { border-color: var(--border-2); background: var(--bg); }
  .pos-tiers .tier-pill.act { color: #fff; border-color: transparent; }
  .pos-tiers .tier-pill.act[data-tier="retail"]    { background: var(--navy);   box-shadow: 0 4px 10px rgba(15,37,64,0.22); }
  .pos-tiers .tier-pill.act[data-tier="agent"]     { background: var(--purple); box-shadow: 0 4px 10px rgba(92,63,160,0.28); }
  .pos-tiers .tier-pill.act[data-tier="wholesale"] { background: var(--orange); box-shadow: 0 4px 10px rgba(232,98,42,0.28); }

  /* §5 — Search row + view toggle: matching height (50px) so the row aligns
     with the tier pills. Search field has a 14px corner radius, 15px text,
     and a 18px search icon at 14px from the left edge. The view toggle is a
     2-button segmented control with internal 7px corners on the active fill. */
  /* §5 — Search bar + view toggle. Both rows are EXACTLY 50px tall so they
     line up; the toggle's inner buttons are each 44×44 with 9px inner radius,
     icons centred at 18px. The active button fills navy with white icon. */
  .pos-search-row { gap: 10px !important; margin-bottom: 14px !important; align-items: stretch !important; }
  .pos-search-wrap { display: flex; align-items: center; }
  .pos-search-input {
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 14px 0 42px !important;
    font-size: 15px !important;
    line-height: 50px !important;
    border-radius: 14px !important;
    border: 1px solid var(--border) !important;
    background: var(--white);
    box-sizing: border-box;
    width: 100%;
  }
  .pos-search-input::placeholder { color: var(--muted-2); font-weight: 400; }
  .pos-search-icon { left: 14px !important; pointer-events: none; }

  .pos-view-toggle {
    display: inline-flex !important;
    align-items: center;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 3px;
    height: 50px;
    flex-shrink: 0;
    gap: 0;
    box-sizing: border-box;
  }
  .pos-view-btn {
    width: 44px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: transparent;
    color: var(--muted-2);
    text-decoration: none;
    transition: background-color 120ms, color 120ms;
    border: 0;
    padding: 0;
  }
  .pos-view-btn svg { width: 18px; height: 18px; display: block; }
  .pos-view-btn.active {
    background: var(--navy);
    color: #fff;
    box-shadow: 0 1px 3px rgba(15,37,64,0.20);
  }
  .pos-view-btn:not(.active):hover { background: var(--bg); color: var(--text-2); }

  /* §8 — Empty cart bar = frosted-glass info pill.
     §9 — Filled cart bar = floating navy pill with cart-square, meta+total,
          orange Checkout CTA with shadow. Sits above the tab bar. */
  .pos-mobile-bar {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(var(--tabbar-h) + 12px) !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
    gap: 12px !important;
  }
  /* ── Empty state ── */
  .pos-mobile-bar.is-empty {
    background: rgba(255,255,255,0.88) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    color: var(--text-2);
  }
  .pos-mobile-bar.is-empty .pmb-icon { color: var(--muted-2); flex-shrink: 0; display: inline-flex; }
  .pos-mobile-bar.is-empty .pmb-label { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pos-mobile-bar.is-empty .pmb-label strong { color: var(--text); font-weight: 600; }
  .pos-mobile-bar.is-empty .pmb-label span { color: var(--muted); }
  .pos-mobile-bar.is-empty .pmb-tier-pill {
    flex-shrink: 0;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border: 1px solid var(--border-2);
    color: var(--text-2);
    background: var(--white);
  }
  .pos-mobile-bar.is-empty .pmb-tier-pill[data-tier="retail"]    { color: var(--navy);     border-color: var(--navy-m); }
  .pos-mobile-bar.is-empty .pmb-tier-pill[data-tier="agent"]     { color: var(--purple);   border-color: var(--purple); }
  .pos-mobile-bar.is-empty .pmb-tier-pill[data-tier="wholesale"] { color: var(--orange-d); border-color: var(--orange-m); }

  /* ── Active state ── */
  .pos-mobile-bar.is-active {
    background: var(--navy) !important;
    border: 0 !important;
    color: #fff;
    box-shadow: 0 14px 32px rgba(15,37,64,0.30) !important;
  }
  .pos-mobile-bar.is-active .pmb-cart-square {
    position: relative; flex-shrink: 0;
    width: 38px; height: 38px;
    background: rgba(255,255,255,0.10);
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .pos-mobile-bar.is-active .pmb-count {
    position: absolute; top: -5px; right: -5px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--orange);
    color: #fff;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--navy);
  }
  .pos-mobile-bar.is-active .pmb-meta {
    flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.1; gap: 1px;
  }
  .pos-mobile-bar.is-active .pmb-meta-top {
    font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.70);
    text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pos-mobile-bar.is-active .pmb-total {
    font-family: var(--mono); font-feature-settings: 'tnum' 1;
    font-size: 18px; font-weight: 700;
    color: #fff;
    line-height: 1.15;
  }
  .pos-mobile-bar.is-active .pmb-total span {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    margin-right: 4px;
    letter-spacing: 0.06em;
  }
  .pos-mobile-bar.is-active .pmb-checkout {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--orange);
    color: #fff !important;
    font-size: 13.5px; font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(232,98,42,0.45);
    min-height: var(--touch);
    white-space: nowrap;
  }
  .pos-mobile-bar.is-active .pmb-checkout:hover { background: var(--orange-d); }

  /* §12 (partial) — Tab bar active state: orange 30×3 pill above the icon
     instead of just an underline; badge gets a white outline. */
  .tabbar .tab-item { position: relative; padding-top: 12px; }
  .tabbar .tab-item.active { color: var(--navy); }
  .tabbar .tab-item.active span:last-child { font-weight: 600; }
  .tabbar .tab-item.active::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    border-radius: 2px;
    background: var(--orange);
  }
  .tabbar .tab-item .badge {
    box-shadow: 0 0 0 1.5px #fff;
    font-family: var(--mono);
    font-feature-settings: 'tnum' 1;
  }

  /* §12 — "More" tab opens a popover with the secondary destinations. Uses
     <details> so it's purely presentational (no JS state). */
  .tab-more { padding: 0; }
  .tab-more > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 0 8px; gap: 2px; width: 100%; color: inherit; }
  .tab-more > summary::-webkit-details-marker { display: none; }
  .tab-more > summary > span:last-child { font-size: 10.5px; }
  .tab-more[open] > summary { color: var(--navy); }
  .tab-more[open] > summary span:last-child { font-weight: 600; }
  .tab-more .tab-more-pop {
    position: absolute;
    right: 8px;
    bottom: calc(100% + 8px);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    padding: 6px;
    z-index: 200;
  }
  .tab-more .tab-more-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 8px;
    color: var(--text-2); text-decoration: none; font-size: 13.5px; font-weight: 500;
  }
  .tab-more .tab-more-item:hover { background: var(--bg); }
  /* Low-stock count chip on the Items entry inside the More popup. */
  .tab-more .tab-more-badge {
    margin-left: auto;
    background: var(--orange);
    color: #fff;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
  }

  /* §3 — Customer chip avatar tinted by the active tier (navy / purple / orange). */
  .cust-avatar[data-tier="retail"]    { background: var(--navy-l);   color: var(--navy); }
  .cust-avatar[data-tier="agent"]     { background: var(--purple-l); color: var(--purple); }
  .cust-avatar[data-tier="wholesale"] { background: var(--orange-l); color: var(--orange-d); }
  /* Tier badge pill inside the customer chip. */
  .cust-tier-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 8px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    flex-shrink: 0;
  }
  .cust-tier-badge[data-tier="retail"]    { background: var(--navy-l);   color: var(--navy); }
  .cust-tier-badge[data-tier="agent"]     { background: var(--purple-l); color: var(--purple); }
  .cust-tier-badge[data-tier="wholesale"] { background: var(--orange-l); color: var(--orange-d); }

  /* §6 — Mobile list rows: collapse the table into a flex/grid layout
     (thumb · name+meta · price · orange-l plus tile). Desktop is untouched. */
  table.t.t-pos { display: block; width: 100%; background: var(--white); }
  table.t.t-pos thead { display: none; }
  table.t.t-pos tbody { display: block; }
  table.t.t-pos tr.pos-item {
    display: grid;
    /* Tighter grid so the name col gets more room. 40px thumb + 88px price
       cap + 36px add-tile leaves the name col ~165px on a 375px viewport. */
    grid-template-columns: 40px minmax(0, 1fr) auto 36px;
    column-gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
  }
  table.t.t-pos tr.pos-item > td:nth-of-type(2) { min-width: 0; overflow: hidden; }
  /* Hard-cap the price column to free maximum space for the name. */
  table.t.t-pos tr.pos-item > td.col-tier.tier-on { width: 68px; max-width: 68px; }
  /* Slim the product thumb on mobile list rows to match the reduced 40px col. */
  table.t.t-pos tr.pos-item .prod-thumb,
  table.t.t-pos tr.pos-item > td.col-img img { width: 40px !important; height: 40px !important; border-radius: 8px !important; }
  table.t.t-pos tr.pos-item .prod-thumb svg { width: 24px !important; height: 24px !important; }
  /* Smaller name (12.5px) + meta row without SKU — thumb already identifies
     the item visually, stock indicator carries the only critical meta. */
  table.t.t-pos tr.pos-item .item-name {
    font-size: 12.5px;
    line-height: 1.25;
    /* Allow a long product name to wrap to a 2nd line instead of ellipsis-clipping. */
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  table.t.t-pos tr.pos-item .item-meta-m > .mono { display: none; }
  /* Slightly smaller price + unit so the long names fit without truncation. */
  table.t.t-pos tr.pos-item > td.col-tier.tier-on { font-size: 13.5px !important; }
  table.t.t-pos tr.pos-item > td.col-tier.tier-on::after { font-size: 9px !important; }
  table.t.t-pos tr.pos-item > td { padding: 0; border: 0; background: transparent !important; display: block; }
  table.t.t-pos tr.pos-item > td.col-img { display: flex; }
  /* Hide the desktop-only cells on mobile (my display:block above re-shows them otherwise). */
  table.t.t-pos tr.pos-item > td.col-sku,
  table.t.t-pos tr.pos-item > td.col-tier:not(.tier-on),
  table.t.t-pos tr.pos-item > td.col-stock { display: none !important; }   /* stock now lives in the meta row */
  /* Active tier price cell: bigger, tier-coloured, mono, right-aligned. */
  table.t.t-pos tr.pos-item > td.col-tier.tier-on { font-family: var(--mono); font-feature-settings: 'tnum' 1; font-size: 14.5px; font-weight: 600; white-space: nowrap; text-align: right; }
  /* Item name + mobile meta row (sku + stock indicator). The .item-name rule
     above this block (line ~751) controls the actual layout — 2-line wrap. */
  .item-meta-m { display: flex; align-items: center; gap: 8px; margin-top: 2px; min-width: 0; }
  .item-meta-m .mono { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .stock-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 500; white-space: nowrap; }
  .stock-tag[data-state="ok"]  { color: var(--green); }
  .stock-tag[data-state="low"] { color: var(--amber); }
  .stock-tag[data-state="out"] { color: var(--red); }
  .stock-tag .stock-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
  /* The "+" tile: orange-l square with orange plus icon (replaces the dark navy button). */
  .pos-add-btn { background: var(--orange-l) !important; color: var(--orange-d) !important; border: 0 !important; box-shadow: none !important; width: 36px; height: 36px; padding: 0 !important; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; min-height: 36px !important; }
  .pos-add-btn[disabled] { background: var(--bg-2) !important; color: var(--muted-2) !important; }

  /* §6 — List row price column: tier-coloured number on top, mono "UGX · per {unit}" hint below. */
  table.t.t-pos tr.pos-item > td.col-tier.tier-on {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 1px;
    line-height: 1.15;
    background: transparent !important;   /* drop the tinted block fill on mobile */
  }
  table.t.t-pos tr.pos-item > td.col-tier.tier-on::after {
    content: attr(data-unit);
    font-family: var(--mono);
    font-feature-settings: 'tnum' 1;
    font-size: 9.5px;
    color: var(--muted);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }

  /* §7 — Grid card price: small "UGX" prefix + big bold tier-coloured number. */
  .item-card .price {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--mono);
    font-feature-settings: 'tnum' 1;
  }
  .item-card .price .price-prefix {
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--muted);
    text-transform: uppercase;
  }
  .item-card .price .price-num {
    font-size: 15px;
    font-weight: 700;
  }
  .item-card .price[data-tier="retail"]    .price-num { color: var(--navy); }
  .item-card .price[data-tier="agent"]     .price-num { color: var(--purple); }
  .item-card .price[data-tier="wholesale"] .price-num { color: var(--orange-d); }

  /* Items & Stock mobile: branch tabs (B1/B2 with on-hand totals + orange
     underline on active) sit between the KPI cards and the filter card. */
  /* Items page mobile 2×2 mini-stats — colored-icon tiles matching the
     customers page pattern (purple SKUs / Stock value, amber Low stock,
     red Out of stock). */
  .items-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
  .items-stat-tile { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px; min-width: 0; }
  .items-stat-icon { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
  .items-icon-purple { background: #EEE9F8; }
  .items-icon-amber  { background: #FEF4E3; }
  .items-icon-red    { background: #FDECEC; }
  .items-stat-lbl { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .items-stat-num { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; font-size: 22px; font-weight: 700; color: #11202F; line-height: 1.05; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .items-stat-num.is-amber { color: #A0620A; }
  .items-stat-num.is-red   { color: #B83232; }
  .items-stat-ugx { font-size: 11.5px; color: var(--muted); font-weight: 500; margin-right: 2px; }
  .items-stat-sub { font-size: 10.5px; color: var(--muted); margin-top: 4px; }

  .items-branch-tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin: 4px 0 12px;
    padding: 0;
    background: transparent;
  }
  .items-branch-tab-form { margin: 0; flex: 1; display: flex; }
  .items-branch-tab {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 12px 4px 14px;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--muted-2);
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    margin-bottom: -1px;   /* overlap the strip's bottom border */
    transition: color 140ms, border-color 140ms;
  }
  .items-branch-tab .ibt-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--muted-2);
    flex-shrink: 0;
    align-self: center;
  }
  .items-branch-tab .ibt-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .items-branch-tab .ibt-count {
    margin-left: auto;
    font-family: var(--mono);
    font-feature-settings: 'tnum' 1;
    font-size: 12px;
    color: var(--muted-2);
    font-weight: 500;
  }
  .items-branch-tab.act {
    color: var(--text);
    border-bottom-color: var(--orange);
    font-weight: 600;
  }
  .items-branch-tab.act .ibt-dot { background: var(--green); }
  .items-branch-tab.act .ibt-count { color: var(--muted); }

  /* Items category pills with count badges ("All 8", "Beverages 3"). The
     parent .items-cat-pills is a horizontally-scrolling strip — the bar bleeds
     off-edge so the user can scroll without the strip looking clipped. */
  .items-cat-pills::-webkit-scrollbar { display: none; }
  .items-cat-pill {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--white);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 120ms, color 120ms, border-color 120ms;
  }
  .items-cat-pill .icp-count {
    font-family: var(--mono);
    font-feature-settings: 'tnum' 1;
    font-size: 11px;
    color: var(--muted-2);
    background: var(--bg);
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 600;
  }
  .items-cat-pill.act { background: var(--navy); border-color: var(--navy); color: #fff; }
  .items-cat-pill.act .icp-count { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.18); }

  /* Compact KPI grid on phones: 2-column, tight cards. Numbers stay on one
     line (white-space:nowrap) so big values like "UGX 71.8M" don't break. */
  .scrollarea .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .scrollarea .kpi-grid > .card { padding: 12px 14px !important; }
  .scrollarea .kpi-grid > .card .label { font-size: 10px; }
  .scrollarea .kpi-grid > .card .kpi-num {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .scrollarea .kpi-grid > .card .kpi-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
  }

  /* Items grid on mobile: force 2 cards per row (the desktop minmax(220px) is
     too wide for a 375px viewport and collapses to 1-up). Trim padding + gap
     so two cards fit cleanly without overflow. */
  .items-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 12px !important;
    gap: 10px !important;
  }
  .items-grid > .card { padding: 10px !important; gap: 6px !important; }
  .items-grid > .card .name,
  .items-grid > .card > div > div[style*="font-size:13px"] { font-size: 12.5px !important; line-height: 1.25; }
  /* Slim the card body: hide the inline "category" label (replaced by the
     frosted sub-pill on the thumb), the 3-tier prices block, and the SKU +
     action-icons footer. The card focuses on: thumb · sub-pill · stock badge · name. */
  .items-grid > .card .item-card-titles .cat { display: none; }
  .items-grid > .card .item-card-tiers,
  .items-grid > .card .item-card-footer { display: none !important; }
  /* Frosted category sub-pill on the thumb — same look as the POS grid card. */
  .items-grid > .card > div:first-child { position: relative; }
  .items-grid > .card .cat-sub-pill {
    position: absolute;
    bottom: 6px;
    left: 6px;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(255,255,255,0.78);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--orange-d);
    line-height: 1.4;
    max-width: calc(100% - 12px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Floating white stock chip with subtle shadow on the thumb. */
  .items-grid > .card .stock-bdg {
    background: #fff !important;
    box-shadow: var(--shadow-sm);
    padding: 3px 8px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
  }

  /* Items list row on mobile — flatten the wide desktop table into the same
     compact grid we use on the POS list: thumb · name · selected-tier price.
     Inventory-only columns (B1/B2 stock, reorder, status, Zoho, actions) are
     hidden here. Desktop is untouched. */
  table.t.t-items { display: block; }
  .t-items thead { display: none; }
  .t-items tbody { display: block; }
  .t-items tbody tr {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    column-gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
  }
  /* Hide every cell by default; then opt-in show only thumb, name, and the
     active-tier price. This is robust against extra columns being added. */
  .t-items tbody tr > td { display: none !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
  .t-items tbody tr > td.col-img { display: flex !important; }
  .t-items tbody tr > td:nth-of-type(2) { display: block !important; min-width: 0; overflow: hidden; }
  .t-items tbody tr > td.col-tier.tier-on { display: flex !important; flex-direction: column; align-items: flex-end; justify-content: center; line-height: 1.15; font-family: var(--mono); font-feature-settings: 'tnum' 1; font-size: 13.5px; font-weight: 600; }
  .t-items .prod-thumb,
  .t-items > tbody > tr > td.col-img img { width: 40px !important; height: 40px !important; border-radius: 8px !important; }
  .t-items .prod-thumb svg { width: 24px !important; height: 24px !important; }
  /* Hide the "per {unit}" subtitle on mobile (kept on desktop). */
  .t-items .item-sub { display: none !important; }

  /* §7 — Grid card chips: refine the floating white stock chip and add a
     bottom-left frosted category sub-pill on top of the thumbnail. */
  .item-card .thumb-wrap { position: relative; }
  .item-card .stock-bdg {
    background: #fff !important;
    box-shadow: var(--shadow-sm);
    padding: 3px 8px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
  }
  .item-card .cat-sub-pill {
    position: absolute;
    bottom: 6px;
    left: 6px;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(255,255,255,0.75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--orange-d);
    line-height: 1.4;
    max-width: calc(100% - 12px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Desktop hides the sub-pill (uses the .cat row underneath). */
}
@media (min-width: 768px) { .item-card .cat-sub-pill { display: none; } .item-meta-m { display: none !important; } }

/* Tier picker (mobile/tablet only — .pos-stacked): compact content-width pills. */
.pos-tiers { display: flex; flex-wrap: wrap; gap: 6px; }
.pos-tiers form { display: block; margin: 0; }
.pos-tiers .tier-pill { width: auto; }

/* Category pills: horizontal scroll strip on phones, wrap on tablet+. */
.pos-cats { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.pos-cats::-webkit-scrollbar { display: none; }
.pos-cats .cat-pill { flex: 0 0 auto; white-space: nowrap; }
@media (min-width: 768px) { .pos-cats { flex-wrap: wrap; overflow: visible; } }

/* Floating cart bar: lift it off the content + count badge. */
.pos-mobile-bar { box-shadow: 0 -4px 16px rgba(13, 17, 23, 0.08); }
.pos-mobile-bar .summary .lbl { display: inline-flex; align-items: center; gap: 6px; }
.pos-mobile-bar .cartcount { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; font-family: var(--mono); }

/* ============================================================
   Cart as a slide-up sheet (<1024px). Desktop keeps the static panel.
   ============================================================ */
.cart-sheet-head { display: none; }   /* desktop: no grabber/close */
.cart-backdrop { display: none; }
@media (max-width: 1023px) {
  /* §11 — Bottom-sheet cart polish: deeper rounded top corners, branded handle,
     navy-tinted backdrop, refined payment chips, oversized orange Charge button. */
  .pos-cart {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; bottom: 0;
    max-height: 90vh;
    background: var(--white);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 40px rgba(13, 17, 23, 0.28);
    transform: translateY(100%);
    transition: transform 300ms cubic-bezier(.16, 1, .3, 1);
    z-index: 1000;
    overflow: hidden;
  }
  .pos-cart.open { transform: translateY(0); }
  .pos-cart.no-transition { transition: none !important; }

  .cart-sheet-head { display: flex; align-items: center; gap: 10px; padding: 18px 16px 10px; border-bottom: 1px solid var(--border); position: relative; flex-shrink: 0; }
  .cart-sheet-head strong { font-size: 15px; font-weight: 600; }
  .cart-sheet-handle { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 42px; height: 4px; border-radius: 2px; background: var(--border-2); }
  .cart-sheet-close { margin-left: auto; background: none; border: 0; color: var(--muted); padding: 4px; cursor: pointer; display: inline-flex; min-height: 0; }

  /* Navy-tinted backdrop per spec (vs. plain dark grey before). */
  .cart-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 37, 64, 0.40); opacity: 0; visibility: hidden; transition: opacity 220ms; z-index: 999; }
  .cart-backdrop.open { opacity: 1; visibility: visible; }

  /* Payment method tiles: small cards, active filled navy with white. */
  .pos-cart .pm-btn { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; min-height: 60px; flex-direction: column; gap: 4px; padding: 8px 6px; font-size: 11.5px; font-weight: 600; color: var(--text-2); }
  .pos-cart .pm-btn:hover { border-color: var(--border-2); }
  .pos-cart .pm-btn.act { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 1px 3px rgba(15,37,64,0.25); }

  /* Charge button: bigger orange CTA with a soft orange shadow. */
  .pos-cart .btn-accent.btn-lg { min-height: 52px; font-size: 14.5px; font-weight: 600; border-radius: 12px; box-shadow: 0 4px 14px rgba(232, 98, 42, 0.45); }
  body.cart-sheet-open { overflow: hidden; }

  /* Sheet-only tweaks: hide the cart discount, shrink the qty stepper. */
  .cart-discount-row { display: none !important; }
  .qty-stepper .qty-btn { width: 32px !important; height: 32px !important; }
  .qty-stepper .qty-num { width: 34px !important; height: 32px !important; }
  /* Let the item name wrap (show in full) while controls stay right-aligned. */
  .cart-line { gap: 8px !important; }
  .cart-line-name { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
}

/* EOD petty-cash form: stack to one column on small phones so fields stay usable. */
@media (max-width: 480px) {
  .eod-expense-form { grid-template-columns: 1fr !important; }
  .eod-expense-form select { width: 100% !important; }
}

/* ============================================================
   Receivables mobile restyle — visual only.
   Scoped to <=767px; desktop markup/CSS untouched.
   ============================================================ */
@media (max-width: 767px) {
  /* Action row: two equal-width primary buttons. */
  .recv-m { display: block; }
  .recv-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 14px; }
  .recv-actions .recv-sync-form { margin: 0; display: block; }
  .recv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; padding: 0 12px; border-radius: 12px; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: 14px; letter-spacing: -0.005em; white-space: nowrap; border: 0; cursor: pointer; line-height: 1; color: #fff; box-sizing: border-box; text-decoration: none; }
  .recv-btn-orange { background: #E8622A; box-shadow: 0 4px 14px rgba(232,98,42,0.32); }
  .recv-btn-orange:hover { background: #D4581F; color: #fff; }
  .recv-btn-navy   { background: #1A3C5E; box-shadow: 0 4px 14px rgba(26,60,94,0.28); }
  .recv-btn-navy:hover { background: #14304B; color: #fff; }

  /* Hero card — navy gradient with soft orange radial accent top-right. */
  .recv-hero { position: relative; overflow: hidden; border-radius: 14px; padding: 16px; margin-bottom: 14px;
    background: linear-gradient(135deg, #1A3C5E 0%, #0F2540 100%); color: #fff;
    box-shadow: 0 8px 22px rgba(15,37,64,0.18); }
  .recv-hero-accent { position: absolute; top: -40px; right: -30px; width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle, rgba(232,98,42,0.28) 0%, rgba(232,98,42,0) 70%); pointer-events: none; }
  .recv-hero-label { position: relative; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 4px; }
  .recv-hero-amount { position: relative; display: flex; align-items: baseline; gap: 6px; }
  .recv-hero-ugx { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 14px; color: rgba(255,255,255,0.75); font-weight: 500; }
  .recv-hero-num { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; font-size: 30px; line-height: 1.05; font-weight: 700; letter-spacing: -0.01em; }
  .recv-hero-meta { position: relative; display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 10px; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px; color: rgba(255,255,255,0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .recv-hero-dot { color: rgba(255,255,255,0.4); }
  .recv-hero-overdue { color: #FFB590; font-weight: 500; }

  /* 2-up mini-stats. */
  .recv-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
  .recv-mini-tile { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 10px; min-width: 0; }
  .recv-mini-icon { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .recv-icon-red   { background: #FDECEC; }
  .recv-icon-amber { background: #FEF4E3; }
  .recv-mini-body { min-width: 0; flex: 1; }
  .recv-mini-num { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; font-size: 13px; font-weight: 600; color: var(--ink, #11202F); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .recv-mini-lbl { font-size: 10.5px; color: var(--muted); margin-top: 2px; letter-spacing: 0.04em; }

  /* Search field above the toggle. */
  .recv-search-form { margin: 0 0 12px; }
  .recv-search-input { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border); background: #fff; font-size: 14px; box-sizing: border-box; outline: 0; }
  .recv-search-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,60,94,0.10); }

  /* By-invoice / by-customer toggle. */
  .recv-toggle { display: inline-flex; gap: 4px; padding: 4px; background: #EDF0F5; border-radius: 12px; margin-bottom: 14px; }
  .recv-toggle-btn { appearance: none; border: 0; background: transparent; padding: 7px 14px; border-radius: 9px; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12.5px; font-weight: 500; color: var(--muted); cursor: pointer; line-height: 1; }
  .recv-toggle-btn.is-on { background: #fff; color: var(--navy); font-weight: 600; box-shadow: 0 1px 3px rgba(15,37,64,0.10); }

  /* Card list. */
  .recv-list { display: flex; flex-direction: column; gap: 10px; }
  .recv-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px 12px 10px; position: relative; overflow: hidden; }
  .recv-card.is-overdue { box-shadow: inset 3px 0 0 #B83232; }
  .recv-card-row { display: flex; align-items: center; gap: 10px; }
  .recv-avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: 12.5px; flex-shrink: 0; letter-spacing: 0.02em; }
  .recv-avatar-navy   { background: #EBF0F6; color: #1A3C5E; }
  .recv-avatar-purple { background: #EEE9F8; color: #5C3FA0; }
  .recv-avatar-orange { background: #FDF1EB; color: #C44B16; }
  .recv-card-id { flex: 1; min-width: 0; }
  .recv-cust { font-size: 14px; font-weight: 600; color: var(--ink, #11202F); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
  .recv-meta-line { display: flex; align-items: center; gap: 6px; margin-top: 3px; min-width: 0; }
  .recv-tier { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 4px; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; line-height: 1; flex-shrink: 0; }
  .recv-tier-navy   { background: #EBF0F6; color: #1A3C5E; }
  .recv-tier-purple { background: #EEE9F8; color: #5C3FA0; }
  .recv-tier-orange { background: #FDF1EB; color: #C44B16; }
  .recv-inv-num { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .recv-bal { text-align: right; flex-shrink: 0; padding-left: 6px; }
  .recv-bal-num { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; font-size: 16px; font-weight: 700; color: #11202F; line-height: 1.1; letter-spacing: -0.005em; white-space: nowrap; }
  .recv-card.is-overdue .recv-bal-num { color: #B83232; }
  .recv-bal-lbl { font-size: 9px; letter-spacing: 0.12em; color: var(--muted); margin-top: 2px; font-weight: 600; }

  .recv-meta-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 11px; color: var(--muted); }
  .recv-meta-sep { color: rgba(0,0,0,0.18); }
  .recv-overdue-pill { margin-left: auto; background: #FDECEC; color: #B83232; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; letter-spacing: 0.02em; }

  .recv-progress { margin-top: 8px; height: 3px; background: #E9ECF2; border-radius: 999px; overflow: hidden; }
  .recv-progress-bar { height: 100%; background: #1D7A50; border-radius: 999px; }

  .recv-card-actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
  .recv-unsynced { background: #FEF4E3; color: #A0620A; font-size: 10px; font-weight: 600; padding: 3px 7px; border-radius: 999px; letter-spacing: 0.02em; }
  .recv-btn-sm { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px; border-radius: 9px; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12px; font-weight: 600; line-height: 1; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; }
  .recv-btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--navy); }
  .recv-btn-ghost:hover { background: #F4F6FA; color: var(--navy); }
  .recv-btn-fill { background: #E8622A; color: #fff; margin-left: auto; }
  .recv-btn-fill:hover { background: #D4581F; color: #fff; }
  /* When unsynced chip is present, push the Fill button right manually since
     the chip uses up the auto-margin spot. */
  .recv-card-actions .recv-unsynced + .recv-btn-ghost { margin-left: 0; }

  /* By-customer group cards: nested invoice list under the header. */
  .recv-group-list { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 6px; }
  .recv-group-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: #F4F6FA; }
  .recv-group-row.is-overdue { box-shadow: inset 2px 0 0 #B83232; background: #FCEFEF; }
  .recv-group-id { flex: 1; min-width: 0; }
  .recv-group-meta { font-size: 10px; color: var(--muted); margin-top: 1px; }
  .recv-group-bal { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; font-size: 13px; font-weight: 600; color: #11202F; white-space: nowrap; }

  .recv-empty { padding: 32px 12px; text-align: center; color: var(--muted); font-size: 13px; background: #fff; border: 1px dashed var(--border); border-radius: 14px; }

  /* The page-head chips on receivables are redundant on mobile (hero shows
     the same totals). Hide them but keep desktop intact via .desktop-only. */

  /* ----- Receive payment screen (show.blade) ----- */
  .recv-pay-form { display: block; }
  .recv-sheet { background: #fff; border-radius: 18px 18px 14px 14px; padding: 8px 14px 18px; box-shadow: 0 -2px 12px rgba(15,37,64,0.06); margin: -4px -2px 14px; position: relative; }
  .recv-sheet-handle { width: 38px; height: 4px; border-radius: 2px; background: #D6DCE5; margin: 4px auto 12px; }
  .recv-sheet-hero { background: #F4F6FA; border-radius: 12px; padding: 12px; margin-bottom: 14px; }
  .recv-sheet-hero-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .recv-sheet-hero-id { flex: 1; min-width: 0; }
  .recv-sheet-hero-amt { display: flex; flex-direction: column; gap: 2px; }
  .recv-sheet-hero-lbl { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
  .recv-sheet-hero-num { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .recv-sheet-hero-ugx { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 13px; color: var(--muted); font-weight: 500; }
  .recv-sheet-hero-num .mono { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; font-size: 26px; font-weight: 700; color: #11202F; letter-spacing: -0.01em; line-height: 1.05; }
  .recv-sheet-hero-over { margin-left: auto; background: #FDECEC; color: #B83232; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }

  .recv-sheet-block { margin-bottom: 14px; }
  .recv-sheet-lbl { display: block; font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
  .recv-sheet-lbl-sub { text-transform: none; letter-spacing: 0; color: var(--muted-2); font-weight: 400; font-size: 10.5px; }

  .recv-sheet-amount-wrap { position: relative; display: flex; align-items: center; height: 56px; padding: 0 14px; border-radius: 12px; background: #fff; border: 2px solid #E8622A; gap: 8px; }
  .recv-sheet-amount-prefix { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 13px; color: var(--muted); font-weight: 500; }
  .recv-sheet-amount { flex: 1; border: 0; outline: 0; background: transparent; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; font-size: 22px; font-weight: 700; text-align: right; color: #11202F; min-width: 0; }

  .recv-sheet-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
  .recv-chip { appearance: none; border: 1px solid var(--border); background: #fff; height: 38px; border-radius: 10px; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; font-weight: 600; color: var(--navy); cursor: pointer; line-height: 1; }
  .recv-chip.is-on { background: #FDF1EB; border-color: #E8622A; color: #C44B16; }

  .recv-method-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .recv-method-tile { appearance: none; border: 1px solid var(--border); background: #fff; border-radius: 12px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; min-height: 64px; }
  .recv-method-icon { color: var(--muted); display: inline-flex; }
  .recv-method-name { font-size: 10.5px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; text-align: center; line-height: 1.1; word-break: break-word; }
  .recv-method-tile.is-on { background: #1A3C5E; border-color: #1A3C5E; }
  .recv-method-tile.is-on .recv-method-icon { color: #fff; }
  .recv-method-tile.is-on .recv-method-name { color: #fff; }

  .recv-sheet-ref { width: 100%; height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border); background: #fff; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 13px; box-sizing: border-box; outline: 0; }
  .recv-sheet-ref:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,60,94,0.10); }

  .recv-sheet-confirm { width: 100%; height: 54px; border-radius: 14px; border: 0; background: #E8622A; color: #fff; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; box-shadow: 0 6px 18px rgba(232,98,42,0.36); margin-top: 4px; }
  .recv-sheet-confirm:disabled { background: #D6DCE5; box-shadow: none; cursor: not-allowed; color: #fff; }
  .recv-sheet-confirm:hover:not(:disabled) { background: #D4581F; }

  .recv-sheet-details { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 12px; }
  .recv-sheet-details summary {
    font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: 0.04em;
    cursor: pointer; list-style: none;
    padding: 4px 0;
    display: flex; align-items: center; gap: 8px;
  }
  .recv-sheet-details summary::-webkit-details-marker { display: none; }
  .recv-sheet-details summary::after { content: '▾'; color: var(--muted-2); margin-left: 4px; }
  .recv-sheet-details[open] summary::after { content: '▴'; }
  .recv-sheet-selectall {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 500; color: var(--text-2);
    text-transform: none; letter-spacing: 0;
    cursor: pointer;
    padding: 4px 8px; border-radius: 6px;
    background: #fff; border: 1px solid var(--border);
  }
  .recv-sheet-selectall input { width: 14px; height: 14px; cursor: pointer; }

  .recv-sheet-alloc { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
  /* Interactive row — label so the whole card is one big tap target.
     Checkbox left · invoice info middle · amount input right. */
  .recv-sheet-alloc-row {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #F4F6FA;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
  }
  .recv-sheet-alloc-row:has(input.alloc-check:not(:checked)) {
    background: #fff;
    border-color: var(--border);
    opacity: 0.55;
  }
  .recv-sheet-alloc-row.is-overdue { background: #FDECEC; }
  .recv-sheet-alloc-row .alloc-check { width: 18px; height: 18px; cursor: pointer; accent-color: #E8622A; }
  .recv-sheet-alloc-id { min-width: 0; }
  .recv-sheet-alloc-num { font-size: 12.5px; color: #11202F; font-weight: 700; letter-spacing: 0.01em; }
  .recv-sheet-alloc-bal { font-size: 11px; color: var(--muted); margin-top: 2px; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
  .recv-sheet-alloc-overdue { color: #B83232; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }

  /* Amount input on the right of each row */
  .recv-sheet-alloc-amt-wrap {
    display: inline-flex; align-items: center; gap: 4px;
    background: #fff; border: 1.5px solid #E8622A;
    border-radius: 8px; padding: 4px 8px;
    min-width: 116px;
  }
  .recv-sheet-alloc-prefix { font-size: 10px; color: var(--muted); font-weight: 500; }
  .recv-sheet-alloc-amt {
    border: 0; outline: 0; background: transparent;
    font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    font-feature-settings: 'tnum' 1;
    font-size: 13px; font-weight: 700;
    text-align: right;
    color: #11202F;
    width: 100%; min-width: 0;
    appearance: textfield;
    -moz-appearance: textfield;
  }
  .recv-sheet-alloc-amt::-webkit-outer-spin-button,
  .recv-sheet-alloc-amt::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .recv-sheet-alloc-row:has(input.alloc-check:not(:checked)) .recv-sheet-alloc-amt-wrap { border-color: var(--border); }
  .recv-sheet-alloc-row:has(input.alloc-check:not(:checked)) .recv-sheet-alloc-amt { color: var(--muted); }

  .recv-sheet-alloc-empty {
    padding: 14px; text-align: center; color: var(--muted); font-size: 12px;
    background: #F4F6FA; border-radius: 10px;
  }
}

/* ============================================================
   Receipt paper — base styles used by /pos/receipt/{sale} and reused
   inside the mobile preview sheet (since the receipt page's inline
   <style> block isn't transferred when we lazy-load just .receipt-paper).
   ============================================================ */
.receipt-paper .row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13px; }
.receipt-paper .row strong { font-weight: 600; }
.receipt-paper hr { border: 0; border-top: 1px dashed var(--border-2, var(--border)); margin: 10px 0; }
.receipt-paper .receipt-line { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 12.5px; padding: 4px 0; border-bottom: 1px dotted var(--border); }
.receipt-paper .receipt-line .name { font-weight: 500; }
.receipt-paper .receipt-line .sub  { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.receipt-paper .receipt-line .total { font-family: var(--mono); font-weight: 600; text-align: right; align-self: end; }

/* ============================================================
   Receipts (sales.index) mobile restyle — visual only.
   Scoped to <=767px; desktop table left untouched via .desktop-only.
   ============================================================ */
@media (max-width: 767px) {
  .recpt-m { display: block; }
  .recpt-head { margin-bottom: 12px; }
  .recpt-title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: #11202F; line-height: 1.1; margin-top: 2px; }

  /* Action row */
  .recpt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
  .recpt-actions .recpt-sync-form { margin: 0; display: block; }
  .recpt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; padding: 0 12px; border-radius: 12px; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: 14px; white-space: nowrap; border: 0; cursor: pointer; line-height: 1; color: #fff; box-sizing: border-box; text-decoration: none; }
  .recpt-btn-orange { background: #E8622A; box-shadow: 0 4px 14px rgba(232,98,42,0.32); }
  .recpt-btn-orange:hover { background: #D4581F; color: #fff; }
  .recpt-btn-navy   { background: #1A3C5E; box-shadow: 0 4px 14px rgba(26,60,94,0.28); }
  .recpt-btn-navy:hover { background: #14304B; color: #fff; }

  /* Hero card */
  .recpt-hero { position: relative; overflow: hidden; border-radius: 14px; padding: 16px; margin-bottom: 14px;
    background: linear-gradient(135deg, #1A3C5E 0%, #0F2540 100%); color: #fff;
    box-shadow: 0 8px 22px rgba(15,37,64,0.18); }
  .recpt-hero-accent { position: absolute; top: -40px; right: -30px; width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle, rgba(232,98,42,0.28) 0%, rgba(232,98,42,0) 70%); pointer-events: none; }
  .recpt-hero-grid { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: flex-start; }
  .recpt-hero-main { min-width: 0; }
  .recpt-hero-label { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 4px; }
  .recpt-hero-amount { display: flex; align-items: baseline; gap: 6px; }
  .recpt-hero-ugx { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 14px; color: rgba(255,255,255,0.75); font-weight: 500; }
  .recpt-hero-num { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; font-size: 30px; line-height: 1.05; font-weight: 700; letter-spacing: -0.01em; }
  .recpt-hero-meta { margin-top: 10px; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px; color: rgba(255,255,255,0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .recpt-hero-sync { text-align: right; min-width: 84px; }
  .recpt-hero-sync-lbl { font-size: 10px; letter-spacing: 0.14em; color: rgba(255,255,255,0.65); font-weight: 600; margin-bottom: 2px; }
  .recpt-hero-sync-num { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; font-size: 22px; font-weight: 700; color: #fff; line-height: 1; }
  .recpt-hero-sync-bar { margin-top: 6px; height: 3px; background: rgba(255,255,255,0.18); border-radius: 999px; overflow: hidden; }
  .recpt-hero-sync-fill { height: 100%; background: #E8622A; border-radius: 999px; }

  /* Search */
  .recpt-search-form { position: relative; margin-bottom: 12px; }
  .recpt-search-ico { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); display: inline-flex; pointer-events: none; }
  .recpt-search-input { width: 100%; height: 44px; padding: 0 14px 0 36px; border-radius: 12px; border: 1px solid var(--border); background: #fff; font-size: 14px; box-sizing: border-box; outline: 0; }
  .recpt-search-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,60,94,0.10); }

  /* Filter chips */
  .recpt-filter { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; scrollbar-width: none; }
  .recpt-filter::-webkit-scrollbar { display: none; }
  .recpt-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--border); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; flex-shrink: 0; }
  .recpt-chip-n { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 600; opacity: 0.7; }
  .recpt-chip.is-on { background: #1A3C5E; border-color: #1A3C5E; color: #fff; }
  .recpt-chip.is-on .recpt-chip-n { opacity: 0.85; color: #fff; }
  .recpt-chip-green.is-on { background: #1D7A50; border-color: #1D7A50; }
  .recpt-chip-amber.is-on { background: #A0620A; border-color: #A0620A; }
  .recpt-chip-red.is-on   { background: #B83232; border-color: #B83232; }

  /* Toolbar (count + sort) */
  .recpt-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .recpt-toolbar-count { font-size: 12px; color: var(--muted); font-weight: 500; }
  .recpt-toolbar-sort { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 500; }

  /* Card list */
  .recpt-list { display: flex; flex-direction: column; gap: 10px; }
  .recpt-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px 12px 10px; }
  .recpt-card-row { display: flex; align-items: center; gap: 10px; }
  .recpt-avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12.5px; flex-shrink: 0; letter-spacing: 0.02em; }
  .recpt-avatar-navy   { background: #EBF0F6; color: #1A3C5E; }
  .recpt-avatar-purple { background: #EEE9F8; color: #5C3FA0; }
  .recpt-avatar-orange { background: #FDF1EB; color: #C44B16; }
  .recpt-card-id { flex: 1; min-width: 0; }
  .recpt-cust { font-size: 14px; font-weight: 600; color: #11202F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
  .recpt-meta-line { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; font-size: 11px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .recpt-bal { text-align: right; flex-shrink: 0; padding-left: 6px; }
  .recpt-bal-num { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; font-size: 16px; font-weight: 700; color: #11202F; line-height: 1.1; white-space: nowrap; }
  .recpt-bal-lbl { font-size: 9px; letter-spacing: 0.12em; color: var(--muted); margin-top: 2px; font-weight: 600; }

  .recpt-meta-row { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 10.5px; color: var(--muted); flex-wrap: wrap; }
  .recpt-meta-method { display: inline-flex; align-items: center; gap: 4px; background: #F4F6FA; padding: 2px 7px; border-radius: 5px; font-size: 10px; font-weight: 600; color: #1A3C5E; letter-spacing: 0.04em; }
  .recpt-tier { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 4px; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; line-height: 1; }
  .recpt-tier-navy   { background: #EBF0F6; color: #1A3C5E; }
  .recpt-tier-purple { background: #EEE9F8; color: #5C3FA0; }
  .recpt-tier-orange { background: #FDF1EB; color: #C44B16; }
  .recpt-meta-sep { color: rgba(0,0,0,0.18); }
  .recpt-meta-items, .recpt-meta-cashier { font-size: 11px; color: var(--muted); }
  .recpt-sync { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; }
  .recpt-sync .dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
  .recpt-sync-green { background: #E6F5EE; color: #1D7A50; } .recpt-sync-green .dot { background: #1D7A50; }
  .recpt-sync-amber { background: #FEF4E3; color: #A0620A; } .recpt-sync-amber .dot { background: #A0620A; }
  .recpt-sync-red   { background: #FDECEC; color: #B83232; } .recpt-sync-red .dot   { background: #B83232; }
  .recpt-sync-gray  { background: #EDF0F5; color: var(--muted); }

  .recpt-card-actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
  .recpt-btn-sm { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 34px; padding: 0 12px; border-radius: 9px; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; line-height: 1; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; }
  .recpt-btn-preview { background: #1A3C5E; color: #fff; flex: 1; }
  .recpt-btn-preview:hover { background: #14304B; color: #fff; }
  .recpt-btn-edit { background: transparent; border: 1px solid var(--border); color: var(--navy); }
  .recpt-btn-edit:hover { background: #F4F6FA; color: var(--navy); }
  .recpt-btn-del { background: transparent; border: 1px solid #F0C9C9; color: #B83232; width: 34px; padding: 0; }
  .recpt-btn-del:hover { background: #FDECEC; }
  /* Per-sale Zoho retry — amber-tinted ghost button so it stands apart from edit/delete. */
  .recpt-retry-form { margin: 0; display: inline-flex; }
  .recpt-btn-retry { background: #FEF4E3; border: 1px solid #F0CE85; color: #A0620A; }
  .recpt-btn-retry:hover { background: #FBE6BD; color: #A0620A; }

  /* Per-sale EFRIS fiscalise — navy ghost so it pairs with the existing Zoho buttons. */
  .recpt-fisc-form { margin: 0; display: inline-flex; }
  .recpt-btn-fisc  { background: #EBF0F6; border: 1px solid #B8CAD9; color: #1A3C5E; }
  .recpt-btn-fisc:hover { background: #DCE5EE; color: #1A3C5E; }
  /* FDN chip on the receipt card — small mono pill next to the sync status */
  .recpt-fdn { display: inline-flex; align-items: center; background: #EBF0F6; color: #1A3C5E; font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; letter-spacing: 0.04em; margin-left: 4px; }

  /* Bulk-sync admin UI moved out of this mobile media query — see
     the dedicated block below the @media closing brace so it also
     styles correctly on desktop viewports (>= 768px). */
  .recpt-btn-fill { background: #1A3C5E; color: #fff; }
  .recpt-btn-fill:hover { background: #14304B; color: #fff; }

  .recpt-empty { padding: 32px 12px; text-align: center; color: var(--muted); font-size: 13px; background: #fff; border: 1px dashed var(--border); border-radius: 14px; }
  .recpt-pagination { margin-top: 14px; display: flex; justify-content: center; }

  /* ====== Bottom sheets ====== */
  .recpt-sheet-backdrop {
    position: fixed; inset: 0; background: rgba(15, 37, 64, 0.42);
    z-index: 80; opacity: 0; transition: opacity 220ms ease;
  }
  .recpt-sheet-backdrop.is-open { opacity: 1; }
  body.recpt-sheet-open { overflow: hidden; }

  .recpt-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: #fff; border-radius: 18px 18px 0 0;
    padding: 8px 16px 22px;
    max-height: 88vh; overflow-y: auto;
    transform: translateY(100%); transition: transform 240ms cubic-bezier(.2,.8,.2,1);
    box-shadow: 0 -8px 28px rgba(15, 37, 64, 0.18);
  }
  .recpt-sheet.is-open { transform: translateY(0); }
  .recpt-sheet-handle { width: 38px; height: 4px; border-radius: 2px; background: #D6DCE5; margin: 4px auto 14px; }

  .recpt-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .recpt-sheet-head-text { flex: 1; min-width: 0; }
  .recpt-sheet-tag { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
  .recpt-sheet-num { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 17px; font-weight: 700; color: #11202F; letter-spacing: -0.005em; }
  .recpt-sheet-sub { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px; color: var(--muted); margin-top: 3px; }

  .recpt-sheet-body { background: #FBFBFA; border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
  .recpt-sheet-body .receipt-paper {
    /* Strip the dedicated receipt page's chrome so the body sits flush inside the sheet. */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .recpt-loading { padding: 24px 8px; text-align: center; color: var(--muted); font-size: 12px; }

  .recpt-sheet-actions { display: flex; align-items: center; gap: 8px; }
  .recpt-sheet-actions > * { flex: 1; }
  .recpt-sheet-actions .recpt-btn-fill { flex: 1.4; }

  /* ====== Delete confirmation sheet ====== */
  .recpt-sheet-confirm { padding-bottom: 22px; text-align: center; }
  .recpt-del-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: #FDECEC;
    display: inline-flex; align-items: center; justify-content: center;
    margin: 6px auto 12px;
  }
  .recpt-del-title { font-size: 18px; font-weight: 700; color: #11202F; margin-bottom: 8px; }
  .recpt-del-body { font-size: 13px; color: var(--muted-2); line-height: 1.5; max-width: 300px; margin: 0 auto 18px; }
  .recpt-del-body strong { color: #11202F; font-weight: 600; }
  .recpt-del-actions { display: flex; gap: 10px; }
  .recpt-del-actions .recpt-btn-sm { flex: 1; height: 46px; font-size: 14px; }
  .recpt-btn-cancel { background: transparent; border: 1px solid var(--border); color: #11202F; }
  .recpt-btn-cancel:hover { background: #F4F6FA; }
  .recpt-btn-confirm-del { background: #B83232; color: #fff; border: 0; }
  .recpt-btn-confirm-del:hover { background: #9D2929; color: #fff; }
}

/* ============================================================
   Bulk-sync admin UI — applies on BOTH mobile and desktop.
   Lives outside the mobile media query so the "Sync all unsynced"
   button, selection bar, and progress modal style correctly on
   wide viewports too.
   ============================================================ */
.recpt-shared-actions {
  margin: 0 0 14px;
  /* On desktop keep the action row aligned with the page's 1020px content
     column; on mobile it inherits the surrounding 16px padding. */
}

/* Two buttons in a row on desktop, stacking on phone. flex-basis lets each
   one stay readable without stretching to the full container on a 1020px
   page. */
.recpt-bulk-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 6px;
}
.recpt-bulk-action {
  margin: 0; display: contents; /* let the inner button participate in the flex layout */
}
/* Shared button shape (sizing only). Colours come from the per-button
   modifiers below so each action is distinguishable at a glance. */
.recpt-btn-bulk-fisc {
  height: 40px; padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13px; font-weight: 600; cursor: pointer;
  flex: 1 1 220px; min-width: 200px;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

/* PRIMARY — Sync all unsynced. Solid navy fill so it reads as the main CTA. */
#recpt-sync-all-btn {
  background: #1A3C5E; border-color: #1A3C5E; color: #fff;
  box-shadow: 0 2px 0 rgba(15, 37, 64, 0.10);
}
#recpt-sync-all-btn:hover { background: #14304B; border-color: #14304B; }
#recpt-sync-all-btn:disabled {
  background: #EEF1F6; border-color: var(--border); color: #6E8194;
  cursor: not-allowed; box-shadow: none; opacity: 1;
}
/* Count pill on the navy button switches to amber for high contrast. */
#recpt-sync-all-btn .recpt-btn-pill { background: #F5A623; color: #fff; }
#recpt-sync-all-btn:disabled .recpt-btn-pill { background: #6E8194; }

/* SECONDARY — Pull fiscal numbers. Green-tinted outline ("fetches data"). */
.recpt-bulk-action .recpt-btn-bulk-fisc {
  background: #ECF6EF; border-color: #BAD9C4; color: #1F7A36;
}
.recpt-bulk-action .recpt-btn-bulk-fisc:hover {
  background: #D9EDDF; border-color: #9CC4A8; color: #155A28;
}

/* Default pill (used elsewhere if the class ever appears outside the navy btn). */
.recpt-btn-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 7px;
  background: #1A3C5E; color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; font-family: var(--mono);
  margin-left: 2px;
}
.recpt-bulk-hint {
  margin: 0 0 14px;
  font-size: 11.5px; color: var(--muted);
  text-align: left; line-height: 1.5;
}
.recpt-bulk-hint b { color: var(--text); font-weight: 600; }

/* Selection checkboxes on receipt cards / rows. */
.recpt-card-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; min-width: 32px; height: 32px; margin-right: 2px;
  cursor: pointer; user-select: none;
}
.recpt-card-check input[type="checkbox"],
.recpt-select-cb {
  width: 18px; height: 18px; accent-color: #1A3C5E;
  cursor: pointer; margin: 0;
}

/* Selection action bar — sticky just under the topbar (which is ~52px tall). */
.recpt-select-bar {
  position: sticky; top: 60px; z-index: 6;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 14px;
  background: #1A3C5E; color: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(15, 37, 64, 0.18);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.recpt-select-bar-info {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px;
}
.recpt-select-bar-info strong {
  font-family: var(--mono); font-size: 15px; font-weight: 700;
}
.recpt-select-bar-link {
  background: transparent; border: 1px solid rgba(255,255,255,0.35);
  color: #fff; font-size: 12px; font-weight: 500;
  padding: 6px 10px; border-radius: 8px; cursor: pointer;
}
.recpt-select-bar-link:hover { background: rgba(255,255,255,0.1); }
.recpt-select-bar-go {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  background: #F5A623; color: #fff; border: 0;
  font-weight: 600; font-size: 13px;
  padding: 8px 14px; border-radius: 8px; cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,0.06);
}
.recpt-select-bar-go:hover { background: #E69510; }

/* Phone: stack bulk buttons and lose the sticky offset so the bar sits flush. */
@media (max-width: 540px) {
  .recpt-btn-bulk-fisc { flex: 1 1 100%; }
  .recpt-select-bar { top: 8px; }
}

/* Sync-all progress modal — backdrop + centred card. Works on both viewports. */
.recpt-sync-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(15, 37, 64, 0.55);
}
.recpt-sync-modal[hidden] { display: none; }
.recpt-sync-card {
  width: 100%; max-width: 460px;
  background: #fff; border-radius: 16px;
  padding: 18px 18px 14px;
  box-shadow: 0 20px 60px rgba(15, 37, 64, 0.35);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.recpt-sync-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.recpt-sync-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: #0F2540; flex: 1; }
.recpt-sync-x {
  background: transparent; border: 0; color: var(--muted);
  font-size: 22px; line-height: 1; padding: 0 6px; cursor: pointer;
}
.recpt-sync-bar { height: 10px; background: #EEF1F6; border-radius: 999px; overflow: hidden; }
.recpt-sync-bar-fill {
  height: 100%; background: linear-gradient(90deg, #1A3C5E, #2E6FB5);
  width: 0%; transition: width 220ms ease;
}
.recpt-sync-meta {
  margin-top: 8px;
  display: flex; align-items: baseline; gap: 6px;
  font-size: 12px; color: var(--muted);
}
.recpt-sync-pct { font-size: 18px; font-weight: 700; color: #0F2540; }
.recpt-sync-sep { color: var(--muted); }
.recpt-sync-current {
  margin-top: 6px;
  font-size: 12px; color: #0F2540;
  background: #F4F6FA; padding: 8px 10px; border-radius: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recpt-sync-log {
  margin: 10px 0 0; padding: 0; list-style: none;
  max-height: 200px; overflow-y: auto;
  font-family: var(--mono); font-size: 11.5px;
  border-top: 1px solid var(--border); padding-top: 8px;
}
.recpt-sync-log li {
  padding: 3px 2px; border-bottom: 1px dashed #EEF1F6;
  display: flex; align-items: center; gap: 4px;
}
.recpt-sync-log li.ok   { color: #1F7A36; }
.recpt-sync-log li.fail { color: #B83232; }
.recpt-sync-log li:last-child { border-bottom: 0; }
.recpt-sync-actions { margin-top: 12px; display: flex; gap: 8px; justify-content: flex-end; }

/* ============================================================
   Items page (/items) — DESKTOP search bar + view toggle.
   The mobile rules at lines ~526-575 are scoped to <=767px, so on
   desktop the field used to fall back to the base .input class and
   the absolutely-positioned search icon overlapped the placeholder.
   These rules give the desktop view the same segmented look without
   colliding with mobile (mobile uses !important and wins on phone).
   ============================================================ */
.pos-search-row {
  display: flex; align-items: stretch; gap: 12px;
  margin-bottom: 14px;
}
.pos-search-wrap {
  flex: 1 1 auto; min-width: 0;
  position: relative; display: flex; align-items: center;
}
.pos-search-icon {
  position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted-2);
  pointer-events: none;
}
/* The desktop input. Note the 44px left padding clears the 18px icon
   sitting at left:16px so the placeholder text never overlaps. */
.pos-search-input {
  height: 44px; min-height: 44px;
  width: 100%; box-sizing: border-box;
  padding: 0 16px 0 44px;
  font-size: 14px; line-height: 1.2;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.pos-search-input:hover { border-color: var(--border-2); }
.pos-search-input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26, 60, 94, 0.10);
}
.pos-search-input::placeholder { color: var(--muted-2); font-weight: 400; }

/* Segmented view toggle — same height as the input so they sit in a
   clean two-column row. */
.pos-view-toggle {
  display: inline-flex; align-items: center;
  height: 44px; padding: 3px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  flex-shrink: 0;
  box-sizing: border-box;
}
.pos-view-btn {
  width: 40px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: transparent;
  color: var(--muted-2);
  text-decoration: none;
  border: 0; padding: 0;
  transition: background-color 120ms, color 120ms;
}
.pos-view-btn svg { width: 17px; height: 17px; display: block; }
.pos-view-btn:not(.active):hover { background: var(--bg); color: var(--text-2); }
.pos-view-btn.active {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 37, 64, 0.20);
}

/* ============================================================
   Customers (/customers) — DESKTOP filter section.
   Two-row layout: full-width search on row 1, chip-set on row 2.
   Mirrors the items-page search treatment so the two pages feel
   visually consistent.
   ============================================================ */
.cust-d-filter {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

/* Row 1 — search field + optional "Clear" link when there's an active query. */
.cust-d-search-row {
  display: flex; align-items: stretch; gap: 10px;
  margin-bottom: 12px;
}
.cust-d-search-wrap {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
}
.cust-d-search-ico {
  position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center;
  color: var(--muted-2);
  pointer-events: none;
}
.cust-d-search-input {
  width: 100%; box-sizing: border-box;
  height: 44px; padding: 0 16px 0 44px;
  font-size: 14px; line-height: 1.2;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.cust-d-search-input:hover { border-color: var(--border-2); }
.cust-d-search-input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26, 60, 94, 0.10);
}
.cust-d-search-input::placeholder { color: var(--muted-2); font-weight: 400; }

/* Subtle shimmer along the input border while a live-search AJAX call is in
   flight — gives feedback that the typeahead is fetching without a spinner. */
.cust-d-search-input.is-loading {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(26, 60, 94, 0.06) 50%,
    transparent 100%
  );
  background-size: 240px 100%;
  background-repeat: no-repeat;
  background-position: -240px 0;
  animation: custDSearchShimmer 900ms linear infinite;
}
@keyframes custDSearchShimmer {
  0%   { background-position: -240px 0; }
  100% { background-position: 100% 0; }
}

.cust-d-clear {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 13px; font-weight: 500; color: var(--muted);
  text-decoration: none;
  transition: background-color 120ms, color 120ms;
}
.cust-d-clear:hover { background: var(--bg); color: var(--text); }

/* Row 2 — filter chips. Pill with label + count badge with contrasting
   pill background; the active chip is a solid navy fill. */
.cust-d-chip-row {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.cust-d-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px 0 13px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms, border-color 120ms, color 120ms;
}
.cust-d-chip:hover { background: var(--bg); border-color: var(--border-2); color: var(--text); }
.cust-d-chip-label { line-height: 1; }
.cust-d-chip-n {
  font-family: var(--mono);
  font-size: 11px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px;
  background: #EEF1F6; color: var(--muted);
  line-height: 1;
}
.cust-d-chip.is-on {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.cust-d-chip.is-on .cust-d-chip-n {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Pager row: per-page selector on the left, paginator links on the right.
   Sits inside the table card, between the table and the bulk action bar. */
.cust-d-pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.cust-d-perpage {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--muted);
  flex-wrap: wrap;
}
.cust-d-perpage-lbl { color: var(--muted); }
.cust-d-perpage-lbl span { font-family: var(--mono); color: var(--text-2); }
.cust-d-perpage-btn {
  height: 28px; min-width: 36px; padding: 0 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 12px; font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms, color 120ms;
}
.cust-d-perpage-btn:hover { background: var(--bg); border-color: var(--border-2); color: var(--text); }
.cust-d-perpage-btn.is-on {
  background: var(--navy); border-color: var(--navy); color: #fff;
}

/* Paginator link list. Laravel's default scaffolding emits a Tailwind-ish
   structure; we override the anchor/span styling so it matches the rest of
   the toolbar (32px pills, mono, navy active). */
.cust-d-pagination { margin: 0; }
.cust-d-pagination nav { display: inline-flex; align-items: center; gap: 4px; }
.cust-d-pagination .pagination,
.cust-d-pagination ul { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cust-d-pagination a,
.cust-d-pagination span,
.cust-d-pagination button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--text-2);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  text-decoration: none;
  transition: background-color 120ms, border-color 120ms, color 120ms;
}
.cust-d-pagination a:hover { background: var(--bg); border-color: var(--border-2); color: var(--text); }
.cust-d-pagination [aria-current="page"],
.cust-d-pagination [aria-current="page"] span,
.cust-d-pagination .active span {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
.cust-d-pagination [aria-disabled="true"],
.cust-d-pagination .disabled span {
  opacity: 0.45; cursor: not-allowed;
}
.cust-d-pagination svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .cust-d-pager { padding: 10px 12px; }
  .cust-d-perpage { gap: 4px; }
  .cust-d-perpage-btn { min-width: 32px; height: 26px; padding: 0 8px; font-size: 11.5px; }
}

/* ============================================================
   Customers (customers.index) mobile restyle — visual only.
   Scoped to <=767px; desktop table left untouched via .desktop-only.
   Reuses .cust-avatar / .cust-tier-badge tier palette from earlier work.
   ============================================================ */
@media (max-width: 767px) {
  .cust-m {
    /* `.main` is a flex column that clips overflow — without flex:1 + overflow:auto
       on this element, the customers page can't scroll on mobile. Matches what
       `.scrollarea` does for the other pages, plus padding-bottom to clear the
       fixed tab bar. */
    display: block;
    flex: 1; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 14px 16px calc(var(--tabbar-h) + 24px);
    background: var(--bg);
  }
  .cust-head { margin-bottom: 12px; }
  .cust-head .crumb { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
  .cust-title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: #11202F; line-height: 1.1; margin-top: 2px; }

  /* Primary action row (orange + navy) */
  .cust-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
  .cust-actions .cust-sync-form { margin: 0; display: block; }
  .cust-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; padding: 0 12px; border-radius: 12px; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: 14px; white-space: nowrap; border: 0; cursor: pointer; line-height: 1; color: #fff; box-sizing: border-box; text-decoration: none; }
  .cust-btn-orange { background: #E8622A; box-shadow: 0 4px 14px rgba(232,98,42,0.32); }
  .cust-btn-orange:hover { background: #D4581F; color: #fff; }
  .cust-btn-navy   { background: #1A3C5E; box-shadow: 0 4px 14px rgba(26,60,94,0.28); }
  .cust-btn-navy:hover { background: #14304B; color: #fff; }
  /* Secondary action row (outlined New customer + Export) */
  .cust-actions-secondary { margin-bottom: 14px; }
  .cust-btn-outline { background: #fff; color: #11202F; border: 1px solid var(--border); height: 42px; font-size: 13.5px; box-shadow: none; }
  .cust-btn-outline:hover { background: #F4F6FA; color: #11202F; }

  /* 2×2 mini-stats */
  .cust-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
  .cust-stat-tile { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px; min-width: 0; }
  .cust-stat-icon { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
  .cust-icon-purple { background: #EEE9F8; }
  .cust-icon-orange { background: #FDF1EB; }
  .cust-icon-amber  { background: #FEF4E3; }
  .cust-stat-lbl { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
  .cust-stat-num { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; font-size: 22px; font-weight: 700; color: #11202F; line-height: 1.05; letter-spacing: -0.01em; }
  .cust-stat-ugx { font-size: 11.5px; color: var(--muted); font-weight: 500; margin-right: 2px; }
  .cust-stat-sub { font-size: 10.5px; color: var(--muted); margin-top: 4px; }

  /* Search */
  .cust-search-form { position: relative; margin-bottom: 10px; }
  .cust-search-ico { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); display: inline-flex; pointer-events: none; }
  .cust-search-input { width: 100%; height: 44px; padding: 0 14px 0 36px; border-radius: 12px; border: 1px solid var(--border); background: #fff; font-size: 14px; box-sizing: border-box; outline: 0; }
  .cust-search-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,60,94,0.10); }

  /* Filter chips */
  .cust-filter { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; scrollbar-width: none; }
  .cust-filter::-webkit-scrollbar { display: none; }
  .cust-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; background: #fff; border: 1px solid var(--border); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; flex-shrink: 0; }
  .cust-chip-n { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 600; opacity: 0.7; }
  .cust-chip.is-on { background: #1A3C5E; border-color: #1A3C5E; color: #fff; }
  .cust-chip.is-on .cust-chip-n { opacity: 0.85; color: #fff; }

  /* Toolbar */
  .cust-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .cust-toolbar-count { font-size: 12px; color: var(--muted); font-weight: 500; }
  .cust-toolbar-sort { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 500; padding: 4px 9px; border: 1px solid var(--border); border-radius: 7px; background: #fff; }

  /* Card list */
  .cust-list { display: flex; flex-direction: column; gap: 10px; }
  .cust-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px; cursor: pointer; position: relative; overflow: hidden; }
  .cust-card.is-over { box-shadow: inset 3px 0 0 #B83232; }
  .cust-card-row { display: flex; align-items: center; gap: 12px; }
  /* Bigger version of the shared .cust-avatar (defined elsewhere) */
  .cust-card .cust-avatar { width: 40px; height: 40px; border-radius: 50%; font-weight: 700; font-size: 13px; letter-spacing: 0.02em; flex-shrink: 0; }
  .cust-avatar-lg { width: 48px !important; height: 48px !important; border-radius: 50%; font-size: 15px !important; }
  .cust-card-id { flex: 1; min-width: 0; }
  .cust-name { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: #11202F; line-height: 1.2; min-width: 0; letter-spacing: -0.005em; }
  .cust-name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cust-over-badge { background: #B83232; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.06em; flex-shrink: 0; }
  .cust-meta-line { display: flex; align-items: center; gap: 8px; margin-top: 4px; min-width: 0; flex-wrap: nowrap; }
  .cust-card .cust-tier-badge { font-size: 9.5px; padding: 0 7px; height: 18px; border-radius: 4px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; line-height: 1; flex-shrink: 0; }
  .cust-phone { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; font-size: 11.5px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  /* Chevron at far right of the card row — must not shrink in tight space. */
  .cust-card-row > svg { flex-shrink: 0; margin-left: 2px; }

  .cust-credit-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
  .cust-credit-main { flex: 1; min-width: 0; }
  .cust-credit-lbl { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
  .cust-credit-amount { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; font-size: 17px; font-weight: 700; color: #11202F; line-height: 1.1; margin-top: 3px; white-space: nowrap; letter-spacing: -0.005em; }
  .cust-card.is-over .cust-credit-amount { color: #B83232; }
  .cust-credit-pct { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 12.5px; font-weight: 600; color: var(--muted); flex-shrink: 0; }
  .cust-credit-pct.is-over { color: #B83232; }
  .cust-receive-btn { display: inline-flex; align-items: center; gap: 5px; background: #E8622A; color: #fff; border: 0; height: 32px; padding: 0 12px; border-radius: 9px; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
  .cust-receive-btn:hover { background: #D4581F; color: #fff; }

  .cust-empty { padding: 32px 12px; text-align: center; color: var(--muted); font-size: 13px; background: #fff; border: 1px dashed var(--border); border-radius: 14px; }

  /* ====== Bottom sheets ====== */
  .cust-sheet-backdrop {
    position: fixed; inset: 0; background: rgba(15, 37, 64, 0.42);
    z-index: 80; opacity: 0; transition: opacity 220ms ease;
  }
  .cust-sheet-backdrop.is-open { opacity: 1; }
  body.cust-sheet-open { overflow: hidden; }

  .cust-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: #fff; border-radius: 18px 18px 0 0;
    padding: 8px 16px 22px;
    max-height: 88vh; overflow-y: auto;
    transform: translateY(100%); transition: transform 240ms cubic-bezier(.2,.8,.2,1);
    box-shadow: 0 -8px 28px rgba(15, 37, 64, 0.18);
  }
  .cust-sheet.is-open { transform: translateY(0); }
  .cust-sheet-handle { width: 38px; height: 4px; border-radius: 2px; background: #D6DCE5; margin: 4px auto 14px; }

  .cust-sheet-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
  .cust-sheet-head-text { flex: 1; min-width: 0; }
  .cust-sheet-tag { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
  .cust-sheet-name-row { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #11202F; }
  .cust-sheet-name-row .cust-tier-badge { font-size: 9.5px; padding: 0 6px; height: 17px; border-radius: 4px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; line-height: 1; }
  .cust-sheet-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
  .cust-sheet-close { background: transparent; border: 0; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 8px; }
  .cust-sheet-lbl { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 10px 0 6px; }

  /* Credit box inside preview sheet */
  .cust-credit-box { background: #FCEFEF; border: 1px solid #F5D5D5; border-radius: 12px; padding: 14px; margin-bottom: 8px; }
  .cust-credit-box:not(.is-over) { background: #F4F6FA; border-color: var(--border); }
  .cust-credit-grid { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .cust-credit-limit { text-align: right; }
  .cust-credit-tag { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
  .cust-credit-big   { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; font-size: 22px; font-weight: 700; color: #11202F; line-height: 1.05; }
  .cust-credit-box.is-over .cust-credit-big { color: #B83232; }
  .cust-credit-big-2 { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; font-size: 14px; font-weight: 600; color: #11202F; line-height: 1.1; }
  .cust-credit-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 11.5px; color: var(--muted); font-weight: 500; }
  .cust-credit-over { color: #B83232; font-weight: 700; }

  /* Recent sales list */
  .cust-recent-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
  .cust-recent-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #F4F6FA; border-radius: 8px; }
  .cust-recent-id { flex: 1; min-width: 0; }
  .cust-recent-num  { font-size: 12.5px; font-weight: 600; color: #11202F; }
  .cust-recent-meta { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
  .cust-recent-total{ font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 600; color: #11202F; white-space: nowrap; }
  .cust-recent-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 12px; background: #F4F6FA; border-radius: 10px; }

  /* Sheet action row */
  .cust-sheet-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .cust-btn-sm { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 38px; padding: 0 14px; border-radius: 10px; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; line-height: 1; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; }
  .cust-btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--navy); }
  .cust-btn-ghost:hover { background: #F4F6FA; color: var(--navy); }
  .cust-btn-fill { background: #E8622A; color: #fff; flex: 1; }
  .cust-btn-fill:hover { background: #D4581F; color: #fff; }
  .cust-btn-del { background: transparent; border: 1px solid #F0C9C9; color: #B83232; width: 38px; padding: 0; }
  .cust-btn-del:hover { background: #FDECEC; }

  /* Edit sheet form */
  .cust-edit-form { display: block; }
  .cust-edit-lbl { display: block; font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 8px 0 6px; }
  .cust-edit-input { width: 100%; height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border); background: #fff; font-size: 14px; box-sizing: border-box; outline: 0; }
  .cust-edit-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,60,94,0.10); }
  .cust-edit-actions { margin-top: 16px; }
  .cust-edit-actions .cust-btn-fill { background: #1A3C5E; }
  .cust-edit-actions .cust-btn-fill:hover { background: #14304B; }

  /* Delete confirmation sheet */
  .cust-sheet-confirm { padding-bottom: 22px; text-align: center; }
  .cust-del-icon { width: 64px; height: 64px; border-radius: 50%; background: #FDECEC; display: inline-flex; align-items: center; justify-content: center; margin: 6px auto 12px; }
  .cust-del-title { font-size: 18px; font-weight: 700; color: #11202F; margin-bottom: 8px; }
  .cust-del-body { font-size: 13px; color: var(--muted-2); line-height: 1.5; max-width: 320px; margin: 0 auto 18px; }
  .cust-del-body strong { color: #11202F; font-weight: 600; }
  .cust-del-actions { display: flex; gap: 10px; }
  .cust-del-actions .cust-btn-sm { flex: 1; height: 46px; font-size: 14px; }
  .cust-btn-cancel { background: transparent; border: 1px solid var(--border); color: #11202F; }
  .cust-btn-cancel:hover { background: #F4F6FA; }
  .cust-btn-confirm-del { background: #B83232; color: #fff; border: 0; }
  .cust-btn-confirm-del:hover { background: #9D2929; color: #fff; }
}

/* ============================================================
   Reports (reports.index) mobile restyle — visual only.
   Scoped to <=767px; desktop tables left untouched via .desktop-only.
   ============================================================ */
@media (max-width: 767px) {
  .rep-m {
    display: block; flex: 1; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 14px 16px calc(var(--tabbar-h) + 24px);
    background: var(--bg);
  }
  .rep-head { margin-bottom: 12px; }
  .rep-head .crumb { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
  .rep-title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: #11202F; line-height: 1.1; margin-top: 2px; }

  /* Action row */
  .rep-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
  .rep-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; padding: 0 12px; border-radius: 12px; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: 14px; white-space: nowrap; border: 0; cursor: pointer; line-height: 1; color: #fff; box-sizing: border-box; }
  .rep-btn-orange { background: #E8622A; box-shadow: 0 4px 14px rgba(232,98,42,0.32); }
  .rep-btn-orange:hover { background: #D4581F; }
  .rep-btn-navy   { background: #1A3C5E; box-shadow: 0 4px 14px rgba(26,60,94,0.28); }
  .rep-btn-navy:hover { background: #14304B; }

  /* Range tabs */
  .rep-range-tabs { display: inline-flex; gap: 4px; padding: 4px; background: #EDF0F5; border-radius: 12px; margin-bottom: 14px; width: 100%; box-sizing: border-box; }
  .rep-range-tab { flex: 1; appearance: none; border: 0; background: transparent; padding: 8px 12px; border-radius: 9px; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; line-height: 1; text-decoration: none; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
  .rep-range-tab.is-on { background: #fff; color: #1A3C5E; box-shadow: 0 1px 3px rgba(15,37,64,0.10); }

  /* Hero card */
  .rep-hero { position: relative; overflow: hidden; border-radius: 14px; padding: 16px; margin-bottom: 14px;
    background: linear-gradient(135deg, #1A3C5E 0%, #0F2540 100%); color: #fff;
    box-shadow: 0 8px 22px rgba(15,37,64,0.18); }
  .rep-hero-accent { position: absolute; top: -50px; right: -40px; width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle, rgba(232,98,42,0.32) 0%, rgba(232,98,42,0) 70%); pointer-events: none; }
  .rep-hero-grid { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: flex-end; }
  .rep-hero-main { min-width: 0; }
  .rep-hero-label { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 4px; }
  .rep-hero-amount { display: flex; align-items: baseline; gap: 6px; }
  .rep-hero-ugx { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 14px; color: rgba(255,255,255,0.75); font-weight: 500; }
  .rep-hero-num { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; font-size: 30px; line-height: 1.05; font-weight: 700; letter-spacing: -0.01em; }
  .rep-hero-meta { margin-top: 8px; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px; color: rgba(255,255,255,0.78); display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
  .rep-hero-change { color: #7ADBA8; font-weight: 600; }
  .rep-hero-change.is-down { color: #FFB590; }
  .rep-hero-dot { color: rgba(255,255,255,0.35); }

  .rep-hero-chart { display: inline-flex; align-items: flex-end; gap: 4px; height: 60px; padding-bottom: 2px; }
  .rep-bar { display: inline-block; width: 9px; background: rgba(255,255,255,0.28); border-radius: 2px 2px 0 0; }
  .rep-bar.is-last { background: #E8622A; }

  .rep-hero-axis { position: relative; margin-top: 10px; display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.55); }

  /* 2x2 mini-stats */
  .rep-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
  .rep-stat-tile { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px; min-width: 0; }
  .rep-stat-icon { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
  .rep-icon-purple { background: #EEE9F8; }
  .rep-icon-amber  { background: #FEF4E3; }
  .rep-icon-green  { background: #E6F5EE; }
  .rep-icon-orange { background: #FDF1EB; }
  .rep-stat-lbl { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rep-stat-num { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; font-size: 18px; font-weight: 700; color: #11202F; line-height: 1.1; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rep-stat-ugx { font-size: 11.5px; color: var(--muted); font-weight: 500; margin-right: 2px; }
  .rep-stat-sub { font-size: 10.5px; color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Section label */
  .rep-section-lbl { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 4px 0 8px; display: block; }

  /* Breakdown tabs */
  .rep-bd-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; padding-bottom: 4px; scrollbar-width: none; }
  .rep-bd-tabs::-webkit-scrollbar { display: none; }
  .rep-bd-tab { appearance: none; border: 1px solid var(--border); background: #fff; padding: 8px 14px; border-radius: 999px; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; line-height: 1; white-space: nowrap; flex-shrink: 0; }
  .rep-bd-tab.is-on { background: #1A3C5E; border-color: #1A3C5E; color: #fff; }

  /* Breakdown rows */
  .rep-list { display: flex; flex-direction: column; gap: 6px; }
  .rep-row { display: flex; align-items: center; gap: 10px; padding: 12px; background: #fff; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; text-align: left; font-family: inherit; appearance: none; width: 100%; box-sizing: border-box; }
  .rep-row-static { cursor: default; }
  .rep-row-ico { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 700; font-size: 12px; }
  .rep-ico-navy   { background: #EBF0F6; color: #1A3C5E; }
  .rep-ico-purple { background: #EEE9F8; color: #5C3FA0; }
  .rep-ico-amber  { background: #FEF4E3; color: #A0620A; }
  .rep-ico-red    { background: #FDECEC; color: #B83232; }
  .rep-ico-green  { background: #E6F5EE; color: #1D7A50; }
  .rep-ico-orange { background: #FDF1EB; color: #C44B16; }
  .rep-row-id { flex: 1; min-width: 0; }
  .rep-row-name { font-size: 13.5px; font-weight: 600; color: #11202F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rep-row-meta { font-size: 10.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rep-row-amount { text-align: right; flex-shrink: 0; padding-left: 6px; }
  .rep-row-total { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; font-size: 14px; font-weight: 700; color: #11202F; line-height: 1.1; white-space: nowrap; }
  .rep-row-pct   { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px; color: var(--muted); margin-top: 2px; }
  .rep-empty { padding: 24px 12px; text-align: center; color: var(--muted); font-size: 12.5px; background: #fff; border: 1px dashed var(--border); border-radius: 12px; }

  /* ====== Sheets ====== */
  .rep-sheet-backdrop { position: fixed; inset: 0; background: rgba(15, 37, 64, 0.42); z-index: 80; opacity: 0; transition: opacity 220ms ease; }
  .rep-sheet-backdrop.is-open { opacity: 1; }
  body.rep-sheet-open { overflow: hidden; }

  .rep-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: #fff; border-radius: 18px 18px 0 0; padding: 8px 16px 22px; max-height: 88vh; overflow-y: auto; transform: translateY(100%); transition: transform 240ms cubic-bezier(.2,.8,.2,1); box-shadow: 0 -8px 28px rgba(15, 37, 64, 0.18); }
  .rep-sheet.is-open { transform: translateY(0); }
  .rep-sheet-handle { width: 38px; height: 4px; border-radius: 2px; background: #D6DCE5; margin: 4px auto 14px; }
  .rep-sheet-tag { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
  .rep-sheet-title { font-size: 18px; font-weight: 700; color: #11202F; letter-spacing: -0.005em; }
  .rep-sheet-sub { font-size: 12px; color: var(--muted); margin-top: 4px; margin-bottom: 14px; }

  .rep-drill-body { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
  .rep-drill-body .rep-row { background: #F4F6FA; border: 0; }

  .rep-sheet-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
  .rep-sheet-actions > * { flex: 1; }
  .rep-btn-sm { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 46px; padding: 0 14px; border-radius: 11px; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13.5px; font-weight: 600; line-height: 1; border: 0; cursor: pointer; text-decoration: none; }
  .rep-btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--navy); }
  .rep-btn-ghost:hover { background: #F4F6FA; color: var(--navy); }
  .rep-btn-fill { background: #1A3C5E; color: #fff; }
  .rep-btn-fill:hover { background: #14304B; color: #fff; }
  .rep-btn-confirm { background: #E8622A; }
  .rep-btn-confirm:hover { background: #D4581F; }
  .rep-btn-cancel { background: transparent; border: 1px solid var(--border); color: #11202F; }
  .rep-btn-cancel:hover { background: #F4F6FA; }

  /* Export sheet — format grid + include switches */
  .rep-format-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; }
  .rep-format-tile { appearance: none; border: 1px solid var(--border); background: #fff; border-radius: 12px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; min-height: 70px; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; color: var(--muted); }
  .rep-format-tile.is-on { background: #1A3C5E; border-color: #1A3C5E; color: #fff; }
  .rep-format-tile.is-on svg { color: #fff; }

  .rep-include-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
  .rep-include-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #F4F6FA; border-radius: 10px; font-size: 13.5px; color: #11202F; cursor: pointer; }
  .rep-include-row > span:first-child { flex: 1; }
  .rep-include-row .rep-switch { position: absolute; opacity: 0; pointer-events: none; }
  .rep-include-row .rep-switch-vis { width: 36px; height: 20px; border-radius: 999px; background: #D6DCE5; position: relative; transition: background 160ms; flex-shrink: 0; }
  .rep-include-row .rep-switch-vis::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: left 160ms; }
  .rep-include-row .rep-switch:checked ~ .rep-switch-vis { background: #1D7A50; }
  .rep-include-row .rep-switch:checked ~ .rep-switch-vis::after { left: 18px; }

  .rep-email-input { width: 100%; height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border); background: #fff; font-size: 14px; box-sizing: border-box; outline: 0; margin-bottom: 14px; }
  .rep-email-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,60,94,0.10); }

  .rep-custom-form { display: block; }
}

/* ============================================================
   Visibility utility refinements
   ============================================================ */
@media (min-width: 768px) {
  .mobile-only { display: none !important; }
  .desktop-only { display: block !important; }
  .desktop-only.inline { display: inline-flex !important; }
  /* Grid-display variants — without these, `display: block !important` above
     collapses .kpi-grid / .kpi-grid-3 (and any grid-display utility paired
     with .desktop-only) into a single column. */
  .desktop-only.kpi-grid,
  .desktop-only.kpi-grid-3 { display: grid !important; }
}

/* ============================================================
   Items page (/items) — desktop stat cards.
   The markup uses .kpi-grid + .card.card-b with .kpi-num / .kpi-sub
   inner classes, but those classes had no styling — so the number,
   sub-line, and overall card had no real visual hierarchy. These
   rules restore the look the design intends.
   ============================================================ */
.kpi-num {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-feature-settings: 'tnum' 1;
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.01em;
  color: #11202F;
  line-height: 1.1;
  margin-top: 4px;
  word-break: keep-all;
}
.kpi-sub {
  font-size: 11.5px; color: var(--muted);
  margin-top: 4px;
}
@media (min-width: 768px) {
  .kpi-num { font-size: 26px; }
  .kpi-grid .card-b, .kpi-grid-3 .card-b {
    padding: 16px 18px;
    /* The cards lay out at a uniform height even when one has a long UGX
       value — vertically aligns the bottom sub-line across the row. */
    display: flex; flex-direction: column;
  }
  .kpi-grid .card-b .kpi-sub, .kpi-grid-3 .card-b .kpi-sub { margin-top: auto; padding-top: 6px; }
}
@media (min-width: 1024px) {
  .kpi-grid .card-b, .kpi-grid-3 .card-b { padding: 18px 22px; }
}

/* ============================================================
   Purchases module — Phase 1 styles.
   Covers: bill create/edit form, supplier dialog, show timeline,
   line items table tweaks. Reuses .cust-d-* search + paginate
   styles where the markup matches (those styles live above).
   ============================================================ */

/* Page-level grids — header + totals side-by-side on desktop, stack on mobile. */
.bill-grid {
  display: grid; gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .bill-grid { grid-template-columns: 2fr 1fr; }
}

.bill-header { padding: 16px 18px; }
.bill-header-grid {
  display: grid; gap: 12px;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 700px) {
  .bill-header-grid { grid-template-columns: repeat(3, 1fr); }
}
.bill-field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--muted);
}
.bill-field > span:first-child {
  font-size: 11px; font-weight: 600;
  color: var(--muted); letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bill-field small.muted { font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Totals panel — sticky-ish, mono numbers, navy grand row. */
.bill-totals { padding: 16px 18px; }
.bill-total-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px; color: var(--text-2);
  border-bottom: 1px dashed var(--border);
}
.bill-total-row:last-child { border-bottom: 0; }
.bill-total-row .num { font-weight: 600; color: var(--text); }
.bill-total-row input.input {
  height: 32px; padding: 0 10px; text-align: right;
  font-size: 12.5px;
}
.bill-grand {
  margin-top: 6px;
  padding: 12px 0 4px;
  font-weight: 700;
  border-top: 1.5px solid var(--text);
  border-bottom: 0 !important;
  font-size: 14px;
}
.bill-grand .num { font-size: 16px; color: var(--navy); }

/* Line items table — slightly tighter than the default .t style. */
.bill-lines th, .bill-lines td { padding: 8px 10px; vertical-align: top; }
.bill-lines input.input, .bill-lines select.input {
  height: 34px; padding: 0 8px; font-size: 12.5px;
}
.bill-lines .bill-total { font-weight: 600; padding-top: 14px; }
.btn-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--white);
  border-radius: 6px; color: var(--muted-2);
  cursor: pointer; font-size: 16px; line-height: 1;
  padding: 0;
}
.btn-icon:hover { background: var(--bg); color: var(--red); border-color: var(--red); }

/* Sticky save / submit / approve bar at the bottom of the bill form. */
.bill-actions {
  margin-top: 18px;
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  padding: 12px 0;
}

/* Bill timeline — five horizontal steps with dotted connectors. */
.bill-timeline {
  display: flex; align-items: stretch; gap: 0; flex-wrap: wrap;
}
.bill-step {
  flex: 1 1 0; min-width: 130px;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px 10px 0;
  position: relative;
}
.bill-step + .bill-step::before {
  content: ''; position: absolute; left: -10px; top: 22px;
  width: 24px; border-top: 1.5px dashed var(--border);
}
.bill-step-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--border); flex-shrink: 0;
  margin-top: 4px;
  box-shadow: 0 0 0 3px var(--white), 0 0 0 4px var(--border);
}
.bill-step.is-on .bill-step-dot {
  background: var(--navy);
  box-shadow: 0 0 0 3px var(--white), 0 0 0 4px var(--navy);
}
.bill-step-lbl { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.bill-step.is-on .bill-step-lbl { color: var(--navy); }
.bill-step-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Supplier add/edit dialog. Native <dialog> styling. */
.sup-dialog {
  border: 0; border-radius: 14px;
  padding: 0; max-width: 560px; width: calc(100% - 32px);
  margin: auto; /* centre the modal in the viewport */
  box-shadow: 0 30px 80px rgba(15,37,64,0.35);
}
.sup-dialog::backdrop { background: rgba(15,37,64,0.55); }
.sup-form { padding: 16px 18px 18px; }
.sup-dialog-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.sup-dialog-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: #0F2540; flex: 1; }
.sup-dialog-x {
  background: transparent; border: 0; color: var(--muted);
  font-size: 22px; line-height: 1; padding: 0 6px; cursor: pointer;
}
.sup-grid {
  display: grid; gap: 12px;
  grid-template-columns: 1fr 1fr;
}
.sup-field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px;
}
.sup-field > span:first-child {
  font-size: 11px; font-weight: 600; color: var(--muted);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.sup-field small.muted { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted-2); }
.sup-checkbox {
  flex-direction: row; align-items: center;
  font-size: 12.5px; color: var(--text-2);
}
.sup-checkbox > span {
  font-size: 12.5px; font-weight: 500; color: var(--text-2);
  text-transform: none; letter-spacing: 0;
}
.sup-dialog-actions {
  margin-top: 16px;
  display: flex; gap: 8px; justify-content: flex-end;
}
@media (max-width: 600px) {
  .sup-grid { grid-template-columns: 1fr; }
  .bill-actions { justify-content: stretch; }
  .bill-actions .btn { flex: 1; }
}

/* ============================================================
   Bill form — mobile polish (≤767px).
   Force every field grid to a single column so date pickers stop
   forcing horizontal overflow, tighten card paddings, give the
   sticky action bar room above the bottom tab bar, and stack the
   line-items table into card-style rows that fit a phone screen.
   ============================================================ */
@media (max-width: 767px) {
  /* Page head — title left, single action on the right, no overflow. */
  .page-head { padding: 10px 14px; gap: 8px; }
  .page-head h1 { font-size: 18px; }
  .page-head .crumb { font-size: 10.5px; letter-spacing: 0.14em; }
  .page-head .actions { gap: 6px; }
  .page-head .actions .btn { min-height: 38px; }

  /* Outer scrollarea breathing room + tabbar safe area. */
  .scrollarea.pad { padding: 12px 14px 110px; }

  /* Forms collapse to a single column at phone widths so the supplier-
     side card stops overflowing horizontally. */
  .bill-grid { gap: 12px; margin-top: 0; }
  .bill-header { padding: 14px; }
  .bill-header-grid { grid-template-columns: 1fr; gap: 12px; }
  .bill-field > span:first-child { font-size: 10.5px; }

  /* Totals card — tighter rhythm. */
  .bill-totals { padding: 14px; }
  .bill-total-row { padding: 8px 0; font-size: 13px; }
  .bill-total-row input.input { height: 36px; min-height: 36px; max-width: 110px; }
  .bill-grand { font-size: 14px; padding: 12px 0 2px; }
  .bill-grand .num { font-size: 17px; }

  /* Line items — convert the table to vertical cards. Each <tr> becomes
     a stacked block; cells lose their column widths and label themselves
     via ::before pulled from data-label. Item picker spans full width
     so the predictive dropdown stays usable. */
  .bill-lines { display: block; }
  .bill-lines thead { display: none; }
  .bill-lines tbody, .bill-lines tr { display: block; }
  .bill-lines tr.bill-line-row {
    border: 1px solid var(--border); border-radius: 12px;
    padding: 12px; margin: 0 14px 10px; background: var(--white);
    position: relative;
  }
  .bill-lines td { display: block; padding: 0; border: 0; text-align: left; }
  .bill-lines td:not(:first-child) { margin-top: 10px; }
  /* The 3 numeric cells (qty / unit cost / line total) sit on one row */
  .bill-lines tr.bill-line-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 8px; row-gap: 10px;
    align-items: end;
  }
  .bill-lines tr.bill-line-row > td:first-child { grid-column: 1 / -1; }
  .bill-lines tr.bill-line-row > td:nth-child(5) {
    grid-column: 1 / -1;
    display: flex; justify-content: flex-end; margin-top: 4px;
  }
  /* Tag numeric cells with their label so the user knows what's what
     without the table header. */
  .bill-lines td.r::before {
    content: attr(data-label);
    display: block; font-size: 10.5px; font-weight: 600;
    color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase;
    margin-bottom: 4px;
  }
  .bill-lines input.input { height: 40px; min-height: 40px; font-size: 14px; padding: 0 10px; width: 100%; box-sizing: border-box; }
  .bill-lines .bill-total {
    font-size: 14px; font-weight: 600; padding: 9px 10px;
    background: var(--bg); border-radius: 8px; min-height: 40px;
    display: flex; flex-direction: column;
    align-items: flex-end; justify-content: center;
    text-align: right;
  }
  .bill-lines .bill-total::before { margin-bottom: 2px; }
  .bill-lines .btn-icon { width: 36px; height: 36px; font-size: 18px; }
  /* Line-items card header on mobile — wrap title + Add Item button */
  .bill-lines + div { font-size: 11.5px; padding: 12px 14px; }

  /* Notes + attachment cards — collapse to single column. */
  .bill-grid > .card.card-b { padding: 14px; }

  /* Action bar — full-width stacked buttons, comfortably above tabbar. */
  .bill-actions {
    margin-top: 18px;
    padding: 0;
    flex-direction: column-reverse;   /* primary action sits on top */
    gap: 8px;
  }
  .bill-actions .btn {
    width: 100%; min-height: 48px; font-size: 14.5px; font-weight: 600;
  }

  /* Picker dropdown spans the full line-item card so options aren't
     clipped by the narrow input column. */
  .pb-item-results { left: -2px; right: -2px; }

  /* ============================================================
     Stock transfer form (/transfers/create) — same single-column
     + stacked-card treatment as the bill form. Inline styles in the
     markup (grid-column: span 3 on Reason) need an override here so
     the browser doesn't auto-add implicit columns to satisfy the span.
     ============================================================ */
  .bill-header-grid > * { grid-column: 1 / -1 !important; }

  /* Items table — convert to vertical cards. Same pattern as
     .bill-lines but scoped to the transfer's `t` table. */
  table.t:has(#txfr-lines-body) { display: block; }
  table.t:has(#txfr-lines-body) thead { display: none; }
  table.t:has(#txfr-lines-body) tbody { display: block; }
  table.t:has(#txfr-lines-body) tr.txfr-line-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8px; row-gap: 10px;
    border: 1px solid var(--border); border-radius: 12px;
    padding: 12px; margin: 0 14px 10px; background: var(--white);
    align-items: end;
  }
  table.t:has(#txfr-lines-body) tr.txfr-line-row > td { display: block; padding: 0; border: 0; }
  table.t:has(#txfr-lines-body) tr.txfr-line-row > td:first-child { grid-column: 1 / -1; }
  table.t:has(#txfr-lines-body) tr.txfr-line-row > td:nth-child(4) {
    grid-column: 1 / -1; display: flex; justify-content: flex-end; margin-top: 4px;
  }
  table.t:has(#txfr-lines-body) tr.txfr-line-row > td.r::before {
    content: attr(data-label);
    display: block; font-size: 10.5px; font-weight: 600;
    color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase;
    margin-bottom: 4px;
    /* Override the inherited .mono from the parent td so labels stay
       in the regular sans-serif weight, matching every other field label. */
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
  }
  table.t:has(#txfr-lines-body) input.input { height: 40px; min-height: 40px; font-size: 14px; padding: 0 10px; width: 100%; box-sizing: border-box; }
  table.t:has(#txfr-lines-body) .txfr-onhand {
    font-size: 14px; font-weight: 600; padding: 9px 10px;
    background: var(--bg); border-radius: 8px; min-height: 40px;
    display: flex; flex-direction: column;
    align-items: flex-start; justify-content: center;
  }
  table.t:has(#txfr-lines-body) .txfr-onhand::before { margin-bottom: 2px; }
  table.t:has(#txfr-lines-body) .btn-icon { width: 36px; height: 36px; font-size: 18px; }
}


/* Add a navy chip variant the purchase bill statusChip() emits. */
.chip.navy {
  background: var(--navy-l, #EAEFF6);
  color: var(--navy);
}

/* Item-edit modal: per-item tax classification segmented radio group.
   2-up by default (VAT + Exempt). */
.item-vat-toggle {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.item-vat-toggle.two-up { grid-template-columns: repeat(2, 1fr); }
.item-vat-opt {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.item-vat-opt:hover { background: var(--bg); border-color: var(--border-2); }
.item-vat-opt.is-on, .item-vat-opt:has(input:checked) {
  background: rgba(26, 60, 94, 0.06);
  border-color: var(--navy);
}
.item-vat-opt input[type="radio"] {
  /* hide the native control — the whole tile is clickable */
  position: absolute; opacity: 0; pointer-events: none;
}
.item-vat-lbl {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.item-vat-opt.is-on .item-vat-lbl,
.item-vat-opt:has(input:checked) .item-vat-lbl { color: var(--navy); }
.item-vat-help {
  font-size: 10.5px; color: var(--muted); line-height: 1.35;
}
@media (max-width: 540px) {
  .item-vat-toggle { grid-template-columns: 1fr; }
}

/* Procurement dashboard — 6-month trend bars. */
.pd-trend {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 14px; align-items: end;
  height: 140px; padding: 0 4px;
}
.pd-trend-col {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  height: 100%; justify-content: flex-end;
}
.pd-trend-bar {
  width: 100%; max-width: 60px;
  background: linear-gradient(180deg, #2E6FB5 0%, #1A3C5E 100%);
  border-radius: 6px 6px 0 0;
  transition: opacity 120ms;
}
.pd-trend-col:hover .pd-trend-bar { opacity: 0.85; }
.pd-trend-lbl {
  font-size: 11px; font-weight: 600; color: var(--muted);
  letter-spacing: 0.04em;
}

/* ============================================================
   POS — extracted styles (Phase A inline-style cleanup).
   Replaces 100+ runtime `style="..."` attributes on /pos so the HTML
   stays cacheable and these patterns can be styled / themed without
   editing Blade. Order: thumbnails → tier columns → stock badge
   → cart sidebar → utilities.
   ============================================================ */

/* List-view item thumbnail (46×46) and grid-view tile thumbnail. */
.pos-thumb-46  { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; background: var(--bg-2); }
.pos-thumb-tile { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; background: #F8F9FC; }

/* Tier column cells in the list view — was an inline `background:
   var(--purple-l|orange-l|navy-l)` per row, multiplied across every
   item. Selectors target `.col-tier[data-tier="…"]` plus the runtime
   `tier-on` class so the column lights up only for the active tier. */
.col-tier[data-tier="agent"]     { color: var(--purple); }
.col-tier[data-tier="wholesale"] { color: var(--orange-d); }
.col-tier[data-tier="retail"]    { color: var(--navy); }
.col-tier.tier-on[data-tier="agent"]     { background: var(--purple-l); }
.col-tier.tier-on[data-tier="wholesale"] { background: var(--orange-l); }
.col-tier.tier-on[data-tier="retail"]    { background: var(--navy-l); }

/* Item stock badge state (over the grid thumb) — was inline ternary. */
.stock-bdg[data-state="out"] { color: var(--red); }
.stock-bdg[data-state="low"] { color: var(--amber); }
/* ok state inherits default text color */

/* Item rows in the list view — names + sub line. */
.item-name { font-size: 13.5px; font-weight: 500; }
.item-sub  { font-size: 10.5px; color: var(--muted-2); font-family: var(--mono); }
.cell-num-sm { font-size: 13px; }

/* Cart sidebar header (customer + tier row). */
.pos-cart-head { padding: 14px 18px 12px; border-bottom: 1px solid var(--border); }
.pos-cart-tier-row { display: flex; gap: 6px; margin-top: 11px; align-items: center; }
.pos-cart-tier-lbl {
  font-size: 10px; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.10em; margin-right: 2px;
}

/* Cart lines region (scroll body) + cart-empty state. */
.pos-cart-lines { flex: 1; overflow: auto; }
.pos-cart-line {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
  align-items: center;
}
.pos-cart-line > .cart-line-side { min-width: 0; }
.cart-line-name {
  font-size: 13.5px; font-weight: 600; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text);
}
.cart-line-price { font-size: 11px; color: var(--muted); margin-top: 2px; }
.cart-line-total {
  font-size: 13px; font-weight: 600; color: var(--text);
  min-width: 60px; text-align: right;
}
.cart-line-rm { padding: 4px; color: var(--muted-2); }

/* Cart empty state. */
.pos-cart-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 64px 20px; color: var(--muted); text-align: center;
}
.pos-cart-empty-ico {
  width: 54px; height: 54px; border-radius: 50%; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px; color: var(--muted-2);
}
.pos-cart-empty-t { font-weight: 500; color: var(--text-2); margin-bottom: 4px; font-size: 13.5px; }
.pos-cart-empty-s { font-size: 11.5px; max-width: 240px; line-height: 1.4; }

/* Cart totals + payment block. */
.pos-cart-foot { border-top: 1px solid var(--border); background: var(--bg); }
.pos-cart-totals { padding: 12px 18px 6px; }
.pos-cart-line-sm {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; margin-bottom: 8px;
}
.pos-cart-line-sm.sub  { align-items: flex-start; margin-bottom: 4px; }
.pos-cart-sub-label    { color: var(--text-2); }
.pos-cart-sub-val      { color: var(--muted); }
.pos-cart-sub-val-ugx  { font-size: 10px; }
.pos-cart-sub-val .num { color: var(--text); }
.pos-cart-disc-input { width: 62px; padding: 3px 6px; font-size: 12px; text-align: right; }
.pos-cart-discrow-side { display: flex; align-items: center; gap: 4px; }
.pos-cart-divider { border-top: 1px dashed var(--border-2); }
.pos-cart-grand {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0 4px;
}
.pos-cart-grand-lbl { font-size: 14px; }
.pos-cart-grand-val { color: var(--muted); font-size: 11px; letter-spacing: 0.04em; }
.pos-cart-grand-val .num {
  font-size: 20px; color: var(--navy); letter-spacing: -0.01em;
}

/* Payment method grid + tendered/change row + action row. */
.pos-pay-grid {
  padding: 4px 18px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.pos-pay-ref { padding: 8px 18px 0; }
.pos-pay-ref input.input { font-size: 12px; }
.pos-tender-grid {
  padding: 10px 18px 4px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.pos-tender-input { font-size: 13px; text-align: right; }
.pos-change-input.has-change { background: var(--bg-2); color: var(--green); }
.pos-change-input.no-change  { background: var(--bg-2); color: var(--muted); }
.pos-tender-grid .label { margin-bottom: 2px; }
.pos-action-grid {
  padding: 10px 18px 16px;
  display: grid; grid-template-columns: auto 1fr; gap: 8px;
}
.pos-action-grid .btn { height: 100%; }
.pos-action-grid .btn.btn-accent { width: 100%; justify-content: center; }
.pos-pm-btn-disabled { opacity: 0.45; }

/* List-view table column widths (was an inline 46px). */
.t .col-img { width: 46px; }

/* Modal width — reused across receipt + future modals. */
.modal-w-sm { width: min(560px, calc(100vw - 32px)); }

/* Quantity stepper inside each cart line. Was 3 inline-styled buttons
   per line; now driven entirely from these classes. */
.qty-stepper {
  display: flex; align-items: center;
  border: 1px solid var(--border-2); border-radius: 7px;
  overflow: hidden; background: var(--white);
}
.qty-stepper form { margin: 0; }
.qty-stepper form.qty-form-mid {
  border-left: 1px solid var(--border-2);
  border-right: 1px solid var(--border-2);
}
.qty-btn {
  width: 40px; height: 40px; min-height: 0;
  padding: 0; border-radius: 0; border: 0;
  display: flex; align-items: center; justify-content: center;
}
.qty-num {
  width: 42px; height: 40px; border: 0;
  text-align: center; background: transparent;
  padding: 0; font-size: 13px; font-weight: 600;
}

/* Item search row + categories. */
.pos-search-row { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; }
.pos-search-wrap { flex: 1; position: relative; }
.pos-search-icon {
  position: absolute; top: 50%; left: 14px; transform: translateY(-50%);
  display: flex; color: var(--muted-2);
}
.pos-cats { display: flex; gap: 6px; margin-bottom: 14px; }
.pos-no-results {
  display: none; padding: 32px; text-align: center;
  color: var(--muted); font-size: 13px;
}

/* Wrapper card around the list-view table — was inline padding 0. */
.pos-card-flat { padding: 0; }

/* Spacing utilities used in a handful of POS spots. */
.pos-stacked { margin-bottom: 10px; }
.pos-tiers   { margin-top: 10px; }

/* Tiny form utilities — saves `style="margin:0"` and `style="display:inline"`. */
.inline-form { display: inline; }
.fm0         { margin: 0; }

/* ============================================================
   POS customer picker — inline predictive search that replaces the old
   modal flow. Two sizes: `lg` (top-of-items on mobile/tablet) and `sm`
   (cart sidebar on desktop). Both share the same dropdown look.
   ============================================================ */
.pos-cust-picker { position: relative; }
.pos-cust-ico { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); display: inline-flex; pointer-events: none; z-index: 1; }
.pos-cust-picker input.pos-cust-search { padding-left: 36px; padding-right: 36px; }
.pos-cust-lg input.pos-cust-search { height: 48px; min-height: 48px; font-size: 14.5px; font-weight: 500; border-radius: 12px; box-shadow: var(--shadow-sm); }
.pos-cust-sm input.pos-cust-search { height: 40px; min-height: 40px; font-size: 13.5px; border-radius: 8px; }
.pos-cust-clear {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 24px; height: 24px; min-height: 0; max-height: 24px;
  border: 0; border-radius: 50%;
  background: var(--bg); color: var(--muted-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0;
}
.pos-cust-clear:hover { background: rgba(217,80,71,0.10); color: var(--red); }
/* No customer chosen yet — nudge the cashier to pick one before selling. */
.pos-cust-unset input.pos-cust-search {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.pos-cust-unset .pos-cust-ico { color: var(--accent); }
.pos-cust-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 14px 36px rgba(15,37,64,0.18);
  max-height: 320px; overflow-y: auto; padding: 4px;
}
.pos-cust-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 12px; border: 0; background: transparent;
  border-radius: 9px; cursor: pointer; text-align: left;
  font-family: 'IBM Plex Sans', system-ui, sans-serif; color: var(--text);
}
.pos-cust-row:hover, .pos-cust-row[aria-selected="true"] { background: var(--bg); }
.pos-cust-row[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--navy); }
.pos-cust-avatar {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  background: var(--navy-l); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11.5px; letter-spacing: -0.02em;
}
.pos-cust-avatar.is-walkin { background: var(--bg-2); color: var(--muted-2); }
.pos-cust-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pos-cust-name { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-cust-sub  { font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-cust-credit { font-size: 11.5px; color: var(--text-2); font-weight: 600; flex-shrink: 0; }
.pos-cust-empty { padding: 18px; text-align: center; color: var(--muted); font-size: 12.5px; }

/* Bill-line item picker — predictive search replacing the old <select>. The
   .pb-item-picker is a relative container; the .pb-item-results popover
   floats below the input and is keyboard-navigable. */
.pb-item-picker { position: relative; }
/* Specificity matches `.bill-lines input.input` (0,2,1) so this wins via
   source order — without the `input.` qualifier the inline-padding rule on
   .bill-lines stomps it. */
.pb-item-picker input.pb-item-search { padding-right: 36px; }
.pb-item-clear {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 22px; height: 22px; min-height: 0; max-height: 22px;
  border: 0; border-radius: 50%;
  background: var(--bg); color: var(--muted-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; cursor: pointer; padding: 0;
}
.pb-item-clear:hover { background: rgba(217,80,71,0.10); color: var(--red); }
.pb-item-clear:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.pb-item-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15,37,64,0.16);
  max-height: 280px; overflow-y: auto; padding: 4px;
}
.pb-item-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 8px 10px; border: 0; background: transparent;
  border-radius: 7px; cursor: pointer; text-align: left;
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; color: var(--text);
}
.pb-item-row:hover, .pb-item-row[aria-selected="true"] { background: var(--bg); }
.pb-item-row[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--navy); }
.pb-item-name { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-item-sku  { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.pb-item-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 12px; }

/* Purchases listing action cell — keep .btn-sm everywhere else compact, but
   the per-row icon buttons (eye / edit / receive / delete) need a larger
   tap target so they're not lost in the row. Scoped to .pb-act so it
   doesn't touch other ghost buttons. */
.pb-act-row { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.pb-act {
  min-height: 38px; min-width: 38px;
  padding: 8px 10px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pb-act:hover { background: var(--bg); }

/* ============================================================
   Purchases mobile restyle — mirrors the .recpt-* (receipts) pattern.
   Hero card → search → filter chips → bill cards → pagination.
   Scoped to <=767px; desktop table stays untouched (.desktop-only).
   ============================================================ */
@media (max-width: 767px) {
  /* Wrapper — same horizontal/vertical padding the receipts page uses, so the
     cards don't hug the viewport edges. Bottom padding clears the mobile
     tabbar. */
  .pb-m { display: block; padding: 16px 16px 96px; box-sizing: border-box; }
  .pb-m-head { margin-bottom: 14px; }
  .pb-m-head .crumb { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; margin-bottom: 2px; }
  .pb-m-title { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; color: #11202F; line-height: 1.1; margin: 0; }

  .pb-m-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
  .pb-m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; padding: 0 12px; border-radius: 12px; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: 14px; white-space: nowrap; border: 0; cursor: pointer; line-height: 1; color: #fff; box-sizing: border-box; text-decoration: none; }
  .pb-m-btn[disabled] { opacity: 0.5; pointer-events: none; }
  .pb-m-btn-orange { background: #E8622A; box-shadow: 0 4px 14px rgba(232,98,42,0.32); }
  .pb-m-btn-navy   { background: #1A3C5E; box-shadow: 0 4px 14px rgba(26,60,94,0.28); }

  /* Hero card — gradient + small accent orb tucked into the corner so it
     doesn't bleed onto the SYNCED column. More internal padding than the
     receipts hero because the purchases dashboard has more meta text. */
  .pb-hero { position: relative; overflow: hidden; border-radius: 16px; padding: 18px 18px 16px; margin-bottom: 16px;
    background: linear-gradient(135deg, #1A3C5E 0%, #0F2540 100%); color: #fff;
    box-shadow: 0 10px 26px rgba(15,37,64,0.20); }
  .pb-hero-accent { position: absolute; top: -60px; right: -50px; width: 130px; height: 130px; border-radius: 50%;
    background: radial-gradient(circle, rgba(232,98,42,0.32) 0%, rgba(232,98,42,0) 65%); pointer-events: none; }
  .pb-hero-grid { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: flex-start; }
  .pb-hero-main { min-width: 0; }
  .pb-hero-label { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 6px; }
  .pb-hero-amount { display: flex; align-items: baseline; gap: 6px; }
  .pb-hero-ugx { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 13px; color: rgba(255,255,255,0.75); font-weight: 500; letter-spacing: 0.04em; }
  .pb-hero-num { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; font-size: 26px; line-height: 1.05; font-weight: 700; letter-spacing: -0.01em; }
  .pb-hero-meta { margin-top: 12px; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px; color: rgba(255,255,255,0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pb-hero-sync { text-align: right; min-width: 76px; padding-left: 8px; }
  .pb-hero-sync-lbl { font-size: 9.5px; letter-spacing: 0.16em; color: rgba(255,255,255,0.6); font-weight: 600; margin-bottom: 4px; }
  .pb-hero-sync-num { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; font-size: 20px; font-weight: 700; color: #fff; line-height: 1; }
  .pb-hero-sync-bar { margin-top: 8px; height: 3px; background: rgba(255,255,255,0.18); border-radius: 999px; overflow: hidden; }
  .pb-hero-sync-fill { height: 100%; background: #E8622A; border-radius: 999px; transition: width 200ms ease-out; }

  /* Search */
  .pb-m-search { position: relative; margin-bottom: 14px; }
  .pb-m-search-ico { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); display: inline-flex; pointer-events: none; }
  .pb-m-search-input { width: 100%; height: 44px; padding: 0 14px 0 36px; border-radius: 12px; border: 1px solid var(--border); background: #fff; font-size: 14px; box-sizing: border-box; outline: 0; }
  .pb-m-search-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,60,94,0.10); }

  /* Filter chips — horizontal scroll, edge-bleed so the row feels swipeable
     without breaking the wrapper padding. */
  .pb-m-filter { display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 8px; margin: 0 -16px 6px; scrollbar-width: none; }
  .pb-m-filter::-webkit-scrollbar { display: none; }
  .pb-m-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--border); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; flex-shrink: 0; }
  .pb-m-chip-n { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 600; opacity: 0.7; }
  .pb-m-chip.is-on { background: #1A3C5E; border-color: #1A3C5E; color: #fff; box-shadow: 0 2px 8px rgba(26,60,94,0.20); }

  /* Toolbar count */
  .pb-m-toolbar { display: flex; justify-content: space-between; align-items: center; margin: 4px 2px 10px; }
  .pb-m-toolbar-count { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
  .pb-m-toolbar-sort { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted-2); }

  /* Bill cards */
  .pb-list { display: flex; flex-direction: column; gap: 12px; }
  .pb-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 14px; box-shadow: 0 1px 2px rgba(15,37,64,0.04); }
  .pb-card.is-overdue { border-color: rgba(217,80,71,0.5); box-shadow: 0 1px 6px rgba(217,80,71,0.10); }

  .pb-card-main { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
  .pb-card-avatar { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: var(--navy-l); color: var(--navy); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; letter-spacing: -0.02em; }
  .pb-card-id { flex: 1; min-width: 0; }
  .pb-card-supplier { font-size: 14.5px; font-weight: 600; color: #11202F; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pb-card-bill { font-size: 10.5px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pb-card-ref { color: var(--muted-2); }
  .pb-card-amt { text-align: right; flex-shrink: 0; }
  .pb-card-amt-num { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; font-size: 15px; font-weight: 700; color: #11202F; }
  .pb-card-amt-lbl { font-size: 9px; letter-spacing: 0.14em; color: var(--muted-2); font-weight: 600; margin-top: 2px; }

  /* Meta row — status / dates / balance / sync */
  .pb-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 10.5px; flex-wrap: wrap; }
  .pb-card-meta .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-right: 4px; vertical-align: 1px; }
  .pb-meta-status { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 9.5px; }
  .pb-status-gray  { background: rgba(124,144,166,0.12); color: #4F627A; }
  .pb-status-amber { background: rgba(215,150,30,0.14); color: #A0620A; }
  .pb-status-navy  { background: rgba(26,60,94,0.10);   color: #1A3C5E; }
  .pb-status-green { background: rgba(35,142,99,0.12);  color: #238E63; }
  .pb-status-red   { background: rgba(217,80,71,0.12);  color: #B0392E; }
  .pb-meta-date, .pb-meta-due, .pb-meta-bal { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 10.5px; }
  .pb-meta-due.is-overdue { color: #B0392E; font-weight: 600; }
  .pb-meta-bal { color: #A0620A; font-weight: 600; }
  .pb-meta-sync { margin-left: auto; display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; font-weight: 600; font-size: 9px; letter-spacing: 0.08em; }
  .pb-sync-green { background: rgba(35,142,99,0.14); color: #238E63; }
  .pb-sync-amber { background: rgba(215,150,30,0.16); color: #A0620A; }
  .pb-sync-red   { background: rgba(217,80,71,0.14); color: #B0392E; }
  .pb-sync-gray  { background: rgba(124,144,166,0.10); color: #6B7C92; }

  /* Action row — bottom of each card */
  .pb-card-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
  .pb-card-form { margin: 0; }
  .pb-btn-sm { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--text-2); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: 12.5px; cursor: pointer; text-decoration: none; line-height: 1; }
  .pb-btn-sm:active { transform: translateY(1px); }
  .pb-btn-view { color: var(--navy); }
  .pb-btn-edit { color: #4F627A; }
  .pb-btn-recv { color: #fff; background: #238E63; border-color: #238E63; }
  .pb-btn-sync { color: #fff; background: #1A3C5E; border-color: #1A3C5E; }
  .pb-btn-del  { color: #B0392E; padding: 0 10px; margin-left: auto; }
  .pb-btn-del:hover { background: rgba(217,80,71,0.06); }

  /* Empty state */
  .pb-empty { background: #fff; border: 1px dashed var(--border); border-radius: 16px; padding: 40px 20px; text-align: center; color: var(--muted); }
  .pb-empty-t { margin-top: 10px; font-weight: 600; font-size: 14px; color: var(--text); }
  .pb-empty-s { margin-top: 6px; font-size: 12px; line-height: 1.5; }

  /* Transfer-card flourishes — share the .pb-card chassis but use a small
     swap glyph and an arrow between branch codes. */
  .tx-card-avatar { background: rgba(232,98,42,0.10); }
  .tx-card-avatar svg { color: var(--navy); }
  .tx-arrow { color: var(--muted-2); margin: 0 4px; font-weight: 400; }

  /* Pagination */
  .pb-m-pager { margin-top: 18px; display: flex; justify-content: center; }
  .pb-m-pager nav { display: flex; justify-content: center; }
  .pb-m-pager .pagination { gap: 4px; }
  .pb-m-pager .pagination > * { font-size: 12px; }
}

/* ============================================================
   Purchases TABLET (768–1023px) — tighten the desktop table so
   the action column doesn't push content off-screen, and stack
   the page-head's actions row on its own line if narrow.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .pb-m { display: none; }
  /* Page head: actions wrap below title instead of crowding */
  .page-head { flex-wrap: wrap; gap: 10px; }
  .page-head .actions { flex-wrap: wrap; width: 100%; justify-content: flex-end; }
  .page-head .actions .btn { flex-shrink: 0; }
  /* KPI grid: 2-up on tablet (was 4-up at desktop) */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  /* Purchases table: scroll horizontally inside the card */
  .card > table.t { display: block; overflow-x: auto; }
  .card > table.t > thead, .card > table.t > tbody { min-width: 920px; }
  /* Filter chip row: scroll horizontally instead of wrapping wide */
  .cust-d-chip-row { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
  .cust-d-chip-row::-webkit-scrollbar { display: none; }
  .cust-d-chip { flex-shrink: 0; }
}

/* ============================================================================
   Administration console (Phase 0). Reuses the shared .sidebar/.nav/.card
   families; these are the only admin-specific additions. Scoped so nothing
   here touches the POS shell.
   ========================================================================== */
/* "Coming soon" nav entries — non-interactive, muted. */
.nav-item.soon { color: var(--muted-2); cursor: default; }
.nav-item.soon:hover { background: none; }
.nav-item.soon .ico { opacity: 0.5; }
.nav-soon {
  margin-left: auto; font-size: 9px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); background: var(--bg-2);
  border: 1px solid var(--border); padding: 1px 6px; border-radius: 9px;
}

/* Landing module grid */
.adm-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.adm-card .card-b { padding: 6px; display: flex; flex-direction: column; gap: 1px; }
.adm-mod {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 6px;
  color: var(--text-2); font-size: 13.5px; font-weight: 500; min-height: 40px; width: 100%;
}
.adm-mod:hover { background: var(--bg); color: var(--navy); }
.adm-mod .ico { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; display: inline-flex; align-items: center; justify-content: center; }
.adm-mod-l { flex: 1; min-width: 0; }
.adm-mod-go { color: var(--muted-2); display: inline-flex; }
.adm-mod.soon { color: var(--muted-2); cursor: default; }
.adm-mod.soon:hover { background: none; }
.adm-mod.soon .ico { opacity: 0.5; }

/* Dashboard section heading */
.adm-sec-h { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; margin: 18px 2px 8px; }
.adm-sec-h:first-child { margin-top: 0; }

/* Mobile admin drawer (admin shell only — desktop is unchanged). The desktop
   sidebar stays display:none on mobile in the POS app; here it becomes an
   off-canvas drawer toggled by the floating button. */
.adm-fab, .adm-backdrop { display: none; }
@media (max-width: 767px) {
  .adm-fab {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; right: 16px; bottom: calc(var(--tabbar-h) + 16px);
    width: 48px; height: 48px; border-radius: 50%; z-index: 70;
    background: var(--navy); box-shadow: var(--shadow-lg); cursor: pointer;
  }
  .adm-app .sidebar {
    display: flex; position: fixed; top: 0; bottom: 0; left: 0;
    width: var(--sidebar-w); max-width: 84vw; z-index: 80;
    transform: translateX(-100%); transition: transform 0.22s ease;
    box-shadow: var(--shadow-lg); overflow-y: auto;
  }
  .adm-backdrop {
    display: block; position: fixed; inset: 0; z-index: 75;
    background: rgba(13, 17, 23, 0.45); opacity: 0; pointer-events: none;
    transition: opacity 0.22s ease;
  }
  #adm-drawer:checked ~ .adm-app .sidebar { transform: translateX(0); }
  #adm-drawer:checked ~ .adm-app .adm-backdrop { opacity: 1; pointer-events: auto; }
  #adm-drawer:checked ~ .adm-fab { display: none; }
}


/* ============================================================================
   Addon manager (Integrations & Addons)  — scoped under .addonmgr
   Markup+CSS restyle. No gradients; hierarchy via weight, color, spacing.
   ========================================================================== */
.addonmgr .am-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.addonmgr .am-head-actions { display:flex; gap:10px; }
.addonmgr .am-btn { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 16px; border-radius:10px; font-family:var(--sans); font-size:13.5px; font-weight:600; cursor:pointer; border:1px solid var(--border); background:var(--white); color:var(--text-2); text-decoration:none; transition:background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.addonmgr .am-btn:hover { box-shadow:var(--shadow-sm); }
.addonmgr .am-btn-navy { background:var(--navy); border-color:var(--navy); color:#fff; }
.addonmgr .am-btn-navy:hover { background:var(--navy-2); }

/* Summary strip ------------------------------------------------------------ */
.addonmgr .am-summary { display:grid; grid-template-columns:minmax(300px,1.5fr) repeat(3,1fr); gap:14px; margin:14px 0 8px; }
.addonmgr .am-note { display:flex; gap:12px; align-items:flex-start; background:var(--white); border:1px solid var(--border); border-radius:14px; padding:16px 18px; }
.addonmgr .am-note-ico { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:none; border-radius:9px; background:var(--navy-l); color:var(--navy); }
.addonmgr .am-note-t { font-weight:600; font-size:14px; color:var(--text); }
.addonmgr .am-note-d { font-size:12.5px; line-height:1.45; color:var(--muted); margin-top:3px; }
.addonmgr .am-stat { background:var(--white); border:1px solid var(--border); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:4px; }
.addonmgr .am-stat-h { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.addonmgr .am-stat-n { font-size:32px; font-weight:700; line-height:1; color:var(--text); letter-spacing:-.01em; }
.addonmgr .am-stat-of { font-size:16px; font-weight:500; color:var(--muted-2); }
.addonmgr .am-stat-s { font-size:11.5px; color:var(--muted); }

.addonmgr .am-dot { width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
.addonmgr .am-stat-h .am-dot.ok { background:var(--green); } .addonmgr .am-stat-h .am-dot.warn { background:var(--amber); } .addonmgr .am-stat-h .am-dot.fail { background:var(--red); }

/* Section divider ---------------------------------------------------------- */
.addonmgr .am-sec { display:flex; align-items:center; gap:10px; margin:18px 2px 12px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.addonmgr .am-sec-n { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:7px; background:var(--bg-2); color:var(--muted-2); font-size:11.5px; }
.addonmgr .am-sec-rule { flex:1; height:1px; background:var(--border); }

/* Grid + cards ------------------------------------------------------------- */
.addonmgr .am-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; }
.addonmgr .am-card { position:relative; overflow:hidden; background:var(--white); border:1px solid var(--border); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:14px; transition:transform .17s ease, box-shadow .17s ease, opacity .17s ease, filter .17s ease; }
.addonmgr .am-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.addonmgr .am-card.is-off { opacity:.82; }
.addonmgr .am-card.is-off .am-logo { filter:grayscale(1); }
.addonmgr .am-rail { position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); opacity:0; transition:opacity .17s ease; }
.addonmgr .am-card:hover .am-rail { opacity:1; }

.addonmgr .am-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.addonmgr .am-idblock { display:flex; align-items:center; gap:12px; min-width:0; }
.addonmgr .am-logo { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; flex:none; border-radius:14px; background:var(--accent); color:#fff; font-weight:700; font-size:15px; letter-spacing:.01em; transition:transform .17s ease, filter .17s ease; }
.addonmgr .am-card:hover .am-logo { transform:scale(1.06) rotate(-3deg); }
.addonmgr .am-name { font-weight:600; font-size:15.5px; color:var(--text); line-height:1.2; }
.addonmgr .am-tagrow { display:flex; align-items:center; gap:8px; margin-top:4px; }
.addonmgr .am-kind { display:inline-flex; align-items:center; padding:2px 8px; border-radius:7px; background:var(--accent-l); color:var(--accent); font-size:11px; font-weight:600; letter-spacing:.01em; }
.addonmgr .am-ver { font-size:11.5px; color:var(--muted-2); }

/* Master toggle ------------------------------------------------------------ */
.addonmgr .am-tform { margin:0; }
.addonmgr .am-switch { display:inline-block; cursor:pointer; }
.addonmgr .am-switch input { position:absolute; opacity:0; width:0; height:0; }
.addonmgr .am-track { display:block; position:relative; width:44px; height:24px; border-radius:999px; background:var(--navy-m); transition:background .18s ease; }
.addonmgr .am-knob { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(13,17,23,.28); transition:left .18s cubic-bezier(.4,0,.2,1); }
.addonmgr .am-switch input:checked + .am-track { background:var(--green); }
.addonmgr .am-switch input:checked + .am-track .am-knob { left:23px; }
.addonmgr .am-switch input:disabled + .am-track { opacity:.45; cursor:not-allowed; }

/* Status pills ------------------------------------------------------------- */
.addonmgr .am-pills { display:flex; flex-wrap:wrap; gap:7px; }
.addonmgr .am-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:600; line-height:1; }
.addonmgr .am-pill.ok { color:var(--green); background:var(--green-l); }
.addonmgr .am-pill.warn { color:var(--amber); background:var(--amber-l); }
.addonmgr .am-pill.fail { color:var(--red); background:var(--red-l); }
.addonmgr .am-pill.info { color:var(--teal); background:var(--teal-l); }
.addonmgr .am-pill.mute { color:var(--muted-2); background:var(--bg-2); }
.addonmgr .am-pill.pushing .am-dot { animation:am-pulse 1.8s ease-in-out infinite; }
@keyframes am-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(29,122,80,.45); } 50% { box-shadow:0 0 0 5px rgba(29,122,80,0); } }

/* Health tiles ------------------------------------------------------------- */
.addonmgr .am-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.addonmgr .am-tile { background:var(--bg-2); border-radius:11px; padding:10px 12px; }
.addonmgr .am-tile-h { font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); }
.addonmgr .am-tile-n { font-size:24px; font-weight:700; line-height:1.1; margin-top:3px; color:var(--text); }
.addonmgr .am-tile-n.warn { color:var(--amber); } .addonmgr .am-tile-n.fail { color:var(--red); } .addonmgr .am-tile-n.ok { color:var(--green); }

/* Last-sync line ----------------------------------------------------------- */
.addonmgr .am-last { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); }
.addonmgr .am-last svg { color:var(--muted-2); flex:none; }
.addonmgr .am-removed-note { font-size:12.5px; color:var(--muted); }

/* Actions ------------------------------------------------------------------ */
.addonmgr .am-actions { display:flex; align-items:center; gap:6px; padding-top:13px; border-top:1px solid var(--border); }
.addonmgr .am-act { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 11px; border-radius:9px; font-size:12.5px; font-weight:500; color:var(--text-2); background:transparent; border:0; cursor:pointer; text-decoration:none; transition:background .15s ease, color .15s ease; }
.addonmgr .am-act:hover { background:var(--bg-2); }
.addonmgr .am-act.danger { color:var(--red); }
.addonmgr .am-act.danger:hover { background:var(--red-l); }
.addonmgr .am-act-del { margin:0 0 0 auto; }
.addonmgr .am-enable { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 16px; border-radius:9px; font-family:var(--sans); font-size:13px; font-weight:600; color:#fff; background:var(--accent); border:0; cursor:pointer; transition:filter .15s ease, transform .15s ease; }
.addonmgr .am-enable:hover { filter:brightness(.94); }
.addonmgr .am-enable:disabled { opacity:.5; cursor:not-allowed; }

/* Signature footer --------------------------------------------------------- */
.addonmgr .am-sig { display:flex; align-items:center; gap:7px; font-size:11px; color:var(--muted-2); padding-top:11px; margin-top:auto; border-top:1px solid var(--border); }
.addonmgr .am-sig svg { color:var(--green); flex:none; }

/* Marketplace / install tile ---------------------------------------------- */
.addonmgr .am-install { align-items:center; justify-content:center; text-align:center; gap:8px; border:1.5px dashed var(--border-2); background:transparent; min-height:240px; text-decoration:none; transition:border-color .17s ease, background .17s ease, transform .17s ease; }
.addonmgr .am-install:hover { border-color:var(--navy-m); background:var(--white); transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.addonmgr .am-install-plus { display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:14px; background:var(--bg-2); color:var(--navy); transition:transform .2s ease, background .2s ease, color .2s ease; }
.addonmgr .am-install:hover .am-install-plus { transform:rotate(90deg); background:var(--navy); color:#fff; }
.addonmgr .am-install-t { font-weight:600; font-size:15px; color:var(--text); }
.addonmgr .am-install-d { font-size:12.5px; color:var(--muted); max-width:240px; line-height:1.4; }

@media (max-width:980px) {
  .addonmgr .am-summary { grid-template-columns:1fr 1fr; }
  .addonmgr .am-note { grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce) {
  .addonmgr *, .addonmgr *::before, .addonmgr *::after { transition:none !important; animation:none !important; }
}

/* ============================================================
   Customer 360 restyle — list desktop stats + table, the .cx
   detail/overview page, and the .cx-form edit page. Type-tinted
   accents on the navy/orange base; IBM Plex Mono (tnum) for every
   figure. Motion guarded at the very bottom.
   ============================================================ */

/* ---- shared type-accent tokens (avatar tiles, status pills, tags) ---- */
.cust-av, .cust-tag, .cx-status, .cust-d-stat { --acc: var(--navy); --acc-bg: var(--navy-l); }
[data-av="wholesale"]  { --acc: var(--orange-d); --acc-bg: var(--orange-l); }
[data-av="retail"]     { --acc: var(--navy);     --acc-bg: var(--navy-l); }
[data-av="agent"]      { --acc: var(--purple);   --acc-bg: var(--purple-l); }
[data-av="distributor"]{ --acc: var(--teal);     --acc-bg: var(--teal-l); }
[data-av="walkin"]     { --acc: var(--muted);    --acc-bg: #EEF1F6; }

/* ---- list: search starts filled, brightens to white on focus ---- */
.cust-d-search-input { background: var(--bg); }
.cust-d-search-input:focus { background: var(--white); }

/* ---- list: secondary filter bar (status / credit / activity / branch) ---- */
.cust-d-filter2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 16px 14px; }
.cust-d-select2 {
  appearance: none; -webkit-appearance: none;
  height: 34px; padding: 0 32px 0 12px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--text-2);
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C6474' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
  transition: border-color 120ms, background-color 120ms, box-shadow 120ms;
}
.cust-d-select2:hover { border-color: var(--border-2); }
.cust-d-select2:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,60,94,0.10); }
/* a non-default selection reads as "active" — navy tint */
.cust-d-select2:valid:not([data-empty]) {}
.cust-d-filter2 .cust-d-clear { height: 34px; }

/* ---- list: summary cards with a meaning-tinted left rail ---- */
.cust-d-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.cust-d-stat {
  position: relative; overflow: hidden;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px 16px 14px 18px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.cust-d-stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--acc); opacity: 0; transition: opacity 160ms ease;
}
.cust-d-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.cust-d-stat:hover::before { opacity: 1; }
.cust-d-stat--navy  { --acc: var(--navy); }
.cust-d-stat--amber { --acc: var(--amber); }
.cust-d-stat--red   { --acc: var(--red); }
.cust-d-stat .lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.cust-d-stat .val { font-size: 22px; font-weight: 700; color: var(--text); margin-top: 3px; }
.cust-d-stat .sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ---- list: table cells ---- */
.cust-av {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--acc-bg); color: var(--acc);
  font-family: var(--mono); font-weight: 600; font-size: 11px;
  transition: transform 150ms ease;
}
table.t tr:hover .cust-av { transform: scale(1.09); }
.cust-name-cell { display: flex; align-items: center; gap: 10px; }
.cust-name-cell .nm { font-size: 13px; font-weight: 600; color: var(--text); }
.cust-name-cell .id { font-size: 10.5px; color: var(--muted-2); font-family: var(--mono); }
.cust-tag {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 8px; border-radius: 7px;
  background: var(--acc-bg); color: var(--acc);
}
.cust-terms {
  display: inline-flex; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; padding: 2px 7px; border-radius: 6px;
  background: var(--bg-2); color: var(--muted);
}
.cust-util { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.cust-util-track { width: 62px; height: 5px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.cust-util-fill { height: 100%; border-radius: 3px; transition: width 500ms ease; }
.cust-util-fill[data-band="low"]  { background: var(--green); }
.cust-util-fill[data-band="mid"]  { background: var(--amber); }
.cust-util-fill[data-band="high"] { background: var(--red); }
.cust-util .amt { font-family: var(--mono); font-feature-settings:'tnum' 1; font-size: 12px; font-weight: 600; min-width: 74px; text-align: right; }
/* square icon action buttons */
.cust-acts { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.cust-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--white); border: 1px solid var(--border); color: var(--muted);
  cursor: pointer; transition: transform 130ms ease, background-color 130ms, color 130ms, border-color 130ms, box-shadow 130ms;
}
.cust-act:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); background: var(--navy-l); color: var(--navy); border-color: var(--navy-m); }
.cust-act--danger:hover { background: var(--red-l); color: var(--red); border-color: var(--red-m); }

/* ============================================================
   .cx — Customer detail / overview
   ============================================================ */
.cx { max-width: 1120px; margin: 0 auto; padding: 14px 14px 44px; }
.cx-crumb { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); text-decoration: none; margin-bottom: 10px; }
.cx-crumb:hover { color: var(--navy); }

.cx-head { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 12px; }
.cx-head-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; }
.cx-name { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.cx-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cx-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 4px 9px; border-radius: 999px; background: var(--acc-bg); color: var(--acc);
}
.cx-status .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cx-status--muted { background: var(--bg-2); color: var(--muted); }
.cx-code { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 4px; }
.cx-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 13px 24px; margin-top: 16px; }
.cx-grid .k { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.cx-grid .v { font-size: 13.5px; color: var(--text); margin-top: 2px; overflow-wrap: anywhere; }
.cx-grid .v.mono { font-family: var(--mono); }

/* stat row (reuses the rail/hover idea) */
.cx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.cx-stat {
  position: relative; overflow: hidden;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 13px 15px 13px 17px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.cx-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rail, var(--navy)); opacity: 0; transition: opacity 160ms ease; }
.cx-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.cx-stat:hover::before { opacity: 1; }
.cx-stat--red { --rail: var(--red); }
.cx-stat .lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.cx-stat .val { font-size: 19px; font-weight: 700; margin-top: 3px; font-family: var(--mono); font-feature-settings:'tnum' 1; }
.cx-stat .val.red { color: var(--red); }
.cx-stat .sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* tab bar — active underlined orange */
.cx-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; }
.cx-tab { padding: 9px 14px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; color: var(--muted); border-bottom: 2px solid transparent; transition: color 140ms; }
.cx-tab:hover { color: var(--text); }
.cx-tab.is-on { color: var(--navy); border-bottom-color: var(--orange); }

/* progress bar — fills on load */
.cx-prog { height: 6px; border-radius: 4px; background: var(--bg-2); overflow: hidden; margin-top: 8px; }
.cx-prog-fill { height: 100%; border-radius: 4px; background: var(--green); width: var(--pct, 0%); animation: cxFill 700ms ease forwards; }
.cx-prog-fill[data-band="mid"]  { background: var(--amber); }
.cx-prog-fill[data-band="high"] { background: var(--red); }
@keyframes cxFill { from { width: 0; } to { width: var(--pct, 0%); } }

/* two-column overview body */
.cx-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; align-items: start; }
.cx-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); }
.cx-panel-h { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.cx-panel-h a { font-size: 12px; font-weight: 500; color: var(--navy); text-decoration: none; }
.cx-panel-b { padding: 14px 16px; }

/* activity feed */
.cx-feed-row { display: flex; gap: 11px; padding: 9px 8px; border-radius: 9px; transition: background-color 140ms; }
.cx-feed-row:hover { background: var(--bg); }
.cx-feed-ico { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--acc-bg, var(--bg-2)); }
.cx-feed-row[data-kind="invoice"]        { --acc-bg: var(--green-l); }
.cx-feed-row[data-kind="invoice_credit"] { --acc-bg: var(--amber-l); }
.cx-feed-row[data-kind="payment"]        { --acc-bg: var(--teal-l); }
.cx-feed-row[data-kind="created"]        { --acc-bg: var(--navy-l); }
.cx-feed-tt { font-size: 13px; font-weight: 600; }
.cx-feed-sub { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.cx-feed-at { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }

/* financial summary rows */
.cx-fin-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 2px 0; }
.cx-fin-row .k { color: var(--muted); }
.cx-fin-row .v { font-family: var(--mono); font-feature-settings:'tnum' 1; font-weight: 600; }

/* compact pill (good standing / risk) */
.cx-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.cx-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cx-pill--green { background: var(--green-l); color: var(--green); }
.cx-pill--amber { background: var(--amber-l); color: var(--amber); }
.cx-pill--red   { background: var(--red-l); color: var(--red); }

@media (max-width: 860px) { .cx-cols, .cx-stats, .cust-d-stats { grid-template-columns: 1fr; } .cx-stats { grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   .cx-form — edit customer
   ============================================================ */
.cx-form-wrap { max-width: 600px; margin: 0 auto; padding: 16px 14px 44px; }
.cx-form { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 20px 22px; }
.cx-form h1 { font-size: 19px; font-weight: 700; margin: 6px 0 16px; }
.cx-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cx-field { margin-bottom: 14px; }
.cx-flabel { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 6px; }
.cx-flabel .req { color: var(--red); }
.cx-input, .cx-select {
  width: 100%; box-sizing: border-box; height: 44px; padding: 0 13px;
  font-family: var(--sans); font-size: 14px; color: var(--text);
  background: var(--white); border: 1px solid var(--border-2); border-radius: 9px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.cx-input.mono { font-family: var(--mono); }
.cx-input:hover, .cx-select:hover { border-color: var(--navy-m); }
.cx-input:focus, .cx-select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,60,94,0.18); }
.cx-select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C6474' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.cx-hint { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.cx-hint .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--navy); transition: background-color 140ms; }
/* custom checkbox with animated navy check */
.cx-check { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-2); cursor: pointer; user-select: none; }
.cx-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.cx-check .box { width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid var(--border-2); border-radius: 5px; background: var(--white); position: relative; transition: background-color 140ms, border-color 140ms; }
.cx-check .box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transform-origin: center; transition: transform 140ms ease; }
.cx-check input:checked + .box { background: var(--navy); border-color: var(--navy); }
.cx-check input:checked + .box::after { transform: rotate(45deg) scale(1); }
.cx-check input:focus-visible + .box { box-shadow: 0 0 0 3px rgba(26,60,94,0.18); }

@media (max-width: 560px) { .cx-row2 { grid-template-columns: 1fr; } }

/* ---- motion guard ---- */
@media (prefers-reduced-motion: reduce) {
  .cust-d-stat, .cust-av, .cust-act, .cust-util-fill,
  .cx-stat, .cx-tab, .cx-feed-row, .cx-prog-fill, .cx-input, .cx-select, .cx-check .box, .cx-check .box::after, .cx-crumb {
    transition: none !important; animation: none !important;
  }
  .cx-prog-fill { width: var(--pct, 0%); }
}

/* ============================================================
   Admin Dashboard restyle (.dash-*)  — markup+CSS only
   Sections, meaning-tinted KPI cards, animated bar charts,
   attention queue, transactions table, activity feed.
   ============================================================ */

/* — section label with hairline rule — */
.dash-sec { display:flex; align-items:center; gap:12px; margin:24px 1px 11px; }
.dash-sec:first-of-type { margin-top:6px; }
.dash-sec-t { font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); white-space:nowrap; }
.dash-sec::after { content:""; flex:1; height:1px; background:var(--border); }

/* — KPI grid — */
.dash-kpis { display:grid; gap:13px; grid-template-columns:repeat(4,1fr); }
.dash-kpis.is-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:1040px){ .dash-kpis, .dash-kpis.is-3 { grid-template-columns:repeat(2,1fr);} }
@media (max-width:540px){ .dash-kpis, .dash-kpis.is-3 { grid-template-columns:1fr;} }

/* — KPI card — */
.dash-kpi { position:relative; overflow:hidden; background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px 15px 13px; transition:transform 160ms ease, box-shadow 160ms ease; }
.dash-kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--rail,var(--navy)); opacity:0; transition:opacity 160ms ease; }
.dash-kpi:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.dash-kpi:hover::before { opacity:1; }
.dash-kpi-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.dash-tile { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--tile-bg,var(--navy-l)); color:var(--tile-fg,var(--navy)); }
.dash-kpi-lbl { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin-top:11px; }
.dash-kpi-val { font-family:var(--mono); font-feature-settings:'tnum' 1; font-size:23px; font-weight:700; color:var(--text); line-height:1.12; margin-top:3px; }
.dash-kpi-val .u { font-family:var(--mono); font-size:11px; font-weight:600; color:var(--muted); margin-right:3px; }
.dash-kpi-val.is-amber { color:var(--amber); } .dash-kpi-val.is-red { color:var(--red); } .dash-kpi-val.is-green { color:var(--green); }
.dash-kpi-sub { font-size:11px; color:var(--muted); margin-top:4px; }
.dash-kpi-sub .sep { color:var(--muted-2); padding:0 1px; }
.dash-trend { display:inline-flex; align-items:center; gap:3px; font-family:var(--mono); font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:999px; }
.dash-trend.up { background:var(--green-l); color:var(--green); }
.dash-trend.flat { background:var(--bg-2); color:var(--muted); }

/* rail + tile palettes by meaning */
.dash-kpi.k-navy   { --rail:var(--navy);   --tile-bg:var(--navy-l);   --tile-fg:var(--navy); }
.dash-kpi.k-green  { --rail:var(--green);  --tile-bg:var(--green-l);  --tile-fg:var(--green); }
.dash-kpi.k-amber  { --rail:var(--amber);  --tile-bg:var(--amber-l);  --tile-fg:var(--amber); }
.dash-kpi.k-red    { --rail:var(--red);    --tile-bg:var(--red-l);    --tile-fg:var(--red); }
.dash-kpi.k-purple { --rail:var(--purple); --tile-bg:var(--purple-l); --tile-fg:var(--purple); }
.dash-kpi.k-teal   { --rail:var(--teal);   --tile-bg:var(--teal-l);   --tile-fg:var(--teal); }

/* — chart panels — */
.dash-panel { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); }
.dash-panel-h { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px 11px; border-bottom:1px solid var(--border); }
.dash-panel-h h3 { font-size:13px; font-weight:600; color:var(--text); margin:0; }
.dash-panel-h .sub { font-size:10.5px; color:var(--muted-2); font-family:var(--mono); }
.dash-chart { display:flex; align-items:flex-end; gap:5px; padding:16px 18px 14px; }
.dash-bar { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; }
.dash-bar-cap { font-family:var(--mono); font-size:9.5px; color:var(--muted); height:12px; line-height:12px; opacity:0; transition:opacity 140ms ease; }
.dash-bar:hover .dash-bar-cap { opacity:1; }
.dash-bar-fill { width:100%; border-radius:4px 4px 0 0; background:var(--navy); transform-origin:bottom; transition:background-color 150ms ease; animation:dashBarUp 480ms cubic-bezier(.2,.7,.3,1) backwards; }
.dash-bar:hover .dash-bar-fill { background:var(--orange); }
.dash-bar-fill.is-peak { background:var(--orange); }
.dash-bar-fill.is-empty { background:var(--border-2); border-radius:3px; animation:none; }
.dash-bar-x { font-family:var(--mono); font-size:9px; color:var(--muted-2); }
.dash-bar.is-peak .dash-bar-x { color:var(--orange-d); font-weight:600; }
@keyframes dashBarUp { from { transform:scaleY(0.012); } to { transform:scaleY(1); } }

/* — attention queue — */
.dash-att { display:flex; align-items:center; gap:11px; position:relative; overflow:hidden; padding:11px 12px 11px 15px; border:1px solid var(--border); border-radius:10px; text-decoration:none; background:var(--white); transition:transform 160ms ease, box-shadow 160ms ease; }
.dash-att + .dash-att { margin-top:8px; }
.dash-att::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--rail,var(--navy)); }
.dash-att:hover { transform:translateX(3px); box-shadow:var(--shadow); }
.dash-att.a-red    { --rail:var(--red); }
.dash-att.a-amber  { --rail:var(--amber); }
.dash-att-tt { font-size:12.5px; font-weight:600; color:var(--text); }
.dash-att-sub { font-size:11px; color:var(--muted); margin-top:1px; }
.dash-att-arrow { margin-left:auto; color:var(--muted-2); display:flex; transition:transform 160ms ease; }
.dash-att:hover .dash-att-arrow { transform:translateX(3px); }

/* — recent transactions: payment chips + zoho status — */
.dash-pm { display:inline-flex; align-items:center; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:0.04em; padding:2px 8px; border-radius:999px; background:var(--bg-2); color:var(--muted); }
.dash-pm.pm-amber  { background:var(--amber-l);  color:var(--amber); }
.dash-pm.pm-green  { background:var(--green-l);  color:var(--green); }
.dash-pm.pm-navy   { background:var(--navy-l);   color:var(--navy); }
.dash-pm.pm-purple { background:var(--purple-l); color:var(--purple); }
.dash-pm.pm-red    { background:var(--red-l);    color:var(--red); }
.dash-zoho { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); }
.dash-zoho .zdot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dash-zoho.z-ok      { color:var(--green); } .dash-zoho.z-ok .zdot      { background:var(--green); box-shadow:0 0 0 3px var(--green-l); }
.dash-zoho.z-pending { color:var(--amber); } .dash-zoho.z-pending .zdot { background:var(--amber); }
.dash-zoho.z-fail    { color:var(--red); }   .dash-zoho.z-fail .zdot    { background:var(--red); }

/* — recent activity feed — */
.dash-feed-row { display:flex; align-items:flex-start; gap:11px; padding:9px 16px; border-bottom:1px solid var(--border); transition:background-color 140ms ease; }
.dash-feed-row:hover { background:var(--bg); }
.dash-feed-av { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--navy-l); color:var(--navy); margin-top:1px; }
.dash-feed-av.av-red { background:var(--red-l); color:var(--red); }
.dash-feed-tt { font-size:13px; font-weight:500; color:var(--text); }
.dash-feed-row.is-fail .dash-feed-tt { color:var(--red); }
.dash-feed-sub { font-size:11px; color:var(--muted); margin-top:1px; }
.dash-feed-time { font-family:var(--mono); font-size:10px; color:var(--muted-2); white-space:nowrap; margin-top:2px; }
.dash-auditlink { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; color:var(--navy); text-decoration:none; padding:11px 16px; }
.dash-auditlink .arr { display:flex; transition:transform 160ms ease; }
.dash-auditlink:hover .arr { transform:translateX(3px); }

/* — pulsing dot on the failed-sync header chip — */
.dash-pulse { position:relative; }
.dash-pulse::after { content:""; position:absolute; inset:0; border-radius:50%; background:var(--red); animation:dashPulse 1.6s ease-out infinite; }
@keyframes dashPulse { 0% { transform:scale(1); opacity:0.55; } 70%,100% { transform:scale(2.6); opacity:0; } }

@media (prefers-reduced-motion: reduce) {
  .dash-kpi, .dash-att, .dash-att-arrow, .dash-auditlink .arr, .dash-bar-fill, .dash-bar-cap, .dash-feed-row { transition:none; }
  .dash-bar-fill { animation:none; }
  .dash-bar-cap { opacity:1; }
  .dash-pulse::after { animation:none; opacity:0; }
}

/* ============================================================
   In-app notification center — bell + dropdown + list rows
   ============================================================ */
.notif-bell { position:relative; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:9px; color:var(--muted); cursor:pointer; list-style:none; transition:background-color 140ms ease, color 140ms ease; }
.notif-bell::-webkit-details-marker { display:none; }
.notif-bell:hover { background:var(--bg-2); color:var(--text-2); }
/* Settings gear reads white by default; hover reverts to the normal icon colour. */
.notif-bell.settings-gear { color:#fff; }
.notif-bell.settings-gear:hover { color:var(--text-2); }
.notif-badge { position:absolute; top:4px; right:4px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--red); color:#fff; font-size:9.5px; font-weight:700; line-height:16px; text-align:center; box-shadow:0 0 0 2px var(--white); }

.notif-row { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; text-decoration:none; color:inherit; transition:background-color 140ms ease; }
.notif-row:hover { background:var(--bg); }
.notif-row.is-unread { background:var(--navy-l); }
.notif-row.is-unread:hover { background:var(--navy-l); }
.notif-row-ico { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--bg-2); color:var(--muted); margin-top:1px; }
.notif-row.is-unread .notif-row-ico { background:var(--red-l); color:var(--red); }
.notif-row-tt { display:block; font-size:13px; font-weight:500; color:var(--text); }
.notif-row.is-unread .notif-row-tt { font-weight:600; }
.notif-row-sub { display:block; font-size:11px; color:var(--muted); margin-top:1px; }
.notif-row-at { font-size:10px; color:var(--muted-2); white-space:nowrap; margin-top:2px; }

/* =====================================================================
   RECEIPT RENDERER  (resources/views/receipts/_thermal.blade.php)
   Shared by the live builder preview, the print test, and the real
   printed receipt — so what you design is exactly what prints.
   Per-template knobs arrive as CSS custom properties set inline on
   .r-paper: --r-font (base px), --r-line (line-height), --r-gap (px
   between sections). All child sizes are em-relative to --r-font, so the
   single "Font size" control scales the whole receipt proportionally.
   ===================================================================== */
.r-paper {
  background:#fff; color:#000;
  width:394px; max-width:394px; margin:0 auto;
  border:1px solid #E4E7EE; border-radius:14px;
  box-shadow:0 2px 8px rgba(15,37,64,0.06);
  font-family:'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size:var(--r-font, 12px);
  line-height:var(--r-line, 1.4);
  letter-spacing:0.005em;
  position:relative; overflow:hidden;
}
.r-paper[data-paper="58"] { width:286px; max-width:286px; }
.r-paper[data-paper="80"] { width:394px; max-width:394px; }
.r-paper > * { position:relative; z-index:2; }

.r-sec { margin-bottom:var(--r-gap, 8px); }
.r-sec:last-child { margin-bottom:0; }

.r-paper .r-display { font-family:'IBM Plex Sans', system-ui, sans-serif; font-weight:800; letter-spacing:0.04em; }

.r-rule      { border:0; border-top:1px solid #000; margin:6px 0; }
.r-rule-dash { border:0; border-top:1px dashed #000; margin:5px 0; }

/* Title tape (variant tag / custom title) */
.r-tag { background:#000; color:#fff; padding:4px 8px; font-family:'IBM Plex Sans', system-ui, sans-serif; font-weight:800; font-size:0.9em; letter-spacing:0.14em; text-align:center; }
.r-tag--light { background:transparent; color:#000; font-weight:700; border-top:1.5px solid #000; border-bottom:1.5px solid #000; padding:3px 0; }

/* "ITEMS" / "TAX" / "EFRIS" rule label */
.r-section-label { border-top:1.5px solid #000; border-bottom:1.5px solid #000; padding:3px 0; text-align:center; font-family:'IBM Plex Sans', system-ui, sans-serif; font-weight:800; font-size:0.84em; letter-spacing:0.18em; margin:0 0 5px; }

/* Header / brand */
.r-logo-wrap { margin-bottom:5px; }
.r-logo-img  { display:inline-block; height:auto; max-height:120px; }
.r-brand { width:38px; height:38px; margin:0 auto; background:#000; color:#fff; border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Sans', system-ui, sans-serif; font-weight:800; font-size:18px; }
.r-biz-name { font-family:'IBM Plex Sans', system-ui, sans-serif; font-weight:800; font-size:1.18em; letter-spacing:0.02em; }
.r-biz-addr { font-size:0.92em; margin-top:2px; }
.r-biz-id   { font-size:0.86em; margin-top:1px; }

/* Meta rows (info / customer / efris / tax) */
.r-meta { font-feature-settings:'tnum' 1; }
.r-meta-row { display:grid; grid-template-columns:1fr auto; gap:2px 8px; font-size:0.95em; padding:1px 0; }
.r-meta-row .lbl { color:#444; }
.r-meta-row .val { font-weight:700; text-align:right; }

/* Items */
.r-item { padding:4px 0; border-bottom:1px dashed #B0B0B0; }
.r-item:last-child { border-bottom:0; }
.r-item-name { font-family:'IBM Plex Sans', system-ui, sans-serif; font-weight:700; font-size:0.95em; text-transform:uppercase; letter-spacing:0.02em; line-height:1.25; word-break:break-word; }
.r-item-line { display:grid; grid-template-columns:1fr auto; gap:4px 8px; font-feature-settings:'tnum' 1; font-size:0.9em; margin-top:1px; }
.r-item-sub  { color:#555; }
.r-item-tot  { font-weight:700; text-align:right; white-space:nowrap; }

/* Totals */
.r-tot-row { display:grid; grid-template-columns:1fr auto; gap:2px 8px; font-feature-settings:'tnum' 1; font-size:0.95em; padding:1px 0; }
.r-tot-row .lbl { color:#444; }
.r-tot-row .val { font-weight:700; text-align:right; }
.r-tot-row .val.neg { color:#444; }
.r-meta-foot { display:grid; grid-template-columns:1fr 1fr; font-feature-settings:'tnum' 1; font-size:0.9em; color:#444; margin-top:6px; }
.r-meta-foot .right { text-align:right; }

/* Grand total band */
.r-grand { display:grid; grid-template-columns:1fr auto; gap:6px; padding:7px 0; border-top:1.5px solid #000; border-bottom:3px double #000; margin:6px 0 0; }
.r-grand .lbl { font-family:'IBM Plex Sans', system-ui, sans-serif; font-weight:800; font-size:1.25em; letter-spacing:0.08em; }
.r-grand .val { font-feature-settings:'tnum' 1; font-weight:800; font-size:1.55em; text-align:right; }

/* Payment box */
.r-pay-box { border:1.5px solid #000; padding:7px 10px; }
.r-pay-tag { font-family:'IBM Plex Sans', system-ui, sans-serif; font-weight:800; font-size:0.82em; letter-spacing:0.18em; margin-bottom:4px; }
.r-pay-row { display:grid; grid-template-columns:1fr auto; gap:2px 8px; font-feature-settings:'tnum' 1; font-size:0.95em; padding:1px 0; }
.r-pay-row .lbl { color:#444; }
.r-pay-row .val { font-weight:700; text-align:right; }

.r-sig { margin-top:8px; font-size:0.9em; text-align:left; }
.r-sig-line { border-bottom:1px solid #000; margin-top:4px; padding-bottom:14px; }
.r-refund-note { text-align:center; font-size:0.9em; margin-top:6px; line-height:1.4; }

/* Sync line */
.r-sync { display:grid; grid-template-columns:1fr auto; gap:4px; font-feature-settings:'tnum' 1; font-size:0.9em; }
.r-sync .lbl { color:#444; }
.r-sync .val { font-weight:700; text-align:right; }
.r-sync .dot { width:6px; height:6px; border-radius:50%; display:inline-block; vertical-align:middle; margin-right:4px; }
.r-sync .synced  .dot { background:#1D7A50; }
.r-sync .pending .dot { background:#A0620A; }
.r-sync .failed  .dot { background:#B83232; }

/* Footer */
.r-foot { font-size:0.9em; line-height:1.5; }
.r-foot-head { font-size:0.82em; letter-spacing:0.16em; }

/* Barcode (visual placeholder) */
.r-barcode-bars { height:38px; background-image:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 3px,#000 3px 5px,transparent 5px 6px,#000 6px 8px,transparent 8px 11px,#000 11px 12px,transparent 12px 14px,#000 14px 17px,transparent 17px 19px); background-color:#fff; margin-bottom:4px; }
.r-barcode-num { font-size:0.86em; letter-spacing:0.16em; }

/* QR (visual placeholder) */
.r-qr { margin:0 auto 4px; width:80px; height:80px; background-image:repeating-linear-gradient(0deg,#000 0 4px,transparent 4px 8px),repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 8px); background-size:8px 8px; border:1.5px solid #000; }
.r-qr--live { background:#fff; border:none; } /* real EFRIS QR (inline SVG) replaces the placeholder pattern */
.r-qr--live svg { width:80px; height:80px; display:block; }
.r-qr-label { font-size:0.82em; letter-spacing:0.18em; margin-top:4px; }
.r-qr-url { font-size:0.84em; letter-spacing:0.04em; margin-top:4px; word-break:break-all; }

/* Refund watermark */
.r-paper.is-refund::before { content:'REFUND'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-22deg); font-family:'IBM Plex Sans', system-ui, sans-serif; font-weight:800; font-size:56px; letter-spacing:0.10em; color:transparent; -webkit-text-stroke:1.5px rgba(0,0,0,0.18); pointer-events:none; z-index:1; }

@media print {
  .r-paper { border:0; border-radius:0; box-shadow:none; }
  .r-paper[data-paper="58"] { width:58mm; max-width:58mm; }
  .r-paper[data-paper="80"] { width:80mm; max-width:80mm; }
}

/* =====================================================================
   RECEIPT TEMPLATE BUILDER  (settings/receipt_templates.blade.php)
   Split-screen designer: config left, live preview right; stacks on
   tablet/mobile (config first, then preview).
   ===================================================================== */
.rt-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; padding:10px 12px; background:var(--white); border:1px solid var(--border); border-radius:10px; position:sticky; top:0; z-index:5; }
.rt-toolbar-actions { display:flex; gap:8px; flex-wrap:wrap; }

.rt-seg { display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--bg); }
.rt-seg-opt { position:relative; padding:7px 16px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; user-select:none; }
.rt-seg-opt input { position:absolute; opacity:0; pointer-events:none; }
.rt-seg-opt.is-on { background:var(--navy); color:#fff; }

.rt-shell { display:grid; grid-template-columns:minmax(0,1fr) 432px; gap:18px; align-items:start; }
.rt-config { display:flex; flex-direction:column; gap:14px; min-width:0; }
.rt-config .card-h { display:flex; align-items:center; justify-content:space-between; gap:8px; }

.rt-preview-col { position:sticky; top:64px; }
.rt-preview-head { display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:600; color:var(--text); margin-bottom:8px; }
.rt-preview-status { font-size:11px; font-weight:500; color:var(--muted); }
.rt-preview-stage { background:#EAEEF4; border:1px solid var(--border); border-radius:12px; padding:20px 12px; max-height:calc(100vh - 140px); overflow:auto; display:flex; justify-content:center; }
.rt-preview-foot { text-align:center; font-size:11px; color:var(--muted); margin-top:8px; }

.rt-hint { font-size:12px; color:var(--muted); margin-bottom:10px; line-height:1.4; }
.rt-muted { color:var(--muted); }

/* Section order list */
.rt-order-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.rt-order-item { display:flex; align-items:center; gap:8px; padding:7px 8px; background:var(--bg); border:1px solid var(--border); border-radius:8px; }
.rt-order-item.is-drag { opacity:0.5; border-style:dashed; }
.rt-handle { cursor:grab; color:var(--muted-2,#9AA3B2); font-size:14px; letter-spacing:-2px; line-height:1; }
.rt-vis { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:500; color:var(--text); flex:1; min-width:0; cursor:pointer; }
.rt-vis span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rt-order-tools { display:flex; align-items:center; gap:4px; }
.rt-align { height:30px; padding:2px 6px; font-size:12px; width:auto; }
.rt-move { width:26px; height:28px; border:1px solid var(--border); background:var(--white); border-radius:6px; cursor:pointer; font-size:13px; color:var(--text-2,#444); line-height:1; }
.rt-move:hover { background:var(--bg); }

/* Checkbox grids */
.rt-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; }
.rt-check { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-2,#444); padding:3px 0; cursor:pointer; }
.rt-check input { width:15px; height:15px; flex:none; }

/* Number/select pairs */
.rt-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rt-quad { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:4px; }

/* Footer lines */
.rt-footer-line { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.rt-line-del { width:30px; height:32px; border:1px solid var(--border); background:var(--white); border-radius:6px; cursor:pointer; color:var(--red,#B83232); flex:none; }
.rt-line-del:hover { background:var(--red-l,#FBEDED); }

/* Logo */
.rt-logo-row { display:flex; align-items:center; gap:12px; }
.rt-logo-thumb { width:84px; height:84px; flex:none; border:1px dashed var(--border); border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--bg); overflow:hidden; font-size:11px; }
.rt-logo-thumb img { max-width:100%; max-height:100%; object-fit:contain; }
.rt-logo-actions { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }

.rt-reset-link { background:none; border:0; color:var(--muted); font-size:12px; cursor:pointer; padding:2px 4px; }
.rt-reset-link:hover { color:var(--navy); text-decoration:underline; }

@media (max-width: 1024px) {
  .rt-shell { grid-template-columns:1fr; }
  .rt-preview-col { position:static; order:2; }
  .rt-preview-stage { max-height:none; }
}

/* User admin — compact icon action buttons in the users table */
.um-act { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:1px solid var(--border); border-radius:6px; background:var(--white); color:var(--text-2,#444); cursor:pointer; text-decoration:none; }
.um-act:hover { background:var(--bg); }

/* ===== Reporting Center ===== */
.rpt-item { display:flex; align-items:center; gap:2px; }
.rpt-fav { background:none; border:0; cursor:pointer; color:var(--muted-2,#9AA3B2); font-size:16px; line-height:1; padding:4px 6px; border-radius:6px; }
.rpt-fav:hover { background:var(--bg); }
.rpt-fav.is-on { color:var(--amber,#A0620A); }
.rpt-fav-btn.is-on { color:var(--amber,#A0620A); border-color:var(--amber-m,#F0D9B8); }
.rpt-saved { display:inline-flex; align-items:center; gap:4px; background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:3px 6px 3px 11px; font-size:12px; }
.rpt-saved a { color:var(--navy); text-decoration:none; font-weight:500; }
.rpt-saved-x { background:none; border:0; cursor:pointer; color:var(--muted); font-size:11px; padding:0 2px; }
@media print { .rpt-noprint, .topbar, .sidebar, .tabbar, .page-head .actions { display:none !important; } }

/* ============================================================================
   Global loading feedback (see public/js/loading.js).
   Top progress bar for navigations, a busy state for the clicked button, and a
   reusable skeleton utility. Design-system colours; honours reduced-motion via
   the global block above; hidden in print.
   ========================================================================== */
#av-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 160ms ease; }
#av-progress.is-active { opacity: 1; }
#av-progress .av-progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--navy), var(--navy-h) 60%, var(--orange));
  box-shadow: 0 0 8px rgba(42,85,125,0.45), 0 1px 3px rgba(42,85,125,0.35);
  transition: width 220ms cubic-bezier(.16,1,.3,1);
}

/* Clicked-button busy state: keeps the label, adds a spinner, dims + locks it.
   Works on .ds-btn, .btn and bare <button>. Spinner uses currentColor so it is
   visible on both light and primary (navy) buttons. */
button.is-busy, .is-busy { position: relative; pointer-events: none; opacity: 0.8; cursor: default; }
.is-busy::after {
  content: ""; display: inline-block; box-sizing: border-box;
  width: 13px; height: 13px; margin-left: 8px; vertical-align: -2px;
  border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: av-spin 0.6s linear infinite;
}
@keyframes av-spin { to { transform: rotate(360deg); } }

/* Skeleton loader — opt-in utility for data-heavy partials (add .av-skeleton to
   a placeholder block; it shimmers until real content replaces it). */
.av-skeleton {
  background: linear-gradient(90deg, var(--navy-l) 25%, #EEF2F7 37%, var(--navy-l) 63%);
  background-size: 400% 100%; border-radius: 6px; color: transparent !important;
  animation: av-shimmer 1.3s ease infinite; min-height: 12px;
}
@keyframes av-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

@media print { #av-progress { display: none !important; } }

/* ============================================================================
   Global confirm modal (see public/js/loading.js — window.AvConfirm + [data-confirm]).
   Replaces native confirm() with a styled popup matching the POS hold dialog.
   ========================================================================== */
.av-modal { position: fixed; inset: 0; z-index: 9998; background: rgba(22,32,46,0.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.av-modal[hidden] { display: none; }
.av-modal-card { background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(22,32,46,0.28); width: min(420px, 100%); padding: 22px 24px; animation: av-modal-in 160ms cubic-bezier(.16,1,.3,1); }
@keyframes av-modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.av-modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.av-modal-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: #FBE7E4; color: #C2362B; font-weight: 800; font-size: 18px; flex: none; }
.av-modal-title { font-size: 16px; color: var(--ink); }
.av-modal-msg { font-size: 13.5px; color: var(--ink2); line-height: 1.55; margin: 2px 0 20px; }
.av-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.av-modal-danger { background: #C2362B !important; border-color: #C2362B !important; color: #fff !important; }
.av-modal-danger:hover { background: #A82E24 !important; }

/* ---- Reusable predictive item picker (public/js/item-search.js) ------------ */
.js-pick-search + .js-pick-dd, .av-pick-dd { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 10px 30px rgba(20,30,45,0.14); max-height: 260px; overflow-y: auto; padding: 5px; }
.av-pick-opt { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--ink); }
.av-pick-opt.is-hi, .av-pick-opt:hover { background: var(--navy-l); }
.av-pick-sku { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; color: var(--ink3); }
.av-pick-empty { padding: 10px; font-size: 12.5px; color: var(--ink3); }

/* ── Global topbar search (gsearch) ─────────────────────────────────────────
   Sits in the dark topbar; dropdown uses the .pop token language (white card,
   --shadow-pop, --navy-l highlight). Mobile: icon button expands a fixed
   full-width bar under the topbar. */
.gsearch { position: relative; display: flex; align-items: center; }
.gsearch-box { display: none; align-items: center; gap: 8px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r); padding: 0 10px; height: 34px; width: min(360px, 32vw); color: #fff; transition: background .15s, border-color .15s; }
.gsearch-box:focus-within { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.38); }
.gsearch-box > svg { opacity: .65; flex: none; }
.gsearch-box.is-loading > svg { animation: gsearchPulse 0.9s ease-in-out infinite; }
@keyframes gsearchPulse { 0%,100% { opacity: .65; } 50% { opacity: .2; } }
.gsearch-input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #fff; font-size: 13.5px; }
.gsearch-input::placeholder { color: rgba(255,255,255,0.55); }
.gsearch-kbd { font-family: var(--mono); font-size: 10.5px; border: 1px solid rgba(255,255,255,0.25); border-radius: 4px; padding: 1px 6px; color: rgba(255,255,255,0.6); flex: none; }
.gsearch-mob { flex: none; }
@media (min-width: 768px) {
  .gsearch-box { display: flex; }
  .gsearch-mob { display: none; }
}
.gsearch.is-open .gsearch-box { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 61; height: var(--topbar-h); width: auto; border-radius: 0; background: var(--navy-3); border: 0; padding: 0 14px; }
.gsearch.is-open .gsearch-kbd { display: none; }
.gsearch-pop { position: absolute; top: calc(100% + 6px); left: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-pop); width: min(560px, 92vw); max-height: min(70vh, 520px); overflow-y: auto; z-index: 62; padding: 6px; }
.gsearch-close { display: none; flex: none; background: none; border: 0; color: rgba(255,255,255,0.8); font-size: 22px; line-height: 1; padding: 0 4px; cursor: pointer; }
.gsearch.is-open .gsearch-close { display: inline-flex; align-items: center; }
@media (max-width: 767px) {
  .gsearch-pop { position: fixed; top: var(--topbar-h); left: 8px; right: 8px; width: auto; }
}
.gsearch-group-tt { padding: 8px 12px 4px; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.10em; display: flex; justify-content: space-between; align-items: center; }
.gsearch-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 6px; color: var(--text-2); text-decoration: none; min-height: 40px; }
.gsearch-item.is-hi, .gsearch-item:hover { background: var(--navy-l); }
.gsearch-ico { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-2); color: var(--navy); display: flex; align-items: center; justify-content: center; flex: none; font-size: 12px; font-weight: 700; }
.gsearch-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gsearch-tt { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsearch-tt mark { background: none; color: var(--orange-d); }
.gsearch-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsearch-sub mark { background: none; color: var(--orange-d); }
.gsearch-meta { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 11px; color: var(--muted-2); font-family: var(--mono); white-space: nowrap; flex: none; }
.gsearch-status { display: inline-block; font-size: 10px; padding: 1px 7px; border-radius: 10px; background: var(--bg-2); color: var(--muted); text-transform: capitalize; font-family: inherit; }
.gsearch-empty { padding: 20px 14px; text-align: center; font-size: 12.5px; color: var(--muted); }
.gsearch-foot { border-top: 1px solid var(--border); margin-top: 4px; justify-content: center; }

/* ── Global search results page ── */
.gsr-group { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 16px; overflow: hidden; }
.gsr-group-hd { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg); }
.gsr-group-hd h3 { margin: 0; font-size: 13.5px; color: var(--navy); }
.gsr-group-hd a { font-size: 12px; color: var(--navy); }
.gsr-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border); color: var(--text-2); text-decoration: none; }
.gsr-row:last-child { border-bottom: 0; }
.gsr-row:hover { background: var(--navy-l); }

/* ── Responsive card-tables (master-audit P2d) ──────────────────────────────
   Opt a wide table into a stacked-card layout on phones with class "ds-cards"
   (works on either table system, .t or .ds-t); each <td> needs a
   data-label="Column" so the field name shows beside its value. Desktop is
   untouched — the transform lives entirely inside the mobile breakpoint, and
   the modifier only activates on opt-in + data-labels, so no existing table is
   affected. Any index list adopts it by adding the class + data-labels (sales
   and payments-received are the worked examples). */
@media (max-width: 767px) {
  table.ds-cards,
  table.ds-cards tbody,
  table.ds-cards tfoot { display: block; width: 100%; overflow: visible; min-width: 0 !important; }
  table.ds-cards thead { display: none; }
  /* Editable variant: each field stacks (label on top, control full-width)
     rather than label-left/value-right — the right shape for form inputs. */
  table.ds-cards.ds-cards-form td { flex-direction: column; align-items: stretch; gap: 4px; text-align: left; }
  table.ds-cards.ds-cards-form td::before { text-align: left; }
  table.ds-cards.ds-cards-form .ds-input { width: 100% !important; }
  /* Footer (totals) reads as one emphasised card. */
  table.ds-cards tfoot tr { border-color: var(--navy-l); background: var(--bg); }
  table.ds-cards tr {
    display: block; background: #fff; border: 1px solid var(--border);
    border-radius: var(--r-lg); margin: 0 0 10px; padding: 4px 2px; box-shadow: var(--shadow-sm);
  }
  table.ds-cards td {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 8px 14px !important; border: 0 !important; text-align: right; min-height: 40px;
  }
  table.ds-cards td::before {
    content: attr(data-label); flex: none; font-size: 11px; font-weight: 600;
    color: var(--muted); text-transform: uppercase; letter-spacing: .04em; text-align: left;
  }
  /* The actions cell reads better as a full-width button row with no label. */
  table.ds-cards td.ds-cards-actions { flex-direction: row; align-items: center; justify-content: flex-end; gap: 18px; border-top: 1px solid var(--border) !important; }
  table.ds-cards td.ds-cards-actions::before { content: ""; }
  /* Bulk-select checkbox: a compact, label-less control at the card's top-right. */
  table.ds-cards td.blk-cell { justify-content: flex-end; min-height: 0; padding: 6px 12px 0 !important; }
  table.ds-cards td.blk-cell::before { content: ""; }
  /* Empty-state rows (colspan cell) render centered, no orphan label. */
  table.ds-cards td[colspan] { justify-content: center; text-align: center; }
  table.ds-cards td[colspan]::before { content: ""; }
  /* Genuinely empty cells (e.g. blank footer spacers) add nothing on a card. */
  table.ds-cards td:empty { display: none; }
}