/* ═══ Clothing & Fashion — Nexus ═══════════════════════════════
   Builds on /client/styles.css for the shared theme tokens (--bg-*, --text-*,
   --border-*), so light and dark follow the rest of the platform. Everything here is
   namespaced `cl-` — no selector reaches another module's markup. The accent is a
   calm light blue on soft tinted surfaces — the owner's pick, easy on the eyes for a
   whole day at the till (they turned purple down) — beside the pharmacy's navy and the
   laboratory's teal.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --cl-brand: #1b75a8;
  --cl-brand-dark: #155d86;
  --cl-brand-soft: rgba(37, 134, 196, .13);
  --cl-brand-grad: linear-gradient(135deg, #3d9fd6 0%, #1b75a8 100%);
  --cl-brand-glow: rgba(27, 117, 168, .22);
  /* The surfaces: a pale blue page and sidebar, so the white cards stand off them softly. */
  --cl-page: #f0f6fb;
  --cl-side: #e6f0f8; --cl-side-line: #d7e6f2; --cl-side-hover: #dcebf6;
  --cl-side-active: #cfe3f3; --cl-side-active-ink: #134f73; --cl-side-ink: #334155; --cl-side-sep: #5d7b93;
  --cl-line: #dbe8f2;
  /* Pastel tints for the figure tiles: each tile is tinted by what it shows. */
  --cl-tone-sky: #e3f0fa; --cl-tone-mint: #e5f5ec; --cl-tone-blue: #e9f0fb; --cl-tone-aqua: #e2f4f5;
  --cl-tone-rose: #fcebee; --cl-tone-slate: #edf2f7; --cl-tone-amber: #fcf2df; --cl-tone-peach: #fdeee6;
  --cl-chip-on-tone: rgba(255, 255, 255, .75);
  /* Each meaning has a text colour (≥ 4.5:1 on white), a fill for white text on it, a soft
     tint behind it and a line. Text and fill part ways in dark mode: a light green reads on
     a dark card, but white letters on it would not. */
  --cl-success: #047857; --cl-success-fill: #047857; --cl-success-soft: rgba(16, 185, 129, .12); --cl-success-line: rgba(16, 185, 129, .40);
  --cl-warning: #b45309; --cl-warning-fill: #b45309; --cl-warning-soft: rgba(245, 158, 11, .14); --cl-warning-line: rgba(245, 158, 11, .45);
  --cl-danger:  #dc2626; --cl-danger-fill:  #dc2626; --cl-danger-soft:  rgba(239, 68, 68, .10);  --cl-danger-line:  rgba(239, 68, 68, .40);
  --cl-info:    #2563eb; --cl-info-fill:    #2563eb; --cl-info-soft:    rgba(59, 130, 246, .10); --cl-info-line:    rgba(59, 130, 246, .40);
  --cl-radius: 10px;
}
[data-theme="dark"] {
  --cl-brand: #6cbbea; --cl-brand-dark: #3d9fd6; --cl-brand-soft: rgba(61, 159, 214, .18); --cl-brand-glow: rgba(61, 159, 214, .30);
  --cl-page: var(--bg-primary);
  --cl-side: var(--bg-secondary); --cl-side-line: var(--border-primary); --cl-side-hover: var(--bg-tertiary);
  --cl-side-active: var(--cl-brand-soft); --cl-side-active-ink: var(--cl-brand); --cl-side-ink: var(--text-secondary); --cl-side-sep: var(--text-tertiary);
  --cl-line: var(--border-primary);
  --cl-tone-sky: rgba(61, 159, 214, .14); --cl-tone-mint: rgba(52, 211, 153, .12); --cl-tone-blue: rgba(96, 165, 250, .12); --cl-tone-aqua: rgba(45, 212, 191, .12);
  --cl-tone-rose: rgba(248, 113, 113, .12); --cl-tone-slate: rgba(148, 163, 184, .10); --cl-tone-amber: rgba(251, 191, 36, .12); --cl-tone-peach: rgba(251, 146, 60, .12);
  --cl-chip-on-tone: rgba(255, 255, 255, .08);
  --cl-success: #34d399; --cl-success-fill: #059669; --cl-success-soft: rgba(52, 211, 153, .14);
  --cl-warning: #fbbf24; --cl-warning-fill: #b45309; --cl-warning-soft: rgba(251, 191, 36, .14);
  --cl-danger:  #f87171; --cl-danger-fill:  #dc2626; --cl-danger-soft:  rgba(248, 113, 113, .14);
  --cl-info:    #60a5fa; --cl-info-fill:    #2563eb; --cl-info-soft:    rgba(96, 165, 250, .14);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
/* A plain, even typeface — Inter, with Vazirmatn for Kurdish and Arabic (both loaded by
   /client/styles.css) — and gentle weights: regular text, medium names and controls,
   semibold only for headings, prices and totals. Nothing heavier: the owner found the
   old heavy bold, product names above all, hard to look at. */
body { margin: 0; font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; background: var(--cl-page); color: var(--text-primary); -webkit-font-smoothing: antialiased; }
[dir="rtl"] body { font-family: "Vazirmatn", "Noto Sans Arabic", "Inter", "Segoe UI", Tahoma, Arial, sans-serif; }
button, input, select, textarea { font: inherit; }
b, strong, h1, h2, h3, h4, th { font-weight: 600; }
.cl-table td b, .cl-table td strong { font-weight: 500; }

.cl-ico { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -3px; }
.cl-ico.lg { width: 22px; height: 22px; }

.cl-main::-webkit-scrollbar, .cl-sidebar::-webkit-scrollbar, .cl-modal-body::-webkit-scrollbar, .cl-table-wrap::-webkit-scrollbar, .cl-pos-grid::-webkit-scrollbar, .cl-cart-lines::-webkit-scrollbar { width: 9px; height: 9px; }
.cl-main::-webkit-scrollbar-thumb, .cl-sidebar::-webkit-scrollbar-thumb, .cl-modal-body::-webkit-scrollbar-thumb, .cl-table-wrap::-webkit-scrollbar-thumb, .cl-pos-grid::-webkit-scrollbar-thumb, .cl-cart-lines::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ─── Shell ─────────────────────────────────────────── */
.cl-app { display: none; height: 100vh; height: 100dvh; grid-template-columns: 240px 1fr; grid-template-rows: 56px 1fr; overflow: hidden; }
.cl-app.active { display: grid; }
.cl-topbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; background: var(--bg-secondary); border-bottom: 1px solid var(--cl-side-line); min-width: 0; }
.cl-brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; min-width: 0; }
.cl-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-brand-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; background: var(--cl-brand-grad); color: #fff; box-shadow: 0 2px 8px var(--cl-brand-glow); }
.cl-brand-icon .cl-ico { width: 19px; height: 19px; }
.cl-topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cl-user { font-size: 12.5px; color: var(--text-secondary); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-menu-btn { display: none; }
.cl-demo-pill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: var(--cl-warning-soft); color: var(--cl-warning); }

