:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #0f172a;
  --text-2: #334155;
  --muted: #64748b;
  --primary: #3451d1;
  --primary-dark: #2a41ad;
  --primary-soft: #eef2ff;
  --primary-border: #c7d2fe;
  /* (These and the --side-* colors are replaced by the brand palette — Settings → Brand — when one is saved.) */
  --chart-2: #94a3b8;
  --chart-alert: #f87171;
  --green: #15803d;
  --green-soft: #ecfdf3;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --amber: #b45309;
  --amber-soft: #fffbeb;
  --side-bg: #0f172a;
  --side-text: #cbd5e1;
  --side-muted: #64748b;
  --side-hover: rgba(255, 255, 255, .05);
  --side-active: rgba(255, 255, 255, .09);
  --side-accent: #7b93ff;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05);
  --header-h: 56px;
  --sidebar-w: 248px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html[dir="rtl"] { --font: 'IBM Plex Sans Arabic', 'Inter', system-ui, 'Segoe UI', Tahoma, sans-serif; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 13.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primary); }
h1, h2, h3 { margin: 0; line-height: 1.3; }
h1 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 15px; font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
[hidden] { display: none !important; }
.ico { width: 17px; height: 17px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"] .flip { transform: scaleX(-1); }

/* ---------- Buttons & inputs ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); background: var(--surface);
  padding: 7px 14px; border-radius: var(--radius); cursor: pointer; font-weight: 500; white-space: nowrap; color: var(--text-2); text-decoration: none; }
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-danger { color: var(--danger); }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-sm .ico { width: 14px; height: 14px; }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius); border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field label, .label { font-weight: 500; font-size: 12.5px; color: var(--text-2); }
.input, select.input { width: 100%; padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.input:focus { outline: 3px solid var(--primary-soft); border-color: var(--primary); }
/* A box with a fixed part in front (a purchase order's Reference Number: the supplier's code). */
.ref-box { display: flex; align-items: stretch; }
.ref-box .input { flex: 1; min-width: 0; }
.ref-box .ref-prefix { display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--border-strong); border-inline-end: 0;
  border-radius: var(--radius) 0 0 var(--radius); background: var(--surface-2); color: var(--muted); font-family: ui-monospace, monospace; white-space: nowrap; }
