/* MasarGo admin — brand design system (dark navy + vibrant green), light & dark themes, RTL-aware.
   Only logical properties; no inline styles (the CSP forbids them). Fonts are self-hosted (SIL OFL). */

/* ---------- Fonts ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-024F, U+2000-206F, U+20A0-20CF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-024F, U+2000-206F, U+20A0-20CF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-024F, U+2000-206F, U+20A0-20CF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-024F, U+2000-206F, U+20A0-20CF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  /* Brand */
  --navy-950: #071226;
  --navy-900: #0b1b33;
  --navy-800: #11264a;
  --navy-700: #1a3561;
  --green-500: #12b76a;
  --green-600: #0e9f5c;
  --green-700: #0b8048;

  /* Semantic (light) */
  --bg: #f3f6fa;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eef2f7;
  --text: #0f1b2d;
  --text-2: #334155;
  --muted: #64748b;
  --border: #e3e8ef;
  --border-strong: #cbd5e1;
  --primary: var(--green-600);
  --primary-hover: var(--green-700);
  --primary-ink: #ffffff;
  --primary-soft: #e3f7ee;
  --primary-soft-ink: #0b7a45;
  --focus: rgba(18, 183, 106, .35);
  --danger: #dc2626;
  --danger-soft: #fdecec;
  --warning: #b45309;
  --warning-soft: #fff4e0;
  --info: #2563eb;
  --info-soft: #e8f0fe;
  --violet: #7c3aed;
  --violet-soft: #f1eafe;
  --neutral-soft: #eef1f5;

  /* Sidebar is always navy (brand), in both themes */
  --nav-bg: var(--navy-900);
  --nav-text: #b8c4d6;
  --nav-text-strong: #ffffff;
  --nav-hover: rgba(255, 255, 255, .06);
  --nav-active: rgba(18, 183, 106, .16);
  --nav-border: rgba(255, 255, 255, .08);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-xs: 0 1px 2px rgba(15, 27, 45, .05);
  --shadow: 0 1px 2px rgba(15, 27, 45, .04), 0 6px 20px rgba(15, 27, 45, .06);
  --shadow-lg: 0 12px 40px rgba(7, 18, 38, .18);
  --font: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --topbar-h: 64px;
  --sidebar-w: 248px;
}

/* Dark theme: follows the system unless the user picked light; or forced with the toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a1424;
    --surface: #101d33;
    --surface-2: #14243e;
    --surface-3: #1a2c4a;
    --text: #e8edf5;
    --text-2: #c3cddb;
    --muted: #8fa0b8;
    --border: #22344f;
    --border-strong: #2f4566;
    --primary: #22c37a;
    --primary-hover: #33d68b;
    --primary-ink: #04150c;
    --primary-soft: rgba(34, 195, 122, .14);
    --primary-soft-ink: #5fe3a6;
    --focus: rgba(34, 195, 122, .4);
    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, .14);
    --warning: #fbbf24;
    --warning-soft: rgba(251, 191, 36, .13);
    --info: #60a5fa;
    --info-soft: rgba(96, 165, 250, .14);
    --violet: #a78bfa;
    --violet-soft: rgba(167, 139, 250, .14);
    --neutral-soft: rgba(148, 163, 184, .12);
    --nav-bg: var(--navy-950);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .25);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a1424;
  --surface: #101d33;
  --surface-2: #14243e;
  --surface-3: #1a2c4a;
  --text: #e8edf5;
  --text-2: #c3cddb;
  --muted: #8fa0b8;
  --border: #22344f;
  --border-strong: #2f4566;
  --primary: #22c37a;
  --primary-hover: #33d68b;
  --primary-ink: #04150c;
  --primary-soft: rgba(34, 195, 122, .14);
  --primary-soft-ink: #5fe3a6;
  --focus: rgba(34, 195, 122, .4);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, .14);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, .13);
  --info: #60a5fa;
  --info-soft: rgba(96, 165, 250, .14);
  --violet: #a78bfa;
  --violet-soft: rgba(167, 139, 250, .14);
  --neutral-soft: rgba(148, 163, 184, .12);
  --nav-bg: var(--navy-950);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .25);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .5);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html, body { overflow-x: clip; } /* the off-canvas menu must never widen the page */
body {
  background: var(--bg); color: var(--text);
  font: 400 calc(14px * var(--fs, 1))/1.55 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
[lang="ar"] body { font-family: "IBM Plex Sans Arabic", "Inter", system-ui, Tahoma, sans-serif; }
[hidden] { display: none !important; }
h1 { font-size: calc(22px * var(--fs, 1)); line-height: 1.25; font-weight: 700; letter-spacing: -.015em; margin: 0 0 18px; }
h2 { font-size: calc(16px * var(--fs, 1)); font-weight: 650; margin: 0; letter-spacing: -.005em; }
h3 { font-size: calc(12px * var(--fs, 1)); margin: 22px 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 650; }
[lang="ar"] h3 { text-transform: none; letter-spacing: 0; font-size: calc(13px * var(--fs, 1)); }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }
.muted { color: var(--muted); }
.error { color: var(--danger); margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: embed; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--primary-soft); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

/* Icons (inline SVG, colour from currentColor) */
.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.icon-lg { width: 22px; height: 22px; }

/* ---------- Brand ---------- */
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: calc(17px * var(--fs, 1)); letter-spacing: -.01em; color: var(--nav-text-strong); }
.brand-lg { font-size: calc(24px * var(--fs, 1)); justify-content: center; color: var(--text); }
.brand-mark {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--green-500), var(--green-700)); color: #fff; font-weight: 800;
  box-shadow: 0 4px 12px rgba(18, 183, 106, .35);
}
.brand-lg .brand-mark { width: 44px; height: 44px; border-radius: 13px; font-size: calc(20px * var(--fs, 1)); }

/* Official logo (img/masargo-logo.png, 2:1, transparent; shown on a white tile): always scaled by height or width, never stretched. */
.logo { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.logo-tile { display: inline-flex; align-items: center; height: 46px; padding: 3px 10px; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.sidebar-brand .logo-tile { height: 96px; padding: 4px 14px; }
.topbar > .brand .logo-tile { height: 40px; padding: 2px 8px; box-shadow: var(--shadow-xs); border: 1px solid var(--border); }
/* The logo never shrinks below its 2:1 shape, even in a crowded top bar. */
.logo-tile, .logo-tile .logo, .topbar > .brand { flex: none; }
.logo-tile .logo { aspect-ratio: 2 / 1; max-width: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 8px 16px; border-radius: 10px; font: 600 calc(14px * var(--fs, 1))/1.2 var(--font);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  cursor: pointer; box-shadow: var(--shadow-xs); text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
}
[lang="ar"] .btn { font-family: "IBM Plex Sans Arabic", "Inter", sans-serif; }
.btn:hover { border-color: var(--border-strong); background: var(--surface-2); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); box-shadow: 0 1px 2px rgba(14, 159, 92, .3); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-ink); }
.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.btn-danger:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.btn-ghost { border-color: transparent; background: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--surface-3); border-color: transparent; }
.btn-block { width: 100%; min-height: 46px; font-size: calc(15px * var(--fs, 1)); }
.btn-sm { min-height: 30px; padding: 5px 11px; font-size: calc(13px * var(--fs, 1)); border-radius: 8px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; font-size: calc(18px * var(--fs, 1));
}
.icon-btn:hover { background: var(--surface-3); }