.cl-sidebar { background: var(--cl-side); border-inline-end: 1px solid var(--cl-side-line); padding: 10px 8px 24px; overflow-y: auto; }
.cl-nav-item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; margin-bottom: 2px; border: none; background: transparent; color: var(--cl-side-ink); font-size: 13.5px; font-weight: 500; border-radius: 9px; cursor: pointer; text-align: start; transition: background .09s, color .09s; }
.cl-nav-item .cl-ico { opacity: .75; }
.cl-nav-item:hover { background: var(--cl-side-hover); color: var(--text-primary); }
.cl-nav-item:focus-visible { outline: 2px solid var(--cl-brand); outline-offset: -2px; }
.cl-nav-item.active { background: var(--cl-side-active); color: var(--cl-side-active-ink); font-weight: 600; }
.cl-nav-item.active .cl-ico { opacity: 1; }
.cl-nav-item.active::before { content: ""; position: absolute; inset-inline-start: -8px; top: 20%; bottom: 20%; width: 3px; border-radius: 3px; background: var(--cl-brand); }
.cl-nav-sep { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--cl-side-sep); padding: 14px 12px 6px; }
.cl-nav-kbd { margin-inline-start: auto; font-size: 10px; font-weight: 500; color: var(--text-tertiary); border: 1px solid var(--border-primary); border-radius: 5px; padding: 1px 5px; opacity: .55; }
.cl-nav-badge { margin-inline-start: auto; min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--cl-danger-fill); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }

.cl-main { overflow-y: auto; padding: 18px 22px 48px; min-width: 0; }
.cl-view { display: none; }
.cl-view.active { display: block; }
.cl-view-pos.active { display: block; }

/* ─── Common ────────────────────────────────────────── */
.cl-h1 { font-size: 20px; font-weight: 600; margin: 0 0 3px; }
.cl-sub { font-size: 13px; color: var(--text-secondary); margin: 0 0 16px; }
.cl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.cl-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cl-muted { color: var(--text-secondary); }
.cl-small { font-size: 12px; }
.cl-num { font-variant-numeric: tabular-nums; }
.cl-strong { font-weight: 600; }
.cl-good { color: var(--cl-success); }
.cl-bad { color: var(--cl-danger); }
.cl-warn { color: var(--cl-warning); }
.cl-nowrap { white-space: nowrap; }
.cl-hidden { display: none !important; }
.cl-mono { font-family: Consolas, "Courier New", ui-monospace, monospace; letter-spacing: .3px; unicode-bidi: plaintext; }

.cl-input, .cl-select, .cl-textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border-input, var(--border-primary)); border-radius: var(--cl-radius); background: var(--bg-input, var(--bg-tertiary)); color: var(--text-primary); font-size: 13.5px; transition: border-color .1s, box-shadow .1s, background .1s; }
.cl-input:hover:not(:focus):not(:disabled), .cl-select:hover:not(:focus):not(:disabled), .cl-textarea:hover:not(:focus) { border-color: var(--border-secondary); }
.cl-input:focus, .cl-select:focus, .cl-textarea:focus { outline: none; border-color: var(--cl-brand); background: var(--bg-secondary); box-shadow: 0 0 0 3px var(--cl-brand-soft); }
.cl-input:disabled, .cl-select:disabled { opacity: .6; }
.cl-textarea { min-height: 70px; resize: vertical; }
.cl-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .03em; }
.cl-field { margin-bottom: 12px; min-width: 0; }
.cl-hint { font-size: 11.5px; color: var(--text-tertiary); margin-top: 4px; line-height: 1.4; }
.cl-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.cl-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
.cl-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 14px; }
@media (max-width: 780px) { .cl-grid2, .cl-grid3, .cl-grid4 { grid-template-columns: 1fr; } }
.cl-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.cl-check input { width: 17px; height: 17px; accent-color: var(--cl-brand); margin: 0; }
/* A money box that takes either currency (CL.fxField): the amount, a dinar/dollar switch, the rate. */
.cl-fx-row { display: flex; gap: 6px; align-items: stretch; }
.cl-fx-row .cl-input { flex: 1; min-width: 0; }
.cl-fx-cur { display: inline-flex; border: 1px solid var(--border-primary); border-radius: var(--cl-radius); overflow: hidden; flex: none; }
.cl-fx-cur button { border: 0; background: var(--bg-secondary); color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 500; padding: 0 12px; cursor: pointer; min-width: 44px; }
.cl-fx-cur button + button { border-inline-start: 1px solid var(--border-primary); }
.cl-fx-cur button.on { background: var(--cl-brand); color: #fff; }
.cl-fx-rate { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--text-secondary); }
.cl-fx-rate[hidden] { display: none; }
.cl-fx-rate .cl-input { width: 96px; padding: 5px 8px; font-size: 13px; }
.cl-fx-eq { margin-top: 4px; min-height: 1em; }
/* Today's dollar rate in the top bar: one tap to change it (owner). */
.cl-rate-chip { font-size: 12.5px; font-weight: 500; white-space: nowrap; unicode-bidi: isolate; }
@media (max-width: 720px) { .cl-rate-chip { display: none; } }
/* Money and quantity boxes are text boxes with a number keypad (core.js reads Kurdish and Arabic digits). */
input[inputmode="decimal"].cl-input, input[inputmode="numeric"].cl-input { font-variant-numeric: tabular-nums; }
[dir="rtl"] input[inputmode="decimal"], [dir="rtl"] input[inputmode="numeric"], [dir="rtl"] .cl-num, [dir="rtl"] .num { unicode-bidi: plaintext; }