.ref-box .ref-prefix:not([hidden]) + .input { border-radius: 0 var(--radius) var(--radius) 0; }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: 15px; height: 15px; accent-color: var(--primary); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.error-box { background: var(--danger-soft); color: var(--danger); border: 1px solid #fecaca; padding: 9px 12px; border-radius: var(--radius); margin-bottom: 14px; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark { width: 30px; height: 30px; border-radius: 6px; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; letter-spacing: .02em; }
.logo-text { font-weight: 600; font-size: 15px; color: var(--text); white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.logo-text small { font-weight: 500; font-size: 11px; color: var(--muted); margin-inline-start: 6px; letter-spacing: .08em; }
.logo.inverse .logo-text { color: #fff; }
.logo.inverse .logo-text small { color: var(--side-muted); }
.logo-link { text-decoration: none; }
/* Inventory Report */
.ir-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 4px 0 16px; }
.ir-field { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; min-width: 0; }
.ir-field .input { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13.5px; min-width: 150px; }
.ir-grow { flex: 1 1 220px; }
.value.ir-dead { color: var(--danger); } .value.ir-slow { color: var(--amber); }
.ir-table { min-width: 1080px; }
.ir-table td.num, .ir-table th.num, .ir-variants td.num, .ir-variants th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ir-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; font-weight: inherit; cursor: pointer; }
.ir-caret { display: inline-block; width: 14px; color: var(--muted); }
.ir-buy { color: var(--primary); font-weight: 600; }
.ir-detail > td { background: var(--surface-2); padding: 10px 16px 14px; }
.ir-variants { border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.ir-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; }
.ir-how { max-width: 90ch; }
.ir-tabtext { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px 0; }
.ir-tabtext p { margin: 0; flex: 1 1 400px; }
/* My Account: Change username | Change passcode — two equal halves of the row, the same height, buttons lined up at
   the bottom (one under the other on narrow screens). */
.account-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.account-cards > .card { display: flex; flex-direction: column; }
.account-cards > .card > form { flex: 1; display: flex; flex-direction: column; }
.account-cards > .card > form > button:last-child { margin-top: auto; align-self: flex-start; }
@media (max-width: 760px) { .account-cards { grid-template-columns: 1fr; } }
/* Settings → Brand */
.brand-logo-box { display: flex; align-items: center; justify-content: center; min-height: 110px; padding: 16px; border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--surface-2); margin-bottom: 8px; }
.brand-logo-box img { max-height: 90px; max-width: 100%; object-fit: contain; }
.brand-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.brand-preset { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.brand-preset:hover { border-color: var(--primary); }
.brand-preset-logo { border-color: var(--primary-border); background: var(--primary-soft); font-weight: 500; }
.brand-preset-logo img { height: 18px; max-width: 60px; object-fit: contain; }
.brand-dots { display: inline-flex; }
.brand-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; margin-inline-start: -4px; box-shadow: 0 0 0 1px var(--border); }
.brand-dots i:first-child { margin-inline-start: 0; }
.brand-pick { display: flex; align-items: center; gap: 8px; }
.brand-color { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: #fff; cursor: pointer; flex: none; }
.brand-hex { width: 110px; text-transform: lowercase; }
.brand-warn { color: var(--amber); margin-top: 4px; }
/* Brand palette with a light sidebar color (html.side-light): dark text and lines there instead of white. */
html.side-light .nav-link:hover, html.side-light .nav-link.active, html.side-light .rail-toggle:hover .ico, html.side-light .menu-toggle:hover { color: var(--text); }
html.side-light .header .logo-area, html.side-light .rail-toggle { border-color: rgba(0, 0, 0, .07) !important; }
html.side-light .nav-footer, html.side-light .rail .nav-group + .nav-group { border-color: rgba(0, 0, 0, .08); }
html.side-light .logo.inverse .logo-text, html.side-light .auth-copy h1 { color: var(--text); }
html.side-light .logo-brand.inverse { background: transparent; padding: 0; }
/* The brand logo in place of the KW mark; over dark areas (sidebar header, side panels) on a white rounded panel. */
.logo-brand img { display: block; height: 34px; max-width: 170px; object-fit: contain; }
.logo-brand.inverse { background: #fff; border-radius: 8px; padding: 3px 8px; }
.logo-brand.inverse img { height: 30px; max-width: 150px; }
.rail .header .logo-brand img { max-width: 34px; }
.kiosk-top .logo-brand img { height: 34px; max-width: 170px; }

/* ---------- Sign-in: split screen ---------- */
.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 44%) 1fr; background: var(--surface); }
.auth-side { background: var(--side-bg); color: var(--side-text); padding: 40px 48px; display: flex; flex-direction: column; gap: 40px;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 32px 32px; }
.auth-copy { margin-top: auto; max-width: 420px; }
.auth-copy h1 { color: #fff; font-size: 28px; font-weight: 600; margin-bottom: 12px; }
.auth-copy p { color: var(--side-text); margin: 0 0 24px; font-size: 14px; }
.auth-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.auth-points li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.auth-points .ico { color: var(--side-accent); }
.auth-foot { margin-top: auto; color: var(--side-muted); font-size: 12px; }
.auth-main { position: relative; display: flex; align-items: center; justify-content: center; padding: 80px 24px; }
.lang-switch { position: absolute; top: 24px; inset-inline-end: 24px; display: flex; gap: 8px; }
.login-card { width: 100%; max-width: 360px; }
.login-card > .logo { display: none; margin-bottom: 28px; }
.login-card h2 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }
.login-card > .muted { margin: 0 0 24px; }
.login-card .btn-primary { width: 100%; justify-content: center; padding: 10px; margin-top: 4px; }
/* Sign in — shop kiosk: top bar (logo, clock, language); user tiles left; password + number pad right. */
.kiosk { min-height: 100vh; display: flex; flex-direction: column; background: #f1f3f8; }
/* The sign-in page's top bar: the same height and logo size as the Dashboard's header. */
.kiosk-top { display: flex; align-items: center; gap: 14px; height: var(--header-h); box-sizing: border-box; padding: 0 24px; background: #fff; border-bottom: 1px solid var(--border); }
.kiosk-top .grow { flex: 1; }
.kiosk-top .pos-clock { font-size: 14px; }
.kiosk-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 420px); gap: 24px; padding: 32px; max-width: 1280px; width: 100%; margin: 0 auto; align-items: start; }
.kiosk-left h1 { font-size: 26px; font-weight: 600; margin: 0 0 4px; }
.kiosk-left > .muted { margin: 0 0 18px; }
.kiosk-left > input[type=search] { max-width: 320px; margin-bottom: 12px; }
.kiosk-users { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.kiosk-users > .input { max-width: 320px; }
.kiosk-user { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px 14px; border: 1px solid var(--border); border-radius: 14px; background: #fff; cursor: pointer; font: inherit; color: var(--text); text-align: center; }
.kiosk-user:hover { border-color: var(--primary); }
.kiosk-user.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 2px var(--primary) inset; }
.kiosk-user .avatar { width: 56px; height: 56px; font-size: 18px; }
.kiosk-user.on .avatar { background: var(--primary); color: #fff; }
.kiosk-user b { font-weight: 600; font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kiosk-right { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 24px; }
.kiosk-who { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 16px; }
.kiosk-who .avatar { width: 40px; height: 40px; background: var(--primary); color: #fff; }
.kiosk-pw-wrap { position: relative; }
.kiosk-pw { height: 52px; font-size: 22px; letter-spacing: .15em; padding-inline-end: 48px; }
.kiosk-eye { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); }
.kiosk-caps { margin-top: -6px; color: #b45309; }
.kiosk-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; direction: ltr; } /* (1 2 3 in both languages) */
.kiosk-key { height: 60px; border: 1px solid var(--border); border-radius: 12px; background: #fff; font: inherit; font-size: 24px; font-weight: 500; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.kiosk-key:hover { background: var(--surface-2); }
.kiosk-key:active { transform: scale(.97); }
.kiosk-key .ico { width: 24px; height: 24px; }
.kiosk-key-muted { color: var(--muted); }
.kiosk-key-go { background: var(--primary); border-color: var(--primary); color: #fff; }
.kiosk-key-go:hover { background: var(--primary); filter: brightness(1.08); }
.kiosk-sign { width: 100%; justify-content: center; padding: 12px; font-size: 15px; }
@media (max-width: 760px) { .kiosk-main { grid-template-columns: 1fr; padding: 16px; } .kiosk-right { position: static; } }

/* ---------- App shell ---------- */
.shell { min-height: 100%; }
.header { position: sticky; top: 0; z-index: 30; height: var(--header-h); background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px; padding-inline-end: 16px; }
.header .logo-area { width: var(--sidebar-w); height: 100%; background: var(--side-bg); display: flex; align-items: center; gap: 8px; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.06); }
.header-context { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; padding-inline-start: 8px; }
.header-context .ico { width: 15px; height: 15px; }
.header-spacer { flex: 1; }
.header-actions { display: flex; align-items: center; gap: 4px; }
.user-menu { position: relative; }
.user-btn { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border: 0; background: transparent; cursor: pointer; border-radius: var(--radius); color: var(--muted); }
.user-btn:hover { background: var(--surface-2); }
.user-btn .who { text-align: end; line-height: 1.25; }
.user-btn .who b { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.user-btn .who span { font-size: 11.5px; color: var(--muted); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #e2e8f0; color: var(--text-2); display: grid; place-items: center; font-weight: 600; font-size: 12px; flex-shrink: 0; }
.avatar.soft { background: #e2e8f0; color: var(--text-2); }
.dropdown { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; min-width: 200px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(15,23,42,.1); padding: 4px; z-index: 60; }
.dropdown a, .dropdown button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 4px; cursor: pointer; text-decoration: none; color: var(--text-2); font-size: 13px; }
.dropdown a:hover, .dropdown button:hover { background: var(--surface-2); color: var(--text); }

.body { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: calc(100vh - var(--header-h)); }
.sidebar { background: var(--side-bg); position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; overflow: hidden; }
.nav-scroll { flex: 1; overflow-y: auto; padding: 8px 10px 16px; }
.nav-section { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: none; cursor: pointer; text-align: start;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--side-muted); padding: 16px 10px 6px; font-weight: 600; border-radius: 4px; }
.nav-section:hover { color: var(--side-text); }
.nav-caret { width: 14px; height: 14px; transition: transform .15s; }
.nav-group.collapsed .nav-caret { transform: rotate(-90deg); }
html[dir="rtl"] .nav-group.collapsed .nav-caret { transform: rotate(90deg); }
.nav-group.collapsed .nav-items { display: none; }
.nav-footer { border-top: 1px solid rgba(255,255,255,.08); padding: 0 10px 6px; max-height: 50%; overflow-y: auto; }
.nav-footer:empty { display: none; }
.nav-footer { padding-top: 8px; }
.nav-scroll { padding-top: 12px; }
.rail-toggle { width: auto; border: 0; border-top: 1px solid rgba(255,255,255,.06) !important; border-radius: 0; background: none; cursor: pointer; margin: 0;
  padding: 12px 20px; color: var(--side-muted); font: inherit; font-size: 12.5px; text-align: start; }
.rail-toggle .ico { color: var(--side-muted); }
.rail-toggle:hover .ico { color: #fff; }

/* Icon-only sidebar ("rail"), desktop only. */
@media (min-width: 901px) {
  .shell.rail { --sidebar-w: 64px; }
  .rail .logo-text { display: none; }
  .rail .header .logo-area { padding: 0 17px; }
  .rail .nav-scroll { padding: 8px 8px 16px; }
  .rail .nav-footer { padding: 8px 8px; }
  .rail .nav-section { display: none; }
  .rail .nav-group.collapsed .nav-items { display: block; }
  .rail .nav-link { justify-content: center; padding: 9px 0; }
  .rail .nav-link .grow, .rail .nav-link .pill { display: none; }
  .rail .rail-toggle { padding: 12px 0; justify-content: center; }
  .rail .rail-ico { transform: rotate(180deg); }
  html[dir="rtl"] .rail .rail-ico { transform: none; }
}
.nav-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 4px; color: var(--side-text); text-decoration: none; font-size: 13px; margin-bottom: 1px; border-inline-start: 2px solid transparent; }
.nav-link .grow { flex: 1; }
.nav-link .ico { color: var(--side-muted); }
.nav-link:hover { background: var(--side-hover); color: #fff; }
.nav-link.active { background: var(--side-active); color: #fff; border-inline-start-color: var(--side-accent); font-weight: 500; }
.nav-link.active .ico { color: var(--side-accent); }
.nav-link.disabled { color: #475569; pointer-events: none; }
.nav-link.disabled .ico { color: #334155; }
.nav-link.disabled .pill { background: rgba(255,255,255,.04); color: #64748b; border-color: rgba(255,255,255,.07); font-size: 10.5px; }
.main { padding: 20px 24px 32px; min-width: 0; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head .meta { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
/* E-Commerce: full screen like the POS (no sidebar) — a top bar (back, title + last sync, the buttons on one row that
   scrolls sideways if the screen is too narrow), the page below it. */
.orders-bare > div { padding: 0 20px 24px; }
.orders-bare > div > .back-link:first-child { margin-top: 18px; }
.orders-head { flex-wrap: nowrap; margin: 0 -20px 16px; }
.orders-head h1 { margin: 0; font-size: 18px; white-space: nowrap; }
.orders-head > div:nth-child(2) { flex: none; }
.orders-head .orders-head-actions { margin-inline-start: auto; }
.bar-user { flex: none; display: flex; align-items: center; gap: 4px; padding-inline-start: 8px; border-inline-start: 1px solid var(--border); }
/* Full-screen pages' top bars (E-Commerce, POS, bulk editor): language switch + user menu — just the avatar, to leave room for the buttons (the name / role are its tooltip and head its menu). */
.bar-user .user-btn { color: var(--text); gap: 4px; padding-inline: 4px; }
.bar-user .user-btn .who { display: none; }
.bar-user .dropdown { z-index: 70; }
.dropdown-who { display: none; }
.bar-user .dropdown-who { display: flex; flex-direction: column; padding: 8px 12px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.orders-head .orders-head-actions { flex-wrap: nowrap; overflow-x: auto; gap: 6px; min-width: 0; scrollbar-width: none; }
/* (No scroll bar under the header's buttons — still scrolls sideways with the wheel / touch when they don't fit.) */
.orders-head .orders-head-actions::-webkit-scrollbar { display: none; }
/* Compact like the POS header, so they fit on one row. */
.orders-head-actions .btn { white-space: nowrap; flex: none; padding-inline: 10px; font-size: 13px; gap: 5px; }
.orders-head-actions .btn svg { width: 15px; height: 15px; }
.orders-more-menu { position: fixed; top: 0; inset-inline-end: auto; }
/* Send / Receive Transfer shown inside the E-Commerce page (under its tabs). */
.orders-transfer { padding: 16px; }
.orders-transfer > .page-head:first-child { margin-top: 0; }
.orders-transfer > .empty, .orders-transfer > .table-wrap { margin: -16px; }
.page-head .meta .ico { width: 15px; height: 15px; }
.menu-toggle { display: none; color: var(--side-text); }
.menu-toggle:hover { background: var(--side-hover); color: #fff; }

.pill { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 4px; background: #f1f5f9; color: var(--text-2); font-weight: 500; white-space: nowrap; border: 1px solid var(--border); }
/* An On Hold reason in the orders list: wraps, 2 lines at most (all of it on hover) — the Status column keeps its width. */
.pill.hold-reason-pill { white-space: normal; min-width: 120px; max-width: 140px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.35; overflow-wrap: anywhere; }
.pill.green { background: var(--green-soft); color: var(--green); border-color: #bbf7d0; }
.pill.red { background: var(--danger-soft); color: var(--danger); border-color: #fecaca; }
.pill.blue { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-border); }
.pill.yellow { background: var(--amber-soft); color: var(--amber); border-color: #fde68a; }
.pill.purple { background: #f3e8ff; color: #7e22ce; border-color: #e9d5ff; }
.pill.orange { background: #f1f5f9; color: var(--text-2); }
.pill.teal { background: #f0fdfa; color: #0f766e; border-color: #99f6e4; }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 16px 18px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.card-title { color: var(--text); font-size: 13.5px; font-weight: 600; }
.card-link { color: var(--primary); font-size: 12px; font-weight: 500; text-decoration: none; }
.card-link:hover { text-decoration: underline; }
.card-body { padding: 14px 18px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11.5px; background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
.card-foot span { display: inline-flex; align-items: center; gap: 5px; }
.card-foot .ico { width: 12px; height: 12px; }

/* KPI cards: label on top, figure below, no divider. */
.kpi .card-head { border-bottom: 0; padding-bottom: 0; }
.kpi .card-title { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.kpi .card-body { padding-top: 6px; }
.kpi .value { font-size: 26px; font-weight: 600; color: var(--text); line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .value small { font-size: 13px; font-weight: 400; margin-inline-start: 6px; color: var(--muted); letter-spacing: 0; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 16px; text-align: start; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; background: var(--surface-2); }
tbody tr:hover { background: #f8fafc; }
tr:last-child td { border-bottom: none; }
td .sub { color: var(--muted); font-size: 12px; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.toolbar { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.toolbar .input { max-width: 280px; }
.toolbar select.input { width: auto; max-width: 190px; }
.pager { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--border); }
.me { display: flex; align-items: center; gap: 10px; }

/* ---------- Dashboard ---------- */
.dash { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.span-2 { grid-column: span 2; }
.span-4 { grid-column: 1 / -1; }
.trend { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; margin-top: 4px; }
.trend .ico { width: 13px; height: 13px; }
.trend.up { color: var(--green); }
.trend.down { color: var(--danger); }
.trend.flat { color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.chart svg { display: block; width: 100%; height: auto; }
.chart text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut-wrap svg { width: 140px; height: 140px; flex-shrink: 0; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.list-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.list-row:last-child { border-bottom: 0; }
.list-row b { font-weight: 500; font-size: 13px; }
.list-row .sub { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.list-row .end { text-align: end; }
.roadmap ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.roadmap li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 4px 16px 4px 0; position: relative; }
.roadmap li .grow { font-size: 12.5px; color: var(--text-2); }
.phase-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 12px; background: var(--surface); color: var(--muted); flex-shrink: 0; border: 1px solid var(--border-strong); }
.phase-num.done { background: var(--primary); color: #fff; border-color: var(--primary); }
.empty { color: var(--muted); font-size: 13px; padding: 18px 0; text-align: center; }

/* ---------- Catalog (Phase 2) ---------- */
.span-3 { grid-column: span 3; }
.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.num { text-align: end; }
.mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12.5px; }
.col-check { width: 36px; padding-inline-end: 0; }
.col-check input { width: 15px; height: 15px; accent-color: var(--primary); }
tr.clickable { cursor: pointer; }
tr.row-muted td { color: var(--muted); background: var(--surface-2); }
.thumb { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; border: 1px solid var(--border); background: var(--surface-2); flex-shrink: 0; }
.empty-thumb { display: grid; place-items: center; color: #94a3b8; }
.bulk-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--primary-soft); border-bottom: 1px solid var(--primary-border); flex-wrap: wrap; }
.empty-state { text-align: center; padding: 48px 16px; }
.empty-state > .ico { width: 32px; height: 32px; color: #94a3b8; margin-bottom: 8px; }
.empty-state h2 { margin-bottom: 6px; }
.empty-state p { margin: 0 0 16px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-size: 12.5px; margin-bottom: 12px; }
.back-link:hover { color: var(--text); }
.back-link .ico { width: 15px; height: 15px; }
.product-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.product-head .grow { flex: 1; min-width: 200px; }
.product-img { width: 88px; height: 88px; border-radius: var(--radius); object-fit: cover; border: 1px solid var(--border); background: #fff; }
.product-img .ico { width: 28px; height: 28px; }
.pill-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.detail-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; }
.info-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.info-row:last-child { border-bottom: 0; }
.info-row > span:last-child { text-align: end; word-break: break-word; }
.input-sm { padding: 5px 8px; max-width: 120px; }
textarea.input { resize: vertical; }
.strike { text-decoration: line-through; }
.ok-box { background: var(--green-soft); color: var(--green); border: 1px solid #bbf7d0; padding: 9px 12px; border-radius: var(--radius); margin-bottom: 14px; }
.sync-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.sync-summary div { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.sync-summary b { font-weight: 600; font-size: 13px; }
tr.error-row td { background: var(--danger-soft); color: var(--danger); font-size: 12.5px; padding-top: 6px; padding-bottom: 6px; }
.steps { margin: 0; padding-inline-start: 18px; display: grid; gap: 8px; font-size: 13px; color: var(--text-2); }

/* ---------- Stock & documents (Phase 3) ---------- */
.neg { color: var(--danger); }
.pos { color: var(--green); }
td.muted { color: #94a3b8; }
.form-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px; }
.tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding: 11px 12px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: 13px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
/* Rounded pill switch used for tabs inside forms (e.g. supplier: Company Profile / Payment Details). */
.modal-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 18px; background: #f1f5f9; border: 1px solid var(--border);
  border-radius: 999px; overflow: visible; }
.modal-tabs .tab { border: 0; margin: 0; padding: 7px 18px; border-radius: 999px; background: transparent; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 500; color: var(--muted); transition: background .15s, color .15s, box-shadow .15s; }
.modal-tabs .tab:hover { color: var(--text); }
.modal-tabs .tab.active { background: #fff; color: var(--primary); box-shadow: 0 1px 3px rgba(15,23,42,.12); border: 0; }
.pay-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 14px; margin-bottom: 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.pay-summary div { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.pay-summary strong { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.icon-link { display: inline-flex; vertical-align: middle; color: var(--muted); }
.icon-link:hover { color: var(--primary); }
.icon-link .ico { width: 14px; height: 14px; }
.form-section { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 4px 0 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.picker { position: relative; flex: 1; max-width: 520px; }
.picker .input { max-width: none; }
.picker-list { position: absolute; top: calc(100% + 4px); inset-inline: 0; z-index: 50; background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(15,23,42,.14); max-height: 380px; overflow-y: auto; }
.picker-group + .picker-group { border-top: 1px solid var(--border); }
.picker-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-2); }
.picker-head .thumb { width: 28px; height: 28px; }
.picker-head .grow { flex: 1; }
.picker-item { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; padding: 7px 12px 7px 50px; cursor: pointer; text-align: start; font-size: 13px; }
html[dir="rtl"] .picker-item { padding: 7px 50px 7px 12px; }
.picker-item:hover { background: var(--primary-soft); }
.picker-item .grow { flex: 1; }
.picker-empty { padding: 14px; color: var(--muted); font-size: 13px; }
.receive-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--amber-soft); border-bottom: 1px solid #fde68a; flex-wrap: wrap; }
.receive-bar .input { max-width: 300px; flex: 1; }
.doc-summary { grid-template-columns: repeat(3, 1fr); }
.doc-notes { padding: 10px 18px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-2); white-space: pre-wrap; }

/* Printing a purchase order or transfer: just the document. */
@media print {
  .header, .sidebar, .no-print, .toast, .modal-backdrop, .receive-bar { display: none !important; }
  .body { display: block; }
  .main { padding: 0; }
  body { background: #fff; font-size: 12px; }
  .card { box-shadow: none; border-color: #cbd5e1; }
  .table-wrap { overflow: visible; }
}

/* ---------- Create product ---------- */
.stack { display: grid; gap: 16px; align-content: start; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.photo, .photo-add { position: relative; aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--border); overflow: hidden; background: var(--surface-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo.uploading img { opacity: .45; }
.photo.failed { border-color: #fecaca; }
.photo.failed img { opacity: .3; }
.photo-state { position: absolute; inset: auto 0 0 0; padding: 4px 6px; font-size: 11px; text-align: center; background: rgba(255,255,255,.85); color: var(--text-2); }
.photo.failed .photo-state { color: var(--danger); }
.photo-remove { position: absolute; top: 4px; inset-inline-end: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(15,23,42,.65); color: #fff; cursor: pointer; font-size: 11px; line-height: 22px; padding: 0; }
.photo-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-style: dashed; color: var(--muted); cursor: pointer; font: inherit; font-size: 12px; }
.photo-add:hover { border-color: var(--primary); color: var(--primary); }
.bulk-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border); }
.bulk-row .grow { flex: 1; }
.status-select { width: auto; padding: 3px 8px; font-size: 12.5px; }

/* ---------- AI translation suggestions ---------- */
.field-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ai-btn { border: 0; background: none; color: var(--primary); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; padding: 0; white-space: nowrap; }
.ai-btn:hover { text-decoration: underline; }
.ai-btn:disabled { opacity: .5; cursor: default; text-decoration: none; }

/* ---------- Add product (Shopify-style layout) ---------- */
/* Uses the full-screen page's width like an online order (no empty strip on the right); the title row (Save, Discard…)
   is as wide as the boxes, so its buttons line up with them. */
.product-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px; align-items: start; max-width: 1600px; }
.shopify-head { max-width: 1600px; }
/* Online order page: uses the page's width (no empty strip on the right of wide screens); the title row (status + step
   buttons) is as wide as the boxes, so the buttons line up with them */
.order-layout, .order-head { max-width: 1600px; }
/* (Every box's header as tall as one with a button (Edit, Print AWB) — so the boxes side by side line up, with or without.) */
.order-layout .card-head { min-height: 57px; box-sizing: border-box; }
.shopify-head h1 { font-size: 19px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.input.readonly { background: var(--surface-2); color: var(--text-2); min-height: 37px; }
.rte { border: 1px solid var(--border-strong); border-radius: var(--radius); background: #fff; overflow: hidden; }
.rte:focus-within { outline: 3px solid var(--primary-soft); border-color: var(--primary); }
.rte-bar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.rte-btn { width: 30px; height: 28px; border: 0; background: none; border-radius: 4px; cursor: pointer; font: inherit; font-size: 14px; color: var(--text-2); }
.rte-btn:hover { background: #e2e8f0; }
.rte-sep { width: 1px; height: 18px; background: var(--border-strong); margin: 0 4px; }
.rte-body { min-height: 160px; padding: 10px 12px; outline: none; font-size: 14px; line-height: 1.6; }
.rte-body:empty::before { content: attr(data-placeholder); color: var(--muted); }
.rte-body p { margin: 0 0 8px; }
.rte-body ul, .rte-body ol { margin: 0 0 8px; padding-inline-start: 22px; }
.media-drop { border: 1.5px dashed var(--border-strong); border-radius: 10px; padding: 30px 16px; text-align: center; display: grid; gap: 8px; background: var(--surface-2); }
.card.dragging .media-drop, .card.dragging .media-grid { border-color: var(--primary); background: var(--primary-soft); }
/* Small tiles (about 110 px; the main picture two by two), as many per row as fit. */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 110px)); gap: 10px; border-radius: 10px; }
.media-grid > :first-child { grid-column: span 2; grid-row: span 2; }
.media-add { aspect-ratio: 1; border: 1.5px dashed var(--border-strong); border-radius: 10px; background: #fff; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.media-add:hover { border-color: var(--primary); color: var(--primary); }
/* Variants, Shopify-style */
.opt-list.has-options { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.opt-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 14px; padding-inline-start: 10px; border-bottom: 1px solid var(--border); }
.opt-list > .opt-row:last-child { border-bottom: 0; }
.opt-row.clickable { cursor: pointer; }
.opt-row.clickable:hover { background: var(--surface-2); }
.opt-row.drop-target, .opt-value.drop-target { box-shadow: inset 0 2px 0 var(--primary); }
.opt-row.dragging, .opt-value.dragging { opacity: .4; }
.opt-body { min-width: 0; }
.opt-name { font-weight: 600; margin-bottom: 8px; }
.opt-label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 5px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: #e3e5e8; color: var(--text); border-radius: 8px; padding: 2px 9px; font-size: 12.5px; line-height: 20px; }
.grip { display: inline-grid; place-items: center; width: 20px; height: 34px; color: #8a8f98; cursor: grab; }
.opt-row:not(.editing) > .grip { height: 22px; }
.grip:active { cursor: grabbing; }
.grip .ico { width: 16px; height: 16px; stroke-width: 3; }
.grip-space { width: 20px; flex: none; }
.opt-values { display: grid; gap: 8px; margin-inline-start: -30px; }
.opt-value { display: grid; grid-template-columns: 20px minmax(0, 1fr) 34px; gap: 10px; align-items: center; }
.opt-value .field-error { grid-column: 2; }
.opt-trash .ico { width: 16px; height: 16px; }
.opt-trash:hover { color: var(--danger); }
.opt-presets { display: flex; gap: 14px; margin-top: 8px; }
.opt-actions { display: flex; justify-content: space-between; margin-top: 16px; }
.opt-add-row { padding: 4px 14px; }
.opt-add-row .add-option { margin-top: 0; padding: 8px 0; }
.input.invalid { border-color: var(--danger); background: #fff8f8; }
.field-error { color: var(--danger); font-size: 12.5px; }
.link-btn { border: 0; background: none; padding: 0; color: var(--primary); font: inherit; font-size: 13px; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.vname .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vbulk .btn-ghost { margin-inline-start: auto; }
.vlist-wrap { margin: 12px -18px -14px; border-top: 1px solid var(--border); }
.group-select { width: auto; min-width: 120px; }
.vbulk { border-bottom: 1px solid var(--border); }
.vbulk .input-sm { width: 110px; max-width: 110px; }
.vrow { display: grid; grid-template-columns: 40px minmax(120px, 1fr) 96px 96px 64px 64px; min-width: 520px; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--border); cursor: pointer; }
.vrow:hover { background: #f9fafb; }
.vrow.vhead { cursor: default; background: #f9fafb; font-size: 12px; font-weight: 600; color: var(--muted); padding-top: 6px; padding-bottom: 6px; }
.vrow.child { background: #fcfcfd; }
/* An open group's variants sit one step in: their picture under the group's
   name (the name column gives up the room, so Cost / Price / Compare stay on their columns). */
.vrow.child { padding-inline-start: 66px; }
.vthumb { width: 36px; height: 36px; border: 1px dashed var(--border-strong); border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.vhead .vthumb { border: 0; height: auto; }
.vthumb .ico { width: 16px; height: 16px; }
.vthumb.clickable { cursor: pointer; }
.vthumb.clickable:hover { border-color: var(--primary); color: var(--primary); }
.vthumb.has-img { border: 1px solid var(--border); overflow: hidden; }
.vthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.variant-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.variant-head .vthumb { width: 56px; height: 56px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.pick-tile { position: relative; aspect-ratio: 1; padding: 0; border: 2px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface-2); cursor: pointer; }
.pick-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick-tile:hover { border-color: var(--border-strong); }
.pick-tile.selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.pick-tile.failed { opacity: .4; cursor: not-allowed; }
.pick-check { position: absolute; top: 6px; inset-inline-end: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; }
.pick-check .ico { width: 14px; height: 14px; stroke-width: 2.5; }
.pick-add { border-style: dashed; color: var(--muted); display: grid; place-content: center; justify-items: center; gap: 4px; font: inherit; font-size: 12px; }
.pick-add:hover { color: var(--primary); border-color: var(--primary); }
.link-btn.danger { color: var(--danger); }
.vname { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vname .pill { align-self: flex-start; }
.vlink { color: var(--text); font-weight: 500; }
.vrow.child:hover .vlink { color: var(--primary); text-decoration: underline; }
.vtoggle { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); }
.vtoggle .ico { width: 14px; height: 14px; transition: transform .15s; }
.vtoggle .ico.up { transform: rotate(180deg); }
.vprice .input { width: 100%; max-width: none; }
.vtotal { padding: 12px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.vtotal:empty { display: none; }
@media (max-width: 640px) { .vrow { grid-template-columns: minmax(0, 1fr) 76px 76px 44px 44px; } .vthumb { display: none; } }
.add-option { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; border: 0; background: none; color: var(--primary); font: inherit; font-weight: 500; cursor: pointer; padding: 4px 0; }
.add-option:hover { text-decoration: underline; }
.seo-preview { display: grid; gap: 2px; }
.seo-title { color: #1a0dab; font-size: 17px; line-height: 1.3; }
.seo-url { color: #006621; font-size: 12.5px; word-break: break-all; }
.seo-desc { color: var(--text-2); font-size: 13px; }

.warn-box { background: var(--amber-soft); color: var(--amber); border: 1px solid #fde68a; padding: 9px 12px; border-radius: var(--radius); margin-top: 8px; font-size: 13px; }
tr.row-new td { background: #f5f8ff; }

/* ---------- Permission matrix ---------- */
.perm-group { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; }
.perm-group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; }
.perm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 14px; }
/* A page's heading inside a tab's permissions (e.g. Purchase & Manufacturing → Requests · Purchase · …). */
.perm-sub { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 6px; }
.perm-sub:first-child { margin-top: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 16px; }
.stat { padding: 14px 18px; }
.stat .label { color: var(--muted); font-size: 12.5px; }
.stat .value { font-size: 16px; font-weight: 600; margin-top: 4px; }

/* ---------- Modal & toast ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; overflow-y: auto; z-index: 70; }
.modal { background: var(--surface); border-radius: 8px; width: 100%; max-width: 560px; box-shadow: 0 20px 50px rgba(15,23,42,.25); }
.modal.wide { max-width: 860px; }
.modal { min-width: 0; }
.modal .sheet-wrap { max-width: 100%; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.modal-head h2 { font-size: 15px; }
.modal-body { padding: 18px 20px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 8px 8px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--text); color: #fff; padding: 9px 16px; border-radius: var(--radius); z-index: 100; box-shadow: 0 8px 24px rgba(15,23,42,.2); }
.toast.error { background: var(--danger); }
.branch-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); }

/* ---------- Tablet & phone ---------- */
@media (max-width: 1200px) {
  .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-3 { grid-column: 1 / -1; }
  .detail-grid { grid-template-columns: 1fr; }
  .roadmap ol { grid-template-columns: 1fr; }
  .roadmap li { flex-direction: row; align-items: center; padding: 6px 0; }
}
@media (max-width: 900px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .login-card > .logo { display: inline-flex; }
  .menu-toggle { display: inline-grid; }
  .rail-toggle { display: none; }
  .header .logo-area { width: auto; }
  .header-context, .user-btn .who { display: none; }
  .body { grid-template-columns: 1fr; }
  .sidebar { position: fixed; top: var(--header-h); inset-inline-start: 0; width: 260px; z-index: 40; transform: translateX(-100%); transition: transform .2s; }
  html[dir="rtl"] .sidebar { transform: translateX(100%); }
  .shell.nav-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(15,23,42,.3); }
  .main { padding: 16px; }
  .grid-2 { grid-template-columns: 1fr; }
  .dash { grid-template-columns: 1fr; }
  .span-2, .span-3 { grid-column: auto; }
  .detail-grid, .product-layout { grid-template-columns: 1fr; }
  .option-fields, .grid-3 { grid-template-columns: 1fr; }
  .sync-summary, .doc-summary, .form-row { grid-template-columns: 1fr 1fr; }
  th, td { padding: 9px 10px; }
  .hide-sm { display: none; }
}

/* ---------- Bulk editor (spreadsheet) ---------- */
.sheet-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.sheet-wrap { overflow: auto; max-height: calc(100vh - 230px); }
.sheet-wrap.in-modal { max-height: 60vh; border: 1px solid var(--border); border-radius: var(--radius); }
table.sheet { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.sheet th, .sheet td { border-bottom: 1px solid var(--border); border-inline-end: 1px solid var(--border); padding: 0; white-space: nowrap; }
.sheet thead th { position: sticky; top: 0; z-index: 3; padding: 8px 10px; text-align: start; }
.sheet thead th.num { text-align: end; }
.sheet .sheet-name { position: sticky; inset-inline-start: 0; z-index: 2; background: var(--surface); padding: 6px 12px; min-width: 200px; max-width: 260px; text-align: start; font-weight: 400; white-space: normal; }
.sheet tbody th { text-transform: none; letter-spacing: normal; font-size: 13px; color: var(--text); }
.sheet tbody .sheet-fill th { color: var(--muted); font-size: 12px; }
.sheet thead .sheet-name { z-index: 4; background: var(--surface-2); }
.sheet .sheet-name .me { gap: 10px; }
.sheet .sheet-name .thumb { width: 32px; height: 32px; }
.sheet-parent .sheet-name { background: var(--surface); }
.sheet-child .sheet-name { padding-inline-start: 28px; color: var(--text-2); background: #fcfcfd; }
.sheet-blank { background: repeating-linear-gradient(135deg, #fafbfc, #fafbfc 6px, #f3f4f6 6px, #f3f4f6 7px); }
.sheet-input { width: 100%; min-width: 120px; height: 36px; border: 0; padding: 0 10px; background: transparent; font: inherit; font-size: 13px; color: var(--text); outline: none; }
select.sheet-input { min-width: 110px; cursor: pointer; }
.sheet td:focus-within { box-shadow: inset 0 0 0 2px var(--primary); background: #fff; }
.sheet td.changed { background: #fff7d6; }
.sheet td.changed:focus-within { background: #fffbe8; }
.sheet-fill th, .sheet-fill td { background: var(--surface-2); }
.sheet-fill .sheet-input::placeholder { color: #9aa1ab; font-style: italic; }
.menu-wrap { position: relative; display: inline-block; }
.sheet-cols { padding: 8px 10px; display: grid; gap: 8px; min-width: 230px; }
.bulk-bar .sep { width: 1px; align-self: stretch; background: var(--primary-border); }
.sku-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bulk-tabs { margin-bottom: 12px; }
.bulk-tabs .tab { position: relative; }
.tab-dot { position: absolute; top: 6px; inset-inline-end: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--amber, #d97706); }
.sheet .sheet-calc { padding: 0 10px; color: var(--text-2); background: var(--surface-2); font-variant-numeric: tabular-nums; }
.bulk-summary { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.bulk-summary > span:first-child { color: var(--text); font-weight: 500; }
.pic-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; max-height: 50vh; overflow: auto; }
.pic-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); }
.pic-row .vthumb { width: 44px; height: 44px; flex: none; }
.pic-row > span:nth-child(2) { flex: 1; font-weight: 500; }
.sheet .sheet-input.num { min-width: 90px; }
.sheet-wrap.in-modal .sheet-name { min-width: 130px; }
.sheet-wrap.in-modal .sheet-calc { min-width: 90px; }
.vgroup-row { display: flex; align-items: center; gap: 8px; }
.vtools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vtools .input-sm { width: 110px; }

/* ---------- Barcode labels ---------- */
.print-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; }
@media (max-width: 720px) { .print-layout { grid-template-columns: 1fr; } }
.label-opts { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
.label-opts .check:not(:first-child) { grid-column: 1; }
.label-preview { padding: 16px; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius); display: grid; place-items: center; overflow: auto; }
.label-preview .label { background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.15); }
.label { box-sizing: border-box; padding: 1.5mm 2mm; display: flex; flex-direction: column; justify-content: center; gap: 0.6mm; overflow: hidden; color: #000; font-family: Inter, 'IBM Plex Sans Arabic', Arial, sans-serif; text-align: center; }
.label-name { font-size: 7.5pt; font-weight: 600; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label-variant { font-size: 7pt; line-height: 1.1; }
.label-code { flex: 1; min-height: 0; display: flex; }
.label-code .barcode-svg { width: 100%; height: 100%; }
.label-code .barcode-svg text { fill: #000; }
.label-digits { font-family: monospace; font-size: 7pt; letter-spacing: 0.5px; line-height: 1; }
.label-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; font-size: 7pt; line-height: 1.1; }
.label-foot strong { font-size: 8.5pt; margin-inline-start: auto; }
.label-sku { font-family: monospace; font-size: 6.5pt; }
#label-print { display: none; }
@media print {
  body.printing-labels > *:not(#label-print) { display: none !important; }
  body.printing-labels #label-print { display: block; }
  body.printing-labels #label-print.label-sheet { display: grid; }
  #label-print .label { page-break-inside: avoid; break-inside: avoid; }
  #label-print.label-roll .label { page-break-after: always; break-after: page; }
  body.printing-labels { background: #fff; margin: 0; }
}
/* Variants list: never squeeze the names away. Narrow card → hide thumbnails; still too narrow → scroll sideways. */
.vlist { overflow-x: auto; container-type: inline-size; }
@container (max-width: 600px) {
  .vrow { grid-template-columns: minmax(110px, 1fr) 88px 88px 56px 56px; min-width: 440px; }
  .vrow .vthumb { display: none; }
}
/* Variant amounts are shown, not typed: Bulk edit and the Set buttons change them. */
.vval { display: block; padding: 4px 8px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Variants bulk edit tab */
.sheet-head .bulk-tabs { margin-bottom: 0; }
.tab-tools { justify-content: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.pic-row.changed { background: #fff7d6; }
.stale-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.supplier-hint { margin-top: 6px; }
.sheet td.sheet-custom { padding: 4px 8px; }
.sheet-pic .vthumb { width: 34px; height: 34px; padding: 0; background: var(--surface); }
.tab-tools .grow { flex: 1; }

/* ---------- Shopify-style bulk editor (full screen) ---------- */
.bare-page { min-height: 100vh; background: #f1f1f1; }
.be-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; background: #fff; border-bottom: 1px solid #e3e3e3; }
.be-topbar .grow { flex: 1; }
.be-title { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.be-title strong { font-size: 15px; }
.be-title .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50vw; }
.be-body { padding: 16px; }
.be-body > .error-box { margin-bottom: 12px; }
.be-sheet { background: #fff; border: 1px solid #e3e3e3; border-radius: 12px; overflow: hidden; }
.be-sheet .sheet-wrap { max-height: calc(100vh - 140px); }
.be-sheet table.sheet thead th { background: #f7f7f7; color: #616161; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; height: 36px; }
.be-sheet .sheet th, .be-sheet .sheet td { border-color: #ebebeb; }
.be-sheet .sheet-parent th.sheet-name { background: #fafafa; font-weight: 600; }
.be-sheet .sheet-parent td { background: #fafafa; }
.be-sheet .sheet-parent td.sheet-blank, .be-sheet .sheet-child td.sheet-blank { background: #fafafa; }
.be-sheet .sheet-child .sheet-name { background: #fff; color: var(--text); padding-inline-start: 36px; }
.be-sheet .sheet-input { height: 40px; }
.be-sheet td:focus-within { box-shadow: inset 0 0 0 2px #005bd3; }
.be-sheet td.changed { background: #fff1c2; }
.be-sheet td.in-range { background: #e8f0fe; box-shadow: inset 0 0 0 1px #9bbcf5; }
.be-sheet td.in-range.changed { background: #f3ecc8; }
.be-help { margin: 10px 2px 0; }
.be-menu { min-width: 240px; padding: 6px; }
.be-menu .check { padding: 6px 8px; }
.be-menu-row { display: flex; gap: 6px; padding: 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.be-menu-row .input-sm { flex: 1; max-width: none; }
/* Bulk editor: rearranging columns */
.be-sheet thead th[data-col] { cursor: grab; user-select: none; }
.be-sheet thead th.dragging { opacity: .45; }
.be-sheet thead th.drop-before { box-shadow: inset 3px 0 0 #005bd3; }
.be-sheet thead th.drop-after { box-shadow: inset -3px 0 0 #005bd3; }
[dir="rtl"] .be-sheet thead th.drop-before { box-shadow: inset -3px 0 0 #005bd3; }
[dir="rtl"] .be-sheet thead th.drop-after { box-shadow: inset 3px 0 0 #005bd3; }
.col-menu-hint { padding: 4px 8px 8px; }
.col-list { display: grid; gap: 2px; }
.col-item { display: flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 6px; }
.col-item:hover { background: var(--surface-2); }
.col-item .check { padding: 4px 4px; flex: 1; }
.col-item .grip { height: 26px; }
.col-item.dragging { opacity: .4; }
.col-item.drop-target { box-shadow: inset 0 2px 0 #005bd3; }
.be-menu .col-reset { margin-top: 6px; border-top: 1px solid var(--border); border-radius: 0; color: var(--primary); }
/* Collections picker */
.coll-box { position: relative; }
.coll-drop { position: absolute; z-index: 40; top: calc(100% + 4px); inset-inline: 0; max-height: 260px; overflow: auto; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(15,23,42,.12); padding: 4px; }
.coll-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; background: none; border-radius: 6px; text-align: start; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.coll-opt:hover { background: var(--surface-2); }
.coll-opt.on { font-weight: 500; }
.coll-check { width: 16px; height: 16px; display: inline-grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 4px; flex: none; }
.coll-opt.on .coll-check { background: var(--primary); border-color: var(--primary); color: #fff; }
.coll-check .ico { width: 12px; height: 12px; stroke-width: 2.5; }
.coll-empty { padding: 10px; color: var(--muted); font-size: 13px; }
.coll-chips { margin-top: 8px; }
.coll-chips:empty { display: none; }
.chip-x { display: inline-flex; align-items: center; gap: 4px; }
.chip-x button { border: 0; background: none; padding: 0 2px; cursor: pointer; color: var(--muted); font-size: 11px; }
.chip-x button:hover { color: var(--danger); }
.chip-auto { background: var(--primary-soft); color: var(--primary-dark); display: inline-flex; gap: 6px; align-items: center; }
.chip-auto small { font-size: 10.5px; opacity: .75; }
.field select + input.input { margin-top: 6px; }

/* ---------- Online orders (Phase 4) ---------- */
.tab-count { display: inline-block; margin-inline-start: 6px; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 11px; line-height: 18px; text-align: center; color: var(--text-2); }
.tab.active .tab-count { background: var(--primary-soft); border-color: var(--primary-border); color: var(--primary); }
.orders-setting { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; flex-wrap: wrap; }
.order-line { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.order-line:last-child { border-bottom: 0; }
/* Delivery Method: a row of the order's payment (above Payment Method) — the options side by side, as small chips. */
.ship-money-row.ship-dm { align-items: center; padding: 4px 0; }
.dm-current { display: inline-flex; align-items: center; gap: 6px; }
.ship-dm select.input { width: auto; max-width: none; }
.dm-current[hidden] { display: none; }
.order-line-total .item-disc { color: var(--danger); font-weight: 500; }
.dm-current .pill { font-size: 10px; padding: 0 6px; }
/* (The last item before a shipment's money box: one line between them — the box's.) */
.order-line:has(+ .ship-money) { border-bottom: 0; }
.order-line .thumb { width: 44px; height: 44px; }
.order-line .grow { flex: 1; min-width: 0; }
.order-line-qty { min-width: 120px; color: var(--text-2); }
.order-line-total { min-width: 110px; font-weight: 500; }
.strong-link { font-weight: 600; color: var(--text); }
.strong-link:hover { color: var(--primary); }
@media (max-width: 640px) { .order-line { flex-wrap: wrap; } .order-line-qty, .order-line-total { min-width: 0; } }

/* ---------- POS (Phase 5) ---------- */
.pos-body { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; padding: 16px; height: calc(100vh - 56px); box-sizing: border-box; }
.pos-left { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.pos-search-wrap { position: relative; }
.pos-search-wrap > .ico { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 20px; height: 20px; }
.pos-search { height: 52px; font-size: 17px; padding-inline-start: 44px; border-radius: 12px; }
.pos-results { overflow: auto; display: grid; gap: 6px; align-content: start; }
.pos-result { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; background: #fff; border: 1px solid var(--border); border-radius: 10px; text-align: start; font: inherit; cursor: pointer; }
.pos-result:hover { border-color: var(--primary); background: #f8faff; }
.pos-result .grow { display: flex; flex-direction: column; min-width: 0; }
.pos-result-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.pos-noresult { padding: 16px; }
.pos-right { display: flex; flex-direction: column; min-height: 0; margin: 0; }
.pos-cart-lines { flex: 1; overflow: auto; padding: 4px 14px; }
.pos-line { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pos-line .grow { min-width: 0; }
.pos-line-qty { display: flex; align-items: center; gap: 2px; }
.pos-line-qty .icon-btn { width: 28px; height: 28px; font-size: 16px; }
.pos-qty { width: 52px; max-width: 52px; text-align: center; }
.pos-line > .input-sm { width: 74px; max-width: 74px; }
.pos-line-total { min-width: 88px; font-weight: 600; }
.pos-empty-cart { display: grid; place-items: center; gap: 6px; padding: 40px 0; color: var(--muted); }
.pos-empty-cart .ico { width: 34px; height: 34px; }
.pos-totals { padding: 10px 14px; border-top: 1px solid var(--border); display: grid; gap: 6px; }
.pos-totals .input-sm { width: 110px; max-width: 110px; }
.pos-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; padding-top: 6px; border-top: 1px dashed var(--border); }
.pos-total strong { font-size: 24px; }
.pos-pay-wrap { padding: 12px 14px 14px; }
.pos-pay { width: 100%; height: 54px; font-size: 17px; justify-content: center; border-radius: 12px; }
.pos-empty { max-width: 640px; margin: 24px auto; }
.pay-rows { display: grid; gap: 8px; margin-bottom: 10px; }
.pay-row { display: grid; grid-template-columns: 160px 140px minmax(0, 1fr) 34px; gap: 8px; align-items: center; }
.pay-status { margin-top: 12px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius); display: grid; gap: 4px; }
.pay-status strong { font-size: 18px; }
.pos-change strong { color: #15803d; }
.pos-customer summary { cursor: pointer; color: var(--primary); margin-top: 12px; }
.sale-done { display: grid; justify-items: center; gap: 10px; padding: 10px 0; }
.sale-done-total { font-size: 34px; font-weight: 700; }
.sale-done-change { font-size: 20px; color: #15803d; font-weight: 600; }
@media (max-width: 900px) { .pos-body { grid-template-columns: 1fr; height: auto; } .pay-row { grid-template-columns: 1fr 1fr 34px; } .pay-row input:nth-of-type(2) { grid-column: 1 / 3; } }

/* Cashbox */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.kpi-mini { display: grid; gap: 4px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius); }
.kpi-mini strong { font-size: 17px; }
.notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.note-count { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); }
.open-shift { max-width: 640px; margin-bottom: 16px; }
a.list-row { color: inherit; text-decoration: none; }
a.list-row:hover { background: var(--surface-2); }

/* Receipt / Z report (80 mm) — on screen inside a card, and printed on its own */
.receipt { width: 72mm; max-width: 100%; margin: 0 auto; font-family: 'Courier New', monospace; font-size: 11.5px; color: #000; line-height: 1.35; }
.rc-head { text-align: center; display: grid; gap: 2px; }
.rc-head strong { font-size: 15px; font-family: Inter, 'IBM Plex Sans Arabic', sans-serif; }
.rc-sep { border-top: 1px dashed #000; margin: 6px 0; }
.rc-row { display: flex; justify-content: space-between; gap: 8px; }
.rc-line { margin-bottom: 4px; }
.rc-muted { color: #444; }
.rc-total { font-weight: 700; font-size: 13px; }
.rc-neg { font-weight: 700; }
.rc-code { display: flex; justify-content: center; height: 40px; }
.rc-code .barcode-svg { width: 60mm; height: 100%; }
.rc-foot { text-align: center; margin-top: 6px; }
@media print { #label-print.print-doc { padding: 3mm 4mm; } }
.pos-line { flex-direction: column; align-items: stretch; gap: 6px; }
.pos-line-top { display: flex; align-items: flex-start; gap: 8px; }
.pos-line-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pos-line-disc { display: flex; align-items: center; gap: 6px; }
.pos-line-disc .input-sm { width: 90px; max-width: 90px; }
.card-body > .receipt { width: auto; }
@media print { #label-print .receipt { width: 72mm; } }
/* POS search: one line per product, variants underneath */
.pos-group { display: grid; gap: 0; border: 1px solid var(--primary); border-radius: 10px; background: #fff; min-height: min-content; }
.pos-group > .pos-result { border-radius: 9px 9px 0 0; }
.pos-group .pos-result { border: 0; border-radius: 0; background: #f8faff; }
.pos-chevron .ico { width: 16px; height: 16px; color: var(--muted); transition: transform .15s; }
.pos-chevron .ico.up { transform: rotate(180deg); }
.pos-variants { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.pos-variant { display: grid; gap: 2px; justify-items: start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font: inherit; text-align: start; cursor: pointer; }
.pos-variant:hover { border-color: var(--primary); background: #f8faff; }
.pos-variant.out { opacity: .65; }
.pos-result .grow { flex: 1; }
.pos-results > * { min-height: min-content; }
/* POS cart: compact one-row lines */
.pos-cart-lines { padding: 2px 10px; }
.pos-line { padding: 6px 0; gap: 4px; }
.pos-line-row { display: flex; align-items: center; gap: 6px; }
.pos-line-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pos-line-name strong, .pos-line-name .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.pos-line-name .sub { font-size: 11.5px; }
.pos-line.short .pos-line-name .sub { color: var(--danger); }
.pos-line .pos-line-qty .icon-btn { width: 24px; height: 24px; font-size: 14px; }
.pos-line .pos-qty { width: 40px; max-width: 40px; height: 26px; padding: 2px 4px; font-size: 13px; }
.pos-line .pos-line-total { min-width: 74px; font-size: 13px; display: flex; flex-direction: column; line-height: 1.2; }
.pos-line .pos-line-total .sub { font-size: 11px; font-weight: 400; color: var(--danger); }
.pos-line > .pos-line-row > .icon-btn { width: 24px; height: 24px; font-size: 12px; flex: none; }
.pos-disc-btn { font-weight: 700; color: var(--muted); }
.pos-disc-btn.on { color: var(--primary); background: var(--primary-soft); }
.pos-line-disc { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.pos-line-disc .input-sm { width: 90px; max-width: 90px; height: 26px; }

/* POS: full-screen cart; product list drops down from the search bar */
.pos-body.pos-full { display: flex; flex-direction: column; gap: 12px; grid-template-columns: none; }
.pos-full .pos-search-wrap { position: relative; z-index: 30; }
.pos-full .pos-results { position: absolute; top: calc(100% + 6px); inset-inline: 0; max-height: min(70vh, calc(100vh - 180px)); overflow: auto;
  padding: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(15,23,42,.18); }
.pos-cart { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.pos-cart .pos-cart-lines { flex: 1; overflow: auto; padding: 2px 16px; }
.pos-foot { display: flex; align-items: flex-end; gap: 20px; padding: 12px 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.pos-foot .pos-totals { flex: 1; min-width: 260px; max-width: 460px; border-top: 0; padding: 0; }
.pos-foot .pos-pay-wrap { margin-inline-start: auto; padding: 0; width: min(380px, 100%); }
.pos-cart .pos-line-name strong { font-size: 13.5px; }
.pos-cart .pos-line-total { min-width: 110px; }
/* POS promo code */
.promo-apply { display: flex; gap: 6px; }
.promo-input { width: 130px; max-width: 130px; }
.promo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: 999px; background: #ecfdf5; color: #047857; font-weight: 600; font-size: 12.5px; border: 1px solid #a7f3d0; }
.promo-chip .ico { width: 14px; height: 14px; }
.promo-chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 11px; padding: 0 4px; }
.promo-off { color: #047857; font-weight: 600; }
.promo-msg { color: var(--danger); text-align: end; }

/* POS: left ¾ (search + cart items), right ¼ (summary + Pay) */
.pos-body.pos-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); gap: 14px; }
.pos-main { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.pos-split .pos-search-wrap { position: relative; z-index: 30; }
.pos-split .pos-results { position: absolute; top: calc(100% + 6px); inset-inline: 0; max-height: min(70vh, calc(100vh - 180px)); overflow: auto;
  padding: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(15,23,42,.18); }
.pos-side { display: flex; flex-direction: column; min-height: 0; margin: 0; }
.pos-side .pos-totals { flex: 1; border-top: 0; padding: 12px 14px; align-content: start; overflow: auto; }
.pos-side .info-row { flex-wrap: wrap; gap: 6px; }
.pos-side .promo-row { align-items: center; }
.pos-side .promo-apply { width: 100%; }
.pos-side .promo-input { flex: 1; width: auto; max-width: none; }
.pos-side .pos-total { margin-top: 6px; padding-top: 10px; }
.pos-side .pos-total strong { font-size: 26px; }
.pos-side .pos-pay-wrap { padding: 12px 14px 14px; border-top: 1px solid var(--border); }
@media (max-width: 900px) { .pos-body.pos-split { grid-template-columns: 1fr; height: auto; } }
.pos-side .pos-totals { overflow-x: hidden; grid-template-columns: minmax(0, 1fr); }
.pos-side .pos-totals > * { min-width: 0; }
.pos-side input { min-width: 0; }
.pos-side .promo-apply { display: flex; min-width: 0; }
.pos-side .promo-apply .btn { flex: none; }
.pos-side .pos-totals .input-sm:not(.promo-input) { width: 96px; max-width: 96px; }
.pos-side .pos-total { flex-wrap: wrap; gap: 4px; }
.pos-side .pos-total strong { font-size: clamp(18px, 2.2vw, 26px); }
.pos-side .pos-pay { font-size: 15px; height: 52px; white-space: normal; line-height: 1.2; }
/* POS cart: total items row under the quantities column */
.pos-cart-foot { border-bottom: 0; border-top: 2px solid var(--border); }
.pos-foot-qty { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
/* POS cart footer: always visible under the scrolling cart lines */
.pos-cart-footer { flex: none; padding: 0 16px; background: var(--surface-2, var(--surface)); border-radius: 0 0 12px 12px; }
.pos-cart-footer:empty { display: none; }
.pos-cart-footer .pos-cart-foot { padding: 8px 0; }
.pos-cart-footer .pos-line-total { font-weight: 700; }
.pos-cart .pos-cart-lines, .pos-cart-footer { scrollbar-gutter: stable; }
.pos-cart-footer { overflow-y: hidden; }
/* POS cart: line numbers */
.pos-line-no { flex: none; width: 26px; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); }
/* POS cart: unit price column after the product name */
.pos-line-price { flex: none; min-width: 96px; margin-inline-end: 10px; font-size: 13px; color: var(--muted); }
/* POS pay dialog: Cash / Visa method buttons */
.pay-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pay-method { display: flex; align-items: center; justify-content: center; gap: 10px; height: 64px; border: 2px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.pay-method:hover { border-color: var(--primary); }
.pay-method.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); }
.pay-method .ico { width: 22px; height: 22px; }

/* POS pay dialog: customer (needed for Credit) */
.pay-customer-wrap { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.pay-section-title { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.cust-search { display: flex; gap: 8px; }
.cust-search .input { flex: 1; min-width: 0; }
.cust-results { display: grid; gap: 4px; margin-top: 6px; max-height: 200px; overflow: auto; }
.cust-results:empty { display: none; }
.cust-result { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; text-align: start; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.cust-result:hover { border-color: var(--primary); }
.cust-picked { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--primary); border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.cust-picked > .ico { width: 20px; height: 20px; color: var(--primary); flex: none; }
.cust-new { display: grid; gap: 8px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 10px; }
.sale-done-credit { margin: 6px 0 10px; color: var(--muted); font-weight: 600; }

/* POS: brand logo above the summary */
.pos-side-col { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; }
.pos-side-col > .pos-side { flex: 1; }
.pos-brand { position: relative; display: grid; place-items: center; min-height: 96px; padding: 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; }
.pos-brand-img { display: block; max-width: 100%; max-height: 110px; object-fit: contain; }
.pos-brand-fallback { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pos-brand-fallback .logo-mark { width: 44px; height: 44px; font-size: 16px; border-radius: 10px; flex: none; }
.pos-brand-fallback strong { font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-brand-tools { position: absolute; inset-inline-end: 6px; bottom: 4px; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.pos-brand:hover .pos-brand-tools, .pos-brand:focus-within .pos-brand-tools { opacity: 1; }
.pos-brand-tools .btn { font-size: 11.5px; padding: 2px 8px; height: auto; background: var(--surface); }
.pos-brand.no-logo .pos-brand-tools { opacity: 1; }
@media (hover: none) { .pos-brand-tools { opacity: 1; } }

/* Exchange screen */
.xc-main { overflow: auto; }
.xc-card { margin: 0; flex: none; }
.xc-lines { padding: 2px 16px 8px; }
.xc-lines .pos-line.xc-on { background: #fff7f7; }
.xc-empty { padding: 12px 0; }
.xc-search { margin: 10px 16px 4px; }
.xc-summary .field { margin: 0; }
.xc-pay { display: grid; gap: 8px; }
.rc-title { font-weight: 700; margin: 4px 0 2px; }

/* Sidebar sections: headings in the full sidebar, thin dividers in the icon-only rail */
.nav-group[data-key="section_main"] + .nav-group .nav-section { padding-top: 12px; }
.nav-footer .nav-section { padding-top: 6px; }
.nav-section .nav-caret { color: var(--side-muted); }
@media (min-width: 901px) {
  .rail .nav-group + .nav-group { border-top: 1px solid rgba(255,255,255,.08); margin-top: 6px; padding-top: 6px; }
}

.sale-done-actions { justify-content: center; flex-wrap: wrap; }

/* POS: invoice number of the sale being rung up */
.pos-invoice { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; white-space: nowrap; }
.pos-invoice strong { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pos-invoice:has(strong:empty) { display: none; }
.pos-cart-title { display: inline-flex; align-items: center; min-width: 0; }
/* Invoice number box under the brand logo */
.pos-side-col > .pos-invoice { display: flex; justify-content: space-between; margin: 0; padding: 10px 14px; border-radius: 12px;
  background: var(--surface); font-size: 13px; }
.pos-side-col > .pos-invoice strong { font-size: 15px; }

/* POS: several open carts (tabs) */
.pos-cart-head { gap: 10px; padding-top: 8px; padding-bottom: 8px; }
.pos-tabs { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: thin; }
.pos-tab { display: inline-flex; align-items: center; flex: none; max-width: 190px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.pos-tab.on { background: var(--primary); border-color: var(--primary); }
.pos-tab-main { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 4px 5px 12px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
html[dir="rtl"] .pos-tab-main { padding: 5px 12px 5px 4px; }
.pos-tab.on .pos-tab-main { color: #fff; }
.pos-tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-tab-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.pos-tab.on .pos-tab-count { background: #fff; color: var(--primary); }
.pos-tab-x { border: 0; background: none; color: var(--muted); font-size: 11px; padding: 4px 10px 4px 4px; cursor: pointer; }
html[dir="rtl"] .pos-tab-x { padding: 4px 4px 4px 10px; }
.pos-tab.on .pos-tab-x { color: rgba(255,255,255,.8); }
.pos-tab-x:hover { color: var(--danger); }
.pos-tab.on .pos-tab-x:hover { color: #fff; }
.pos-tab:only-child .pos-tab-main, .pos-tab-main:last-child { padding-inline-end: 12px; }
.pos-tab-new { flex: none; border: 1px dashed var(--border); border-radius: 999px; background: none; padding: 5px 12px; font: inherit; font-size: 13px; color: var(--primary); cursor: pointer; white-space: nowrap; }
.pos-tab-new:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); }

/* POS cart tabs: original size, 100px between carts (avoid tapping the wrong one) */
.pos-tabs { gap: 100px; }
.pos-cart-head { gap: 100px; }

/* Return & Exchange: scan the items coming back */
.xc-scan-wrap { position: relative; margin: 10px 16px 4px; }
.xc-scan-wrap > .ico { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.xc-scan { padding-inline-start: 38px; height: 42px; font-size: 15px; }
.xc-scan-msg { margin: 2px 16px 6px; font-weight: 600; }
.xc-scan-msg.ok { color: #047857; }
.xc-scan-msg.neg { color: var(--danger); }
@keyframes xc-flash { from { background: #fde68a; } to { background: #fff7f7; } }
.xc-lines .pos-line.xc-flash { animation: xc-flash 1.2s ease-out; }
/* The search being used sits above the other one (its list mustn't be covered) */
.xc-search:focus-within { z-index: 40; }

/* Money direction: the customer pays → green; the customer gets money (change / refund) → red */
.amt-in, .amt-in strong, .amt-in span { color: #16a34a !important; }
.amt-out, .amt-out strong, .amt-out span { color: var(--danger) !important; }

/* Transfer form: Transfer no. on the left, From / To at the end of the row */
.tr-head-row { display: grid; grid-template-columns: minmax(130px, 170px) minmax(90px, 120px) minmax(140px, 180px) 1fr minmax(180px, 260px) minmax(180px, 260px); gap: 16px; align-items: end; }
.tr-head-row .field { margin: 0; }
.tr-head-row .input.readonly { font-weight: 700; }
@media (max-width: 760px) { .tr-head-row { grid-template-columns: 1fr 1fr; } .tr-head-row .grow { display: none; }  }
.tr-head-row { margin-bottom: 14px; }

/* Transfer receiving: count with the scanner */
.tr-scan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--border); background: #f8faff; }
.tr-scan-input { margin: 0; }
.tr-scan-side { display: flex; align-items: center; gap: 10px; }
.tr-scan-progress { font-weight: 700; white-space: nowrap; }
.tr-scan-progress.done { color: #16a34a; }
.tr-scan .xc-scan-msg { grid-column: 1 / -1; margin: 0; }
tr.tr-row-done td { background: #f0fdf4; }
tr.tr-row-partial td { background: #fffbeb; }
tr.xc-flash td { animation: xc-flash 1.2s ease-out; }
tr.tr-row-extra td { background: #eff6ff; }
.xc-scan-msg.warn { color: #b45309; }

/* Transfers: missing pieces waiting for the sender */
.nav-badge { margin-inline-start: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.rail .nav-link { position: relative; }
.rail .nav-badge { position: absolute; top: 2px; inset-inline-end: 6px; min-width: 16px; padding: 0 4px; line-height: 16px; font-size: 10px; }
.shortage-box { display: grid; gap: 10px; margin-bottom: 16px; padding: 14px 16px; border-radius: 12px; border: 1px solid #fcd34d; background: #fffbeb; }
.shortage-box.returned { border-color: #86efac; background: #f0fdf4; }
.shortage-box.lost { border-color: #fca5a5; background: #fef2f2; }
.shortage-text { display: flex; gap: 10px; align-items: flex-start; }
.shortage-text > .ico { width: 20px; height: 20px; flex: none; color: #b45309; margin-top: 1px; }
.shortage-box.returned .shortage-text > .ico { color: #16a34a; }
.shortage-box.lost .shortage-text > .ico { color: var(--danger); }
.shortage-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.shortage-actions .input { flex: 1; min-width: 200px; }

/* Lost & Damaged */
.loss-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.loss-kpi { text-decoration: none; color: inherit; border: 2px solid transparent; }
.loss-kpi.on { border-color: var(--primary); }
.loss-kpi strong { font-size: 20px; }
.shortage-box.extra.pending { border-color: #93c5fd; background: #eff6ff; }
.shortage-box.extra.pending .shortage-text > .ico { color: var(--primary); }
.shortage-box.extra.acknowledged { border-color: #86efac; background: #f0fdf4; }
.shortage-box.extra.acknowledged .shortage-text > .ico { color: #16a34a; }

/* Transfer AWB (100 × 150 mm shipping label) */
.awb { width: 100mm; height: 150mm; box-sizing: border-box; padding: 5mm; display: flex; flex-direction: column; gap: 3mm; background: #fff; color: #000;
  font-family: Arial, sans-serif; font-size: 11pt; border: 1px solid #000; page-break-after: always; break-after: page; overflow: hidden; }
.awb:last-child { page-break-after: auto; break-after: auto; }
.awb-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #000; padding-bottom: 2mm; }
.awb-head strong { font-size: 14pt; letter-spacing: .04em; }
.awb-head span { font-weight: 700; }
.awb-barcode { text-align: center; }
.awb-barcode svg { width: 100%; height: 22mm; }
.awb-number { font-size: 18pt; font-weight: 800; letter-spacing: .08em; }
.awb-party { border: 1px solid #000; padding: 2mm 3mm; display: grid; gap: .5mm; }
.awb-to { border-width: 2px; }
.awb-cap { font-size: 8pt; font-weight: 700; letter-spacing: .1em; }
.awb-branch { font-size: 15pt; font-weight: 800; display: flex; gap: 2mm; align-items: baseline; }
.awb-from .awb-branch { font-size: 12pt; }
.awb-code { font-size: 9pt; font-weight: 700; border: 1px solid #000; padding: 0 1.5mm; }
.awb-phone { font-weight: 700; }
.awb-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5mm 3mm; font-size: 10pt; }
.awb-facts span { display: block; font-size: 8pt; color: #333; }
.awb-notes { font-size: 9pt; border-top: 1px dashed #000; padding-top: 2mm; }
.awb-preview { display: flex; justify-content: center; padding: 10px; background: var(--surface-2); border-radius: 10px; }
.awb-preview .awb { transform: scale(.72); transform-origin: top center; margin-bottom: -42mm; }
#label-print .awb-pages { display: block; }
/* Transfer form: second row on the same grid — Shipping by under Date/Time/No., Tracking number under From/To */
.tr-ship-row .tr-ship-by { grid-column: 1 / 3; }
.tr-ship-row .tr-ship-notes { grid-column: 5 / 7; }
.tr-ship-row .tr-ship-track { grid-column: 3 / 5; }
@media (max-width: 760px) { .tr-ship-row .tr-ship-by, .tr-ship-row .tr-ship-notes, .tr-ship-row .tr-ship-track { grid-column: 1 / -1; } }

/* Product picker: wide + collapsible (Transfers) */
.picker.picker-wide { max-width: none; }
.picker-wide .input { height: 44px; font-size: 15px; }
.picker-wide .picker-list { max-height: min(65vh, 560px); }
.picker-wide .picker-head { padding: 10px 14px; gap: 12px; }
.picker-wide .picker-head .thumb { width: 40px; height: 40px; }
.picker-wide .picker-item { padding: 10px 14px 10px 66px; font-size: 14px; }
html[dir="rtl"] .picker-wide .picker-item { padding: 10px 66px 10px 14px; }
.picker-head.clickable { cursor: pointer; }
.picker-head.clickable:hover { background: var(--primary-soft); }
.picker-head.open { background: var(--primary-soft); }
.picker-head .grow { display: flex; flex-direction: column; min-width: 0; }
.picker-sub { font-size: 12px; }

/* Transfer form: the "products being transferred" list fills the rest of the screen with compact rows (more items
   visible); it scrolls inside, keeping its column headings and the Save button in view. */
.tr-items { display: flex; flex-direction: column; height: calc(100vh - 300px); min-height: 320px; }
.tr-items > .toolbar { flex: none; }
.tr-items > .table-wrap { flex: 1; min-height: 0; overflow: auto; }
.tr-items > .card-foot { flex: none; border-top: 1px solid var(--border); }
.tr-items thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }
.tr-items tbody td { padding-top: 5px; padding-bottom: 5px; vertical-align: middle; }
.tr-items .me { gap: 8px; }
.tr-items .me .thumb { width: 30px; height: 30px; }
.tr-items tbody td strong { font-size: 13.5px; }
.tr-items tbody .sub { font-size: 12px; }
.tr-items .tr-item-qty { width: 78px; }
.tr-items tbody .btn-ghost { padding: 4px 8px; }
.tr-items tbody td .empty { padding: 36px 0; }
.tr-item-name { align-items: center; }
.tr-item-name strong { white-space: nowrap; }
.tr-item-name .sub { white-space: nowrap; }
.tr-items .me .thumb { width: 26px; height: 26px; }
.tr-items tbody td { padding-top: 3px; padding-bottom: 3px; }
.tr-items .tr-item-qty { height: 30px; }
/* Tighter rows so more items fit */
.tr-items tbody td { padding-top: 1px; padding-bottom: 1px; height: 32px; }
.tr-items .tr-item-qty { height: 28px; padding-top: 2px; padding-bottom: 2px; }
.tr-items .me .thumb { width: 24px; height: 24px; }
.tr-items tbody .btn-ghost { padding: 2px 8px; }
/* Scrolling to a line keeps it clear of the sticky column headings */
.tr-items tbody tr { scroll-margin-top: 44px; scroll-margin-bottom: 8px; }
.gen-barcode-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* POS transfer tab: amber, so it's never mistaken for a sale */
.pos-tab.pos-tab-transfer { border-color: #d97706; background: color-mix(in srgb, #d97706 10%, var(--surface-2)); }
.pos-tab.pos-tab-transfer .pos-tab-main { color: #b45309; }
.pos-tab.pos-tab-transfer.on { background: #d97706; border-color: #d97706; }
.pos-tab.pos-tab-transfer.on .pos-tab-main { color: #fff; }
.pos-tab.pos-tab-transfer .pos-tab-count { background: #d97706; }
.pos-tab.pos-tab-transfer.on .pos-tab-count { background: #fff; color: #b45309; }
.pos-tab-icon { display: inline-flex; padding-inline-start: 10px; color: #b45309; }
.pos-tab-icon svg { width: 14px; height: 14px; }
.pos-tab.pos-tab-transfer.on .pos-tab-icon { color: #fff; }
.pos-tab-icon + .pos-tab-main { padding-inline-start: 6px; }
.pos-side-col > .pos-tr-no { border-color: #d97706; }
.pos-tr-card .card-head { border-top: 3px solid #d97706; border-radius: 12px 12px 0 0; }
.pos-tr-fields { display: grid; gap: 8px; }
.pos-tr-fields .field { margin: 0; }
.pos-tr-fields .field label { font-size: 12px; }
.pos-side .pos-totals.pos-tr-fields .input-sm:not(.promo-input), .pos-side .pos-tr-fields .input { width: 100%; max-width: none; }
.pos-tr-fields .readonly { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; }
.pos-tr-route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 6px; }
.pos-tr-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.pos-tr-arrow { color: #d97706; font-weight: 700; line-height: 1; padding-bottom: 9px; }
[dir="rtl"] .pos-tr-arrow { transform: scaleX(-1); }
.pos-tr-print .btn { width: 100%; justify-content: center; }
/* POS Return & Exchange tab: red, like money going back */
.pos-tab.pos-tab-xc { border-color: #dc2626; background: color-mix(in srgb, #dc2626 8%, var(--surface-2)); }
.pos-tab.pos-tab-xc .pos-tab-main, .pos-tab.pos-tab-xc .pos-tab-icon { color: #b91c1c; }
.pos-tab.pos-tab-xc.on { background: #dc2626; border-color: #dc2626; }
.pos-tab.pos-tab-xc.on .pos-tab-main, .pos-tab.pos-tab-xc.on .pos-tab-icon { color: #fff; }
.pos-tab.pos-tab-xc .pos-tab-count { background: #dc2626; }
.pos-tab.pos-tab-xc.on .pos-tab-count { background: #fff; color: #b91c1c; }
.pos-side-col > .pos-xc-no { border-color: #dc2626; }
.pos-xc-card .card-head { border-top: 3px solid #dc2626; border-radius: 12px 12px 0 0; }
.pos-search-row { display: flex; gap: 8px; align-items: stretch; }
.pos-search-row > .pos-search-wrap { flex: 1; min-width: 0; }
.xc-mode { display: inline-flex; flex: none; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.xc-mode-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.xc-mode-btn svg { width: 16px; height: 16px; }
.xc-mode-btn.on { background: var(--primary); color: #fff; }
.xc-mode-btn:first-child.on { background: #dc2626; }
.xc-section { display: flex; align-items: center; gap: 8px; padding: 10px 4px 4px; border-bottom: 1px solid var(--border); font-size: 13px; }
.xc-section svg { width: 16px; height: 16px; color: var(--muted); }
.pos-cart-lines .pos-line.xc-on { background: #fff7f7; }
.pos-cart-lines .pos-line.xc-flash { animation: xc-flash 1.2s ease-out; }
.pos-side .pos-totals.xc-summary .input-sm:not(.promo-input), .pos-xc-card .xc-summary .input { width: 100%; max-width: none; }
/* Return & Exchange: two halves of the cart */
.pos-cart .pos-cart-lines.xc-split { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; overflow: hidden; padding: 8px 12px; }
.xc-half { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.xc-half.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.xc-half-back.on { border-color: #dc2626; box-shadow: 0 0 0 1px #dc2626; }
.xc-half .xc-section { width: 100%; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--border); background: var(--surface-2); font: inherit; font-size: 13px; color: var(--text); cursor: pointer; text-align: start; flex: none; }
.xc-half-back .xc-section strong { color: #b91c1c; }
.xc-half-lines { flex: 1; min-height: 0; overflow: auto; padding: 2px 10px; scrollbar-gutter: stable; }
.xc-half-lines .pos-empty-cart { padding: 16px; }
.xc-half-lines .pos-empty-cart svg { width: 28px; height: 28px; }
/* The Return tab always shows the whole receipt number */
.pos-tab.pos-tab-xc { max-width: none; }
.pos-tab.pos-tab-xc .pos-tab-label { overflow: visible; text-overflow: clip; }
/* POS Sale tabs: green (Transfer = amber, Return = red) */
.pos-tab:not(.pos-tab-transfer):not(.pos-tab-xc):not(.pos-tab-rv) { border-color: #16a34a; background: color-mix(in srgb, #16a34a 8%, var(--surface-2)); }
.pos-tab:not(.pos-tab-transfer):not(.pos-tab-xc):not(.pos-tab-rv) .pos-tab-main { color: #15803d; }
.pos-tab.on:not(.pos-tab-transfer):not(.pos-tab-xc):not(.pos-tab-rv) { background: #16a34a; border-color: #16a34a; }
.pos-tab.on:not(.pos-tab-transfer):not(.pos-tab-xc):not(.pos-tab-rv) .pos-tab-main { color: #fff; }
/* POS tabs: drag to reorder — the tab being dragged fades; a thick bar with an arrow marks where it will land */
.pos-tab { touch-action: none; user-select: none; }
.pos-tab.dragging { opacity: .35; }
.pos-tabs { position: relative; padding: 8px 12px; }
.pos-tab-drop { position: absolute; top: 4px; bottom: 2px; width: 6px; margin-inline-start: -3px; border-radius: 3px; background: var(--primary); pointer-events: none; z-index: 2; }
.pos-tab-drop::before { content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top: 8px solid var(--primary); border-bottom: 0; }
[dir="rtl"] .pos-tab-drop { margin-inline-start: 0; margin-left: -3px; }
/* POS header: count on Receive Transfers */
.pos-hdr-badge { min-width: 20px; padding: 0 6px; border-radius: 999px; background: #d97706; color: #fff; font-size: 11px; line-height: 18px; text-align: center; margin-inline-start: 2px; }
/* POS Receive tab: purple */
.pos-tab.pos-tab-rv { border-color: #7c3aed; background: color-mix(in srgb, #7c3aed 8%, var(--surface-2)); max-width: none; }
.pos-tab.pos-tab-rv .pos-tab-label { overflow: visible; text-overflow: clip; }
.pos-tab.pos-tab-rv .pos-tab-main, .pos-tab.pos-tab-rv .pos-tab-icon { color: #6d28d9; }
.pos-tab.pos-tab-rv.on { background: #7c3aed; border-color: #7c3aed; }
.pos-tab.pos-tab-rv.on .pos-tab-main, .pos-tab.pos-tab-rv.on .pos-tab-icon { color: #fff; }
.pos-side-col > .pos-rv-no { border-color: #7c3aed; }
.pos-rv-card .card-head { border-top: 3px solid #7c3aed; border-radius: 12px 12px 0 0; }
.rv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 4px 6px; border-bottom: 1px solid var(--border); }
.rv-msg { margin: 6px 4px; }
.rv-sent { min-width: 56px; color: var(--muted); }
.rv-state { min-width: 92px; text-align: end; }
.pos-cart-lines .pos-line.rv-done { background: color-mix(in srgb, #16a34a 7%, transparent); }
.pos-cart-lines .pos-line.rv-part { background: color-mix(in srgb, #d97706 7%, transparent); }
.pos-cart-lines .pos-line.rv-extra { background: color-mix(in srgb, #2563eb 7%, transparent); }
.rv-line .pos-line-name .pill { margin-top: 2px; align-self: flex-start; }
.rv-route { margin-bottom: 4px; }
.rv-totals { display: grid; gap: 2px; padding-top: 8px; border-top: 1px dashed var(--border); }
.rv-totals .rv-extra-row strong { color: #2563eb; }
.pos-side .pos-totals.rv-summary .input-sm:not(.promo-input) { width: 100%; max-width: none; }
/* In-app confirmation window (askConfirm) */
.modal.ask-box { max-width: 440px; }
.ask-body { display: flex; gap: 14px; align-items: flex-start; }
.ask-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; }
.ask-icon svg { width: 20px; height: 20px; }
.ask-icon.info { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.ask-icon.warn { background: color-mix(in srgb, #d97706 14%, transparent); color: #b45309; }
.ask-icon.danger { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.ask-text { white-space: pre-line; line-height: 1.5; padding-top: 8px; }
/* Transfer tabs always show their whole name (Transfer 1 → branch) */
.pos-tab.pos-tab-transfer { max-width: none; }
.pos-tab.pos-tab-transfer .pos-tab-label { overflow: visible; text-overflow: clip; }
/* POS header: many buttons — keep them compact so the title stays readable */
.pos-top { gap: 6px; }
.pos-top .be-title { flex: none; min-width: 110px; }
.pos-top { height: auto; min-height: 56px; padding-block: 8px; align-items: center; }
/* One row of compact buttons (scrolls sideways on a very narrow screen; More Actions' menu is placed on the screen). */
.pos-actions { flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; align-items: center; gap: 4px; }
.pos-actions > * { flex: none; }
/* (Pushed to the right with a margin, not justify-content, so a row too long scrolls instead of hiding its start.) */
.pos-actions > :first-child { margin-inline-start: auto; }
.pos-actions > .btn, .pos-actions .pos-more > .btn { padding-inline: 8px; font-size: 13px; gap: 4px; white-space: nowrap; }
.pos-top .bar-user { flex: none; }
.pos-actions > .btn svg { width: 15px; height: 15px; }
.pos-body { height: calc(100vh - var(--pos-top-h, 56px)); }
/* Reports */
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.report-grid .report-wide { grid-column: 1 / -1; }
.report-grid .card { margin: 0; }
/* POS panel: other pages open over the POS, under its header (which stays usable) */
.pos-panel { position: fixed; inset: var(--pos-top-h, 56px) 0 0 0; z-index: 40; overflow: auto; background: #f1f1f1; }
.pos-panel[hidden] { display: none; }
.pos-panel-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: #f1f1f1; border-bottom: 1px solid #e3e3e3; }
.pos-panel-title { font-size: 15px; }
.pos-panel-body { padding: 16px 24px 32px; max-width: 1320px; margin: 0 auto; }
.pos-panel-tools { display: flex; gap: 8px; align-items: center; }
td.col-actions { text-align: end; white-space: nowrap; width: 1%; }
/* POS header: More Actions drop-down */
.pos-more { position: relative; }
.pos-more > .btn { padding-inline: 10px; font-size: 13px; gap: 5px; white-space: nowrap; }
.pos-more > .btn svg { width: 15px; height: 15px; }
.pos-more-caret { font-size: 11px; opacity: .7; }
.pos-more-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 60; min-width: 210px; padding: 6px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(15, 23, 42, .16); }
.pos-more-menu[hidden] { display: none; }
.pos-more-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14px; font-weight: 500; }
.pos-more-item:hover, .pos-more-item:focus-visible { background: var(--surface-2); }
.pos-more-item svg { width: 17px; height: 17px; color: var(--muted); }
/* POS header above its panel (z 40), so the More Actions menu opens over an open panel too; modals stay on top (z 70) */
.be-topbar.pos-top { z-index: 50; }
/* Cashbox: transactions by payment method */
.tx-sum { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.tx-sum strong { color: var(--text); }
/* Cashbox: one big tab per payment method */
.tx-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 14px; }
.tx-method { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; text-align: start; font: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; transition: border-color .15s, box-shadow .15s, background .15s; }
.tx-method:hover { border-color: var(--primary); }
.tx-method.on { border: 2px solid var(--primary); padding: 13px 15px; background: color-mix(in srgb, var(--primary) 6%, var(--surface)); box-shadow: 0 4px 14px rgba(15, 23, 42, .08); }
.tx-method-name { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--muted); }
.tx-method-name svg { width: 18px; height: 18px; }
.tx-method.on .tx-method-name { color: var(--primary); }
.tx-method-amount { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.2; }
.tx-method-amount.neg { color: var(--danger); }
/* (The entries table's first row, the Opening Balance: set apart, like a heading row.) */
tr.tx-opening > td { background: var(--surface-2); }
/* (Date and Time only as wide as their values; Notes given the room — wider, its text wrapping.) */
table.tx-table-centred th.tx-col-tight { width: 1%; white-space: nowrap; padding-inline: 10px; }
table.tx-table-centred td.tr-days-col { white-space: nowrap; }
table.tx-table-centred th.tx-col-notes { width: 30%; min-width: 200px; }
/* (Its footer — the ending balance — coloured as its header.) */
table.tx-table-centred tfoot td { background: var(--surface-2); border-bottom: 0; }
/* (Every cashbox: its entries table — headers, values and the total — centred.) */
table.tx-table-centred th, table.tx-table-centred td { text-align: center; }
/* (Every cashbox: each box's name and balance in the middle.) */
.tx-methods-centred .tx-method { align-items: center; text-align: center; }
.tx-cash-actions { justify-content: flex-start; flex-wrap: wrap; margin: -2px 0 14px; }
.cashbox-end { justify-content: flex-end; flex-wrap: wrap; margin: 4px 0 24px; }
/* Cashbox: Choose Branch next to the title */
.cashbox-title { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cashbox-title h1 { margin: 0; }
.cashbox-branch-field { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cashbox-branch { min-width: 200px; max-width: 260px; }
.cashbox-period { min-width: 160px; max-width: 220px; }
.cashbox-branch-field input[type=date] { max-width: 170px; }
/* Close shift: every note / coin box the same size, value · × · count in fixed columns */
.notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 8px; }
.note-count { display: grid; grid-template-columns: minmax(0, 1fr) auto 76px; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.note-count .note-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.note-count .note-x { color: var(--muted); font-size: 12px; }
.note-count .input { width: 100%; max-width: none; min-width: 0; text-align: end; }

/* POS header: Change branch, next to the shop name */
.pos-where { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pos-change-branch { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface, transparent); color: var(--primary); font: inherit; font-size: 12px; cursor: pointer; }
.pos-change-branch:hover { background: var(--primary-soft, rgba(37, 99, 235, .08)); }
.pos-change-branch .icon, .pos-change-branch svg { width: 12px; height: 12px; }

/* POS Cashbox: Period at the end of the payment-method card's title row */
.tx-head-end { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
/* (E-Commerce Cashbox: Cash Payment / Receipt / Transfer at the head line's right end — compact, no margin of their own.) */
.tx-head-end .tx-cash-actions { margin: 0; justify-content: flex-end; gap: 6px; }
.tx-head-end .tx-cash-actions .btn { height: 32px; padding: 0 10px; font-size: 13px; }
.tx-head-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tx-head-tools .input { padding-top: 4px; padding-bottom: 4px; }
.card-head:has(.tx-head-end) .card-title { white-space: nowrap; }

/* POS: shop & user, then the date & time under them as plain text (no "POS" title) */
.pos-title { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pos-clock { white-space: nowrap; }
.pos-clock-time { font-variant-numeric: tabular-nums; }

/* POS header: Transfer Alerts — an amber count on Send Transfer (sender: missing / extra pieces to answer); click it to see them */
.pos-alert-badge { background: #d97706; cursor: pointer; }
.pos-alert-badge:hover { background: #b45309; }
/* Transfer Alerts list: number + what's waiting on the first line, branch & date under them (nothing squeezed) */
.cust-result.tr-alert-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "no pills" "where where"; row-gap: 4px; }
.tr-alert-row .tr-alert-no { grid-area: no; white-space: nowrap; }
.tr-alert-row .tr-alert-pills { grid-area: pills; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.tr-alert-row .tr-alert-pills .pill { margin: 0 !important; }
.tr-alert-row .tr-alert-where { grid-area: where; }

/* Online order, To Be Picked: scan every piece before it's handed over */
.pick-card .input { margin-bottom: 10px; font-size: 15px; }
.pick-lines { display: flex; flex-direction: column; gap: 6px; }
.pick-line { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.pick-line.done { background: var(--green-soft, #ecfdf5); border-color: #bbf7d0; }
.pick-line.xc-flash { animation: xc-flash 1.2s ease-out; }
.pick-mark { width: 18px; color: var(--green, #16a34a); font-weight: 700; text-align: center; }
.pick-count { min-width: 56px; text-align: end; }

.pick-line .grow { flex: 1; min-width: 0; }

/* Online order (On Hold): the Edit button at the end of each card's title row */
.card-head .card-edit { margin-inline-start: auto; }
/* (Several buttons in a box's header — a shipment's Print AWB, then Edit.) */
.card-head .card-actions { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; }
/* (Print AWB on Edit's left in Arabic too.) */
[dir="rtl"] .card-head .card-actions { flex-direction: row-reverse; }
.card-head .card-actions .card-edit { margin-inline-start: 0; }
.card-head .card-actions:empty { display: none; }
.card-edit .ico { width: 14px; height: 14px; }

/* Online order: History (under Payment) — newest first */
.order-history { display: flex; flex-direction: column; gap: 12px; }
.hist-row { display: flex; gap: 10px; align-items: flex-start; }
.hist-dot { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--primary); }
.hist-dot.shopify { background: #95bf47; }
.hist-changes { margin: 4px 0 2px; padding-inline-start: 18px; color: var(--text-2); font-size: 13px; }
.hist-changes li { margin: 1px 0; }
.ico.flip-v { transform: rotate(180deg); }
.card.collapsed .card-head { border-bottom: 0; }

/* Online order: Conversion summary and Tags */
.conv { display: flex; flex-direction: column; gap: 10px; }
.conv-row { display: flex; gap: 10px; align-items: flex-start; }
.conv-row > .ico { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
.conv-row .sub a { word-break: break-all; }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; }
.tag-x { border: 0; background: none; padding: 0 2px; cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1; }
.tag-x:hover { color: var(--danger); }
.card .input-sm + datalist + .chips, .card .input-sm ~ .chips { margin-top: 10px; }

/* Orders list: tags column */
.list-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 90px; }
.chip.small { font-size: 11.5px; padding: 1px 7px; }
.list-tags .tag-edit { width: 26px; height: 26px; }
.list-tags .tag-edit .ico { width: 14px; height: 14px; }
.tag-editor .chips { margin-top: 10px; }
.tag-editor .input { width: 100%; max-width: none; }

/* Send to Courier: the Bosta part */
.bosta-box { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.bosta-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.text-end { text-align: end; }

/* Order page: neutral notice (returned RTO), returns box */
.info-box { background: var(--surface-2); border: 1px solid var(--border); padding: 9px 12px; border-radius: var(--radius); font-size: 13px; }
.ret-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.ret-row:last-child { border-bottom: 0; }
.ret-row .pill { margin-inline-end: 6px; }
.ret-lines { margin: 6px 0 0; padding-inline-start: 18px; font-size: 13px; }
.choice-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 4px 0 10px; }

/* Product page: Arabic option names and their values */
.ar-option { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; }
.ar-values { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 12px; padding-inline-start: 14px; }

/* Purchase return: From a purchase order / Free-form switch */
.seg { display: flex; gap: 6px; flex-wrap: wrap; }

/* Every module's top bar (E-Commerce, Retails, Supply Chain, Marketing, Settings): one row — the page buttons from the
   start, then the module's name, language and user at the end (leaving the module is in the user menu) */
.be-topbar.mod-bar { flex-wrap: nowrap; }
.be-topbar.mod-bar > .orders-head-actions, .be-topbar.mod-bar > .pos-actions { order: 1; flex: 0 1 auto; margin-inline-start: 0; justify-content: flex-start; min-width: 0; }
.be-topbar.mod-bar > .mod-title { order: 2; flex: none; margin-inline-start: auto; padding-inline: 12px 6px; text-align: end; }
.be-topbar.mod-bar > .mod-title h1 { margin: 0; font-size: 18px; white-space: nowrap; }
.be-topbar.mod-bar > .bar-user { order: 3; flex: none; }
.be-topbar.mod-bar > .orders-head-actions { gap: 4px; }
.be-topbar.mod-bar > .orders-head-actions > .btn { padding-inline: 7px; }
.be-topbar.mod-bar > .pos-actions > :first-child { margin-inline-start: 0; }
.be-topbar.mod-bar > .pos-title { align-items: flex-end; min-width: 0; }

/* The branch / warehouse picker that is a module bar's title (users with several branches) */
.be-topbar.mod-bar > .mod-title { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.2; }
.mod-branch { font: inherit; font-size: 12px; color: var(--muted); background: #f6f7f9; border: 1px solid var(--border); border-radius: 6px; padding: 1px 4px; cursor: pointer; max-width: 220px; }
.mod-branch:hover, .mod-branch:focus { border-color: var(--border); background: #fff; outline: none; }

/* Variant row: SKU · barcode on one line */
.vcodes { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vcodes > .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcodes-sep { opacity: .6; }
/* Variant list with the Cost column (before Price) for who may see costs */
.vlist.has-cost .vrow { grid-template-columns: 40px minmax(120px, 1fr) 96px 96px 96px 64px 64px; min-width: 620px; }
/* Variants: Set Fixed Cost / Price / Compare Price for all of them */
/* The tools row above the variant table: its tools across the Variant column, the Set buttons over their columns */
.vrow.vtools-row { cursor: default; background: transparent; border-bottom: 0; padding-top: 10px; padding-bottom: 10px; align-items: end; }
.vtools-row > .vtools-left { grid-column: span 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
/* Group by, Bulk edit, Generate SKUs & Barcodes, Print barcodes: one line of tools (wrapping when narrow). */
.vtools-row .sku-tools { display: contents; }
.btn.btn-icon-only { padding-inline: 8px; gap: 0; }
.btn.btn-icon-only svg { width: 16px; height: 16px; }
/* Every tool in the row is the same height: Group by, Bulk edit, Generate & Print Barcodes and the Set buttons. */
.vtools-row .vtools-left select, .vtools-row .vtools-left .btn, .vtools-row .vfixed-btn { height: 38px; min-height: 38px; box-sizing: border-box; }
.btn.btn-icon-only { gap: 4px; }
.vtools-row .vcodes-btn { width: 104px; padding: 2px 6px; white-space: normal; line-height: 1.2; text-align: center; justify-content: center; }
.vtools-row .vgroup-row { gap: 6px; }
.vtools-row .vgroup-row select { width: 90px; min-width: 0; }
.vrow.vtools-row:hover { background: transparent; }
.vrow.vtools-row + .vhead { border-top: 1px solid var(--border); }

.vtools-row .vprice { overflow: visible; }
.vfixed-cell { display: flex; }
/* Each Set button is exactly its column's width, and the column's header and amounts are centred under it. */
.vfixed-btn { width: 100%; justify-content: center; text-align: center; white-space: normal; line-height: 1.2; font-size: 12px; padding: 4px; }
.vlist .vhead .vprice, .vlist .vrow .vval { text-align: center; }
/* Category search results: the category's name, and its full path under it. */
.cat-opt { display: flex; flex-direction: column; min-width: 0; text-align: start; }
.cat-opt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Product page: Publishing (sales channels and markets). */
.pub-group + .pub-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.pub-title { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.pub-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.pub-row small { margin-inline-start: auto; }
/* Product page: a metafield the ERP can't edit (shown as its value). */
.mf-readonly { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Products list: columns chosen and moved (Columns menu, or drag a header). */
.table-wrap thead th[data-col] { cursor: grab; user-select: none; }
.table-wrap thead th.dragging { opacity: .45; }
.table-wrap thead th.drop-before { box-shadow: inset 3px 0 0 #005bd3; }
.table-wrap thead th.drop-after { box-shadow: inset -3px 0 0 #005bd3; }
[dir="rtl"] .table-wrap thead th.drop-before { box-shadow: inset -3px 0 0 #005bd3; }
[dir="rtl"] .table-wrap thead th.drop-after { box-shadow: inset 3px 0 0 #005bd3; }
td.col-wrap { max-width: 220px; white-space: normal; font-size: 13px; color: var(--text-2); }
.list-cols { inset-inline-end: 0; inset-inline-start: auto; }
/* Products list: a product opened (▸) to show its variants under it. */
.row-toggle { display: flex; align-items: center; gap: 6px; }
.vtoggle-btn { width: 26px; height: 26px; flex: none; }
.vtoggle-btn svg { transform: rotate(-90deg); transition: transform .15s; }
[dir="rtl"] .vtoggle-btn svg { transform: rotate(90deg); }
.vtoggle-btn.open svg, [dir="rtl"] .vtoggle-btn.open svg { transform: none; }
.vtoggle-space { width: 26px; flex: none; }
tr.row-open > td { border-bottom-color: transparent; }
tr.variant-row > td { background: var(--surface-2); font-size: 13px; padding-top: 6px; padding-bottom: 6px; }
.variant-name { display: flex; flex-direction: column; padding-inline-start: 80px; }
/* Settings → SKU format */
.sku-layout { align-items: start; }
.sku-parts { gap: 6px; }
.sku-part { cursor: pointer; border: 1px solid var(--border); background: var(--surface); }
.sku-part:hover { border-color: var(--primary); color: var(--primary); }
.sku-preview { display: grid; gap: 4px; }
.sku-preview-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 6px; background: var(--surface-2); }
@media (max-width: 900px) { .sku-layout { grid-template-columns: 1fr; } }
/* Dashboard without a sidebar: a tile per department above the dashboard. */
.shell.no-sidebar .body { grid-template-columns: 1fr; }
.shell.no-sidebar .header .logo-area { width: auto; background: transparent; border-bottom: 0; padding-inline-start: 24px; }
.dept-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.dept-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.dept-tile:hover { border-color: var(--primary); box-shadow: 0 6px 18px rgba(15, 23, 42, .08); transform: translateY(-1px); }
.dept-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }
.dept-ico svg { width: 20px; height: 20px; }
.dept-name { font-weight: 600; font-size: 15px; line-height: 1.3; }
.dept-tile .nav-badge { position: absolute; top: 10px; inset-inline-end: 10px; margin: 0; }
@media (max-width: 640px) { .dept-tiles { grid-template-columns: repeat(2, 1fr); } }
/* Home Page: company structure (an org chart: the company, a line down, the departments in a row, each with its
   branches and roles under it). On narrow screens the departments stack. */
.org { display: flex; flex-direction: column; align-items: center; }
.org-top { display: flex; justify-content: center; position: relative; padding-bottom: 22px; }
.org-top::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 2px; height: 22px; background: var(--border-strong); }
.org-node { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text); }
.org-company { flex-direction: column; gap: 6px; padding: 14px 22px; border: 2px solid var(--primary); text-align: center; min-width: 220px; }
.org-company strong { font-size: 16px; }
.org-logo { height: 34px; max-width: 160px; object-fit: contain; }
.org-head-role { display: flex; flex-direction: column; font-size: 13px; }
.org-row { display: grid; grid-template-columns: repeat(var(--org-cols, 5), minmax(0, 1fr)); gap: 14px; width: 100%; position: relative; }
.org-col { position: relative; padding-top: 22px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.org-col::before { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 22px; background: var(--border-strong); }
/* the line across, from the first department's middle to the last one's */
.org-col::after { content: ''; position: absolute; top: 0; left: -7px; right: -7px; height: 2px; background: var(--border-strong); }
.org-col:first-child::after { left: 50%; }
.org-col:last-child::after { right: 50%; }
[dir="rtl"] .org-col:first-child::after { left: -7px; right: 50%; }
[dir="rtl"] .org-col:last-child::after { right: -7px; left: 50%; }
.org-dept { justify-content: center; font-weight: 600; }
.org-dept .dept-ico { width: 32px; height: 32px; }
.org-dept .dept-name { font-size: 14px; }
.org-sub { display: flex; flex-direction: column; gap: 6px; padding-inline-start: 10px; border-inline-start: 2px solid var(--border); margin-inline-start: 14px; }
.org-branch, .org-role { padding: 7px 10px; border-radius: 8px; background: var(--surface-2); font-size: 13px; }
.org-branch { display: flex; align-items: center; gap: 6px; }
.org-branch svg, .org-role-head svg { width: 14px; height: 14px; color: var(--text-2); flex: none; }
.org-branch small { margin-inline-start: auto; }
.org-role-head { display: flex; align-items: center; gap: 6px; }
.org-role-head .pill { margin-inline-start: auto; }
.org-people { display: flex; flex-direction: column; margin-top: 4px; padding-inline-start: 20px; color: var(--text-2); }
.org-empty { padding: 4px 2px; }
.org-unassigned { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 900px) {
  .org-row { grid-template-columns: 1fr; }
  .org-col::after { display: none; }
  .org-col { padding-top: 14px; }
  .org-col::before { height: 14px; }
}
.org-dept-text { display: flex; flex-direction: column; min-width: 0; }
.org-dept-text small { font-weight: 400; font-size: 12px; }
/* Edit structure window */
.org-ed-list { display: grid; gap: 8px; margin-bottom: 10px; }
.org-ed-dept { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.org-ed-move { display: flex; flex-direction: column; gap: 2px; }
.org-ed-move .icon-btn { width: 24px; height: 22px; }
.org-ed-fields { display: grid; grid-template-columns: 1fr 1fr 1.2fr 1.2fr; gap: 8px; }
.org-ed-loc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.org-ed-mgr { display: flex; flex-direction: column; gap: 4px; }
.org-ed-x { width: 30px; }
.org-ed-role { display: grid; grid-template-columns: 170px auto 1fr; gap: 10px; align-items: start; padding: 8px; border-bottom: 1px solid var(--border); }
.org-ed-chips { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.org-ed-chip.muted { opacity: .6; }
.org-ed-branch { display: grid; grid-template-columns: 1fr 260px; gap: 10px; align-items: center; }
@media (max-width: 760px) {
  .org-ed-dept, .org-ed-fields, .org-ed-role, .org-ed-branch { grid-template-columns: 1fr; }
}
.org-ed-move .ico.up { transform: rotate(180deg); }
/* Roles & Permissions: permissions by Module → Tab. */
.perm-dept { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.perm-dept-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.perm-dept-name { font-weight: 700; font-size: 14px; }
.perm-tabs { padding: 12px; }
/* Permissions as one table: a row per permission × View · Edit · Create tick boxes, under its tab's (and page's) heading row. */
.perm-matrix { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 480px; }
.perm-matrix th, .perm-matrix td { border: 1px solid var(--border); padding: 7px 10px; vertical-align: middle; text-align: start; }
.perm-matrix thead th { background: var(--surface-2, #f8fafc); font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); }
.perm-matrix .perm-cell { width: 110px; text-align: center; }
.perm-matrix thead .perm-cell .check { justify-content: center; }
.perm-matrix tbody th { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--text); }
.perm-matrix .perm-tab-row th { background: var(--surface-2, #f8fafc); font-weight: 600; }
.perm-matrix .perm-page-row th { font-size: 12px; font-weight: 600; color: var(--text-2); padding-inline-start: 22px; }
.perm-matrix .perm-row th { padding-inline-start: 22px; }
.perm-matrix .perm-page-row + .perm-row th, .perm-matrix .perm-page-row ~ .perm-row th { padding-inline-start: 34px; }
.perm-tab { margin: 0; }
.perm-also { display: block; font-weight: 400; font-size: 11px; margin-top: 2px; }
.perm-modules { display: flex; flex-wrap: wrap; gap: 8px; }
.perm-module { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; font-weight: 600; }
.perm-module:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.perm-none { margin: 0 0 8px; }
/* Role window: 1 Department → 2 Branch → 3 Modules & tabs */
.role-step { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; font-weight: 700; font-size: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.role-step-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px; }
.role-branch-choice { display: flex; gap: 18px; margin-bottom: 8px; }
.role-branches { display: flex; flex-wrap: wrap; gap: 8px; }
.org-mods { display: flex; flex-wrap: wrap; gap: 4px; }
.org-mods .chip { font-size: 11px; padding: 2px 8px; }
/* Company Structure: Department → Module → Location → Positions */
.org-mod { border: 1px solid var(--border); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.org-mod-head .chip { font-weight: 600; font-size: 12px; }
.org-loc { display: flex; flex-direction: column; gap: 4px; padding-inline-start: 8px; border-inline-start: 2px solid var(--border); }
.org-pos { display: flex; flex-direction: column; gap: 4px; padding-inline-start: 10px; }
.org-pos .org-role { background: var(--surface-2); }
/* Edit structure: the tree under each department */
.org-ed-dept-tree { grid-template-columns: auto 1fr auto auto; }
.org-ed-dept-tree .org-tree { grid-column: 1 / -1; }
.org-tree { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 0; border-top: 1px dashed var(--border); }
.org-tree-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.org-tree-choices { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.org-tree-mod { margin-inline-start: 10px; padding: 8px 10px; border-inline-start: 3px solid var(--primary-soft); background: var(--surface-2); border-radius: 6px; display: flex; flex-direction: column; gap: 6px; }
.org-tree-loc { margin-inline-start: 14px; padding: 6px 10px; border-inline-start: 2px solid var(--border-strong); background: var(--surface); border-radius: 6px; display: flex; flex-direction: column; gap: 4px; }
.org-tree-head { display: flex; align-items: center; gap: 8px; }
.org-tree-head svg { width: 14px; height: 14px; }
/* Role window: where the position works */
.role-where-list { margin: 0; padding-inline-start: 18px; display: grid; gap: 2px; font-size: 13px; }
.org-ed-boxes { grid-column: 1 / -1; display: grid; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--border); }
.org-ed-box { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 8px; align-items: center; }
@media (max-width: 760px) { .org-ed-box { grid-template-columns: 1fr; } }
/* Home Page: a big tile for every department */
/* (Rows share the width: 5 tiles = 3 on top, 2 wider below — no tile left alone.) */
.dept-tiles { display: flex; flex-wrap: wrap; gap: 18px; }
.dept-tiles > .dept-tile { flex: 1 1 360px; }
.dept-tile { min-height: 210px; padding: 26px 26px 22px; gap: 14px; border-radius: 16px; }
.dept-tile .dept-ico { width: 64px; height: 64px; border-radius: 16px; }
.dept-tile .dept-ico svg { width: 32px; height: 32px; }
.dept-tile .dept-name { font-size: 22px; font-weight: 700; }
.dept-desc { color: var(--text-2); font-size: 14px; line-height: 1.5; flex: 1; }
.dept-go { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 600; font-size: 14px; }
.dept-go svg { width: 16px; height: 16px; transition: transform .15s; }
.dept-tile:hover .dept-go svg { transform: translateX(3px); }
[dir="rtl"] .dept-go svg { transform: scaleX(-1); }
[dir="rtl"] .dept-tile:hover .dept-go svg { transform: scaleX(-1) translateX(3px); }
.dept-tile .nav-badge { top: 16px; inset-inline-end: 16px; }
@media (max-width: 640px) { .dept-tiles { grid-template-columns: 1fr; } .dept-tile { min-height: 0; } }

/* People & Culture */
.hr-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

/* Online orders: Orders ⇄ Return & Exchange — a segmented switch on the right (unlike the header's buttons). */
/* The switch on its own row (right, inside the card's padding), the phase tabs in the row below. */
/* Order page → Shipping address: the one suggested from the customer's last order. */
.suggest-box { margin-top: 8px; padding: 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); }
/* Order page → Items: one group per shipment, then what's still to send. */
.items-group + .items-group { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.items-group-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 6px; }
.items-group .ship-head, .ship-card .ship-head { background: var(--surface-2); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 6px; border-bottom: 0; }
.ship-card .card-title { direction: ltr; unicode-bidi: plaintext; }
.ship-cancelled { opacity: .8; }
.ship-cancelled .card-title { color: var(--muted); }
/* …its items as the Shipment box shows them (price × qty and a discount % to type) and the box's money under them. */
.edit-lines { margin-top: 4px; }
/* Create New Order: the customer found by phone — their details, then their earlier addresses. */
.cust-suggest { margin: 4px 0 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.cust-suggest[hidden] { display: none; }
.cust-suggest-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cust-suggest-addr { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 6px; margin-top: 6px; border-top: 1px solid var(--border); font-size: 13px; }
/* The transfer forms' item list (New Transfer / Request, Receive, Branch Stock): no scroll of its own — it grows with its
   items and the whole page scrolls; an item picked highlighted. */
.tr-req-list { overflow: visible; }
.tr-req-on td, tr.variant-row.tr-req-on > td { background: var(--primary-soft); }.tr-req-list tr[hidden] { display: none; }
.tr-req-asked { display: block; color: var(--primary); font-weight: 500; }
.tr-req-list .variant-row .variant-name { padding-inline-start: 34px; }
.toolbar[hidden], .toolbar select[hidden] { display: none; }
/* Transfer Requests: a request's items, collapsed under its row (▸) — a small table. */
tr.tr-req-items[hidden] { display: none; }
tr.tr-req-items > td { padding: 6px 12px 12px; padding-inline-start: 46px; }
.tr-req-items-table { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.tr-req-items-table th, .tr-req-items-table td { padding: 6px 10px; }
.tr-req-items-table tr[hidden] { display: none; }
/* A transfer's page: its items by product — printed, every variant shows (collapsed or not). */
@media print { tr.variant-row[hidden] { display: table-row !important; } .tr-group-head .vtoggle-btn { display: none; } }
/* POS Send Transfer: the Branch Stock button beside the search (a transfer tab only). */
.pos-stock-btn { flex: none; white-space: nowrap; }
.pos-stock-btn[hidden] { display: none; }
/* POS Send / Receive Transfer: lines by product — a product's line (▸), its variants' lines under it, indented. */
.pos-line[hidden] { display: none !important; }
.pos-line.pos-group { cursor: pointer; }
.pos-line.pos-group .pos-line-no { display: flex; align-items: center; justify-content: center; }
.pos-var-line .pos-line-name { padding-inline-start: 18px; }
/* (Product › colour › size: the colour's line one step in, its sizes another.) */
.pos-colour-line .pos-line-no { padding-inline-start: 14px; }
.pos-colour-line { background: var(--surface-2); }
.pos-size-line .pos-line-name { padding-inline-start: 36px; }
/* Send Transfer: its items by product — a product's variants under its line. */
.tr-items tr[hidden] { display: none; }
.tr-items .variant-row .variant-name { padding-inline-start: 34px; }
.tr-req-items-table .variant-row .variant-name { padding-inline-start: 34px; }
/* (Product › colour › size: each level further in — the Transfers lists, a transfer's page, Send Transfer.) */
.row-toggle.tr-depth-1 { padding-inline-start: 26px; }
.variant-name.tr-depth-1 { padding-inline-start: 34px; }
.variant-name.tr-depth-2 { padding-inline-start: 72px; }
tr.tr-colour-row > td { background: var(--surface-2); }
/* (A colour's / variant's own picture — a little smaller than its product's — beside its name, not above it.) */
.variant-name.me .thumb, .tr-colour-row .me .thumb { width: 32px; height: 32px; }
.variant-name.me { flex-direction: row; align-items: center; gap: 8px; }
/* Each level's picture one step in from the one above: product (after its ▸), colour (26px in, after its ▸), its sizes
   (26px further) — a variant straight under its product: where a colour's picture is. (Over the lists' older 34px.) */
tr.variant-row .variant-name.tr-depth-1 { padding-inline-start: 58px; }
tr.variant-row .variant-name.tr-depth-2 { padding-inline-start: 84px; }
tbody tr.variant-row[hidden] { display: none; }
/* Send Transfer's list: Cancel · Edit · Send, each in its own place so they line up from row to row. */
.tr-act-slots { display: inline-grid; grid-template-columns: 150px 36px 36px; align-items: center; justify-items: center; gap: 4px; }
.tr-act-slots > * { margin: 0 !important; }
/* Receive Transfers: Receive — or, received, Undo Goods Receiving — in one place. */
.tr-act-slots.tr-recv-slots { grid-template-columns: 150px; }
/* Receive's Extra Items rows: the Received box where the items' boxes are; ✕ just beside it. */
.tr-extra-qty { position: relative; display: inline-block; }
.tr-extra-qty > .icon-btn { position: absolute; inset-inline-start: calc(100% + 4px); top: 50%; transform: translateY(-50%); }
/* Cashboxes' quick ranges (Today · Yesterday · This Week · This Month · Last 30 Days), after From / To; the date fields
   open their calendar on a click anywhere. */
.cashbox-quick { display: inline-flex; flex-wrap: wrap; gap: 4px; }
/* (In a card's head: From / To on the title's line; the quick ranges on a row of their own under it, starting where the
   title starts; the head's other side — Cash Payment / Receipt — stays at the top.) */
.tx-head-start > .cashbox-quick { flex-basis: 100%; }
.card-head:has(.tx-head-start > .cashbox-quick) { align-items: flex-start; }
.cashbox-quick .btn { height: 30px; padding: 0 9px; font-size: 12.5px; }
.cashbox-branch-field input[type=date] { cursor: pointer; }
/* Transactions By Payment Method: its title and (the online orders' cashbox) the Period next to it, on the left. */
.tx-head-start { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.tx-head-start .cashbox-title { margin: 0; gap: 10px; }
/* (Its Period / From / To as compact as the title line — lined up with the title, the head no taller.) */
.tx-head-start .cashbox-branch-field { gap: 6px; line-height: 1; }
.tx-head-start .cashbox-branch-field .muted.small { font-size: 13px; }
.tx-head-start .cashbox-branch-field .input { height: 30px; padding: 3px 8px; font-size: 13px; }
.tx-head-start .card-title { line-height: 30px; }
/* (A payment / destination choice that doesn't apply — e.g. Cash Transfer to Cash, from Cash — hidden.) */
.pay-method[hidden] { display: none; }
/* Transfer lists: the Priority, Days and Status columns centred (header and values). */
th.tr-days-col, td.tr-days-col { text-align: center; }
/* New Transfer: Transfer From · Transfer To · Shipping by on one row (stacked on a phone). */
.grid-3.tr-send-head { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-3.tr-send-head { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid-3.tr-send-head { grid-template-columns: 1fr; } }
/* New Transfer Request: its filter bar lined up with the Notes field (no side padding, no line), the search box wider. */
.toolbar.tr-req-new-filters { padding: 4px 0 12px; border-bottom: 0; }
.toolbar.tr-req-new-filters .input[type=search] { flex: 1 1 320px; max-width: none; }
/* New Transfer Request's stock list, Transfer Requests' items list: columns centred, Product (the first) at the start. */
.tr-req-new-list th, .tr-req-new-list td, .tr-items-centred th, .tr-items-centred td { text-align: center; }
.tr-req-new-list th:first-child, .tr-req-new-list td:first-child, .tr-items-centred th:first-child, .tr-items-centred td:first-child { text-align: start; }
/* (The quantity boxes too: centred in their column, the number centred inside.) */
.tr-req-new-list td input.input { text-align: center; margin-inline: auto; display: block; }
/* Transfer Requests & Receive Transfers (E-Commerce & POS): every column's header and values centred (not the items opened under a row). */
.tr-req-table > thead > tr > th, .tr-req-table > tbody > tr:not(.tr-req-items) > td { text-align: center; vertical-align: middle; }
/* (Transfer No. — the first column — at the start, as before.) */
.tr-req-table > thead > tr > th:first-child, .tr-req-table > tbody > tr:not(.tr-req-items) > td:first-child { text-align: start; }
.tr-req-table > tbody > tr:not(.tr-req-items) > td.tr-req-acts > *:first-child { margin-inline-start: 0; }
/* Transfer Requests: Cancel Transfer icon, Edit, then the Send Transfer icon. */
.tr-req-acts { white-space: nowrap; text-align: end; }
.tr-req-acts > * { vertical-align: middle; margin-inline-start: 4px; }
.tr-req-send { color: var(--primary); }
.tr-req-cancel:hover { color: var(--danger); }
/* Create New Order (#/orders/new): laid out as an order page. */
.ship-money-row .edit-disc-label { flex-wrap: wrap; }
/* (Delivery Method / Payment Method: their dropdowns at the right end, both as wide.) */
.create-pay-row { align-items: center; min-height: 36px; }
.create-pay-row select.input { width: 220px; max-width: none; margin-inline-start: auto; }
/* (The last item, nothing added after it: no line of its own — the money box's under it is the one.) */
.edit-lines > .order-line:has(+ div:empty) { border-bottom: 0; }
.edit-inline-foot { justify-content: flex-end; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
/* (Edited in the card itself: its own layout — the icons under an item's total, the fields at the end of the money rows.) */
.edit-line-acts { display: flex; justify-content: flex-end; gap: 2px; margin-top: 2px; }
.edit-line-acts .icon-btn { width: 28px; height: 28px; }
.edit-line .order-line-qty .edit-in { justify-content: flex-end; }
.edit-ctl-inline { width: auto; display: inline-flex; gap: 6px; align-items: center; }
.edit-ctl-inline .input { width: 110px; }
.edit-ctl-inline select.input:only-child { width: auto; max-width: 220px; }
.edit-ctl-inline input.input + select.input { width: 72px; }
.ship-money .edit-ctl-row { min-height: 36px; align-items: center; }
.edit-add-inline { margin: 4px 0 4px; }
.edit-disc-label { display: inline-flex; align-items: center; gap: 8px; }
.edit-disc-label select.input { width: auto; max-width: 220px; }
.edit-disc-label [hidden] { display: none !important; }
.edit-row-label { min-width: 124px; }
.edit-disc-label input.input { width: 90px; }
.ship-money-row:has(.edit-disc-label) { align-items: center; min-height: 36px; }
.edit-line-in { display: flex; align-items: center; gap: 6px; color: var(--text-2); white-space: nowrap; }
.edit-line .order-line-total { min-width: 90px; text-align: end; }
.edit-sum { margin-top: 14px; }
.edit-pay-first { margin-top: 24px; }
.order-line.edit-items-sub { border-top: 1px solid var(--border); border-bottom: 0; }
.edit-sub-gap { width: 80px; flex: none; } /* the discount and trash buttons' place */
.edit-disc { position: relative; flex: none; }
.edit-disc-btn.on { color: var(--primary); }
.edit-disc-tag { color: var(--primary); font-weight: 500; }
.edit-disc-pop { position: absolute; top: calc(100% + 4px); inset-inline-end: 0; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); white-space: nowrap; font-size: 13px; }
.edit-disc-pop[hidden] { display: none; }
/* (The amounts in one column at the right edge, under the items' totals; the labels in line with the items' names — the
   picture's width + the row's gap in.) */
.edit-sum-row { display: flex; align-items: center; gap: 12px; padding: 3px 0; font-size: 13px; }
.edit-sum-row .grow { flex: 1; }
.edit-sum-row.strong { font-weight: 600; font-size: 14px; }
.edit-sum-row .order-line-total { min-width: 90px; text-align: end; }
/* Promo code / order discount: the field over the discount + trash buttons' place and the totals' column. */
.edit-ctl { width: 182px; flex: none; display: flex; gap: 6px; justify-content: flex-end; }
.edit-ctl .input { min-width: 0; }
.edit-ctl select.input:only-child { width: 100%; }
.edit-ctl input.input { flex: 1; width: auto; }
.edit-ctl input.input + select.input { width: 72px; flex: none; }
.edit-ctl input.input + .btn { flex: none; white-space: nowrap; }
.edit-ctl-row { min-height: 40px; }
.edit-line.edit-removed .grow, .edit-line.edit-removed .thumb, .edit-line.edit-removed .order-line-total { opacity: .45; }
.edit-line.edit-removed .grow strong { text-decoration: line-through; }
.edit-remove { color: var(--muted); }
.edit-remove:hover { color: var(--danger, #c0392b); }
@media (max-width: 640px) { .edit-line-in { flex-wrap: wrap; } }
/* Promo code tags (a shipment box's payment): ticket-style — a tag icon, the code in bold; the ERP's in blue with ×. */
.promo-tags { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.promo-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px dashed var(--border-strong); border-radius: 6px;
  background: var(--surface-2); color: var(--text); font-size: 12px; letter-spacing: .04em; }
.promo-tag .ico { width: 13px; height: 13px; }
.promo-tag.erp { border-color: var(--primary); color: var(--primary); background: transparent; }
.promo-tag-x { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 2px; font-size: 14px; line-height: 1; }
.promo-tag-x:hover { color: var(--red, #dc2626); }
/* A shipment / return box's money: items, shipping fee, total (or the exchange's cash difference). */
.ship-money { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.ship-money-row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; font-size: 13px; }
.ship-money-row.strong { font-weight: 600; }
/* WhatsApp next to a phone number (orders list, order page). */
.phone-wa { display: inline-flex; align-items: center; gap: 6px; }
.wa-link { display: inline-flex; line-height: 0; color: #25d366; }
.wa-link:hover { color: #128c7e; }
.wa-link.wa-locked, .wa-link.wa-locked:hover { color: var(--muted); opacity: .45; cursor: not-allowed; }
.wa-ico { width: 16px; height: 16px; fill: currentColor; }
/* Put On Hold / Change Hold Reason: the items tables (missing / defected items, Find In Another Branch) — every column
   centred, headers and the lines under the item names too. */
.hold-items th, .hold-items td { text-align: center; }
/* …except the Item column (its header, the name and the line under it): at the start. */
.hold-items th:first-child, .hold-items td:first-child { text-align: start; }
/* The online orders list: every column centred (headers, values, sub-lines). */
.orders-list th, .orders-list td { text-align: center; }
.tabs-with-switch { display: flex; flex-direction: column; }
.tabs-with-switch > .mode-switch-row { order: -1; display: flex; justify-content: flex-end; padding: 12px 12px 4px; }
/* No scroll bar under the phase tabs: they wrap onto a second line when they don't fit. */
.tabs-with-switch > .tabs { flex-wrap: wrap; overflow: visible; scrollbar-width: none; }
.tabs-with-switch > .tabs::-webkit-scrollbar { display: none; }
.mode-switch { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; }
.mode-seg { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; font-size: 13px; font-weight: 500;
  color: var(--muted); text-decoration: none; white-space: nowrap; }
.mode-seg:hover { color: var(--text); }
.mode-seg.on { background: var(--surface); color: var(--primary); font-weight: 600; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.hr-late { display: flex; flex-direction: column; gap: 4px; }
.hr-late input { width: 120px; }
.tab-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.org-dept-loc { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; font-size: 12px; color: var(--muted, #6b7280); }
.org-dept-loc svg { width: 13px; height: 13px; flex: none; }
.org-clickable { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.org-clickable:hover { border-color: var(--primary, #2563eb); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #2563eb) 18%, transparent); }
.org-person { font: inherit; background: none; border: 0; padding: 0; text-align: start; cursor: pointer; color: inherit; }

.org-no-team { border-style: dashed; }
.org-form-actions { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.grip-col { width: 28px; padding-inline-end: 0 !important; }
tr.dragging { opacity: .4; }
tr.drop-target td { box-shadow: inset 0 2px 0 var(--primary); }
.org-grip { height: auto; width: 16px; margin-inline-start: -6px; flex: none; }
.org-col.dragging { opacity: .4; }
.org-col.drop-target > .org-dept { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft, #e8ecfb); }
th.center, td.center { text-align: center; }
.yn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.yn .ico { width: 14px; height: 14px; stroke-width: 3; }
.yn-yes { background: var(--success-soft, #ecfdf3); color: var(--success, #16a34a); }
.yn-no { background: var(--danger-soft, #fef2f2); color: var(--danger, #dc2626); }
.org-people-flat { padding-inline-start: 0; margin-top: 0; gap: 2px; }
.dept-teams { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.dept-team-row { display: grid; grid-template-columns: 20px 1.2fr 1fr 1.2fr 34px; gap: 8px; align-items: center; }
.dept-team-row.dragging { opacity: .4; }
.dept-team-row.drop-target { box-shadow: inset 0 2px 0 var(--primary); }
@media (max-width: 640px) { .dept-team-row { grid-template-columns: 20px 1fr 34px; } .dept-team-row input + input, .dept-team-row select { grid-column: 2; } }
.org-person { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; padding: 2px 0; }
.org-person-name { color: var(--text, inherit); }
.org-person-title { font-size: 11px; color: var(--muted, #6b7280); }
button.org-person:hover .org-person-name { color: var(--primary); text-decoration: underline; }
/* Bulk editors like Shopify's: the spreadsheet fills the screen under the top bar (no card), money shows the currency. */
.be-body { padding: 0; }
.be-body > .error-box { margin: 12px 16px; }
.be-sheet { border: 0; border-radius: 0; background: #fff; }
.be-sheet .sheet-wrap { max-height: calc(100vh - 56px); height: calc(100vh - 56px); }
.be-sheet table.sheet { min-width: 100%; }
.be-sheet .sheet th:last-child, .be-sheet .sheet td:last-child { border-inline-end: 0; }
.be-sheet thead th { border-bottom: 1px solid #e3e3e3; }
.sheet td.sheet-money { position: relative; }
.sheet td.sheet-money::before { content: attr(data-cur); position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #8a8a8a; pointer-events: none; }
.sheet td.sheet-money .sheet-input { padding-inline-start: 46px; }
.be-help-tip { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #c9cccf; color: #616161; font-size: 12px; font-weight: 600; cursor: help; flex: none; }
.be-help-tip:focus { outline: 2px solid #005bd3; outline-offset: 1px; }
/* Product page: the header with Discard / Save stays at the top while scrolling (under the Supply Chain bar). */
.sticky-head { position: sticky; z-index: 15; top: 0; background: var(--bg, #f1f1f1); margin-inline: -20px; padding: 12px 20px; margin-top: 0; }
.sticky-head.is-stuck { box-shadow: 0 1px 0 var(--border), 0 4px 10px rgba(0,0,0,.06); }
.sheet .sheet-ro { display: block; padding: 0 10px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.be-sheet select.sheet-input { min-width: 110px; cursor: pointer; }
/* Bulk editors: the Columns menu scrolls (many columns); the description cell. */
.sheet-cols, .be-menu { max-height: min(60vh, 460px); overflow-y: auto; overscroll-behavior: contain; }
.sheet-desc { display: block; width: 100%; max-width: 280px; height: 40px; padding: 0 10px; border: 0; background: transparent; text-align: start; font: inherit; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.sheet-desc:hover { background: #f4f6fb; }
.sheet-cols { min-width: 300px; }
.sheet-cols .check { white-space: nowrap; }
.section-title { font-size: 16px; margin: 4px 0 6px; }
/* A button with red text (e.g. Clear SKU & Barcode). */
.btn.btn-danger-text { color: var(--danger, #dc2626); }
.btn.btn-danger-text:hover { background: var(--danger-soft, #fef2f2); border-color: var(--danger, #dc2626); }
.be-menu button.menu-danger { color: var(--danger, #dc2626); }
/* Product → Translate: English beside Arabic. */
.tr-page { max-width: 1100px; }
.tr-row { margin-bottom: 14px; }
.tr-label { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 500; }
.tr-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.tr-en { padding: 8px 10px; background: var(--bg, #f8fafc); border: 1px solid var(--border); border-radius: 6px; min-height: 36px; color: var(--text-2); white-space: pre-wrap; }
.tr-en-rich .rte-body { background: var(--bg, #f8fafc); color: var(--text-2); }
.tr-values { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--border); }
@media (max-width: 700px) { .tr-pair { grid-template-columns: 1fr; } }
/* Supply Chain Settings → value codes table. */
.codes-tabs { padding: 0; }
.codes-scroll { max-height: min(75vh, 760px); overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; }
.codes-table { width: 100%; border-collapse: collapse; }
.codes-table th { position: sticky; top: 0; background: var(--surface-2, #f8fafc); text-align: start; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 6px 8px; border-bottom: 1px solid var(--border); z-index: 1; }
.codes-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); }
.codes-table tr:last-child td { border-bottom: 0; }
.codes-table td:nth-child(2) { width: 34%; }
.codes-table td:last-child { width: 40px; }
.codes-table .input.invalid { border-color: var(--danger); }
/* Supply Chain Settings → the Translation card. */
.tr-settings-card { margin-top: 0; max-width: 560px; }
.tr-settings-card .input { max-width: none !important; }
/* Value codes: Colours · Sizes · Other side by side. */
.codes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.codes-col-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.codes-col-head .tab-count { margin-inline-start: 0; }
@media (max-width: 1000px) { .codes-grid { grid-template-columns: 1fr; } }
.codes-table tr.codes-group td { background: var(--surface-2, #f8fafc); font-size: 11.5px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; padding: 6px 8px; }
/* Print barcode labels: what the label shows, in order. */
.label-parts { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.label-part { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.label-part .check { margin: 0; flex: 0 0 auto; }
.label-part .grip { cursor: grab; color: var(--muted); display: inline-flex; }
.label-part.dragging { opacity: .45; }
.label-part.drop-target { box-shadow: inset 0 2px 0 var(--primary); }
.label-foot.label-foot-one { justify-content: center; }
.label-foot.label-foot-pair strong, .label-foot.label-foot-one strong { margin-inline-start: 0; }
.label-font-wrap { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: auto; }
.label-part .input.label-font { width: 62px; padding: 2px 6px; }
.label-bold { width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--muted); font-weight: 700; cursor: pointer; }
.label-bold.on { background: var(--primary-soft); border-color: var(--primary-border); color: var(--primary); }
/* Colour swatches (product page variants). */
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(15,23,42,.25); background-size: cover; background-position: center; flex: 0 0 auto; vertical-align: -2px; margin-inline-end: 6px; }
.chip .swatch { width: 12px; height: 12px; margin-inline-end: 5px; }
.vname .swatch { margin-inline-end: 8px; }
/* Product page → ERP details → Purchased from. */
.bought-from { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 6px; }
.bought-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; }
.bought-row + .bought-row { border-top: 1px solid var(--border); }
.bought-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Inventory Report: its layout (labels, cards, tabs, table) — in the ERP's own fonts and colours ---------- */
.ir-page { display: flex; flex-direction: column; gap: 16px; }
.ir-page .page-head { margin-bottom: 0; }
/* Settings and filters: small uppercase labels over their boxes, lined up on the bottom edge. */
.ir-page .ir-filters { gap: 12px 16px; align-items: flex-end; margin: 0; }
.ir-page .ir-field { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: var(--muted); gap: 4px; }
.ir-page .ir-field .input { min-width: 150px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.ir-page .ir-grow { flex: 1 1 200px; }
/* Summary cards. */
.ir-page .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0; }
.ir-page .stat { border-radius: 12px; padding: 14px 16px; min-width: 0; }
.ir-page .stat .label { font-size: 12px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.ir-page .stat .value { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 4px; }
.ir-page .stat .sub { font-size: 13px; color: var(--muted); }
/* Tabs: an underline on the chosen one, counts in a soft badge. */
.ir-page .ir-tabtext p { font-size: 13.5px; max-width: 80ch; }
/* The table: uppercase headers on a tinted band, numbers right-aligned with even digits, the product on the left. */
.ir-page .ir-table, .ir-page .ir-variants table { font-variant-numeric: tabular-nums; border-collapse: collapse; }
.ir-page .ir-table th, .ir-page .ir-variants th { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--surface-2);
  font-weight: 600; padding: 9px 12px; white-space: nowrap; position: sticky; top: 0; }
.ir-page .ir-table td, .ir-page .ir-variants td { padding: 9px 12px; white-space: nowrap; }
.ir-page .ir-table th:first-child, .ir-page .ir-table td:first-child { text-align: start; white-space: normal; min-width: 190px; }
.ir-page .ir-table td.num, .ir-page .ir-table th.num { text-align: end; }
.ir-page .ir-table tbody tr.clickable:hover td { background: var(--surface-2); }
.ir-page .ir-table td:first-child a { font-weight: 500; }
.ir-page .ir-table td .sub { font-size: 12.5px; color: var(--muted); }
.ir-page .pill { border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 600; }
.ir-page .ir-buy { font-weight: 600; }
.ir-page .ir-foot { font-size: 13px; }
.ir-page .ir-how { font-size: 13.5px; max-width: 70ch; margin: 0; }
.ir-page .card { background: var(--surface); border-color: var(--border); border-radius: 12px; }
.ir-page .input { background: var(--surface); border-color: var(--border); color: var(--text); }
.ir-page .btn { border-color: var(--border); color: var(--text); background: var(--surface); }
.ir-page .btn-primary, .ir-page .ir-refresh { background: var(--primary); border-color: var(--primary); color: #ffffff; }
.ir-page .btn-primary:hover, .ir-page .ir-refresh:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.ir-page a { color: var(--primary); }
.ir-page .ir-table td:first-child a { text-decoration: underline; text-underline-offset: 2px; }
.ir-page .ir-table th, .ir-page .ir-variants th { background: var(--surface-2); color: var(--muted); }
.ir-page .ir-table td, .ir-page .ir-variants td, .ir-page .ir-table th, .ir-page .ir-variants th { border-color: var(--border); }
.ir-page .ir-detail > td { background: var(--bg); }
.ir-page .ir-variants { background: var(--surface); border-color: var(--border); }
.ir-page .stat .value.ir-dead { color: var(--danger); }
.ir-page .stat .value.ir-slow { color: var(--amber); }
.ir-page .ir-buy { color: var(--primary); }
/* Status tags: Dead red, Slow amber, Moving green, Out grey — the sheet's tints. */
.ir-page .pill { border: 0; }
.ir-page .pill.red { background: var(--danger-soft); color: var(--danger); }
.ir-page .pill.yellow { background: var(--amber-soft); color: var(--amber); }
.ir-page .pill.green { background: var(--green-soft); color: var(--green); }
.ir-page .pill:not(.red):not(.yellow):not(.green) { background: var(--surface-2); color: var(--muted); }
.ir-page .pill.red.ir-urgent { background: var(--danger); color: #ffffff; }
/* Inventory Report: the variants under a product — colours, then sizes (the Supply Chain Department sheet's layout). */
.ir-page .ir-colors, .ir-page .ir-sizes { display: flex; flex-direction: column; gap: 8px; }
.ir-page .ir-sizes { gap: 6px; }
.ir-page .ir-color, .ir-page .ir-szrow { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.ir-page .ir-color .ir-szrow { background: var(--bg); }
.ir-page .ir-color > summary, .ir-page .ir-szrow > summary { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; cursor: pointer; list-style: none; }
.ir-page .ir-color > summary { padding: 9px 12px; }
.ir-page .ir-szrow > summary { padding: 7px 12px; font-size: 13.5px; }
.ir-page .ir-color > summary::-webkit-details-marker, .ir-page .ir-szrow > summary::-webkit-details-marker { display: none; }
.ir-page .ir-color > summary::before, .ir-page .ir-szrow > summary::before { content: "▸"; color: var(--muted); width: 12px; }
html[dir="rtl"] .ir-page .ir-color > summary::before, html[dir="rtl"] .ir-page .ir-szrow > summary::before { content: "◂"; }
.ir-page .ir-color[open] > summary::before, .ir-page .ir-szrow[open] > summary::before { content: "▾"; }
.ir-page .ir-cname { font-weight: 600; }
.ir-page .ir-cmeta { color: var(--muted); font-size: 13px; flex: 1 1 auto; min-width: 0; }
.ir-page .ir-color > .ir-sizes { padding: 0 12px 12px; }
.ir-page .ir-szrow.out { opacity: .75; }
.ir-page .ir-szbody { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 2px 12px 10px 36px; font-variant-numeric: tabular-nums; }
html[dir="rtl"] .ir-page .ir-szbody { padding: 2px 36px 10px 12px; }
.ir-page .ir-kv small { display: block; color: var(--muted); font-size: 12px; }
.ir-page .ir-kv b.ir-buy { color: var(--primary); }
.ir-page .ir-detail > td { background: var(--bg); padding: 12px 16px; white-space: normal; text-align: start; }
/* Inventory Report: "Add to purchase order" buttons and their message (the Supply Chain Department sheet's). */
.ir-page .ir-pobtn { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 2px 4px; margin-inline-start: 6px; vertical-align: middle; color: var(--primary); cursor: pointer; line-height: 0; display: inline-flex; }
.ir-page .ir-pobtn svg { width: 15px; height: 15px; }
.ir-page .ir-pobtn:hover { background: var(--surface-2); }
.ir-page .ir-pobtn.done { background: var(--primary); color: #ffffff; border-color: var(--primary); }
.ir-page .ir-pobtn:disabled { opacity: .55; cursor: default; }
.ir-potoast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50; background: #12262c; color: #f3f6f7; border-radius: 10px; padding: 10px 14px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; max-width: min(560px, calc(100vw - 32px)); box-shadow: 0 6px 20px rgba(0,0,0,.25); font-size: 14px; }
.ir-potoast[hidden] { display: none; }
.ir-potoast .ir-potoast-link { color: #f3f6f7; text-decoration: underline; font-weight: 600; }
/* Inventory Report: tabs, explanation, table box and count line laid out like the sheet (no card around them). */
.ir-page .ir-products { display: flex; flex-direction: column; gap: 12px; }
.ir-page .ir-products > .tabs { padding: 0; border-bottom: 1px solid var(--border); background: none; }
.ir-page .ir-products .ir-tabtext { padding: 0; align-items: flex-start; }
.ir-page .ir-rectext { margin: 0; color: var(--muted); max-width: 80ch; }
.ir-page .ir-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.ir-page .ir-tablewrap .ir-table tr:last-child td { border-bottom: 0; }
.ir-page .ir-products > .ir-foot { padding: 0; color: var(--muted); font-size: 13px; }
.ir-page .ir-products > .ir-foot .muted.small { font-size: 13px; }
/* Inventory Report summary cards: flat with a thin outline, as on the sheet. */
.ir-page .stat { box-shadow: none; border: 1px solid var(--border); background: var(--surface); }
/* Inventory Report filters, as on the sheet: Collection + Product Type side by side; the stamp and Refresh in the header. */
.ir-page .ir-pair { display: flex; gap: 12px 16px; align-items: flex-end; flex-wrap: nowrap; min-width: 0; max-width: 100%; }
.ir-page .ir-pair .ir-field { min-width: 0; }
@media (max-width: 480px) { .ir-page .ir-pair { flex-wrap: wrap; } }
.ir-page .ir-stamp { color: var(--muted); font-size: 13px; }
/* Inventory Report header, as on the sheet. */
.ir-page .ir-head { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; justify-content: space-between; }
.ir-page .ir-head h1 { margin: 0; }
.ir-page .ir-sub { color: var(--muted); margin: 4px 0 0; }
.ir-page .ir-right { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ir-page > div:first-child { display: flex; flex-direction: column; gap: 20px; }
/* Inventory Report tabs: wrapping onto a second line when they don't fit. */
.ir-page .ir-products > .tabs { flex-wrap: wrap; overflow: visible; }
.ir-page .ir-products > .tabs .tab { background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; font-family: inherit; }
/* Purchase Requests Shortlist: one card per supplier. */
.sl-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Shortlist: Sent tags, the request preview, and the printed request sheet. */
.sl-tag { margin-inline-start: 8px; }
.req-preview { white-space: pre-wrap; font-family: inherit; font-size: 13.5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin: 0; max-height: 320px; overflow: auto; }
#sheet-print { display: none; }
@media print {
  body.printing-sheet > *:not(#sheet-print) { display: none !important; }
  body.printing-sheet #sheet-print { display: block; color: #000; font-family: Inter, 'IBM Plex Sans Arabic', Arial, sans-serif; font-size: 11pt; padding: 12mm; }
  body.printing-sheet { background: #fff; margin: 0; }
  .req-sheet .req-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 8mm; }
  .req-sheet h1 { font-size: 18pt; margin: 0 0 2mm; }
  .req-sheet .req-meta { text-align: end; }
  .req-sheet table { width: 100%; border-collapse: collapse; }
  .req-sheet th, .req-sheet td { border-bottom: 1px solid #ccc; padding: 2mm 3mm; text-align: start; }
  .req-sheet th { font-size: 9pt; text-transform: uppercase; color: #555; }
  .req-sheet .num { text-align: end; }
  .req-sheet tfoot td { font-weight: 700; border-bottom: 0; }
  .req-sheet p { margin-top: 8mm; }
}
/* Supply Chain bar: drafts not sent yet, on the shortlist's button. */
.bar-count { display: inline-block; min-width: 18px; margin-inline-start: 6px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.btn-primary .bar-count { background: #fff; color: var(--danger); }
.sl-toolbar { margin-bottom: 14px; }
.sl-toolbar .input[type="search"] { flex: 1 1 260px; }
.sl-toolbar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
/* Purchase Request: each supplier's request Status (Draft / Sent). */
.sl-status-wrap { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 12px; }
.sl-status { width: auto; font-weight: 600; padding: 2px 8px; }
.sl-status.is-draft { background: var(--amber-soft); color: var(--amber); border-color: #fde68a; }
.sl-status.is-sent { background: var(--green-soft); color: var(--green); border-color: #bbf7d0; }
/* Purchase Request: each size's picture, on the page and the printed sheet. */
.sl-pic { width: 56px; }
.sl-pic img, .sl-pic .thumb { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border); display: block; background: var(--surface-2); }
@media print {
  .req-sheet .req-pic img { width: 22mm; height: 22mm; object-fit: cover; border-radius: 2mm; }
  .req-sheet tr { break-inside: avoid; }
}
/* Purchase Request: products → colours → sizes (as on the Inventory Report). */
.sl-products { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 16px; }
.sl-product, .sl-color { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.sl-color { background: var(--surface-2); }
.sl-product > summary, .sl-color > summary { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 8px 12px; cursor: pointer; list-style: none; }
.sl-product > summary::-webkit-details-marker, .sl-color > summary::-webkit-details-marker { display: none; }
.sl-product > summary::before, .sl-color > summary::before { content: "▸"; color: var(--muted); width: 12px; }
html[dir="rtl"] .sl-product > summary::before, html[dir="rtl"] .sl-color > summary::before { content: "◂"; }
.sl-product[open] > summary::before, .sl-color[open] > summary::before { content: "▾"; }
.sl-pname { font-weight: 600; }
.sl-cname { font-weight: 600; }
.sl-cmeta { color: var(--muted); font-size: 13px; flex: 1 1 auto; min-width: 0; }
.sl-colors, .sl-sizes { display: flex; flex-direction: column; gap: 6px; padding: 0 12px 12px; }
.sl-color .sl-sizes { padding: 0 10px 10px; }
.sl-size { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
.sl-size-main { flex: 1 1 220px; min-width: 0; }
.sl-qty { display: inline-flex; align-items: center; gap: 6px; }
.sl-pic-sm { display: inline-flex; width: 40px; height: 40px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); }
.sl-pic-sm img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Purchase Request → Create: product search and its sizes. */
.sl-find { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.sl-find-row { display: flex; align-items: center; gap: 10px; text-align: start; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; cursor: pointer; font: inherit; color: var(--text); }
.sl-find-row:hover { background: var(--surface-2); }
.sl-find-row img, .sl-find-row .thumb { width: 32px; height: 32px; border-radius: 4px; object-fit: cover; }
.sl-create-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 0 8px; }
.btn.btn-done { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.sl-number { font-weight: 700; }
.sl-row-actions { white-space: nowrap; }
.sl-row-actions .icon-btn { display: inline-flex; vertical-align: middle; }
.sl-row-actions .sl-del:hover { color: var(--danger); }
/* Purchase Request page: the product search bar. */
.sl-addbar { padding: 12px 16px; margin-bottom: 14px; }
.sl-addbar-row { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.sl-addbar-row .input { flex: 1 1 auto; }
.sl-picked { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 4px; }
.sl-collapse-bar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 10px 16px 0; font-size: 13px; }
/* Inventory Report variants: each colour's / size's picture. */
.ir-page .ir-vpic { display: inline-flex; width: 36px; height: 36px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); }
.ir-page .ir-vpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ir-page .ir-szrow .ir-vpic { width: 30px; height: 30px; }
/* Products list: the colour strip (each colour's variant picture). */
.pl-colors { display: flex; align-items: center; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.pl-colors img { width: 22px; height: 22px; border-radius: 4px; object-fit: cover; border: 1px solid var(--border); display: block; }
.pl-color-dot { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid var(--border); font-size: 9px; color: var(--muted); }
.pl-color-dot .swatch { margin: 0; width: 14px; height: 14px; }
/* Product page: a colour value's chip with its variant picture. */
.chip .chip-pic { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; margin-inline-end: 6px; vertical-align: -4px; border: 1px solid var(--border); }
/* Bosta Test (Sandbox): the warning on the Bosta card and in Send to Courier. */
.bosta-sandbox-warn { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: #fff4e5; color: #8a4b00; border: 1px solid #f5c58a; font-size: 13px; }
/* Products list: the Print Barcode icon column. */
td.col-icon, th.col-icon { width: 1%; white-space: nowrap; text-align: center; }
td.col-icon .icon-btn:hover { color: var(--text); background: var(--hover, #f1f5f9); }
/* Barcode label: the compare price, crossed out (next to the price on the same line). */
.label-compare { text-decoration: line-through; color: #444; }
/* Barcode label: the price line (compare price crossed out, then the price); its row in the template has the compare price under it. */
.label-prices { display: inline-flex; align-items: baseline; gap: 4px; }
.label-part:has(.label-part-sub) { flex-wrap: wrap; }
.label-part-sub { flex-basis: 100%; display: flex; align-items: center; gap: 8px; padding-inline-start: 26px; }
/* Products list → Price Update: the change row and the preview. */
.pu-row { display: flex; gap: 6px; }
.pu-row .input:nth-child(2) { max-width: 110px; }
.pu-preview { max-height: 46vh; overflow: auto; }
.pu-modes { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
/* Price Update: the ticked products — a list that folds. */
.pu-products { margin: 0 0 12px; border: 1px solid var(--border); border-radius: 8px; }
.pu-products > summary { cursor: pointer; padding: 8px 10px; user-select: none; }
.pu-product-list { max-height: 220px; overflow: auto; border-top: 1px solid var(--border); }
.pu-product { display: flex; align-items: center; gap: 10px; padding: 6px 10px; }
.pu-product + .pu-product { border-top: 1px solid var(--border); }
.pu-product .thumb { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; flex: none; }
.pu-product-name { flex: 1; min-width: 0; }
.pu-product-name > div:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Price Update preview: products (▸ opens their variants). */
.pu-toggle { display: inline-block; width: 18px; color: var(--muted); }
.pu-toggle svg { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform .15s; }
[dir="rtl"] .pu-toggle svg { transform: rotate(90deg); }
.pu-toggle svg.open, [dir="rtl"] .pu-toggle svg.open { transform: none; }
.pu-variant td:first-child { padding-inline-start: 34px; color: var(--muted); }
/* Notifications: the unread count (user menu, avatar) and the My Account list / settings. */
.ntf-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; margin-inline-start: auto; }
.ntf-count[hidden] { display: none; }
.avatar { position: relative; }
.ntf-count.ntf-dot { position: absolute; top: -5px; inset-inline-end: -7px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; border: 2px solid var(--surface, #fff); margin: 0; }
.ntf-cards { margin-top: 16px; }
.ntf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ntf-head h2 { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.ntf-list { max-height: 420px; overflow: auto; }
.ntf-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.ntf-bullet { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; background: transparent; }
.ntf-item.unread .ntf-bullet { background: #dc2626; }
.ntf-item.unread .ntf-main > div:first-child { font-weight: 600; }
.ntf-main { flex: 1; min-width: 0; text-align: start; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.ntf-sub { font-size: 14px; margin: 12px 0 6px; }
.ntf-kinds { display: flex; flex-direction: column; gap: 6px; }
/* The notifications bell (before the language switch) and its count. */
.bell-btn { position: relative; text-decoration: none; }
.bell-btn .ntf-count.ntf-dot { top: 0; inset-inline-end: 0; }
/* The bell's panel: the latest notifications, opened over the page. */
.ntf-bell { position: relative; display: inline-flex; }
.ntf-panel { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; width: 340px; max-width: calc(100vw - 24px); padding: 0; z-index: 60; text-align: start; }
.ntf-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.ntf-panel-list { max-height: 380px; overflow: auto; }
.ntf-panel-item { display: flex; gap: 8px; width: 100%; padding: 9px 12px; background: none; border: 0; border-bottom: 1px solid var(--border); text-align: start; cursor: pointer; color: inherit; font: inherit; }
.ntf-panel-item:hover { background: var(--hover, #f8fafc); }
.ntf-panel-item.unread .ntf-bullet { background: #dc2626; }
.ntf-panel-item.unread .ntf-panel-text > span:first-child { font-weight: 600; }
.ntf-panel-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.ntf-panel-empty { padding: 14px 12px; margin: 0; }
.ntf-panel-foot { display: block; padding: 10px 12px; text-align: center; font-size: 13px; }
.ntf-panel .ntf-panel-head .link-btn { width: auto; padding: 2px 4px; color: var(--primary); }
.ntf-panel .ntf-panel-item { align-items: flex-start; border-radius: 0; padding: 9px 12px; color: var(--text); }
.ntf-panel .ntf-panel-item .ntf-bullet { margin-top: 6px; }
.ntf-panel a.ntf-panel-foot { justify-content: center; border-radius: 0; color: var(--primary); }
/* Order page: Send with Private Courier / Send with Bosta; the courier set by the button in the window. */
.send-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.input-static { padding: 8px 0; }
/* E-Commerce Settings: the orders card, then the Logistics partners and Return reasons lists. */
.ec-settings { display: block; max-width: 760px; }
.ec-section { margin-top: 24px; }
.ec-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ec-section-head h2 { margin: 0; font-size: 18px; }
/* Order page: back link and Previous / Next. */
.order-nav { display: inline-flex; align-items: center; gap: 6px; }
.order-nav .ico.nav-prev { transform: rotate(90deg); }
.order-nav .ico.nav-next { transform: rotate(-90deg); }
[dir="rtl"] .order-nav .ico.nav-prev { transform: rotate(-90deg); }
[dir="rtl"] .order-nav .ico.nav-next { transform: rotate(90deg); }
/* E-Commerce → Bosta: the state cards and the cash line. */
.bosta-board { padding: 12px 12px 4px; border-bottom: 1px solid var(--border); }
.bosta-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.bosta-card { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; color: inherit; text-decoration: none; background: var(--surface); }
.bosta-card:hover { border-color: var(--primary); }
.bosta-card.active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.bosta-card-n { font-size: 20px; font-weight: 700; }
.bosta-card-l { font-size: 12px; color: var(--muted); }
.bosta-card.warn .bosta-card-n { color: #b45309; }
.bosta-card.ok .bosta-card-n { color: #15803d; }
.bosta-card.muted .bosta-card-n { color: var(--muted); }
.bosta-board-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px 2px 6px; }
.bosta-board-foot .btn { margin-inline-start: auto; }
/* E-Commerce → Bosta: its sections and the dashboard-only links. */
.bosta-tabs { align-items: center; }
.bosta-tabs-out { margin-inline-start: auto; display: inline-flex; gap: 6px; padding: 4px 8px; }
.bosta-section { padding: 8px 12px 12px; }
/* E-Commerce → Logistics Partners: Bosta / Private Courier switch. */
.partner-switch { display: flex; gap: 6px; padding: 12px 12px 0; }
/* Every word of a button's label starts with a capital letter (English; Arabic has no capitals): buttons, tabs, menu items. */
.btn, button.btn, a.btn, .tab, .tabs a, .dropdown a, .dropdown button, .pos-more-item, .link-btn, .icon-btn, .modal-foot button, .bosta-card-l { text-transform: capitalize; }
/* E-Commerce Settings: Self Pickup's Shopify details. */
.pickup-box { margin: 8px 0 0 26px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
[dir="rtl"] .pickup-box { margin: 8px 26px 0 0; }
/* Order page (On Hold): Delivery Method — one line per method. */
.dm-lines { display: flex; flex-direction: column; }
.dm-line { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.dm-line:last-child { border-bottom: 0; }
.dm-line .dm-label { flex: 1; }
.dm-line.on .dm-label { font-weight: 600; }
.dm-line input { margin: 0; accent-color: var(--primary); }
.dm-line.locked { cursor: default; }
.dm-line.locked:not(.on) { opacity: .55; }
/* Orders list: Days column (open for more than 3 days). */
td.days-warn { color: #b45309; font-weight: 600; }
td.neg { font-weight: 600; }
/* Scanning: each line's variant picture. */
.pick-pic .thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; }
/* An order's item photos open large (photoViewer). */
.order-line img.thumb, .pick-pic img.thumb { cursor: zoom-in; }
.photo-viewer { position: fixed; inset: 0; z-index: 1000; background: rgba(15, 23, 42, .8); display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out; }
.photo-viewer img { max-width: min(92vw, 900px); max-height: 92vh; object-fit: contain; border-radius: 10px; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.pick-line .pick-pic { display: inline-flex; flex: none; }

/* Location form: the modules it uses (ticks in a wrapping row). */
.loc-modules { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 4px; }

/* Inventory Report: the settings / filters and the products list in white cards, as on the ERP's other pages; tabs in
   their usual colours. */
.ir-page .ir-filters { margin: 0; border-bottom: 1px solid var(--border); }
/* (All on one row: the choices and the search share it, each narrowing as needed.) */
.ir-page .ir-filters { flex-wrap: nowrap; gap: 6px; padding: 10px 12px; }
.ir-page .ir-filters select.input { flex: 0 1 auto; min-width: 0; max-width: none; width: auto; text-overflow: ellipsis; font-size: 13px; padding-inline-start: 8px; field-sizing: content; }
.ir-page .ir-filters .input[type="search"] { flex: 1 1 0; min-width: 80px; max-width: none; font-size: 13px; }
.ir-page .ir-products { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); gap: 0; padding-bottom: 12px; }
.ir-page .ir-products > .tabs { padding: 0 12px; }
.ir-page .ir-products .ir-tabtext { padding: 12px 16px; }
.ir-page .ir-tablewrap { border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; }
.ir-page .ir-products > .ir-foot { padding: 10px 16px 0; }
.ir-page .tabs a.tab { color: var(--muted); }
.ir-page .tabs a.tab:hover { color: var(--text); }
.ir-page .tabs a.tab.active { color: var(--primary); }
/* (The wide table scrolls inside its box: it doesn't stretch the page — cards cut off, a sideways page scroll.) */
.ir-page, .ir-page > *, .ir-page .stack > * { min-width: 0; max-width: 100%; }

/* Inventory: the tab row with Products and Suppliers at its end (the row carries the line under the tabs). */
.ir-page .ir-tabsrow { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px 12px; padding: 0 12px; border-bottom: 1px solid var(--border); }
.ir-page .ir-tabsrow > .tabs { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; overflow: visible; padding: 0; border-bottom: 0; margin-bottom: -1px; }
.ir-page .ir-tabsrow > .tabs .tab { background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; font-family: inherit; }
.ir-page .ir-tabsrow > .row-actions { align-self: center; padding: 6px 0; margin-inline-start: auto; }

/* Stock Analysis table: every column's header and values centred — but Product (the first), at the start. */
.ir-page .ir-table th, .ir-page .ir-table td, .ir-page .ir-table th.num, .ir-page .ir-table td.num { text-align: center; }
.ir-page .ir-table th:first-child, .ir-page .ir-table td:first-child { text-align: start; }
.ir-page .ir-table .ir-detail > td { text-align: start; }

/* Stock Analysis: a size's stock details (Available, Sold 90 days, Days of stock, To purchase, SKU) centred in its box. */
.ir-page .ir-szbody, html[dir="rtl"] .ir-page .ir-szbody { justify-content: center; padding: 2px 12px 10px; }
.ir-page .ir-szbody .ir-kv { text-align: center; }

/* Stock Analysis: a size in one row — picture, name, its stock details (centred, filling the middle), tag, clipboard. */
.ir-page .ir-szflat { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 7px 12px; }
.ir-page .ir-szflat .ir-cname { min-width: 70px; }
.ir-page .ir-szflat .ir-szbody, html[dir="rtl"] .ir-page .ir-szflat .ir-szbody { flex: 1 1 auto; padding: 0; }

.scd { display: flex; flex-direction: column; gap: 18px; }

/* Supply Chain → Dashboard: the Stock Report — its filters (period · branch · compare) in its top row. */
.scd-report-bar { align-items: center; flex-wrap: wrap; }

@keyframes scd-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Competitors: the New Products tab's count stands out when there are some. */
.tab-count.tab-count-hot { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Dashboard's tab row (Stock Analysis · Competitors · Supply Chain Settings): on the right. A page's own buttons (the
   slot the row gets) come before them, on the left. */
.pp-tabs.pp-tabs-end { justify-content: flex-end; }
.pp-tabs.pp-tabs-end > .row-actions { order: -1; margin-inline-start: 0 !important; margin-inline-end: auto; }

/* Spaced like the Products table (Dashboard): the same cell padding and header size (.sa-table). */
.sa-table > thead > tr > th, .sa-table > tbody > tr:not(.tr-req-items) > td { padding: 9px 12px; }
.sa-table > thead > tr > th { font-size: 12px; }

/* Catalog Management → Products: every column's header and values centred — but the tick box and Product, at the start. */
.prod-table > thead > tr > th, .prod-table > tbody > tr > td, .prod-table > thead > tr > th.num, .prod-table > tbody > tr > td.num { text-align: center; }
.prod-table > thead > tr > th:nth-child(-n+2), .prod-table > tbody > tr > td:nth-child(-n+2) { text-align: start; }
/* …spaced like Stock Analysis's tables: the same cell padding and header size. */
.prod-table > thead > tr > th, .prod-table > tbody > tr > td { padding: 9px 12px; }
.prod-table > thead > tr > th { font-size: 12px; }
/* A tab row with the page's buttons at its end (Catalog → Products): centred in the row, and nothing cut off (the Columns menu opens below it). */
.tabs.tabs-actions { align-items: center; overflow: visible; flex-wrap: wrap; padding-block: 8px; }
.tabs.tabs-actions > .tab { align-self: stretch; margin-block: -8px; }

/* Dashboard → Stock Report: a table — a row a figure; this period · the compared one · the change (centred but the figure's name). */
/* (Its cells: .tr-req-table .sa-table, as the other tabs' tables; no padding round the box — the table edge to edge.) */
.scd-report-card { padding: 0; overflow: hidden; }
.scd-report-card > .scd-report .error-box { margin: 12px 16px; }
.scd-rtable th .sub { font-weight: 400; text-transform: none; letter-spacing: 0; }
.scd-rtable td strong { font-variant-numeric: tabular-nums; }
.scd-rdelta { font-weight: 600; color: var(--muted); white-space: nowrap; }
.scd-rdelta.up { color: var(--green); }
.scd-rdelta.down { color: var(--danger); }
/* Dashboard → Inventory: fits its box like the other tabs' tables — no minimum width; each column heading on one line, as
   Performance's and Best Sellers' (a narrow screen scrolls the table sideways). */
.ir-page .ir-table { min-width: 0; }
.ir-page .ir-table > thead > tr > th { white-space: nowrap; }
/* (…spaced as Products List's: 12px.) */
.ir-page .ir-table > thead > tr > th, .ir-page .ir-table > tbody > tr:not(.ir-detail) > td { padding-inline: 12px; }
.ir-page .ir-table th:first-child, .ir-page .ir-table td:first-child { min-width: 160px; }
/* Sales Report → Target: the target and how much of it is reached, on one line. */
.scd-rtable td { white-space: nowrap; }
.scd-rreached { font-size: 12px; }
/* Dashboard → Stock Report, as the Sales Report's table: one line a product (a long name cut short — the whole of it on
   hover), the column headings spaced the same. */
.ir-page .ir-table > tbody > tr > td:first-child { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.ir-page .ir-table > thead > tr > th { letter-spacing: .05em; }
/* Sales Report → Period: its From · To dates the same height as the other filters. */
.scd-report-bar input[type="date"] { height: 35px; padding-block: 0; line-height: 33px; }
/* Sales Report → Inventory health's three parts (Moving · Slow · Dead): indented under it, in a smaller, muted label. */
.scd-rtable tr.scd-rsub > td:first-child { padding-inline-start: 30px; color: var(--muted); font-size: 12.5px; }
.scd-rtable tr.scd-rsub > td { padding-block: 6px; }
/* Date fields in a filter row (Damaged, Lost, …): the same height as the selects beside them. */
.toolbar input[type="date"].input { height: 36px; padding-block: 0; line-height: 34px; }
/* (…but the Sales Report's: 35px, as its selects.) */
.toolbar.scd-report-bar input[type="date"].input { height: 35px; line-height: 33px; }
/* Damaged: a row a line, as the other tabs' tables — a long product name cut short (the whole on hover). */
.loss-prod { white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
/* A cell kept to one line (a long text cut short — the whole on hover): Suppliers' name and contact. */
td.one-line { white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
/* Catalog Management → Products, as the other tabs' tables: fits its box (headings wrap), a product a line — a small
   picture, the name and its vendor beside it (cut short — the whole on hover). */
/* (Each heading on one line, as Stock Level's — a narrow screen scrolls the table sideways.) */
.prod-table > thead > tr > th { white-space: nowrap; }
/* (As Stock Level's and Suppliers' rows: the picture, the name bold and its supplier under it — a long one cut short, the
   whole on hover; the cells spaced as the other tabs' tables — .tr-req-table .sa-table.) */
.prod-table .me { flex-wrap: nowrap; min-width: 0; }
.prod-table .me > div { min-width: 0; max-width: 240px; }
.prod-table .me > div > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-table > tbody > tr > td .icon-btn { width: 28px; height: 28px; }

/* Icon buttons in the tabs' tables (open ↗, delete, show items ▸): 28px, so a row stays one line's height. */
.sa-table > tbody > tr > td .icon-btn { width: 28px; height: 28px; }
/* A row's buttons in the tabs' tables (Approve · Reject, Add to Purchase Request · Cancel): side by side, one line. */
.sa-table td.tr-req-acts .row-actions { flex-wrap: nowrap; }
.sa-table td.tr-req-acts .btn { white-space: nowrap; }
/* (…and a request's number — BR-00001 — never broken at its dash.) */
.sa-table .row-toggle strong { white-space: nowrap; }
/* Company Structure: a team's modules on its box, as small pills on one wrapping line. */
.org-team-mods { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.org-team-mods .pill { font-size: 11px; }

/* Company Structure: a team's modules, each with the job titles it needs (filled / needed; vacant in amber), and in the
   team form the job title rows under each ticked module. */
.org-mod .org-role-head { margin-bottom: 4px; }
.org-pos { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 2px 0; }
.org-pos-count { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.org-pos-count.full { color: var(--green); }
.org-pos-count.open { color: var(--amber); }
.org-pos-count small { font-weight: 500; }
.org-team-modbox { display: flex; flex-direction: column; gap: 8px; }
.org-team-positions { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; padding-inline-start: 26px; }
.org-pos-row { display: flex; gap: 8px; align-items: center; }
.org-pos-row select { flex: 1; min-width: 0; }

/* Team form: each module added (from the Modules dropdown) — its name and ✕, then its job titles. */
.org-team-mod { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.org-team-mod-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.org-team-mod .org-team-positions { padding-inline-start: 0; margin-bottom: 0; }



/* Company Structure: an employee's name is plain text now (their file opens from People & Culture) — no hand pointer. */
span.org-person { cursor: default; }

/* Company Structure: an empty seat — a job title the team still needs — a dashed card, in amber. */
.org-vacant { border: 1px dashed var(--amber); border-radius: 6px; padding: 3px 6px; margin: 3px 0; background: var(--amber-soft); }
.org-vacant .org-person-name { color: var(--amber); font-weight: 600; }

/* Home Page: a tile's grip (drag to rearrange the tiles — who may manage the Brand). */
.dept-grip { position: absolute; bottom: 16px; inset-inline-end: 16px; cursor: grab; color: var(--muted); padding: 4px; border-radius: 6px; }
.dept-grip:hover { background: var(--primary-soft, #e8ecfb); color: var(--primary); }
.dept-tile.dragging { opacity: .4; }
.dept-tile.drop-target { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft, #e8ecfb); }
/* Legal & Finance → Financial Reports: subtotal / total rows, section headings; Print: the report only. */
.fin-table tr.fin-sum td { background: var(--surface-2); }
.fin-table tr.fin-total td { background: var(--primary-soft, #e8ecfb); border-top: 2px solid var(--primary); }
.fin-table td.num, .fin-table th.num { text-align: end; }
.fin-h { margin: 18px 16px 8px; font-size: 15px; }
@media print { .mod-bar, .fin-report > .tabs, .fin-report > .toolbar .btn { display: none !important; } .fin-report { box-shadow: none; border: 0; } .fin-report .table-wrap { overflow: visible; } }
/* Retails: the branch tiles shown when it opens (pick the branch you work in now). */
.pos-branch-pick { max-width: 1100px; margin: 0 auto; padding: 28px 20px; }
.pos-branch-pick h2 { margin: 0 0 6px; font-size: 22px; }
.pos-branch-pick > p { margin: 0 0 20px; }
.pos-branch-tile { font: inherit; text-align: start; cursor: pointer; width: 100%; }
.pos-branch-tile.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft, #e8ecfb); }
.pos-branch-tile.busy { opacity: .6; pointer-events: none; }
/* Stock Level: the product cell as the Products tab's (▸, picture, name and supplier) — not cut short. */
.ir-page .ir-table > tbody > tr > td.ir-prod { white-space: normal; max-width: none; overflow: visible; min-width: 240px; }
.ir-page .ir-table td.ir-prod strong { font-weight: 600; }
/* Stock Level with tick boxes (Price Update): the tick box narrow, and the product — the column after it — at the start. */
.ir-page .ir-table > thead > tr > th.col-check, .ir-page .ir-table > tbody > tr > td.col-check { min-width: 0; width: 36px; max-width: 36px; padding-inline: 10px 0; text-align: center; overflow: visible; }
.ir-page .ir-table > thead > tr > th.col-check + th, .ir-page .ir-table > tbody > tr > td.col-check + td { text-align: start; min-width: 240px; }
/* Products List: the Supplier on one line (a long one cut short — the whole on hover). */
.prod-table td[data-col="supplier"] { white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
/* Stock Level: the product's name on one line, as Products List's (a long one cut short — the whole on hover). */
.ir-page .ir-table td.ir-prod .me > div { min-width: 0; max-width: 260px; }
.ir-page .ir-table td.ir-prod .me > div > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Stock Level: Products' row with its button (Products List · Stock Level · Price Update) as on Products List — the row as tall
   as its tabs (no tab sticking out over the row above). */
.ir-page .ir-products > .tabs.tabs-actions { padding: 8px 12px; align-items: center; }
/* Employee file: a team with no vacancies (the Job Title hint). */
.field .warn-text { color: var(--danger, #b42318); }

/* Team window: job titles dragged into order. */
.org-pos-row.dragging { opacity: .4; }
.org-pos-row.drop-target { box-shadow: inset 0 2px 0 var(--primary); }

/* HR → Employee files, as the other tabs' tables (.tr-req-table .sa-table): centred but the name (and the drag grip before
   it, when shown) at the start; each heading and value on one line (a narrow screen scrolls the table sideways). */
.emp-table.emp-table-grip > thead > tr > th:nth-child(2), .emp-table.emp-table-grip > tbody > tr > td:nth-child(2) { text-align: start; }
/* (Fits its box as the other tabs' tables, a row a line: a long team, job title or branches cut short — the whole on
   hover.) */
.emp-table > tbody > tr > td { white-space: nowrap; }
.emp-table > tbody > tr > td.one-line { max-width: 210px; }
.emp-table > thead > tr > th.grip-col, .emp-table > tbody > tr > td.grip-col { width: 1%; padding-inline-end: 0; }

/* Employee window → Branches: a dropdown like the selects beside it; open, its tick boxes (All branches, or one or more)
   in a panel under it. */
.br-drop { position: relative; }
.br-drop > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding-inline-end: 30px; position: relative; }
.br-drop > summary::-webkit-details-marker { display: none; }
.br-drop > summary::after { content: ''; position: absolute; inset-inline-end: 12px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border: solid #6b7280; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.br-drop.disabled > summary { cursor: default; opacity: .7; }
.br-drop-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-drop-panel { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 4px); min-width: 220px; display: grid; gap: 8px;
  padding: 10px 12px; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.br-drop-panel .branch-picks { grid-template-columns: 1fr; padding: 0; border: 0; }

/* Company Structure: the small + at the chart's top right corner — adds a team (no Teams window). */
.org-card { position: relative; }
.org-add-team { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2; width: 24px; height: 24px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--muted); cursor: pointer; }
.org-add-team:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft, #e8ecfb); }
.org-add-team .ico { width: 14px; height: 14px; stroke-width: 2.5; }

/* Job Titles: grouped by team — a heading row for each (the team's name and how many job titles). */
tr.role-group > td { background: var(--surface-2, #f8fafc); font-weight: 600; font-size: 12.5px; color: var(--text-2); padding-block: 7px; }
tr.role-group .tab-count { margin-inline-start: 8px; }

/* HR Settings → Attendance: the working days, ticked, on one wrapping line. */
.hrs-days { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 4px 0; }

/* A tabs' table with a drag grip first (HR Settings → Teams): the name after it at the start too. */
.tr-req-table.grip-first > thead > tr > th:nth-child(2), .tr-req-table.grip-first > tbody > tr > td:nth-child(2) { text-align: start; }
.tr-req-table.grip-first > thead > tr > th.grip-col, .tr-req-table.grip-first > tbody > tr > td.grip-col { width: 1%; padding-inline-end: 0; }


/* Job Titles: a team group's heading folds / unfolds its job titles — the arrow (▸ folded, ▾ open). */
tr.role-group.clickable { cursor: pointer; user-select: none; }
.role-group-arrow { display: inline-grid; place-items: center; width: 18px; margin-inline-end: 6px; vertical-align: middle; }
.role-group-arrow svg { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform .15s; }
[dir="rtl"] .role-group-arrow svg { transform: rotate(90deg); }
.role-group-arrow.open svg { transform: none; }

/* Employees' filters (search, Status, Team, Job Title, Career Level, Branch) and + Add Employee: sharing the row (as the
   other tabs' — one line where it fits), each the same height. */
.emp-toolbar { align-items: center; }
.emp-toolbar > .input { flex: 1 1 120px; min-width: 100px; max-width: 200px !important; height: 38px; }
.emp-toolbar > input.input { flex: 2 1 160px; min-width: 150px; max-width: 280px !important; }
.emp-toolbar > .btn { flex: none; }/* (One line on a wide screen — they shrink to fit; a narrow screen wraps them. The table's cells a little closer, so its
   eleven columns fit the box.) */
.emp-toolbar { flex-wrap: nowrap; }
@media (max-width: 1100px) { .emp-toolbar { flex-wrap: wrap; } .emp-toolbar > .input { flex: 0 1 auto; } }
.emp-table > thead > tr > th, .emp-table > tbody > tr > td { padding-inline: 9px; }

/* Employees (its filters and the employee window): labels, buttons, choices and the search hint with a capital first
   letter on every word — not what's typed (names, emails) nor the help sentences under fields. */
.caps .field > label, .caps label.check, .caps .btn, .caps .tab, .caps select, .caps option, .caps .pill,
.caps input::placeholder, .caps.toolbar > select, .caps.toolbar > .btn, .caps.tabs > .tab { text-transform: capitalize; }

/* Employee window → Password (a saved one): Reset Password and the last reset, centred in the field. */
.pw-field { align-items: center; text-align: center; }
.pw-field > .row-actions { justify-content: center; }
.pw-field > label { align-self: stretch; text-align: start; }

/* Employee window → Personal Information: Full Address and Area on one row (the address wider); stacked on a phone. */
.addr-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.addr-row > .field:first-child { grid-column: span 2; }
@media (max-width: 640px) { .addr-row { grid-template-columns: 1fr; } .addr-row > .field:first-child { grid-column: auto; } }

/* Employee window → Personal Information: the Personal Photo — a square picture (or a placeholder) and its buttons beside. */
.emp-photo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.emp-photo { width: 96px; height: 96px; flex: none; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  background: var(--surface-2, #f8fafc); border: 1px solid var(--border); color: var(--muted); }
.emp-photo img { width: 100%; height: 100%; object-fit: cover; }
.emp-photo .ico { width: 36px; height: 36px; }
.emp-photo-row .emp-photo-label { display: block; font-weight: 500; font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; }
.emp-photo-row .muted.small { margin-top: 6px; }

/* Employee window → Documents: the add row (type · name · Upload) and the list. */
.emp-docs-add { padding: 0 0 8px; }
.emp-docs-add > .input { flex: 1 1 180px; max-width: 260px; }

/* Employee window → Documents → Personal Photo: a click on the photo (or Upload / Change) chooses one, Remove beside it. */
.emp-photo.clickable { cursor: pointer; }
.emp-photo.clickable:hover { border-color: var(--primary); }
.emp-photo-btns { display: flex; gap: 10px; font-size: 12px; }
.emp-photo-btns .link-btn { font-size: 12px; }
.link-btn.danger { color: var(--danger); }

/* Employee window → Education: the highest qualification line, then the two lists (each its own box). */
.emp-edu-highest { margin: 0 0 12px; }
.caps > .card + .card { margin-top: 14px; }

/* Employee window, laid out as the other windows: a section heading with a button at its end (Education's + Add); a
   tab's first heading without the line above it. */
.form-section.form-section-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.form-section.form-section-row > .btn { text-transform: capitalize; letter-spacing: 0; font-weight: 500; font-size: 12.5px; }
.caps > .form-section:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* Supplies & Equipments, as Products List: only the item at the start (no tick box before it) — every other column,
   Supplier too, centred. */
.sup-table > thead > tr > th:nth-child(2), .sup-table > tbody > tr > td:nth-child(2) { text-align: center; }

/* A list's thumbnail holding a photo (Supplies): the picture filling it. */
span.thumb { display: inline-block; overflow: hidden; }
span.thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Supplies' photo (the list's thumbnail and the window's box): the whole picture fitted inside — not cut to fill it. */
.photo-fit { background: #fff; }
.photo-fit > img { object-fit: contain !important; }

/* Products List → a product opened: its variants as Stock Level's (colour boxes opening to their sizes) — full width
   under the row, from the start (not centred as the table's cells). */
.prod-table > tbody > tr.prod-variants > td { text-align: start; white-space: normal; padding: 12px 16px; background: var(--bg); }
.prod-variants .ir-page > div:first-child { gap: 8px; }
.prod-variants .ir-szrow.clickable { cursor: pointer; }
.prod-variants .ir-szrow.clickable:hover { border-color: var(--primary); }

/* Supplies & Equipments → Stock Level: the buttons' column (Adjust · History) at the row's end, as narrow as they are. */
.sup-table > thead > tr > th.col-icon, .sup-table > tbody > tr > td.col-icon { width: 1%; white-space: nowrap; }

/* Sign-in page: the brand logo above the password (centred, kept small). */
.kiosk-brand { display: block; max-width: 180px; max-height: 90px; width: auto; height: auto; margin: 0 auto 6px; object-fit: contain; }
.kiosk-brand[hidden] { display: none; }

/* A module bar's button the user may not open: shown, dimmed — a click says they need permission. */
.btn.btn-locked { opacity: .5; cursor: not-allowed; background: var(--surface-2, #f8fafc); }
.btn.btn-locked:hover { opacity: .65; }
.tab.tab-locked { opacity: .5; cursor: not-allowed; display: inline-flex; align-items: center; gap: 4px; }

/* Purchase Requests → a request's edit page: its sizes as Stock Level's (a product row opening to its colours). */
.rq-items > tbody > tr.prod-variants > td { text-align: start; white-space: normal; padding: 12px 16px; background: var(--bg); }
/* (…centred as the other tabs' tables — tr-req-table —, but a product's colours and sizes opened under it.) */
.tr-req-table.rq-items > tbody > tr.prod-variants > td { text-align: start; }
.rq-items .prod-variants .ir-page > div:first-child { gap: 8px; }
.rq-items .ir-szflat .ir-kv .input { margin-top: 2px; }
.rq-items .row-toggle .me { flex-wrap: nowrap; }

/* The search's list, colours on (Purchase Requests): each product's colours and sizes as Stock Level's. */
.picker-colours { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.picker-colours .ir-colors, .picker-colours .ir-sizes { display: flex; flex-direction: column; gap: 6px; }
.picker-colours .ir-color > summary { padding: 7px 12px; }
.picker-colours .ir-color > .ir-sizes { padding: 0 10px 10px; }
.picker-colours .picker-colour-add { margin-inline-start: auto; }
.picker-colours .picker-size { width: 100%; text-align: start; font: inherit; color: inherit; cursor: pointer; }
.picker-colours .picker-size:hover { border-color: var(--primary); }

/* Purchase Orders list: an order opened (▸) — its products as Stock Level's, in a table of their own. */
.sa-table > tbody > tr.po-items > td { text-align: start; white-space: normal; padding: 10px 16px; background: var(--bg); }
.po-items .rq-items { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }


/* A Supplies / Equipments request's search list: a row an item — its photo, name and type, in stock. */
.picker-list .picker-supply, html[dir="rtl"] .picker-list .picker-supply, .picker-wide .picker-list .picker-supply, html[dir="rtl"] .picker-wide .picker-list .picker-supply { padding: 8px 12px; gap: 10px; }
.picker-supply .thumb { width: 34px; height: 34px; flex: none; }
.picker-supply .grow { display: flex; flex-direction: column; min-width: 0; }
.picker-supply:hover { background: var(--surface-2); }

/* Stock Level: Requested — a blue clipboard-with-a-tick icon (how many, and which requests, on hover). */
.req-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-inline-start: 6px; vertical-align: middle;
  border-radius: 8px; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); cursor: help; }
.req-icon .ico { width: 18px; height: 18px; }

/* Purchase Requests: Pending / Requested — one width, so the table doesn't move when a request changes. */
.rq-pill { display: inline-block; min-width: 96px; text-align: center; }
/* A button not shown, keeping its place. */
.icon-btn.icon-space { visibility: hidden; pointer-events: none; }
.order-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-width: 180px; margin-inline: auto; }
.order-tags .pill { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.orders-tag-filter { width: auto; max-width: 220px; }
.orders-tag-filter.on { border-color: var(--primary, #2563eb); font-weight: 600; }