:root {
  --ink: #16202a;
  --ink-2: #4a5561;
  --ink-3: #75808b;
  --bg: #f3f4f1;
  --surface: #ffffff;
  --line: #e1e4df;
  --line-2: #cfd4cd;
  --brand: #0f3d3e;
  --brand-2: #17595a;
  --brand-soft: #e6efee;
  --accent: #b86e12;
  --ok: #1d6b45;
  --ok-soft: #e4f2ea;
  --warn: #8a5a00;
  --warn-soft: #fbf1dc;
  --bad: #a2322b;
  --bad-soft: #f9e6e4;
  --info: #2b5c8a;
  --info-soft: #e6eef6;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(22, 32, 42, .06);
  --sidebar: 248px;
  --thead: #f8f9f7;
  --row-hover: #fafbf9;
  --soft-warn-bg: #fffaf0;
  --soft-warn-line: #e6c77f;
  --sidebar-ink: #dce8e7;
  --font: "IBM Plex Sans Arabic", "IBM Plex Sans Hebrew", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
}
h1, h2, h3 { line-height: 1.3; margin: 0; }
h1 { font-size: 1.35rem; font-weight: 700; }
h2 { font-size: 1.05rem; font-weight: 600; }
a { color: var(--brand-2); }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ink-3); }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--brand); color: #fff; padding: 8px 12px; border-radius: var(--radius); z-index: 100; }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Layout */
.shell { min-height: 100vh; }
.sidebar {
  position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 40;
  width: var(--sidebar); background: var(--brand); color: #dce8e7;
  display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(-100%); transition: transform .2s ease;
}
[dir="rtl"] .sidebar { transform: translateX(100%); }
.nav-open .sidebar { transform: none; }
.backdrop { position: fixed; inset: 0; background: rgba(10, 20, 20, .45); z-index: 30; display: none; }
.nav-open .backdrop { display: block; }

.brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-mark { width: 26px; height: 26px; border-radius: 6px; background: var(--accent); position: relative; flex: none; }
.brand-mark::after { content: ""; position: absolute; inset: 7px 6px; border: 2px solid #fff; border-inline-start: 0; border-radius: 0 3px 3px 0; }
[dir="rtl"] .brand-mark::after { border-radius: 3px 0 0 3px; }
.brand-name { font-weight: 700; letter-spacing: .12em; font-size: 1.05rem; }

.nav { padding: 10px 10px 24px; }
.nav-group { margin: 16px 10px 6px; font-size: .75rem; font-weight: 600; color: #8fb0ae; }
.nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; color: #dce8e7; text-decoration: none; }
.nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-link.is-active { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
[dir="rtl"] .nav-link.is-active { box-shadow: inset -3px 0 0 var(--accent); }

.main { min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.topbar-end { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 0; background: transparent; border-radius: var(--radius); cursor: pointer; color: var(--ink-2); }
.icon-btn:hover { background: var(--bg); }
.content { padding: 20px 16px 48px; width: 100%; max-width: none; }

/* Global search */
.gsearch { position: relative; flex: 1; max-width: 460px; }
.gsearch-icon { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.gsearch input[type="search"] { width: 100%; height: 42px; padding-inline: 38px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.gsearch input[type="search"]:focus { background: var(--surface); border-color: var(--brand-2); outline: none; }
.gsearch-results { position: absolute; top: calc(100% + 6px); inset-inline: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(22,32,42,.12); max-height: 70vh; overflow-y: auto; padding: 6px 0; }
.gsearch-group { margin: 8px 14px 4px; font-size: .75rem; font-weight: 600; color: var(--ink-3); }
.gsearch-item { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; text-decoration: none; color: var(--ink); }
.gsearch-item:hover, .gsearch-item.is-focus { background: var(--brand-soft); }
.gsearch-item small { color: var(--ink-3); }
.gsearch-empty { margin: 10px 14px; color: var(--ink-3); }

.lang-form select { height: 40px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 0 8px; }
.usermenu { position: relative; }
.usermenu summary { list-style: none; }
.usermenu summary::-webkit-details-marker { display: none; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.usermenu-panel { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); width: 230px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(22,32,42,.12); padding: 6px; z-index: 30; }
.usermenu-name { margin: 6px 10px 8px; font-weight: 600; display: flex; flex-direction: column; }
.usermenu-name small { font-weight: 400; color: var(--ink-3); }
.usermenu-panel a, .usermenu-panel button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px; border: 0; background: none; border-radius: 6px; text-decoration: none; color: var(--ink); cursor: pointer; text-align: start; min-height: 44px; }
.usermenu-panel a:hover, .usermenu-panel button:hover { background: var(--bg); }

/* Page parts */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page-intro { margin: -8px 0 16px; }
.back { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; text-decoration: none; color: var(--ink-3); margin-bottom: 4px; }
[dir="rtl"] .back .icon { transform: scaleX(-1); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.card + .card { margin-top: 16px; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.card-title { margin-bottom: 12px; }
.stack > * + * { margin-top: 14px; }
.grid-2 { display: grid; gap: 14px 16px; }
.align-start { align-items: start; }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.stat:hover { border-color: var(--line-2); }
.stat-icon { grid-row: span 2; width: 40px; height: 40px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.stat-value { font-size: 1.35rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-label { font-size: .82rem; color: var(--ink-2); }

.activity { list-style: none; margin: 0; padding: 0; }
.activity li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); font-size: .9rem; }
.activity li:first-child { border-top: 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--radius); border: 1px solid transparent; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-2); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--bg); }
.btn-danger-ghost { background: var(--surface); color: var(--bad); border-color: #e6c3bf; }
.btn-sm { min-height: 36px; padding: 0 10px; font-size: .85rem; font-weight: 500; }
.btn-block { width: 100%; }
.link-btn { border: 0; background: none; color: var(--ink-2); cursor: pointer; padding: 8px; min-height: 44px; }
.link-btn.is-current { color: var(--brand); font-weight: 700; }
.link { font-size: .85rem; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .label { font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.req { color: var(--bad); }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], input[type="date"], input:not([type]), select, textarea {
  width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px var(--brand-soft); }
.hint { margin: 0; font-size: .8rem; color: var(--ink-3); }
.field-error { margin: 0; font-size: .82rem; color: var(--bad); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 700; margin-bottom: 10px; padding: 0; }
.form-card { max-width: 860px; }
.form-section { font-size: .95rem; margin: 22px 0 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.form-section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.sticky-actions { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; margin: 0; }
.radio-row { display: flex; gap: 16px; flex-wrap: wrap; }
.radio, .check { display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; font-weight: 400; color: var(--ink); }
.radio input, .check input { width: 18px; height: 18px; accent-color: var(--brand); }
.check.is-disabled { color: var(--ink-3); cursor: not-allowed; }
.check-grid { display: grid; grid-template-columns: 1fr; gap: 2px 16px; }
.field-check { justify-content: flex-end; }
.branch-picker { margin-top: 14px; }
.notice { background: var(--warn-soft); color: var(--warn); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 16px; font-size: .9rem; }

/* Alerts & badges */
.alert { padding: 11px 14px; border-radius: var(--radius); margin-bottom: 14px; font-size: .92rem; border: 1px solid transparent; }
.alert-success { background: var(--ok-soft); color: var(--ok); border-color: #c5e3d2; }
.alert-error { background: var(--bad-soft); color: var(--bad); border-color: #efc9c5; }
.alert-warn { background: var(--warn-soft); color: var(--warn); border-color: #ecd9ae; }
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--bg); color: var(--ink-2); white-space: nowrap; }
.badge-active, .badge-verified { background: var(--ok-soft); color: var(--ok); }
.badge-inactive, .badge-expired { background: #eceeeb; color: var(--ink-3); }
.badge-pending_verification { background: var(--warn-soft); color: var(--warn); }
.badge-rejected { background: var(--bad-soft); color: var(--bad); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-restricted { background: #f6ead8; color: var(--accent); }

/* Filters & results */
.filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.filters .filter-search { grid-column: 1 / -1; }
.filter-search { position: relative; }
.filter-search .icon { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.filter-search input[type="search"] { padding-inline-start: 38px; }
.date-filter { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--ink-2); }
.results { transition: opacity .15s; }
.results.is-loading { opacity: .55; }
.result-count { margin: 0 0 8px; font-size: .82rem; color: var(--ink-3); }
.empty { text-align: center; padding: 40px 16px; color: var(--ink-3); background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--radius); }
.empty .icon { width: 28px; height: 28px; }

/* Tables: cards on phones, table on wider screens */
.table { width: 100%; border-collapse: collapse; }
.table thead { display: none; }
.table tr { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 10px; }
.table td { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); text-align: end; }
.table td:first-child { border-top: 0; }
.table td::before { content: attr(data-label); font-size: .8rem; color: var(--ink-3); font-weight: 600; text-align: start; flex: none; }
.table td.cell-actions { justify-content: flex-end; }
.table td.cell-actions::before { content: none; }
.cell-title { font-weight: 600; display: block; }
.cell-sub { display: block; font-size: .8rem; color: var(--ink-3); }

.pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pager-info { font-size: .85rem; color: var(--ink-2); }

.changes summary { cursor: pointer; color: var(--brand-2); font-size: .85rem; }
.changes dl { margin: 8px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: .82rem; text-align: start; }
.changes dt { color: var(--ink-3); }
.changes dd { margin: 0; overflow-wrap: anywhere; }
.changes del { color: var(--bad); text-decoration: line-through; }
.changes ins { color: var(--ok); text-decoration: none; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 16px; }
.kv dt { color: var(--ink-3); font-size: .88rem; }
.kv dd { margin: 0; }

/* Auth pages */
.auth-body { display: flex; min-height: 100vh; align-items: flex-start; justify-content: center; }
.auth-wrap { width: 100%; max-width: 420px; padding: 32px 16px; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; color: var(--brand); }
.auth-card { padding: 22px; }
.auth-card-wide { max-width: none; }
.auth-title { font-size: 1.2rem; margin-bottom: 14px; }
.auth-lang { display: flex; justify-content: center; gap: 4px; margin-top: 14px; }
.checks { list-style: none; padding: 0; margin: 12px 0 16px; display: grid; gap: 4px; font-size: .88rem; }
.checks li { display: flex; align-items: center; gap: 8px; }
.checks .ok { color: var(--ok); }
.checks .fail { color: var(--bad); font-weight: 600; }
.error-card { text-align: center; }
.error-code { font-size: 2.6rem; font-weight: 700; color: var(--line-2); margin: 0; line-height: 1; }
.ref { font-size: .85rem; color: var(--ink-3); }

/* Operations */
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .02em; }
.num { font-variant-numeric: tabular-nums; }
.strong { font-weight: 700; }
.head-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 0; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.field-wide { grid-column: 1 / -1; }
.plain-list { margin: 0 0 8px; padding-inline-start: 18px; }
.badge-pieces { background: #1f2a33; color: #fff; gap: 3px; }
.badge-pieces .icon { width: 13px; height: 13px; }
.bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cell-check { width: 40px; }
.cell-check input { width: 20px; height: 20px; accent-color: var(--brand); }
.detail-grid { display: grid; gap: 16px; }
.detail-grid .card + .card { margin-top: 0; }
.danger-zone { margin-top: 16px; }
.danger-zone summary { cursor: pointer; color: var(--bad); font-weight: 600; }
.danger-zone form { margin-top: 12px; max-width: 480px; }

.status { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; background: #eceeeb; color: var(--ink-2); }
.status-pickup_pending, .status-pickup_assigned, .status-picked_up, .status-dropped_off, .status-pub-received { background: #e3ecf7; color: #2b5c8a; }
.status-in_transfer, .status-arrived_at_hub, .status-hub_sorting, .status-pub-in_transit { background: #ece6f5; color: #5b3d8a; }
.status-arrived_at_branch, .status-branch_sorting, .status-pub-at_branch { background: #e0f1f3; color: #1c6770; }
.status-ready_for_delivery { background: #dff1ec; color: #17645a; }
.status-driver_assigned { background: #e5e8f7; color: #3b4a8f; }
.status-out_for_delivery, .status-pub-out_for_delivery { background: #fbecd9; color: #8a5200; }
.status-delivered, .status-pub-delivered { background: var(--ok-soft); color: var(--ok); }
.status-partially_delivered { background: #edf5e2; color: #4c6b1d; }
.status-on_hold, .status-pub-on_hold { background: var(--warn-soft); color: var(--warn); }
.status-return_in_progress, .status-pub-returning { background: #f8e5d6; color: #8f4515; }
.status-returned_to_merchant, .status-pub-returned { background: #f3dcdc; color: #7c2626; }
.status-lost, .status-damaged { background: var(--bad-soft); color: var(--bad); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 14px; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 2px; }
.timeline li::before { content: ""; position: absolute; inset-inline-start: 3px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-2); }
.timeline li::after { content: ""; position: absolute; inset-inline-start: 6px; top: 18px; bottom: 0; width: 2px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline .status { align-self: flex-start; }
.timeline-meta { font-size: .8rem; color: var(--ink-3); }
.timeline-reason { font-size: .85rem; color: var(--ink-2); }

.scan-input { font: 600 1.15rem ui-monospace, Menlo, Consolas, monospace; min-height: 54px; letter-spacing: .05em; }
.scan-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: .88rem; color: var(--ink-2); }
.scan-log { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.scan-item { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 10px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--ink-3); }
.scan-ok { border-inline-start-color: var(--ok); }
.scan-warn { border-inline-start-color: #c98a12; background: #fffaf0; }
.scan-error { border-inline-start-color: var(--bad); background: #fff6f5; }
.scan-pieces { width: 100%; color: #8a5200; }

.track-card { margin-top: 0; }
.track-driver { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.track-driver-head { font-weight: 600; margin: 0; }
.track-driver-stops { margin: 0; color: var(--ink-2); }
.track-map { width: 100%; height: 220px; border: 0; border-radius: 8px; background: var(--line); }
.track-driver-meta { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .85rem; color: var(--ink-3); }
.track-driver .hint { margin: 0; font-size: .8rem; color: var(--ink-3); }
.track-result { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.track-code { font-size: 1.1rem; font-weight: 700; margin: 0; }
.track-status { margin: 6px 0 14px; }
.track-status .status { font-size: .95rem; padding: 4px 14px; }

@media (min-width: 900px) {
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .table .cell-check { width: 40px; }
}
@media (max-width: 899px) {
  .table td.cell-check { justify-content: flex-start; border-top: 0; padding: 0 0 4px; }
  .table td.cell-check::before { content: none; }
}

/* Delivery */
.section-title { margin: 22px 0 10px; font-size: 1rem; }
.text-bad { color: var(--bad); font-weight: 600; }
.btn-lg { min-height: 56px; font-size: 1.05rem; }
.badge-run-open { background: var(--info-soft); color: var(--info); }
.badge-run-out { background: #fbecd9; color: #8a5200; }
.badge-run-closed { background: #eceeeb; color: var(--ink-3); }
.badge-task-pending { background: #eceeeb; color: var(--ink-2); }
.badge-task-delivered { background: var(--ok-soft); color: var(--ok); }
.badge-task-partial { background: #edf5e2; color: #4c6b1d; }
.badge-task-failed { background: var(--bad-soft); color: var(--bad); }
.badge-ho-awaiting_code { background: var(--warn-soft); color: var(--warn); }
.badge-ho-confirmed { background: var(--ok-soft); color: var(--ok); }
.badge-ho-cancelled { background: #eceeeb; color: var(--ink-3); }
.task-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.task-link { display: grid; gap: 4px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); border-inline-start: 4px solid var(--brand-2); }
.task-delivered .task-link, .task-partial .task-link { border-inline-start-color: var(--ok); opacity: .75; }
.task-failed .task-link { border-inline-start-color: var(--bad); opacity: .75; }
.task-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.task-name { font-weight: 700; font-size: 1.02rem; }
.task-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.task-addr { color: var(--ink-2); font-size: .9rem; }
.task-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: .8rem; }
.collect-box { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; border-radius: var(--radius); background: var(--brand); color: #fff; }
.collect-box strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.contact-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.contact-row .btn { padding: 0 8px; }
.action-card { margin-top: 12px; }
.action-card summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.action-card form { margin-top: 12px; }
.reason-grid { display: grid; gap: 2px; }
.custody-strip { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 10px 14px; margin-bottom: 12px; background: var(--warn-soft); color: var(--warn); border-radius: var(--radius); }
.custody-strip span { display: inline-flex; gap: 6px; align-items: center; }
.handover-card { border-color: #e6c77f; background: #fffaf0; margin-bottom: 12px; }
.code-form { display: flex; gap: 8px; flex-wrap: wrap; }
.code-input { flex: 1; min-width: 140px; font: 700 1.4rem ui-monospace, Menlo, Consolas, monospace; letter-spacing: .3em; text-align: center; }
.code-card { text-align: center; margin-bottom: 16px; border-color: #e6c77f; background: #fffaf0; }
.big-code { font: 700 2.6rem ui-monospace, Menlo, Consolas, monospace; letter-spacing: .15em; margin: 8px 0; color: var(--brand); }
.custody-grid { display: grid; gap: 16px; }
.custody-grid .card + .card { margin-top: 0; }
.attempts-card { margin-top: 16px; }
.attempts li { padding: 6px 0; }
.ledger-check { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
/* Merchant account and payouts */
.readonly-value { margin: 0; min-height: 44px; display: flex; align-items: center; padding: 0 12px; background: var(--bg); border-radius: var(--radius); font-weight: 600; }
.balance-card + .balance-card { margin-top: 16px; }
.balance-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.balance-grid > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--bg); border-radius: var(--radius); }
.balance-grid span { font-size: .8rem; color: var(--ink-3); }
.balance-grid strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.balance-grid small { font-size: .75rem; color: var(--ink-3); }
.balance-main { grid-column: 1 / -1; background: var(--brand) !important; color: #fff; }
.balance-main span, .balance-main small { color: #cfe0df !important; }
.balance-main strong { font-size: 1.6rem; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-form select { width: auto; min-width: 160px; }
.stack-top { margin-top: 12px; }
.sep { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.code-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.code-row:first-of-type { border-top: 0; }
.code-row small { display: block; }
.big-code.small { font-size: 1.4rem; margin: 0; }
.check-grid.one-col { grid-template-columns: 1fr !important; }
.badge-po-requested { background: var(--info-soft); color: var(--info); }
.badge-po-approved { background: var(--warn-soft); color: var(--warn); }
.badge-po-out_for_payment { background: #fbecd9; color: #8a5200; }
.badge-po-paid { background: var(--ok-soft); color: var(--ok); }
.badge-po-rejected, .badge-po-cancelled { background: #eceeeb; color: var(--ink-3); }
.table tfoot td { font-weight: 700; }
@media (max-width: 899px) { .table tfoot { display: block; } .table tfoot tr { display: flex; justify-content: space-between; } .table tfoot td { border: 0; } .table tfoot td::before { content: none; } }
@media (min-width: 640px) { .balance-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .balance-main { grid-column: auto; } }

@media (min-width: 640px) { .reason-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .custody-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { grid-template-columns: minmax(220px, 2fr) repeat(auto-fit, minmax(150px, 1fr)); }
  .filters .filter-search { grid-column: auto; }
  .auth-wrap:has(.auth-card-wide) { max-width: 720px; }
}

@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .check-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .table thead { display: table-header-group; }
  .table tr { display: table-row; border: 0; border-radius: 0; padding: 0; margin: 0; }
  .table th { text-align: start; font-size: .8rem; font-weight: 600; color: var(--ink-3); background: var(--thead); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
  .table td { display: table-cell; padding: 11px 14px; border-top: 1px solid var(--line); text-align: start; vertical-align: top; }
  .table tbody tr:first-child td { border-top: 0; }
  .table td::before { content: none; }
  .table td.cell-actions { text-align: end; white-space: nowrap; }
  .table tbody tr:hover td { background: var(--row-hover); }
}

@media (min-width: 1100px) {
  .sidebar, [dir="rtl"] .sidebar { transform: none; }
  .main { margin-inline-start: var(--sidebar); }
  .menu-btn, .backdrop, .nav-open .backdrop { display: none; }
  .content { padding: 24px 28px 56px; }
  .topbar { padding-inline: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---- Additional modules ---- */
.type-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 8px; }
.type-option { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line, #d9ddd6); border-radius: 10px; cursor: pointer; background: var(--surface, #fff); }
.type-option:has(input:checked) { border-color: var(--brand, #0f3d3e); box-shadow: 0 0 0 2px rgba(15, 61, 62, .12); }
.type-option small { display: block; color: var(--ink-3); font-size: .82rem; margin-top: 2px; }
.type-option input { margin-top: 4px; }
.badge-type { background: #e8f0ff; color: #1d3f8f; }
.badge-warn { background: #fff4e0; color: #8a4b00; }
.risk-note { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px; margin: 8px 0; background: #eef6f1; color: #1c5b35; font-size: .92rem; }
.risk-note.risk-medium { background: #fff6e5; color: #7a4a00; }
.risk-note.risk-high { background: #fdeceb; color: #9b1c12; font-weight: 600; }
.risk-note .icon { flex: none; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 12px 0; }
.stat { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface, #fff); border: 1px solid var(--line, #e2e5df); color: inherit; text-decoration: none; }
.stat span { font-size: .82rem; color: var(--ink-3); }
.stat strong { font-size: 1.35rem; }
.stat-ok strong { color: #1c6b3a; }
.stat-bad strong { color: #a3261b; }
.row-bad td { background: #fff7f6; }
.tabs { display: flex; gap: 6px; overflow-x: auto; margin: 8px 0 12px; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.tab { white-space: nowrap; padding: 8px 12px; border-radius: 999px; background: var(--surface, #fff); border: 1px solid var(--line, #e2e5df); color: inherit; text-decoration: none; font-size: .9rem; }
.tab.is-active { background: var(--brand, #0f3d3e); border-color: var(--brand, #0f3d3e); color: #fff; }
.tab .count { display: inline-block; min-width: 1.6em; padding: 0 5px; border-radius: 999px; background: rgba(0, 0, 0, .08); font-size: .8rem; text-align: center; }
.tab.is-active .count { background: rgba(255, 255, 255, .22); }
.inline-details { display: inline-block; }
.inline-details[open] { display: block; margin-top: 6px; }
.thread { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 10px; }
.msg { padding: 12px 14px; border-radius: 12px; background: var(--surface, #fff); border: 1px solid var(--line, #e2e5df); max-width: 720px; }
.msg-merchant { background: #f3f8f6; margin-inline-start: auto; }
.msg-internal { background: #fffaf0; border-style: dashed; }
.msg-meta { margin: 0 0 6px; font-size: .82rem; color: var(--ink-3); }
.msg-body { white-space: normal; overflow-wrap: anywhere; }
.box-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 12px; }
.box-card .card-title { display: flex; gap: 6px; align-items: center; font-size: .95rem; }
.box-balance { margin: 4px 0 0; font-size: 1.2rem; font-weight: 700; }
.box-profit { border-color: #b86e12; }
.card-inner { margin: 0; padding: 10px; border: 1px solid var(--line, #e2e5df); border-radius: 10px; }
.kv-head { font-weight: 700; }
.bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 160px; }
.bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; font-size: .8rem; }
.bar-fill { width: 70%; min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--brand, #0f3d3e); opacity: .85; }
.bar small { color: var(--ink-3); }
.notif-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.notif-list a { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; background: var(--surface, #fff); border: 1px solid var(--line, #e2e5df); color: inherit; text-decoration: none; }
.notif-list .is-unread a { border-inline-start: 4px solid var(--brand, #0f3d3e); }
.notif-list small { color: var(--ink-3); }
.bell { position: relative; }
.bell-count { position: absolute; top: 2px; inset-inline-end: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #c0392b; color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 700; }
.qr-box { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 10px 0; }
.qr-box .qr-img { width: 180px; height: 180px; border-radius: 8px; border: 1px solid var(--line, #e2e5df); }
.code-block { direction: ltr; text-align: left; background: #0f1f1f; color: #e7f3ef; padding: 12px; border-radius: 10px; overflow-x: auto; font-size: .85rem; white-space: pre; }
.agreement-text { line-height: 1.9; margin-bottom: 14px; }
.prohibited { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.prohibited li { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-radius: 10px; background: #fdeceb; color: #8c1d14; }
.total-line { display: flex; justify-content: space-between; gap: 12px; padding: 12px 4px; border-top: 2px solid var(--line, #e2e5df); }
.earnings-strip { background: #eef6f1; }
.cols-list { columns: 2; }
.inline { display: inline; }
.steps { list-style: decimal; padding-inline-start: 20px; }
.table-compact td, .table-compact th { padding-top: 6px; padding-bottom: 6px; }
.badge-att-absent { background: #fdeceb; color: #9b1c12; }
.badge-att-late { background: #fff4e0; color: #8a4b00; }
.badge-att-present { background: #e7f5ec; color: #1c6b3a; }
.badge-tk-open { background: #fff4e0; color: #8a4b00; }
.badge-tk-answered { background: #e7f5ec; color: #1c6b3a; }
.badge-tk-closed { background: #eceeea; color: #555; }
.notes-list li { padding: 6px 0; border-bottom: 1px solid var(--line, #eee); }
@media (max-width: 640px) {
  .bars { height: 120px; }
  .cols-list { columns: 1; }
  .type-picker { grid-template-columns: 1fr; }
  .code-form select { width: 100%; }
}


/* ================= Design refresh & themes ================= */
:root { --radius: 10px; --radius-lg: 14px; --shadow: 0 1px 2px rgba(16, 24, 32, .05), 0 1px 1px rgba(16, 24, 32, .03); --shadow-lg: 0 10px 30px rgba(16, 24, 32, .10); }
/* Colour accents (brand) */
[data-accent="blue"] { --brand: #1d3a6e; --brand-2: #2a55a0; --brand-soft: #e7eef9; --accent: #d9822b; }
[data-accent="purple"] { --brand: #3b2764; --brand-2: #5a3d94; --brand-soft: #efe9f8; --accent: #d49a1a; }
[data-accent="green"] { --brand: #1d4a31; --brand-2: #2a6b47; --brand-soft: #e5f1ea; --accent: #c7702a; }
[data-accent="maroon"] { --brand: #5a1f2c; --brand-2: #822f40; --brand-soft: #f6e8eb; --accent: #c9932e; }
[data-accent="slate"] { --brand: #1f2833; --brand-2: #37475a; --brand-soft: #e9edf2; --accent: #e0892b; }

/* Dark theme variables (explicit, and "auto" following the device) */
[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e6ebef; --ink-2: #b7c1ca; --ink-3: #8a96a1;
  --bg: #0f1418; --surface: #171e24; --line: #26313a; --line-2: #34424d;
  --brand-soft: rgba(120, 190, 185, .14); --brand-2: #7cc3bd;
  --ok: #6fd19c; --ok-soft: rgba(111, 209, 156, .12); --warn: #f0c060; --warn-soft: rgba(240, 192, 96, .12);
  --bad: #f08a80; --bad-soft: rgba(240, 138, 128, .12); --info: #8db8e8; --info-soft: rgba(141, 184, 232, .12);
  --thead: #1b232a; --row-hover: #1c252c; --soft-warn-bg: rgba(240, 192, 96, .08); --soft-warn-line: rgba(240, 192, 96, .35);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-lg: 0 10px 30px rgba(0, 0, 0, .5);
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    color-scheme: dark;
    --ink: #e6ebef; --ink-2: #b7c1ca; --ink-3: #8a96a1;
    --bg: #0f1418; --surface: #171e24; --line: #26313a; --line-2: #34424d;
    --brand-soft: rgba(120, 190, 185, .14); --brand-2: #7cc3bd;
    --ok: #6fd19c; --ok-soft: rgba(111, 209, 156, .12); --warn: #f0c060; --warn-soft: rgba(240, 192, 96, .12);
    --bad: #f08a80; --bad-soft: rgba(240, 138, 128, .12); --info: #8db8e8; --info-soft: rgba(141, 184, 232, .12);
    --thead: #1b232a; --row-hover: #1c252c; --soft-warn-bg: rgba(240, 192, 96, .08); --soft-warn-line: rgba(240, 192, 96, .35);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-lg: 0 10px 30px rgba(0, 0, 0, .5);
  }
}
/* Pastel badges and boxes become translucent on dark backgrounds */
[data-theme="dark"] :is(.status, .badge, .tab .count, .risk-note, .prohibited li, .row-bad td, .msg-merchant, .msg-internal, .earnings-strip),
[data-theme="dark"] .scan-warn, [data-theme="dark"] .scan-error {
  background: color-mix(in srgb, currentColor 14%, transparent) !important;
}
[data-theme="dark"] :is(.status, .badge, .risk-note, .prohibited li) { filter: brightness(1.55) saturate(.85); }
[data-theme="dark"] .badge-pieces { filter: none; background: #e6ebef !important; color: #111 !important; }
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] :is(.status, .badge, .tab .count, .risk-note, .prohibited li, .row-bad td, .msg-merchant, .msg-internal, .earnings-strip), [data-theme="auto"] .scan-warn, [data-theme="auto"] .scan-error { background: color-mix(in srgb, currentColor 14%, transparent) !important; }
  [data-theme="auto"] :is(.status, .badge, .risk-note, .prohibited li) { filter: brightness(1.55) saturate(.85); }
}
.handover-card, .code-card { background: var(--soft-warn-bg); border-color: var(--soft-warn-line); }
.code-block { background: #0b1418; }

/* Layout polish */
body { background: var(--bg); }
.sidebar { background: linear-gradient(180deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 82%, #000) 100%); color: var(--sidebar-ink); scrollbar-width: thin; }
.brand { padding: 20px 20px 18px; }
.brand-name { font-size: 1.12rem; }
.nav-link { border-radius: 8px; padding: 9px 12px; transition: background .15s ease, color .15s ease; }
.nav-link.is-active { background: rgba(255, 255, 255, .14); box-shadow: none; position: relative; }
.nav-link.is-active::before { content: ""; position: absolute; inset-block: 8px; inset-inline-start: -10px; width: 4px; border-radius: 4px; background: var(--accent); }
[dir="rtl"] .nav-link.is-active { box-shadow: none; }
.nav-group { text-transform: none; letter-spacing: .02em; opacity: .85; }
.topbar { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.card { border-radius: var(--radius-lg); padding: 18px; }
.page-head { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: 1.45rem; letter-spacing: -.005em; }
.btn { border-radius: 10px; transition: background .15s ease, border-color .15s ease, transform .05s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary { box-shadow: 0 1px 0 rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .08); }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { border-radius: 10px; background-color: var(--surface); color: var(--ink); border-color: var(--line-2); }
input:focus, select:focus, textarea:focus { border-color: var(--brand-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-2) 18%, transparent); outline: none; }
.stat, .stats .stat { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.stat-icon { border-radius: 10px; }
.table { border-radius: var(--radius-lg); }
.usermenu-panel, .gsearch-results, .theme-panel { border-radius: 12px; box-shadow: var(--shadow-lg); }
.detail-grid { gap: 16px; }
@media (min-width: 1100px) {
  .content { padding: 26px 32px 60px; }
  .detail-grid { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
}
@media (min-width: 1600px) {
  .grid-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Theme picker */
.theme-menu { position: relative; }
.theme-menu summary { list-style: none; }
.theme-menu summary::-webkit-details-marker { display: none; }
.theme-panel { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); width: 250px; background: var(--surface); border: 1px solid var(--line); padding: 12px; z-index: 30; }
.theme-panel p { margin: 0 0 8px; font-size: .8rem; font-weight: 600; color: var(--ink-3); }
.theme-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.theme-modes button { min-height: 40px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg); cursor: pointer; font-size: .85rem; }
.theme-modes button.is-current { border-color: var(--brand-2); background: var(--brand-soft); font-weight: 700; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; padding: 0; }
.swatch.is-current { box-shadow: 0 0 0 2px var(--ink); }
.sw-teal { background: #0f3d3e; } .sw-blue { background: #1d3a6e; } .sw-purple { background: #3b2764; } .sw-green { background: #1d4a31; } .sw-maroon { background: #5a1f2c; } .sw-slate { background: #1f2833; }
.pick-list { display: grid; gap: 8px; }
.pick-item { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.pick-item:has(input:checked) { border-color: var(--brand-2); background: var(--brand-soft); }
.pick-item span { display: flex; flex-direction: column; gap: 2px; }
.pick-item small { color: var(--ink-3); }
.pick-item input { margin-top: 5px; }
.stat-alert { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.stat-alert .stat-value, .stat-alert .stat-icon { color: var(--bad); }
.alerts-card { border-color: var(--soft-warn-line); background: var(--soft-warn-bg); margin-bottom: 16px; }
.alerts-card .card-title { display: flex; gap: 6px; align-items: center; }
.pickup-card { margin-bottom: 16px; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }
/* Dashboard tiles keep their icon layout (report tiles use the simple .stat-row form) */
.stats .stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 16px; }
.stats .stat .stat-value { font-size: 1.6rem; font-weight: 700; color: var(--ink); }
.stats .stat .stat-label { font-size: .85rem; color: var(--ink-2); }
.stats .stat-alert .stat-value { color: var(--bad); }
.stats .stat:hover { border-color: var(--brand-2); transform: translateY(-1px); }
.stats .stat { transition: transform .12s ease, border-color .12s ease; }
/* Filters wrap instead of overflowing on wide pages */
@media (min-width: 640px) {
  .filters { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .filters .filter-search { grid-column: span 2; }
}
.filters > * { min-width: 0; }
.filters input, .filters select { width: 100%; }
.pay-methods { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; margin: 0 0 12px; }
.pay-methods .radio { display: flex; gap: 8px; align-items: center; }
.cod-card { margin-bottom: 12px; }
.cod-card p { margin: 0 0 6px; }
.notice.cod-approved { background: var(--ok-soft); color: var(--ok); }
.notice.cod-rejected { background: var(--bad-soft); color: var(--bad); }

/* Sorting */
.sort-bin { margin-top: 14px; border: 2px dashed var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.sort-bin-label { font-size: .85rem; color: var(--ink-3); }
.sort-bin-code { font-size: clamp(2.4rem, 12vw, 4.5rem); line-height: 1.05; letter-spacing: .04em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sort-bin-note { font-size: .95rem; color: var(--ink-2); min-height: 1.2em; }
.sort-bin-ok { border-style: solid; border-color: var(--brand-2); background: color-mix(in srgb, var(--brand-2) 10%, transparent); }
.sort-bin-warn { border-style: solid; border-color: #d4a017; background: color-mix(in srgb, #d4a017 12%, transparent); }
.sort-bin-error { border-style: solid; border-color: #c0392b; background: color-mix(in srgb, #c0392b 10%, transparent); }
.bin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.bin-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; min-width: 0; }
.bin-tile:hover { border-color: var(--brand-2); }
.bin-tile-code { font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bin-tile-n { font-size: 1.6rem; }
.bin-tile-sub { font-size: .8rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bin-unsorted .bin-tile-code { font-family: inherit; }
.bin-unsorted.has-items { border-color: #d4a017; background: color-mix(in srgb, #d4a017 10%, transparent); }
.bin-kind-hold, .bin-kind-return { border-style: dashed; }
.row-muted td { opacity: .6; }
[hidden] { display: none !important; }
.card-total { border: 2px solid var(--brand-2); }

/* Roster */
.big-amount { font-size: 1.8rem; font-weight: 700; margin: 4px 0 8px; }
.roster-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px; }
.roster { border-collapse: collapse; width: 100%; min-width: 760px; font-size: .88rem; }
.roster th, .roster td { padding: 6px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: middle; }
.roster thead th { position: sticky; top: 0; background: var(--surface, var(--bg)); font-weight: 600; }
.roster th small { display: block; font-weight: 400; color: var(--ink-3); font-size: .75rem; }
.roster tbody th { position: sticky; inset-inline-start: 0; background: var(--surface, var(--bg)); min-width: 130px; z-index: 1; }
.roster select { width: 100%; min-width: 92px; padding: 6px; font-size: .85rem; }
.roster .is-off { background: color-mix(in srgb, var(--ink-3) 10%, transparent); }
.roster td.is-set select { border-color: var(--brand-2); }
.driver-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.driver-tile { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.driver-tile small { color: var(--ink-3); font-size: .8rem; }
.driver-tile-n { font-weight: 700; font-size: 1.1rem; }
.driver-tile.is-off { opacity: .65; }
.driver-tile .badge { align-self: flex-start; }

/* =====================================================================
   Admin design system: clean white panels, gray-50 canvas, vivid brand,
   rounded-2xl cards, light sidebar with pill active state.
   ===================================================================== */
:root, [data-theme="light"] {
  --ink: #1d2939; --ink-2: #475467; --ink-3: #667085; --ink-4: #98a2b3;
  --bg: #f9fafb; --surface: #ffffff; --surface-2: #f2f4f7;
  --line: #e4e7ec; --line-2: #d0d5dd; --line-soft: #f2f4f7;
  --brand: #465fff; --brand-2: #3641f5; --brand-soft: #ecf3ff; --brand-ink: #465fff; --accent: #fb6514;
  --ok: #039855; --ok-soft: #ecfdf3; --warn: #b54708; --warn-soft: #fffaeb;
  --bad: #d92d20; --bad-soft: #fef3f2; --info: #0086c9; --info-soft: #f0f9ff;
  --radius: 8px; --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03);
  --sidebar: 290px; --sidebar-mini: 90px; --topbar-h: 72px;
  --thead: transparent; --row-hover: #f9fafb;
  --soft-warn-bg: #fffaeb; --soft-warn-line: #fedf89;
  --font: "Outfit", "IBM Plex Sans Arabic", "IBM Plex Sans Hebrew", system-ui, -apple-system, "Segoe UI", sans-serif;
}
[data-accent="teal"] { --brand: #0e9384; --brand-2: #107569; --brand-soft: #f0fdf9; --brand-ink: #0e9384; }
[data-accent="blue"] { --brand: #465fff; --brand-2: #3641f5; --brand-soft: #ecf3ff; --brand-ink: #465fff; }
[data-accent="purple"] { --brand: #7a5af8; --brand-2: #6938ef; --brand-soft: #f4f3ff; --brand-ink: #7a5af8; }
[data-accent="green"] { --brand: #12b76a; --brand-2: #039855; --brand-soft: #ecfdf3; --brand-ink: #039855; }
[data-accent="maroon"] { --brand: #e31b54; --brand-2: #c01048; --brand-soft: #fff1f3; --brand-ink: #e31b54; }
[data-accent="slate"] { --brand: #344054; --brand-2: #1d2939; --brand-soft: #f2f4f7; --brand-ink: #344054; }
.sw-teal { background: #0e9384; } .sw-blue { background: #465fff; } .sw-purple { background: #7a5af8; } .sw-green { background: #12b76a; } .sw-maroon { background: #e31b54; } .sw-slate { background: #344054; }

[data-theme="dark"] {
  color-scheme: dark;
  --ink: rgba(255, 255, 255, .9); --ink-2: #98a2b3; --ink-3: #7d8899; --ink-4: #667085;
  --bg: #101828; --surface: #182233; --surface-2: #1d2939;
  --line: #1f2a3c; --line-2: #344054; --line-soft: #1d2939;
  --brand-soft: color-mix(in srgb, var(--brand) 16%, transparent); --brand-ink: color-mix(in srgb, var(--brand) 55%, #fff);
  --ok: #32d583; --ok-soft: rgba(18, 183, 106, .14); --warn: #fdb022; --warn-soft: rgba(247, 144, 9, .14);
  --bad: #f97066; --bad-soft: rgba(240, 68, 56, .14); --info: #36bffa; --info-soft: rgba(11, 165, 236, .14);
  --thead: transparent; --row-hover: rgba(255, 255, 255, .02); --soft-warn-bg: rgba(247, 144, 9, .08); --soft-warn-line: rgba(247, 144, 9, .35);
  --shadow: none; --shadow-lg: 0 12px 24px rgba(0, 0, 0, .45);
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    color-scheme: dark;
    --ink: rgba(255, 255, 255, .9); --ink-2: #98a2b3; --ink-3: #7d8899; --ink-4: #667085;
    --bg: #101828; --surface: #182233; --surface-2: #1d2939;
    --line: #1f2a3c; --line-2: #344054; --line-soft: #1d2939;
    --brand-soft: color-mix(in srgb, var(--brand) 16%, transparent); --brand-ink: color-mix(in srgb, var(--brand) 55%, #fff);
    --ok: #32d583; --ok-soft: rgba(18, 183, 106, .14); --warn: #fdb022; --warn-soft: rgba(247, 144, 9, .14);
    --bad: #f97066; --bad-soft: rgba(240, 68, 56, .14); --info: #36bffa; --info-soft: rgba(11, 165, 236, .14);
    --thead: transparent; --row-hover: rgba(255, 255, 255, .02); --soft-warn-bg: rgba(247, 144, 9, .08); --soft-warn-line: rgba(247, 144, 9, .35);
    --shadow: none; --shadow-lg: 0 12px 24px rgba(0, 0, 0, .45);
  }
}

body { font-size: 14px; background: var(--bg); color: var(--ink); }
a { color: var(--brand-ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.icon { width: 20px; height: 20px; stroke-width: 1.7; }

/* Sidebar */
.sidebar { background: var(--surface); color: var(--ink-2); border-inline-end: 1px solid var(--line); width: var(--sidebar); padding: 0 20px; transition: width .2s ease, transform .2s ease; }
.brand { height: var(--topbar-h); padding: 0 4px; border-bottom: 0; color: var(--ink); gap: 10px; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--brand); }
.brand-mark::after { inset: 10px 9px; border-width: 2.5px; }
.brand-name { font-size: 1.2rem; font-weight: 700; letter-spacing: .08em; color: var(--ink); }
.nav { padding: 8px 0 32px; }
.nav-group { margin: 22px 12px 10px; font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-4); opacity: 1; }
.nav-link { gap: 12px; padding: 9px 12px; margin-bottom: 2px; border-radius: var(--radius); font-size: .9rem; font-weight: 500; color: var(--ink-2); }
.nav-link .icon { color: var(--ink-3); }
.nav-link:hover { background: var(--surface-2); color: var(--ink); }
.nav-link:hover .icon { color: var(--ink-2); }
.nav-link.is-active, [dir="rtl"] .nav-link.is-active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 500; box-shadow: none; }
.nav-link.is-active .icon { color: var(--brand-ink); }
.nav-link.is-active::before { content: none; }

/* Top bar */
.topbar { min-height: var(--topbar-h); padding: 12px 16px; gap: 12px; background: var(--surface); border-bottom: 1px solid var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.icon-btn { min-width: 44px; min-height: 44px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-3); background: var(--surface); position: relative; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.menu-btn { border-radius: var(--radius); }
.usermenu summary.icon-btn { border: 0; border-radius: 999px; padding: 0; gap: 10px; background: transparent; }
.usermenu summary.icon-btn:hover { background: transparent; }
.avatar { width: 40px; height: 40px; background: var(--brand-soft); color: var(--brand-ink); }
.user-name { display: none; font-weight: 500; color: var(--ink); font-size: .9rem; }
.user-name .icon { width: 16px; height: 16px; vertical-align: middle; color: var(--ink-3); }
.gsearch input[type="search"] { height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; padding-inline: 42px 56px; font-size: .88rem; }
.gsearch input[type="search"]:focus { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent); background: transparent; }
.gsearch-icon { color: var(--ink-3); }
.gsearch-kbd { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); display: none; padding: 2px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink-3); font-size: .72rem; pointer-events: none; }
.lang-form select { height: 44px; min-height: 44px; border-radius: 999px; border-color: var(--line); padding: 0 12px; font-size: .85rem; }
.bell-count { top: -2px; inset-inline-end: -2px; background: var(--accent); border: 2px solid var(--surface); height: 20px; line-height: 16px; }
.usermenu-panel, .gsearch-results, .theme-panel { border-radius: var(--radius-lg); border-color: var(--line); box-shadow: var(--shadow-lg); padding: 10px; }
.usermenu-panel a, .usermenu-panel button { border-radius: var(--radius); font-weight: 500; color: var(--ink-2); }
.usermenu-panel a:hover, .usermenu-panel button:hover { background: var(--surface-2); color: var(--ink); }

/* Page */
.content { padding: 16px 16px 48px; }
.page-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 20px; align-items: center; }
.page-head h1 { font-size: 1.25rem; font-weight: 600; color: var(--ink); letter-spacing: 0; }
.back { color: var(--ink-3); font-size: .82rem; }
.back:hover { color: var(--brand-ink); }
.page-intro { color: var(--ink-3); }
.card, .form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; box-shadow: none; }
.card-title, .card h2 { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.card h3 { font-size: .95rem; font-weight: 600; }
.card + .card { margin-top: 20px; }
.detail-grid { gap: 20px; }
.empty { border-radius: var(--radius-lg); border: 1px dashed var(--line-2); background: var(--surface); }

/* Stat cards */
.stats { gap: 16px; margin-bottom: 20px; }
.stats .stat, .stat-row .stat { border-radius: var(--radius-lg); box-shadow: none; border: 1px solid var(--line); background: var(--surface); }
.stats .stat { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 20px; }
.stats .stat .stat-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--surface-2); color: var(--ink); margin-bottom: 20px; }
.stats .stat .stat-icon .icon { width: 24px; height: 24px; }
.stats .stat .stat-label { order: 2; font-size: .85rem; color: var(--ink-3); }
.stats .stat .stat-value { order: 3; font-size: 1.6rem; font-weight: 700; color: var(--ink); margin-top: 6px; }
.stats .stat:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); transform: none; }
.stats .stat-alert .stat-icon { background: var(--bad-soft); color: var(--bad); }
.stat-row .stat span { color: var(--ink-3); }
.stat-row .stat strong { font-weight: 700; }

/* Buttons */
.btn { min-height: 44px; padding: 0 18px; border-radius: var(--radius); font-weight: 500; font-size: .88rem; box-shadow: var(--shadow); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--brand-2); }
.btn-ghost { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-danger-ghost { background: var(--surface); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--line)); }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: .82rem; }

/* Forms */
.field label, .label { font-size: .85rem; font-weight: 500; color: var(--ink-2); }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
  min-height: 44px; border: 1px solid var(--line-2); border-radius: var(--radius); background-color: transparent; color: var(--ink); padding: 10px 14px; font-size: .88rem; box-shadow: var(--shadow);
}
select { background-color: var(--surface); }
input::placeholder, textarea::placeholder { color: var(--ink-4); }
input:focus, select:focus, textarea:focus { border-color: color-mix(in srgb, var(--brand) 45%, var(--line-2)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent); }
.radio input, .check input, .cell-check input { accent-color: var(--brand); }
.form-section { border-top-color: var(--line); font-weight: 600; }

/* Tables */
.table tr { border-radius: var(--radius-lg); border-color: var(--line); }
.table td { border-top-color: var(--line-soft); }
@media (min-width: 900px) {
  .table { border-radius: var(--radius-lg); border-color: var(--line); background: var(--surface); }
  .table th { background: var(--thead); color: var(--ink-3); font-size: .78rem; font-weight: 500; padding: 12px 20px; border-bottom: 1px solid var(--line); }
  .table td { padding: 14px 20px; border-top: 1px solid var(--line-soft); color: var(--ink-2); }
  .table td .cell-title, .table td strong, .table td a.mono { color: var(--ink); }
  .table tbody tr:hover td { background: var(--row-hover); }
}

/* Badges & statuses: soft pills */
.badge, .status { padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 500; line-height: 1.6; filter: none !important; }
.badge, .status { background: var(--surface-2); color: var(--ink-2); }
.badge-active, .badge-verified, .badge-task-delivered, .badge-po-paid, .badge-att-present, .badge-tk-answered, .status-delivered, .status-pub-delivered { background: var(--ok-soft); color: var(--ok); }
.badge-pending_verification, .badge-po-approved, .badge-ho-awaiting_code, .badge-att-late, .badge-tk-open, .badge-warn, .status-on_hold, .status-pub-on_hold { background: var(--warn-soft); color: var(--warn); }
.badge-rejected, .badge-task-failed, .badge-att-absent, .status-lost, .status-damaged, .status-returned_to_merchant, .status-pub-returned { background: var(--bad-soft); color: var(--bad); }
.badge-info, .badge-run-open, .badge-po-requested, .status-pickup_pending, .status-pickup_assigned, .status-picked_up, .status-dropped_off, .status-pub-received { background: var(--info-soft); color: var(--info); }
.badge-inactive, .badge-expired, .badge-run-closed, .badge-task-pending, .badge-tk-closed, .badge-po-rejected, .badge-po-cancelled { background: var(--surface-2); color: var(--ink-2); }
.status-in_transfer, .status-arrived_at_hub, .status-hub_sorting, .status-pub-in_transit, .status-driver_assigned { background: color-mix(in srgb, #7a5af8 12%, transparent); color: #6938ef; }
.status-arrived_at_branch, .status-branch_sorting, .status-pub-at_branch, .status-ready_for_delivery { background: var(--brand-soft); color: var(--brand-ink); }
.status-out_for_delivery, .status-pub-out_for_delivery, .badge-run-out, .badge-po-out_for_payment { background: color-mix(in srgb, #fb6514 12%, transparent); color: #e04f16; }
.status-return_in_progress, .status-pub-returning, .status-partially_delivered, .badge-task-partial { background: color-mix(in srgb, #f79009 12%, transparent); color: #b54708; }
[data-theme="dark"] .status-in_transfer, [data-theme="dark"] .status-arrived_at_hub, [data-theme="dark"] .status-hub_sorting, [data-theme="dark"] .status-pub-in_transit, [data-theme="dark"] .status-driver_assigned { color: #bdb4fe; }
[data-theme="dark"] :is(.status-out_for_delivery, .status-pub-out_for_delivery, .badge-run-out, .badge-po-out_for_payment) { color: #fd853a; }
[data-theme="dark"] :is(.status-return_in_progress, .status-pub-returning, .status-partially_delivered, .badge-task-partial) { color: #fdb022; }
[data-theme="dark"] :is(.status, .badge, .tab .count) { background: color-mix(in srgb, currentColor 14%, transparent) !important; }
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] :is(.status, .badge, .tab .count) { background: color-mix(in srgb, currentColor 14%, transparent) !important; filter: none !important; }
}
.badge-pieces { background: var(--ink) !important; color: var(--surface) !important; }

/* Tabs as segmented control */
.tabs { gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 10px; display: inline-flex; max-width: 100%; }
.tab { border: 0; background: transparent; border-radius: 8px; padding: 8px 14px; font-weight: 500; font-size: .85rem; color: var(--ink-3); }
.tab:hover { color: var(--ink); }
.tab.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); border: 0; }
.tab .count { background: var(--line); color: var(--ink-2); }
.tab.is-active .count { background: var(--brand-soft); color: var(--brand-ink); }

/* Alerts */
.alert { border-radius: 12px; padding: 14px 16px; }
.alert-success { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); }
.alert-error { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, transparent); color: var(--bad); }
.alert-warn, .notice { background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); color: var(--warn); border-radius: 12px; }

/* Charts */
.bar-fill { background: var(--brand); opacity: 1; border-radius: 6px 6px 0 0; }

/* Desktop layout with collapsible sidebar */
@media (min-width: 1100px) {
  .content { padding: 24px 24px 60px; }
  .topbar { padding-inline: 24px; }
  .menu-btn { display: inline-flex; }
  .gsearch-kbd { display: inline-block; }
  .user-name { display: inline-flex; align-items: center; gap: 4px; }
  .nav-mini .sidebar { width: var(--sidebar-mini); padding: 0 16px; }
  .nav-mini .main { margin-inline-start: var(--sidebar-mini); }
  .nav-mini .sidebar .brand-name, .nav-mini .sidebar .nav-link span, .nav-mini .sidebar .nav-group { display: none; }
  .nav-mini .sidebar .brand, .nav-mini .sidebar .nav-link { justify-content: center; }
  .nav-mini .sidebar .nav-group + .nav-link, .nav-mini .sidebar .nav-link:first-child { margin-top: 12px; }
  .main { transition: margin .2s ease; }
}
@media (min-width: 1536px) { .content { padding: 32px 32px 64px; } }

/* Dashboard widgets */
.dash-grid { display: grid; gap: 20px; margin-bottom: 20px; }
@media (min-width: 1100px) { .dash-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { display: flex; flex-direction: column; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; color: var(--ink); min-width: 0; }
.kpi-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--surface-2); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.kpi-icon .icon { width: 24px; height: 24px; }
.kpi-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.kpi-label { font-size: .85rem; color: var(--ink-3); display: block; }
.kpi-value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; margin-top: 6px; display: block; font-variant-numeric: tabular-nums; }
.trend { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 500; background: var(--surface-2); color: var(--ink-3); }
.trend-up { background: var(--ok-soft); color: var(--ok); }
.trend-down { background: var(--bad-soft); color: var(--bad); }
.chart-card .card-head { margin-bottom: 4px; }
.chart-sub { margin: 0 0 16px; color: var(--ink-3); font-size: .85rem; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: var(--ink-3); margin-bottom: 8px; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: 6px; vertical-align: middle; }
.chart-svg { width: 100%; height: 240px; display: block; }
.chart-svg .grid { stroke: var(--line); stroke-dasharray: 3 4; }
.chart-svg .axis { fill: var(--ink-4); font-size: 11px; }
.chart-svg .b1 { fill: var(--brand); }
.chart-svg .b2 { fill: color-mix(in srgb, var(--brand) 25%, var(--surface)); }
.chart-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.chart-totals span { display: block; color: var(--ink-3); font-size: .8rem; }
.chart-totals strong { font-size: 1.15rem; }
.track-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.track-item { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 10px; }
.track-item-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.track-steps { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; margin: 4px 0 0; padding: 0; list-style: none; }
.track-steps::before { content: ""; position: absolute; top: 7px; inset-inline: 16.6%; height: 2px; background: var(--line); }
.track-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .75rem; color: var(--ink-3); text-align: center; }
.track-steps li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-2); z-index: 1; }
.track-steps li.done::before { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.track-steps li.done { color: var(--ink); }
.track-meta { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: .8rem; color: var(--ink-3); }
.courier { display: flex; align-items: center; gap: 10px; }
.courier .avatar { width: 36px; height: 36px; font-size: .85rem; font-weight: 600; }
.table-card { padding: 0; overflow: hidden; }
.table-card .card-head { padding: 16px 20px; margin: 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; gap: 10px; }
.table-card .table { border: 0; border-radius: 0; margin: 0; }
@media (max-width: 899px) { .table-card .table { padding: 12px; } }
.route { display: inline-flex; align-items: center; gap: 6px; }
.route .icon { width: 14px; height: 14px; color: var(--ink-4); }
[dir="rtl"] .route .icon { transform: scaleX(-1); }

/* Sign-in: split screen on wide screens */
.auth-body { background: var(--surface); }
@media (min-width: 1024px) {
  .auth-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; width: 100%; }
  .auth-split .auth-wrap { align-self: center; justify-self: center; }
  .auth-aside { display: flex !important; }
}
.auth-aside { display: none; position: relative; overflow: hidden; background: #161950; color: #fff; align-items: center; justify-content: center; flex-direction: column; gap: 14px; padding: 40px; text-align: center; }
.auth-aside::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%); }
.auth-aside > * { position: relative; }
.auth-aside .brand-mark { width: 48px; height: 48px; background: var(--brand); }
.auth-aside .brand-name { color: #fff; font-size: 1.6rem; }
.auth-aside p { margin: 0; color: #98a2b3; max-width: 360px; }
.auth-card { border: 0; padding: 8px 0; background: transparent; }
.auth-title { font-size: 1.6rem; font-weight: 600; }
.track-card.auth-card, .auth-card-wide { border: 1px solid var(--line); padding: 24px; background: var(--surface); }
.chart-legend .lg1 { background: var(--brand); } .chart-legend .lg2 { background: color-mix(in srgb, var(--brand) 28%, var(--surface)); }
.mchart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; height: 220px; align-items: end; padding-top: 8px; background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 25%; background-position: 0 8px; }
.mchart-col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; min-width: 0; }
.mchart-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.mchart-bars span { width: min(12px, 38%); min-height: 2px; border-radius: 4px 4px 0 0; }
.mchart .mb1 { background: var(--brand); } .mchart .mb2 { background: color-mix(in srgb, var(--brand) 28%, var(--surface)); }
.mchart small { font-size: .72rem; color: var(--ink-3); }
.gsearch input[type="search"]:not([type="checkbox"]) { padding-inline: 42px 64px; }
.filter-search input[type="search"]:not([type="checkbox"]) { padding-inline-start: 40px; }
.dash-grid > .card { align-self: start; }
@media (max-width: 1099px) {
  .gsearch input[type="search"]:not([type="checkbox"]) { padding-inline: 40px 12px; }
  .topbar { padding: 10px 12px; gap: 8px; }
  .topbar-end { gap: 6px; }
}
@media (max-width: 640px) {
  .icon-btn { min-width: 40px; min-height: 40px; }
  .lang-form select { width: 58px; padding: 0 6px; height: 40px; min-height: 40px; }
  .avatar { width: 36px; height: 36px; }
  .theme-menu { display: none; }
  .usermenu-panel .theme-inline { display: block; }
}
.theme-inline { display: none; }
.date-filter { min-width: 0; } .date-filter input { min-width: 0; flex: 1; width: auto; }
.driver-cta { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--ink); margin-bottom: 20px; } .driver-cta .kpi-icon { margin: 0; background: var(--brand-soft); color: var(--brand-ink); }

/* Parcel page: details + tracking column */
.parcel-layout { display: grid; gap: 20px; }
.parcel-main { min-width: 0; }
.parcel-main > .detail-grid { margin-bottom: 20px; }
.parcel-side { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.parcel-side .card + .card { margin-top: 0; }
@media (min-width: 1100px) {
  .parcel-layout { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; }
  .parcel-side { position: sticky; top: calc(var(--topbar-h) + 16px); }
  .parcel-main .detail-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
@media (min-width: 1536px) { .parcel-layout { grid-template-columns: minmax(0, 1fr) 440px; } }
.track-panel .card-head { align-items: flex-start; gap: 10px; }
.track-panel .card-head h2 { font-size: 1.15rem; }
.track-panel .chart-sub { margin: 4px 0 0; }
.trk-map { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; height: 220px; background: var(--surface-2); }
.trk-map iframe { width: 100%; height: 100%; border: 0; display: block; }
[data-theme="dark"] .trk-map iframe { filter: invert(.9) hue-rotate(180deg) saturate(.6); }
.trk-id { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.trk-label { display: block; font-size: .82rem; color: var(--ink-3); margin-bottom: 4px; }
.trk-id strong { font-size: 1.2rem; color: var(--ink); font-family: "Outfit", ui-monospace, monospace; letter-spacing: .01em; }
.trk-pill { padding: 5px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600; }
.trk-go { background: var(--ok-soft); color: var(--ok); }
.trk-ok { background: var(--ok-soft); color: var(--ok); }
.trk-warn { background: var(--warn-soft); color: var(--warn); }
.trk-bad { background: var(--bad-soft); color: var(--bad); }
.trk-steps { list-style: none; margin: 0; padding: 0; }
.trk-steps li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 0 0 26px; }
.trk-steps li:last-child { padding-bottom: 0; }
.trk-steps li::after { content: ""; position: absolute; top: 48px; bottom: 4px; inset-inline-start: 21px; border-inline-start: 2px dashed var(--line-2); }
.trk-steps li:last-child::after { content: none; }
.trk-steps li.line-done::after { border-inline-start: 2px dotted var(--brand); }
.trk-ico { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink-3); box-shadow: 0 0 0 4px var(--bg); }
.trk-ico .icon { width: 20px; height: 20px; }
.trk-steps li.is-done .trk-ico { background: var(--brand-soft); color: var(--brand-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 7%, transparent); }
.trk-steps li.is-current .trk-ico { background: var(--brand); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 18%, transparent); }
.trk-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trk-text small { color: var(--ink-3); font-size: .8rem; }
.trk-text strong { font-size: .98rem; font-weight: 600; color: var(--ink); }
.trk-steps li:not(.is-done) .trk-text strong { color: var(--ink-3); font-weight: 500; }
.trk-time { color: var(--ink-3); font-size: .85rem; font-variant-numeric: tabular-nums; }
.trk-full { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.trk-full summary { cursor: pointer; color: var(--brand-ink); font-size: .85rem; font-weight: 500; margin-bottom: 12px; }
.trk-courier { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.trk-courier .avatar { width: 48px; height: 48px; font-size: 1.1rem; font-weight: 600; flex: none; }
.trk-courier-name { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.trk-courier-name small { color: var(--ink-3); font-size: .8rem; }
.trk-courier-name strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-actions { display: flex; gap: 10px; }
.trk-actions .icon-btn { width: 48px; height: 48px; background: var(--bg); }
.track-driver .trk-courier { padding: 0; } .track-card .trk-steps { margin-top: 8px; }

/* Issues */
.badge-prio-urgent { background: var(--bad-soft); color: var(--bad); }
.badge-prio-high { background: color-mix(in srgb, #fb6514 12%, transparent); color: #e04f16; }
.badge-prio-medium { background: var(--warn-soft); color: var(--warn); }
.badge-prio-low { background: var(--surface-2); color: var(--ink-2); }
.badge-iss-open { background: var(--info-soft); color: var(--info); }
.badge-iss-in_progress { background: var(--brand-soft); color: var(--brand-ink); }
.badge-iss-waiting { background: var(--warn-soft); color: var(--warn); }
.badge-iss-resolved { background: var(--ok-soft); color: var(--ok); }
.badge-iss-closed { background: var(--surface-2); color: var(--ink-3); }
.issues-card .plain-list li { padding: 6px 0; }
.uperm-list { display: grid; gap: 0; }
.uperm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.uperm-row:first-child { border-top: 0; }
.uperm-row select { grid-column: 1 / -1; min-height: 40px; }
.uperm-name { display: flex; flex-direction: column; min-width: 0; }
.uperm-name small { color: var(--ink-3); font-size: .78rem; }
.uperm-row.is-custom .uperm-name { color: var(--brand-ink); font-weight: 600; }
@media (min-width: 900px) { .uperm-row { grid-template-columns: minmax(0, 1fr) auto 200px; } .uperm-row select { grid-column: auto; } }
.badge-ret-requested { background: var(--warn-soft); color: var(--warn); }
.badge-ret-approved, .badge-ret-in_transit { background: var(--info-soft); color: var(--info); }
.badge-ret-arrived { background: var(--brand-soft); color: var(--brand-ink); }
.badge-ret-closed { background: var(--ok-soft); color: var(--ok); }
.badge-ret-rejected, .badge-ret-cancelled { background: var(--surface-2); color: var(--ink-3); }
.ret-answer { min-width: 220px; }
.ret-answer .inline-form { display: flex; gap: 6px; }
.ret-card { margin-bottom: 20px; }
.card + .table, .card + .empty { margin-top: 20px; }

/* ---------- Prices by city ---------- */
.matrix-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.matrix-tools input[type="search"] { max-width: 260px; }
.matrix-fill { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.matrix-fill input { width: 118px; }
.price-matrix .table td { vertical-align: middle; }
.price-input { width: 100%; max-width: 120px; padding: 6px 8px; font-variant-numeric: tabular-nums; }
.price-input.is-own { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); background: var(--brand-soft); }
.price-input::placeholder { color: var(--ink-3); opacity: .8; }
.price-matrix tr.is-changed td { background: color-mix(in srgb, var(--warn-soft) 70%, transparent); }
.picker { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.picker-head { display: flex; gap: 8px; align-items: center; padding: 8px; border-bottom: 1px solid var(--line); }
.picker-head input { flex: 1; min-width: 0; }
.picker-count { font-size: .82rem; white-space: nowrap; }
.picker-list { max-height: 220px; overflow-y: auto; padding: 6px 10px; display: grid; gap: 2px; }
.picker-list .check { padding: 4px 0; }
.pchange-form .form-section { margin-top: 20px; }
.pchange-preview { margin-top: 16px; padding-top: 4px; border-top: 1px dashed var(--line); }
.badge-pc-applied { background: var(--ok-soft); color: var(--ok); }
.badge-pc-scheduled { background: var(--brand-soft); color: var(--brand); }
.badge-pc-undone, .badge-pc-cancelled { background: var(--surface-2); color: var(--ink-3); }
.price-matrix .sticky-actions { background: var(--surface); border-top: 1px solid var(--line); margin: 12px -18px -18px; padding: 12px 18px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.price-input { padding-top: 5px; padding-bottom: 5px; min-height: 0; }
/* Phones: one compact card per city, the three prices side by side. */
@media (max-width: 899px) {
  .price-matrix .table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; padding: 10px 12px; }
  .price-matrix .table td { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 0; border-top: 0; text-align: start; }
  .price-matrix .table td::before { font-size: .72rem; font-weight: 500; }
  .price-matrix .table td.cell-check { grid-column: 1; grid-row: 1; flex-direction: row; }
  .price-matrix .table td.cell-check::before, .price-matrix .table td.cell-check + td::before, .price-matrix .table tr > td:first-child::before { content: none; }
  .price-matrix .table td.cell-check + td { grid-column: 2 / -1; grid-row: 1; }
  .price-matrix .table tr > td:first-child:not(.cell-check) { grid-column: 1 / -1; }
  .price-matrix .table tr.is-changed td { background: none; }
  .price-matrix .table tr.is-changed { border-color: var(--warn); }
  .price-input { max-width: none; }
  .matrix-tools input[type="search"] { max-width: none; flex: 1 1 100%; }
  .matrix-fill { width: 100%; }
  .matrix-fill > span { flex-basis: 100%; }
  .matrix-fill input { width: auto; flex: 1 1 0; min-width: 0; }
}
.badge-dh-pending_approval { background: var(--warn-soft); color: var(--warn); }
.badge-dh-confirmed { background: var(--ok-soft); color: var(--ok); }
.badge-dh-rejected, .badge-dh-cancelled { background: var(--surface-2); color: var(--ink-3); }

/* case: merchant consent only matters when the compensation is reversed */
form[data-found]:not(:has(input[value="MERCHANT"]:checked)) .found-consent { display: none; }

/* chart of accounts: contra accounts indented under the account they reduce */
.chart-list { list-style: none; margin: 0; padding: 0; }
.chart-list li { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: 4px 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); }
.chart-list li:first-child { border-top: 0; }
.chart-name { display: flex; flex-direction: column; min-width: 0; }
.chart-name small { font-size: .78rem; }
.chart-bal { display: flex; flex-direction: column; align-items: flex-end; text-align: end; white-space: nowrap; }
.chart-contra .chart-name { padding-inline-start: 16px; }
.chart-code { color: var(--ink-3); }

/* notifications: device push card, bell nudge on new items */
.push-card { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.push-card .form-actions { margin: 0; }
@keyframes bell-ring { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.bell-ring svg { animation: bell-ring .4s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { .bell-ring svg { animation: none; } }

/* prohibited items */
.prohib-reminder { display: flex; gap: 6px; align-items: center; margin-top: 0; }
.prohib-reminder svg { width: 16px; height: 16px; flex: none; }
.suspend-card { border-color: color-mix(in srgb, var(--bad) 40%, transparent); }

/* proof of delivery */
.sign-field { gap: 6px; }
.sign-pad { width: 100%; max-width: 100%; height: 160px; background: #fff; border: 1px dashed var(--line-2, #cfd4cd); border-radius: 10px; touch-action: none; }
.sign-missing .sign-pad { border-color: var(--bad); }
.otp-resend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.pod-line { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 4px; font-size: .9em; }
.pod-line svg { width: 14px; height: 14px; vertical-align: -2px; }
.msg-file { display: inline-flex; gap: 4px; align-items: center; margin-top: 6px; font-size: .9em; }
.msg-file svg { width: 14px; height: 14px; }
.tabs + .tabs-sub { margin-top: -4px; }
.tab.is-empty { opacity: .55; }
.tab.is-empty:hover { opacity: 1; }
.cards-2 { display: grid; gap: 16px; align-items: start; }
.cards-2 > .card { margin: 0; }
@media (min-width: 900px) { .cards-2 { grid-template-columns: 1fr 1fr; } }
.badge-lc-generated { background: var(--surface-2); color: var(--ink-2); }
.badge-lc-printed { background: var(--brand-soft); color: var(--brand-ink); }
.badge-lc-linked { background: var(--ok-soft); color: var(--ok); }
.badge-lc-void { background: var(--bad-soft, #fbe9e7); color: var(--bad); }
.label-lookup p { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.shift-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.shift-card .shift-state { display: flex; gap: 10px; align-items: flex-start; }
.shift-card .shift-state > div { display: flex; flex-direction: column; gap: 2px; }
.shift-card .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); margin-top: 7px; flex: none; }
.shift-card.is-on .dot { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.shift-card .notice { flex-basis: 100%; margin: 0; }
.badge-loc-online { background: var(--ok-soft); color: var(--ok); }
.badge-loc-stale { background: var(--warn-soft); color: var(--warn); }
.badge-loc-offline { background: var(--surface-2); color: var(--ink-2); }
.trail-card { padding: 12px; }
.trail-map { width: 100%; max-width: 560px; aspect-ratio: 1; display: block; margin: 0 auto; background: var(--surface-2); border-radius: 10px; }
.trail-grid { fill: none; stroke: var(--line); stroke-width: .15; }
.trail-line { fill: none; stroke: var(--brand); stroke-width: .8; stroke-linejoin: round; stroke-linecap: round; }
.trail-start { fill: var(--surface); stroke: var(--brand); stroke-width: .6; }
.trail-end { fill: var(--brand); stroke: var(--surface); stroke-width: .6; }
.trail-ok { fill: var(--ok); }
.trail-failed { fill: var(--bad); }
.trail-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: .85rem; color: var(--ink-2); margin: 10px 0 0; }
.trail-legend .lg { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.lg-start { border: 2px solid var(--brand); } .lg-end { background: var(--brand); } .lg-ok { background: var(--ok); } .lg-failed { background: var(--bad); }
.share-list { list-style: none; margin: 0; padding: 0; }
.share-list li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.share-list li:last-child { border-bottom: 0; }
.share-list li .cell-sub { flex-basis: 100%; }
form.inline { display: inline; }
.salary-box { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 4px 0; }
.salary-box legend { padding: 0 6px; font-weight: 600; }
.badge-sv-pending { background: var(--warn-soft); color: var(--warn); }
.badge-sv-approved { background: var(--ok-soft); color: var(--ok); }
.badge-sv-rejected, .badge-sv-cancelled { background: var(--surface-2); color: var(--ink-2); }
.badge-veh-available { background: var(--ok-soft); color: var(--ok); }
.badge-veh-assigned { background: var(--brand-soft); color: var(--brand-ink); }
.badge-veh-in_maintenance, .badge-veh-out_of_service { background: var(--warn-soft); color: var(--warn); }
.badge-veh-retired { background: var(--surface-2); color: var(--ink-2); }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.timeline { list-style: none; margin: 0; padding: 0; border-inline-start: 2px solid var(--line); }
.timeline li { position: relative; padding: 10px 14px 12px; margin-inline-start: 10px; border-bottom: 1px solid var(--line-soft, var(--line)); }
.timeline li::before { content: ""; position: absolute; inset-inline-start: -18px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); border: 2px solid var(--surface); }
.timeline li.tl-ticket::before { background: var(--warn); }
.timeline .tl-body { margin: 6px 0; color: var(--ink-2); }
.timeline .cell-sub { display: block; }
.badge-crm { background: var(--brand-soft); color: var(--brand-ink); }
.text-ok { color: var(--ok); }
.badge-wh-sent { background: var(--ok-soft); color: var(--ok); }
.badge-wh-pending { background: var(--warn-soft); color: var(--warn); }
.badge-wh-failed { background: var(--bad-soft); color: var(--bad); }

/* Installed app: connection bar, operations waiting to be sent, camera scanning */
.alert-info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.netbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 12px; border-radius: var(--radius); background: #26313a; color: #fff; font-size: .92rem; }
.netbar .icon { flex: none; }
.outbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 14px; margin-bottom: 12px; border-radius: var(--radius); background: var(--warn-soft); color: var(--warn); border: 1px solid #ecd9ae; font-size: .92rem; }
.outbar > span { flex: 1 1 200px; font-weight: 600; }
.outbar.has-failed { background: var(--bad-soft); color: var(--bad); border-color: #efc9c5; }
.outbar-list { list-style: none; margin: 4px 0 0; padding: 0; width: 100%; display: grid; gap: 6px; }
.outbar-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: var(--surface); color: var(--ink); border-radius: 6px; padding: 8px 10px; }
.outbar-list li span { flex: 1 1 160px; color: var(--ink-2); }
.task.is-queued .task-link { border-inline-start-color: var(--warn); }
.task.is-queued .task-top::after { content: "⏳"; font-size: .9rem; }
.cam-btn { min-width: 48px; min-height: 48px; padding: 0 12px; }
.scan-input + .cam-btn { margin-top: 8px; }
.cam { position: fixed; inset: 0; z-index: 200; background: #000; display: grid; place-items: center; }
.cam video { width: 100%; height: 100%; object-fit: cover; }
.cam-frame { position: absolute; width: min(78vw, 360px); height: min(40vw, 180px); border: 3px solid rgba(255, 255, 255, .9); border-radius: 14px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); }
.cam-code { position: absolute; bottom: 90px; left: 16px; right: 16px; margin: 0; text-align: center; color: #fff; font: 600 1.1rem ui-monospace, Menlo, Consolas, monospace; direction: ltr; }
.cam-close { position: absolute; top: max(16px, env(safe-area-inset-top)); inset-inline-end: 16px; min-width: 48px; min-height: 48px; border-radius: 50%; }
.offline-wrap { max-width: 440px; }
.offline-art { display: block; width: 140px; margin: 0 auto 8px; }
.offline-art .oa-road { stroke: var(--line); stroke-width: 4; stroke-linecap: round; }
.offline-art .oa-van { fill: var(--surface); stroke: var(--brand); stroke-width: 2; }
.offline-art .oa-cab { fill: var(--brand); }
.offline-art .oa-wheel { fill: var(--ink); }
.offline-art .oa-wave { fill: none; stroke: var(--ink-3); stroke-width: 2.5; stroke-linecap: round; }
.offline-art .oa-cut { stroke: var(--bad); stroke-width: 3; stroke-linecap: round; }
.offline-queue { font-weight: 600; color: var(--warn); }

/* Shops asking to join */
.lead-list { display: grid; gap: 12px; }
.lead-card { padding: 16px; }
.lead-card.is-open { border-color: var(--brand-2); box-shadow: 0 0 0 3px var(--brand-soft); }
.lead-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.lead-shop { margin: 0; font-size: 1.05rem; }
.lead-kv { margin-bottom: 12px; }
.lead-kv dd { overflow-wrap: anywhere; }
.lead-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; }
.lead-status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 280px; }
.lead-status select { flex: 0 1 180px; }
.lead-status input { flex: 1 1 160px; min-width: 0; }
@media (min-width: 900px) { .lead-list { grid-template-columns: repeat(2, 1fr); } }
.nowrap { white-space: nowrap; }
.notif-list .is-important a { border-inline-start-color: var(--bad); }
.notif-list .is-notice a strong::before { content: "📣 "; }
.veh-photos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.veh-photos img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }

/* Menu across the top (chosen per person instead of the side menu) */
.layout-top .main { margin-inline-start: 0; }
.layout-top .backdrop, .layout-top.nav-open .backdrop { display: none; }
.brand-top { height: auto; padding: 0 2px; border: 0; color: var(--ink); text-decoration: none; flex: none; }
.brand-top .brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--brand); }
.brand-top .brand-name { color: var(--ink); font-size: 1.1rem; letter-spacing: .08em; }
.topnav { display: none; background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 19; }
.layout-top.nav-open .topnav { display: block; }
.topnav-list { list-style: none; margin: 0; padding: 6px 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.topnav-link { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px; border-radius: var(--radius); color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .92rem; cursor: pointer; white-space: nowrap; list-style: none; user-select: none; }
summary.topnav-link::-webkit-details-marker { display: none; }
.topnav-link .icon { color: var(--ink-3); flex: none; }
.topnav-link:hover { color: var(--ink); background: var(--surface-2); }
.topnav-link.is-active { color: var(--brand-ink); }
.topnav-link.is-active .icon { color: var(--brand-ink); }
.topnav-caret { width: 16px; height: 16px; margin-inline-start: auto; transition: transform .15s ease; }
details[open] > .topnav-link .topnav-caret { transform: rotate(180deg); }
.topnav-menu { display: grid; gap: 2px; padding: 2px 0 8px; padding-inline-start: 22px; }
.topnav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: .9rem; }
.topnav-item .icon { color: var(--ink-3); flex: none; }
.topnav-item:hover { background: var(--surface-2); color: var(--ink); }
.topnav-item.is-active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 500; }
.topnav-item.is-active .icon { color: var(--brand-ink); }
.layout-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; min-height: 64px; }
.layout-modes { grid-template-columns: repeat(2, 1fr); }
.lp-art { width: 46px; height: 30px; border: 1.5px solid var(--line-2); border-radius: 5px; position: relative; background: var(--surface); }
.lp-art::before { content: ""; position: absolute; background: var(--brand); opacity: .55; border-radius: 2px; }
.lp-side .lp-art::before { inset-block: 3px; inset-inline-start: 3px; width: 10px; }
.lp-top .lp-art::before { inset-inline: 3px; top: 3px; height: 6px; }
.layout-pick.is-current, .theme-modes button.is-current { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); }
@media (min-width: 1100px) {
  .layout-top .menu-btn { display: none; }
  .layout-top .topbar { position: static; }
  .layout-top .topnav { display: block; position: sticky; top: 0; z-index: 25; }
  .topnav-list { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 2px; padding: 0 20px; }
  .topnav-link { min-height: 52px; border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; }
  .topnav-link:hover { background: none; }
  .topnav-link.is-active { border-bottom-color: var(--brand); }
  .topnav-caret { margin-inline-start: 2px; width: 14px; height: 14px; opacity: .7; }
  .topnav-drop { position: relative; }
  .topnav-menu { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: 40; min-width: 250px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); }
  .topnav-menu.is-wide { grid-template-columns: repeat(2, minmax(230px, 1fr)); }
  .topnav-menu.is-end { inset-inline-start: auto; inset-inline-end: 0; }
  .layout-top .content { max-width: 1440px; margin-inline: auto; }
}
@media (min-width: 1400px) { .topnav-menu.is-wide { grid-template-columns: repeat(3, minmax(230px, 1fr)); } }
@media (max-width: 639px) { .brand-top .brand-name { display: none; } .brand-top .brand-mark { width: 32px; height: 32px; } }
/* Search results: above the top menu bar, and full width on a phone */
.layout-top .topbar { position: relative; z-index: 30; }
.gsearch-results { z-index: 45; }
@media (max-width: 699px) {
  .gsearch-results { position: fixed; top: var(--gs-top, 64px); inset-inline: 8px; width: auto; max-height: calc(100vh - var(--gs-top, 64px) - 12px); max-height: calc(100dvh - var(--gs-top, 64px) - 12px); }
}
@media (max-width: 1099px) { .layout-top .topbar { position: sticky; top: 0; } }

/* Guided walk */
.tour-btn .icon { width: 20px; height: 20px; }
.tour-veil { position: fixed; inset: 0; z-index: 90; }
.tour-spot { position: fixed; z-index: 91; border-radius: 10px; pointer-events: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand), 0 0 0 200vmax rgba(10, 18, 24, .55); transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; }
.tour-pop { position: fixed; z-index: 92; width: min(360px, calc(100vw - 24px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 12px; box-shadow: 0 12px 32px rgba(10, 18, 24, .22); }
.tour-pop.is-in { animation: tour-in .22s ease; }
.tour-pop.is-sheet { left: 8px !important; right: 8px; width: auto; }
@keyframes tour-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tour-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.tour-count { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tour-x, .tour-never { border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 13px; cursor: pointer; padding: 6px 2px; min-height: 32px; }
.tour-x:hover, .tour-never:hover { color: var(--ink); text-decoration: underline; }
.tour-title { margin: 0 0 4px; font-size: 16px; font-weight: 600; line-height: 1.4; }
.tour-body { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.65; }
.tour-dots { display: flex; gap: 4px; margin: 12px 0 10px; flex-wrap: wrap; }
.tour-dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--line-2); transition: width .2s; }
.tour-dots span.is-on { width: 18px; background: var(--brand); }
.tour-actions { display: flex; justify-content: flex-end; gap: 8px; }
.tour-actions .btn { min-height: 40px; min-width: 84px; }
.tour-never { display: block; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } .tour-pop.is-in { animation: none; } }