.cl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 9px 15px; border-radius: var(--cl-radius); border: 1px solid var(--border-primary); background: var(--bg-secondary); color: var(--text-primary); cursor: pointer; transition: background .09s, border-color .09s, transform .06s; white-space: nowrap; text-decoration: none; }
.cl-btn:hover { background: var(--bg-tertiary); }
.cl-btn:active { transform: translateY(1px); }
.cl-btn:focus-visible { outline: 2px solid var(--cl-brand); outline-offset: 2px; }
.cl-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.cl-btn-primary { background: var(--cl-brand-grad); border-color: transparent; color: #fff; box-shadow: 0 1px 2px var(--cl-brand-glow); }
.cl-btn-primary:hover { background: var(--cl-brand-grad); filter: brightness(1.07); box-shadow: 0 6px 16px var(--cl-brand-glow); }
.cl-btn-primary:disabled { filter: saturate(.55); box-shadow: none; }
.cl-btn-success { background: var(--cl-success-fill); border-color: var(--cl-success-fill); color: #fff; }
.cl-btn-success:hover { filter: brightness(1.08); background: var(--cl-success-fill); }
.cl-btn-danger { background: var(--cl-danger-fill); border-color: var(--cl-danger-fill); color: #fff; }
.cl-btn-danger:hover { filter: brightness(1.08); background: var(--cl-danger-fill); }
.cl-btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.cl-btn-ghost:hover { color: var(--text-primary); }
.cl-btn-sm { padding: 5px 10px; font-size: 12px; }
.cl-btn-lg { padding: 13px 20px; font-size: 15px; font-weight: 600; }
.cl-btn-block { width: 100%; }
.cl-btn-icon { padding: 7px; }

.cl-card { background: var(--bg-secondary); border: 1px solid var(--cl-line); border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--shadow-card, 0 1px 2px rgba(0,0,0,.04)); min-width: 0; }
.cl-card-title { font-size: 14px; font-weight: 600; margin: 0 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cl-card-title .cl-btn { font-size: 12px; }
.cl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.cl-cols > * { min-width: 0; }
@media (max-width: 1100px) { .cl-cols { grid-template-columns: 1fr; } }

/* ─── Stat tiles ────────────────────────────────────── */
.cl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin-bottom: 16px; }
/* The dashboard's eight tiles: always even rows, never one tile left alone on a line. */
.cl-stats.cl-stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .cl-stats.cl-stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cl-stat { --cl-tone: transparent; display: block; width: 100%; text-align: start; color: inherit; background-color: var(--bg-secondary); background-image: linear-gradient(var(--cl-tone), var(--cl-tone)); border: 1px solid var(--cl-line); border-radius: 14px; padding: 13px 15px; box-shadow: var(--shadow-card, 0 1px 2px rgba(0,0,0,.04)); min-width: 0; }
/* A tile is tinted by what its figure means; a screen can name a tone of its own instead
   (data-tone — the dashboard gives each of its eight tiles one). */
.cl-stat:where(:has(.cl-stat-value.brand)) { --cl-tone: var(--cl-tone-sky); }
.cl-stat:where(:has(.cl-stat-value.good)) { --cl-tone: var(--cl-tone-mint); }
.cl-stat:where(:has(.cl-stat-value.warn)) { --cl-tone: var(--cl-tone-amber); }
.cl-stat:where(:has(.cl-stat-value.bad)) { --cl-tone: var(--cl-tone-rose); }
.cl-stat[data-tone="sky"] { --cl-tone: var(--cl-tone-sky); }
.cl-stat[data-tone="mint"] { --cl-tone: var(--cl-tone-mint); }
.cl-stat[data-tone="blue"] { --cl-tone: var(--cl-tone-blue); }
.cl-stat[data-tone="aqua"] { --cl-tone: var(--cl-tone-aqua); }
.cl-stat[data-tone="rose"] { --cl-tone: var(--cl-tone-rose); }
.cl-stat[data-tone="slate"] { --cl-tone: var(--cl-tone-slate); }
.cl-stat[data-tone="amber"] { --cl-tone: var(--cl-tone-amber); }
.cl-stat[data-tone="peach"] { --cl-tone: var(--cl-tone-peach); }
button.cl-stat { cursor: pointer; transition: border-color .09s, box-shadow .12s, transform .09s; }
button.cl-stat:hover { border-color: var(--cl-brand); box-shadow: 0 6px 18px var(--cl-brand-glow); transform: translateY(-1px); }
.cl-stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); display: flex; justify-content: space-between; align-items: center; gap: 6px; }
/* The tile's icon sits in a chip that takes the colour of what the figure means; on a
   tinted tile the chip is a soft white. */