/* ---------- Forms ---------- */
input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 12px; min-height: 40px; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 72px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--focus); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--primary); }
input[type="date"] { min-width: 150px; }
label { display: grid; gap: 6px; font-weight: 600; font-size: calc(13px * var(--fs, 1)); color: var(--text-2); }
.field-error { color: var(--danger); font-weight: 500; font-size: calc(12px * var(--fs, 1)); }
.check { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.check input { width: 18px; margin: 0; }
label .check { font-weight: 400; font-size: calc(12px * var(--fs, 1)); color: var(--muted); }

/* ---------- Cards & layout ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.pad { padding: 18px 20px; }
.mt { margin-block-start: 12px; }
.between { justify-content: space-between; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stack { display: grid; gap: 14px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Table row buttons: a compact 2-column grid of equal-width buttons (owner 2026-10-05: four stacked buttons made
   every rider row tall). The danger action is put last by the markup. */
.row-actions { display: grid; grid-template-columns: repeat(2, minmax(max-content, 1fr)); gap: 6px; justify-content: end; }
.row-actions .btn { width: 100%; justify-content: center; white-space: nowrap; }
.row-actions > :only-child { grid-column: span 2; }
.split { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 18px; align-items: start; }
.wrap { white-space: normal; display: inline-block; min-width: 140px; max-width: 260px; }
/* Addresses (owner 2026-10-08): each address reads in its own language (Arabic numbers and commas in the right
   order) but lines up with the column; in reports the map link sits under the address inside the same cell. */
.addr { unicode-bidi: plaintext; text-align: match-parent; }
.addr-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 180px; max-width: 280px; white-space: normal; }
.addr-cell a { white-space: nowrap; }
/* Map icon (owner 2026-10-08): replaces the coordinates everywhere; opens Google Maps at the point. */
.map-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  color: var(--primary, #16a34a); background: color-mix(in srgb, var(--primary, #16a34a) 12%, transparent); vertical-align: middle;
  transition: background-color .15s, transform .15s;
}
.map-btn:hover, .map-btn:focus-visible { background: color-mix(in srgb, var(--primary, #16a34a) 22%, transparent); transform: scale(1.06); }
.map-btn svg { width: 18px; height: 18px; }
.grow-1 { flex: 1 1 auto; overflow-wrap: anywhere; }
.code { font-family: var(--mono); font-size: calc(12.5px * var(--fs, 1)); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px; color: var(--text-2); }
pre.code { margin: 0; max-height: 340px; overflow: auto; white-space: pre-wrap; word-break: break-word; direction: ltr; text-align: left; }

/* ---------- Login (owner reference design 2026-10-06; same look in light and dark theme) ---------- */
.login {
  --surface: #ffffff; --text: #0f1b2d; --text-2: #1f2a3c; --muted: #6b7686; --border: #dfe4ea; --border-strong: #cbd5e1;
  --primary: #12b76a; --primary-hover: #0e9f5c; --primary-ink: #ffffff; --focus: rgba(18, 183, 106, .25);
  --hero-bg: #03222a; color-scheme: light;
  position: relative; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(480px, 1fr);
  background: var(--hero-bg); color: var(--text); overflow: hidden;
}
.login[hidden] { display: none; }

/* Left: dark photo panel */
.login-hero {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0;
  padding: 72px clamp(28px, 6.5vw, 128px) 64px; color: #fff;
  background:
    linear-gradient(90deg, var(--hero-bg) 0%, rgba(3, 34, 42, .9) 40%, rgba(3, 34, 42, .35) 62%, rgba(3, 34, 42, 0) 80%),
    linear-gradient(0deg, rgba(3, 22, 28, .7), transparent 30%),
    url("../img/login-bg.jpg") right 70px center / auto 100% no-repeat,
    var(--hero-bg);
}
.login-hero-logo { width: clamp(220px, 17vw, 310px); height: auto; margin: 0 0 30px -14px; }
.login-eyebrow { margin: 0 0 14px; font-size: calc(13px * var(--fs, 1)); font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
[dir="rtl"] .login-eyebrow { letter-spacing: 0; font-size: calc(15px * var(--fs, 1)); }
.login-headline { margin: 0 0 14px; display: grid; font-size: calc((clamp(34px, 3.4vw, 54px)) * var(--fs, 1)); line-height: 1.12; font-weight: 800; letter-spacing: -.01em; }
.login-headline .accent { color: #22d47a; }
.login-lead { margin: 0 0 30px; max-width: 480px; font-size: calc(18px * var(--fs, 1)); line-height: 1.5; color: rgba(255, 255, 255, .86); }
.login-features { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 22px 28px; }
.login-features li { display: flex; align-items: center; gap: 22px; font-size: calc(17px * var(--fs, 1)); font-weight: 600; line-height: 1.3; max-width: 230px; }
.login-features li > span:last-child { max-width: 6.2em; }
.feature-icon {
  flex: none; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 14px;
  border: 1.5px solid #19c46f; background: rgba(18, 183, 106, .14); color: #22d47a; box-shadow: 0 0 22px rgba(18, 183, 106, .18);
}
.feature-icon svg { width: 30px; height: 30px; }
.login-highlights {
  display: grid; grid-template-columns: repeat(3, auto); align-items: center; justify-content: start; width: fit-content; max-width: 100%;
  padding: 20px 32px; border-radius: 16px; border: 1px solid rgba(34, 212, 122, .35);
  background: rgba(6, 44, 48, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.login-highlights > div { display: flex; align-items: center; gap: 14px; padding-inline: 26px; }
.login-highlights > div:first-child { padding-inline-start: 0; }
.login-highlights > div:last-child { padding-inline-end: 0; }
.login-highlights > div + div { border-inline-start: 1px solid rgba(255, 255, 255, .22); }
.hl-icon { width: 34px; height: 34px; color: #22d47a; flex: none; }
.login-highlights span { display: grid; gap: 4px; }
.login-highlights b { font-size: calc(15px * var(--fs, 1)); font-weight: 600; }
.login-highlights small { font-size: calc(14px * var(--fs, 1)); color: rgba(255, 255, 255, .75); }

/* Right: light side with a curved edge over the photo */
.login-side { position: relative; display: grid; place-items: center; padding: 110px 48px 48px 0; }
.login-side::before {
  content: ""; position: absolute; top: -25%; bottom: -25%; inset-inline-end: 0; inset-inline-start: -70px; z-index: 0;
  background: linear-gradient(160deg, #e9f7f2 0%, #f7fafc 40%, #f3f6f9 70%, #e4f6ee 100%);
  border-radius: 150px 0 0 150px / 50% 0 0 50%;
  box-shadow: -10px 0 40px rgba(34, 212, 122, .25), -2px 0 0 rgba(120, 230, 180, .45);
}
[dir="rtl"] .login-side { padding: 110px 0 48px 48px; }
[dir="rtl"] .login-side::before { border-radius: 0 150px 150px 0 / 0 50% 50% 0; box-shadow: 10px 0 40px rgba(34, 212, 122, .25), 2px 0 0 rgba(120, 230, 180, .45); }
[dir="rtl"] .login-hero {
  background:
    linear-gradient(270deg, var(--hero-bg) 0%, rgba(3, 34, 42, .9) 40%, rgba(3, 34, 42, .35) 62%, rgba(3, 34, 42, 0) 80%),
    linear-gradient(0deg, rgba(3, 22, 28, .7), transparent 30%),
    url("../img/login-bg-rtl.jpg") left 70px center / auto 100% no-repeat,
    var(--hero-bg);
}
[dir="rtl"] .login-hero-logo { margin: 0 -14px 30px 0; }

.login-card {
  position: relative; z-index: 1; width: min(656px, 100%); display: grid; gap: 18px;
  padding: 34px clamp(24px, 3.2vw, 54px) 26px; background: #fff; border-radius: 20px;
  box-shadow: 0 24px 60px rgba(7, 32, 40, .16), 0 2px 6px rgba(7, 32, 40, .06);
}
.login-card p { text-align: center; margin: 0; }
.login-logo { display: flex; justify-content: center; margin-block-end: -6px; }
.login-logo .logo { width: min(262px, 70%); height: auto; }
.login-heading { display: grid; gap: 4px; text-align: center; margin-block-end: 4px; }
.login-heading h2 { margin: 0; font-size: calc(32px * var(--fs, 1)); font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.login-heading .muted { font-size: calc(17px * var(--fs, 1)); color: var(--muted); }
.login-card label { font-size: calc(16px * var(--fs, 1)); font-weight: 600; color: var(--text); gap: 9px; }
.input-icon { position: relative; display: block; }
.input-icon > svg { position: absolute; inset-inline-start: 18px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: #2b3646; pointer-events: none; }
.input-icon input { width: 100%; height: 54px; padding-inline: 56px 18px; font-size: calc(16px * var(--fs, 1)); font-weight: 400; border-radius: 8px; border: 1px solid #d5dbe3; background: #fff; color: var(--text); }
.input-icon input::placeholder { color: #8a94a3; opacity: 1; }
#login-password { padding-inline-end: 54px; }
.pw-toggle {
  position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px;
  display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #1f2a3c; cursor: pointer;
}
.pw-toggle:hover { background: #f1f4f7; }
.pw-toggle.on { color: var(--primary); }
.pw-toggle svg { width: 22px; height: 22px; }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block: 0 -2px; }
.login-options .check { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: calc(16px * var(--fs, 1)); color: var(--text); cursor: pointer; }
.login-options .check input { width: 20px; height: 20px; }
.login-options a { font-size: calc(16px * var(--fs, 1)); font-weight: 600; text-decoration: none; color: #12a85f; }
.login-options a:hover { text-decoration: underline; }
.login-submit { height: 62px; margin-block-start: 6px; gap: 12px; font-size: calc(20px * var(--fs, 1)); font-weight: 600; border-radius: 8px; box-shadow: 0 6px 16px rgba(18, 183, 106, .28); }
.login-submit .arrow { width: 22px; height: 22px; }
[dir="rtl"] .login-submit .arrow { transform: scaleX(-1); }
.login-or { display: flex; align-items: center; gap: 14px; color: #5b6676; font-size: calc(16px * var(--fs, 1)); margin-block: 2px -6px; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: #e2e7ed; }

/* Language pills (top corner and below the card) */
.login-lang { position: relative; display: inline-flex; align-items: center; }
.login-lang .lang-globe { position: absolute; inset-inline-start: 18px; width: 22px; height: 22px; color: #1f2a3c; pointer-events: none; }
.login-lang select {
  width: auto; min-height: 50px; padding-block: 8px; padding-inline: 52px 44px; font-size: calc(17px * var(--fs, 1)); font-weight: 500; color: var(--text);
  border: 1px solid #dfe4ea; border-radius: 12px; background-color: #fff; box-shadow: 0 4px 14px rgba(15, 27, 45, .06); cursor: pointer;
}
.login-lang-top { position: absolute; top: 30px; inset-inline-end: 98px; z-index: 2; }
.login-lang-bottom { justify-self: center; }
.login .error { text-align: center; }

@media (max-width: 1280px) {
  .login { grid-template-columns: minmax(0, 1.25fr) minmax(440px, 1fr); }
  /* Narrower hero: the strip stays one row (titles only) so the page still fits the screen height. */
  .login-highlights { padding-inline: 18px; }
  .login-highlights > div { padding-inline: 14px; gap: 10px; }
  .login-highlights small { display: none; }
  .login-highlights b { font-size: calc(13.5px * var(--fs, 1)); }
  .hl-icon { width: 26px; height: 26px; }
  .login-lang-top { inset-inline-end: 40px; }
}
/* Tablet / phone: the photo panel becomes a short banner above the card. */
@media (max-width: 980px) {
  .login { grid-template-columns: 1fr; min-height: 100vh; background: #f3f6f9; }
  .login-hero, [dir="rtl"] .login-hero {
    padding: 84px 24px 72px; align-items: center; text-align: center;
    background: linear-gradient(0deg, rgba(3, 34, 42, .92), rgba(3, 34, 42, .72)), url("../img/login-bg.jpg") 85% 40% / cover no-repeat, var(--hero-bg);
  }
  .login-hero-logo { margin: 0 0 18px; width: 200px; }
  .login-lead { margin-inline: auto; margin-block-end: 0; }
  .login-features, .login-highlights { display: none; }
  .login-side { padding: 0 16px 32px; margin-top: -40px; }
  [dir="rtl"] .login-side { padding: 0 16px 32px; }
  .login-side::before { display: none; }
  .login-lang-top { top: 16px; inset-inline-end: 16px; }
  .login-lang-top select { min-height: 42px; font-size: calc(15px * var(--fs, 1)); }
}
@media (max-width: 600px) {
  .login-hero { padding: 72px 16px 64px; }
  .login-eyebrow { font-size: calc(11px * var(--fs, 1)); letter-spacing: .22em; }
  .login-lead { font-size: calc(15px * var(--fs, 1)); }
  .login-card { padding: 26px 18px 22px; gap: 15px; border-radius: 16px; }
  .login-heading h2 { font-size: calc(26px * var(--fs, 1)); }
  .login-heading .muted, .login-card label, .login-options .check, .login-options a { font-size: calc(15px * var(--fs, 1)); }
  .login-submit { height: 54px; font-size: calc(18px * var(--fs, 1)); }
}
/* Login fits the screen (owner 2026-10-06: no vertical or horizontal scrolling). Vertical sizes follow the visible
   screen height (svh = height with the browser bars shown); browsers without svh keep the fixed sizes above. */
.login { min-height: 100svh; }
.login-hero { padding-block: clamp(24px, 6svh, 72px) clamp(20px, 5svh, 64px); }
.login-hero-logo { width: min(clamp(220px, 17vw, 310px), 30svh); margin-block-end: clamp(10px, 2.6svh, 30px); }
.login-eyebrow { margin-block-end: clamp(6px, 1.3svh, 14px); }
.login-headline { font-size: calc((min(clamp(34px, 3.4vw, 54px), 6.2svh)) * var(--fs, 1)); margin-block-end: clamp(6px, 1.3svh, 14px); }
.login-lead { font-size: calc((clamp(14px, 2.3svh, 18px)) * var(--fs, 1)); margin-block-end: clamp(12px, 2.8svh, 30px); }
.login-features { margin-block-end: clamp(12px, 3svh, 32px); row-gap: clamp(10px, 2svh, 22px); }
.feature-icon { width: clamp(44px, 7svh, 64px); height: clamp(44px, 7svh, 64px); }
.login-highlights { padding-block: clamp(10px, 1.9svh, 20px); }
.login-side, [dir="rtl"] .login-side { padding-block: clamp(64px, 11svh, 110px) clamp(12px, 3svh, 48px); }
.login-lang-top { top: clamp(10px, 3svh, 30px); }
.login-lang select { min-height: clamp(36px, 5.6svh, 50px); padding-block: 4px; }
.login-card { padding-block: clamp(14px, 3.6svh, 34px) clamp(12px, 2.8svh, 26px); gap: clamp(7px, 1.9svh, 18px); }
.login-logo .logo { width: min(262px, 70%, 27svh); }
.login-heading h2 { font-size: calc((clamp(22px, 3.6svh, 32px)) * var(--fs, 1)); }
.login-heading .muted { font-size: calc((clamp(14px, 1.9svh, 17px)) * var(--fs, 1)); }
.login-card label { gap: clamp(4px, 1svh, 9px); }
.input-icon input { height: clamp(40px, 6svh, 54px); }
.login-submit { height: clamp(42px, 6.9svh, 62px); font-size: calc((clamp(16px, 2.2svh, 20px)) * var(--fs, 1)); margin-block-start: clamp(0px, .6svh, 6px); }
@media (max-width: 980px) {
  .login { grid-template-rows: auto 1fr; }
  .login-hero, [dir="rtl"] .login-hero { padding-block: calc(clamp(10px, 2svh, 16px) + clamp(36px, 5.6svh, 42px) + 8px) clamp(30px, 6svh, 72px); }
  .login-hero-logo { display: none; }  /* the card below shows the logo */
  .login-lead { display: none; }
  .login-logo .logo { width: min(220px, 60%, 21svh); }
  .login-headline { font-size: calc((clamp(24px, 4.2svh, 40px)) * var(--fs, 1)); }
  .login-side, [dir="rtl"] .login-side { padding-block: 0 clamp(8px, 2svh, 32px); margin-top: calc(-1 * clamp(18px, 4svh, 40px)); align-content: start; }
  .login-lang-top { top: clamp(10px, 2svh, 16px); }
  .login-lang-top select { min-height: clamp(36px, 5.6svh, 42px); }
}
@media (max-width: 600px) {
  .login-card { padding-block: clamp(12px, 2.6svh, 26px) clamp(10px, 2.2svh, 22px); gap: clamp(6px, 1.6svh, 15px); }
  .login-submit { height: clamp(42px, 6.4svh, 54px); }
}
/* Short phones (e.g. 360 x 640): smaller banner so the whole card stays on screen. */
@media (max-width: 980px) and (max-height: 760px) {
  .login-eyebrow { display: none; }
  .login-headline { font-size: calc(22px * var(--fs, 1)); margin: 0; }
  .login-hero, [dir="rtl"] .login-hero { padding-block-end: 30px; }
  .login-or { margin-block: 0 -4px; }
}
.forgot-body { margin: 0; color: var(--text-2); line-height: 1.6; }
.lang-row { display: flex; justify-content: center; }
.lang-row select { width: auto; min-height: 34px; padding: 5px 30px 5px 10px; }

/* ---------- App shell ---------- */
/* minmax(0, …): wide tables scroll inside their card instead of stretching the page. */
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-rows: var(--topbar-h) 1fr; min-height: 100%; }
.topbar {
  grid-column: 2; grid-row: 1; position: sticky; top: 0; z-index: 900;
  display: flex; align-items: center; gap: 12px; padding-inline: 24px;
  background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(160%) blur(10px);
  border-block-end: 1px solid var(--border);
}
.topbar > .brand { display: none; }
.topbar-end { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.topbar-end select { width: auto; min-height: 36px; padding-block: 6px; }
.topbar-end .branch-select { max-width: 220px; }
#user-name { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-weight: 600; }
.avatar {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary-soft-ink); font-weight: 700; font-size: calc(13px * var(--fs, 1));
}
.avatar.has-photo { background: none; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.person { display: inline-flex; align-items: center; gap: 10px; }
#menu-toggle { display: none; }

.sidebar {
  grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--nav-bg); color: var(--nav-text); padding: 0 12px 20px;
  display: flex; flex-direction: column; gap: 2px; border-inline-end: 1px solid var(--nav-border);
}
.sidebar-brand { height: 124px; display: flex; align-items: center; justify-content: center; padding-inline: 8px; margin-block-end: 8px; border-block-end: 1px solid var(--nav-border); }
.sidebar a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  color: var(--nav-text); text-decoration: none; font-weight: 500; transition: background .15s, color .15s;
}
.sidebar a:hover { background: var(--nav-hover); color: var(--nav-text-strong); }
.sidebar a.active { background: var(--nav-active); color: var(--nav-text-strong); font-weight: 600; box-shadow: inset 3px 0 0 var(--green-500); }
[dir="rtl"] .sidebar a.active { box-shadow: inset -3px 0 0 var(--green-500); }
.sidebar a.active .icon { color: var(--green-500); }
.nav-section { margin: 18px 12px 6px; font-size: calc(11px * var(--fs, 1)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(184, 196, 214, .55); }
[lang="ar"] .nav-section { text-transform: none; letter-spacing: 0; font-size: calc(12px * var(--fs, 1)); }
.page { grid-column: 2; padding: 26px 28px 40px; overflow: auto; min-width: 0; max-width: 1600px; width: 100%; }
.page:focus { outline: none; }
.page > h1, .page > .row.between > h1 { display: flex; align-items: center; gap: 10px; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-block-end: 16px; }
.toolbar > * { width: auto; }
.toolbar .grow { flex: 1 1 240px; }
.toolbar .end { margin-inline-start: auto; }

/* ---------- KPI tiles ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-block-end: 20px; }
.kpi { padding: 13px 15px; display: grid; gap: 6px; position: relative; overflow: hidden; }
.kpi .label { color: var(--muted); font-size: calc(13px * var(--fs, 1)); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.kpi .label .icon { width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: var(--surface-3); color: var(--text-2); }
.kpi .value { font-size: calc(28px * var(--fs, 1)); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.kpi.accent .value { color: var(--primary); }
.kpi.accent .label .icon { background: var(--primary-soft); color: var(--primary-soft-ink); }
.kpi.warn .value { color: var(--warning); }
.kpi.warn .label .icon { background: var(--warning-soft); color: var(--warning); }
.kpi.bad .value { color: var(--danger); }
.kpi .value.compact { font-size: calc(20px * var(--fs, 1)); }

/* Report tabs (owner 2026-10-06: summary, deliveries, location requests) */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-block-end: 14px; overflow-x: auto; }
.tabs a { padding: 10px 14px; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; }
.tabs a.active { color: var(--primary); border-bottom-color: var(--primary); }
.kpi.bad .label .icon { background: var(--danger-soft); color: var(--danger); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); }
th, td { padding: 12px 14px; text-align: start; border-block-end: 1px solid var(--border); white-space: nowrap; vertical-align: middle; }
th {
  position: sticky; top: 0; z-index: 1; background: var(--surface-2);
  font-size: calc(11.5px * var(--fs, 1)); color: var(--muted); font-weight: 650; text-transform: uppercase; letter-spacing: .05em;
}
[lang="ar"] th { text-transform: none; letter-spacing: 0; font-size: calc(12.5px * var(--fs, 1)); }
tbody tr { transition: background .12s; }
tbody tr:last-child td { border-block-end: 0; }
tbody tr:hover { background: var(--surface-2); }
tbody tr.clickable { cursor: pointer; }
.pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding: 12px 14px; border-block-start: 1px solid var(--border); }

/* ---------- States: loading, empty, error ---------- */
.empty {
  padding: 48px 24px; text-align: center; color: var(--muted); display: grid; justify-items: center; gap: 10px;
}
.empty::before {
  content: ""; width: 56px; height: 56px; border-radius: 16px; background-color: var(--surface-3);
  background-repeat: no-repeat; background-position: center; background-size: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
}
.state-error::before {
  background-color: var(--danger-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
}
.state-error { color: var(--text-2); }
.state-error strong { color: var(--text); font-size: calc(15px * var(--fs, 1)); }
.skeleton { display: grid; gap: 14px; }
.skeleton .bar { height: 14px; border-radius: 8px; }
.skeleton .bar.title { height: 26px; width: 220px; }
.skeleton .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.skeleton .block { height: 96px; border-radius: var(--radius); }
.skeleton .panel { height: 320px; border-radius: var(--radius); }
.shimmer {
  background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 40%, var(--surface-3) 80%);
  background-size: 300% 100%; animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: calc(12px * var(--fs, 1)); font-weight: 600; line-height: 1.5; background: var(--neutral-soft); color: var(--muted); white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.badge.New, .badge.appr-Pending { background: var(--warning-soft); color: var(--warning); }
.badge.Assigned, .badge.req-Sent, .badge.req-Delivered, .badge.req-Queued, .badge.res-Waiting { background: var(--info-soft); color: var(--info); }
.badge.OutForDelivery, .badge.req-Read { background: var(--violet-soft); color: var(--violet); }
.badge.Delivered, .badge.online, .badge.appr-Approved, .badge.req-Received, .badge.res-Replied { background: var(--primary-soft); color: var(--primary-soft-ink); }
.badge.Failed, .badge.appr-Rejected, .badge.req-Failed, .badge.res-NotDelivered { background: var(--danger-soft); color: var(--danger); }
.badge.Cancelled, .badge.offline, .badge.req-Expired, .badge.req-NoReply, .badge.res-NotReplied { background: var(--neutral-soft); color: var(--muted); }

/* ---------- Map ---------- */
.map { height: 460px; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; z-index: 0; }
.map-sm { height: 240px; }
.map-md { height: 380px; }
.map-tall { height: calc(100vh - 190px); min-height: 420px; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-block: 10px; font-size: calc(13px * var(--fs, 1)); color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: 6px; vertical-align: 0; }
.dot-rider { background: var(--info); }
.dot-pending { background: #f59e0b; }
.dot-done { background: var(--green-500); }
.dot-failed { background: #ef4444; }
.stop-icon { display: grid !important; place-items: center; border-radius: 50%; color: #fff; font-weight: 700; font-size: calc(12px * var(--fs, 1)); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.stop-icon.pending { background: #f59e0b; }
.stop-icon.done { background: var(--green-500); }
.stop-icon.failed { background: #ef4444; }
.stop-icon.unassigned { background: #64748b; }
.rider-icon { display: grid !important; place-items: center; border-radius: 50%; background: var(--navy-700); color: #fff; font-size: calc(14px * var(--fs, 1)); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.rider-icon.offline { background: #94a3b8; }
:root[data-theme="dark"] .leaflet-tile-pane { filter: brightness(.82) contrast(1.05) saturate(.85); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .leaflet-tile-pane { filter: brightness(.82) contrast(1.05) saturate(.85); } }
.leaflet-container { font: inherit; background: var(--surface-3); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }

/* ---------- Details, lists ---------- */
dl.details { display: grid; grid-template-columns: max-content 1fr; gap: 9px 20px; margin: 0; }
dl.details dt { color: var(--muted); font-weight: 500; }
dl.details dd { margin: 0; color: var(--text); }
.stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stops li {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); transition: border-color .15s, box-shadow .15s;
}
.stops li[data-order] { cursor: pointer; }
.stops li[data-order]:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.stops .seq { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-soft-ink); font-weight: 700; font-size: calc(12px * var(--fs, 1)); }
.stops li.next { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus); }
.route-card { padding: 11px 13px; text-decoration: none; color: inherit; display: block; transition: border-color .15s, box-shadow .15s, transform .1s; }
.route-card:hover { border-color: var(--border-strong); color: inherit; transform: translateY(-1px); }
.route-card.selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus); }

/* ---------- Settings / integrations ---------- */
.setting { display: grid; grid-template-columns: 1fr minmax(140px, 220px) auto; gap: 14px; align-items: center; }
.setting-value { gap: 0; }
.test-result { margin: 0; font-weight: 600; }
.test-result.ok { color: var(--primary); }
.integration h2 { display: flex; align-items: center; gap: 8px; }

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px;
  background: rgba(7, 18, 38, .55); backdrop-filter: blur(4px); animation: fade .15s ease-out;
}
.modal-card { width: min(680px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px 24px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: rise .18s ease-out; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 16px; }
.modal-head h2 { font-size: calc(18px * var(--fs, 1)); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-block-start: 20px; padding-block-start: 16px; border-block-start: 1px solid var(--border); flex-wrap: wrap; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }

/* ---------- Toast ---------- */
.toast {
  position: fixed; inset-block-end: 24px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 3000;
  display: flex; align-items: center; gap: 10px; max-width: min(520px, calc(100vw - 32px));
  background: var(--navy-900); color: #fff; padding: 12px 18px; border-radius: 12px; box-shadow: var(--shadow-lg);
  font-weight: 500; animation: rise .18s ease-out;
}
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); flex: none; }
[dir="rtl"] .toast { transform: translateX(50%); }
.toast.error { background: #b91c1c; }
.toast.error::before { background: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .topbar { grid-column: 1; padding-inline: 12px; }
  .topbar > .brand { display: flex; color: var(--text); }
  #menu-toggle { display: inline-grid; color: var(--text); }
  .page { grid-column: 1; padding: 18px 14px 32px; }
  .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; width: 272px; z-index: 1500; height: 100%;
    transform: translateX(-100%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; box-shadow: var(--shadow-lg);
  }
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  .sidebar.open { transform: none !important; visibility: visible; transition: transform .22s ease; }
  .grid-2, .setting { grid-template-columns: 1fr; }
  #user-name .user-label { display: none; }
  .topbar-end { gap: 6px; }
  .topbar-end .branch-select { max-width: 130px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .value { font-size: calc(24px * var(--fs, 1)); }
  h1 { font-size: calc(19px * var(--fs, 1)); }
}
@media (max-width: 600px) {
  /* Narrow phones: icon-only controls so the theme switch and Sign out stay reachable. */
  .topbar { gap: 6px; padding-inline: 8px; }
  .topbar-end { gap: 4px; }
  .topbar-end .branch-select { max-width: 112px; }
  .topbar-end .lang-select { max-width: 84px; padding-inline: 8px; }
  #logout { padding-inline: 8px; }
  #logout span { display: none; }
  #user-name { display: none; }
}
@media (max-width: 480px) {
  .modal { padding: 8px; align-items: end; }
  .modal-card { border-radius: 18px 18px 0 0; max-height: 92vh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .sidebar, .topbar, .toolbar, .modal-actions { display: none !important; }
  .shell { display: block; }
  .card { box-shadow: none; }
}

/* Distances (owner 2026-10-05): heavy traffic tag, loading rows, assign list, place search */
.badge.heavy { background: #fee2e2; color: #b91c1c; }
.loading-row { display: flex; align-items: center; gap: 8px; }
.spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Assign window (owner 2026-10-07 "fix screen design and display more data"): one card per rider. */
.assign-list { display: flex; flex-direction: column; gap: 8px; max-height: 56vh; overflow: auto; padding: 2px; }
.assign-option {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border, #d0d7de); border-radius: 12px; cursor: pointer;
  font-weight: 400; color: var(--text); background: var(--surface); transition: border-color .15s, background .15s, box-shadow .15s;
}
.assign-option:hover { border-color: var(--primary); }
.assign-option:has(input:checked) { border-color: var(--primary); background: var(--primary-soft, rgba(22, 163, 74, .08)); box-shadow: 0 0 0 3px var(--focus); }
.assign-option input[type="radio"] { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--primary); }
.assign-option .avatar { width: 40px; height: 40px; font-size: calc(14px * var(--fs, 1)); }
.assign-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.assign-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.assign-name { font-size: calc(15px * var(--fs, 1)); overflow-wrap: anywhere; }
.assign-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: calc(13px * var(--fs, 1)); }
.assign-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.assign-chips .chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-size: calc(12px * var(--fs, 1)); }
.assign-distance { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: end; font-weight: 700; white-space: nowrap; }
.assign-distance .assign-from { font-weight: 400; font-size: calc(11.5px * var(--fs, 1)); }
.badge.muted-badge { background: var(--surface-3); color: var(--muted); }
.assign-option input[type="radio"]:focus { box-shadow: none; }
#assign-form [name=assignSort] { width: auto; min-width: 170px; }
@media (max-width: 600px) {
  .assign-option { grid-template-columns: auto auto minmax(0, 1fr); }
  .assign-distance { grid-column: 3; align-items: flex-start; text-align: start; }
}
.search-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.search-results .link { background: none; border: 0; padding: 4px 0; text-align: start; cursor: pointer; color: inherit; }
label.inline { display: inline-flex; align-items: center; gap: 6px; }

/* Delivery proof review (order window) */
.proof { border: 1px solid var(--border, #e2e8f0); border-radius: 12px; padding: 10px; margin-bottom: 12px; display: grid; gap: 6px; }
.proof-photo { width: 100%; max-height: 320px; object-fit: contain; border-radius: 8px; background: #f1f5f9; cursor: zoom-in; }
.proof-distance { font-weight: 700; }
.proof-distance.near { color: var(--green-600, #15803d); }
.proof-distance.far { color: #b91c1c; }
.proof-icon { display: grid !important; place-items: center; border-radius: 50%; background: #1f6fb2; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); font-size: calc(14px * var(--fs, 1)); }
.proof-icon.far { background: #ef4444; }
.comments { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 8px; }
.comments li { border-inline-start: 3px solid var(--green-500, #22c55e); padding-inline-start: 8px; }
.comment-form { display: flex; gap: 8px; align-items: flex-start; }
.comment-form textarea { flex: 1; }

/* Bulk orders from Excel */
.import-steps { margin: 0 0 12px; padding-inline-start: 20px; display: grid; gap: 6px; }
#import-errors td:first-child { font-weight: 700; white-space: nowrap; }
#import-result .table-wrap { max-height: 320px; overflow: auto; }

/* WhatsApp API log: request / response bodies */
pre.code { white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; font-size: calc(12px * var(--fs, 1)); }

/* =====================================================================================================================
   Enterprise polish (owner 2026-10-06): one consistent look on every screen - UI only, no behaviour change.
   ===================================================================================================================== */

/* Sidebar: smaller logo tile, calmer navigation */
.sidebar { padding: 0 12px 20px; gap: 1px; }
/* Sidebar header (owner 2026-10-06): the logo tile fills the header width, equal padding on every side, logo kept 2:1 */
.sidebar-brand { height: auto; padding: 16px 4px; margin-block-end: 10px; }
.sidebar-brand .logo-tile { width: 100%; height: auto; padding: 8px 12px; justify-content: center; border-radius: 14px; }
.sidebar-brand .logo-tile .logo { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; }
.sidebar a { padding: 9px 12px; font-size: calc(14px * var(--fs, 1)); border-radius: 9px; }
.sidebar a .icon { opacity: .9; }
.nav-section { margin: 20px 12px 6px; font-size: calc(10.5px * var(--fs, 1)); }

/* Top bar */
.topbar { gap: 12px; padding-inline: 28px; box-shadow: 0 1px 0 var(--border); border-block-end: 0; }
.topbar-end select { min-height: 36px; border-radius: 9px; font-size: calc(13.5px * var(--fs, 1)); }
#logout { font-size: calc(13.5px * var(--fs, 1)); }

/* Page and page header (title on one side, the page actions on the other) */
.page { padding: 28px 32px 48px; }
h1 { font-size: calc(24px * var(--fs, 1)); margin: 0 0 20px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-block-end: 18px; }
.page-head h1 { margin: 0; }
.page-head .legend { margin: 0; }
.page-sub { margin: 4px 0 0; color: var(--muted); font-size: calc(13.5px * var(--fs, 1)); }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.page > p.muted { margin: -6px 0 14px; font-size: calc(13px * var(--fs, 1)); }

/* Filter bars: one panel, fields side by side, wrap neatly */
form.toolbar {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs);
  padding: 12px; gap: 10px; align-items: end; margin-block-end: 16px;
}
.toolbar input:not([type="checkbox"]), .toolbar select { min-height: 38px; padding-block: 7px; }
.toolbar .btn { min-height: 38px; }
.toolbar > label:not(.check):not(.inline) { flex: 1 1 160px; min-width: 140px; max-width: 280px; font-size: calc(12px * var(--fs, 1)); color: var(--muted); font-weight: 600; gap: 5px; }
.toolbar > label.check { flex: none; align-self: center; font-size: calc(13px * var(--fs, 1)); }
.toolbar .grow { flex: 2 1 260px; }
.toolbar > select, .toolbar > input[type="date"] { flex: 0 1 180px; }
.toolbar label.inline { color: var(--muted); font-size: calc(13px * var(--fs, 1)); font-weight: 600; }
.toolbar label.inline select { width: auto; }

/* Buttons */
.btn { border-radius: 9px; min-height: 38px; padding: 8px 15px; font-size: calc(13.5px * var(--fs, 1)); }
.btn-sm { min-height: 30px; padding: 5px 11px; font-size: calc(12.5px * var(--fs, 1)); border-radius: 8px; }
.btn:disabled, .btn:disabled:hover { opacity: 1; background: var(--surface-2); border-color: var(--border); color: var(--muted); box-shadow: none; }
.btn-primary:disabled, .btn-primary:disabled:hover { background: color-mix(in srgb, var(--primary) 45%, var(--surface)); border-color: transparent; color: var(--primary-ink); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

/* KPI tiles: never cut a label or a value */
.kpis { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.kpi { padding: 13px 15px; gap: 9px; align-content: start; transition: border-color .15s, box-shadow .15s; }
.kpi:hover { border-color: var(--border-strong); }
.kpi .label { align-items: flex-start; line-height: 1.35; font-size: calc(13px * var(--fs, 1)); }
.kpi .label .icon { margin-block-start: -2px; }
.kpi .value { font-size: calc((clamp(22px, 1.8vw, 28px)) * var(--fs, 1)); line-height: 1.15; overflow-wrap: anywhere; }
.kpi .value.compact { font-size: calc((clamp(18px, 1.45vw, 22px)) * var(--fs, 1)); }

/* Tables: compact, readable, scroll sideways inside their card with an edge shadow showing there is more */
.table-wrap { border-radius: var(--radius); }
.table-wrap:has(> .table-scroll) { overflow: hidden; }
.table-scroll, .table-wrap:not(:has(> .table-scroll)) {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15, 27, 45, .16), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15, 27, 45, .16), transparent) right center / 14px 100% no-repeat scroll,
    var(--surface);
}
.table-scroll table, .table-wrap > table { background: transparent; }
th, td { padding: 11px 14px; }
td { font-size: calc(13.5px * var(--fs, 1)); color: var(--text); }
th { font-size: calc(11px * var(--fs, 1)); background: var(--surface-2); border-block-end: 1px solid var(--border); }
th:first-child, td:first-child { padding-inline-start: 18px; }
th:last-child, td:last-child { padding-inline-end: 18px; }
tbody tr:hover { background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
tbody tr.clickable:hover td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
[dir="rtl"] tbody tr.clickable:hover td:first-child { box-shadow: inset -3px 0 0 var(--primary); }
td .row-actions { min-width: 180px; }

/* Pagination: "Showing 1-20 of 57" on one side, page buttons on the other */
.pager { justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding: 12px 18px; background: var(--surface); }
.pager-buttons { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.pager-info { font-size: calc(13px * var(--fs, 1)); }

/* Badges */
.badge { padding: 2px 9px; font-size: calc(11.5px * var(--fs, 1)); line-height: 1.6; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); }

/* Cards, tabs, settings */
.card.pad > h2:first-child { margin-block-end: 6px; }
.tabs { gap: 2px; margin-block-end: 16px; }
.tabs a { padding: 10px 16px; font-size: calc(14px * var(--fs, 1)); }
.tabs a:hover { color: var(--text); }
.setting { padding: 16px 20px; }
#settings-list.stack { gap: 10px; }

/* States */
.empty { padding: 56px 24px; font-size: calc(14px * var(--fs, 1)); }
.state-error { padding: 40px 24px; }
.state-error .btn { margin-block-start: 6px; }

/* Map pages */
.map { box-shadow: var(--shadow-xs); }

/* Tablet / phone */
@media (max-width: 960px) {
  .page { padding: 18px 14px 32px; }
  h1 { font-size: calc(20px * var(--fs, 1)); margin-block-end: 14px; }
  .page-head { margin-block-end: 14px; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1 1 auto; }
  form.toolbar { padding: 10px; gap: 8px; }
  .toolbar > label:not(.check):not(.inline) { max-width: none; flex: 1 1 140px; }
  .toolbar > select, .toolbar > input[type="date"] { flex: 1 1 140px; }
  .toolbar .grow { flex: 1 1 100%; }
  .toolbar > .btn[type="submit"] { flex: 1 1 100%; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .kpi { padding: 11px; }
  .kpi .value { font-size: calc(22px * var(--fs, 1)); }
  .kpi .value.compact { font-size: calc(18px * var(--fs, 1)); }
  th, td { padding: 10px 12px; }
  th:first-child, td:first-child { padding-inline-start: 14px; }
  .pager { justify-content: center; }
  .pager-info { width: 100%; text-align: center; }
  .pager-buttons { margin-inline: auto; }
  .topbar { padding-inline: 12px; }
}

/* Riders table (owner 2026-10-06): two-line cells, status badges, today's counters, one line of icon actions */
.cell-2 { display: grid; gap: 1px; line-height: 1.35; min-width: 0; }
.cell-2 .muted { font-size: calc(12.5px * var(--fs, 1)); }
.person .cell-2 strong { font-weight: 600; }
.badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.today-stats { display: inline-flex; gap: 6px; }
.stat {
  display: grid; justify-items: center; min-width: 58px; padding: 3px 8px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border); line-height: 1.2;
}
.stat b { font-size: calc(14px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.stat small { font-size: calc(10.5px * var(--fs, 1)); color: var(--muted); font-weight: 500; }
.stat.pending b { color: var(--warning); }
.stat.ok b { color: var(--primary); }
.stat.bad b { color: var(--danger); }
.stat.zero b { color: var(--muted); }
.row-actions.inline { display: flex; flex-wrap: nowrap; gap: 6px; justify-content: flex-end; align-items: center; min-width: 0; }
.row-actions.inline .btn { width: auto; }
.btn-icon { width: 32px; min-height: 32px; padding: 0; justify-content: center; }
.btn-icon .icon { width: 16px; height: 16px; vertical-align: 0; }
.btn-success { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.btn-success:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
#riders-table td { padding-block: 10px; }
#riders-table table { min-width: 860px; }

/* Loading placeholders (owner 2026-10-06): a table, tile row or list that is still loading shows shimmering rows
   instead of an empty box. Pure CSS: any of these containers is empty only while its data is on the way. */
.table-wrap:empty, .kpis:empty, #route-list:empty, #settings-list:empty {
  position: relative; overflow: hidden; min-height: 248px;
  background:
    linear-gradient(var(--surface-2) 0 44px, transparent 44px) top / 100% 100% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 62px, var(--border) 62px 63px) 0 44px / 100% calc(100% - 44px) no-repeat,
    linear-gradient(90deg, var(--surface-3) 0 28%, transparent 28% 34%, var(--surface-3) 34% 58%, transparent 58% 64%, var(--surface-3) 64% 82%, transparent 82%)
      18px 70px / calc(100% - 36px) 10px no-repeat,
    linear-gradient(90deg, var(--surface-3) 0 22%, transparent 22% 34%, var(--surface-3) 34% 50%, transparent 50% 64%, var(--surface-3) 64% 76%, transparent 76%)
      18px 133px / calc(100% - 36px) 10px no-repeat,
    linear-gradient(90deg, var(--surface-3) 0 30%, transparent 30% 34%, var(--surface-3) 34% 55%, transparent 55% 64%, var(--surface-3) 64% 86%, transparent 86%)
      18px 196px / calc(100% - 36px) 10px no-repeat,
    var(--surface);
}
.kpis:empty { min-height: 89px; border-radius: var(--radius); border: 1px solid var(--border); }
#route-list:empty, #settings-list:empty { border-radius: var(--radius); border: 1px solid var(--border); }
.table-wrap:empty::after, .kpis:empty::after, #route-list:empty::after, #settings-list:empty::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--surface) 70%, transparent) 50%, transparent 100%);
  transform: translateX(-100%); animation: sweep 1.4s ease-in-out infinite;
}
[dir="rtl"] .table-wrap:empty::after, [dir="rtl"] .kpis:empty::after { animation-direction: reverse; }
@keyframes sweep { to { transform: translateX(100%); } }

/* Riders on phones (owner 2026-10-06): each rider is a small card - no sideways scrolling */
@media (max-width: 700px) {
  #riders-table table { min-width: 0; }
  #riders-table thead { display: none; }
  #riders-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 14px; border-block-end: 1px solid var(--border); }
  #riders-table tbody tr:last-child { border-block-end: 0; }
  #riders-table td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; }
  #riders-table td:nth-child(1) { grid-area: 1 / 1; }
  #riders-table td:nth-child(3) { grid-area: 1 / 2; justify-self: end; }
  #riders-table td:nth-child(2) { grid-area: 2 / 1 / 3 / 3; padding-inline-start: 42px; }
  #riders-table td:nth-child(4) { grid-area: 3 / 1 / 4 / 3; }
  #riders-table td:nth-child(5) { grid-area: 4 / 1; align-self: center; }
  #riders-table td:nth-child(6) { grid-area: 4 / 2; align-self: center; }
  #riders-table .today-stats { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  #riders-table .badges { justify-content: flex-end; }
  #riders-table tbody tr.clickable:hover td:first-child { box-shadow: none; }
}

/* Mixed Arabic / English text (vehicle names, addresses) keeps the page side: right in Arabic, left in English */
.cell-2 > [dir="auto"] { text-align: left; }
[dir="rtl"] .cell-2 > [dir="auto"] { text-align: right; }

/* The login page keeps its own button size (the general .btn polish above must not shrink Sign in) */
.login .login-submit { font-size: calc((clamp(16px, 2.2svh, 20px)) * var(--fs, 1)); border-radius: 8px; padding-inline: 16px; }

/* New orders (owner 2026-10-06): recognisable at the start of the row - soft tint, side bar, NEW tag next to the
   order number. The Status column and its badges are unchanged. */
tbody tr.row-new { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
tbody tr.row-new:hover { background: color-mix(in srgb, var(--primary) 11%, var(--surface)); }
tbody tr.row-new td:first-child,
tbody tr.row-new.clickable:hover td:first-child { box-shadow: inset 4px 0 0 var(--primary); }
[dir="rtl"] tbody tr.row-new td:first-child,
[dir="rtl"] tbody tr.row-new.clickable:hover td:first-child { box-shadow: inset -4px 0 0 var(--primary); }
.order-id { display: inline-flex; align-items: center; gap: 8px; }
.new-tag {
  display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 6px; font-size: calc(10.5px * var(--fs, 1)); font-weight: 700;
  letter-spacing: .06em; line-height: 1.6; color: #fff; background: var(--primary); box-shadow: 0 1px 2px rgba(14, 159, 92, .3);
}
[lang="ar"] .new-tag { letter-spacing: 0; font-size: calc(11px * var(--fs, 1)); }
:root[data-theme="dark"] .new-tag { color: var(--primary-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .new-tag { color: var(--primary-ink); } }

/* Short screens (e.g. 1366 x 768): slightly tighter menu so the larger logo and every menu item fit without scrolling */
@media (max-height: 820px) and (min-width: 961px) {
  .sidebar-brand { padding-block: 12px; margin-block-end: 6px; }
  .sidebar a { padding-block: 7px; }
  .nav-section { margin-block: 12px 4px; }
}

/* Settings (owner 2026-10-06): the recovery WhatsApp number in its own section, shield icon, orange while not set */
.section-title { margin: 22px 0 10px; }
.page > h1 + .section-title { margin-block-start: 0; }
.setting.recovery { grid-template-columns: auto 1fr auto; border-inline-start: 4px solid var(--primary); }
.setting.recovery.needs-action { border-inline-start-color: var(--warning); background: color-mix(in srgb, var(--warning) 6%, var(--surface)); }
.recovery-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-soft-ink); }
.setting.recovery.needs-action .recovery-icon { background: var(--warning-soft); color: var(--warning); }
@media (max-width: 960px) { .setting.recovery { grid-template-columns: auto 1fr; } .setting.recovery > .btn { grid-column: 1 / -1; } }

/* Quick sign-in phones of a user (rider devices window, user edit window) */
.quick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.quick-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }

/* Comments bell (owner 2026-10-06): riders' comments for managers and the Super Admin */
.bell-wrap { position: relative; }
#comments-bell { position: relative; }
.bell-count {
  position: absolute; top: 2px; inset-inline-end: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: calc(11px * var(--fs, 1)); font-weight: 700; line-height: 18px; text-align: center;
}
.bell-panel {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; width: min(380px, calc(100vw - 24px)); max-height: 70vh; overflow: auto;
  z-index: 1200; padding: 0; box-shadow: var(--shadow-lg);
}
.bell-head { padding: 12px 16px; border-block-end: 1px solid var(--border); }
.bell-list { list-style: none; margin: 0; padding: 0; }
.bell-list li + li { border-block-start: 1px solid var(--border); }
.bell-list button {
  display: grid; gap: 3px; width: 100%; padding: 10px 16px; border: 0; background: none; color: inherit; font: inherit;
  text-align: start; cursor: pointer;
}
.bell-list button:hover { background: var(--surface-2); }
.bell-list li.unread button { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); box-shadow: inset 3px 0 0 var(--primary); }
[dir="rtl"] .bell-list li.unread button { box-shadow: inset -3px 0 0 var(--primary); }
.bell-line { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.bell-time { margin-inline-start: auto; font-size: calc(12px * var(--fs, 1)); }
.bell-body { overflow-wrap: anywhere; }
.bell-empty { margin: 0; padding: 18px 16px; }

/* Busy buttons (owner 2026-10-06): a spinner while the request is on its way; the button keeps its colours. */
.btn.is-busy, .btn.is-busy:disabled, .btn.is-busy:disabled:hover { cursor: progress; opacity: 1; }
.btn.is-busy:not(.btn-primary):disabled { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-primary.is-busy:disabled { background: var(--primary); color: var(--primary-ink); }
.btn.is-busy::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-inline-end-color: transparent; animation: spin .8s linear infinite;
}

/* WhatsApp chat with the customer (owner 2026-10-06): looks like WhatsApp */
.wa-btn {
  display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border: 0; border-radius: 50%;
  background: #25d366; color: #fff; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .1s, background .15s;
}
.wa-btn:hover { background: #1ebe5b; transform: scale(1.06); }
.wa-btn:focus-visible { outline: 3px solid rgba(37, 211, 102, .45); outline-offset: 2px; }
.loc-cell { display: inline-flex; align-items: center; gap: 8px; }
.btn.wa-action { color: #fff; background: #008069; border-color: #008069; }
.btn.wa-action:hover { background: #006e5a; border-color: #006e5a; color: #fff; }
.btn.wa-action .wa-icon { color: #fff; }
.modal-card.wa-card { width: min(560px, 100%); padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.modal-card.wa-card .modal-head { margin: 0; padding: 14px 18px; background: #008069; color: #fff; }
.modal-card.wa-card .modal-head h2 { color: #fff; }
.modal-card.wa-card .modal-head .icon-btn { color: #fff; }
.wa-chat { display: flex; flex-direction: column; height: min(70vh, 640px); background: #efe7de; }
.wa-note { padding: 8px 14px; background: #fff3c4; color: #54460f; font-size: calc(13px * var(--fs, 1)); }
.wa-thread { flex: 1; overflow-y: auto; padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 3px; }
.wa-chip { align-self: center; margin: 6px 0; padding: 4px 10px; border-radius: 8px; background: #fff5c4; color: #54656f; font-size: calc(12.5px * var(--fs, 1)); box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
.wa-chip.error { background: #fdecec; color: #b91c1c; }
.wa-row { display: flex; }
.wa-row.in { justify-content: flex-start; }
.wa-row.out { justify-content: flex-end; }
.wa-bubble { max-width: 80%; padding: 6px 10px 5px; border-radius: 12px; background: #fff; color: #111b21; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); }
.wa-row.in .wa-bubble { border-start-start-radius: 2px; }
.wa-row.out .wa-bubble { background: #d9fdd3; border-start-end-radius: 2px; }
.wa-sender { font-size: calc(12.5px * var(--fs, 1)); font-weight: 700; color: #008069; margin-block-end: 1px; }
.wa-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: calc(14.5px * var(--fs, 1)); line-height: 1.4; }
.wa-meta { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin-block-start: 2px; font-size: calc(11.5px * var(--fs, 1)); color: #667781; }
.wa-ticks { width: 16px; height: 16px; color: #8696a0; }
.wa-ticks.read { color: #53bdeb; }
.wa-failed { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #e53935; color: #fff; font-size: calc(10px * var(--fs, 1)); font-weight: 700; }
.wa-clock { font-size: calc(11px * var(--fs, 1)); }
.wa-error { color: #e53935; font-size: calc(12px * var(--fs, 1)); margin-block-start: 2px; }
.wa-location { display: flex; gap: 10px; align-items: center; padding: 4px 0; text-decoration: none; color: inherit; }
.wa-pin { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; background: #e7f7ee; font-size: calc(22px * var(--fs, 1)); }
.wa-link { color: #008069; font-size: calc(13px * var(--fs, 1)); }
.wa-composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px 10px; background: #f0f2f5; }
.wa-composer textarea {
  flex: 1; min-height: 42px; max-height: 120px; resize: none; padding: 10px 16px; border: 0; border-radius: 22px;
  background: #fff; color: #111b21; font-size: calc(15px * var(--fs, 1)); box-shadow: none;
}
.wa-composer textarea:focus { box-shadow: 0 0 0 2px rgba(0, 128, 105, .35); }
.wa-send { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: #008069; color: #fff; cursor: pointer; }
.wa-send:hover { background: #006e5a; }
.wa-send:disabled { background: #7fb8ae; cursor: progress; }
[dir="rtl"] .wa-send svg { transform: scaleX(-1); }
:root[data-theme="dark"] .wa-chat { background: #0b141a; }
:root[data-theme="dark"] .wa-bubble { background: #202c33; color: #e9edef; }
:root[data-theme="dark"] .wa-row.out .wa-bubble { background: #005c4b; }
:root[data-theme="dark"] .wa-chip { background: #182229; color: #8696a0; }
:root[data-theme="dark"] .wa-composer { background: #202c33; }
:root[data-theme="dark"] .wa-composer textarea { background: #2a3942; color: #e9edef; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wa-chat { background: #0b141a; }
  :root:not([data-theme="light"]) .wa-bubble { background: #202c33; color: #e9edef; }
  :root:not([data-theme="light"]) .wa-row.out .wa-bubble { background: #005c4b; }
  :root:not([data-theme="light"]) .wa-chip { background: #182229; color: #8696a0; }
  :root:not([data-theme="light"]) .wa-composer { background: #202c33; }
  :root:not([data-theme="light"]) .wa-composer textarea { background: #2a3942; color: #e9edef; }
}
@media (max-width: 480px) { .wa-chat { height: calc(92vh - 60px); } }

/* Customer WhatsApp messages on the Settings page (owner 2026-10-07) */
.msg-card { display: flex; flex-direction: column; gap: 10px; }
.msg-head { display: flex; flex-direction: column; gap: 2px; }
.msg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip-btn { border: 1px solid var(--border, #d0d7de); background: var(--surface-2, #f6f8fa); color: inherit; border-radius: 999px; padding: 3px 10px; font-size: calc(13px * var(--fs, 1)); cursor: pointer; }
.chip-btn:hover { border-color: #25d366; }
.msg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.msg-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.msg-field textarea, .msg-field input { width: 100%; box-sizing: border-box; font: inherit; line-height: 1.45; }
.msg-field textarea { resize: vertical; min-height: 120px; }
.msg-lang { font-weight: 600; font-size: calc(13px * var(--fs, 1)); }
.msg-count { font-size: calc(12px * var(--fs, 1)); text-align: end; }
.msg-count.over { color: #e53935; font-weight: 600; }
.msg-preview { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px; background: #efe7de; }
.msg-preview > .muted { color: #54656f; font-size: calc(12.5px * var(--fs, 1)); }
.msg-bubbles { display: flex; flex-direction: column; gap: 6px; }
.msg-bubble { max-width: min(100%, 520px); align-self: flex-start; background: #d9fdd3; }
@media (max-width: 760px) { .msg-grid { grid-template-columns: 1fr; } }

/* New order: country code + number (owner 2026-10-07, KSA by default) */
.phone-row { display: flex; gap: 6px; direction: ltr; }
.phone-row select { flex: 0 0 auto; width: 9.5rem; max-width: 45%; }
.phone-row input { flex: 1 1 auto; min-width: 0; }

/* In-page OK / Cancel question (confirmModal) */
.confirm-text { margin: 0 0 18px; line-height: 1.6; font-size: calc(15px * var(--fs, 1)); }

/* Auto WhatsApp orders tab (owner 2026-10-07) */
#order-tabs { margin-bottom: 14px; }
.tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  margin-inline-start: 8px; border-radius: 999px; background: var(--danger); color: #fff; font-size: calc(12px * var(--fs, 1)); font-weight: 700; }
.auto-intro { margin: 0 0 12px; }
.auto-msg { display: inline-block; max-width: 340px; white-space: pre-line; }
.auto-msg-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.auto-msg-box p { margin: 4px 0 0; white-space: pre-line; }
.msg-count { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--neutral-soft); color: var(--text-2); font-size: calc(12px * var(--fs, 1)); }
.auto-switch { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.auto-switch > div { flex: 1 1 280px; }
.auto-off-note { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning); }
.auto-add { align-items: flex-end; }
.auto-add label { display: flex; flex-direction: column; gap: 4px; min-width: 200px; }

/* =====================================================================================================================
   Redesign 2026-10-07 (owner reference docs/design/reference-dashboard-2026-10-07.png) — UI only, no behaviour change.
   Same MasarGo logo (its light version on the navy menu), navy + green, rounder cards, tinted dashboard cards.
   ===================================================================================================================== */
:root {
  --sidebar-w: 268px;
  --topbar-h: 72px;
  --radius: 14px;
  --radius-lg: 18px;
  --nav-bg: #0b1b33;
  --nav-bg-2: #0a2140;
  --nav-active-from: #12b76a;
  --nav-active-to: #0b8048;
  /* Dashboard card tints: background, icon tile, ink */
  --tone-blue-bg: #eef4ff; --tone-blue-tile: #dbe7ff; --tone-blue-ink: #2563eb;
  --tone-orange-bg: #fff4ea; --tone-orange-tile: #ffe4cc; --tone-orange-ink: #ea7a10;
  --tone-violet-bg: #f4efff; --tone-violet-tile: #e7dcff; --tone-violet-ink: #7c3aed;
  --tone-rose-bg: #fff0f2; --tone-rose-tile: #ffdde3; --tone-rose-ink: #e11d48;
  --tone-green-bg: #ecfbf3; --tone-green-tile: #d1f5e2; --tone-green-ink: #0e9f5c;
  --tone-red-bg: #fff1f1; --tone-red-tile: #ffdcdc; --tone-red-ink: #dc2626;
  --tone-cyan-bg: #ecf9fd; --tone-cyan-tile: #d3f1fa; --tone-cyan-ink: #0891b2;
  --tone-mint-bg: #effbf5; --tone-mint-tile: #d6f5e5; --tone-mint-ink: #0b8048;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nav-bg: #081426; --nav-bg-2: #0a1a33;
    --tone-blue-bg: #13213d; --tone-blue-tile: #1d3463; --tone-blue-ink: #8db4ff;
    --tone-orange-bg: #2a1d10; --tone-orange-tile: #4a3018; --tone-orange-ink: #ffb066;
    --tone-violet-bg: #1f1838; --tone-violet-tile: #33285c; --tone-violet-ink: #c4a8ff;
    --tone-rose-bg: #2b1520; --tone-rose-tile: #4a2234; --tone-rose-ink: #ff8fa8;
    --tone-green-bg: #0f2a1f; --tone-green-tile: #164330; --tone-green-ink: #5fe0a2;
    --tone-red-bg: #2c1515; --tone-red-tile: #4b2020; --tone-red-ink: #ff8f8f;
    --tone-cyan-bg: #0f2630; --tone-cyan-tile: #163c4b; --tone-cyan-ink: #6fd6f2;
    --tone-mint-bg: #10291f; --tone-mint-tile: #174230; --tone-mint-ink: #6be3a9;
  }
}
:root[data-theme="dark"] {
  --nav-bg: #081426; --nav-bg-2: #0a1a33;
  --tone-blue-bg: #13213d; --tone-blue-tile: #1d3463; --tone-blue-ink: #8db4ff;
  --tone-orange-bg: #2a1d10; --tone-orange-tile: #4a3018; --tone-orange-ink: #ffb066;
  --tone-violet-bg: #1f1838; --tone-violet-tile: #33285c; --tone-violet-ink: #c4a8ff;
  --tone-rose-bg: #2b1520; --tone-rose-tile: #4a2234; --tone-rose-ink: #ff8fa8;
  --tone-green-bg: #0f2a1f; --tone-green-tile: #164330; --tone-green-ink: #5fe0a2;
  --tone-red-bg: #2c1515; --tone-red-tile: #4b2020; --tone-red-ink: #ff8f8f;
  --tone-cyan-bg: #0f2630; --tone-cyan-tile: #163c4b; --tone-cyan-ink: #6fd6f2;
  --tone-mint-bg: #10291f; --tone-mint-tile: #174230; --tone-mint-ink: #6be3a9;
}

/* ---- Sidebar ---- */
.sidebar { background: linear-gradient(180deg, var(--nav-bg-2), var(--nav-bg) 40%); padding: 0 16px 24px; gap: 4px; }
.sidebar-brand { flex-direction: column; gap: 6px; height: auto; padding: 22px 6px 18px; margin-block-end: 12px; border-block-end: 1px solid var(--nav-border); }
.sidebar-brand .logo-light { width: 100%; max-width: 200px; height: auto; aspect-ratio: 2 / 1; object-fit: contain; display: block; }
.sidebar-tagline { margin: 0; color: #e8eef7; font-size: calc(12.5px * var(--fs, 1)); font-weight: 600; letter-spacing: .01em; text-align: center; }
.sidebar a { padding: 12px 14px; font-size: calc(15px * var(--fs, 1)); font-weight: 500; border-radius: 12px; gap: 14px; color: #d6deea; }
.sidebar a .icon { width: 22px; height: 22px; opacity: 1; }
.sidebar a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar a.active, [dir="rtl"] .sidebar a.active {
  background: linear-gradient(135deg, var(--nav-active-from), var(--nav-active-to)); color: #fff; font-weight: 600;
  box-shadow: 0 6px 18px rgba(18, 183, 106, .35), inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.sidebar a.active .icon { color: #fff; }
.nav-section { display: flex; align-items: center; gap: 10px; margin: 22px 6px 8px; font-size: calc(11.5px * var(--fs, 1)); letter-spacing: .14em; color: rgba(214, 222, 234, .7); }
.nav-section::after { content: ""; flex: 1; height: 1px; background: var(--nav-border); }
[lang="ar"] .nav-section { letter-spacing: 0; font-size: calc(12.5px * var(--fs, 1)); }
/* Collapsed menu (owner 2026-10-07): an icon strip - on the left in English, on the right in Arabic (the grid's
   first column follows the page direction). Expanded by default. Under the mouse a pop-out opens beside it. */
@media (min-width: 961px) {
  .shell { transition: grid-template-columns .2s ease; }
  .shell.sidebar-collapsed { grid-template-columns: 78px minmax(0, 1fr); }
  .shell.sidebar-collapsed .sidebar {
    width: 78px; padding-inline: 12px; overflow-x: hidden; z-index: 1200;
    transition: width .2s ease, box-shadow .2s ease;
  }
  .shell.sidebar-collapsed .sidebar a { justify-content: center; padding-inline: 0; gap: 0; }
  .shell.sidebar-collapsed .sidebar a > span, .shell.sidebar-collapsed .sidebar-tagline { display: none; }
  .shell.sidebar-collapsed .nav-section { font-size: 0; margin-inline: 4px; }
  .shell.sidebar-collapsed .nav-section::after { margin: 0; }
  .shell.sidebar-collapsed .sidebar-brand { padding-inline: 0; }
  .shell.sidebar-collapsed .sidebar-brand .logo-light { max-width: 52px; }
  /* (Owner 2026-10-11: the strip no longer widens under the mouse - see "Collapsed side menu: the pop-out" at the end.) */
}

/* ---- Top bar ---- */
.topbar { height: var(--topbar-h); gap: 16px; padding-inline: 28px; background: var(--surface); box-shadow: 0 1px 0 var(--border); }
#menu-toggle { display: inline-grid; color: var(--text); }
.global-search { position: relative; flex: 0 1 380px; min-width: 180px; }
.global-search input { width: 100%; min-height: 44px; padding-inline: 44px 14px; border-radius: 12px; background: var(--surface-2); border-color: var(--border); font-size: calc(14.5px * var(--fs, 1)); }
.global-search .field-icon, .select-wrap .field-icon {
  position: absolute; inset-inline-start: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none;
}
.topbar-end { gap: 12px; }
.select-wrap { position: relative; display: inline-flex; align-items: center; }
.select-wrap:has(select[hidden]), .select-wrap:has(> .branch-own[hidden]) { display: none; }
/* Delivery Manager (owner 2026-10-07: the same portal look as the Super Admin): their own branch in the same pill as
   the Super Admin's branch selector — read-only, a manager works in one branch. */
.topbar-end .branch-own {
  display: inline-flex; align-items: center; min-height: 44px; max-width: 220px; padding: 9px 16px; padding-inline-start: 40px;
  border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-xs);
  color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-end .select-wrap select { min-height: 44px; padding-inline-start: 40px; border-radius: 12px; font-weight: 500; background-color: var(--surface); box-shadow: var(--shadow-xs); }
.topbar-end .icon-btn { width: 44px; height: 44px; border-radius: 12px; }
.topbar-end .icon-btn .icon { width: 22px; height: 22px; }
.bell-count { background: var(--danger) !important; color: #fff !important; min-width: 20px; height: 20px; border-radius: 999px; font-size: calc(11.5px * var(--fs, 1)); font-weight: 700; border: 2px solid var(--surface); }
.user-wrap { position: relative; }
.user-btn { display: inline-flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; min-height: 52px; border: 0; border-radius: 14px; background: transparent; color: var(--text); cursor: pointer; }
[dir="rtl"] .user-btn { padding: 6px 6px 6px 10px; }
.user-btn:hover { background: var(--surface-3); }
.user-btn #user-name { gap: 10px; }
.user-btn .avatar { width: 42px; height: 42px; font-size: calc(16px * var(--fs, 1)); }
.user-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: start; }
.user-label b { font-size: calc(15px * var(--fs, 1)); color: var(--text); }
.user-label small { font-size: calc(12.5px * var(--fs, 1)); color: var(--muted); font-weight: 500; }
.user-btn .chevron { width: 18px; height: 18px; color: var(--muted); }
.user-panel { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 200px; padding: 8px; z-index: 1000; box-shadow: var(--shadow-lg); }
.user-panel #logout { width: 100%; justify-content: flex-start; }

/* ---- Page header (title + subtitle; dashboard: date card) ---- */
.page { padding: 28px 32px 44px; }
.page h1 { font-size: calc(30px * var(--fs, 1)); letter-spacing: -.02em; }
.page-sub { margin: 4px 0 0; color: var(--text-2); font-size: calc(16px * var(--fs, 1)); }
.dash-head { align-items: flex-start; margin-block-end: 22px; }
.date-card { display: flex; align-items: center; gap: 10px; padding: 10px 15px; border-radius: var(--radius); }
.date-card .icon { width: 28px; height: 28px; color: var(--text-2); }
.date-card div { display: flex; flex-direction: column; line-height: 1.35; font-size: calc(14px * var(--fs, 1)); color: var(--text-2); }
.date-card b { color: var(--text); font-weight: 600; }

/* ---- Dashboard cards ---- */
.dash-kpis { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; margin-block-end: 24px; }
.kpi[class*="tone-"] { padding: 15px 16px 11px; gap: 10px; border-radius: var(--radius-lg); border: 1px solid transparent; }
.kpi-top { display: flex; align-items: center; gap: 16px; }
.kpi-icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; }
.kpi-icon .icon { width: 28px; height: 28px; }
.kpi-text { min-width: 0; }
.kpi[class*="tone-"] .label { font-size: calc(15px * var(--fs, 1)); color: var(--text-2); font-weight: 500; }
.kpi[class*="tone-"] .value { font-size: calc(29px * var(--fs, 1)); line-height: 1.15; color: var(--text); }
.kpi-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; min-height: 38px; }
.kpi-change { display: flex; align-items: center; gap: 8px; font-size: calc(13px * var(--fs, 1)); white-space: nowrap; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: calc(14px * var(--fs, 1)); }
.delta.good { color: var(--green-600); }
.delta.bad { color: var(--danger); }
.delta.flat { color: var(--muted); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green-500) 22%, transparent); }
.spark { width: 120px; height: 38px; flex: none; overflow: visible; }
.spark-line { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark-area { stroke: none; opacity: .14; }
.kpi.tone-blue { background: var(--tone-blue-bg); } .tone-blue .kpi-icon { background: var(--tone-blue-tile); color: var(--tone-blue-ink); } .tone-blue .spark-line { stroke: var(--tone-blue-ink); } .tone-blue .spark-area { fill: var(--tone-blue-ink); }
.kpi.tone-orange { background: var(--tone-orange-bg); } .tone-orange .kpi-icon { background: var(--tone-orange-tile); color: var(--tone-orange-ink); }
.kpi.tone-violet { background: var(--tone-violet-bg); } .tone-violet .kpi-icon { background: var(--tone-violet-tile); color: var(--tone-violet-ink); }
.kpi.tone-rose { background: var(--tone-rose-bg); } .tone-rose .kpi-icon { background: var(--tone-rose-tile); color: var(--tone-rose-ink); }
.kpi.tone-green { background: var(--tone-green-bg); } .tone-green .kpi-icon { background: var(--tone-green-tile); color: var(--tone-green-ink); } .tone-green .spark-line { stroke: var(--tone-green-ink); } .tone-green .spark-area { fill: var(--tone-green-ink); }
.kpi.tone-red { background: var(--tone-red-bg); } .tone-red .kpi-icon { background: var(--tone-red-tile); color: var(--tone-red-ink); } .tone-red .spark-line { stroke: var(--tone-red-ink); } .tone-red .spark-area { fill: var(--tone-red-ink); }
.kpi.tone-cyan { background: var(--tone-cyan-bg); } .tone-cyan .kpi-icon { background: var(--tone-cyan-tile); color: var(--tone-cyan-ink); }
.kpi.tone-mint { background: var(--tone-mint-bg); } .tone-mint .kpi-icon { background: var(--tone-mint-tile); color: var(--tone-mint-ink); } .tone-mint .spark-line { stroke: var(--tone-mint-ink); } .tone-mint .spark-area { fill: var(--tone-mint-ink); }

/* ---- Cards with a header (live map) ---- */
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.card-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: calc(21px * var(--fs, 1)); }
.card-head h2 .icon { width: 26px; height: 26px; color: var(--info); }
.card-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.card-actions .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding-inline: 16px; border-radius: 11px; }
.card-actions .btn .icon { width: 18px; height: 18px; }
.btn-info { background: var(--info); border-color: var(--info); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--info) 30%, transparent); }
.btn-info:hover { filter: brightness(1.06); }
.map-card { border-radius: var(--radius-lg); padding: 18px 20px; }
.map-card .map { border-radius: 14px; }
.map-card:fullscreen { padding: 18px 22px; background: var(--surface); display: flex; flex-direction: column; }
.map-card:fullscreen .map { flex: 1; height: auto; min-height: 0; }

/* ---- Phones / small screens ---- */
@media (max-width: 1200px) {
  .global-search { flex-basis: 260px; }
  .user-label small { display: none; }
}
@media (max-width: 960px) {
  .global-search { display: none; }
  .topbar { padding-inline: 12px; gap: 8px; }
  .user-label { display: none; }
  .page { padding: 18px 14px 32px; }
  .page h1 { font-size: calc(23px * var(--fs, 1)); }
  .page-sub { font-size: calc(14px * var(--fs, 1)); }
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kpi-icon { width: 40px; height: 40px; }
  .kpi-icon .icon { width: 22px; height: 22px; }
  .kpi[class*="tone-"] .value { font-size: calc(23px * var(--fs, 1)); }
  .spark { width: 80px; }
}
@media (max-width: 600px) {
  .date-card { display: none; }
  .topbar-end { gap: 4px; }
  .topbar-end .select-wrap select { padding-inline-start: 32px; max-width: 96px; min-height: 40px; font-size: calc(13px * var(--fs, 1)); }
  .topbar-end .branch-own { padding-inline: 32px 10px; max-width: 96px; min-height: 40px; font-size: calc(13px * var(--fs, 1)); }
  .topbar-end .select-wrap .field-icon { inset-inline-start: 10px; width: 16px; height: 16px; }
  .user-btn { padding: 2px; min-height: 44px; }
  .user-btn .avatar { width: 38px; height: 38px; }
  .topbar-end .icon-btn { width: 40px; height: 40px; }
  .user-btn .chevron { display: none; }
  .user-btn #user-name { display: inline-flex; } /* the avatar opens the menu with Sign out */
  .dash-kpis { grid-template-columns: minmax(0, 1fr); }
  .card-actions .btn span { display: none; }
}
@media (max-width: 480px) {
  /* Narrow phones: the menu (☰) shows the logo; the top bar keeps every control on screen. */
  .topbar > .brand { display: none; }
  .topbar { padding-inline: 8px; gap: 4px; }
  .topbar-end { margin-inline-start: auto; gap: 2px; }
  .topbar-end .select-wrap .field-icon { display: none; }
  .topbar-end .select-wrap select { padding-inline: 8px 24px; max-width: 86px; }
  .topbar-end .branch-own { padding-inline: 8px; max-width: 86px; }
  .topbar-end .icon-btn { width: 38px; height: 38px; }
}
/* Live map page (owner 2026-10-07): the dashboard's map card filling the screen */
.map-card .map-tall { height: calc(100vh - 250px); min-height: 380px; }
.map-card:fullscreen .map-tall { height: auto; }
/* Riders report (owner 2026-10-07): the total line and missing money */
tr.total-row td { font-weight: 700; background: var(--surface-2); }
.diff-bad { color: var(--danger); font-weight: 700; }
/* Dashboard date range (owner 2026-10-07): Today | Previous day | Previous month | Custom */
.dash-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: -6px 0 18px; }
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xs); flex-wrap: wrap; }
.seg-btn { border: 0; background: transparent; color: var(--text-2); font: inherit; font-weight: 600; font-size: calc(14px * var(--fs, 1)); padding: 8px 14px; border-radius: 9px; cursor: pointer; }
.seg-btn:hover { background: var(--surface-3); }
.seg-btn.active { background: var(--primary); color: #fff; }
.dash-custom { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.dash-custom label { display: flex; flex-direction: column; gap: 4px; font-size: calc(13px * var(--fs, 1)); color: var(--text-2); }
.dash-custom input { min-height: 40px; }

/* ---------- Large windows (owner 2026-10-08) ----------
   Windows with details or several fields: 85% of the screen, title and buttons fixed, the content in titled cards side
   by side so nothing needs scrolling. Short questions (.modal-sm) keep the compact size. Phones: full width as before. */
@media (min-width: 961px) {
  .modal-card.modal-sm { width: min(600px, 100%); }
  .modal-card.modal-xl { width: 85vw; max-width: 1600px; max-height: 92vh; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
  .modal-card.modal-xl .modal-head { margin: 0; padding: 16px 24px; border-block-end: 1px solid var(--border); background: var(--surface); }
  .modal-card.modal-xl .modal-head h2 { font-size: calc(19px * var(--fs, 1)); }
  .modal-card.modal-xl #modal-body { flex: 1; min-height: 0; overflow: auto; padding: 20px 24px 0; background: var(--surface-2, var(--bg)); }
  .modal-card.modal-xl #modal-body > form, .modal-card.modal-xl #modal-body > .stack { min-height: 100%; display: flex; flex-direction: column; }
  /* the buttons stay at the bottom of the window */
  .modal-card.modal-xl .modal-actions {
    position: sticky; bottom: 0; z-index: 2; margin: 20px -24px 0; padding: 14px 24px; background: var(--surface);
    border-block-start: 1px solid var(--border); box-shadow: 0 -6px 16px rgba(15, 23, 42, .05);
  }
  .modal-card.modal-xl form.stack > .modal-actions { margin-block-start: auto; }
  /* fields of forms without their own cards flow in columns */
  .modal-card.modal-xl #modal-body > form.stack:not(:has(.fcards)) {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px 20px; align-content: start;
  }
  .modal-card.modal-xl #modal-body > form.stack:not(:has(.fcards)) > :is(.modal-actions, h3, p, ul, .grid-2, .check, .map, .loc-tools, .table-wrap, .auto-msg-box, label:has(textarea), div:not(.phone-row)) {
    grid-column: 1 / -1;
  }
  .modal-card.modal-xl #modal-body > dl.details { display: grid; grid-template-columns: max-content 1fr max-content 1fr; gap: 10px 18px; }
}
/* Location tools: each box with its button on one line (the input no longer pushes the button below). */
.location-tools .row { flex-wrap: nowrap; }
.location-tools .row > input { width: auto; min-width: 0; flex: 1 1 auto; }
.location-tools .row > .btn { flex: none; min-height: 40px; }
.fcards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.fcol { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.fcard { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 13px 15px; box-shadow: var(--shadow-xs); }
.fcard-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: calc(13px * var(--fs, 1)); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.fcard-title::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--primary); }
.fcard-body { display: flex; flex-direction: column; gap: 12px; }
.fcard-body > dl.details { margin: 0; }
.fcard .map { border-radius: 12px; }
.fcard-loc .map { min-height: 300px; }
.modal-xl #order-map { min-height: 260px; }
@media (max-width: 960px) {
  .fcards { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Reports (owner 2026-10-08, reference design) ---------- */
.rep-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title filter" "tabs ranges"; align-items: end; gap: 10px 24px;
  border-block-end: 1px solid var(--border); margin-block-end: 18px; }
.rep-title { grid-area: title; align-self: start; }
.rep-title h1 { margin: 6px 0 4px; font-size: calc(34px * var(--fs, 1)); font-weight: 800; letter-spacing: -.02em; }
.rep-title p { margin: 0; color: var(--muted); font-size: calc(15px * var(--fs, 1)); }
.rep-filter { grid-area: filter; display: flex; align-items: flex-end; gap: 12px; padding: 12px 14px; margin: 0; border-radius: 14px; flex-wrap: wrap; }
.rep-filter label { display: flex; flex-direction: column; gap: 4px; font-size: calc(13px * var(--fs, 1)); color: var(--muted); font-weight: 500; }
.rep-filter select { min-height: 42px; }
.rep-date { position: relative; display: flex; align-items: center; }
.rep-date .icon { position: absolute; inset-inline-start: 12px; width: 18px; height: 18px; color: var(--text); pointer-events: none; }
.rep-date input { min-height: 42px; width: 210px; padding-inline-start: 40px; border-radius: 10px; font-weight: 500; color: var(--text); }
.rep-filter .btn-primary { min-height: 44px; padding-inline: 24px; font-size: calc(16px * var(--fs, 1)); font-weight: 700; border-radius: 10px; }
#report-tabs.tabs { grid-area: tabs; border: 0; margin: 0; gap: 4px; }
#report-tabs.tabs a { padding: 10px 22px 12px; font-size: calc(16px * var(--fs, 1)); font-weight: 500; }
#report-tabs.tabs a.active { color: var(--primary); font-weight: 700; border-block-end: 3px solid var(--primary); }
.rep-ranges { grid-area: ranges; display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding-block-end: 10px; flex-wrap: wrap; }
.rep-ranges .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; min-height: 32px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: calc(13px * var(--fs, 1)); font-weight: 500; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-xs); }
.rep-ranges .chip:hover { border-color: var(--primary); }
.rep-ranges .chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.rep-ranges .chip-select svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.rep-ranges .chip-select.active { background: var(--surface); color: var(--text); border-color: var(--border); }

.rep-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-block-end: 16px; }
.rep-kpi { position: relative; display: flex; gap: 14px; padding: 15px; margin: 0; border-radius: 14px; min-height: 114px; }
.rep-kpi-icon { flex: none; display: grid; place-items: center; width: 53px; height: 53px; border-radius: 14px; }
.rep-kpi-icon .icon { width: 28px; height: 28px; }
.rep-kpi-icon.tone-green { background: #e3f6ea; color: #16a34a; }
.rep-kpi-icon.tone-blue { background: #e5eeff; color: #2563eb; }
.rep-kpi-icon.tone-red { background: #fde6e6; color: #dc2626; }
.rep-kpi-icon.tone-orange { background: #fff0d9; color: #f59e0b; }
.rep-kpi-icon.tone-purple { background: #efe7ff; color: #7c3aed; }
.rep-kpi-text { display: flex; flex-direction: column; min-width: 0; }
.rep-kpi-label { font-size: calc(14px * var(--fs, 1)); color: var(--muted); }
.rep-kpi-value { font-size: calc(24px * var(--fs, 1)); font-weight: 800; line-height: 1.25; color: var(--text); white-space: nowrap; }
.rep-change { display: inline-flex; align-items: center; gap: 4px; margin-block-start: 6px; font-size: calc(14px * var(--fs, 1)); font-weight: 600; }
.rep-change svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rep-change.good { color: #16a34a; } .rep-change.bad { color: #dc2626; } .rep-change.flat { color: var(--muted); }
.rep-kpi-vs { font-size: calc(13px * var(--fs, 1)); color: var(--muted); }
.rep-kpi-bars { position: absolute; inset-inline-end: 18px; top: 50%; width: 32px; height: 40px; transform: translateY(-50%); fill: var(--border-strong, #cbd5e1); opacity: .8; }

.rep-charts { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: 16px; margin-block-end: 16px; }
.rep-card { margin: 0; padding: 15px 15px 11px; border-radius: 14px; min-width: 0; }
.rep-card-title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: calc(17px * var(--fs, 1)); font-weight: 700; color: var(--text); }
.rep-card-title .icon { width: 22px; height: 22px; }
.rep-svg { width: 100%; height: auto; display: block; }
.rep-svg text { font-size: calc(11px * var(--fs, 1)); fill: var(--muted); font-family: inherit; }
.rep-svg .grid { stroke: var(--border); stroke-width: 1; }
.rep-svg .base { stroke: var(--border-strong, #cbd5e1); stroke-width: 1.2; }
.rep-svg .bar.delivered, .sq.delivered { fill: #22c55e; background: #22c55e; }
.rep-svg .bar.failed, .sq.failed { fill: #ef4444; background: #ef4444; }
.rep-svg .bar.cancelled, .sq.cancelled { fill: #f59e0b; background: #f59e0b; }
.rep-svg .line { fill: none; stroke: #22c55e; stroke-width: 2.4; stroke-linejoin: round; }
.rep-svg .pt { fill: #16a34a; stroke: var(--surface); stroke-width: 1.5; }
.rep-legend { display: flex; justify-content: center; gap: 20px; margin-block-start: 8px; font-size: calc(13px * var(--fs, 1)); color: var(--text); flex-wrap: wrap; }
.rep-legend span { display: inline-flex; align-items: center; gap: 7px; }
.rep-legend .sq { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.rep-donut-wrap { display: grid; grid-template-columns: minmax(150px, 190px) 1fr; align-items: center; gap: 22px; min-height: 190px; }
.rep-donut { width: 100%; height: auto; }
.rep-donut .seg { fill: none; stroke-width: 30; }
.rep-donut .seg.empty { stroke: var(--border); }
.rep-donut .seg.delivered, .dot.delivered { stroke: #22c55e; background: #22c55e; }
.rep-donut .seg.failed, .dot.failed { stroke: #ef4444; background: #ef4444; }
.rep-donut .seg.cancelled, .dot.cancelled { stroke: #f8a72c; background: #f8a72c; }
.rep-donut .seg.pending, .dot.pending { stroke: #c4c9d2; background: #c4c9d2; }
.rep-donut .total { font-size: calc(24px * var(--fs, 1)); font-weight: 800; fill: var(--text); }
.rep-donut .word { font-size: calc(13px * var(--fs, 1)); font-weight: 500; fill: var(--text); }
.rep-donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rep-donut-legend li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; font-size: calc(14px * var(--fs, 1)); color: var(--text); }
.rep-donut-legend .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.rep-donut-legend b { font-weight: 500; }

.rep-bottom { display: grid; grid-template-columns: 1.03fr 1fr; gap: 16px; align-items: start; }
.rep-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rep-table { overflow-x: auto; }
.rep-table table { width: 100%; border-collapse: separate; border-spacing: 0; }
.rep-table thead th { background: var(--surface-2, #f3f6f9); font-size: calc(11.5px * var(--fs, 1)); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 10px 16px; border: 0; }
.rep-table thead th:first-child { border-start-start-radius: 8px; border-end-start-radius: 8px; }
.rep-table thead th:last-child { border-start-end-radius: 8px; border-end-end-radius: 8px; }
.rep-table td { padding: 12px 16px; font-size: calc(14px * var(--fs, 1)); }
.rep-table .rep-date-cell { color: #1d3a8a; font-weight: 500; }
.rep-table tfoot .total-row td { background: #e3f6ea; font-weight: 700; color: var(--text); border: 0; }
.rep-table tfoot .total-row td:first-child { color: #15803d; border-start-start-radius: 8px; border-end-start-radius: 8px; }
.rep-table tfoot .total-row td:last-child { border-start-end-radius: 8px; border-end-end-radius: 8px; }
.rep-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; color: var(--muted); font-size: calc(12.5px * var(--fs, 1)); }
.rep-empty .icon { width: 18px; height: 18px; }

@media (max-width: 1400px) { .rep-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1200px) { .rep-charts { grid-template-columns: 1fr 1fr; } .rep-charts > :last-child { grid-column: 1 / -1; } }
@media (max-width: 1100px) {
  .rep-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "filter" "ranges" "tabs"; }
  .rep-ranges { justify-content: flex-start; }
  .rep-bottom { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .rep-kpis, .rep-charts { grid-template-columns: minmax(0, 1fr); }
  .rep-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rep-kpi { gap: 12px; padding: 11px; } .rep-kpi-icon { width: 41px; height: 41px; }
  .rep-kpi-bars { display: none; }
  .rep-donut-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .rep-date input { width: 100%; }
  .rep-filter > label { flex: 1 1 140px; }
  .rep-title h1 { font-size: calc(28px * var(--fs, 1)); }
  #report-tabs.tabs { overflow-x: auto; }
  #report-tabs.tabs a { padding-inline: 12px; white-space: nowrap; }
}
@media (max-width: 420px) { .rep-kpis { grid-template-columns: minmax(0, 1fr); } }
/* dark theme: the icon tiles and the total row keep their tints, softer */
:root[data-theme="dark"] .rep-kpi-icon[class*="tone-"], :root[data-theme="dark"] .rep-table tfoot .total-row td { background: color-mix(in srgb, currentColor 16%, transparent); }
:root[data-theme="dark"] .rep-table .rep-date-cell { color: var(--primary); }

/* Reports → Deliveries / Riders / Location requests (owner 2026-10-08, reference design) */
.rep-top-plain { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "tabs"; }
.rep-filter-wide { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 16px; padding: 16px 18px; margin-block-end: 18px; }
.rep-filter-wide > label { flex: 1 1 200px; }
.rep-filter-wide .rep-date input, .rep-filter-wide select { width: 100%; min-height: 44px; border-radius: 10px; }
.rep-filter-wide .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-inline: 18px; border-radius: 10px; font-weight: 600; }
.rep-filter-wide .btn .icon { width: 18px; height: 18px; }
.rep-filter-wide .rep-apply { padding-inline: 22px; font-size: calc(15px * var(--fs, 1)); }
.rep-filter-wide .rep-export { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.rep-kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rep-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rep-kpis-5 .rep-kpi-gap { display: block; }
.rep-kpi-sm { min-height: 0; align-items: center; padding: 13px 15px; }
.rep-kpi-sm .rep-kpi-icon { width: 48px; height: 48px; }
.rep-kpi-sm .rep-kpi-value { font-size: calc(20px * var(--fs, 1)); }
.rep-kpi-sm .rep-kpi-bars { width: 34px; height: 30px; opacity: 1; }
.rep-kpi-bars.tone-green { fill: #22c55e; } .rep-kpi-bars.tone-blue { fill: #3b82f6; } .rep-kpi-bars.tone-red { fill: #ef4444; }
.rep-kpi-bars.tone-orange { fill: #f59e0b; } .rep-kpi-bars.tone-amber { fill: #f5b041; } .rep-kpi-bars.tone-purple { fill: #a78bfa; }
.rep-kpi-bars.tone-pink { fill: #f472b6; } .rep-kpi-bars.tone-grey { fill: #94a3b8; }
.rep-kpi-icon.tone-amber { background: #fff3d6; color: #f59e0b; }
.rep-kpi-icon.tone-pink { background: #ffe4ea; color: #e11d48; }
.rep-kpi-icon.tone-grey { background: #e8ecf2; color: #475569; }
.rep-info { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: #eaf2ff; color: var(--text); font-size: calc(14px * var(--fs, 1)); }
.rep-info .icon { flex: none; width: 20px; height: 20px; color: #2563eb; }
.rep-list { padding: 16px 18px; }
.rep-list-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-block-end: 12px; flex-wrap: wrap; }
.rep-list-head .rep-card-title { margin: 0; font-size: calc(19px * var(--fs, 1)); }
.rep-search { position: relative; flex: 0 1 410px; margin: 0; }
.rep-search .icon { position: absolute; inset-inline-start: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.rep-search input { width: 100%; min-height: 40px; padding-inline-start: 42px; border-radius: 10px; background: var(--surface-2, #f5f7fa); }
.rep-list .rep-table td { vertical-align: middle; }
.rep-list .rep-table tbody tr { cursor: pointer; }
.rep-list .rep-table tbody tr:hover td { background: var(--surface-2, #f7f9fb); }
.rep-list .rep-table .total-row td { background: #e3f6ea; font-weight: 700; }
.row-more { border: 0; background: transparent; color: var(--muted); font-size: calc(20px * var(--fs, 1)); line-height: 1; padding: 2px 8px; border-radius: 8px; cursor: pointer; }
.row-more:hover { background: var(--surface-2, #eef2f6); color: var(--text); }
.diff-ok { color: #16a34a; font-weight: 600; }
@media (max-width: 1400px) { .rep-kpis-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rep-kpis-5 .rep-kpi-gap { display: none; } }
@media (max-width: 1100px) { .rep-kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .rep-kpis-5, .rep-kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rep-kpi-sm { flex-direction: row; }
  .rep-filter-wide .btn { flex: 1 1 140px; justify-content: center; }
  .rep-search { flex-basis: 100%; }
}
@media (max-width: 480px) { .rep-kpis-5, .rep-kpis-3 { grid-template-columns: minmax(0, 1fr); } }
:root[data-theme="dark"] .rep-info { background: color-mix(in srgb, #2563eb 16%, transparent); }
:root[data-theme="dark"] .rep-list .rep-table .total-row td { background: color-mix(in srgb, #16a34a 18%, transparent); }

/* Reports fixes (2026-10-08 screenshot review): card titles in normal case; long values never run under the bars */
.rep-card-title { text-transform: none; letter-spacing: 0; }
.rep-kpi { align-items: center; }
.rep-kpi .rep-kpi-text { flex: 1 1 auto; }
.rep-kpi .rep-kpi-bars { position: static; transform: none; flex: none; align-self: center; margin-inline-start: auto; }
.rep-kpi .rep-kpi-value { white-space: normal; overflow-wrap: anywhere; font-size: calc((clamp(19px, 1.45vw, 26px)) * var(--fs, 1)); }
.rep-kpi-sm .rep-kpi-value { font-size: calc((clamp(17px, 1.25vw, 22px)) * var(--fs, 1)); }
.rep-kpis-row2 { grid-template-columns: repeat(2, minmax(0, 380px)); }
.rep-kpis-tight { margin-block-end: 16px; }
.rep-badges { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rep-when { display: inline-flex; align-items: center; gap: 8px; }
.rep-table th, .rep-table td { padding-inline: 12px; }
@media (max-width: 760px) { .rep-kpis-row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .rep-kpis-row2 { grid-template-columns: minmax(0, 1fr); } }
/* amounts never break inside a number; on narrow cards the decorative bars give the value their room */
.rep-kpi .rep-kpi-value { overflow-wrap: normal; word-break: normal; }
.rep-kpi .rep-kpi-value .num { white-space: nowrap; }
.rep-kpi { container-type: inline-size; }
@container (max-width: 320px) { .rep-kpi-bars { display: none; } }

/* ---------- Reports tables (owner 2026-10-08) ----------
   Tables use the full card width with wrapped headers and compact spacing, so they fit without sideways scrolling
   wherever the columns allow; a table that really needs more room (many columns on a narrow screen) keeps its own
   horizontal scroller inside the card. The page itself never scrolls sideways. Numbers and badges never break. */
#page .rep-table { overflow-x: auto; max-width: 100%; }
#page .rep-table .table-scroll { overflow-x: auto; }
#page .rep-table table { width: 100%; table-layout: auto; }
#page .rep-table th { white-space: normal; line-height: 1.3; font-size: calc(11px * var(--fs, 1)); padding: 10px 9px; vertical-align: bottom; }
#page .rep-table td { white-space: normal; overflow-wrap: break-word; font-size: calc(13px * var(--fs, 1)); padding: 11px 9px; }
#page .rep-table td .num, #page .rep-table td .badge { white-space: nowrap; }
/* tabs wrap instead of scrolling sideways; page blocks never wider than the page */
#report-tabs.tabs { flex-wrap: wrap; overflow: visible; }
@media (max-width: 760px) { #report-tabs.tabs { overflow: visible; } #report-tabs.tabs a { padding-inline: 12px; } }
.rep-top, .rep-filter, .rep-kpis, .rep-charts, .rep-bottom, .rep-side, .rep-list, .rep-card { min-width: 0; max-width: 100%; }
.rep-list-head .rep-search { min-width: 0; }
/* cards never push their content out: five-card rows go to three per row on screens under 1600 px; the summary's
   two bottom tables stack under 1300 px; table cells a little tighter so more tables fit without their scroller */
@media (max-width: 1600px) {
  .rep-kpis:not(.rep-kpis-3):not(.rep-kpis-row2) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rep-kpis-5 .rep-kpi-gap { display: none; }
}
@media (max-width: 1300px) { .rep-bottom { grid-template-columns: minmax(0, 1fr); } }
#page .rep-table th { padding: 9px 7px; }
#page .rep-table td { padding: 10px 7px; font-size: calc(12.5px * var(--fs, 1)); }
#page .rep-table th:first-child, #page .rep-table td:first-child { padding-inline-start: 12px; }
@media (max-width: 760px) { .rep-kpis:not(.rep-kpis-3):not(.rep-kpis-row2) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .rep-kpis:not(.rep-kpis-3):not(.rep-kpis-row2) { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1400px) { .rep-charts { grid-template-columns: 1fr 1fr; } .rep-charts > :last-child { grid-column: 1 / -1; } }
@media (max-width: 1100px) { .rep-kpi .rep-kpi-icon { width: 41px; height: 41px; } .rep-kpi .rep-kpi-icon .icon { width: 24px; height: 24px; } .rep-kpi { gap: 10px; } }
@media (max-width: 1366px) { #page .rep-table th, #page .rep-table td { padding-inline: 6px; } }
.rep-chart .rep-svg { max-height: 280px; }

/* ---------- Routes (owner 2026-10-08, reference design) ---------- */
.rt-head h1 { margin: 4px 0 4px; font-size: calc(32px * var(--fs, 1)); font-weight: 800; }
.rt-head p { margin: 0 0 18px; color: var(--muted); font-size: calc(15px * var(--fs, 1)); }
.rt-grid { display: grid; grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.55fr); gap: 20px; align-items: start; }
.rt-list { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rt-rider { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px; margin: 0;
  padding: 16px 16px; border-radius: 14px; color: var(--text); text-decoration: none; border: 1px solid var(--border); transition: border-color .15s, box-shadow .15s; }
.rt-rider:hover { border-color: var(--primary); }
.rt-rider.selected { border: 2px solid var(--primary); padding: 15px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent); }
.rt-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 700; background: var(--surface-2, #eef2f6); color: var(--text); }
.rt-rider.selected .rt-num { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }
.rt-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rt-who strong { font-size: calc(16px * var(--fs, 1)); overflow-wrap: anywhere; }
.rt-who span { font-size: calc(13.5px * var(--fs, 1)); color: var(--muted); }
.rt-km { display: inline-flex; align-items: center; gap: 6px; font-size: calc(14px * var(--fs, 1)); white-space: nowrap; color: var(--text); }
.rt-km .icon { width: 17px; height: 17px; }
.rt-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; font-size: calc(13px * var(--fs, 1)); font-weight: 600; white-space: nowrap;
  background: var(--surface-2, #eef2f6); color: var(--text); }
.rt-pill.on::before, .rt-title .rt-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.rt-title .rt-pill.off::before { background: #94a3b8; }
.rt-chevron { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; color: var(--muted); }
[dir="rtl"] .rt-chevron { transform: scaleX(-1); }
.rt-detail { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rt-card { margin: 0; padding: 15px; border-radius: 16px; min-width: 0; }
.rt-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-block-end: 14px; }
.rt-card-head h3 { margin: 0; font-size: calc(19px * var(--fs, 1)); font-weight: 700; text-transform: none; letter-spacing: 0; }
.rt-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.rt-title h2 { margin: 0; font-size: calc(21px * var(--fs, 1)); font-weight: 700; }
.rt-title p { flex-basis: 100%; margin: 4px 0 0; color: var(--muted); font-size: calc(15px * var(--fs, 1)); }
.rt-optimize { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding-inline: 20px; border-radius: 10px; font-weight: 700; font-size: calc(15px * var(--fs, 1)); }
.rt-optimize .icon { width: 19px; height: 19px; }
.rt-map-wrap { position: relative; border-radius: 12px; overflow: hidden; }
.rt-map-wrap .map { min-height: 330px; border-radius: 12px; }
.rt-maptype { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 500; display: flex; padding: 4px; border-radius: 999px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.rt-maptype button { border: 0; background: transparent; padding: 7px 16px; border-radius: 999px; font: inherit; font-size: calc(14px * var(--fs, 1)); font-weight: 600; color: #1f2937; cursor: pointer; }
.rt-maptype button.active { background: #0b3b2e; color: #fff; }
.rt-legend { display: flex; gap: 8px; flex-wrap: wrap; }
.rt-legend span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: calc(13px * var(--fs, 1)); font-weight: 600; background: var(--surface-2, #eef2f6); }
.rt-legend span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.rt-legend .next { color: #16a34a; } .rt-legend .next::before { background: #22c55e; }
.rt-legend .out { color: #7c3aed; } .rt-legend .out::before { background: #8b5cf6; }
.rt-legend .done { color: #2563eb; } .rt-legend .done::before { background: #3b82f6; }
.rt-legend .failed { color: #dc2626; } .rt-legend .failed::before { background: #ef4444; }
.rt-stops { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.rt-stop { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto 150px auto auto; align-items: center; gap: 16px;
  padding: 12px 16px; border-block-end: 1px solid var(--border); cursor: pointer; }
.rt-stop:last-child { border-block-end: 0; }
.rt-stop:hover { background: var(--surface-2, #f7f9fb); }
/* the line joining the stop numbers */
.rt-stop:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 34px; top: 52px; bottom: -12px; width: 2px; background: var(--border-strong, #cbd5e1); }
.rt-seq { position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-weight: 700;
  border: 2px solid var(--border-strong, #cbd5e1); background: var(--surface); color: var(--text); }
.rt-stop.next .rt-seq { background: #16a34a; border-color: #16a34a; color: #fff; }
.rt-stop.out .rt-seq { border-color: #8b5cf6; color: #7c3aed; }
.rt-stop.done .rt-seq { border-color: #3b82f6; color: #2563eb; }
.rt-stop.failed .rt-seq { border-color: #ef4444; color: #dc2626; }
.rt-stop-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rt-stop-who strong { font-size: calc(16px * var(--fs, 1)); }
.rt-stop-who span { font-size: calc(13.5px * var(--fs, 1)); color: var(--muted); overflow-wrap: anywhere; }
.rt-amount { font-weight: 700; font-size: calc(15.5px * var(--fs, 1)); white-space: nowrap; }
.rt-status { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: calc(13px * var(--fs, 1)); font-weight: 600; white-space: nowrap; background: var(--surface-2, #eef2f6); color: var(--muted); }
.rt-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.rt-stop.next .rt-status { color: #16a34a; background: color-mix(in srgb, #22c55e 16%, transparent); }
.rt-stop.out .rt-status { color: #7c3aed; background: color-mix(in srgb, #8b5cf6 16%, transparent); }
.rt-stop.done .rt-status { color: #2563eb; background: color-mix(in srgb, #3b82f6 16%, transparent); }
.rt-stop.failed .rt-status { color: #dc2626; background: color-mix(in srgb, #ef4444 16%, transparent); }
:root[data-theme="dark"] .rt-maptype { background: #0f172a; } :root[data-theme="dark"] .rt-maptype button { color: #e2e8f0; } :root[data-theme="dark"] .rt-maptype button.active { background: #22c55e; color: #0b1220; }
@media (max-width: 1150px) { .rt-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .rt-rider { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; }
  .rt-rider .rt-km { grid-column: 2; }
  .rt-rider .rt-pill { grid-column: 3; grid-row: 1; }
  .rt-rider .rt-chevron { display: none; }
  .rt-stop { grid-template-columns: auto minmax(0, 1fr) auto auto; row-gap: 8px; }
  .rt-stop .rt-amount { grid-column: 2; }
  .rt-stop .rt-status { grid-column: 3 / span 2; grid-row: 2; justify-self: end; }
  .rt-stop:not(:last-child)::after { display: none; }
  .rt-optimize { width: 100%; justify-content: center; }
  .rt-map-wrap .map { min-height: 260px; }
}
/* rider cards: when the card itself is narrow (1150–1600 px screens, phones) the distance goes under the name */
.rt-list { container-type: inline-size; }
@container (max-width: 470px) {
  .rt-rider { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 6px; }
  .rt-rider .rt-km { grid-column: 2; grid-row: 2; }
  .rt-rider .rt-pill { grid-column: 3; grid-row: 1 / span 2; }
  .rt-rider .rt-chevron { display: none; }
  .rt-rider .rt-num { grid-row: 1 / span 2; }
  .rt-who span { font-size: calc(13px * var(--fs, 1)); }
}

/* ---------- Riders (owner 2026-10-08, reference design) ---------- */
.rd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-block-end: 18px; }
.rd-title h1 { margin: 4px 0 4px; font-size: calc(32px * var(--fs, 1)); font-weight: 800; }
.rd-title p { margin: 0; color: var(--muted); font-size: calc(15px * var(--fs, 1)); }
.rd-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rd-search { position: relative; display: block; width: 320px; max-width: 100%; }
.rd-search .icon { position: absolute; inset-inline-start: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.rd-search input { min-height: 48px; padding-inline-start: 44px; border-radius: 12px; background: var(--surface); }
.rd-filter { position: relative; }
.rd-filter summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding-inline: 20px; border-radius: 12px; cursor: pointer; font-weight: 600; }
.rd-filter summary::-webkit-details-marker { display: none; }
.rd-filter summary .icon { width: 18px; height: 18px; }
.rd-filter-menu { position: absolute; z-index: 50; inset-inline-end: 0; top: calc(100% + 6px); min-width: 200px; padding: 6px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.rd-filter-menu button { border: 0; background: transparent; text-align: start; padding: 9px 12px; border-radius: 8px; font: inherit; color: var(--text); cursor: pointer; }
.rd-filter-menu button:hover { background: var(--surface-2, #f1f5f9); }
.rd-filter-menu button.active { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); font-weight: 600; }
.rd-add { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding-inline: 22px; border-radius: 12px; font-weight: 700; font-size: calc(15px * var(--fs, 1)); }
.rd-add .icon { width: 19px; height: 19px; }
.rd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-block-end: 20px; }
.rd-kpi { --tone: #16a34a; position: relative; display: flex; align-items: center; gap: 14px; min-height: 74px; padding: 11px 15px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent); overflow: hidden;
  background: linear-gradient(110deg, color-mix(in srgb, var(--tone) 22%, var(--surface)) 0%, var(--surface) 75%); }
.rd-kpi.tone-green { --tone: #16a34a; } .rd-kpi.tone-blue { --tone: #2f80ed; } .rd-kpi.tone-orange { --tone: #f59e0b; } .rd-kpi.tone-purple { --tone: #a855f7; }
.rd-kpi-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--tone); color: #fff; }
.rd-kpi-icon .icon { width: 28px; height: 28px; }
.rd-kpi-text { display: flex; flex-direction: column; min-width: 0; }
.rd-kpi-text span { font-size: calc(15px * var(--fs, 1)); color: var(--text); }
.rd-kpi-text b { font-size: calc(28px * var(--fs, 1)); font-weight: 800; line-height: 1.15; color: var(--text); }
.rd-kpi-deco { position: absolute; inset-inline-end: 22px; top: 50%; transform: translateY(-50%); width: 50px; height: 44px; color: var(--tone); fill: var(--tone); opacity: .9; }
svg.icon.rd-kpi-deco { fill: none; opacity: .55; width: 40px; height: 40px; }
/* table */
.rd-table { padding: 0 6px 6px; border-radius: 16px; }
.rd-table th { font-size: calc(12px * var(--fs, 1)); letter-spacing: .05em; text-transform: uppercase; }
.rd-table td { padding-block: 10px; }
.rd-table .avatar { width: 46px; height: 46px; font-size: calc(15px * var(--fs, 1)); font-weight: 700; color: #fff; }
.rd-table .avatar.av-0 { background: #4f6df5; } .rd-table .avatar.av-1 { background: #16a34a; } .rd-table .avatar.av-2 { background: #0ea5e9; }
.rd-table .avatar.av-3 { background: #a855f7; } .rd-table .avatar.av-4 { background: #f59e0b; } .rd-table .avatar.av-5 { background: #14b8a6; }
.rd-table .avatar.av-6 { background: #ec4899; } .rd-table .avatar.av-7 { background: #10b981; }
.rd-table .person strong { font-size: calc(15.5px * var(--fs, 1)); }
.rd-table .today-stats .stat { min-width: 76px; padding: 5px 8px; border-radius: 8px; background: var(--surface-2, #f1f5f9); }
.rd-table .today-stats .stat.pending:not(.zero) b { color: #f59e0b; }
.rd-table .map-btn { width: 30px; height: 30px; background: transparent; }
.rd-table .map-btn svg { width: 26px; height: 26px; fill: #22c55e; stroke: #0b3b2e; stroke-width: 1.2; }
.rd-table .row-actions .btn-icon { width: 38px; height: 38px; border-radius: 10px; }
@media (max-width: 1300px) { .rd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .rd-actions { width: 100%; } .rd-search { flex: 1 1 100%; width: auto; }
  .rd-add { flex: 1; justify-content: center; }
  .rd-title h1 { font-size: calc(28px * var(--fs, 1)); }
}
@media (max-width: 480px) { .rd-kpis { grid-template-columns: minmax(0, 1fr); } }
.rd-table td .cell-2:has(> .map-btn) { flex-direction: row; align-items: center; gap: 8px; }
.rd-table th:last-child { text-align: center; }
@media (max-width: 1500px) {
  .rd-table th, .rd-table td { padding-inline: 8px; }
  .rd-table .today-stats { gap: 4px; }
  .rd-table .today-stats .stat { min-width: 62px; padding: 4px 5px; }
  .rd-table .row-actions .btn-icon { width: 34px; height: 34px; }
  .rd-table .row-actions.inline { gap: 4px; }
  .rd-table .avatar { width: 40px; height: 40px; }
  .rd-table td { font-size: calc(13px * var(--fs, 1)); }
}
@media (max-width: 1300px) {
  .rd-table .today-stats { display: grid; grid-template-columns: repeat(3, auto); }
  .rd-table .today-stats .stat { min-width: 54px; }
  .rd-table .row-actions.inline { display: grid; grid-template-columns: repeat(2, auto); }
}

/* ---------- Customers (owner 2026-10-08, reference design) ---------- */
.cu-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-block-end: 18px; }
.cu-search { flex: 1 1 360px; width: auto; }
.cu-range { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding-inline: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.cu-range .icon { width: 18px; height: 18px; color: var(--muted); }
.cu-range input { border: 0; background: transparent; min-height: 40px; width: 150px; padding: 0 4px; box-shadow: none; }
.cu-apply { min-height: 48px; padding-inline: 26px; border-radius: 12px; font-weight: 700; font-size: calc(15px * var(--fs, 1)); }
.cu-growth { position: absolute; top: 12px; inset-inline-end: 16px; font-size: calc(13px * var(--fs, 1)); font-weight: 700; color: #22c55e; }
.badge.cu-inactive { color: #ef4444; background: color-mix(in srgb, #ef4444 14%, transparent); }
.badge.cu-inactive::before { background: #ef4444; }
#customers-table .person { display: inline-flex; align-items: center; gap: 12px; }
#customers-table .cu-edit { color: #3b82f6; }
#customers-table td:first-child { color: var(--muted); width: 44px; }
@media (max-width: 760px) {
  .cu-range { flex: 1 1 100%; justify-content: space-between; }
  .cu-range input { width: 100%; flex: 1; }
  .cu-apply { flex: 1; }
}
.rd-kpi:has(.cu-growth) .rd-kpi-deco { top: auto; bottom: 12px; transform: none; height: 34px; }
.cu-growth { top: 10px; }
#customers-table td { padding-block: 7px; }
#customers-table .avatar { width: 36px; height: 36px; font-size: calc(13px * var(--fs, 1)); }
#customers-table .person strong { font-size: calc(14.5px * var(--fs, 1)); font-weight: 600; }
#customers-table .row-actions .btn-icon { width: 34px; height: 34px; }
@media (max-width: 1400px) { #customers-table th, #customers-table td { padding-inline: 8px; } #customers-table .row-actions.inline { gap: 4px; } }
@media (max-width: 1400px) {
  #customers-table .row-actions.inline { display: flex; flex-wrap: nowrap; }
  #customers-table .row-actions .btn-icon { width: 30px; height: 30px; }
  #customers-table td { font-size: calc(12.5px * var(--fs, 1)); }
}
@media (max-width: 1400px) {
  #customers-table td:nth-child(5), #customers-table td:nth-child(6) { white-space: normal; min-width: 110px; }
  #customers-table .person strong { white-space: normal; }
}

/* ---------- Orders (owner 2026-10-08, reference design) ---------- */
.od-actions .od-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding-inline: 18px; border-radius: 12px; font-weight: 600; }
.od-actions .od-btn .icon { width: 19px; height: 19px; }
.od-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.od-kpis .rd-kpi-deco { top: auto; bottom: 12px; transform: none; height: 34px; }
.od-change { position: absolute; top: 12px; inset-inline-end: 16px; font-size: calc(13px * var(--fs, 1)); font-weight: 700; }
.od-change.good { color: #22c55e; } .od-change.bad { color: #ef4444; } .od-change.flat { color: var(--muted); }
.od-change.live { color: #22c55e; font-weight: 600; }
.rd-kpi.tone-red { --tone: #ef4444; }
.od-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-block: 14px 18px; }
.od-bar .od-search { flex: 1 1 360px; width: auto; }
.od-bar select, .od-bar input[type=date] { min-height: 48px; border-radius: 12px; }
.od-bar select[name=status] { min-width: 230px; }
.od-bar input[type=date] { width: 260px; }
@media (max-width: 1600px) { .od-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .od-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .od-actions .od-btn { flex: 1 1 45%; justify-content: center; }
  .od-bar select[name=status], .od-bar input[type=date] { flex: 1 1 100%; width: auto; min-width: 0; }
}
@media (max-width: 480px) { .od-kpis { grid-template-columns: minmax(0, 1fr); } }
#order-filter.od-bar { background: transparent; border: 0; box-shadow: none; padding: 0; }
#order-filter .od-search { flex: 1 1 380px; width: auto; max-width: none; }
#order-filter .od-search input { width: 100%; min-height: 48px; }

/* ---------- Dashboard (owner 2026-10-08, reference design) ---------- */
.dash-bottom { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(300px, 1fr); gap: 20px; align-items: stretch; }
.dash-bottom > .map-card { margin: 0; min-width: 0; }
.act-card { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.act-card .card-head h2 { display: flex; align-items: center; gap: 10px; }
.act-all { font-size: calc(14px * var(--fs, 1)); font-weight: 600; color: #3b82f6; text-decoration: none; white-space: nowrap; }
.act-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.act { display: grid; grid-template-columns: 10px 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 4px; border-block-end: 1px solid var(--border); cursor: pointer; }
.act:last-child { border-block-end: 0; }
.act:hover { background: var(--surface-2, #f7f9fb); }
.act-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--act); }
.act-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--act); color: #fff; }
.act-icon .icon { width: 19px; height: 19px; }
.act-text { display: flex; flex-direction: column; min-width: 0; }
.act-text strong { font-size: calc(14.5px * var(--fs, 1)); }
.act-text span { font-size: calc(13px * var(--fs, 1)); color: var(--muted); overflow-wrap: anywhere; }
.act-time { font-size: calc(13px * var(--fs, 1)); color: var(--muted); white-space: nowrap; }
.act.new { --act: #22c55e; } .act.assigned { --act: #3b82f6; } .act.out { --act: #f59e0b; }
.act.delivered { --act: #16a34a; } .act.failed { --act: #ef4444; } .act.cancelled { --act: #ef4444; }
/* cards: saturated tint, round icon, the change at the top right (dark theme as in the reference) */
.dash-kpis .kpi[class*="tone-"] { border: 1px solid color-mix(in srgb, var(--k) 55%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--k) 30%, var(--surface)) 0%, color-mix(in srgb, var(--k) 8%, var(--surface)) 100%); }
.dash-kpis .kpi.tone-blue { --k: #2563eb; } .dash-kpis .kpi.tone-orange { --k: #f59e0b; } .dash-kpis .kpi.tone-violet { --k: #8b5cf6; }
.dash-kpis .kpi.tone-rose { --k: #e11d48; } .dash-kpis .kpi.tone-green { --k: #16a34a; } .dash-kpis .kpi.tone-red { --k: #dc2626; }
.dash-kpis .kpi.tone-cyan { --k: #0891b2; } .dash-kpis .kpi.tone-mint { --k: #059669; }
.dash-kpis .kpi .kpi-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--k); color: #fff; }
.dash-kpis .kpi .kpi-icon .icon { width: 28px; height: 28px; }
@media (max-width: 1200px) { .dash-bottom { grid-template-columns: minmax(0, 1fr); } }
.dash-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dash-kpis .kpi { overflow: hidden; min-width: 0; }
@media (max-width: 1100px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dash-kpis { grid-template-columns: minmax(0, 1fr); } }

/* Orders table (owner 2026-10-08): sideways scrolling allowed; readable widths, compact rows, nothing hidden */
.od-table th { white-space: nowrap; font-size: calc(11.5px * var(--fs, 1)); padding: 11px 10px; }
.od-table td { font-size: calc(13px * var(--fs, 1)); padding: 8px 10px; white-space: nowrap; vertical-align: middle; }
.od-table .order-id { display: inline-flex; align-items: center; gap: 6px; }
.od-table .loc-cell { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.od-table .loc-cell .btn-sm { padding: 4px 10px; font-size: calc(12px * var(--fs, 1)); min-height: 30px; }
.od-table td:has(> .row-actions) { width: 1%; }
.od-table .row-actions .btn-icon { width: 32px; height: 32px; }
.od-table .od-edit { color: #3b82f6; }
/* Owner 2026-10-12: fewer columns - the related data is a second line of its column (no sideways scroll on a laptop) */
.od-table .th-2 { display: grid; gap: 1px; line-height: 1.25; }
.od-table .th-2 small { font-size: calc(10px * var(--fs, 1)); font-weight: 500; letter-spacing: .03em; opacity: .75; }
.od-table .od-2 { gap: 2px; justify-items: start; }
.od-table .od-sub { font-size: calc(11.5px * var(--fs, 1)); line-height: 1.3; white-space: nowrap; }
.od-table .od-sub .finished-at { font-size: inherit; }
.od-table td:nth-child(3) { white-space: normal; min-width: 150px; max-width: 220px; }          /* customer */
.od-table td:nth-child(4) { white-space: normal; min-width: 150px; max-width: 280px; }          /* address */
.od-table td:nth-child(4) .wrap.addr { max-width: none; min-width: 0; display: inline; }
.od-table td:nth-child(4) .od-sub { white-space: normal; }
.od-table .od-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.od-table td { padding-block: 7px; }
/* Sidebar (owner 2026-10-08): one style for every item — main menu and Administration alike — in the reference's
   proportions; the menu scrolls on its own when the window is short. */
.sidebar { overflow-y: auto; scrollbar-width: thin; }
.sidebar a { padding: 13px 16px; font-size: calc(16px * var(--fs, 1)); gap: 16px; min-height: 50px; transition: background-color .15s, color .15s; }
.sidebar a .icon { width: 23px; height: 23px; flex: none; stroke-width: 1.9; }
.sidebar a:focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; }
.nav-section { margin: 24px 8px 10px; font-size: calc(12px * var(--fs, 1)); }
@media (max-height: 820px) { .sidebar a { padding-block: 10px; min-height: 44px; } }

/* Forms in cards (owner 2026-10-08): a single-card form sits in the middle instead of filling half the window. */
.fcards.one { grid-template-columns: minmax(0, 720px); justify-content: center; }
.fcard .confirm-text { margin: 0; }

/* The show / hide eye on every password box (owner 2026-10-08): the same button as on the sign-in page. */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-inline-end: 46px; }
.pw-wrap > .pw-eye { inset-inline-end: 4px; width: 36px; height: 36px; color: var(--muted, #5b6676); }
.pw-wrap > .pw-eye svg { width: 20px; height: 20px; }
.pw-wrap > .pw-eye:hover { background: var(--surface-2, #f1f4f7); color: var(--text); }
.pw-wrap > .pw-eye.on { color: var(--primary); }
.pw-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Auto WhatsApp: the chat button next to the sender's number (owner 2026-10-08). */
.auto-phone { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* Quick sign-in section (owner 2026-10-08): compact — less padding and no empty space, the same content. */
.fcard-quick { padding: 12px 16px; }
.fcard-quick .fcard-title { margin-block-end: 8px; }
.fcard-quick .fcard-body { gap: 6px; }
.fcard-quick p { margin: 0; }
.quick-list { gap: 6px; }
.quick-list li { padding: 6px 10px; }

/* ---- One look for every window (owner 2026-10-08) ----
   Windows without their own cards get them from autoCards(); small question windows share the large windows' frame:
   a title bar, a soft background with the content in a card, and the buttons in a bar at the bottom. */
.fcards-auto { display: flex; flex-direction: column; gap: 16px; }
.fcard-body > dl.details { display: grid; grid-template-columns: max-content 1fr max-content 1fr; gap: 10px 18px; margin: 0; }
.fcard-body > .table-wrap, .fcard-body > .map { margin: 0; }
.fcard-body > p { margin: 0; }
.fcard-body > .confirm-text { font-size: calc(15px * var(--fs, 1)); }
.fcard-body > form.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; }
.fcard-body > form.toolbar > label { flex: 0 1 220px; min-width: 160px; }
.fcard-body > form.toolbar select, .fcard-body > form.toolbar input { height: 42px; min-height: 0; }
.fcard-body .import-steps { margin: 0; padding-inline-start: 20px; display: grid; gap: 8px; }
.import-actions { display: flex; justify-content: flex-end; margin-block-start: 10px; }
.modal-card.modal-xl #modal-body > form.stack:not(:has(.fcards)) > .fcards-auto { grid-column: 1 / -1; }
.modal-card.modal-sm:not(.wa-card) { padding: 0; display: flex; flex-direction: column; overflow: hidden; max-height: 92vh; }
.modal-card.modal-sm:not(.wa-card) .modal-head { margin: 0; padding: 14px 20px; border-block-end: 1px solid var(--border); background: var(--surface); }
.modal-card.modal-sm:not(.wa-card) .modal-head h2 { font-size: calc(18px * var(--fs, 1)); }
.modal-card.modal-sm:not(.wa-card) #modal-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px 16px; background: var(--surface-2, var(--bg)); }
.modal-card.modal-sm:not(.wa-card) #modal-body:has(.modal-actions) { padding-block-end: 0; }
.modal-card.modal-sm:not(.wa-card) .modal-actions {
  position: sticky; bottom: 0; z-index: 2; margin: 16px -20px 0; padding: 12px 20px; background: var(--surface);
  border-block-start: 1px solid var(--border);
}
@media (max-width: 720px) {
  .fcard-body > dl.details { grid-template-columns: max-content 1fr; }
}

/* ---- Administration pages in the portal's design (owner 2026-10-08): Branches, Users, Audit log, Error log,
   Settings, Integrations, WhatsApp log — the same header, count cards, filter card, table and buttons as Riders. ---- */
.rd-kpis.adm-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adm-table .person { display: inline-flex; align-items: center; gap: 12px; }
.adm-tile { display: inline-grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; color: #fff; background: #2563eb; }
.adm-tile .icon { width: 19px; height: 19px; }
.adm-tile.tone-blue { background: #2563eb; } .adm-tile.tone-green { background: #16a34a; } .adm-tile.tone-purple { background: #7c3aed; }
.adm-tile.tone-orange { background: #f59e0b; } .adm-tile.tone-rose { background: #e11d48; } .adm-tile.tone-grey { background: #64748b; }
.adm-table .avatar { width: 42px; height: 42px; }
.badge.role-admin { background: rgba(124, 58, 237, .14); color: #6d28d9; }
.badge.role-manager { background: rgba(37, 99, 235, .12); color: #1d4ed8; }
.badge.sev-rose { background: rgba(225, 29, 72, .13); color: #be123c; }
.badge.sev-orange { background: rgba(245, 158, 11, .16); color: #b45309; }
.badge.sev-blue { background: rgba(37, 99, 235, .12); color: #1d4ed8; }
[data-theme="dark"] .badge.role-admin { color: #c4b5fd; } [data-theme="dark"] .badge.role-manager, [data-theme="dark"] .badge.sev-blue { color: #93c5fd; }
[data-theme="dark"] .badge.sev-rose { color: #fda4af; } [data-theme="dark"] .badge.sev-orange { color: #fcd34d; }
form.toolbar.adm-filter {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 14px; align-items: end;
  padding: 16px 18px; border-radius: 16px; margin-block-end: 18px;
}
form.toolbar.adm-filter > label { margin: 0; min-width: 0; }
form.toolbar.adm-filter > label.check { align-self: center; }
form.toolbar.adm-filter input:not([type=checkbox]), form.toolbar.adm-filter select { width: 100%; min-height: 44px; border-radius: 10px; }
form.toolbar.adm-filter > label.check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
form.toolbar.adm-filter > label.check input { width: 18px; height: 18px; flex: 0 0 auto; }
.adm-table .row-actions { justify-content: flex-start; gap: 8px; flex-wrap: nowrap; }
.rd-kpi .rd-kpi-text { min-width: 0; }
.rd-kpi .rd-kpi-text > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
form.toolbar.adm-filter > .btn { min-height: 44px; justify-self: start; padding-inline: 20px; }
form.toolbar.adm-filter > .btn .icon { width: 16px; height: 16px; margin-inline-end: 6px; }
.page .section-title { display: flex; align-items: center; gap: 10px; font-size: calc(13px * var(--fs, 1)); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.page .section-title::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--primary); }
.adm-card, .page form.integration { border-radius: 16px; }
.page form.setting { border-radius: 14px; }
@media (max-width: 960px) {
  .rd-kpis.adm-kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .rd-kpis.adm-kpis-3 { grid-template-columns: minmax(0, 1fr); }
  form.toolbar.adm-filter { grid-template-columns: minmax(0, 1fr); }
  form.toolbar.adm-filter > .btn { justify-self: stretch; }
}

/* Auto WhatsApp: a message flagged for review (owner 2026-10-08) - too many in an hour, or the same one again. */
.auto-flag { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 6px; padding: 3px 10px; border-radius: 999px;
  background: rgba(245, 158, 11, .16); color: #b45309; font-size: calc(12.5px * var(--fs, 1)); font-weight: 600; }
.auto-flag .icon { width: 14px; height: 14px; }
td .auto-flag { display: flex; width: fit-content; }
.auto-flag-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 10px;
  background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .45); color: #92400e; }
.auto-flag-note .icon { width: 18px; height: 18px; flex: 0 0 auto; margin-block-start: 2px; }
[data-theme="dark"] .auto-flag, [data-theme="dark"] .auto-flag-note { color: #fcd34d; }

/* ---------- Announcements (owner 2026-10-08) ---------- */
.ann-audience { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; display: grid; gap: 6px; }
.ann-audience legend { padding: 0 6px; font-weight: 700; font-size: .9rem; }
.ann-riders { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
.ann-riders .ann-all { padding-block-end: 8px; border-block-end: 1px solid var(--border); margin-block-end: 8px; }
.ann-rider-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; max-height: 260px; overflow: auto; }
.ann-body { max-width: 560px; display: inline-block; }
.bell-list .bell-ann { display: grid; gap: 4px; padding: 10px 16px; }
.bell-list li.unread .bell-ann { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); box-shadow: inset 3px 0 0 var(--primary); }
[dir="rtl"] .bell-list li.unread .bell-ann { box-shadow: inset -3px 0 0 var(--primary); }
@media (max-width: 640px) { .ann-rider-list { grid-template-columns: 1fr; } }
.ann-actions { display: flex; justify-content: flex-end; }

/* ---------- Settings page: groups + search (owner 2026-10-08) ---------- */
.set-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block-end: 4px; }
.set-tools .rd-search { flex: 1 1 280px; max-width: 460px; }
.set-tools .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.set-group { padding: 0; overflow: hidden; }
.set-group-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-block-end: 1px solid var(--border);
  background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
.set-group-head h2 { margin: 0; font-size: 1.05rem; }
.set-group-head p { margin: 2px 0 0; font-size: .85rem; }
.set-group-head > div { flex: 1; min-width: 0; }
.set-rows .set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 14px 20px; }
.set-rows .set-row + .set-row { border-block-start: 1px solid var(--border); }
.set-rows .set-row[hidden] { display: none; }
.set-rows .set-row strong { font-weight: 600; line-height: 1.35; }
.set-rows .setting-value select, .set-rows .setting-value input { min-width: 120px; }
.set-rows .setting-value select.is-on { border-color: #16a34a; color: #15803d; font-weight: 700; }
.set-rows .setting-value select.is-off { color: var(--muted); }
[data-theme="dark"] .set-rows .setting-value select.is-on { color: #4ade80; }
@media (max-width: 720px) {
  .set-rows .set-row { grid-template-columns: minmax(0, 1fr) auto; }
  .set-rows .set-row > div:first-child { grid-column: 1 / -1; }
  .set-group-head { padding: 14px 16px; }
  .set-rows .set-row { padding: 12px 16px; }
}
.set-tools .chip { border: 1px solid var(--border); background: var(--surface); color: inherit; border-radius: 999px; padding: 6px 14px; font-size: .88rem; font-weight: 600; cursor: pointer; }
.set-tools .chip:hover { border-color: var(--primary); }
.set-tools .chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---------- Settings page redesign (owner 2026-10-08) ---------- */
/* Looks only: thin blue borders with a soft glow, banner cards with a picture, a tile per setting, bright green
   Save buttons, real switches. Every colour comes from the theme tokens, so light and dark both work; logical
   properties throughout, so Arabic (right-to-left) mirrors by itself. */
.st-page {
  --st-line: color-mix(in srgb, var(--info) 30%, var(--border));
  --st-glow: 0 0 0 1px color-mix(in srgb, var(--info) 10%, transparent), 0 14px 34px -22px color-mix(in srgb, var(--info) 70%, transparent);
  --st-green: #19d37f;
  --st-green-2: #10b96b;
  --st-tone: var(--primary);
  display: flex; flex-direction: column; gap: 16px;
}
.st-page .tone-green, .st-page .rt-green { --st-tone: #16c172; }
.st-page .tone-blue, .st-page .rt-blue { --st-tone: #2f7df6; }
.st-page .tone-purple, .st-page .rt-purple { --st-tone: #8b5cf6; }
.st-page .tone-rose, .st-page .rt-rose { --st-tone: #f0386b; }
.st-page .tone-orange, .st-page .rt-orange { --st-tone: #f59e0b; }
.st-page .tone-violet, .st-page .rt-violet { --st-tone: #a855f7; }
.st-page .tone-cyan, .st-page .rt-cyan { --st-tone: #22b8e6; }
.st-page .card { border-color: var(--st-line); border-radius: 16px; box-shadow: var(--st-glow); }
.st-page h2 { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.st-sec { display: flex; flex-direction: column; gap: 12px; }
.st-sec[hidden] { display: none; }

/* Title */
.st-hero { justify-content: flex-start; align-items: center; gap: 16px; margin-block-end: 0; }
.st-hero-tile { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 16px; color: #fff;
  background: linear-gradient(145deg, #1fd98a, #0b8f55); box-shadow: 0 10px 26px -10px #16c172, inset 0 0 0 1px rgba(255, 255, 255, .22); }
.st-hero-tile .icon { width: 30px; height: 30px; }
.st-hero .rd-title h1 { margin: 0 0 2px; }

/* Tabs: one per section */
.st-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; border: 1px solid var(--st-line); border-radius: 16px; background: var(--surface); box-shadow: var(--st-glow); }
.st-tab { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2); color: var(--text-2); font: inherit; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, color .15s, box-shadow .15s; }
.st-tab:hover { border-color: var(--st-green-2); color: var(--text); }
.st-tab[aria-selected="true"] { border-color: var(--st-green); color: var(--text); background: color-mix(in srgb, var(--st-green) 18%, var(--surface));
  box-shadow: 0 0 0 1px var(--st-green), 0 8px 22px -12px var(--st-green); }
.st-tab:focus-visible, .st-switch:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Banner cards (account, system settings, group titles) */
.st-banner, .st-page .set-group-head { position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(100deg, color-mix(in srgb, var(--st-tone) 16%, var(--surface)) 0%, var(--surface) 46%, color-mix(in srgb, var(--st-tone) 22%, var(--surface)) 100%); }
.st-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; padding: 20px 24px; border-color: color-mix(in srgb, var(--st-tone) 45%, var(--border)) !important; }
.st-banner-text { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.st-banner-text strong { font-size: 1rem; }
.st-banner .adm-tile, .st-page .set-group-head .adm-tile, .st-card-head .adm-tile, .msg-head .adm-tile { width: 54px; height: 54px; border-radius: 14px; }
.st-banner .adm-tile .icon, .st-page .set-group-head .adm-tile .icon, .st-card-head .adm-tile .icon, .msg-head .adm-tile .icon { width: 26px; height: 26px; }
.st-page .adm-tile { background: linear-gradient(145deg, color-mix(in srgb, var(--st-tone) 82%, #fff), var(--st-tone)); box-shadow: 0 8px 20px -10px var(--st-tone), inset 0 0 0 1px rgba(255, 255, 255, .2); }
.st-page .adm-tile.tone-blue { --st-tone: #2f7df6; } .st-page .adm-tile.tone-green { --st-tone: #16c172; } .st-page .adm-tile.tone-purple { --st-tone: #8b5cf6; }
.st-page .adm-tile.tone-rose { --st-tone: #f0386b; } .st-page .adm-tile.tone-orange { --st-tone: #f59e0b; } .st-page .adm-tile.tone-cyan { --st-tone: #22b8e6; }
.st-page .adm-tile.st-wa-tile { --st-tone: #25d366; border-radius: 50%; }
.st-page .adm-tile.st-google-tile { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.st-google { width: 30px; height: 30px; }
.st-art { flex: none; width: 190px; height: 95px; margin-block: -14px; pointer-events: none; }
.st-art .a0 { fill: var(--surface); }
.st-art .a1 { fill: var(--st-tone); }
.st-art .a2 { fill: color-mix(in srgb, var(--st-tone) 24%, var(--surface)); }
.st-art .a3 { fill: color-mix(in srgb, var(--st-tone) 62%, #7c8cf8); }
.st-art .s0, .st-art .s1, .st-art .s2 { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.st-art .s0 { stroke: #fff; stroke-width: 3; }
.st-art .s1 { stroke: var(--st-tone); stroke-width: 4; }
.st-art .s1.dash { stroke-dasharray: 13 9; stroke-width: 9; }
.st-art .s2 { stroke: color-mix(in srgb, var(--st-tone) 55%, transparent); stroke-width: 5; }
.st-art .s2.thin { stroke-width: 2; }
[dir="rtl"] .st-art { transform: scaleX(-1); }
[dir="rtl"] .st-flip { transform: scaleX(-1); }

/* Account: the recovery number */
.st-page .setting.recovery { border-inline-start-width: 1px; }
.st-page .setting.recovery.needs-action { background: linear-gradient(100deg, color-mix(in srgb, var(--st-tone) 16%, var(--surface)) 0%, var(--surface) 46%, color-mix(in srgb, var(--st-tone) 22%, var(--surface)) 100%); }
.st-page .recovery-icon { width: 60px; height: 60px; border-radius: 16px; color: #ffe27a; background: linear-gradient(145deg, #1fbf7a, #0b7a48); box-shadow: 0 8px 20px -10px #16c172, inset 0 0 0 1px rgba(255, 255, 255, .2); }
.st-page .setting.recovery.needs-action .recovery-icon { color: #ffe27a; background: linear-gradient(145deg, #1fbf7a, #0b7a48); }
.st-pill { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-block-start: 6px; padding: 7px 14px; border-radius: 10px; font-weight: 600; }
.st-pill.ok { background: var(--primary-soft); color: var(--primary-soft-ink); }
.st-pill.bad { background: var(--danger-soft); color: var(--danger); }
.st-pill .error { color: inherit; }

/* Section cards and their titles */
.st-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.st-card-head { display: flex; align-items: center; gap: 16px; }
.st-card-head > div { min-width: 0; }
.st-card-head p { margin: 4px 0 0; }

/* Buttons */
.st-page .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding-inline: 20px; border: 0; border-radius: 12px;
  background: linear-gradient(180deg, var(--st-green), var(--st-green-2)); color: #042414; font-weight: 700;
  box-shadow: 0 10px 22px -12px var(--st-green), inset 0 1px 0 rgba(255, 255, 255, .35); }
.st-page .btn-primary:hover { background: linear-gradient(180deg, #2ee391, var(--st-green)); color: #042414; }
.st-page .btn-primary .icon { width: 19px; height: 19px; }
.st-page .btn.st-ghost { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding-inline: 18px; border-radius: 12px; border-color: var(--st-line); background: var(--surface-2); font-weight: 600; }
.st-page .btn.st-copy { display: inline-flex; align-items: center; gap: 6px; border-radius: 9px; border-color: var(--st-line); background: var(--surface-2); }
.st-page .btn.st-copy .icon { width: 15px; height: 15px; }

/* Customer messages */
.st-page .msg-card { gap: 12px; padding: 15px; background: var(--surface-2); box-shadow: none; }
.st-page .msg-head { flex-direction: row; align-items: center; gap: 14px; }
.st-page .msg-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-page .msg-head strong { font-size: 1.05rem; }
.st-page .msg-chips { gap: 8px; }
.st-page .chip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9px; font-weight: 600; --ph: var(--info);
  border-color: color-mix(in srgb, var(--ph) 45%, var(--border)); background: color-mix(in srgb, var(--ph) 16%, var(--surface)); color: color-mix(in srgb, var(--ph) 70%, var(--text)); }
.st-page .chip-btn:hover { border-color: var(--ph); }
.st-page .chip-btn .icon { width: 14px; height: 14px; }
.st-page .chip-btn.ph-orderNumber { --ph: #8b5cf6; } .st-page .chip-btn.ph-amount { --ph: #16c172; } .st-page .chip-btn.ph-shop { --ph: #f59e0b; }
.st-page .msg-field { gap: 8px; padding: 12px; border: 1px solid var(--st-line); border-radius: 14px; background: var(--surface); }
.msg-field-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-page .msg-lang { display: inline-flex; align-items: center; gap: 9px; font-size: calc(14px * var(--fs, 1)); }
.msg-lang-badge { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: #fff; font-style: normal; font-weight: 700; font-size: calc(13px * var(--fs, 1)); background: #2f7df6; }
.msg-lang-badge.lang-ar { background: #16c172; }
.st-page .msg-field textarea, .st-page .msg-field input { border-color: var(--border); border-radius: 10px; background: var(--surface-2); }
.st-page .msg-field textarea:focus, .st-page .msg-field input:focus { border-color: var(--st-green); box-shadow: 0 0 0 3px var(--focus); }
.st-page .msg-count { align-self: flex-end; }
.st-page .msg-preview { gap: 10px; padding: 0; overflow: hidden; border: 1px solid var(--st-line); border-radius: 14px;
  background-color: #efe7de; background-image: radial-gradient(rgba(84, 101, 111, .13) 1.2px, transparent 1.3px); background-size: 16px 16px; }
.msg-preview-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border-block-end: 1px solid var(--st-line); }
.msg-preview-head .adm-tile { width: 36px; height: 36px; border-radius: 50%; }
.msg-preview-head .muted { color: var(--text); font-weight: 600; font-size: calc(14px * var(--fs, 1)); }
.st-page .msg-bubbles { padding: 4px 14px 16px; gap: 10px; }
.st-page .msg-bubble { background: #005c4b; color: #e9edef; border-radius: 12px; border-start-start-radius: 3px; padding: 10px 14px; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .6); }
.st-page .msg-card .page-actions { gap: 10px; }
@media (min-width: 1280px) {
  /* The location request: the two editors on one side, the preview beside them (as the customer sees it). */
  .st-page .msg-card[data-group="request"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); column-gap: 18px; align-items: start; }
  .st-page .msg-card[data-group="request"] > * { grid-column: 1; }
  .st-page .msg-card[data-group="request"] > .msg-preview { grid-column: 2; grid-row: 1 / span 4; align-self: stretch; }
  .st-page .msg-card[data-group="received"] .msg-bubbles { flex-direction: row; flex-wrap: wrap; }
  .st-page .msg-card[data-group="received"] .msg-bubble { flex: 1 1 320px; max-width: none; }
}

/* A setting: tile, title + line + key, the control, Save */
.st-page .set-group { padding: 0; overflow: hidden; }
.st-page .set-group-head { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-block-end: 1px solid var(--st-line); }
.st-page .set-group-head h2 { font-size: 1.3rem; }
.st-page .set-group-head p { margin: 3px 0 0; font-size: .92rem; }
.st-count { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 8px 14px; border-radius: 10px; font-weight: 600; font-size: calc(13.5px * var(--fs, 1));
  border: 1px solid color-mix(in srgb, var(--st-tone) 45%, var(--border)); background: color-mix(in srgb, var(--st-tone) 14%, var(--surface)); color: var(--text); }
.st-count .icon { width: 16px; height: 16px; color: var(--st-tone); }
.st-page .set-rows { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.st-page .set-rows .set-row, .st-page .st-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px 16px; padding: 12px 16px;
  border: 1px solid var(--st-line); border-inline-start: 4px solid var(--st-tone); border-radius: 14px; background: var(--surface-2); }
.st-page .set-rows .set-row + .set-row { border-block-start: 1px solid var(--st-line); }
.st-page .set-row[hidden] { display: none; }
.st-page .set-tile { width: 52px; height: 52px; border-radius: 13px; }
.st-page .set-tile .icon { width: 25px; height: 25px; }
.set-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.set-text strong { font-weight: 700; line-height: 1.35; }
.set-desc { color: var(--text-2); font-size: .92rem; line-height: 1.4; }
.set-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: calc(12.5px * var(--fs, 1)); }
.set-meta .icon { width: 14px; height: 14px; }
.set-key { padding: 1px 8px; border-radius: 6px; background: var(--neutral-soft); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: calc(12px * var(--fs, 1)); overflow-wrap: anywhere; }
.st-page .setting-value { display: flex; align-items: center; justify-content: flex-end; position: relative; min-width: 150px; }
.st-page .setting-value select:not(.st-switch-select), .st-page .setting-value input { width: 100%; min-width: 150px; min-height: 46px; border-radius: 12px; border-color: var(--st-line); background-color: var(--surface); font-weight: 600; }
.st-num { position: relative; display: block; width: 100%; }
.st-num.has-steps input { padding-inline-end: 38px; }
/* The number box is always left-to-right; in Arabic the arrows sit on its left. */
[dir="rtl"] .st-num.has-steps input { padding-right: 14px; padding-left: 38px; text-align: right; }
.st-steps { position: absolute; inset-block: 5px; inset-inline-end: 6px; display: flex; flex-direction: column; justify-content: center; }
.st-steps button { display: grid; place-items: center; width: 24px; height: 17px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; }
.st-steps button:hover { background: var(--surface-3); color: var(--text); }
.st-steps .icon { width: 15px; height: 15px; }

/* On / Off switch (the select beside it keeps the value) */
.st-switch { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 150px; min-height: 46px; padding: 6px 10px 6px 16px; border: 1px solid var(--st-line); border-radius: 12px;
  background: var(--surface); color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
[dir="rtl"] .st-switch { padding: 6px 16px 6px 10px; }
.st-switch-track { position: relative; flex: none; width: 58px; height: 30px; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border-strong); transition: background .18s; }
.st-switch-track i { position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .35); transition: inset-inline-start .18s; }
.st-switch[aria-checked="true"] { color: var(--st-green); }
.st-switch[aria-checked="true"] .st-switch-track { background: linear-gradient(180deg, var(--st-green), var(--st-green-2)); box-shadow: 0 0 14px -4px var(--st-green); }
.st-switch[aria-checked="true"] .st-switch-track i { inset-inline-start: 31px; }
.st-switch-select { position: absolute; inset-block-end: 0; inset-inline-end: 0; width: 1px !important; min-width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0; border: 0; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .st-switch-track, .st-switch-track i, .st-tab { transition: none; } }

/* System settings: search and the chips of the groups */
.st-system .st-banner-text { flex: 1 1 200px; }
.st-system .set-tools { flex: 1 1 100%; margin: 0; }
.st-page .set-tools .rd-search input { background: var(--surface-2); border-color: var(--st-line); }
.st-page .set-tools .chip { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 6px 16px; border-color: var(--st-line); background: var(--surface-2); font-weight: 600; }
.st-page .set-tools .chip .icon { width: 18px; height: 18px; }
.st-page .set-tools .chip .st-google { width: 18px; height: 18px; }
.st-page .set-tools .chip[data-settings-group="whatsapp"] .icon { color: #25d366; } .st-page .set-tools .chip[data-settings-group="orders"] .icon { color: #f59e0b; }
.st-page .set-tools .chip[data-settings-group="security"] .icon { color: #5b8def; }
.st-page .set-tools .chip.active { border-color: var(--st-green); background: color-mix(in srgb, var(--st-green) 18%, var(--surface)); color: var(--text); box-shadow: 0 0 0 1px var(--st-green); }
.st-page .set-tools .chip.active[data-settings-group=""] { background: linear-gradient(180deg, var(--st-green), var(--st-green-2)); color: #042414; }

/* Auto WhatsApp orders */
.st-page .auto-switch > div.set-text { flex: initial; }
.st-page .auto-add { padding: 14px; border: 1px solid var(--st-line); border-radius: 14px; background: var(--surface-2); }
.st-page .auto-add input { border-radius: 10px; }

/* Tablet and phone */
@media (max-width: 1100px) { .st-art { width: 150px; height: 75px; } }
@media (max-width: 860px) {
  .st-art { display: none; }
  .st-page .set-rows .set-row, .st-page .st-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .st-page .set-rows .set-row > .set-text, .st-page .st-row > .set-text { grid-column: 2 / -1; }
  .st-page .set-rows .set-row > .setting-value, .st-page .st-row > .setting-value { grid-column: 1 / 3; justify-content: stretch; }
  .st-page .set-rows .set-row > div:first-child { grid-column: auto; }
  .st-switch { width: 100%; }
}
@media (max-width: 560px) {
  .st-hero-tile { width: 52px; height: 52px; border-radius: 14px; }
  .st-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .st-tab { flex: none; }
  .st-banner { padding: 16px; }
  .st-card { padding: 11px; }
  .st-page .set-group-head { flex-wrap: wrap; padding: 14px 16px; }
  .st-page .set-group-head > div { flex: 1 1 calc(100% - 80px); }
  .st-page .set-group-head h2 { font-size: 1.12rem; }
  .st-page .set-rows { padding: 8px; }
  .st-page .set-rows .set-row, .st-page .st-row { grid-template-columns: auto minmax(0, 1fr); padding: 12px; }
  .st-page .set-rows .set-row > .setting-value, .st-page .st-row > .setting-value, .st-page .set-rows .set-row > .st-save, .st-page .st-row > .st-save { grid-column: 1 / -1; }
  .st-page .set-tile { width: 44px; height: 44px; }
  .st-page .setting.recovery > .btn { width: 100%; }
}

/* Integrations page: the same pieces (owner 2026-10-08) */
.int-hook { display: flex; align-items: flex-start; gap: 16px; padding: 18px 22px; border-color: color-mix(in srgb, var(--st-tone) 45%, var(--border)) !important;
  background: linear-gradient(100deg, color-mix(in srgb, var(--st-tone) 12%, var(--surface)) 0%, var(--surface) 60%); }
.int-hook .adm-tile { width: 54px; height: 54px; border-radius: 50%; }
.int-hook .adm-tile .icon { width: 26px; height: 26px; }
.int-hook-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.int-hook-text p { margin: 0; }
.int-hook .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.int-hook .code { flex: 1 1 260px; min-height: 46px; display: flex; align-items: center; padding: 8px 16px; border-radius: 12px; border-color: var(--st-line); background: var(--surface-2); font-size: calc(14px * var(--fs, 1)); color: var(--text); overflow-wrap: anywhere; }
.int-form { padding: 0; overflow: hidden; }
.int-body { display: flex; flex-direction: column; gap: 16px; padding: 18px 22px 20px; }
.int-note { display: flex; align-items: center; gap: 14px; margin: 0; padding: 8px 14px 8px 8px; border: 1px solid color-mix(in srgb, var(--info) 45%, var(--border)); border-radius: 12px;
  background: color-mix(in srgb, var(--info) 10%, var(--surface)); color: color-mix(in srgb, var(--info) 75%, var(--text)); font-weight: 500; }
[dir="rtl"] .int-note { padding: 8px 8px 8px 14px; }
.int-note .adm-tile { width: 40px; height: 40px; border-radius: 10px; }
.int-grid { gap: 18px 28px; }
.int-field { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.int-field .set-tile { margin-block-start: 2px; }
.int-field > label { display: flex; flex-direction: column; gap: 7px; min-width: 0; font-weight: 600; }
.int-field > label > input, .int-field > label > select, .int-field > label .pw-wrap input, .int-field > label > * > input[type="password"], .int-field > label > * > input[type="text"] {
  min-height: 46px; border-radius: 12px; border-color: var(--st-line); background-color: var(--surface-2); font-weight: 500; }
.int-field .int-meta { display: inline-flex; align-items: center; gap: 7px; font-weight: 400; font-size: calc(13px * var(--fs, 1)); }
.int-field .int-meta .icon { width: 15px; height: 15px; }
.int-field .check { font-weight: 400; color: var(--text-2); }
.int-page .test-result { padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--st-line); }
.int-page .modal-actions { margin-block-start: 0; border-block-start-color: var(--st-line); }
.int-page #google-usage-slot:empty { display: none; }
@media (max-width: 860px) { .int-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .int-hook { flex-wrap: wrap; padding: 14px 16px; }
  .int-hook .adm-tile { width: 44px; height: 44px; }
  .int-body { padding: 14px 16px 16px; }
  .int-page .modal-actions .btn { flex: 1 1 auto; }
}

/* Delivery zones page (owner 2026-10-08) */
.zn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 16px; align-items: start; }
.zn-map-card { padding: 10px; display: flex; flex-direction: column; gap: 9px; }
.zn-tools, .zn-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.zn-bar label { display: flex; flex-direction: column; gap: 4px; min-width: 150px; font-weight: 600; }
.zn-bar label.grow { flex: 1 1 220px; }
.zn-tools .btn[aria-pressed="true"] { border-color: var(--st-green); box-shadow: 0 0 0 1px var(--st-green); color: var(--text); }
.zn-map { height: min(68vh, 640px); min-height: 380px; border-radius: 12px; border: 1px solid var(--st-line); overflow: hidden; z-index: 0; }
.zn-map-sm { height: 340px; min-height: 260px; }
.zn-hint { margin: 0; min-height: 1.4em; }
/* Full screen for drawing: the map and the form fill the window (under the pop-up questions and messages). */
.zn-grid.zn-max { position: fixed; inset: 0; z-index: 1600; margin: 0; padding: 12px; background: var(--bg); grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); align-items: stretch; overflow: auto; }
.zn-grid.zn-max .zn-map-card { min-height: 0; }
.zn-grid.zn-max .zn-map { flex: 1 1 auto; height: auto; min-height: 320px; }
.zn-grid.zn-max .zn-side { max-height: none; }
body.zn-max-open { overflow: hidden; }
.zn-tools .btn#zn-full[aria-pressed="true"] { border-color: var(--st-green); box-shadow: 0 0 0 1px var(--st-green); }
@media (max-width: 1000px) { .zn-grid.zn-max { grid-template-columns: 1fr; } .zn-grid.zn-max .zn-map { min-height: 62vh; } }
.map-google-btn { padding: 6px 12px; border: 1px solid rgba(0, 0, 0, .25); border-radius: 8px; background: #fff; color: #1f2937; font: 600 12.5px/1.2 inherit; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.map-google-btn:hover { background: #f3f4f6; }
/* Dashboard: the live map before the user asks for it */
.map-idle { height: 100%; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; background: var(--surface-2); color: var(--text-2); }
.map-idle p { margin: 0; max-width: 420px; }
.map-idle .adm-tile { width: 48px; height: 48px; border-radius: 14px; }
.map-idle .adm-tile .icon { width: 24px; height: 24px; }
.zn-search { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.zn-search .rd-search { flex: 1 1 240px; width: auto; }
.zn-search .rd-search input { min-height: 44px; background: var(--surface-2); border-color: var(--st-line); }
.zn-results { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; }
.zn-results[hidden] { display: none; }
.zn-results p { margin: 0; }
.zn-result { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border: 1px solid var(--st-line); border-radius: 10px; background: var(--surface-2); color: inherit; font: inherit; text-align: start; cursor: pointer; }
.zn-result:hover { border-color: var(--primary); }
.zn-result .icon { width: 16px; height: 16px; }
.zn-side { display: flex; flex-direction: column; gap: 10px; max-height: min(78vh, 760px); overflow: auto; padding-inline-end: 2px; }
.zn-card { padding: 10px 11px; display: flex; flex-direction: column; gap: 7px; border-inline-start: 4px solid var(--zn, var(--primary)) !important; transition: box-shadow .2s; }
.zn-card.flash { box-shadow: 0 0 0 2px var(--zn, var(--primary)); }
.zn-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zn-card-line { display: flex; align-items: flex-start; gap: 8px; font-size: .93rem; }
.zn-card-line .icon { width: 16px; height: 16px; margin-block-start: 3px; }
.zn-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.zn-dot { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--zn, var(--primary)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--zn, var(--primary)) 30%, transparent); }
.zn-form { padding: 16px; }
.zn-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; }
.zn-form input[type="color"] { width: 100%; height: 42px; padding: 3px; }
.zn-problems { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-weight: 600; }
.zn-problems[hidden] { display: none; }
.zn-vertex { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid #0e9f5c; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); cursor: grab; }
.zn-mid { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #0e9f5c; color: #fff; font: 700 14px/1 system-ui, sans-serif; opacity: .8; cursor: pointer; }
.zn-mid:hover { opacity: 1; }
.zn-history { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 14px; }
.zn-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow: auto; }
.zn-history-item { width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: inherit; font: inherit; text-align: start; cursor: pointer; }
.zn-history-item[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.zn-page table .num { text-align: end; }
@media (max-width: 1000px) { .zn-grid, .zn-history { grid-template-columns: 1fr; } .zn-side { max-height: none; } .zn-map { height: 56vh; } }

/* ---------- Returns (owner 2026-10-09) ---------- */
.badge.ret-Partial { background: var(--warning-soft); color: var(--warning); }
.badge.ret-Full { background: var(--violet-soft); color: var(--violet); }
.rt-find .cu-bar { margin-block: 14px 0; }
.rt-find .st-card-head p { margin: 2px 0 0; }
.rt-list-title { margin: 26px 0 12px; font-size: calc(18px * var(--fs, 1)); }
.rt-orders { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rt-order { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.rt-order-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rt-order-main > strong { font-size: calc(16px * var(--fs, 1)); }
.rt-why { font-size: calc(13px * var(--fs, 1)); }
.rt-note { max-width: 320px; white-space: normal; }
.rt-label { display: block; font-weight: 600; margin-block-end: 8px; }
.rt-seg .seg-btn:disabled { opacity: .45; cursor: not-allowed; }
.rt-hint { display: block; margin: 8px 0 0; font-size: calc(13px * var(--fs, 1)); font-weight: 400; }
.rt-blocked { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--warning-soft); color: var(--warning); font-weight: 600; }
.rt-check { align-self: flex-end; min-height: 44px; }
.rt-page #return-filter select { min-height: 48px; }

/* ---------- Items catalogue (owner 2026-10-09) ---------- */
.it-grid { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 18px; align-items: start; }
.it-rail { padding: 16px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; max-height: calc(100vh - 40px); }
.it-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.it-rail-head h2 { margin: 0; font-size: calc(16px * var(--fs, 1)); }
.it-cats { list-style: none; margin: 0; padding: 0; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.it-cat { display: flex; align-items: center; gap: 4px; border-radius: 10px; }
.it-cat.is-sub { margin-inline-start: 16px; }
.it-cat.is-on { background: var(--primary-soft); }
.it-cat.is-off .it-cat-name { opacity: .55; text-decoration: line-through; }
.it-cat-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; padding: 9px 10px; border-radius: 10px; cursor: pointer; text-align: start; }
.it-cat-name:hover { background: var(--surface-3); }
.it-cat-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-cat-count { font-size: calc(12px * var(--fs, 1)); color: var(--muted); font-weight: 600; }
.it-cat .row-actions { opacity: 0; transition: opacity .12s; }
.it-cat:hover .row-actions, .it-cat:focus-within .row-actions { opacity: 1; }
.it-kpi { border: 0; cursor: pointer; text-align: start; font: inherit; color: inherit; }
.it-kpi.is-on { outline: 2px solid var(--primary); outline-offset: 2px; }
.it-bulk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-block-end: 12px; border-radius: 12px; background: var(--primary-soft); font-weight: 600; }
.it-bulk-row { display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); gap: 10px; align-items: center; }
.it-with-btn { display: flex; gap: 8px; align-items: center; }
.it-with-btn select { flex: 1 1 auto; min-width: 0; }
.it-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.it-hint { display: block; font-size: calc(12px * var(--fs, 1)); font-weight: 400; margin-top: 4px; }
.it-barcode-add { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.it-barcode-add input:not([type=checkbox]) { flex: 1 1 180px; }
.it-barcodes { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.it-barcodes li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; }
.it-barcodes li > span:first-child { flex: 1 1 auto; font-weight: 600; letter-spacing: .5px; }
.it-vat { margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.it-audit { font-size: calc(12px * var(--fs, 1)); margin: 8px 0 0; }
@media (max-width: 1000px) { .it-grid { grid-template-columns: 1fr; } .it-rail { position: static; max-height: 320px; } .it-two, .it-bulk-row { grid-template-columns: 1fr; } }

/* Item extras (owner 2026-10-09) */
.it-x-item { margin: 0 0 10px; }
#item-x-body { margin-top: 14px; }
#item-x-body table input:not([type=checkbox]), #item-x-body table select, #item-prices-form table input { min-height: 36px; padding-block: 6px; min-width: 90px; }
.it-attr { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 0; }
.it-attr legend { font-weight: 700; padding-inline: 6px; }
.it-attr-values { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.it-attr-value { font-weight: 500; }
.it-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border); display: inline-block; }
.it-attr-add { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.it-attr-add input:not([type=color]) { flex: 1 1 180px; min-height: 36px; padding-block: 6px; }
.it-attr-add input[type=color] { width: 44px; height: 36px; padding: 2px; }
.it-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.it-notes li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; flex-wrap: wrap; }
.it-note-text { flex: 1 1 240px; }
.it-kit-found { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.it-picture { display: grid; place-items: center; margin-block-end: 12px; }
.it-picture img { max-width: 100%; max-height: 320px; border-radius: 12px; border: 1px solid var(--border); }

/* ---------- Warehouses (owner 2026-10-09) ---------- */
.wh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.wh-panel { padding: 13px; display: flex; flex-direction: column; gap: 9px; }
.wh-hint { margin: 0; font-size: calc(13px * var(--fs, 1)); }
.wh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow: auto; }
.wh-row { display: flex; align-items: center; gap: 6px; border-radius: 10px; border: 1px solid transparent; }
.wh-row.is-on { background: var(--primary-soft); border-color: var(--primary); }
.wh-row.is-off .wh-row-name strong { opacity: .55; text-decoration: line-through; }
.wh-row-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; background: transparent; color: inherit; font: inherit; padding: 9px 10px; border-radius: 10px; text-align: start; }
button.wh-row-name { cursor: pointer; }
button.wh-row-name:hover { background: var(--surface-3); }
.wh-row-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wh-empty { padding: 14px 10px; }
.wh-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wh-plan-stats { display: flex; gap: 8px; margin-block-end: 12px; }
.wh-plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.wh-plan-section { border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.wh-plan-section h3 { margin: 0 0 10px; font-size: calc(15px * var(--fs, 1)); }
.wh-plan-bins { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.wh-plan-bin { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; font-size: calc(12px * var(--fs, 1)); border: 1px solid var(--border); background: var(--surface-2); }
.wh-plan-bin.cond-cold { background: #e0f2fe; color: #075985; border-color: #7dd3fc; }
.wh-plan-bin.cond-frozen { background: #e0e7ff; color: #3730a3; border-color: #a5b4fc; }
.wh-plan-bin.cond-dry { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.wh-plan-bin.cond-hazardous { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.wh-plan-bin.cond-humidity { background: #ccfbf1; color: #115e59; border-color: #5eead4; }
.wh-plan-bin.cond-ambient { background: #dcfce7; color: #166534; border-color: #86efac; }
.wh-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wh-legend .wh-plan-bin { flex-direction: row; }
@media (max-width: 700px) { .wh-sizes { grid-template-columns: 1fr; } }

/* ---------- Stock and stock documents (owner 2026-10-09) ---------- */
.inv-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-block: 16px; }
.inv-chart { padding: 16px; }
.inv-chart h2 { margin: 0 0 10px; font-size: calc(15px * var(--fs, 1)); }
.inv-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.inv-bars li { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(60px, 2fr) auto; gap: 10px; align-items: center; font-size: calc(13px * var(--fs, 1)); }
.inv-bars li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-bar { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.inv-bar i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.inv-totals { margin: 10px 4px 0; }
.inv-page .cu-bar select { min-height: 48px; }
.inv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.inv-kpi { display: flex; flex-direction: column; gap: 4px; padding: 10px 11px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.inv-kpi span { font-size: calc(12px * var(--fs, 1)); color: var(--muted); font-weight: 600; }
.inv-kpi b { font-size: calc(17px * var(--fs, 1)); }
.inv-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 16px; }
.mov-grid { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 14px; }
.mov-list { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.mov-list .wh-list { max-height: 70vh; }
.mov-list .wh-row-name { flex-direction: column; align-items: stretch; gap: 4px; }
.mov-list .wh-row-name > span { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mov-work { padding: 18px; display: flex; flex-direction: column; gap: 12px; min-height: 240px; }
.mov-doc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mov-doc-head h2 { margin: 0; font-size: calc(18px * var(--fs, 1)); }
.mov-add { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.mov-add label { display: flex; flex-direction: column; gap: 5px; font-size: calc(12px * var(--fs, 1)); font-weight: 600; color: var(--muted); flex: 1 1 120px; }
.mov-add label.grow { flex: 2 1 240px; }
.mov-add input, .mov-add select { min-height: 38px; padding-block: 7px; }
@media (max-width: 1000px) { .mov-grid { grid-template-columns: 1fr; } }

/* Stock counts (owner 2026-10-09): the count sheet. */
.cnt-up { color: var(--st-green); } .cnt-down { color: var(--danger); }
#cnt-lines input { min-width: 90px; } #cnt-lines .cnt-qty { max-width: 130px; }

/* Daily count and stock reports (owner 2026-10-09). */
.daily-tracked-list { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 6px; max-height: 45vh; overflow: auto; }
.daily-tracked-list li > span:first-child { margin-inline-end: 10px; } .daily-tracked-list li { display: list-item; }
.daily-tracked-list .row-actions { float: inline-end; }
#daily-lines .daily-qty { max-width: 110px; min-width: 80px; } #daily-lines input:not(.daily-qty) { min-width: 120px; }
.daily-day th { text-align: start; background: color-mix(in srgb, var(--st-green) 10%, var(--surface)); }
.daily-total th { background: var(--surface-2, var(--surface)); }
.rpt-chips { margin-block: 12px 4px; } .rpt-summary h2 { margin: 12px 16px 0; font-size: calc(15px * var(--fs, 1)); }
.inv-page td.num, .inv-page th.num { text-align: end; direction: ltr; unicode-bidi: plaintext; white-space: nowrap; }
.inv-page .cu-bar label { display: flex; flex-direction: column; gap: 4px; font-size: calc(12px * var(--fs, 1)); font-weight: 600; color: var(--muted); }

/* The ledger (owner 2026-10-09). */
.led-group td { background: color-mix(in srgb, var(--st-green) 6%, var(--surface)); }
#led-accounts tr.is-off td { opacity: .6; }
#jv-entry select { min-width: 220px; } #jv-entry input:not(.daily-qty) { min-width: 140px; } #jv-entry .daily-qty { max-width: 130px; min-width: 90px; }
#led-trial thead th { text-align: center; }

/* Purchase invoices (owner 2026-10-09): the totals sit under the lines, at the end side. */
.pur-totals { max-width: 380px; margin-inline-start: auto; margin-top: 12px; }
.pur-totals dd { text-align: end; }

/* Label printing setup (owner 2026-10-09): the form beside a live preview of the label. */
.lbl-work { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.lbl-grid { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); }
.lbl-four { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
/* The filter chips of the stock, purchase and label pages (they had no style of their own). */
.st-page .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.st-page .chips .chip { border: 1px solid var(--border); background: var(--surface); color: inherit; border-radius: 999px; padding: 5px 14px; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; }
.st-page .chips .chip:hover { border-color: var(--primary); }
.st-page .chips .chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.st-page .cu-bar .chips { margin: 0; flex-wrap: nowrap; }

/* Owner 2026-10-09: the "Print items" menu is the FIRST button of its row, so it opens from its own start edge.
   (Opening from the end edge, as the filter menus at the end of a row do, pushed it under the side menu.) */
#item-print .rd-filter-menu { inset-inline-end: auto; inset-inline-start: 0; }
.lbl-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lbl-lines li { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; }
.lbl-lines .lbl-line-name { flex: 1 1 160px; font-weight: 600; }
.lbl-lines .lbl-line-size { display: flex; align-items: center; gap: 6px; }
.lbl-lines .lbl-line-size input { width: 70px; }
.lbl-preview-box { position: sticky; top: 12px; }
.lbl-preview { background: #d9dde3; padding: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 8px rgba(0, 0, 0, .25); }
.lbl-preview-scale { transform-origin: top left; }
[dir="rtl"] .lbl-preview-scale { transform-origin: top right; }
.lbl-help { padding: 10px 12px; font-size: calc(12px * var(--fs, 1)); }
@media (max-width: 1100px) { .lbl-work { grid-template-columns: 1fr; } .lbl-preview-box { position: static; } }

/* Stock page (owner 2026-10-09, screenshot): six tiles in two even rows of three; a long amount keeps clear of the
   small chart mark (which leaves when the tile is narrow); the two tiles that had no colour of their own get one. */
.rd-kpi.tone-rose { --tone: #e11d48; }
.rd-kpi.tone-cyan { --tone: #0891b2; }
#stock-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#stock-kpis .rd-kpi { container-type: inline-size; min-height: 83px; }
#stock-kpis .rd-kpi-text { flex: 1 1 auto; padding-inline-end: 64px; }
#stock-kpis .rd-kpi-text b { font-size: calc((clamp(20px, 1.9vw, 30px)) * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
#stock-kpis .it-kpi.is-on { outline-offset: -2px; }
@container (max-width: 300px) {
  #stock-kpis .rd-kpi-deco { display: none; }
  #stock-kpis .rd-kpi-text { padding-inline-end: 0; }
}
@media (max-width: 1100px) { #stock-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { #stock-kpis { grid-template-columns: minmax(0, 1fr); } }

/* The charts under the tiles: each card as tall as its own content, names in full (two lines at most), figures in a
   straight column, thicker bars, and the "Others" line set apart. */
.inv-charts { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.inv-chart { padding: 18px 20px; }
.inv-chart h2 { margin: 0 0 14px; font-size: calc(16px * var(--fs, 1)); }
.inv-bars { gap: 11px; }
.inv-bars li { grid-template-columns: minmax(110px, 42%) minmax(60px, 1fr) minmax(max-content, auto); gap: 12px; font-size: calc(13.5px * var(--fs, 1)); }
.inv-bars li > span.inv-bar-name { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; line-height: 1.3; }
.inv-bars li > b { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-bar { height: 10px; }
.inv-bars li.inv-rest { padding-top: 10px; border-top: 1px dashed var(--border); color: var(--muted); }
.inv-bars li.inv-rest .inv-bar i { background: var(--muted); opacity: .55; }

/* Stock reports (owner reference 2026-10-09): the reports as tabs, the filters in a card with a label over every
   field, the results in a card with Export, Print and a search. */
.rpt-page .rpt-chips { margin: 4px 0 16px; gap: 10px; }
.rpt-page .rpt-chips .chip { padding: 9px 18px; font-size: .92rem; }
.rpt-card { padding: 15px 16px 16px; margin-block-end: 18px; }
.rpt-card-head { display: flex; align-items: center; gap: 14px; margin-block-end: 16px; flex-wrap: wrap; }
.rpt-card-head > div:nth-child(2) { flex: 1 1 260px; min-width: 0; }
.rpt-card-head h2 { margin: 0; font-size: 1.12rem; font-weight: 800; }
.rpt-card-head h2 .muted { font-weight: 600; font-size: .95rem; }
.rpt-card-head p { margin: 2px 0 0; font-size: .9rem; }
.rpt-card-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: var(--primary); }
.rpt-card-icon.tone-blue { background: #2f80ed; }
.rpt-card-icon.tone-green { background: #16a34a; }
.rpt-card-icon .icon { width: 24px; height: 24px; }
.rpt-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 18px; align-items: end; }
.rpt-field { grid-column: span 2; display: flex; flex-direction: column; gap: 6px; min-width: 0; font-weight: 600; font-size: .9rem; color: var(--text); }
.rpt-field.rpt-wide { grid-column: span 3; }
.rpt-field > span:first-child { color: var(--text-2, var(--muted)); }
.rpt-field input, .rpt-field select { width: 100%; min-height: 46px; }
.rpt-search { position: relative; display: block; }
.rpt-search .icon { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.rpt-search input { width: 100%; min-height: 46px; padding-inline-start: 40px; }
/* Reset and Run sit at the end of the last row of fields when there is room there, else on a row of their own. */
.rpt-actions { grid-column: span 3 / -1; display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.rpt-actions .btn { min-height: 46px; padding-inline: 22px; display: inline-flex; align-items: center; gap: 8px; }
.rpt-actions .btn .icon, .rpt-tools .btn .icon { width: 18px; height: 18px; }
.rpt-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-inline-start: auto; }
.rpt-tools .btn { min-height: 42px; display: inline-flex; align-items: center; gap: 8px; }
.rpt-result-search { width: 260px; max-width: 100%; }
.rpt-result-search input { min-height: 42px; }
.rpt-card .rd-table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.rpt-card .rpt-summary { margin-block-end: 14px; }
.rpt-card .rpt-summary h3 { margin: 0; padding: 12px 16px 4px; font-size: .95rem; }
.rpt-card #rpt-rows tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2, #f6f8fa) 55%, transparent); }
.rpt-card #rpt-rows td.num, .rpt-card #rpt-rows th.num { font-variant-numeric: tabular-nums; }
.rpt-card .empty { padding: 34px 16px; text-align: center; color: var(--muted); }
@media (max-width: 1100px) { .rpt-field, .rpt-field.rpt-wide { grid-column: span 3; } .rpt-actions { grid-column: 1 / -1; } }
@media (max-width: 640px) { .rpt-field, .rpt-field.rpt-wide { grid-column: 1 / -1; } .rpt-tools { margin-inline-start: 0; width: 100%; } .rpt-result-search { width: 100%; } }

/* ---------- Daily count (owner reference 2026-10-09): filter card, even tiles, the lines in a card ---------- */
.dc-page .st-hero { margin-block-end: 16px; }
.dc-page .st-hero .rd-title { flex: 1 1 320px; min-width: 0; }
.dc-page .rd-actions { margin-inline-start: auto; }
.dc-page .rd-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding-inline: 18px; border-radius: 12px; font-weight: 600; }
.dc-page .rd-actions .btn .icon { width: 19px; height: 19px; }
.dc-page .st-tabs { padding: 0; border: 0; background: none; box-shadow: none; gap: 10px; margin-block-end: 16px; }
.dc-page .st-tab { min-height: 48px; padding-inline: 20px; background: var(--surface); font-weight: 700; }
.dc-page .rpt-card-head h2 { font-size: 1.15rem; font-weight: 800; }
.dc-status { margin-inline-start: auto; white-space: normal; text-align: center; }
.dc-kpis { gap: 18px; margin-block-end: 18px; }
.dc-kpis .rd-kpi { container-type: inline-size; min-height: 83px; }
.dc-kpis .rd-kpi-text { flex: 1 1 auto; padding-inline-end: 60px; }
.dc-kpis .rd-kpi-text > span { white-space: normal; line-height: 1.25; }
.dc-kpis .rd-kpi-text b { font-size: calc((clamp(20px, 1.9vw, 30px)) * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
@container (max-width: 280px) {
  .dc-kpis .rd-kpi-deco { display: none; }
  .dc-kpis .rd-kpi-text { padding-inline-end: 0; }
}
@media (max-width: 1100px) { .dc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dc-kpis { grid-template-columns: minmax(0, 1fr); } }
.dc-page .rpt-card thead th { white-space: nowrap; text-transform: uppercase; font-size: .74rem; letter-spacing: .04em; }
.dc-page .rpt-card td { vertical-align: middle; }
.dc-page .dc-check { width: 44px; text-align: center; }
.dc-page .dc-check input { width: 18px; height: 18px; min-height: 0; margin: 0; vertical-align: middle; accent-color: var(--st-green, #16a34a); }
.dc-page .dc-name { min-width: 190px; }
.dc-page #daily-lines th, .dc-page #daily-lines td { padding-inline: 10px; }
.dc-page #daily-lines input[type=checkbox] { min-width: 0; width: 18px; }
.dc-page #daily-lines thead th { white-space: normal; line-height: 1.25; }
.dc-page #daily-lines .dc-check { padding-inline: 14px 4px; }
.dc-page #daily-lines .daily-qty { min-width: 72px; max-width: 92px; }
.dc-page #daily-lines input:not(.daily-qty):not([type=checkbox]) { min-width: 110px; }
.dc-page .daily-day th { text-align: start; text-transform: none; letter-spacing: 0; font-size: .92rem; }
.dc-page .daily-day th .badge { margin-inline-start: 8px; text-transform: none; }
.dc-page .daily-total th { text-align: start; text-transform: none; letter-spacing: 0; font-size: .88rem; }
.dc-page [data-line-status] { white-space: nowrap; }
.dc-page #daily-lines tbody tr[hidden], .dc-page #daily-report-lines tbody tr[hidden] { display: none; }
.dc-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 16px; text-align: center; color: var(--muted); }
.dc-empty .icon { width: 44px; height: 44px; opacity: .55; }
.dc-empty strong { color: var(--text); font-size: 1rem; }
.dc-empty span { font-size: .88rem; }
.dc-none-found, .dc-hint { margin: 12px 4px 0; }
.dc-report-actions { align-items: center; }
.dc-report-actions .chips { margin: 0; margin-inline-end: auto; }
@media (max-width: 640px) { .dc-page .rd-actions { width: 100%; } .dc-page .rd-actions .btn { flex: 1 1 auto; } .dc-status { margin-inline-start: 0; } }

/* ---------- Returns: total returns summary (owner 2026-10-09) ---------- */
.rt-summary { margin-block: 6px 16px; }
.rt-summary .rt-list-title .muted { font-weight: 600; font-size: .95rem; }
.rt-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-block-end: 8px; }
.rt-kpis .rd-kpi { min-height: 79px; padding: 10px 11px; gap: 10px; }
.rt-kpis .rd-kpi-icon { width: 40px; height: 40px; }
.rt-kpis .rd-kpi-icon .icon { width: 24px; height: 24px; }
.rt-kpis .rd-kpi-text { flex: 1 1 auto; }
.rt-kpis .rd-kpi-text > span { white-space: normal; line-height: 1.25; font-size: calc(14px * var(--fs, 1)); }
.rt-kpis .rd-kpi-text b { font-size: calc((clamp(18px, 1.6vw, 26px)) * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.rt-sum-note { margin: 0 2px; font-size: .86rem; }
@media (max-width: 1500px) { .rt-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .rt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .rt-kpis { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Label printing (owner reference 2026-10-09): templates | settings | preview, then the lines, then a bar ---------- */
.lbl-page .st-hero { margin-block-end: 14px; }
.lbl-page .st-hero .rd-title { flex: 1 1 320px; min-width: 0; }
.lbl-page .rd-actions { margin-inline-start: auto; }
.lbl-page #lbl-new { min-height: 48px; padding-inline: 26px; border-radius: 12px; display: inline-flex; align-items: center; gap: 9px; }
.lbl-kinds { display: flex; flex-wrap: wrap; gap: 10px; margin-block-end: 16px; }
.lbl-kind { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  color: var(--text); font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; }
.lbl-kind .icon { width: 19px; height: 19px; }
.lbl-kind:hover { border-color: var(--st-green, #16a34a); }
.lbl-kind.active { background: linear-gradient(180deg, #22c55e, #16a34a); border-color: #16a34a; color: #fff; box-shadow: 0 8px 18px -10px #16a34a; }
.lbl-kind:focus-visible, .lbl-row-open:focus-visible, .lbl-row-more:focus-visible, .lbl-move:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lbl-top { display: grid; grid-template-columns: minmax(250px, 23fr) minmax(0, 40fr) minmax(280px, 26fr); gap: 14px; align-items: stretch; margin-block-end: 14px; }
.lbl-card { padding: 18px 20px; min-width: 0; }
.lbl-page .lbl-card h2 { margin: 0; font-size: 1.15rem; font-weight: 800; line-height: 1.3; }
.lbl-templates { display: flex; flex-direction: column; gap: 12px; padding-inline: 12px; }
.lbl-templates h2 { padding-inline: 10px; }
.lbl-search input { min-height: 42px; background: var(--surface-2, #f6f8fa); }
.lbl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lbl-row { position: relative; display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid transparent; border-radius: 12px; }
.lbl-row + .lbl-row { border-block-start-color: var(--border); border-start-start-radius: 0; border-start-end-radius: 0; }
.lbl-row.is-on, .lbl-row.is-on + .lbl-row { border-radius: 12px; }
.lbl-row.is-on { border-color: var(--st-green, #16a34a); background: color-mix(in srgb, var(--st-green, #16a34a) 14%, var(--surface)); }
.lbl-row.is-on + .lbl-row { border-block-start-color: transparent; }
.lbl-row[hidden] { display: none; }
.lbl-row-open { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 10px 8px; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; border-radius: 10px; }
.lbl-row-tile { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--muted); }
.lbl-row-tile .icon { width: 22px; height: 22px; }
.lbl-row-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lbl-row-text strong { font-size: .95rem; overflow-wrap: anywhere; }
.lbl-row-text .muted { font-size: .86rem; }
.lbl-default { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: 2px 9px; border-radius: 999px; background: #16a34a; color: #fff; font-size: .72rem; font-weight: 700; }
.lbl-default .icon { width: 12px; height: 12px; }
.lbl-default-big { align-self: center; padding: 5px 12px; font-size: .8rem; background: color-mix(in srgb, #16a34a 16%, var(--surface)); color: #15803d; }
.lbl-default-big .icon { width: 15px; height: 15px; }
.lbl-row-more { flex: none; width: 34px; height: 38px; border: 0; border-radius: 8px; background: none; color: var(--text); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.lbl-row-more:hover { background: var(--surface-2, #f1f5f9); }
.lbl-menu { top: calc(100% - 4px); inset-inline-end: 6px; display: flex; flex-direction: column; min-width: 170px; }
.lbl-menu[hidden] { display: none; }
.lbl-menu button.danger { color: var(--danger, #dc2626); }
.lbl-help { margin: auto 10px 0; font-size: calc(12px * var(--fs, 1)); }
.lbl-config-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-block-end: 12px; }
.lbl-kind-name { color: var(--muted); font-weight: 700; }
.lbl-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-weight: 600; font-size: .9rem; }
.lbl-field input, .lbl-field select { width: 100%; min-height: 42px; }
.lbl-field.lbl-wide { margin-block-end: 12px; }
.lbl-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; align-items: end; }
.lbl-check { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; font-weight: 600; font-size: .9rem; }
.lbl-check input, .lbl-lines input[type=checkbox] { width: 20px; height: 20px; min-height: 0; margin: 0; flex: none; accent-color: #16a34a; }
.lbl-preview-card { display: flex; flex-direction: column; gap: 12px; }
.lbl-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lbl-page .lbl-preview-head h2 { font-size: 1rem; }
.lbl-preview-head select { width: auto; min-height: 36px; padding-block: 4px; }
.lbl-preview-area { flex: 1 1 auto; display: flex; justify-content: center; align-items: flex-start; overflow: auto; max-height: 560px; min-width: 0; }
.lbl-page .lbl-preview { flex: none; background: #fff; border: 1px solid #94a3b8; border-radius: 4px; box-shadow: 0 2px 10px rgba(15, 23, 42, .14); }
.lbl-preview-hint { margin: 0; font-size: .8rem; text-align: center; }
.lbl-lines-card { margin-block-end: 14px; }
.lbl-lines-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-block-end: 12px; }
.lbl-lines-head p { margin: 0; font-size: .86rem; }
.lbl-page .lbl-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--lbl-rows, 5), auto); grid-auto-flow: column; gap: 6px 28px; }
.lbl-page .lbl-lines li { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); min-width: 0; }
.lbl-lines li.is-dragging { opacity: .45; } .lbl-lines li.is-over { border-color: #16a34a; box-shadow: 0 0 0 2px color-mix(in srgb, #16a34a 30%, transparent); }
.lbl-grip { flex: none; width: 22px; text-align: center; color: var(--muted); cursor: grab; user-select: none; }
.lbl-move { flex: none; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; line-height: 1; cursor: pointer; }
.lbl-move:hover:not(:disabled) { border-color: #16a34a; } .lbl-move:disabled { opacity: .35; cursor: default; }
.lbl-page .lbl-lines .lbl-line-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; margin-inline-start: 10px; font-weight: 700; font-size: .88rem; }
.lbl-page .lbl-lines .lbl-line-size { flex: none; display: flex; align-items: center; gap: 10px; font-size: .86rem; color: var(--muted); }
.lbl-page .lbl-lines .lbl-line-size input { width: 84px; min-height: 30px; padding-block: 3px; color: var(--text); }
.lbl-line-bold { flex: none; display: flex; align-items: center; gap: 10px; margin-inline-start: 26px; font-size: .86rem; }
.lbl-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 4px 12px; }
.lbl-bar-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-inline-start: auto; }
.lbl-bar-actions .btn { min-height: 46px; padding-inline: 24px; border-radius: 12px; display: inline-flex; align-items: center; gap: 9px; font-weight: 700; }
.lbl-bar-actions .btn .icon { width: 19px; height: 19px; }
@media (max-width: 1500px) { .lbl-top { grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); } .lbl-preview-card { grid-column: 1 / -1; } .lbl-line-bold { margin-inline-start: 8px; } }
@media (max-width: 1150px) { .lbl-page .lbl-lines { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; } }
@media (max-width: 900px) { .lbl-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .lbl-two { grid-template-columns: minmax(0, 1fr); } .lbl-page .lbl-lines li { flex-wrap: wrap; } .lbl-page .lbl-lines .lbl-line-name { flex-basis: 50%; }
  .lbl-bar-actions { width: 100%; } .lbl-bar-actions .btn { flex: 1 1 auto; justify-content: center; } .lbl-page .rd-actions { width: 100%; } .lbl-page #lbl-new { width: 100%; justify-content: center; } }

/* ---------- Riders: rejected applications (owner 2026-10-10) ---------- */
.rd-rejected-note { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-block-end: 16px; border-inline-start: 4px solid var(--danger, #dc2626); }
.rd-rejected-note .icon { width: 22px; height: 22px; flex: none; color: var(--danger, #dc2626); }
.rd-rejected-note span { flex: 1 1 240px; font-weight: 600; }
.rd-reject-reason { max-width: 380px; white-space: normal; overflow-wrap: anywhere; }
#rider-reject-form textarea { width: 100%; resize: vertical; }

/* Label printing: the preview with a real item / order, and what the template name is (owner 2026-10-10) */
.lbl-real { display: flex; gap: 8px; align-items: center; }
.lbl-real .rpt-search { flex: 1 1 auto; min-width: 0; }
.lbl-real .rpt-search input { min-height: 40px; }
.lbl-real .btn { min-height: 40px; flex: none; }
.lbl-real-note { margin: 0; font-size: .82rem; overflow-wrap: anywhere; }
.lbl-real-note .btn-link { border: 0; background: none; padding: 0; color: var(--primary); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }
.lbl-name-hint { font-weight: 400; font-size: .8rem; }
.lbl-preview-of { margin: 0; font-weight: 800; font-size: .95rem; overflow-wrap: anywhere; }
/* Packing (owner 2026-10-10) */
.badge.Packed { background: #ccfbf1; color: #0f766e; }
:root[data-theme="dark"] .badge.Packed { background: rgba(45, 212, 191, .18); color: #5eead4; }
.pack-mark { font-size: .7rem; }
.pack-with { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; white-space: nowrap; }
.pack-with svg { width: 14px; height: 14px; }
.pack-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; }
.pack-photo { margin: 0; }
.pack-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); cursor: zoom-in; background: var(--surface-2, #f1f5f9); }
.pack-photo figcaption { font-size: .72rem; margin-top: .2rem; overflow-wrap: anywhere; }
.pack-photo-count { display: inline-flex; align-items: center; gap: .25rem; }
.pack-photo-count svg { width: 15px; height: 15px; }
.pack-table .row-actions { flex-wrap: nowrap; }
/* A cross in every text box (owner 2026-10-10): one press empties the box. */
input.has-clear, textarea.has-clear {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%2394a3b8'/%3E%3Cpath d='M6.6 6.6l6.8 6.8M13.4 6.6l-6.8 6.8' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 16px 16px; background-position: right 6px center;
}
input.has-clear:not(.clear-left), textarea.has-clear:not(.clear-left) { padding-right: 28px; }
input.has-clear.clear-left, textarea.has-clear.clear-left { background-position: left 6px center; padding-left: 28px; }
input[type=number].has-clear:not(.clear-left) { background-position: right 24px center; padding-right: 46px; }
input[type=number].has-clear.clear-left { background-position: left 24px center; padding-left: 46px; }
textarea.has-clear { background-position: right 6px top 6px; }
textarea.has-clear.clear-left { background-position: left 6px top 6px; }
input.has-clear.on-clear, textarea.has-clear.on-clear { cursor: pointer; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }

/* Removing a rider (owner 2026-10-11): what the removal touches, listed before the confirmation. */
.remove-impact { margin: 0 0 18px; padding-inline-start: 20px; line-height: 1.7; font-size: calc(14px * var(--fs, 1)); }
.remove-impact li + li { margin-top: 4px; }



/* ===== Customers page on every screen size (owner 2026-10-11, B19) ===== */
/* Large screens: the page uses the whole width beside the menu (it was capped at 1600px, leaving the right side empty). */
.page:has(#customers-table) { max-width: none; }
#customers-table table { width: 100%; }
#customers-table .row-actions.inline { display: flex; flex-wrap: nowrap; justify-content: flex-end; }
#customers-table th:last-child { text-align: end; }
/* Owner 2026-10-12: the Customers cards are the standard summary cards (same height as Riders, Orders, ...). A wide
   card keeps the bars at its end; a narrow one (4 beside each other on a laptop) leaves them out so that the label has
   the whole line, and its growth note sits beside the number instead of on the label. */
#customer-kpis .rd-kpi { container-type: inline-size; min-height: 79px; }
#customer-kpis .rd-kpi-text { flex: 1 1 auto; padding-inline-end: 58px; }
#customer-kpis .rd-kpi-text > span { white-space: normal; line-height: 1.25; padding-inline-end: 0; }
@container (max-width: 300px) {
  #customer-kpis .rd-kpi-deco { display: none; }
  #customer-kpis .rd-kpi-text { padding-inline-end: 0; }
  #customer-kpis .rd-kpi-text > span { font-size: calc(13px * var(--fs, 1)); }
  #customer-kpis .cu-growth { top: auto; bottom: 12px; }
}

/* Laptops and tablets: the two least needed columns leave (# and Created - both are in the customer's window),
   so the table fits its card without a sideways scroll. */
@media (max-width: 1200px) {
  #customers-table th:nth-child(1), #customers-table td:nth-child(1),
  #customers-table th:nth-child(6), #customers-table td:nth-child(6) { display: none; }
  #customers-table td:nth-child(5) { min-width: 96px; }
  #customers-table th, #customers-table td { padding-inline: 7px; }
}
@media (max-width: 1100px) {
  .cu-bar { gap: 10px; }
  .cu-search { flex: 1 1 240px; }
  .cu-range input { width: 132px; }
  .cu-apply { padding-inline: 18px; }
}

/* Phones and narrow tablets: every customer is a card; the cards and the filter line are compact. */
@media (max-width: 760px) {
  #customer-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-block-end: 14px; }
  #customer-kpis .rd-kpi { min-height: 62px; padding: 8px 10px; gap: 9px; }
  #customer-kpis .rd-kpi-icon { width: 40px; height: 40px; border-radius: 10px; }
  #customer-kpis .rd-kpi-icon .icon { width: 21px; height: 21px; }
  #customer-kpis .rd-kpi-text { padding-inline-end: 0; }
  #customer-kpis .rd-kpi-text > span { font-size: calc(12.5px * var(--fs, 1)); white-space: normal; line-height: 1.25; }
  #customer-kpis .rd-kpi-text b { font-size: calc(19px * var(--fs, 1)); }
  #customer-kpis .rd-kpi-deco { display: none; }
  #customer-kpis .cu-growth { top: auto; bottom: 8px; inset-inline-end: 10px; font-size: calc(11.5px * var(--fs, 1)); }

  .cu-bar { gap: 10px; margin-block-end: 14px; }
  .cu-bar .cu-search { order: 1; flex: 1 1 100%; }
  .cu-bar .cu-range { order: 2; flex: 1 1 100%; min-width: 0; padding-inline: 10px; }
  .cu-bar .cu-range input { min-width: 0; }
  .cu-bar .rd-filter { order: 3; flex: 1 1 0; }
  .cu-bar .rd-filter > summary { width: 100%; justify-content: center; min-height: 46px; }
  .cu-bar .cu-apply { order: 4; flex: 1 1 0; min-height: 46px; }

  #customers-table .table-scroll { overflow: visible; }
  #customers-table table, #customers-table tbody, #customers-table td { display: block; width: auto; }
  #customers-table thead { display: none; }
  #customers-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 14px; border-block-end: 1px solid var(--border); }
  #customers-table tbody tr:last-child { border-block-end: 0; }
  #customers-table td { padding: 0; border: 0; min-width: 0; white-space: normal; font-size: calc(13.5px * var(--fs, 1)); }
  #customers-table td:nth-child(1) { display: none; }
  #customers-table td:nth-child(2) { grid-column: 1; grid-row: 1; align-self: center; }
  #customers-table td:nth-child(7) { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; }
  #customers-table td:nth-child(3), #customers-table td:nth-child(4), #customers-table td:nth-child(5), #customers-table td:nth-child(6) {
    grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; text-align: end; }
  #customers-table td:nth-child(3)::before, #customers-table td:nth-child(4)::before, #customers-table td:nth-child(5)::before, #customers-table td:nth-child(6)::before {
    content: attr(data-label); color: var(--muted); font-size: calc(12.5px * var(--fs, 1)); text-align: start; flex: none; }
  #customers-table td:nth-child(8) { grid-column: 1 / -1; margin-block-start: 4px; }
  #customers-table .row-actions.inline { justify-content: flex-end; gap: 10px; }
  #customers-table .row-actions .btn-icon { width: 40px; height: 40px; }
  #customers-table .person strong { font-size: calc(15px * var(--fs, 1)); white-space: normal; overflow-wrap: anywhere; }
}

/* ===== Archive page (owner reference 2026-10-11, B20) ===== */
.page:has(#archive-kpis) { max-width: none; }
.arch-head { align-items: center; justify-content: flex-start; gap: 16px 20px; flex-wrap: wrap; margin-block-end: 22px; }
.arch-tile { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); }
.arch-tile .icon { width: 32px; height: 32px; }
.arch-head .rd-title { flex: 1 1 320px; min-width: 0; }
.arch-head .rd-title h1 { margin: 0 0 2px; }
.arch-head .rd-actions { margin-inline-start: auto; }
.arch-head .rd-search { width: 400px; max-width: 100%; }
.arch-head .rd-search input { min-height: 48px; border-radius: 12px; }
.rd-kpis.arch-kpis { grid-template-columns: repeat(2, minmax(0, 400px)); gap: 20px; margin-block-end: 22px; }
.arch-kpis .rd-kpi { min-height: 89px; padding: 15px 16px; gap: 22px; border-radius: 14px; }
.arch-kpis .rd-kpi-icon { width: 57px; height: 57px; border-radius: 14px; }
.arch-kpis .rd-kpi-icon .icon { width: 32px; height: 32px; }
.arch-kpis .rd-kpi-text { padding-inline-end: 64px; }
.arch-kpis .rd-kpi-text > span { white-space: normal; line-height: 1.25; }
.arch-kpis .rd-kpi-deco { inset-inline-end: 26px; width: 56px; height: 46px; }
.arch-card { padding: 18px 12px 6px; margin-block-end: 22px; border-radius: 14px; }
.arch-card-title { display: flex; align-items: center; gap: 12px; margin: 2px 8px 16px; font-size: calc(14.5px * var(--fs, 1)); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text); }
.arch-card-title .icon { width: 24px; height: 24px; color: var(--text-2); }
.arch-list .table-scroll { border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; }
table.arch-table { width: 100%; border-collapse: collapse; }
.arch-table th { padding: 13px 22px; background: var(--surface-2); color: var(--text-2); font-size: calc(12.5px * var(--fs, 1)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-align: start; white-space: nowrap; border-block-end: 1px solid var(--border); }
.arch-table td { padding: 12px 22px; border-block-end: 1px solid var(--border); vertical-align: middle; font-size: calc(14.5px * var(--fs, 1)); color: var(--text-2); }
.arch-table tbody tr:last-child td { border-block-end: 0; }
.arch-table tbody tr:hover { background: var(--surface-2); }
.arch-table .person { display: inline-flex; align-items: center; gap: 20px; min-width: 0; }
.arch-table .avatar { flex: none; width: 46px; height: 46px; font-size: calc(15px * var(--fs, 1)); font-weight: 700; color: #fff; }
.arch-table .avatar.av-0 { background: #4f6df5; } .arch-table .avatar.av-1 { background: #16a34a; } .arch-table .avatar.av-2 { background: #0ea5e9; }
.arch-table .avatar.av-3 { background: #a855f7; } .arch-table .avatar.av-4 { background: #f59e0b; } .arch-table .avatar.av-5 { background: #14b8a6; }
.arch-table .avatar.av-6 { background: #ec4899; } .arch-table .avatar.av-7 { background: #10b981; }
.arch-table .cell-2 { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.arch-table .person strong { font-size: calc(15.5px * var(--fs, 1)); font-weight: 600; color: var(--text); }
.arch-table .cell-2 .muted { font-size: calc(13.5px * var(--fs, 1)); }
.arch-table td > strong { color: var(--text); font-weight: 600; }
.arch-sub { margin-inline-start: 8px; font-size: calc(13.5px * var(--fs, 1)); }
.arch-sort { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.arch-sort svg { width: 10px; height: 6px; fill: currentColor; transition: transform .15s; }
.arch-sort.up svg { transform: rotate(180deg); }
.arch-actions { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; }
.arch-btn { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--navy-800); cursor: pointer; transition: background .15s, border-color .15s, transform .05s; }
.arch-btn .icon { width: 21px; height: 21px; }
.arch-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.arch-btn:active { transform: translateY(1px); }
.arch-btn.delete { background: color-mix(in srgb, #ef4444 9%, var(--surface)); border-color: color-mix(in srgb, #ef4444 22%, var(--surface)); color: #ef4444; }
.arch-btn.delete:hover { background: color-mix(in srgb, #ef4444 16%, var(--surface)); }
.arch-btn.restore { background: color-mix(in srgb, #16a34a 9%, var(--surface)); border-color: color-mix(in srgb, #16a34a 22%, var(--surface)); color: #16a34a; }
.arch-btn.restore:hover { background: color-mix(in srgb, #16a34a 16%, var(--surface)); }
.arch-btn:disabled { opacity: .6; cursor: default; }
.arch-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 16px 10px 12px; font-size: calc(14.5px * var(--fs, 1)); }
.arch-pages { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.arch-page { min-width: 40px; height: 40px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.arch-page:hover:not(:disabled):not(.active) { background: var(--surface-2); }
.arch-page.active { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.arch-page:disabled { color: var(--border-strong); cursor: default; }
[dir="rtl"] .arch-page[data-arch-page]:first-child, [dir="rtl"] .arch-page[data-arch-page]:last-child { transform: scaleX(-1); }
[data-theme="dark"] .arch-btn { color: var(--text); }

@media (max-width: 1200px) {
  .arch-table th, .arch-table td { padding-inline: 14px; }
  .arch-table .person { gap: 14px; }
  .arch-actions { gap: 8px; }
  .arch-btn { width: 42px; height: 42px; }
}
/* Tablets: the branch (it is in the View window) and the "delivered" note leave, so the table fits its card. */
@media (max-width: 1100px) {
  .arch-table th:nth-child(2), .arch-table td:nth-child(2), .arch-sub { display: none; }
  .arch-table th, .arch-table td { padding-inline: 8px; }
  .arch-table th { letter-spacing: 0; }
  .arch-table td:nth-child(3), .arch-table td:nth-child(4) { white-space: normal; min-width: 92px; }
  .arch-table .avatar { width: 38px; height: 38px; font-size: calc(13px * var(--fs, 1)); }
  .arch-table .person { gap: 10px; }
  .arch-table .person strong { font-size: calc(14.5px * var(--fs, 1)); }
  .arch-table td { font-size: calc(13.5px * var(--fs, 1)); }
  .arch-actions { gap: 6px; }
  .arch-btn { width: 38px; height: 38px; }
  .arch-btn .icon { width: 18px; height: 18px; }
}
@media (max-width: 900px) {
  .arch-head .rd-actions { width: 100%; margin-inline-start: 0; }
  .arch-head .rd-search { width: 100%; }
  .rd-kpis.arch-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .arch-kpis .rd-kpi { min-height: 72px; padding: 10px 11px; gap: 10px; }
  .arch-kpis .rd-kpi-icon { width: 41px; height: 41px; border-radius: 12px; }
  .arch-kpis .rd-kpi-icon .icon { width: 24px; height: 24px; }
  .arch-kpis .rd-kpi-text { padding-inline-end: 0; }
  .arch-kpis .rd-kpi-deco { display: none; }
}
/* Phones: every archived record is a card. */
@media (max-width: 720px) {
  .arch-tile { width: 52px; height: 52px; }
  .arch-head .rd-title { flex: 1 1 0; }
  .arch-table td[data-label] > strong { margin-inline-start: auto; }
  .arch-tile .icon { width: 26px; height: 26px; }
  .arch-card { padding: 14px 10px 4px; }
  .arch-list .table-scroll { border: 0; overflow: visible; }
  .arch-table, .arch-table tbody, .arch-table td { display: block; width: auto; }
  .arch-table thead { display: none; }
  .arch-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 6px; border-block-end: 1px solid var(--border); }
  .arch-table tbody tr:last-child { border-block-end: 0; }
  .arch-table td { padding: 0; border: 0; }
  .arch-table td:nth-child(2) { display: flex; }
  .arch-sub { display: inline; }
  .arch-table td[data-label] { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; text-align: end; font-size: calc(13.5px * var(--fs, 1)); }
  .arch-table td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: calc(12.5px * var(--fs, 1)); text-align: start; flex: none; }
  .arch-table td[data-label] .cell-2 { align-items: flex-end; }
  .arch-actions { justify-content: flex-end; gap: 10px; margin-block-start: 4px; }
  .arch-foot { justify-content: center; }
  .arch-pages { margin-inline-start: 0; }
}

/* ===== Every page on every screen size (owner 2026-10-11, B21 + B22) ===== */
/* Large monitors: every page uses the whole width beside the menu (it stopped at 1600px and left the right side empty). */
.page { max-width: none; }

/* Nothing may push the page wider than the screen. */
.page > *, .card { min-width: 0; }
.page img, .page video, .page canvas { max-width: 100%; }
.it-grid > *, .it-rail, .it-main { min-width: 0; }
@media (max-width: 1000px) { .it-grid { grid-template-columns: minmax(0, 1fr); } }

/* Summary cards: a card's change note ("+12%", "Live now") never sits on its label; on phones the cards stand two by two. */
.rd-kpi:has(.od-change) .rd-kpi-text > span, .rd-kpi:has(.cu-growth) .rd-kpi-text > span { white-space: normal; line-height: 1.2; padding-inline-end: 64px; }
@media (max-width: 560px) {
  .page .rd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .page .rd-kpis .rd-kpi { min-height: 62px; padding: 8px 10px; gap: 9px; }
  .page .rd-kpis .rd-kpi-icon { width: 40px; height: 40px; border-radius: 10px; }
  .page .rd-kpis .rd-kpi-icon .icon { width: 21px; height: 21px; }
  .page .rd-kpis .rd-kpi-text { padding-inline-end: 0; min-width: 0; }
  .page .rd-kpis .rd-kpi-text > span { font-size: calc(12.5px * var(--fs, 1)); white-space: normal; line-height: 1.2; padding-inline-end: 0; }
  .page .rd-kpis .rd-kpi-text b { font-size: calc(19px * var(--fs, 1)); }
  .page .rd-kpis .rd-kpi-deco { display: none; }
  .page .rd-kpis .od-change, .page .rd-kpis .cu-growth { top: auto; bottom: 6px; inset-inline-end: 10px; font-size: calc(11px * var(--fs, 1)); }
}

/* ---- Riders table (B22): all six columns and every button fit the page width - no sideways scrollbar ---- */
#riders-table table { min-width: 0; width: 100%; }
#riders-table .table-scroll { overflow-x: visible; }
#riders-table th, #riders-table td { padding-inline: 10px; }
#riders-table td { white-space: normal; }
#riders-table th { white-space: nowrap; }
#riders-table .person { min-width: 0; }
#riders-table .person strong { white-space: normal; overflow-wrap: anywhere; }
#riders-table .cell-2 { min-width: 0; }
#riders-table td:nth-child(2) .cell-2 > span { overflow-wrap: anywhere; }
#riders-table .badges { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
#riders-table .today-stats { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: 5px; }
#riders-table .today-stats .stat { min-width: 0; width: 74px; padding: 5px 4px; }
#riders-table td .row-actions { min-width: 0; }
#riders-table .row-actions.inline { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
#riders-table .row-actions .btn-icon { flex: none; width: 38px; height: 38px; min-height: 38px; }
#riders-table .row-actions .btn:not(.btn-icon) { padding-inline: 10px; }
#riders-table th:last-child { text-align: end; }
@media (max-width: 1700px) {
  #riders-table th, #riders-table td { padding-inline: 7px; }
  #riders-table .today-stats .stat { width: 62px; font-size: calc(12px * var(--fs, 1)); }
  #riders-table .row-actions .btn-icon { width: 34px; height: 34px; min-height: 34px; }
  #riders-table .row-actions.inline { gap: 5px; }
  #riders-table .avatar { width: 40px; height: 40px; }
}
@media (max-width: 1400px) {
  #riders-table th, #riders-table td { padding-inline: 5px; font-size: calc(12.5px * var(--fs, 1)); }
  #riders-table th { font-size: calc(11px * var(--fs, 1)); letter-spacing: 0; }
  #riders-table .today-stats .stat { width: 54px; padding: 4px 2px; font-size: calc(11px * var(--fs, 1)); }
  #riders-table .row-actions .btn-icon { width: 30px; height: 30px; min-height: 30px; }
  #riders-table .row-actions .btn-icon .icon { width: 15px; height: 15px; }
  #riders-table .row-actions.inline { gap: 4px; max-width: 170px; margin-inline-start: auto; }
  #riders-table .avatar { width: 34px; height: 34px; font-size: calc(12px * var(--fs, 1)); }
  #riders-table .person { gap: 8px; }
  #riders-table .badge { font-size: calc(11px * var(--fs, 1)); padding-inline: 7px; }
}
/* Between a phone and a laptop the rider is a card too (the table cannot hold six columns in so little room). */
@media (min-width: 701px) and (max-width: 1100px) {
  #riders-table table, #riders-table tbody { display: block; }
  #riders-table thead { display: none; }
  #riders-table tbody tr { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px 14px; align-items: center; padding: 14px 16px; border-block-end: 1px solid var(--border); }
  #riders-table tbody tr:last-child { border-block-end: 0; }
  #riders-table td { display: block; padding: 0; border: 0; min-width: 0; }
  #riders-table td:nth-child(1) { grid-area: 1 / 1; }
  #riders-table td:nth-child(2) { grid-area: 1 / 2; }
  #riders-table td:nth-child(3) { grid-area: 1 / 3; justify-self: end; }
  #riders-table td:nth-child(4) { grid-area: 2 / 1; }
  #riders-table td:nth-child(5) { grid-area: 2 / 2; }
  #riders-table td:nth-child(6) { grid-area: 2 / 3; justify-self: end; }
  #riders-table .badges { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
  #riders-table .row-actions.inline { max-width: none; flex-wrap: nowrap; }
  #riders-table .row-actions .btn-icon { width: 36px; height: 36px; min-height: 36px; }
  #riders-table .today-stats .stat { width: 70px; }
}
@media (max-width: 700px) {
  #riders-table td:nth-child(5), #riders-table td:nth-child(6) { grid-area: auto; grid-column: 1 / -1; }
  #riders-table .row-actions.inline { justify-content: flex-end; max-width: none; gap: 8px; }
  #riders-table .row-actions .btn-icon { width: 40px; height: 40px; min-height: 40px; }
  #riders-table .today-stats .stat { width: auto; }
  #riders-table .badges { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
}

/* ---- Phones: every list drawn by the shared table is a stack of cards with named lines (no sideways scrolling).
        The Riders, Customers and Archive lists have their own card layout above. ---- */
@media (max-width: 720px) {
  .table-wrap:not(#riders-table):not(#customers-table) > .table-scroll { overflow-x: visible; }
  .table-wrap:not(#riders-table):not(#customers-table) > .table-scroll > table,
  .table-wrap:not(#riders-table):not(#customers-table) > .table-scroll > table > tbody { display: block; width: 100%; min-width: 0; }
  .table-wrap:not(#riders-table):not(#customers-table) > .table-scroll > table > thead { display: none; }
  .table-wrap:not(#riders-table):not(#customers-table) > .table-scroll > table > tbody > tr { display: block; padding: 12px 14px; border-block-end: 1px solid var(--border); }
  .table-wrap:not(#riders-table):not(#customers-table) > .table-scroll > table > tbody > tr:last-child { border-block-end: 0; }
  .table-wrap:not(#riders-table):not(#customers-table) > .table-scroll > table > tbody > tr > td[data-label] {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; width: auto; min-width: 0;
    white-space: normal; overflow-wrap: anywhere; text-align: end; position: static; box-shadow: none; background: none; }
  .table-wrap:not(#riders-table):not(#customers-table) > .table-scroll > table > tbody > tr > td[data-label]::before {
    content: attr(data-label); flex: none; max-width: 45%; color: var(--muted); font-size: calc(12.5px * var(--fs, 1)); text-align: start; overflow-wrap: normal; }
  .table-wrap:not(#riders-table):not(#customers-table) > .table-scroll > table > tbody > tr > td[data-label=""]::before,
  .table-wrap:not(#riders-table):not(#customers-table) > .table-scroll > table > tbody > tr > td[data-label]:has(.row-actions)::before { display: none; }
  .table-wrap:not(#riders-table):not(#customers-table) > .table-scroll > table > tbody > tr > td[data-label]:has(.row-actions) { justify-content: flex-end; padding-block-start: 8px; }
  .table-wrap:not(#riders-table):not(#customers-table) > .table-scroll > table > tbody > tr > td[data-label]:empty { display: none; }
  .table-wrap:not(#riders-table):not(#customers-table) > .table-scroll > table > tbody > tr > td[data-label] > * { min-width: 0; }
  .table-wrap:not(#riders-table):not(#customers-table) > .table-scroll > table > tbody > tr > td[data-label] .cell-2 { align-items: flex-end; }
  .table-wrap:not(#riders-table):not(#customers-table) > .table-scroll > table > tbody > tr > td[data-label] .person .cell-2 { align-items: flex-start; text-align: start; }
  .table-wrap:not(#riders-table):not(#customers-table) td .row-actions { min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  .pager { justify-content: center; }
  .pager-buttons { margin-inline-start: 0; }

  /* Tab strips wrap instead of scrolling sideways. */
  .st-tabs { flex-wrap: wrap; overflow-x: visible; }
  .st-tabs > * { flex: 1 1 auto; }
  /* Drop-down menus of a filter open inside the screen. */
  .rd-filter-menu { inset-inline: 0 auto; max-width: calc(100vw - 28px); }
}

/* ---- A list that is wider than its card (set by fitTables in app.js) ---- */
/* 1. tighter: less spacing, text may wrap */
.table-wrap.fit-tight th, .table-wrap.fit-tight td { padding-inline: 7px; white-space: normal; font-size: calc(13px * var(--fs, 1)); }
.table-wrap.fit-tight th { font-size: calc(11px * var(--fs, 1)); letter-spacing: 0; }
.table-wrap.fit-tight td .row-actions { min-width: 0; gap: 4px; }
.table-wrap.fit-tight .row-actions .btn-icon { width: 30px; min-height: 30px; height: 30px; }
.table-wrap.fit-tight .avatar { width: 34px; height: 34px; font-size: calc(12px * var(--fs, 1)); }
.table-wrap.fit-tight .person { gap: 8px; }
.table-wrap.fit-tight .badge { white-space: nowrap; }
/* 2. tablets: cards with named lines, two columns of lines */
.table-wrap.fit-cards > .table-scroll { overflow-x: visible; }
.table-wrap.fit-cards > .table-scroll > table,
.table-wrap.fit-cards > .table-scroll > table > tbody { display: block; width: 100%; min-width: 0; }
.table-wrap.fit-cards > .table-scroll > table > thead { display: none; }
.table-wrap.fit-cards > .table-scroll > table > tbody > tr { display: block; padding: 12px 14px; border-block-end: 1px solid var(--border); }
.table-wrap.fit-cards > .table-scroll > table > tbody > tr:last-child { border-block-end: 0; }
.table-wrap.fit-cards > .table-scroll > table > tbody > tr > td[data-label] {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; width: auto; min-width: 0;
  white-space: normal; overflow-wrap: anywhere; text-align: end; position: static; box-shadow: none; background: none; }
.table-wrap.fit-cards > .table-scroll > table > tbody > tr > td[data-label]::before {
  content: attr(data-label); flex: none; max-width: 45%; color: var(--muted); font-size: calc(12.5px * var(--fs, 1)); text-align: start; overflow-wrap: normal; }
.table-wrap.fit-cards > .table-scroll > table > tbody > tr > td[data-label=""]::before,
.table-wrap.fit-cards > .table-scroll > table > tbody > tr > td[data-label]:has(.row-actions)::before { display: none; }
.table-wrap.fit-cards > .table-scroll > table > tbody > tr > td[data-label]:has(.row-actions) { justify-content: flex-end; padding-block-start: 8px; }
.table-wrap.fit-cards > .table-scroll > table > tbody > tr > td[data-label]:empty { display: none; }
.table-wrap.fit-cards > .table-scroll > table > tbody > tr > td[data-label] > * { min-width: 0; }
.table-wrap.fit-cards > .table-scroll > table > tbody > tr > td[data-label] .cell-2 { align-items: flex-end; }
.table-wrap.fit-cards > .table-scroll > table > tbody > tr > td[data-label] .person .cell-2 { align-items: flex-start; text-align: start; }
.table-wrap.fit-cards td .row-actions { min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.table-wrap.fit-cards > .table-scroll > table > tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 28px; }
.table-wrap.fit-cards > .table-scroll > table > tbody > tr > td[data-label]:first-child,
.table-wrap.fit-cards > .table-scroll > table > tbody > tr > td[data-label]:has(.row-actions) { grid-column: 1 / -1; }

/* ===== Users page (owner reference 2026-10-11, B23) ===== */
.us-head .rd-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.us-head .rd-search { width: 320px; }
.us-head .rd-filter > summary { min-height: 48px; padding-inline: 18px; border-radius: 12px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.rd-kpis.us-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-block-end: 22px; }
.us-kpis .rd-kpi { min-height: 84px; padding: 13px 15px; gap: 17px; border-radius: 14px; }
.us-kpis .rd-kpi-icon { width: 53px; height: 53px; border-radius: 14px; }
.us-kpis .rd-kpi-icon .icon { width: 30px; height: 30px; }
.us-kpis .rd-kpi-text { flex: none; }
.us-kpis .rd-kpi-text > span { white-space: nowrap; }
.us-kpis .rd-kpi-deco { inset-inline-end: 18px; width: 46px; height: 40px; }
.us-trend { display: flex; flex-direction: column; gap: 2px; align-self: flex-end; margin-inline-end: 56px; padding-block-end: 4px; font-size: calc(12px * var(--fs, 1)); color: var(--muted); line-height: 1.2; min-width: 0; }
.us-trend b { font-size: calc(13px * var(--fs, 1)); font-weight: 700; color: var(--text-2); }
.us-trend.up b { color: #16a34a; }
.us-trend span { white-space: nowrap; }
.us-role::before { display: none; }
.us-card { padding: 0 0 4px; overflow: hidden; }
.us-card .us-list .table-scroll { border: 0; border-radius: 0; }
.us-card .arch-foot { padding: 14px 18px 12px; }
.us-table th, .us-table td { padding-inline: 14px; }
.us-table .us-tick { width: 48px; padding-inline: 22px 6px; }
.us-table .us-tick input { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.us-table .us-no { width: 44px; color: var(--text-2); }
.us-table td { padding-block: 9px; }
.us-role { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.us-role .icon { width: 14px; height: 14px; }
.us-with-icon { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.us-with-icon .icon { flex: none; width: 19px; height: 19px; color: var(--text-2); }
.us-table .arch-actions { gap: 10px; justify-content: flex-end; }
.us-table th:last-child { text-align: end; padding-inline-end: 22px; }
.us-table td:last-child { padding-inline-end: 22px; }
.us-table .arch-btn { width: 42px; height: 42px; }
.arch-btn.edit { background: color-mix(in srgb, #2563eb 8%, var(--surface)); border-color: color-mix(in srgb, #2563eb 20%, var(--surface)); color: #2563eb; }
.arch-btn.edit:hover { background: color-mix(in srgb, #2563eb 15%, var(--surface)); }
.arch-btn.key { background: color-mix(in srgb, #0d9488 8%, var(--surface)); border-color: color-mix(in srgb, #0d9488 20%, var(--surface)); color: #0d9488; }
.arch-btn.key:hover { background: color-mix(in srgb, #0d9488 15%, var(--surface)); }
.arch-btn.power { background: color-mix(in srgb, #f59e0b 9%, var(--surface)); border-color: color-mix(in srgb, #f59e0b 24%, var(--surface)); color: #d97706; }
.arch-btn.power:hover { background: color-mix(in srgb, #f59e0b 16%, var(--surface)); }
.arch-gap { align-self: center; min-width: 28px; text-align: center; color: var(--muted); }
.us-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 18px; background: var(--primary-soft); color: var(--primary-soft-ink); border-block-end: 1px solid var(--border); }
.us-bulk[hidden] { display: none; }
.us-bulk strong { margin-inline-end: auto; }

/* The list fits its card at every width with ALL its columns (owner 2026-10-11, B24): spacing, avatars and buttons
   scale with the screen, long names and dates wrap; where a table cannot hold eight columns any more (a tablet, a
   phone) every user is a card that still shows everything. Nothing is hidden at any size. */
.us-table th, .us-table td { padding-inline: clamp(5px, .62vw, 14px); }
.us-table td { white-space: normal; overflow-wrap: break-word; font-size: calc((clamp(12.5px, .86vw, 14.5px)) * var(--fs, 1)); }
.us-table th { font-size: calc((clamp(10.5px, .72vw, 12.5px)) * var(--fs, 1)); letter-spacing: clamp(0px, .03vw, .6px); white-space: nowrap; }
.us-table .badge { white-space: nowrap; }
.us-table .us-tick { width: 1%; padding-inline: clamp(8px, 1.1vw, 22px) 4px; }
.us-table .us-no { width: 1%; white-space: nowrap; }
.us-table th:last-child, .us-table td:last-child { width: 1%; padding-inline-end: clamp(8px, 1.1vw, 22px); }
.us-table .avatar { width: clamp(34px, 2.5vw, 46px); height: clamp(34px, 2.5vw, 46px); font-size: calc((clamp(12px, .85vw, 15px)) * var(--fs, 1)); }
.us-table .person { gap: clamp(8px, 1vw, 20px); }
.us-table .person strong { font-size: calc((clamp(13.5px, .9vw, 15.5px)) * var(--fs, 1)); }
.us-with-icon { gap: clamp(5px, .6vw, 12px); }
.us-with-icon .icon { width: clamp(15px, 1.05vw, 19px); height: clamp(15px, 1.05vw, 19px); }
.us-table .arch-actions { gap: clamp(4px, .5vw, 10px); flex-wrap: nowrap; }
.us-table .arch-btn { width: clamp(30px, 2.25vw, 42px); height: clamp(30px, 2.25vw, 42px); }
.us-table .arch-btn .icon { width: clamp(15px, 1.1vw, 21px); height: clamp(15px, 1.1vw, 21px); }
.us-role { gap: clamp(3px, .3vw, 6px); font-size: calc((clamp(11px, .72vw, 12.5px)) * var(--fs, 1)); padding-inline: clamp(6px, .6vw, 10px); }

/* Summary cards */
@media (max-width: 1700px) {
  .rd-kpis.us-kpis { gap: 12px; }
  .us-kpis .rd-kpi { padding: 10px 11px; gap: 10px; }
  .us-kpis .rd-kpi-icon { width: 43px; height: 43px; }
  .us-kpis .rd-kpi-icon .icon { width: 25px; height: 25px; }
  .us-kpis .rd-kpi-deco { display: none; }
  .us-trend { margin-inline-end: 0; margin-inline-start: auto; text-align: end; }
  .us-trend span { white-space: normal; }
}
@media (max-width: 1300px) { .rd-kpis.us-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The title line */
@media (max-width: 900px) {
  .us-head .rd-actions { width: 100%; justify-content: stretch; }
  .us-head .rd-search { flex: 1 1 100%; width: auto; }
  .us-head .rd-filter { flex: 1 1 0; }
  .us-head .rd-filter > summary { width: 100%; justify-content: center; }
  .us-head .rd-add { flex: 2 1 0; justify-content: center; }
}

/* Tablets and phones: every user is a card - tick box and name on top, then Role, Branch, Status and Last sign-in as
   named lines (two beside each other on a tablet), then the buttons. The "#" stands before the name. */
@media (max-width: 1120px) {
  .us-card .us-list .table-scroll { overflow: visible; }
  .us-table, .us-table tbody { display: block; width: auto; }
  .us-table thead { display: none; }
  .us-table tbody tr { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; padding: 14px 18px; border-block-end: 1px solid var(--border); }
  .us-table tbody tr:last-child { border-block-end: 0; }
  .us-table td, .us-table td:last-child, .us-table .us-tick, .us-table .us-no { display: block; width: auto; padding: 0; border: 0; min-width: 0; font-size: calc(14px * var(--fs, 1)); }
  .us-table td.us-tick { flex: none; margin-inline-end: -14px; }
  .us-table td.us-tick:empty { width: 18px; }
  .us-table td.us-no { display: block; flex: none; margin-inline-end: -14px; color: var(--muted); }
  .us-table td.us-no::before { content: "#"; }
  .us-table td:nth-child(3) { flex: 1 1 0; min-width: 60%; }
  .us-table td[data-label] { flex: 1 1 calc(50% - 14px); display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: end; }
  .us-table td[data-label]::before { content: attr(data-label); flex: none; color: var(--muted); font-size: calc(12.5px * var(--fs, 1)); text-align: start; }
  .us-table td:last-child { flex: 1 1 100%; }
  .us-table .arch-actions { justify-content: flex-end; gap: 10px; }
  .us-table .arch-btn { width: 40px; height: 40px; }
  .us-table .arch-btn .icon { width: 19px; height: 19px; }
  .us-table .avatar { width: 42px; height: 42px; font-size: calc(14px * var(--fs, 1)); }
  .us-table .person { gap: 12px; }
  .us-table .person strong { font-size: calc(15px * var(--fs, 1)); }
  .us-with-icon .icon { width: 17px; height: 17px; }
  .us-role { font-size: calc(12px * var(--fs, 1)); padding-inline: 9px; }
}
@media (max-width: 720px) {
  .us-kpis .rd-kpi { min-height: 65px; }
  .us-kpis .rd-kpi-text > span { white-space: normal; line-height: 1.2; font-size: calc(12.5px * var(--fs, 1)); }
  .us-kpis .rd-kpi-text b { font-size: calc(20px * var(--fs, 1)); }
  .us-kpis .rd-kpi { flex-wrap: wrap; row-gap: 4px; }
  .us-kpis .rd-kpi-text { flex: 1 1 0; min-width: 0; }
  .us-trend { flex: 1 1 100%; flex-direction: row; align-items: baseline; gap: 5px; margin: 0; padding: 0; text-align: start; align-self: auto; }
  .us-trend span { display: inline; font-size: calc(11px * var(--fs, 1)); white-space: normal; }
  .us-trend b { font-size: calc(12px * var(--fs, 1)); white-space: nowrap; }
  .us-kpis .rd-kpi-icon { width: 40px; height: 40px; border-radius: 10px; }
  .us-kpis .rd-kpi-icon .icon { width: 21px; height: 21px; }
  .us-table tbody tr { padding-inline: 14px; gap: 6px 28px; }
  .us-table td[data-label] { flex: 1 1 100%; }
}

/* ===== Customers and Archive lists: fit at every width, nothing hidden (owner 2026-10-11, B24) ===== */
/* ---- Customers: all eight columns stay; sizes follow the screen; a tablet or phone shows cards ---- */
#customers-table th, #customers-table td { padding-inline: clamp(5px, .55vw, 12px); }
#customers-table td { white-space: normal; overflow-wrap: break-word; }
#customers-table th { white-space: nowrap; }
#customers-table .badge { white-space: nowrap; }
#customers-table td:first-child { width: 1%; }
#customers-table th:last-child, #customers-table td:last-child { width: 1%; }
#customers-table .row-actions.inline { display: flex; flex-wrap: nowrap; gap: clamp(3px, .35vw, 6px); }
#customers-table .row-actions .btn-icon { width: clamp(28px, 2vw, 34px); height: clamp(28px, 2vw, 34px); min-height: 0; }
@media (min-width: 1121px) {
  #customers-table th:nth-child(1), #customers-table td:nth-child(1),
  #customers-table th:nth-child(6), #customers-table td:nth-child(6) { display: table-cell; }
}
@media (min-width: 761px) and (max-width: 1120px) {
  #customers-table .table-scroll { overflow: visible; }
  #customers-table table, #customers-table tbody, #customers-table td { display: block; width: auto; }
  #customers-table thead { display: none; }
  #customers-table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding: 14px 16px; border-block-end: 1px solid var(--border); }
  #customers-table tbody tr:last-child { border-block-end: 0; }
  #customers-table td, #customers-table td:first-child, #customers-table td:last-child { padding: 0; border: 0; min-width: 0; width: auto; font-size: calc(13.5px * var(--fs, 1)); }
  #customers-table td:nth-child(1) { display: block; flex: none; margin-inline-end: -14px; color: var(--muted); }
  #customers-table td:nth-child(1)::before { content: "#"; }
  #customers-table td:nth-child(2) { flex: 1 1 0; min-width: 50%; }
  #customers-table td:nth-child(7) { flex: none; }
  #customers-table td:nth-child(3), #customers-table td:nth-child(4), #customers-table td:nth-child(5), #customers-table td:nth-child(6) {
    flex: 1 1 calc(50% - 14px); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; text-align: end; }
  #customers-table td:nth-child(3)::before, #customers-table td:nth-child(4)::before, #customers-table td:nth-child(5)::before, #customers-table td:nth-child(6)::before {
    content: attr(data-label); color: var(--muted); font-size: calc(12.5px * var(--fs, 1)); text-align: start; flex: none; }
  #customers-table td:nth-child(8) { flex: 1 1 100%; }
  #customers-table .row-actions.inline { justify-content: flex-end; gap: 10px; }
  #customers-table .row-actions .btn-icon { width: 38px; height: 38px; }
}
@media (max-width: 760px) {
  #customers-table td:nth-child(1) { display: none; }
  #customers-table td:nth-child(2)::before { content: none; }
  #customers-table td:first-child, #customers-table td:last-child { width: auto; }
  #customers-table .row-actions .btn-icon { width: 40px; height: 40px; }
  #customers-table .row-actions.inline { gap: 10px; }
}

/* ---- Archive: Name, Branch, Removed, Orders and the three buttons stay at every width ---- */
.arch-table:not(.us-table) th, .arch-table:not(.us-table) td { padding-inline: clamp(8px, 1.1vw, 22px); }
.arch-table:not(.us-table) td { white-space: normal; overflow-wrap: break-word; font-size: calc((clamp(13px, .86vw, 14.5px)) * var(--fs, 1)); }
.arch-table:not(.us-table) th:last-child, .arch-table:not(.us-table) td:last-child { width: 1%; }
.arch-table:not(.us-table) .avatar { width: clamp(36px, 2.5vw, 46px); height: clamp(36px, 2.5vw, 46px); font-size: calc((clamp(12px, .85vw, 15px)) * var(--fs, 1)); }
.arch-table:not(.us-table) .person { gap: clamp(10px, 1.1vw, 20px); }
.arch-table:not(.us-table) .arch-actions { gap: clamp(6px, .75vw, 14px); flex-wrap: nowrap; }
.arch-table:not(.us-table) .arch-btn { width: clamp(34px, 2.6vw, 48px); height: clamp(34px, 2.6vw, 48px); }
.arch-table:not(.us-table) .arch-btn .icon { width: clamp(17px, 1.15vw, 21px); height: clamp(17px, 1.15vw, 21px); }
@media (min-width: 1121px) {
  .arch-table:not(.us-table) th:nth-child(2), .arch-table:not(.us-table) td:nth-child(2) { display: table-cell; }
  .arch-table:not(.us-table) .arch-sub { display: inline; }
}
@media (max-width: 1120px) {
  .arch-list .table-scroll { border: 0; overflow: visible; }
  .arch-table:not(.us-table), .arch-table:not(.us-table) tbody { display: block; width: auto; }
  .arch-table:not(.us-table) thead { display: none; }
  .arch-table:not(.us-table) tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding: 14px 10px; border-block-end: 1px solid var(--border); }
  .arch-table:not(.us-table) tbody tr:last-child { border-block-end: 0; }
  .arch-table:not(.us-table) td, .arch-table:not(.us-table) td:last-child { display: block; width: auto; padding: 0; border: 0; min-width: 0; font-size: calc(14px * var(--fs, 1)); }
  .arch-table:not(.us-table) td:first-child { flex: 1 1 100%; }
  .arch-table:not(.us-table) td[data-label] { flex: 1 1 calc(50% - 14px); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; text-align: end; }
  .arch-table:not(.us-table) td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: calc(12.5px * var(--fs, 1)); text-align: start; flex: none; }
  .arch-table:not(.us-table) td[data-label] .cell-2 { align-items: flex-end; }
  .arch-table:not(.us-table) td[data-label] > strong { margin-inline-start: auto; }
  .arch-table:not(.us-table) td:last-child { flex: 1 1 100%; }
  .arch-table:not(.us-table) .arch-sub { display: inline; }
  .arch-table:not(.us-table) .arch-actions { justify-content: flex-end; gap: 10px; }
  .arch-table:not(.us-table) .arch-btn { width: 40px; height: 40px; }
  .arch-table:not(.us-table) .avatar { width: 42px; height: 42px; font-size: calc(14px * var(--fs, 1)); }
}
@media (max-width: 720px) {
  .arch-table:not(.us-table) td[data-label] { flex: 1 1 100%; }
}

/* ===== Mobile app updates: the APK row of Settings (owner 2026-10-11, B25) ===== */
.app-apk progress { display: block; width: min(100%, 420px); height: 8px; margin-block-start: 8px; accent-color: var(--primary); }
.app-apk .app-apk-pick { cursor: pointer; }
.app-apk .app-apk-pick.is-busy { opacity: .55; pointer-events: none; }
.app-apk .set-meta .icon { flex: none; }
@media (max-width: 760px) {
  .st-page .set-rows .app-apk { grid-template-columns: auto minmax(0, 1fr); }
  .app-apk .app-apk-pick, .app-apk #app-apk-remove { grid-column: 1 / -1; justify-content: center; }
}

/* ===== The invoice of an order: its window and its design in Settings (owner 2026-10-11, B27) ===== */
.inv-stage { background: #e9edf3; border-radius: 12px; padding: 14px; overflow: auto; }
.inv-stage .inv { box-shadow: 0 6px 22px rgba(15, 23, 42, .18); }
.inv-hint { margin: 8px 0 0; font-size: .85rem; }
.inv-design { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 24px; padding: 4px 20px 20px; align-items: start; }
.inv-form h3, .inv-preview h3 { margin: 16px 0 8px; font-size: .95rem; }
.inv-form { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.inv-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: .85rem; }
.inv-f > span { color: var(--muted); }
.inv-f input, .inv-f select { width: 100%; min-width: 0; }
.inv-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.inv-logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .85rem; }
.inv-ticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 14px; }
.inv-tick { display: flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; }
.inv-save { display: flex; justify-content: flex-end; margin-top: 8px; }
.inv-preview { position: sticky; top: 84px; min-width: 0; }
@media (max-width: 1000px) {
  .inv-design { grid-template-columns: minmax(0, 1fr); padding: 4px 16px 16px; }
  .inv-preview { position: static; }
}
@media (max-width: 560px) { .inv-two { grid-template-columns: minmax(0, 1fr); } }

/* ===== Text size buttons A- / A / A+ (owner 2026-10-11, B31) ===== */
/* --fs multiplies every text size of this sheet (1 = the design size); the script also sets the root size for rem. */
.fs-ctl { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface, #fff); flex: none; }
.fs-ctl button { all: unset; box-sizing: border-box; min-width: 30px; height: 38px; padding: 0 6px; display: grid; place-items: center; cursor: pointer; font-weight: 700; color: var(--text); font-size: 14px; line-height: 1; }
.fs-ctl button + button { border-inline-start: 1px solid var(--border); }
.fs-ctl button[data-font="smaller"] { font-size: 12px; }
.fs-ctl button[data-font="larger"] { font-size: 17px; }
.fs-ctl button:hover:not(:disabled) { background: var(--hover, rgba(15, 23, 42, .06)); }
.fs-ctl button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.fs-ctl button:disabled { opacity: .4; cursor: default; }
.fs-ctl button[aria-pressed="true"] { color: var(--primary); }
.user-panel .fs-ctl { display: none; margin: 4px 8px 8px; }
.login-fs { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; }
@media (max-width: 860px) {
  .topbar-end > .fs-ctl { display: none; }        /* the top bar is full on a phone: the buttons sit in the user menu */
  .user-panel .fs-ctl { display: inline-flex; }
}

/* The top bar always fits (found 2026-10-11 while adding the text-size buttons: between 900 and 1230 px the user menu
   was pushed off the screen). The search box gives way first, down to its icon; then the branch list gets narrower;
   on the narrowest screens that still show the side menu, the name beside the avatar goes (as on a phone). */
.topbar { min-width: 0; }
.global-search { min-width: 44px; }
.topbar-end { flex: none; }
@media (min-width: 901px) and (max-width: 1280px) {
  .topbar { gap: 10px; padding-inline: 16px; }
  .topbar-end { gap: 8px; }
  .topbar-end .branch-select { max-width: 160px; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  #user-name .user-label { display: none; }
  .user-btn .chevron { display: none; }
}
/* The smallest phones (about 340 px): a little less air between the top-bar items, so the avatar stays on the screen. */
@media (max-width: 380px) {
  .topbar { gap: 4px; padding-inline: 6px; }
  .topbar-end { gap: 4px; }
  .topbar-end .select-wrap, .topbar-end .select-wrap select { max-width: 74px; }
}

/* ===== Collapsed side menu: the pop-out beside the icon (owner 2026-10-11, B32) ===== */
/* The strip stays 78 px wide. The icon under the mouse (or the keyboard) opens a card beside it: the name of its
   group on a navy band, then the pages of that group - the one pointed at is marked, the open page is green. */
.nav-fly {
  position: fixed; z-index: 1300; width: 264px; max-height: calc(100vh - 24px); display: flex; flex-direction: column;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 18px 44px rgba(8, 20, 46, .28), 0 2px 8px rgba(8, 20, 46, .12);
  opacity: 0; transform: translateX(-8px) scale(.98); transform-origin: left center; pointer-events: none;
  transition: opacity .14s ease, transform .16s cubic-bezier(.2, .8, .2, 1);
}
[dir="rtl"] .nav-fly { transform: translateX(8px) scale(.98); transform-origin: right center; }
.nav-fly.is-open { opacity: 1; transform: none; pointer-events: auto; }
.nav-fly-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: #fff; border-radius: 15px 15px 0 0; position: relative; z-index: 1;
  background: linear-gradient(135deg, #0b1d3a 0%, #12305c 60%, #0f7a55 140%); }
.nav-fly-head .nav-fly-tile { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); flex: none; }
.nav-fly-head .nav-fly-tile svg { width: 20px; height: 20px; }
.nav-fly-head strong { display: block; font-size: 15px; line-height: 1.25; }
.nav-fly-head small { display: block; font-size: 12px; opacity: .78; }
.nav-fly-list { padding: 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.nav-fly-list a { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 6px 10px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 500; font-size: 14px; }
.nav-fly-list a svg { width: 19px; height: 19px; flex: none; color: var(--muted); }
.nav-fly-list a:hover, .nav-fly-list a.is-pointed { background: var(--surface-3, rgba(15, 23, 42, .06)); }
.nav-fly-list a.is-pointed { box-shadow: inset 3px 0 0 var(--primary); }
[dir="rtl"] .nav-fly-list a.is-pointed { box-shadow: inset -3px 0 0 var(--primary); }
.nav-fly-list a.is-current { background: var(--primary); color: #fff; font-weight: 600; }
.nav-fly-list a.is-current svg { color: #fff; }
.nav-fly-list a:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.nav-fly::before { content: ""; position: absolute; inset-block-start: var(--nav-fly-arrow, 28px); inset-inline-start: -6px; width: 12px; height: 12px;
  background: #0b1d3a; transform: rotate(45deg); border-radius: 2px; }
.nav-fly.no-arrow::before { display: none; }
@media (prefers-reduced-motion: reduce) { .nav-fly { transition: none; } }
@media (max-width: 960px) { .nav-fly { display: none; } }
/* Orders list as cards (phones, or little room): the second line sits under its value at the end side */
.od-table.fit-cards .od-2 { justify-items: end; text-align: end; }
@media (max-width: 720px) { .od-table .od-2 { justify-items: end; text-align: end; } .od-table .od-sub { white-space: normal; } }
.od-table.fit-cards td:nth-child(3), .od-table.fit-cards td:nth-child(4) { min-width: 0; max-width: none; }
@media (max-width: 720px) { .od-table td:nth-child(3), .od-table td:nth-child(4) { min-width: 0; max-width: none; } }
/* B35 (owner 2026-10-12): every map has a Full screen button */
.map-full-btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 2px solid rgba(0, 0, 0, .2); border-radius: 4px;
  background: #fff; color: #1f2937; cursor: pointer; background-clip: padding-box; }
.map-full-btn:hover { background: #f3f4f6; }
.map-full-btn.on { color: #15803d; }
.map-full-btn svg { width: 18px; height: 18px; }
.leaflet-container:fullscreen { width: 100% !important; height: 100% !important; max-height: none !important; border-radius: 0; }
.rt-map-wrap:fullscreen { background: var(--surface); }
.rt-map-wrap:fullscreen .map { height: 100% !important; max-height: none !important; border-radius: 0; }
/* B36 (owner 2026-10-12): compact cards, nothing clipped - the money card of the dashboard sizes its amount to the card */
.dash-kpis .kpi { container-type: inline-size; }
.dash-kpis .kpi.tone-mint .value { font-size: calc(clamp(17px, 10cqi, 29px) * var(--fs, 1)); white-space: nowrap; }
/* B38 (owner 2026-10-12, reference picture): the Stock page */
.stk-page .st-hero { margin-block-end: 18px; gap: 18px; }
.stk-page .st-hero-tile { width: 72px; height: 72px; border-radius: 18px; }
.stk-page .st-hero-tile .icon { width: 34px; height: 34px; }
.stk-page .st-hero .rd-title { flex: 1 1 280px; min-width: 0; }
.stk-page .rd-actions { margin-inline-start: auto; justify-content: flex-end; }
.stk-page .rd-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding-inline: 18px;
  border-radius: 12px; font-weight: 600; background: var(--surface); box-shadow: var(--shadow-xs); }
.stk-page .rd-actions .btn .icon { width: 19px; height: 19px; }
#stock-kpis { gap: 18px; margin-block-end: 0; }
#stock-kpis .rd-kpi { min-height: 96px; padding: 16px 20px; gap: 18px; border-radius: 16px; box-shadow: var(--shadow-xs);
  border: 1px solid color-mix(in srgb, var(--tone) 38%, transparent);
  background: linear-gradient(100deg, color-mix(in srgb, var(--tone) 13%, var(--surface)) 0%, var(--surface) 62%); }
#stock-kpis .rd-kpi-icon { width: 60px; height: 60px; border-radius: 15px; }
#stock-kpis .rd-kpi-icon .icon { width: 30px; height: 30px; }
#stock-kpis .rd-kpi-text > span { font-size: calc(15.5px * var(--fs, 1)); }
#stock-kpis .rd-kpi-text b { font-size: calc(clamp(22px, 10.5cqi, 32px) * var(--fs, 1)); overflow: visible; text-overflow: clip; line-height: 1.2; }
#stock-kpis .rd-kpi-deco { inset-inline-end: 24px; width: 52px; height: 46px; }
@container (max-width: 330px) {
  #stock-kpis .rd-kpi-deco { display: block; inset-inline-end: 16px; width: 38px; height: 34px; }
  #stock-kpis .rd-kpi-text { padding-inline-end: 44px; }
}
@container (max-width: 250px) {
  #stock-kpis .rd-kpi-deco { display: none; }
  #stock-kpis .rd-kpi-text { padding-inline-end: 0; }
}
.stk-page .inv-charts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-block: 18px; align-items: stretch; }
.stk-page .inv-chart { padding: 16px 20px 14px; border-radius: 16px; min-width: 0; display: flex; flex-direction: column; }
.stk-page .inv-chart h2 { display: flex; align-items: center; gap: 12px; margin: 0; padding-block-end: 12px; border-block-end: 1px solid var(--border);
  font-size: calc(16.5px * var(--fs, 1)); font-weight: 700; }
.stk-page .inv-chart h2 .icon { flex: none; width: 24px; height: 24px; color: #1d4ed8; }
.stk-page .inv-chart h2 span { min-width: 0; overflow-wrap: anywhere; }
.stk-page .inv-bars { gap: 0; }
.stk-page .inv-bars li { grid-template-columns: minmax(96px, 46%) minmax(40px, 1fr) minmax(max-content, auto); gap: 12px; padding-block: 8px; min-height: 40px;
  border-block-end: 1px solid var(--border); font-size: calc(14px * var(--fs, 1)); }
.stk-page .inv-bars li:last-child { border-block-end: 0; }
.stk-page .inv-bars li.inv-rest { border-top: 0; padding-top: 8px; }
.stk-page .inv-bars li > b { font-weight: 700; }
.stk-page .inv-bar { height: 10px; background: var(--surface-3); }
.stk-page .inv-bar i.tone-green { background: #16a34a; } .stk-page .inv-bar i.tone-orange { background: #f59e0b; } .stk-page .inv-bar i.tone-red { background: #e11d48; }
.stk-page .inv-none { margin: 14px 0 0; }
/* the filters stand on one line (a select is not a whole line here) */
.stk-page #stock-filter select { width: auto; flex: 1 1 140px; max-width: 260px; }
.stk-page #stock-filter select[name=dir] { flex: 0 0 76px; }
.stk-page #stock-filter .cu-search { flex: 2 1 220px; }
[dir="rtl"] #stock-kpis .rd-kpi { background: linear-gradient(260deg, color-mix(in srgb, var(--tone) 13%, var(--surface)) 0%, var(--surface) 62%); }
@media (max-width: 1100px) {
  .stk-page .inv-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stk-page .inv-charts > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .stk-page .inv-charts { grid-template-columns: minmax(0, 1fr); }
  .stk-page .inv-charts > :last-child { grid-column: auto; }
  .stk-page .rd-actions { width: 100%; margin-inline-start: 0; } .stk-page .rd-actions .btn { flex: 1 1 auto; }
  .stk-page .st-hero-tile { width: 54px; height: 54px; border-radius: 14px; } .stk-page .st-hero-tile .icon { width: 26px; height: 26px; }
  .stk-page #stock-filter select { flex: 1 1 140px; max-width: none; }
}
@media (max-width: 560px) {
  #stock-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #stock-kpis .rd-kpi { min-height: 66px; padding: 9px 11px; gap: 10px; border-radius: 14px; }
  #stock-kpis .rd-kpi-icon { width: 40px; height: 40px; border-radius: 10px; } #stock-kpis .rd-kpi-icon .icon { width: 21px; height: 21px; }
  #stock-kpis .rd-kpi-text > span { font-size: calc(12.5px * var(--fs, 1)); white-space: normal; line-height: 1.2; }
  #stock-kpis .rd-kpi-text b { font-size: calc(19px * var(--fs, 1)); }
}
@media (max-width: 760px) { .stk-page #stock-filter .cu-search { order: 0; flex: 1 1 100%; } }
/* B39 (owner 2026-10-12, reference picture): the Delivery zones page */
.zn2 .st-hero { margin-block-end: 16px; gap: 18px; }
.zn2 .st-hero-tile { width: 72px; height: 72px; border-radius: 18px; }
.zn2 .st-hero-tile .icon { width: 34px; height: 34px; }
.zn2 .st-hero .rd-title { flex: 1 1 320px; min-width: 0; }
.zn2 .rd-actions { margin-inline-start: auto; justify-content: flex-end; }
.zn2 .rd-actions .btn { min-height: 48px; padding-inline: 20px; border-radius: 12px; font-weight: 700; }
.zn2 .rd-actions .btn.st-ghost { background: var(--surface); box-shadow: var(--shadow-xs); }
.zn2 .st-tabs { margin-block-end: 16px; padding: 8px; gap: 8px; }
.zn2 .st-tab { min-height: 48px; padding-inline: 20px; font-weight: 600; }
.zn2 .st-tab .icon { width: 20px; height: 20px; }
.zn2 .zn-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, 30%); gap: 16px; align-items: stretch; }
.zn2 .zn-map-card { padding: 14px; gap: 12px; border-radius: 16px; }
.zn2 .zn-search .rd-search input { min-height: 46px; }
.zn2 .zn-search-go { min-height: 46px; padding-inline: 28px; border-radius: 12px; font-weight: 700; }
.zn2 .zn-tools .btn { min-height: 44px; background: var(--surface); }
.zn2 .zn-tools .btn .icon { width: 19px; height: 19px; }
.zn2 .zn-map { height: min(66vh, 640px); min-height: 400px; border-radius: 14px; }
.zn-pin { background: none; border: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); cursor: pointer; }
.zn-pin svg { display: block; width: 30px; height: 38px; }
.zn2 .zn-side { gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-xs);
  max-height: none; overflow: visible; align-self: stretch; }
.zn2 .zn-side:has(> .zn-form) { padding: 0; border: 0; background: none; box-shadow: none; }
.zn2 .zn-grid:not(.zn-max) .zn-side:has(> .zn-card) { max-height: calc(min(66vh, 640px) + 152px); overflow: auto; }
.zn-side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding: 2px 4px 2px 6px; }
.zn-side-head h2 { margin: 0; font-size: calc(19px * var(--fs, 1)); font-weight: 800; }
.zn-side-head h2 .muted { font-weight: 600; }
.zn-sort { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding-inline-start: 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); font-size: calc(13.5px * var(--fs, 1)); color: var(--muted); white-space: nowrap; }
.zn-sort select { width: auto; min-height: 38px; padding-block: 0; padding-inline-start: 2px; border: 0; background-color: transparent; box-shadow: none; font-weight: 600; color: var(--text); }
.zn2 .zn-card { padding: 12px 14px; gap: 8px; border-radius: 14px; border-color: color-mix(in srgb, var(--zn, var(--primary)) 32%, var(--border)); box-shadow: none; }
.zn-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; }
.zn2 .zn-card-head { flex: 1 1 180px; min-width: 0; gap: 8px 10px; }
.zn2 .zn-card-head strong { font-size: calc(15px * var(--fs, 1)); overflow-wrap: anywhere; }
.zn2 .zn-dot { width: 16px; height: 16px; }
.zn2 .zn-card-actions { flex: none; flex-wrap: nowrap; gap: 6px; margin-inline-start: auto; }
.zn2 .zn-card-actions .btn-icon { width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 10px; }
.zn2 .zn-card-actions .btn-icon .icon { width: 17px; height: 17px; }
.zn2 .zn-act-edit { color: #2563eb; }
.zn2 .zn-act-delete { color: #dc2626; border-color: color-mix(in srgb, #dc2626 35%, var(--border)); }
.zn2 .zn-card-line { font-size: calc(14.5px * var(--fs, 1)); }
.zn2 .zn-card-line .icon { width: 17px; height: 17px; }
@media (max-width: 1100px) {
  .zn2 .zn-grid { grid-template-columns: minmax(0, 1fr); }
  .zn2 .zn-grid:not(.zn-max) .zn-side:has(> .zn-card) { max-height: none; overflow: visible; }
  .zn2 .zn-map { height: 56vh; }
}
@media (max-width: 720px) {
  .zn2 .rd-actions { width: 100%; margin-inline-start: 0; } .zn2 .rd-actions .btn { flex: 1 1 auto; justify-content: center; }
  .zn2 .st-hero-tile { width: 54px; height: 54px; border-radius: 14px; } .zn2 .st-hero-tile .icon { width: 26px; height: 26px; }
  .zn2 .zn-map-card, .zn2 .zn-side { padding: 10px; }
  .zn2 .zn-tools .btn { flex: 1 1 auto; justify-content: center; }
  .zn2 .zn-map { min-height: 340px; }
}
.zn2 .zn-search { flex-wrap: nowrap; } .zn2 .zn-search .rd-search { flex: 1 1 0; min-width: 0; }
/* B40 (owner 2026-10-12, reference picture): the Warehouses page */
.wh2 .st-hero { margin-block-end: 16px; gap: 18px; }
.wh2 .st-hero-tile { width: 72px; height: 72px; border-radius: 18px; }
.wh2 .st-hero-tile .icon { width: 34px; height: 34px; }
.wh2 .st-hero .rd-title { flex: 1 1 300px; min-width: 0; }
.wh2 .rd-actions { margin-inline-start: auto; justify-content: flex-end; }
.wh2 .rd-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding-inline: 20px; border-radius: 12px; font-weight: 700; }
.wh2 .rd-actions .btn:not(.btn-primary) { background: var(--surface); box-shadow: var(--shadow-xs); font-weight: 600; }
.wh2 .rd-actions .btn .icon { width: 19px; height: 19px; }
#wh-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-block-end: 18px; }
#wh-kpis .rd-kpi { container-type: inline-size; min-height: 92px; padding: 15px 20px; gap: 16px; border-radius: 16px; box-shadow: var(--shadow-xs);
  border: 1px solid color-mix(in srgb, var(--tone) 38%, transparent);
  background: linear-gradient(100deg, color-mix(in srgb, var(--tone) 14%, var(--surface)) 0%, var(--surface) 64%); }
[dir="rtl"] #wh-kpis .rd-kpi { background: linear-gradient(260deg, color-mix(in srgb, var(--tone) 14%, var(--surface)) 0%, var(--surface) 64%); }
#wh-kpis .rd-kpi-icon { width: 58px; height: 58px; border-radius: 15px; }
#wh-kpis .rd-kpi-icon .icon { width: 29px; height: 29px; }
#wh-kpis .rd-kpi-text { flex: 1 1 auto; padding-inline-end: 62px; }
#wh-kpis .rd-kpi-text > span { font-size: calc(15.5px * var(--fs, 1)); }
#wh-kpis .rd-kpi-text b { font-size: calc(30px * var(--fs, 1)); line-height: 1.2; }
#wh-kpis .rd-kpi-deco { inset-inline-end: 22px; width: 50px; height: 44px; }
@container (max-width: 270px) {
  #wh-kpis .rd-kpi-deco { inset-inline-end: 12px; width: 32px; height: 28px; top: auto; bottom: 14px; transform: none; }
  #wh-kpis .rd-kpi-text { padding-inline-end: 0; }
  #wh-kpis .rd-kpi-text b { padding-inline-end: 40px; }
  #wh-kpis .rd-kpi-icon { width: 50px; height: 50px; border-radius: 13px; }
}
@container (max-width: 170px) {
  #wh-kpis .rd-kpi-deco { display: none; }
  #wh-kpis .rd-kpi-text b { padding-inline-end: 0; }
}
.wh2 .wh-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.wh2 .wh-panel { grid-column: span 2; padding: 0; gap: 0; border-radius: 16px; overflow: hidden; min-width: 0; }
.wh2 #wh-sections, .wh2 #wh-bins { grid-column: span 3; }
.wh2 .wh-panel-head { padding: 12px 16px; border-block-end: 1px solid var(--border); gap: 10px; }
.wh2 .wh-panel-head h2 { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: calc(17px * var(--fs, 1)); font-weight: 800; }
.wh2 .wh-panel-head h2 .icon { flex: none; width: 26px; height: 26px; color: #1e3a8a; }
.wh2 .wh-panel-head h2 span { min-width: 0; overflow-wrap: anywhere; }
.wh2 .wh-panel-head .btn { flex: none; min-height: 40px; padding-inline: 18px; border-radius: 11px; font-weight: 700; gap: 7px; }
.wh2 .wh-hint { padding: 8px 16px 0; }
.wh2 .wh-list { gap: 0; max-height: 384px; padding: 0 8px 8px; }
.wh2 .wh-row, .wh2 .wh-head { display: flex; align-items: center; gap: 4px; padding-inline: 8px; border: 0; border-radius: 0; border-block-end: 1px solid var(--border); }
.wh2 .wh-row:last-child { border-block-end: 0; }
.wh2 .wh-row.is-on { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
[dir="rtl"] .wh2 .wh-row.is-on { box-shadow: inset -3px 0 0 var(--primary); }
.wh2 .wh-head { position: sticky; top: 0; z-index: 1; min-height: 40px; background: var(--surface); color: var(--muted); font-size: calc(11.5px * var(--fs, 1)); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; }
.wh2 .wh-no { flex: 0 0 26px; color: var(--muted); font-size: calc(13px * var(--fs, 1)); text-align: start; }
.wh2 .wh-row-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 7px 4px; min-height: 52px; text-align: start; }
.wh2 .wh-head .wh-row-name { min-height: 0; padding-block: 0; }
.wh2 .wh-head .wh-name { padding-inline-start: 0; }
.wh2 .wh-av { flex: none; width: 36px; height: 36px; color: #fff; font-size: calc(13px * var(--fs, 1)); font-weight: 800; }
.wh2 .wh-av .icon { width: 19px; height: 19px; }
.wh2 .wh-av.av-0 { background: #2563eb; } .wh2 .wh-av.av-1 { background: #e11d48; } .wh2 .wh-av.av-2 { background: #0d9488; } .wh2 .wh-av.av-3 { background: #db2777; }
.wh2 .wh-av.av-4 { background: #3b82f6; } .wh2 .wh-av.av-5 { background: #f59e0b; } .wh2 .wh-av.av-6 { background: #7c3aed; } .wh2 .wh-av.av-7 { background: #1e3a8a; }
.wh2 .wh-name { flex: 1 1 auto; min-width: 76px; display: flex; flex-direction: column; gap: 1px; overflow: visible; }
.wh2 .wh-row .wh-name strong { font-size: calc(14px * var(--fs, 1)); font-weight: 700; overflow-wrap: break-word; line-height: 1.25; }
.wh2 .wh-sub { font-size: calc(12.5px * var(--fs, 1)); line-height: 1.3; overflow-wrap: break-word; }
.wh2 .wh-sub .badge { margin-inline-start: 4px; }
.wh2 .wh-count { flex: 0 0 98px; text-align: start; font-size: calc(14px * var(--fs, 1)); color: var(--text-2); }
.wh2 .wh-head .wh-count { color: inherit; font-size: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh2 .wh-code { flex: 0 0 78px; text-align: center; font-family: inherit; white-space: nowrap; }
.wh2 .wh-head .wh-code { text-align: start; }
.wh2 .wh-row .wh-code { padding: 5px 4px; border-radius: 8px; background: var(--surface-3); color: var(--text-2); font-size: calc(12.5px * var(--fs, 1)); }
.wh2 .row-actions.inline { flex: 0 0 72px; display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; min-width: 0; }
.wh2 .wh-acts-3 .row-actions.inline { flex-basis: 110px; }
.wh2 .wh-head .row-actions.inline { justify-content: center; }
.wh2 .wh-row .btn-icon { width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 9px; }
.wh2 .wh-row .btn-icon .icon { width: 17px; height: 17px; }
.wh2 .wh-act-edit { color: #2563eb; border-color: color-mix(in srgb, #2563eb 30%, var(--border)); }
.wh2 .wh-act-off { color: #dc2626; border-color: color-mix(in srgb, #dc2626 35%, var(--border)); }
.wh2 .wh-act-on { color: #16a34a; border-color: color-mix(in srgb, #16a34a 35%, var(--border)); }
.wh2 .wh-empty { padding: 22px 12px; text-align: center; }
/* Laptops: the three panels stay beside each other; the code chip moves under the name to leave the name its room. */
@media (max-width: 1560px) {
  .wh2 .wh-grid { gap: 12px; }
  .wh2 .wh-panel-head { padding: 10px 12px; } .wh2 .wh-panel-head .btn { padding-inline: 12px; }
  .wh2 .wh-panel-head h2 { gap: 8px; font-size: calc(16px * var(--fs, 1)); } .wh2 .wh-panel-head h2 .icon { width: 22px; height: 22px; }
  .wh2 .wh-list { padding-inline: 4px; }
  .wh2 .wh-row, .wh2 .wh-head { padding-inline: 6px; }
  .wh2 .wh-no { flex-basis: 18px; }
  .wh2 .wh-row-name { flex-wrap: wrap; gap: 4px 8px; }
  .wh2 .wh-av { width: 32px; height: 32px; font-size: calc(12px * var(--fs, 1)); }
  .wh2 .wh-name { flex: 1 1 0; }
  .wh2 .wh-count { flex-basis: 34px; text-align: end; } .wh2 .wh-head .wh-count { visibility: hidden; }
  .wh2 .wh-row .wh-code { flex: 0 0 auto; order: 5; margin-inline-start: 40px; padding: 3px 8px; font-size: calc(12px * var(--fs, 1)); }
  .wh2 .wh-row .wh-code::after { content: ""; }
  .wh2 .wh-head .wh-code { display: none; }
  .wh2 .wh-row .wh-name { flex-basis: calc(100% - 82px); }
  .wh2 .wh-row .wh-name:has(+ .wh-code) { flex-basis: calc(100% - 44px); }
  .wh2 .row-actions.inline { flex-basis: 66px; gap: 5px; } .wh2 .wh-acts-3 .row-actions.inline { flex-basis: 100px; }
  .wh2 .wh-row .btn-icon { width: 30px; height: 30px; min-height: 30px; }
}
@media (max-width: 1180px) {
  .wh2 .wh-panel, .wh2 #wh-sections, .wh2 #wh-bins { grid-column: span 3; }
  .wh2 #wh-warehouses { grid-column: 1 / -1; }
}
@media (max-width: 1100px) { #wh-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  #wh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wh2 .wh-panel, .wh2 #wh-sections, .wh2 #wh-bins, .wh2 #wh-warehouses { grid-column: 1 / -1; }
  .wh2 .rd-actions { width: 100%; margin-inline-start: 0; } .wh2 .rd-actions .btn { flex: 1 1 auto; }
  .wh2 .st-hero-tile { width: 54px; height: 54px; border-radius: 14px; } .wh2 .st-hero-tile .icon { width: 26px; height: 26px; }
}
@media (max-width: 560px) {
  #wh-kpis .rd-kpi { min-height: 64px; padding: 9px 11px; gap: 10px; border-radius: 14px; }
  #wh-kpis .rd-kpi-icon { width: 40px; height: 40px; border-radius: 10px; } #wh-kpis .rd-kpi-icon .icon { width: 21px; height: 21px; }
  #wh-kpis .rd-kpi-text > span { font-size: calc(12.5px * var(--fs, 1)); white-space: normal; line-height: 1.2; }
  #wh-kpis .rd-kpi-text b { font-size: calc(19px * var(--fs, 1)); }
  .wh2 .wh-count { flex-basis: 44px; } .wh2 .wh-head .wh-count { visibility: hidden; }
  .wh2 .wh-code { min-width: 0; } .wh2 .wh-head .wh-code { display: none; }
  .wh2 .wh-row-name { gap: 8px; flex-wrap: wrap; } .wh2 .wh-av { width: 32px; height: 32px; }
  .wh2 .wh-no { flex-basis: 20px; }
}
/* B41 (owner 2026-10-12, reference picture): Stock documents (and its sister views: transfers, stock counts, posting) */
.inv-page:is(:has(> #mov-types), .pur-page) .st-hero { margin-block-end: 16px; gap: 18px; }
.inv-page:is(:has(> #mov-types), .pur-page) .st-hero-tile { width: 72px; height: 72px; border-radius: 18px; }
.inv-page:is(:has(> #mov-types), .pur-page) .st-hero-tile .icon { width: 34px; height: 34px; }
.inv-page:is(:has(> #mov-types), .pur-page) .st-hero .rd-title { flex: 1 1 320px; min-width: 0; }
.inv-page:is(:has(> #mov-types), .pur-page) .rd-actions { margin-inline-start: auto; justify-content: flex-end; }
.inv-page:is(:has(> #mov-types), .pur-page) .rd-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding-inline: 20px; border-radius: 12px; font-weight: 700; }
.inv-page:is(:has(> #mov-types), .pur-page) .rd-actions .btn:not(.btn-primary) { background: var(--surface); box-shadow: var(--shadow-xs); }
#mov-types { padding: 8px; gap: 8px; }
#mov-types .st-tab { min-height: 48px; padding-inline: 20px; font-weight: 600; background: var(--surface); }
#mov-types .st-tab .icon { width: 20px; height: 20px; }
.inv-page:is(:has(> #mov-types), .pur-page) .mov-grid { grid-template-columns: minmax(320px, 37%) minmax(0, 1fr); gap: 18px; margin-top: 16px; }
.inv-page:is(:has(> #mov-types), .pur-page) .mov-list, .inv-page:is(:has(> #mov-types), .pur-page) .mov-work { border-radius: 16px; }
.inv-page:is(:has(> #mov-types), .pur-page) .mov-list { padding: 14px; gap: 12px; container-type: inline-size; }
.mov-filter { display: flex; align-items: center; gap: 10px; }
.mov-filter .rd-search { flex: 1 1 0; min-width: 0; width: auto; }
.mov-filter .rd-search input { min-height: 46px; }
.mov-filter-go { flex: none; width: 48px; height: 46px; border-radius: 12px; }
.mov-filter-go .icon { width: 19px; height: 19px; }
.inv-page:is(:has(> #mov-types), .pur-page) .mov-list .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.inv-page:is(:has(> #mov-types), .pur-page) .mov-list .chips .chip { min-height: 36px; padding: 5px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-weight: 600; cursor: pointer; }
.inv-page:is(:has(> #mov-types), .pur-page) .mov-list .chips .chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.inv-page:is(:has(> #mov-types), .pur-page) .mov-list .wh-list { gap: 8px; max-height: 68vh; padding-inline-end: 2px; }
.inv-page:is(:has(> #mov-types), .pur-page) .mov-list .wh-row { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.inv-page:is(:has(> #mov-types), .pur-page) .mov-list .wh-row.is-on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.inv-page:is(:has(> #mov-types), .pur-page) .mov-list .wh-row-name { padding: 12px 14px; border-radius: 14px; }
.mov-cards .wh-row-name { flex-direction: row !important; align-items: center !important; gap: 12px !important; text-align: start; }
.mov-card-icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; }
.mov-card-icon .icon { width: 22px; height: 22px; }
.mov-card-icon.tone-0 { background: #d1fae5; color: #059669; } .mov-card-icon.tone-1 { background: #dbeafe; color: #2563eb; }
.mov-card-icon.tone-2 { background: #fee2e2; color: #dc2626; } .mov-card-icon.tone-3 { background: #fef3c7; color: #d97706; }
.mov-cards .wh-row.is-on .mov-card-icon { background: var(--primary); color: #fff; }
.mov-card-main { flex: 1 1 auto; min-width: 0; display: flex !important; flex-direction: column; align-items: flex-start; justify-content: flex-start !important; gap: 2px !important; flex-wrap: nowrap !important; }
.mov-card-main strong { font-size: calc(15px * var(--fs, 1)); font-weight: 800; white-space: nowrap; }
.mov-card-main .muted { font-size: calc(13.5px * var(--fs, 1)); overflow-wrap: break-word; }
.mov-card-end { flex: none; display: flex !important; align-items: center; gap: 10px !important; flex-wrap: wrap !important; justify-content: flex-end !important; max-width: 46%; }
.mov-card-amount { font-size: calc(14px * var(--fs, 1)); color: var(--text-2); white-space: nowrap; }
.mov-card-go { flex: none; display: grid !important; place-items: center; color: var(--muted); }
.mov-card-go .icon { width: 18px; height: 18px; }
[dir="rtl"] .mov-card-go .icon { transform: scaleX(-1); }
.inv-page:is(:has(> #mov-types), .pur-page) .mov-work { padding: 18px 20px; gap: 14px; }
.inv-page:is(:has(> #mov-types), .pur-page) .mov-doc-head { align-items: center; }
.inv-page:is(:has(> #mov-types), .pur-page) .mov-doc-head h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; font-size: calc(22px * var(--fs, 1)); font-weight: 800; }
.mov-doc-icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #d1fae5; color: #059669; }
.mov-doc-icon .icon { width: 24px; height: 24px; }
.mov-doc-when { display: inline-flex; align-items: flex-start; gap: 8px; text-align: start; font-size: calc(14px * var(--fs, 1)); }
.mov-doc-when .icon { flex: none; width: 18px; height: 18px; margin-block-start: 2px; }
.mov-doc-when > span { display: flex; flex-direction: column; gap: 2px; }
.mov-doc-when small { font-size: inherit; }
dl.details.mov-facts { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: 14px 22px; padding: 16px 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
dl.details.mov-facts dt { font-weight: 600; }
dl.details.mov-facts dd { overflow-wrap: anywhere; }
.mov-h { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; text-transform: none; letter-spacing: 0; color: var(--text); font-size: calc(16.5px * var(--fs, 1)); font-weight: 800; }
.mov-h .icon { width: 20px; height: 20px; }
.inv-page:is(:has(> #mov-types), .pur-page) #mov-lines { border-collapse: separate; border-spacing: 0; }
.inv-page:is(:has(> #mov-types), .pur-page) .mov-work .table-wrap { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.inv-page:is(:has(> #mov-types), .pur-page) #mov-lines thead th { background: var(--surface-2); font-size: calc(12px * var(--fs, 1)); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
#mov-lines .mov-no { width: 1%; color: var(--muted); font-weight: 700; }
#mov-lines .mov-code { display: block; font-weight: 700; }
#mov-lines .mov-item { color: var(--muted); }
.inv-page:is(:has(> #mov-types), .pur-page) #mov-lines tfoot th { background: var(--surface-2); font-size: calc(15px * var(--fs, 1)); font-weight: 800; border-block-start: 1px solid var(--border); }
.mov-note { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 18px; border: 1px solid color-mix(in srgb, #2563eb 25%, var(--border)); border-radius: 14px;
  background: color-mix(in srgb, #2563eb 7%, var(--surface)); color: var(--text); font-size: calc(14.5px * var(--fs, 1)); }
.mov-note .icon { flex: none; width: 20px; height: 20px; color: #2563eb; }
@media (max-width: 1000px) {
  .inv-page:is(:has(> #mov-types), .pur-page) .mov-grid { grid-template-columns: minmax(0, 1fr); }
  .inv-page:is(:has(> #mov-types), .pur-page) .mov-list .wh-list { max-height: 360px; }
}
@media (max-width: 720px) {
  .inv-page:is(:has(> #mov-types), .pur-page) .rd-actions { width: 100%; margin-inline-start: 0; } .inv-page:is(:has(> #mov-types), .pur-page) .rd-actions .btn { flex: 1 1 auto; }
  .inv-page:is(:has(> #mov-types), .pur-page) .st-hero-tile { width: 54px; height: 54px; border-radius: 14px; } .inv-page:is(:has(> #mov-types), .pur-page) .st-hero-tile .icon { width: 26px; height: 26px; }
  dl.details.mov-facts { grid-template-columns: max-content minmax(0, 1fr); padding: 12px 14px; }
  .mov-card-end { flex-direction: column; align-items: flex-end; gap: 4px !important; }
  .inv-page:is(:has(> #mov-types), .pur-page) .mov-work { padding: 14px; }
}
@container (max-width: 440px) {
  .mov-card-end { flex-direction: column; align-items: flex-end !important; gap: 4px !important; max-width: none; }
  .mov-cards .wh-row-name { gap: 10px !important; padding-inline: 10px !important; }
  .mov-card-icon { width: 40px; height: 40px; border-radius: 11px; }
}
/* B42 (owner 2026-10-12, reference picture): the Stock reports page */
.rpt-page .st-hero { margin-block-end: 16px; gap: 18px; }
.rpt-page .st-hero-tile { width: 72px; height: 72px; border-radius: 18px; }
.rpt-page .st-hero-tile .icon { width: 34px; height: 34px; }
.rpt-page .rpt-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; }
.rpt-page .rpt-tabs .chip { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 8px 20px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text); font-size: calc(15px * var(--fs, 1)); font-weight: 600; box-shadow: var(--shadow-xs); cursor: pointer; }
.rpt-page .rpt-tabs .chip .icon { flex: none; width: 20px; height: 20px; }
.rpt-page .rpt-tabs .chip:hover { border-color: var(--primary); }
.rpt-page .rpt-tabs .chip.active { border-color: #22c55e; background: color-mix(in srgb, #22c55e 16%, var(--surface)); color: #15803d; box-shadow: 0 0 0 1px #22c55e; }
[data-theme="dark"] .rpt-page .rpt-tabs .chip.active { color: #4ade80; }
.rpt-page .rpt-card { padding: 20px 22px; border-radius: 16px; }
.rpt-page .rpt-card-icon { width: 50px; height: 50px; border-radius: 13px; }
.rpt-page .rpt-card-icon .icon { width: 26px; height: 26px; }
.rpt-page .rpt-card-head h2 { font-size: calc(19px * var(--fs, 1)); }
.rpt-page .rpt-card-head h2 .muted { font-size: calc(16px * var(--fs, 1)); }
.rpt-page .rpt-card-head p { font-size: calc(14.5px * var(--fs, 1)); }
.rpt-page .rpt-field { font-size: calc(15px * var(--fs, 1)); gap: 8px; }
.rpt-page .rpt-field input, .rpt-page .rpt-field select { min-height: 50px; border-radius: 12px; font-size: calc(15px * var(--fs, 1)); }
.rpt-ico { position: relative; display: block; }
.rpt-ico > .icon { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--text-2); pointer-events: none; z-index: 1; }
.rpt-ico > input, .rpt-ico > select { padding-inline-start: 50px; }
.rpt-page .rpt-search .icon { inset-inline-start: 16px; width: 20px; height: 20px; }
.rpt-page .rpt-field .rpt-search input { padding-inline-start: 50px; }
.rpt-page .rpt-actions .btn { min-height: 50px; padding-inline: 26px; border-radius: 12px; font-size: calc(15px * var(--fs, 1)); font-weight: 700; }
.rpt-page .rpt-tools .btn { min-height: 48px; padding-inline: 20px; border-radius: 12px; font-weight: 600; background: var(--surface); box-shadow: var(--shadow-xs); }
.rpt-page .rpt-result-search { width: 320px; }
.rpt-page .rpt-result-search input { min-height: 48px; border-radius: 12px; }
.rpt-tools-off .btn[disabled], .rpt-tools-off input[disabled] { opacity: .6; cursor: default; }
.rpt-page #rpt-rows thead th, .rpt-page #rpt-summary thead th { background: var(--surface-2); font-size: calc(12px * var(--fs, 1)); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@media (max-width: 720px) {
  .rpt-page .st-hero-tile { width: 54px; height: 54px; border-radius: 14px; } .rpt-page .st-hero-tile .icon { width: 26px; height: 26px; }
  .rpt-page .rpt-tabs { gap: 8px; } .rpt-page .rpt-tabs .chip { min-height: 44px; padding-inline: 14px; flex: 1 1 auto; justify-content: center; }
  .rpt-page .rpt-card { padding: 14px; }
  .rpt-page .rpt-actions .btn { flex: 1 1 auto; justify-content: center; }
  .rpt-page .rpt-tools .btn { flex: 1 1 auto; justify-content: center; }
}
/* B43 (owner 2026-10-12, reference picture): the Suppliers page */
.sup-page .st-hero { margin-block-end: 16px; gap: 18px; }
.sup-page .st-hero-tile { width: 72px; height: 72px; border-radius: 18px; }
.sup-page .st-hero-tile .icon { width: 34px; height: 34px; }
.sup-page .st-hero .rd-title { flex: 1 1 300px; min-width: 0; }
.sup-page .rd-actions { margin-inline-start: auto; justify-content: flex-end; }
.sup-page .rd-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding-inline: 22px; border-radius: 12px; font-weight: 700; }
.sup-page .rd-actions .btn:not(.btn-primary) { background: var(--surface); box-shadow: var(--shadow-xs); }
.sup-page .rd-actions .btn .icon { width: 19px; height: 19px; }
#sup-kpis { gap: 18px; margin-block-end: 18px; }
#sup-kpis .rd-kpi { container-type: inline-size; min-height: 96px; padding: 16px 20px; gap: 18px; border-radius: 16px; box-shadow: var(--shadow-xs);
  border: 1px solid color-mix(in srgb, var(--tone) 38%, transparent);
  background: linear-gradient(100deg, color-mix(in srgb, var(--tone) 14%, var(--surface)) 0%, var(--surface) 64%); }
[dir="rtl"] #sup-kpis .rd-kpi { background: linear-gradient(260deg, color-mix(in srgb, var(--tone) 14%, var(--surface)) 0%, var(--surface) 64%); }
#sup-kpis .rd-kpi-icon { width: 60px; height: 60px; border-radius: 15px; }
#sup-kpis .rd-kpi-icon .icon { width: 30px; height: 30px; }
#sup-kpis .rd-kpi-text { flex: 1 1 auto; padding-inline-end: 62px; }
#sup-kpis .rd-kpi-text > span { font-size: calc(15.5px * var(--fs, 1)); }
#sup-kpis .rd-kpi-text b { font-size: calc(31px * var(--fs, 1)); line-height: 1.2; }
#sup-kpis .rd-kpi-deco { inset-inline-end: 22px; width: 52px; height: 46px; }
#sup-kpis .it-kpi.is-on { outline-offset: -2px; }
@container (max-width: 270px) {
  #sup-kpis .rd-kpi-deco { inset-inline-end: 12px; width: 32px; height: 28px; top: auto; bottom: 14px; transform: none; }
  #sup-kpis .rd-kpi-text { padding-inline-end: 0; }
  #sup-kpis .rd-kpi-text b { padding-inline-end: 40px; }
  #sup-kpis .rd-kpi-icon { width: 50px; height: 50px; border-radius: 13px; }
}
@container (max-width: 170px) {
  #sup-kpis .rd-kpi-deco { display: none; }
  #sup-kpis .rd-kpi-text b { padding-inline-end: 0; }
}
.sup-page .sup-bar { padding: 14px; border-radius: 16px; gap: 14px; margin-block-end: 18px; flex-wrap: nowrap; }
.sup-page .sup-bar .cu-search { flex: 1 1 0; min-width: 0; }
.sup-page .sup-bar .cu-apply { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding-inline: 22px; }
.sup-page .sup-bar .cu-apply .icon { width: 18px; height: 18px; }
.sup-page #sup-table { border-radius: 16px; padding: 14px; }
.sup-page #sup-table .table-scroll { border: 1px solid var(--border); border-radius: 12px; }
.sup-page #sup-table thead th { background: var(--surface-2); padding-block: 14px; }
.sup-page #sup-table td { padding-block: 13px; font-size: calc(15px * var(--fs, 1)); vertical-align: middle; }
.sup-page #sup-table td strong { font-weight: 800; }
.sup-page #sup-table .row-actions.inline { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.sup-page #sup-table .row-actions .btn { min-height: 38px; border-radius: 10px; font-weight: 700; white-space: nowrap; }
.sup-page #sup-table .row-actions .btn-icon { width: 38px; padding: 0; color: #1e3a8a; }
.sup-page #sup-table .pager { padding: 12px 4px 0; }
@media (max-width: 720px) {
  .sup-page .rd-actions { width: 100%; margin-inline-start: 0; } .sup-page .rd-actions .btn { flex: 1 1 auto; }
  .sup-page .st-hero-tile { width: 54px; height: 54px; border-radius: 14px; } .sup-page .st-hero-tile .icon { width: 26px; height: 26px; }
  .sup-page .sup-bar { padding: 10px; gap: 10px; } .sup-page .sup-bar .cu-apply { padding-inline: 16px; min-height: 46px; }
  .sup-page #sup-table { padding: 0; } .sup-page #sup-table .table-scroll { border: 0; }
}
@media (max-width: 560px) {
  #sup-kpis { gap: 10px; }
  #sup-kpis .rd-kpi { min-height: 64px; padding: 9px 11px; gap: 10px; border-radius: 14px; }
  #sup-kpis .rd-kpi-icon { width: 40px; height: 40px; border-radius: 10px; } #sup-kpis .rd-kpi-icon .icon { width: 21px; height: 21px; }
  #sup-kpis .rd-kpi-text > span { font-size: calc(12.5px * var(--fs, 1)); white-space: normal; line-height: 1.2; }
  #sup-kpis .rd-kpi-text b { font-size: calc(19px * var(--fs, 1)); }
  #sup-kpis .rd-kpi-deco { display: none; }
}
/* B44 (owner 2026-10-12, reference picture): the Packing page */
.pk-hero { margin-block-end: 16px; gap: 18px; }
.pk-hero .st-hero-tile { width: 72px; height: 72px; border-radius: 18px; }
.pk-hero .st-hero-tile .icon { width: 34px; height: 34px; }
.pk-hero .rd-title { flex: 1 1 300px; min-width: 0; }
.pk-hero .rd-actions { margin-inline-start: auto; justify-content: flex-end; flex-wrap: nowrap; }
.pk-hero .rd-actions .rd-search { width: min(380px, 34vw); }
.pk-hero .rd-actions .rd-search input { min-height: 48px; border-radius: 12px; background: var(--surface); }
.pk-hero .rd-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding-inline: 20px; border-radius: 12px; font-weight: 700; white-space: nowrap; }
.pk-hero .rd-actions .btn:not(.btn-primary) { background: var(--surface); box-shadow: var(--shadow-xs); }
.pk-hero .rd-actions .btn .icon { width: 19px; height: 19px; }
.pk-tabs { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; border: 0; background: none; box-shadow: none; margin-block-end: 18px; }
.pk-tabs .st-tab { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  color: var(--text); font: inherit; font-size: calc(15.5px * var(--fs, 1)); font-weight: 600; box-shadow: var(--shadow-xs); cursor: pointer; }
.pk-tabs .st-tab .icon { width: 22px; height: 22px; }
.pk-tabs .st-tab:hover { border-color: var(--primary); }
.pk-tabs .st-tab[aria-selected="true"] { border-color: #22c55e; background: color-mix(in srgb, #22c55e 14%, var(--surface)); box-shadow: 0 0 0 1px #22c55e; }
.pk-filter { display: block; padding: 16px 20px; border-radius: 16px; margin-block-end: 18px; }
.pk-filter label { display: flex; flex-direction: column; gap: 6px; width: min(360px, 100%); font-size: calc(14.5px * var(--fs, 1)); color: var(--text-2); }
.pk-select { position: relative; display: block; }
.pk-select .icon { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--text-2); pointer-events: none; }
.pk-select select { width: 100%; min-height: 46px; padding-inline-start: 48px; border-radius: 12px; font-weight: 600; }
.pk-table { border-radius: 16px; }
.pk-table thead th { padding-block: 14px; white-space: normal; line-height: 1.35; }
.pk-table td { padding-block: 12px; vertical-align: middle; font-size: calc(14.5px * var(--fs, 1)); }
.pk-table .order-id strong, .pk-table .cell-2 strong { font-weight: 800; }
.pk-table .pack-photo-count { gap: 8px; font-size: calc(15px * var(--fs, 1)); }
.pk-table .pack-photo-count svg { width: 20px; height: 20px; }
.pk-table .row-actions { gap: 8px; align-items: center; }
.pk-table .row-actions .btn-icon { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 10px; }
.pk-table .row-actions .btn-icon .icon { width: 19px; height: 19px; }
.pk-table .pk-done { min-height: 40px; padding-inline: 16px; border-radius: 10px; font-weight: 700; }
.pk-table td .pack-with { display: flex; margin-block-start: 4px; font-size: calc(13.5px * var(--fs, 1)); }
.pk-count { margin: 12px 6px 0; font-size: calc(14.5px * var(--fs, 1)); }
@media (max-width: 860px) {
  .pk-hero .rd-actions { width: 100%; margin-inline-start: 0; } .pk-hero .rd-actions .rd-search { flex: 1 1 0; width: auto; min-width: 0; }
  .pk-hero .st-hero-tile { width: 54px; height: 54px; border-radius: 14px; } .pk-hero .st-hero-tile .icon { width: 26px; height: 26px; }
  .pk-tabs { gap: 8px; } .pk-tabs .st-tab { flex: 1 1 auto; justify-content: center; min-height: 46px; padding-inline: 14px; }
  .pk-filter { padding: 12px; }
}
/* B45 (owner 2026-10-12, reference picture): Purchase invoices (the list / detail look is shared with Stock documents) */
#pur-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-block-end: 0; }
#pur-kpis .rd-kpi { min-height: 104px; padding: 18px 26px; gap: 28px; border-radius: 16px; box-shadow: var(--shadow-xs);
  border: 1px solid color-mix(in srgb, var(--tone) 38%, transparent);
  background: linear-gradient(100deg, color-mix(in srgb, var(--tone) 14%, var(--surface)) 0%, var(--surface) 64%); }
[dir="rtl"] #pur-kpis .rd-kpi { background: linear-gradient(260deg, color-mix(in srgb, var(--tone) 14%, var(--surface)) 0%, var(--surface) 64%); }
#pur-kpis .rd-kpi-icon { width: 64px; height: 64px; border-radius: 16px; }
#pur-kpis .rd-kpi-icon .icon { width: 32px; height: 32px; }
#pur-kpis .rd-kpi-text { flex: 1 1 auto; padding-inline-end: 76px; }
#pur-kpis .rd-kpi-text > span { font-size: calc(15.5px * var(--fs, 1)); }
#pur-kpis .rd-kpi-text b { font-size: calc(30px * var(--fs, 1)); line-height: 1.25; white-space: nowrap; }
#pur-kpis .rd-kpi-deco { inset-inline-end: 30px; width: 62px; height: 54px; }
.pur-page .mov-cards .wh-row-name { align-items: flex-start !important; }
.pur-page .mov-card-icon { margin-block-start: 2px; }
.pur-page .mov-card-icon.tone-4 { background: #f1f5f9; color: #475569; }
.pur-page .mov-card-end { flex-direction: column; align-items: flex-end !important; justify-content: space-between !important; align-self: stretch; gap: 6px !important; max-width: none; flex-wrap: nowrap !important; }
.pur-card-date { font-size: calc(13.5px * var(--fs, 1)); white-space: nowrap; }
.pur-page .mov-card-amount { font-size: calc(15.5px * var(--fs, 1)); }
.pur-card-badge { margin-block-start: 4px; }
.pur-page .mov-card-go { align-self: center; }
.pur-doc-end { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.pur-doc-end .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding-inline: 16px; border-radius: 11px; font-weight: 700; }
.pur-doc-end .btn .icon { width: 18px; height: 18px; }
.pur-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 420px; padding: 30px 16px; text-align: center; }
.pur-empty-icon { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: var(--surface-3); color: var(--text-2); margin-block-end: 14px; }
.pur-empty-icon .icon { width: 44px; height: 44px; }
.pur-empty strong { font-size: calc(23px * var(--fs, 1)); font-weight: 800; }
.pur-empty .muted { font-size: calc(16px * var(--fs, 1)); }
.pur-empty .btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding-inline: 30px; border-radius: 12px; font-weight: 700; margin-block-start: 18px; }
.pur-page #pur-lines thead th, .pur-page #pur-receipts thead th, .pur-page #pur-returns thead th { background: var(--surface-2); font-size: calc(12px * var(--fs, 1)); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pur-page dl.details#pur-view { padding: 16px 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
@media (max-width: 720px) {
  #pur-kpis { gap: 10px; }
  #pur-kpis .rd-kpi { min-height: 70px; padding: 10px 12px; gap: 10px; }
  #pur-kpis .rd-kpi-icon { width: 42px; height: 42px; border-radius: 11px; } #pur-kpis .rd-kpi-icon .icon { width: 22px; height: 22px; }
  #pur-kpis .rd-kpi-text { padding-inline-end: 0; } #pur-kpis .rd-kpi-deco { display: none; }
  #pur-kpis .rd-kpi-text > span { font-size: calc(12.5px * var(--fs, 1)); white-space: normal; line-height: 1.2; }
  #pur-kpis .rd-kpi-text b { font-size: calc(19px * var(--fs, 1)); }
  .pur-empty { min-height: 300px; } .pur-empty-icon { width: 80px; height: 80px; } .pur-empty strong { font-size: calc(19px * var(--fs, 1)); }
}
/* B46 (owner 2026-10-12, reference picture): the Ledger page */
.led-page .st-hero { margin-block-end: 16px; gap: 18px; }
.led-page .st-hero-tile { width: 72px; height: 72px; border-radius: 18px; }
.led-page .st-hero-tile .icon { width: 34px; height: 34px; }
.led-page .st-hero .rd-title { flex: 1 1 320px; min-width: 0; }
.led-page .rd-actions { margin-inline-start: auto; justify-content: flex-end; }
.led-page .rd-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding-inline: 24px; border-radius: 12px; font-weight: 700; }
.led-page .rd-actions .btn:not(.btn-primary) { background: var(--surface); box-shadow: var(--shadow-xs); }
.led-tabs { padding: 8px; gap: 8px; margin-block-end: 18px; }
.led-tabs .st-tab { min-height: 50px; padding-inline: 22px; font-weight: 600; background: var(--surface); }
.led-tabs .st-tab .icon { width: 20px; height: 20px; }
.jv-filter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 250px) minmax(170px, 250px); gap: 14px 18px; align-items: end; padding: 18px 20px; border-radius: 16px; margin-block-end: 18px; }
.jv-filter .jv-f-search { width: auto; min-width: 0; }
.jv-filter input, .jv-filter select { width: 100%; min-height: 50px; border-radius: 12px; }
.jv-f-date { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: calc(14.5px * var(--fs, 1)); font-weight: 600; color: var(--text-2); min-width: 0; }
.jv-f-kind select { font-weight: 600; }
.jv-f-actions { grid-column: 2 / -1; display: flex; gap: 12px; flex-wrap: wrap; }
.jv-f-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding-inline: 24px; border-radius: 12px; font-weight: 700; }
.jv-f-actions .btn .icon { width: 19px; height: 19px; }
.led-page #jv-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.led-page #jv-status .chip { min-height: 40px; padding: 6px 20px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-weight: 600; cursor: pointer; }
.led-page #jv-status .chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.jv-table { border-radius: 16px; }
.jv-table thead th { padding-block: 14px; }
.jv-table td { padding-block: 11px; vertical-align: middle; font-size: calc(14.5px * var(--fs, 1)); }
.jv-no { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; }
.jv-no .mov-card-icon { width: 42px; height: 42px; border-radius: 11px; }
.jv-no strong { font-weight: 800; }
.jv-table .jv-type { font-weight: 700; }
.jv-table .jv-narr { display: block; min-width: 180px; max-width: 420px; white-space: normal; }
.jv-table .row-actions .btn-icon { width: 42px; height: 42px; min-height: 42px; padding: 0; border-radius: 11px; }
.led-page .cu-bar { padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-xs); }
@media (max-width: 900px) {
  .jv-filter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 14px; }
  .jv-filter .jv-f-search, .jv-f-kind, .jv-f-actions { grid-column: 1 / -1; }
  .jv-f-actions .btn { flex: 1 1 auto; }
  .led-page .rd-actions { width: 100%; margin-inline-start: 0; } .led-page .rd-actions .btn { flex: 1 1 auto; }
  .led-page .st-hero-tile { width: 54px; height: 54px; border-radius: 14px; } .led-page .st-hero-tile .icon { width: 26px; height: 26px; }
}
/* B47 (owner 2026-10-12, reference picture): the Reports page */
.rep-title-2 { display: flex; align-items: center; gap: 18px; }
.rep-title-2 .st-hero-tile { width: 72px; height: 72px; border-radius: 18px; flex: none; }
.rep-title-2 .st-hero-tile .icon { width: 34px; height: 34px; }
.rep-title-2 h1 { margin: 0 0 4px; }
.rep-top { align-items: center; }
.rep-filter { border-radius: 16px; padding: 14px 16px; }
.rep-filter .btn-primary { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; border-radius: 12px; }
.rep-filter .btn-primary .icon { width: 19px; height: 19px; }
.tabs.rep-tabs { border-bottom: 0; gap: 10px; margin-block-end: 0; padding-block: 4px; flex-wrap: wrap; overflow: visible; }
.tabs.rep-tabs a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  color: var(--text); font-size: calc(15px * var(--fs, 1)); font-weight: 600; box-shadow: var(--shadow-xs); }
.tabs.rep-tabs a .icon { width: 20px; height: 20px; flex: none; }
.tabs.rep-tabs a:hover { border-color: var(--primary); }
.tabs.rep-tabs a.active { border-color: #22c55e; color: #15803d; background: color-mix(in srgb, #22c55e 10%, var(--surface)); box-shadow: 0 0 0 1px #22c55e; }
[data-theme="dark"] .tabs.rep-tabs a.active { color: #4ade80; }
.rep-ranges { padding-block-end: 0; }
.rep-ranges .chip { min-height: 40px; border-radius: 10px; background: var(--surface); font-weight: 600; }
.rep-kpi-tint { --kt: #16a34a; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--kt) 22%, var(--border));
  background: linear-gradient(100deg, color-mix(in srgb, var(--kt) 9%, var(--surface)) 0%, var(--surface) 62%); box-shadow: var(--shadow-xs); }
[dir="rtl"] .rep-kpi-tint { background: linear-gradient(260deg, color-mix(in srgb, var(--kt) 9%, var(--surface)) 0%, var(--surface) 62%); }
.rep-kpi-tint.tint-blue { --kt: #2563eb; } .rep-kpi-tint.tint-red { --kt: #ef4444; } .rep-kpi-tint.tint-orange { --kt: #f59e0b; } .rep-kpi-tint.tint-purple { --kt: #8b5cf6; }
/* the five cards stand three and two, as in the picture (five in one row cut the amount) */
.rep-kpis:has(> .rep-kpi-tint) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rep-kpi-tint { padding: 18px 22px; gap: 20px; align-items: center; }
.rep-kpi-tint .rep-kpi-icon { width: 66px; height: 66px; border-radius: 16px; }
.rep-kpi-tint .rep-kpi-icon .icon { width: 32px; height: 32px; }
.rep-kpi-tint .rep-kpi-bars { fill: var(--kt); opacity: 1; width: 54px; height: 42px; margin-inline-end: 6px; }
.rep-kpi-tint .rep-kpi-text { min-width: 0; }
.rep-kpi-tint .rep-kpi-value { white-space: nowrap; }
.rep-svg .bar.total, .sq.total { fill: #22c55e; background: #22c55e; }
.rep-chart-grouped .rep-svg .bar.delivered, .sq.delivered2 { fill: #2563eb; background: #2563eb; }
.rep-legend .sq { border-radius: 50%; }
.rep-legend-top { margin-block: 0 8px; gap: 22px; }
@media (max-width: 1100px) { .rep-kpis:has(> .rep-kpi-tint) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rep-kpi-tint { padding: 14px; gap: 14px; } .rep-kpi-tint .rep-kpi-icon { width: 50px; height: 50px; } .rep-kpi-tint .rep-kpi-icon .icon { width: 25px; height: 25px; } }
@media (max-width: 480px) { .rep-kpis:has(> .rep-kpi-tint) { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .rep-title-2 { gap: 12px; } .rep-title-2 .st-hero-tile { width: 54px; height: 54px; border-radius: 14px; } .rep-title-2 .st-hero-tile .icon { width: 26px; height: 26px; }
  .tabs.rep-tabs { gap: 8px; } .tabs.rep-tabs a { flex: 1 1 auto; justify-content: center; min-height: 44px; padding-inline: 12px; }
}
/* the tinted report cards keep their bars on a laptop (a smaller drawing), and drop them only when really narrow */
@container (max-width: 320px) { .rep-kpi-tint .rep-kpi-bars { display: block; width: 40px; height: 32px; margin-inline-end: 0; } }
@container (max-width: 250px) { .rep-kpi-tint .rep-kpi-bars { display: none; } }
.rep-kpi-tint .rep-kpi-value { font-size: calc(clamp(19px, 8.2cqi, 28px) * var(--fs, 1)); }
@container (max-width: 320px) {
  .rep-kpi-tint { padding: 14px 16px; gap: 14px; }
  .rep-kpi-tint .rep-kpi-icon { width: 52px; height: 52px; border-radius: 13px; } .rep-kpi-tint .rep-kpi-icon .icon { width: 26px; height: 26px; }
  .rep-kpi-tint .rep-kpi-value { font-size: calc(clamp(16px, 6.4cqi, 24px) * var(--fs, 1)); }
}
/* phones: the two wide cards of Purchase invoices stand under each other, so that the amount has the whole line */
@media (max-width: 720px) { #pur-kpis { grid-template-columns: minmax(0, 1fr); } }

/* B48 - B55 (owner 2026-10-12): delivery date, the Deliveries tab, route details and the route log */
.badge.due-Today { background: color-mix(in srgb, #16a34a 14%, var(--surface)); color: #15803d; }
.badge.due-Upcoming { background: color-mix(in srgb, #2563eb 13%, var(--surface)); color: #1d4ed8; }
.badge.due-Overdue { background: color-mix(in srgb, #ef4444 14%, var(--surface)); color: #b91c1c; }
[data-theme="dark"] .badge.due-Today { color: #4ade80; } [data-theme="dark"] .badge.due-Upcoming { color: #93c5fd; } [data-theme="dark"] .badge.due-Overdue { color: #fca5a5; }
.dl-date { display: inline-flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.dl-date .badge, .dl-date .num { white-space: nowrap; }
.dl-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 12px; }
.dl-chips .chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 600; text-decoration: none; }
.dl-chips .chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.dl-chips .chip .tab-count { margin: 0; }
.dd-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.dd-quick .chip { cursor: pointer; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 6px 14px; font: inherit; color: var(--text); }
.dd-quick .chip:hover { border-color: var(--primary); }
#dd-form input[type=date] { width: 100%; }
.attempt-skip { display: block; margin-top: 2px; }
.rt-head-actions { display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rt-head-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.rt-stop-extra { grid-column: 2 / -1; display: flex; flex-direction: column; gap: 3px; min-width: 0; margin-top: -8px; }
.rt-stop-more { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: calc(12.5px * var(--fs, 1)); color: var(--text-2); }
.rt-fact { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.rt-fact .icon { width: 14px; height: 14px; flex: none; opacity: .75; }
.rt-fact.rt-skip { color: #b91c1c; font-weight: 600; } .rt-fact.rt-allowed { color: #1d4ed8; font-weight: 600; }
.rt-stop-note { display: block; font-size: calc(12.5px * var(--fs, 1)); color: var(--text-2); font-style: italic; overflow-wrap: anywhere; }
.rt-pop { min-width: 200px; max-width: 280px; line-height: 1.5; font-size: 13px; }
.rt-pop strong { display: block; font-size: 14px; margin-bottom: 2px; }
.rt-pop a { display: inline-block; margin-top: 6px; font-weight: 600; }
.rlog .toolbar { margin-bottom: 12px; align-items: center; }
.rlog .fcard { margin-bottom: 14px; }
.rlog-plan { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; background: var(--surface); }
.rlog-plan summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.rlog-stops { margin: 10px 0 2px; padding-inline-start: 28px; display: grid; gap: 4px; }
.rlog-from { margin: 8px 0 0; }
tr.rlog-skip td { background: color-mix(in srgb, #ef4444 6%, var(--surface)); }
@media (max-width: 720px) { .rt-head-actions { width: 100%; } .rt-head-actions .btn { flex: 1 1 auto; justify-content: center; } }

.rlog .table-scroll { max-height: 320px; overflow: auto; }

.od-due { white-space: nowrap; font-weight: 600; }
.od-due.due-t-Today { color: #15803d; } .od-due.due-t-Upcoming { color: #1d4ed8; } .od-due.due-t-Overdue { color: #b91c1c; }
[data-theme="dark"] .od-due.due-t-Today { color: #4ade80; } [data-theme="dark"] .od-due.due-t-Upcoming { color: #93c5fd; } [data-theme="dark"] .od-due.due-t-Overdue { color: #fca5a5; }
#orders-table .od-sub .dl-date { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }

/* B57 (owner 2026-10-12): returns with typed lines, approval, the returns report, the dashboard line */
.badge.ap-Pending { background: color-mix(in srgb, #f59e0b 16%, var(--surface)); color: #b45309; }
.badge.ap-Approved { background: color-mix(in srgb, #16a34a 14%, var(--surface)); color: #15803d; }
.badge.ap-Rejected { background: color-mix(in srgb, #ef4444 14%, var(--surface)); color: #b91c1c; }
[data-theme="dark"] .badge.ap-Pending { color: #fbbf24; } [data-theme="dark"] .badge.ap-Approved { color: #4ade80; } [data-theme="dark"] .badge.ap-Rejected { color: #fca5a5; }
.rt-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rt-lines li { overflow-wrap: anywhere; }
.rt-why-not { overflow-wrap: anywhere; max-width: 260px; }
.rt-line-list { display: grid; gap: 10px; }
.rt-line { display: grid; grid-template-columns: 120px 140px minmax(0, 1fr) 40px; gap: 8px 10px; align-items: end; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2, #f7f9fb); }
.rt-line label { margin: 0; min-width: 0; font-size: calc(12.5px * var(--fs, 1)); }
.rt-line input, .rt-line select { width: 100%; min-width: 0; }
.rt-line .rt-line-desc { grid-column: 1 / -1; }
.rt-line .rt-line-note { grid-column: 1 / -2; }
.rt-line .rt-line-remove { align-self: end; }
.rt-line-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.rt-line-foot .btn { display: inline-flex; align-items: center; gap: 6px; }
.rt-wait-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #f59e0b 10%, var(--surface)); color: var(--text); font-size: calc(13.5px * var(--fs, 1)); }
.rt-wait-note .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: #b45309; }
#return-tabs { margin-bottom: 14px; }
.rr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 16px; margin-top: 16px; }
.rr-title { margin: 0 0 10px; font-size: calc(15px * var(--fs, 1)); }
#rr-kpis .rd-kpi-text small { display: block; }
#rr-filter .btn { display: inline-flex; align-items: center; gap: 8px; }
.dash-returns { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin: 12px 0 0; text-decoration: none; color: var(--text); }
.dash-returns[hidden] { display: none; }
.dash-returns-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; min-width: 0; }
.dash-returns-text b { font-size: calc(18px * var(--fs, 1)); }
.dash-returns-text b.warn { color: #b45309; }
@media (max-width: 520px) { .rr-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .rt-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rt-line .rt-line-desc, .rt-line .rt-line-reason, .rt-line .rt-line-note { grid-column: 1 / -1; }
  .rt-line .rt-line-remove { grid-column: 1 / -1; justify-self: end; }
}
/* B60 (owner 2026-10-12): the orders table must not scroll sideways on a laptop - rows with "Out for delivery" and a
   long rider name were about 120 px wider than the card at 1366 px. Narrower cells on laptop-wide screens; the
   location's parts and the rider's name may go on a second line. Nothing is hidden. */
@media (max-width: 1600px) {
  .od-table th { padding-inline: 7px; }
  .od-table td { padding-inline: 7px; }
  .od-table td:nth-child(3), .od-table td:nth-child(4) { min-width: 118px; }
  .od-table .loc-cell { flex-wrap: wrap; max-width: 150px; row-gap: 4px; }
  .od-table .od-rider { display: inline-block; white-space: normal; max-width: 104px; overflow-wrap: anywhere; }
  .od-table .od-status { max-width: 132px; }
}
@media (max-width: 1340px) {
  .od-table th, .od-table td { padding-inline: 5px; }
  .od-table td:nth-child(3), .od-table td:nth-child(4) { min-width: 104px; }
  .od-table .od-sub, .od-table .od-finished, .od-table .od-dist, .od-table .od-created { white-space: normal; }
  .od-table .loc-cell { max-width: 132px; }
}

.od-returned { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin-top: 2px; padding: 0; border: 0; background: none; font: inherit; font-size: calc(12px * var(--fs, 1)); font-weight: 600; cursor: pointer; white-space: nowrap; }
.od-returned span { display: inline-flex; align-items: center; gap: 4px; }
.od-returned .icon { width: 13px; height: 13px; flex: none; }
.od-returned .od-ret-done { color: #b91c1c; } .od-returned .od-ret-wait { color: #b45309; }
.od-returned:hover span { text-decoration: underline; }
.od-returned.in-details { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; font-size: inherit; }
[data-theme="dark"] .od-returned .od-ret-done { color: #fca5a5; } [data-theme="dark"] .od-returned .od-ret-wait { color: #fbbf24; }

/* Owner 2026-10-12 (B63): the goods of a return - where they stand, and the goods window. */
.badge[class*="rg-"] { display: inline-flex; align-items: center; gap: 4px; white-space: normal; }
.badge[class*="rg-"] .icon { width: 12px; height: 12px; flex: none; }
.badge.rg-None { background: #f1f5f9; color: #475569; }
.badge.rg-Waiting { background: #fef3c7; color: #92400e; }
.badge.rg-InStock { background: #dcfce7; color: #166534; }
.badge.rg-NotResalable, .badge.rg-NotAdded { background: #e2e8f0; color: #334155; }
[data-theme="dark"] .badge.rg-None, [data-theme="dark"] .badge.rg-NotResalable, [data-theme="dark"] .badge.rg-NotAdded { background: #334155; color: #e2e8f0; }
[data-theme="dark"] .badge.rg-Waiting { background: #78350f; color: #fde68a; }
[data-theme="dark"] .badge.rg-InStock { background: #14532d; color: #bbf7d0; }
.rg-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.rg-head { margin-bottom: 10px; }
.rg-found { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
#return-goods-table input.rg-qty { width: 96px; }
#return-goods-table input.rg-lot { width: 110px; }
#return-goods-table td { vertical-align: middle; }

/* Owner 2026-10-12 (B64): the mobile number is already a customer under another name - the question in the order form. */
.name-differs { margin: 12px 0 0; padding: 12px 14px; border: 1px solid #f59e0b; border-radius: 12px; background: #fffbeb; color: #78350f; }
.name-differs p { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; font-weight: 600; }
.name-differs p .icon { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.name-differs-actions { display: flex; flex-wrap: wrap; gap: 8px; }
[data-theme="dark"] .name-differs { background: #422006; border-color: #b45309; color: #fde68a; }

/* Owner 2026-10-12 (B65): the legend of the live map is its filter. */
.legend.map-filters { gap: 8px; align-items: center; }
.map-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: inherit;
  font: inherit; font-size: calc(13px * var(--fs, 1)); cursor: pointer; white-space: nowrap; }
.map-chip i { margin: 0; }
.map-chip b { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.map-chip b:empty { display: none; }
.map-chip:hover { border-color: var(--info, #2563eb); }
.map-chip.active { background: var(--info, #2563eb); border-color: var(--info, #2563eb); color: #fff; }
.map-chip.active b { color: #fff; }
.map-chip.active i { box-shadow: 0 0 0 2px #fff; }
.dot-riders { background: var(--info); } .dot-new { background: #64748b; } .dot-delivered { background: var(--green-500); } .dot-cancelled { background: #7c3aed; }
.dot-late { background: #b91c1c; } .dot-today { background: #0d9488; } .dot-upcoming { background: #0ea5e9; }
.stop-icon.cancelled { background: #7c3aed; }
.map-rider-pick { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.map-rider-pick[hidden] { display: none; }
.map-rider-pick input, .map-rider-pick select { height: 32px; padding: 0 10px; min-width: 0; width: 170px; max-width: 100%; }
.map-shown { margin-inline-start: auto; }
@media (max-width: 700px) { .map-shown { margin-inline-start: 0; flex-basis: 100%; } .map-rider-pick { flex-basis: 100%; } .map-rider-pick input, .map-rider-pick select { flex: 1 1 140px; } }

/* Owner 2026-10-12 (B65, his picture showed thin pale lines between the map tiles; not reproducible here at 100 - 175 %):
   the empty map behind the tiles has the map's own land colour, so a hairline gap between two tiles hardly shows.
   Do NOT make the tiles overlap: they are added together where they overlap and that draws white lines. */
:root[data-theme="light"] .leaflet-container, :root:not([data-theme]) .leaflet-container { background: #f2efe9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .leaflet-container { background: var(--surface-3); } }

/* Owner 2026-10-13 (B70): employee advance money. */
.adv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 14px; }
.badge.adv-Pending { background: #fef3c7; color: #92400e; } .badge.adv-Open { background: #fee2e2; color: #991b1b; }
.badge.adv-Settled { background: #dcfce7; color: #166534; } .badge.adv-Rejected, .badge.adv-Cancelled { background: #e2e8f0; color: #334155; }
[data-theme="dark"] .badge.adv-Pending { background: #78350f; color: #fde68a; } [data-theme="dark"] .badge.adv-Open { background: #7f1d1d; color: #fecaca; }
[data-theme="dark"] .badge.adv-Settled { background: #14532d; color: #bbf7d0; } [data-theme="dark"] .badge.adv-Rejected, [data-theme="dark"] .badge.adv-Cancelled { background: #334155; color: #e2e8f0; }
.adv-owed, .adv-open.warn { color: #b91c1c; font-weight: 700; }
[data-theme="dark"] .adv-owed, [data-theme="dark"] .adv-open.warn { color: #fca5a5; }
.adv-reason { max-width: 170px; white-space: normal; overflow-wrap: anywhere; }
/* The advances table fits its card on a laptop: cells may wrap, only the amounts and the state stay on one line. */
#adv-table th, #adv-table td { padding-inline: 10px; }
#adv-table td { white-space: normal; }
#adv-table td .num, #adv-table td .badge, #adv-table td .row-actions { white-space: nowrap; }
#adv-table td .row-actions { flex-wrap: wrap; }
.adv-adjust { align-items: flex-end; margin-top: 12px; }

/* Owner 2026-10-13 (B71): the menu by module (opens and closes) and the menu search. */
.nav-search { position: relative; margin: 4px 6px 10px; }
.nav-search .icon { position: absolute; inset-inline-start: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: rgba(214, 224, 240, .7); pointer-events: none; }
.nav-search input { width: 100%; height: 40px; padding-inline: 36px 10px; border-radius: 12px; border: 1px solid var(--nav-border, rgba(255, 255, 255, .14)); background: rgba(255, 255, 255, .07); color: #fff;
  font: inherit; font-size: calc(14px * var(--fs, 1)); }
.nav-search input::placeholder { color: rgba(214, 224, 240, .65); }
.nav-search input:focus { outline: 2px solid rgba(255, 255, 255, .45); outline-offset: 1px; background: rgba(255, 255, 255, .12); }
.nav-none { margin: 0; padding: 8px 14px; color: rgba(214, 224, 240, .75); font-size: calc(13px * var(--fs, 1)); }
.nav-group { margin-top: 2px; }
.nav-group[hidden] { display: none; }
.nav-group-head { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 46px; padding: 10px 16px; border: 0; border-radius: 14px; background: none; color: rgba(214, 224, 240, .92);
  font: inherit; font-size: calc(15px * var(--fs, 1)); font-weight: 700; text-align: start; cursor: pointer; }
.nav-group-head:hover, .nav-group-head:focus-visible { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-group-head > .icon { width: 20px; height: 20px; flex: none; }
.nav-group-head > span { flex: 1; min-width: 0; }
.nav-group-count { font-size: calc(11.5px * var(--fs, 1)); font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .85); }
.nav-caret { display: inline-flex; transition: transform .15s; }
.nav-caret .icon { width: 16px; height: 16px; }
.nav-group.open > .nav-group-head .nav-caret { transform: rotate(180deg); }
.nav-group-items { display: none; margin-inline-start: 14px; padding-inline-start: 8px; border-inline-start: 1px solid var(--nav-border, rgba(255, 255, 255, .14)); }
.nav-group.open > .nav-group-items { display: block; }
.sidebar a.nav-miss { display: none !important; }
.nav-group-items a { min-height: 44px; padding-block: 10px; font-size: calc(15px * var(--fs, 1)); }
/* The icon strip (menu collapsed on a computer): every page keeps its icon; no headings, no search. */
@media (min-width: 961px) {
  .shell.sidebar-collapsed .nav-search, .shell.sidebar-collapsed .nav-none, .shell.sidebar-collapsed .nav-group-head { display: none; }
  .shell.sidebar-collapsed .nav-group-items { display: block; margin: 0; padding: 0; border: 0; }
  .shell.sidebar-collapsed .sidebar a.nav-miss { display: flex !important; }
}

/* Owner 2026-10-13 (B72): what the customer wrote by WhatsApp, apart from the order's note. */
.customer-replies { display: block; max-width: 100%; box-sizing: border-box; padding: 6px 10px; border-radius: 10px; background: rgba(37, 211, 102, .12); border-inline-start: 3px solid #25d366; overflow-wrap: anywhere; }
.pop-replies { margin-top: 4px; overflow-wrap: anywhere; }
/* Its name is long and its text can be: the row takes the whole width of the list (name above, text under it). */
dl.details > .row-wide { grid-column: 1 / -1; min-width: 0; }
dl.details > dt.row-wide { margin-bottom: -4px; }

/* Supplier payments, statement and aging (task board C2). Logical properties only: the page mirrors in Arabic. */
.spay-found { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.spay-picked { margin: 6px 0 0; font-weight: 600; }
.spay-picked:empty, .spay-split:empty { display: none; }
.spay-balances { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2, rgba(127, 127, 127, .08)); margin-block: 4px 10px; }
.spay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.spay-form .table-scroll { margin-block: 4px 8px; }
.spay-alloc { inline-size: 120px; max-inline-size: 100%; text-align: end; }
.spay-split { margin: 0; font-weight: 600; }
.spay-lines { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 22px; }
.spay-line { display: flex; justify-content: space-between; gap: 12px; padding-block: 4px; border-block-end: 1px dashed var(--border, rgba(127, 127, 127, .25)); }
.spay-off td { text-decoration: line-through; opacity: .6; }
.spay-statement-bar > [data-spay-chooser] { flex: 1 1 260px; min-inline-size: 0; }
#spay-aging tfoot th, #spay-statement tfoot th { font-weight: 700; }
.spay-bar .cu-search, #spay-aging-form .cu-search { flex: 1 1 260px; min-inline-size: 0; }
.spay-bar select { flex: 0 1 200px; inline-size: auto; min-inline-size: 150px; }
.spay-bar label:not(.cu-search), #spay-aging-form label:not(.cu-search), .spay-statement-bar label { flex: 0 0 auto; }
.spay-bar label.check { display: inline-flex; align-items: center; gap: 8px; flex-direction: row; }
.spay-page .cu-bar { padding: 14px; border-radius: 16px; align-items: flex-end; }
/* New item: the chosen picture, small, above its file box (owner 2026-10-13). */
.it-picture-new { justify-items: start; }
.it-picture-new img { max-height: 140px; }