.cl-stat-label .cl-ico { width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: var(--cl-brand-soft); color: var(--cl-brand); margin-block: -4px -6px; margin-inline-end: -2px; }
.cl-stat:has(.cl-stat-value.good) .cl-stat-label .cl-ico { background: var(--cl-success-soft); color: var(--cl-success); }
.cl-stat:has(.cl-stat-value.warn) .cl-stat-label .cl-ico { background: var(--cl-warning-soft); color: var(--cl-warning); }
.cl-stat:has(.cl-stat-value.bad) .cl-stat-label .cl-ico { background: var(--cl-danger-soft); color: var(--cl-danger); }
.cl-stat:is([data-tone], :has(.cl-stat-value.brand, .cl-stat-value.good, .cl-stat-value.warn, .cl-stat-value.bad)) .cl-stat-label .cl-ico { background: var(--cl-chip-on-tone); }
.cl-stat-value { font-size: 22px; font-weight: 600; line-height: 1.2; margin-top: 5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cl-stat-value.brand { color: var(--cl-brand); }
.cl-stat-value.good { color: var(--cl-success); }
.cl-stat-value.warn { color: var(--cl-warning); }
.cl-stat-value.bad { color: var(--cl-danger); }
.cl-stat-foot { font-size: 11.5px; color: var(--text-secondary); margin-top: 4px; }
.cl-delta { font-size: 11.5px; font-weight: 600; }
.cl-delta.up { color: var(--cl-success); }
.cl-delta.down { color: var(--cl-danger); }
[dir="rtl"] .cl-stat-value { unicode-bidi: plaintext; }

/* ─── Tables ────────────────────────────────────────── */
.cl-table-wrap { overflow-x: auto; border: 1px solid var(--cl-line); border-radius: 14px; background: var(--bg-secondary); box-shadow: var(--shadow-card, 0 1px 2px rgba(0,0,0,.04)); }
.cl-card .cl-table-wrap { box-shadow: none; }
.cl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cl-table th { text-align: start; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); background: var(--bg-tertiary); padding: 9px 11px; border-bottom: 1px solid var(--border-primary); white-space: nowrap; }
.cl-table td { padding: 8px 11px; border-bottom: 1px solid var(--border-primary); vertical-align: middle; }
.cl-table tbody tr:last-child td { border-bottom: none; }
.cl-table tbody tr:hover { background: var(--bg-tertiary); }
.cl-table .num, .cl-table th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-table tr.click { cursor: pointer; }
.cl-table tr.muted td { opacity: .55; }
.cl-table tfoot td { font-weight: 600; background: var(--bg-tertiary); border-top: 1px solid var(--border-primary); }
.cl-table .sub { font-size: 11.5px; color: var(--text-secondary); }
.cl-empty { text-align: center; color: var(--text-tertiary); font-size: 13px; padding: 30px 10px; }
.cl-more { text-align: center; padding: 10px; }

/* ─── Badges & chips ────────────────────────────────── */
.cl-badge { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 20px; white-space: nowrap; background: rgba(100,116,139,.13); color: var(--text-secondary); }
.cl-badge.good { background: var(--cl-success-soft); color: var(--cl-success); }
.cl-badge.warn { background: var(--cl-warning-soft); color: var(--cl-warning); }
.cl-badge.bad { background: var(--cl-danger-soft); color: var(--cl-danger); }
.cl-badge.brand { background: var(--cl-brand-soft); color: var(--cl-brand); }
.cl-badge.info { background: var(--cl-info-soft); color: var(--cl-info); }
.cl-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); vertical-align: -1px; margin-inline-end: 4px; }

.cl-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.cl-toolbar .cl-input, .cl-toolbar .cl-select { width: auto; min-width: 150px; }
.cl-toolbar .cl-grow { flex: 1 1 200px; }
/* A scan box in a toolbar takes the room it is given (the toolbar's own input rule would shrink it). */
.cl-toolbar .cl-scan { flex: 1 1 260px; min-width: 0; }
.cl-toolbar .cl-scan .cl-input { width: 100%; min-width: 0; }
.cl-toolbar .cl-date { min-width: 140px; }
.cl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-chip { padding: 6px 12px; border-radius: 20px; border: 1.5px solid var(--border-primary); background: var(--bg-secondary); color: var(--text-secondary); font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.cl-chip:hover { border-color: var(--cl-brand); color: var(--cl-brand); }
.cl-chip.active { background: var(--cl-brand-grad); border-color: transparent; color: #fff; box-shadow: 0 2px 8px var(--cl-brand-glow); }
.cl-tabs { display: flex; gap: 4px; background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 11px; padding: 3px; width: max-content; max-width: 100%; overflow-x: auto; margin-bottom: 14px; }
.cl-tab { font-size: 12.5px; font-weight: 500; padding: 6px 14px; border: none; border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.cl-tab.active { background: var(--bg-secondary); color: var(--cl-brand); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.cl-banner { border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; font-size: 13px; line-height: 1.5; border: 1px solid var(--border-primary); background: var(--bg-tertiary); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cl-banner.warn { background: var(--cl-warning-soft); border-color: var(--cl-warning-line); }
.cl-banner.bad { background: var(--cl-danger-soft); border-color: var(--cl-danger-line); }
.cl-banner.good { background: var(--cl-success-soft); border-color: var(--cl-success-line); }
.cl-banner.info { background: var(--cl-info-soft); border-color: var(--cl-info-line); }
.cl-banner.brand { background: var(--cl-brand-soft); border-color: var(--cl-brand); }
.cl-banner .grow { flex: 1; min-width: 160px; }

/* ─── Modal (stacked) & toast ───────────────────────── */
.cl-modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 900; display: flex; align-items: center; justify-content: center; padding: 14px; }
.cl-modal { background: var(--bg-secondary); border-radius: 16px; width: 100%; max-width: 560px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(0,0,0,.32); }
.cl-modal.wide { max-width: 880px; }
.cl-modal.xwide { max-width: 1080px; }
.cl-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-primary); }
.cl-modal-head h3 { margin: 0; font-size: 15.5px; font-weight: 600; overflow-wrap: anywhere; }
.cl-modal-x { background: none; border: none; font-size: 25px; line-height: 1; color: var(--text-secondary); cursor: pointer; padding: 0 4px; }
.cl-modal-body { padding: 16px 18px; overflow-y: auto; }
.cl-modal-foot { padding: 12px 18px; border-top: 1px solid var(--border-primary); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.cl-modal-foot .spacer { flex: 1; }
.cl-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(90px); background: #111827; color: #fff; font-size: 13.5px; font-weight: 500; padding: 11px 20px; border-radius: 11px; z-index: 1000; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; max-width: 92vw; text-align: center; }
.cl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.cl-toast.err { background: var(--cl-danger-fill); }
.cl-toast.ok { background: var(--cl-success-fill); }
.cl-spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: cl-spin .7s linear infinite; vertical-align: -2px; }
@keyframes cl-spin { to { transform: rotate(360deg); } }

/* ─── POS ───────────────────────────────────────────── */
.cl-pos { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 16px; height: calc(100dvh - 56px - 18px - 24px); }
.cl-pos-left { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cl-pos-bar { display: flex; gap: 8px; margin-bottom: 10px; }
.cl-scan { flex: 1; position: relative; }
.cl-scan .cl-input { padding-inline-start: 38px; font-size: 15px; height: 44px; }
.cl-scan > .cl-ico { position: absolute; inset-inline-start: 12px; top: 13px; color: var(--text-tertiary); }
.cl-scan .cl-cam-btn { position: absolute; inset-inline-end: 4px; top: 4px; height: 36px; width: 40px; color: var(--cl-brand); }
.cl-scan:has(.cl-cam-btn) .cl-input { padding-inline-end: 48px; }
.cl-pos-filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; }
/* max-content rows: the grid scrolls at a fixed height, and plain auto rows would stay at each
   card's min-height there, letting a taller card (bigger script, two-line name) spill out. */
.cl-pos-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); grid-auto-rows: max-content; gap: 10px; align-content: start; padding: 2px 2px 12px; }
.cl-prod { position: relative; display: flex; flex-direction: column; gap: 4px; text-align: start; background: var(--bg-secondary); border: 1.5px solid var(--border-primary); border-radius: 13px; padding: 11px 12px; cursor: pointer; color: inherit; min-height: 104px; transition: border-color .1s, box-shadow .12s, transform .08s; }
.cl-prod:hover { border-color: var(--cl-brand); box-shadow: 0 6px 16px var(--cl-brand-glow); }
.cl-prod:active { transform: scale(.98); }
.cl-prod.out { opacity: .55; }
/* flex-shrink 0: the grid scrolls at a fixed height, so its rows size to each card's
   minimum — and a clamped name (overflow hidden) would otherwise be squeezed to half a line. */
.cl-prod .nm { flex-shrink: 0; font-size: 13.5px; font-weight: 500; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cl-prod .cd { flex-shrink: 0; font-size: 11px; color: var(--text-tertiary); }
.cl-prod .pr { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.cl-prod .pr b { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.cl-prod .pr s { font-size: 11px; color: var(--text-tertiary); }
.cl-prod .stk { font-size: 11px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }
.cl-prod .stk.low { color: var(--cl-warning); }
.cl-prod .stk.none { color: var(--cl-danger); }
/* The "Service" badge shares the code's line: on top of the card it ran over long names. */
.cl-prod .cdrow { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 18px; }

.cl-cart { display: flex; flex-direction: column; background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: 16px; min-height: 0; overflow: hidden; }
.cl-cart-head { padding: 11px 13px; border-bottom: 1px solid var(--border-primary); display: flex; gap: 8px; align-items: center; }
.cl-cust-btn { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1.5px dashed var(--border-secondary); background: transparent; color: var(--text-secondary); cursor: pointer; text-align: start; font-size: 13px; font-weight: 500; }
.cl-cust-btn.set { border-style: solid; border-color: var(--cl-brand); color: var(--text-primary); background: var(--cl-brand-soft); }
.cl-cust-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-cart-lines { flex: 1; overflow-y: auto; padding: 6px 10px; }
.cl-line { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 9px 4px; border-bottom: 1px solid var(--border-primary); }
.cl-line:last-child { border-bottom: none; }
.cl-line .nm { font-size: 13px; font-weight: 500; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.cl-line .vr { font-size: 11.5px; color: var(--text-secondary); }
.cl-line .tot { font-size: 13.5px; font-weight: 600; text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-line .ctl { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; }
.cl-qty { display: inline-flex; align-items: center; border: 1px solid var(--border-primary); border-radius: 9px; overflow: hidden; }
.cl-qty button { width: 30px; height: 30px; border: none; background: var(--bg-tertiary); color: var(--text-primary); cursor: pointer; font-size: 16px; font-weight: 500; }
.cl-qty button:hover { background: var(--cl-brand-soft); color: var(--cl-brand); }
.cl-qty input { width: 42px; height: 30px; border: none; text-align: center; background: var(--bg-input, var(--bg-secondary)); color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.cl-line .unit { font-size: 12px; color: var(--text-secondary); margin-inline-start: auto; }
.cl-line .unit input { width: 92px; padding: 4px 7px; font-size: 12.5px; text-align: end; }
.cl-line .rm { padding: 4px 7px; color: var(--text-tertiary); }
.cl-line .rm:hover { color: var(--cl-danger); }
/* A line that needs a look: a drawn warning triangle after its variant, never an emoji glyph. */
.cl-line.warn .vr::after { content: ""; display: inline-block; width: 13px; height: 13px; margin-inline-start: 5px; vertical-align: -2px; background: var(--cl-warning);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.cl-cart-empty { text-align: center; color: var(--text-tertiary); padding: 40px 14px; font-size: 13px; line-height: 1.6; }
.cl-cart-foot { border-top: 1px solid var(--border-primary); padding: 10px 13px 13px; background: var(--bg-tertiary); }
.cl-trow { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 3px 0; }
.cl-trow b { font-variant-numeric: tabular-nums; }
/* A figure on its own ("−35,000") reads left to right, so its sign stays in front in Kurdish and Arabic. */
[dir="rtl"] .cl-trow b, [dir="rtl"] .cl-trow s { unicode-bidi: plaintext; }
.cl-trow.grand { font-size: 19px; font-weight: 600; padding-top: 7px; margin-top: 4px; border-top: 1px solid var(--border-secondary); }
.cl-trow.grand b { color: var(--cl-brand); }
.cl-trow .lnk { background: none; border: none; color: var(--cl-brand); font-weight: 500; cursor: pointer; padding: 0; font-size: 12.5px; }
.cl-cart-actions { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; margin-top: 10px; }
.cl-pay-btn { font-size: 16px; font-weight: 600; padding: 13px; }
.cl-pos-strip { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; }
.cl-pos-strip .cl-btn { font-size: 12px; padding: 5px 10px; }
.cl-pos-shift, .cl-pos-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cl-shift-on { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; padding: 4px 10px; border-radius: 20px; background: var(--cl-success-soft); color: var(--cl-success); }
.cl-shift-on b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cl-shift-off { font-weight: 500; color: var(--cl-warning); padding: 4px 4px; }

/* A product on promotion: the cut in a red corner, the tag price struck out. */
.cl-prod.sale { border-color: var(--cl-danger-line); }
.cl-off { position: absolute; top: -8px; inset-inline-end: 8px; background: linear-gradient(135deg, #f43f5e 0%, #dc2626 100%); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; box-shadow: 0 2px 6px rgba(220,38,38,.3); font-variant-numeric: tabular-nums; unicode-bidi: plaintext; }
.cl-prod .sw { display: flex; gap: 2px; flex-wrap: wrap; flex-shrink: 0; }
.cl-prod .sw .cl-swatch { width: 10px; height: 10px; margin: 0; }

/* A cart line: tap it to change the quantity, the price or the discount. */
.cl-line-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0; border: none; background: none; color: inherit; text-align: start; cursor: pointer; font: inherit; }
.cl-line-main:hover .nm { color: var(--cl-brand); }
.cl-line-main:focus-visible { outline: 2px solid var(--cl-brand); outline-offset: 2px; border-radius: 6px; }
.cl-line .chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.cl-chip-sm { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 500; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
.cl-chip-sm .cl-ico { width: 11px; height: 11px; vertical-align: 0; }
.cl-chip-sm.promo { background: var(--cl-danger-soft); color: var(--cl-danger); }
.cl-chip-sm.disc { background: var(--cl-success-soft); color: var(--cl-success); }
.cl-disc-btn { padding: 4px 8px; color: var(--cl-brand); }
.cl-disc-btn .cl-ico { width: 14px; height: 14px; }
.cl-saved { text-align: center; font-size: 12.5px; font-weight: 500; color: var(--cl-success); background: var(--cl-success-soft); border-radius: 8px; padding: 5px 8px; margin-top: 6px; }
.cl-cart-empty .cl-ico.lg { width: 40px; height: 40px; opacity: .45; }
.cl-cart-empty .big { font-size: 14px; font-weight: 500; color: var(--text-secondary); margin-top: 8px; }
.cl-keys { display: flex; gap: 6px 14px; justify-content: center; flex-wrap: wrap; margin-top: 18px; font-size: 11.5px; }
kbd { font-family: inherit; font-size: 10.5px; font-weight: 500; border: 1px solid var(--border-secondary); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; background: var(--bg-secondary); color: var(--text-secondary); }

/* The line editor and the discount boxes */
.cl-line-head { margin-bottom: 12px; }
.cl-line-head .nm { font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.cl-line-head .vr { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.cl-pct { margin: 0 0 12px; }
.cl-chip:disabled { opacity: .4; cursor: not-allowed; border-color: var(--border-primary); color: var(--text-tertiary); background: var(--bg-secondary); }
.cl-qty.big button { width: 46px; height: 42px; font-size: 20px; }
.cl-qty.big input { width: 72px; height: 42px; font-size: 17px; }

/* Price check */
.cl-h2 { font-size: 17px; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.cl-pc { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 4px 0 6px; }
.cl-pc .pc-price { font-size: 30px; font-weight: 600; color: var(--cl-brand); text-align: end; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }
.cl-pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.cl-pc-grid .cl-cell { height: 58px; font-size: 13px; padding: 4px 6px; text-align: center; }
.cl-cell.sel { border-color: var(--cl-brand); background: var(--cl-brand-soft); }

/* The camera scanner */
.cl-cam { position: relative; aspect-ratio: 4 / 3; background: #000; border-radius: 12px; overflow: hidden; }
.cl-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-cam-frame { position: absolute; inset: 28% 10%; border: 3px solid rgba(255,255,255,.92); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0,0,0,.38); }
.cl-cam-frame::after { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: #ef4444; box-shadow: 0 0 8px #ef4444; animation: cl-scanline 1.6s ease-in-out infinite alternate; }
@keyframes cl-scanline { from { transform: translateY(-34px); } to { transform: translateY(34px); } }

/* Variant picker: size × colour */
.cl-matrix { overflow-x: auto; }
.cl-matrix table { border-collapse: separate; border-spacing: 6px; }
.cl-matrix th { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-align: center; padding: 2px 4px; white-space: nowrap; }
.cl-matrix th.row { text-align: start; }
.cl-cell { min-width: 64px; height: 54px; border-radius: 11px; border: 1.5px solid var(--border-primary); background: var(--bg-secondary); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-weight: 500; color: var(--text-primary); width: 100%; }
.cl-cell small { font-size: 10.5px; font-weight: 500; color: var(--text-secondary); }
.cl-cell:hover:not(:disabled) { border-color: var(--cl-brand); background: var(--cl-brand-soft); }
.cl-cell.low small { color: var(--cl-warning); }
.cl-cell:disabled, .cl-cell.none { opacity: .4; cursor: not-allowed; }
.cl-cell.none small { color: var(--cl-danger); }
.cl-cell.na { visibility: hidden; }
.cl-cell input { width: 54px; text-align: center; padding: 6px 4px; border-radius: 8px; border: 1px solid var(--border-primary); background: var(--bg-input, var(--bg-tertiary)); color: var(--text-primary); font-weight: 600; }

/* Payment */
.cl-pay-total { text-align: center; padding: 6px 0 14px; }
.cl-pay-total .big { font-size: 34px; font-weight: 600; color: var(--cl-brand); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cl-pay-total .alt { font-size: 13px; color: var(--text-secondary); margin-top: 3px; }
.cl-pay-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.cl-pay-row .cl-input, .cl-pay-row .cl-select { margin: 0; }
.cl-pay-row .lbl { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.cl-pay-row .conv { font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; }
.cl-quick { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.cl-quick .cl-btn { font-size: 12.5px; padding: 6px 10px; }
.cl-pay-sum { background: var(--bg-tertiary); border-radius: 12px; padding: 10px 14px; margin-top: 8px; }
.cl-pay-sum .cl-trow.big { font-size: 18px; font-weight: 600; }
@media (max-width: 560px) { .cl-pay-row { grid-template-columns: 1fr 1fr; } .cl-pay-row .conv { grid-column: 1 / -1; } }

/* Result after checkout */
.cl-done { text-align: center; padding: 6px 0; }
.cl-done .tick { width: 56px; height: 56px; border-radius: 50%; background: var(--cl-success-soft); color: var(--cl-success); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.cl-done .tick .cl-ico { width: 30px; height: 30px; stroke-width: 2.6; }
.cl-done .change { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cl-done .inv { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }

/* ─── Product editor ────────────────────────────────── */
.cl-picks { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-pick { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 9px; border: 1.5px solid var(--border-primary); background: var(--bg-secondary); cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-primary); }
.cl-pick.on { border-color: var(--cl-brand); background: var(--cl-brand-soft); color: var(--cl-brand); font-weight: 500; }
.cl-pick input { display: none; }
.cl-section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin: 14px 0 8px; display: flex; align-items: center; gap: 8px; }
.cl-section-title::after { content: ""; flex: 1; height: 1px; background: var(--border-primary); }
.cl-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 13px; }
.cl-kv dt { color: var(--text-secondary); font-weight: 500; }
.cl-kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* "— Lost the receipt? —" between two ways to find a sale */
.cl-or { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; font-size: 12px; font-weight: 500; color: var(--text-tertiary); }
.cl-or::before, .cl-or::after { content: ""; flex: 1; height: 1px; background: var(--border-primary); }
.cl-x { display: inline-flex; padding: 0; margin-inline-start: 2px; border: none; background: none; color: inherit; cursor: pointer; opacity: .7; }
.cl-x:hover { opacity: 1; color: var(--cl-danger); }
.cl-x .cl-ico { width: 13px; height: 13px; }
/* An input with its unit after it: "20 %", "5,000 IQD" */
.cl-suffix { display: flex; align-items: stretch; }
.cl-suffix .cl-input { border-start-end-radius: 0; border-end-end-radius: 0; font-size: 16px; font-weight: 600; }
.cl-suffix span { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--border-primary); border-inline-start: none; border-start-end-radius: var(--cl-radius); border-end-end-radius: var(--cl-radius); background: var(--bg-tertiary); font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.cl-empty-big { padding: 40px 16px; line-height: 1.6; }
.cl-empty-big .cl-ico.lg { width: 40px; height: 40px; opacity: .45; display: block; margin: 0 auto 8px; }
.cl-empty-big .ttl { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }

/* ─── Promotions ────────────────────────────────────── */
.cl-promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.cl-promo { display: flex; flex-direction: column; gap: 7px; background: var(--bg-secondary); border: 1px solid var(--border-primary); border-inline-start: 4px solid var(--border-secondary); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-card, 0 1px 2px rgba(0,0,0,.04)); min-width: 0; }
.cl-promo.running { border-inline-start-color: var(--cl-success); }
.cl-promo.scheduled { border-inline-start-color: var(--cl-info); }
.cl-promo.ended, .cl-promo.off { opacity: .78; }
.cl-promo .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cl-promo .off { font-size: 24px; font-weight: 600; color: var(--cl-danger); font-variant-numeric: tabular-nums; unicode-bidi: plaintext; line-height: 1.1; }
.cl-promo .nm { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.cl-promo .ln { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.cl-promo .ln .cl-ico { width: 14px; height: 14px; margin-top: 2px; opacity: .8; }
.cl-promo .act { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.cl-pm-example { font-size: 13px; font-weight: 500; color: var(--cl-success); margin: -2px 0 6px; min-height: 18px; }
.cl-pm-example .cl-ico { width: 14px; height: 14px; }

/* ─── Import from Excel ─────────────────────────────── */
.cl-im-drop { border: 2px dashed var(--border-secondary); border-radius: 14px; padding: 22px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--bg-tertiary); transition: border-color .1s, background .1s; }
.cl-im-drop.over { border-color: var(--cl-brand); background: var(--cl-brand-soft); }
.cl-im-drop .ttl { font-size: 15px; font-weight: 600; }
.cl-im-drop input[type="file"] { display: none; }
.cl-im-drop .cl-btn { margin-top: 6px; }
/* Pasted cells keep their columns (tabs) and scroll sideways instead of wrapping. */
.cl-im-paste { white-space: pre; overflow-x: auto; tab-size: 14; font-size: 12.5px; }
.cl-im-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 12px; }
.cl-im-map .cl-select.set { border-color: var(--cl-success-line); background-color: var(--cl-success-soft); }

/* ─── Charts (inline SVG bars) ──────────────────────── */
.cl-chart { width: 100%; height: 170px; display: block; }
.cl-chart .bar { fill: var(--cl-brand); opacity: .85; }
.cl-chart .bar.today { opacity: 1; }
.cl-chart .bar2 { fill: var(--cl-success); opacity: .75; }
.cl-chart .lbl { font-size: 10px; fill: var(--text-tertiary); }
.cl-chart .axis { stroke: var(--border-secondary); }
.cl-hbar { display: grid; grid-template-columns: minmax(90px, 1.1fr) minmax(60px, 2fr) auto; align-items: center; gap: 10px; padding: 5px 2px; font-size: 13px; }
.cl-hbar .bar { height: 10px; background: var(--bg-tertiary); border-radius: 6px; overflow: hidden; }
.cl-hbar .bar i { display: block; height: 100%; background: var(--cl-brand-grad); border-radius: 6px; }
.cl-hbar .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cl-hbar .v { text-align: end; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ─── Count session ─────────────────────────────────── */
.cl-count-row.diff td { background: var(--cl-warning-soft); }
.cl-count-row.ok td .cnt { border-color: var(--cl-success); }
.cl-count-row .cnt { width: 80px; text-align: center; }

/* ─── Login gate / boot ─────────────────────────────── */
.cl-boot { display: flex; align-items: center; justify-content: center; height: 100vh; color: var(--text-secondary); gap: 10px; font-size: 14px; }

/* ─── Yearly subscription: grace banner, renewal screen ── */
body.has-subbanner { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
body.has-subbanner .cl-app { height: auto; flex: 1; min-height: 0; }
.cl-subbanner { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; padding: 9px 14px; background: #b45309; color: #fff; font-size: 13px; line-height: 1.5; text-align: center; }
.cl-subbanner a { color: #fff; font-weight: 600; }
.cl-subbanner button { background: rgba(255,255,255,.22); border: 0; color: #fff; border-radius: 7px; padding: 3px 10px; cursor: pointer; font: inherit; }
.cl-subwall { position: fixed; inset: 0; z-index: 1100; background: rgba(8,10,18,.92); display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.cl-subwall-card { width: 100%; max-width: 460px; background: var(--bg-secondary, #fff); color: var(--text-primary, #111); border: 1px solid var(--border-primary, #ddd); border-radius: 16px; padding: 28px 24px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.cl-subwall-card .lock { width: 46px; height: 46px; color: var(--cl-brand); margin: 0 auto 10px; display: block; }
.cl-subwall-card h2 { margin: 0 0 8px; font-size: 20px; }
.cl-subwall-card p { margin: 0 0 18px; font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.cl-subwall-contact { background: var(--bg-tertiary); border-radius: 12px; padding: 14px 16px; text-align: start; line-height: 1.9; font-size: 14.5px; }
.cl-subwall-contact a { color: var(--cl-brand); font-weight: 600; text-decoration: none; }
.cl-subwall-card .cl-btn { width: 100%; justify-content: center; margin-top: 10px; }

/* ─── Responsive ────────────────────────────────────── */
@media (max-width: 1180px) { .cl-pos { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (max-width: 900px) {
  .cl-app { grid-template-columns: 1fr; }
  .cl-menu-btn { display: inline-flex; }
  .cl-sidebar { position: fixed; top: 56px; bottom: 0; inset-inline-start: 0; width: 250px; z-index: 800; transform: translateX(-105%); transition: transform .18s; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
  [dir="rtl"] .cl-sidebar { transform: translateX(105%); }
  .cl-app.nav-open .cl-sidebar { transform: none; }
  .cl-main { padding: 14px 12px 60px; }
  .cl-pos { grid-template-columns: 1fr; height: auto; }
  .cl-pos-grid { max-height: 52vh; }
  .cl-cart { max-height: none; }
  .cl-cart-lines { max-height: 40vh; }
  .cl-user { display: none; }
}
@media (max-width: 520px) {
  /* On a phone "New sale" keeps its icon only, so the shop's name has room in the top bar. */
  #clNewSaleBtn span { display: none; }
  #clNewSaleBtn { padding: 7px 10px; }
  .cl-pos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-stat-value { font-size: 19px; }
  .cl-modal-back { padding: 0; align-items: flex-end; }
  .cl-modal { max-height: 94vh; border-radius: 16px 16px 0 0; }
  .cl-toolbar .cl-input, .cl-toolbar .cl-select { min-width: 0; flex: 1 1 140px; }
  .cl-topbar .cl-lang { max-width: 82px; }
}
@media print { .cl-sidebar, .cl-topbar, .cl-toolbar, .cl-head-actions { display: none !important; } .cl-app { display: block; } }

/* ═══ Online shop screen ═══════════════════════════════════════ */
.ws-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0 0 14px; }
.ws-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--cl-border, rgba(0,0,0,.12)); border-radius: 10px; background: var(--cl-card, #fff); }
.ws-stat b { font-size: 22px; line-height: 1.1; }
.ws-stat span { font-size: 12.5px; opacity: .75; }
.ws-stat.ok b { color: #1a7f4b; } .ws-stat.warn b { color: #b7791f; } .ws-stat.bad b { color: #c0392b; } .ws-stat.info b { color: #1b75a8; }
.ws-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; background: #eee; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.ws-thumb-empty { color: #999; border: 1px dashed rgba(0,0,0,.2); background: transparent; }
.ws-thumb.big { width: 120px; height: 120px; border-radius: 8px; }
.ws-cell-thumb { width: 52px; }
.ws-form .cl-section-title { margin-top: 14px; }
.ws-form .cl-section-title:first-child { margin-top: 0; }
.ws-photos { display: flex; flex-wrap: wrap; gap: 10px; }
.ws-photo { position: relative; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.ws-photo.main .ws-thumb { outline: 2px solid #1b75a8; }
.ws-photo-tools { display: flex; gap: 4px; }
.ws-main-tag { position: absolute; top: 6px; inset-inline-start: 6px; background: #1b75a8; color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 4px; }
.ws-photo-add { width: 120px; height: 120px; border: 1px dashed rgba(0,0,0,.3); border-radius: 8px; background: transparent; cursor: pointer; color: inherit; font: inherit; font-size: 12.5px; justify-content: center; }
.ws-photo-add:hover { border-color: #1b75a8; color: #1b75a8; }
.ws-one-photo { display: flex; align-items: center; gap: 12px; }
.ws-flags { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.ws-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 12px; max-height: 220px; overflow: auto; padding: 4px 0; }
.ws-rel { padding: 4px 2px; }
.ws-variants { display: flex; flex-wrap: wrap; gap: 6px; }
[data-theme="dark"] .ws-thumb { background: #2a2a2a; }
[data-theme="dark"] .ws-thumb-empty, [data-theme="dark"] .ws-photo-add { border-color: rgba(255,255,255,.25); }