:root {
  --bg: #10141a;
  --panel: #171d26;
  --panel-2: #1e2530;
  --border: #2a323e;
  --border-soft: #232a34;
  --text: #e9ecf1;
  --text-muted: #8b93a3;
  --text-faint: #5b6473;
  /* Indication colour before a company picks one: plain grey (script.js PLAIN_INDICATION_COLOUR). */
  --covered: #c3cad5;
  --covered-dim: #27282b;
  --covered-text: #06201c;
  --remaining: #f2a93c;
  --remaining-dim: #4a3a1a;
  --alert: #ef6a5a;
  --alert-dim: #4a2420;
  /* Status colours: their meaning must never change with a company's brand colours.
     Green-teal = OK / active / done, amber = warning / idle, red (--alert) = problem. */
  --ok: #2dd4bf;
  --ok-dim: #1a4a45;
  --warn: #f2a93c;
  --warn-dim: #4a3a1a;
  --font: 'Manrope', -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}
/* Light mode is a per-user preference (toggle in the sidebar, saved in localStorage) — only
   background/surface/text swap. --covered = the company's indication colour (buttons, selected
   items, links, progress; plain grey until one is picked), --remaining = the fixed attention
   amber (counts, next stop). Status meaning uses the fixed
   --ok / --warn / --alert, slightly darker here so they read well on white. JS (applyTheme in
   script.js) sets the brand values inline on load; this block is the pre-JS fallback. */
:root[data-theme="light"] {
  --bg: #f5f7fa;
  --panel: #ffffff;
  --panel-2: #eef1f6;
  --border: #dbe1ea;
  --border-soft: #e6eaf1;
  --text: #1a2029;
  --text-muted: #5b6473;
  --text-faint: #8b93a3;
  --covered: #4b5563;
  --covered-dim: #dfe0e3;
  --covered-text: #f4f7fb;
  --ok: #0f9f8c;
  --ok-dim: #d3f3ee;
  --warn: #c77a0e;
  --warn-dim: #fbecd2;
  --alert-dim: #fbe0dc;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; -webkit-font-smoothing: antialiased; }
/* Chrome/Edge paint autofilled and "saved" (address/payment suggestion)
   fields with their own light background, ignoring our input CSS — this
   is what turns a field into a jarring white box. The huge inset
   box-shadow is the only reliable way to override it; the long
   transition delay stops the light color from flashing before it kicks in. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--panel-2) inset !important;
  box-shadow: 0 0 0 1000px var(--panel-2) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.app { display: flex; height: 100vh; }
.sidebar { width: 226px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; padding: 20px 14px; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 22px 8px; }
.brand-marks { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* Sales Navio's own logo (assets/logo-pin-256.png, the pin filling a white tile). Fixed image, the product's own brand:
   it is never repainted with the signed-in company's colors. */
.brand-mark { width: 44px; height: 44px; border-radius: 11px; background: #ffffff url("assets/logo-pin-256.png") center / auto 80% no-repeat; position: relative; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(20, 33, 61, 0.12); }
/* The company's own logo: shown whole (never cropped or stretched), at a readable size. */
.brand-mark-company { height: auto; width: auto; max-height: 52px; max-width: 100px; object-fit: contain; flex-shrink: 0; }
/* With a company logo: both logos side by side at the same height (company | Sales Navio), the names below them. */
.brand.has-company-logo { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; row-gap: 10px; align-items: center; }
.brand.has-company-logo .brand-marks { grid-column: 1; grid-row: 1; gap: 18px; min-width: 0; }
.brand.has-company-logo .brand-mark-company { height: 52px; max-height: 52px; }
.brand.has-company-logo .brand-mark { width: 52px; height: 52px; border-radius: 12px; background-size: auto 92%; box-shadow: none; }   /* our pin fills its tile and has no outline, like the company's own mark beside it */
.brand.has-company-logo .brand-mark::before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 1px; background: var(--border); }
.brand.has-company-logo .sidebar-collapse-btn { grid-column: 2; grid-row: 1; }
.brand.has-company-logo .brand-text { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.sidebar.collapsed .brand.has-company-logo { display: flex; }
.sidebar.collapsed .brand.has-company-logo .brand-marks { flex-direction: column; align-items: center; gap: 8px; }
.sidebar.collapsed .brand.has-company-logo .brand-mark-company { height: 40px; max-height: 40px; max-width: 44px; }
.sidebar.collapsed .brand.has-company-logo .brand-mark { width: 40px; height: 40px; border-radius: 10px; background-size: auto 92%; box-shadow: none; }
.sidebar.collapsed .brand.has-company-logo .brand-mark::before { display: none; }
.logo-upload-preview { width: 44px; height: 44px; border-radius: 10px; background: var(--panel-2); border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text-faint); overflow: hidden; flex-shrink: 0; }
.logo-upload-preview img { width: 100%; height: 100%; object-fit: contain; }
.round-preview { width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; font-size: 18px; color: var(--text-faint); box-sizing: border-box; }
.round-preview img { width: 100%; height: 100%; object-fit: cover; }
.help-line { font-size: 12px; color: var(--text-faint); margin-top: 6px; }
.brand-name { font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.brand-sub { font-size: 10px; color: var(--text-faint); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 1px; }
.nav-group-label { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.09em; padding: 16px 10px 6px; font-weight: 700; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8.5px 10px; border-radius: 8px; color: var(--text-muted); font-weight: 600; font-size: 13.3px; cursor: pointer; user-select: none; transition: background .12s ease, color .12s ease; margin-bottom: 1px; }
.nav-item:hover { background: var(--panel-2); color: var(--text); }
.nav-item.active { background: var(--panel-2); color: var(--text); }
.nav-item.active .nav-dot { background: var(--covered); box-shadow: 0 0 0 3px var(--covered-dim); }
.nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; }
.nav-count-badge { margin-left: auto; background: var(--remaining-dim); color: var(--remaining); font-family: var(--mono); font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 10px; }
.sidebar-foot { margin-top: auto; padding: 12px 10px 4px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: 9px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.foot-name { font-size: 12.5px; font-weight: 700; }
.foot-role { font-size: 10.5px; color: var(--text-faint); }

/* ---------- Collapsible icon sidebar ---------- */
.sidebar { transition: width .15s ease; }
.nav-icon { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.nav-icon svg { width: 100%; height: 100%; }
.sidebar-collapse-btn { margin-left: auto; width: 22px; height: 22px; flex-shrink: 0; border: 1px solid var(--border); background: var(--panel-2); color: var(--text-muted); border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.sidebar-collapse-btn:hover { color: var(--text); border-color: var(--text-faint); }
.sidebar.collapsed { width: 64px; padding-left: 10px; padding-right: 10px; }
.sidebar.collapsed .brand { flex-direction: column; justify-content: center; padding-left: 0; padding-right: 0; gap: 10px; }
.sidebar.collapsed .brand-text { display: none; }
.sidebar.collapsed .brand-marks { flex-direction: column; }
.sidebar.collapsed .sidebar-collapse-btn { order: -1; margin-left: 0; transform: rotate(180deg); }
.sidebar.collapsed .nav-group-label { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.collapsed .nav-label { display: none; }
/* Collapsed: avatar, theme and logout don't fit side by side in 64px, so they stack. */
.sidebar.collapsed .sidebar-foot { flex-direction: column; justify-content: center; gap: 8px; padding-left: 0; padding-right: 0; }
.sidebar.collapsed .sidebar-foot .avatar { flex-shrink: 0; }
.sidebar.collapsed .sidebar-foot-text { display: none; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.topbar { height: 60px; flex-shrink: 0; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; padding: 0 26px; }
.topbar-title { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.topbar-sub { font-size: 12px; color: var(--text-faint); margin-top: 1px; font-family: var(--mono); }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pill { display: flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--border); padding: 6px 11px; border-radius: 20px; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.btn { background: var(--text); color: var(--bg); border: none; border-radius: 8px; padding: 8px 14px; font-family: var(--font); font-weight: 700; font-size: 12.5px; cursor: pointer; }
.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: 8px; padding: 7px 13px; font-weight: 700; font-size: 12.5px; cursor: pointer; font-family: var(--font); }
.btn-ghost:hover { color: var(--text); border-color: var(--text-faint); }
.btn-accent { background: var(--covered); color: var(--covered-text); border: none; border-radius: 8px; padding: 8px 14px; font-weight: 800; font-size: 12.5px; cursor: pointer; font-family: var(--font); }
.btn-danger { background: var(--alert); color: #2a0e0a; border: none; border-radius: 8px; padding: 8px 14px; font-weight: 800; font-size: 12.5px; cursor: pointer; font-family: var(--font); }
.icon-back-btn { background: transparent; border: none; color: var(--text-muted); font-size: 22px; line-height: 1; padding: 2px 6px; cursor: pointer; }
.icon-back-btn:hover { color: var(--text); }
.page { display: none; padding: 24px 26px 40px; overflow-y: auto; }
.page.active { display: block; flex: 1; min-height: 0; }
.grid { display: grid; gap: 16px; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-2 { grid-template-columns: 1.3fr 1fr; }
.card { background: var(--panel); border: 1px solid var(--border-soft); border-radius: 12px; padding: 18px; }
.card-title { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.card-hint { font-size: 11.5px; color: var(--text-faint); }
.stat-card .stat-label { font-size: 11.5px; color: var(--text-faint); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.stat-card .stat-value { font-family: var(--font); font-size: 28px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); margin-top: 8px; }
/* Units (km, %, h, min) next to a big number: always small, grey, with a space. */
.stat-unit { font-size: 13px; font-weight: 600; color: var(--text-faint); margin-left: 3px; letter-spacing: 0; }
/* The line under a number is plain text; only a real problem (.down) is red. */
.stat-card .stat-delta { font-size: 11.5px; margin-top: 6px; font-weight: 600; color: var(--text-muted); }
.stat-card .stat-delta.up { color: var(--text-muted); }
.stat-card .stat-delta.down { color: var(--alert); }
.up { color: var(--ok); }
.down { color: var(--alert); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); font-weight: 700; padding: 12px; border-bottom: 1px solid var(--border-soft); }
td { padding: 11px 12px; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
tr:last-child td { border-bottom: none; }
/* Report tables (Activity / Performance / Client): the first column stays put while the rest
   scrolls sideways, the same way Excel and Google Sheets keep row labels visible on a wide sheet.
   Background must be set per-cell (inline, alongside the row's own shading) — a sticky cell with
   no opaque background of its own would let scrolled-away cells show through underneath it. */
.sticky-col { position: sticky; left: 0; z-index: 2; border-right: 1px solid var(--border-soft); }

/* A thin, quiet scrollbar for boxes that scroll their own content (Route Builder's
   Representative / Zone / Client lists) — a plain grey OS scrollbar looks out of place
   next to the app's own styled boxes, but removing it entirely hides the fact that
   there's more to scroll to, so this keeps a slim line instead of hiding it outright. */
.thin-scroll { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.thin-scroll::-webkit-scrollbar { width: 5px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }
.thin-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
.thin-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
tr.row-hover:hover td { background: var(--panel-2); }
.column-customize-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 6px; cursor: default; }
.column-customize-row:hover { background: var(--panel-2); }
.column-customize-row .drag-handle { cursor: grab; color: var(--text-faint); font-size: 14px; user-select: none; width: 16px; text-align: center; flex-shrink: 0; }
.column-customize-row.dragging-row { opacity: .4; }
.column-customize-row label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-muted); flex: 1; }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.badge-ok { background: var(--ok-dim); color: var(--ok); }
.badge-warn { background: var(--warn-dim); color: var(--warn); }
.badge-alert { background: var(--alert-dim); color: var(--alert); }
.badge .d { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.avatar-sm { width: 30px; height: 30px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
.name-cell { display: flex; align-items: center; gap: 10px; }
.name-cell .n { font-weight: 700; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-head h2 { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.section-head p { font-size: 12.5px; color: var(--text-faint); margin-top: 2px; }
.toggle-group { display: flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px; padding: 3px; gap: 2px; }
.toggle-opt { padding: 7px 14px; border-radius: 7px; font-size: 12.5px; font-weight: 700; color: var(--text-faint); cursor: pointer; }
.toggle-opt.active { background: var(--panel); color: var(--text); }
.chip { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.chip.selected { border-color: var(--covered); color: var(--text); background: var(--covered-dim); }
.chip .x { font-size: 9px; color: var(--text-faint); }
.select-box { border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); max-height: 240px; overflow-y: auto; }
.select-box-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-muted); transition: background .12s ease, color .12s ease; }
.select-box-row:last-child { border-bottom: none; }
.select-box-row:hover { background: var(--panel); }
.select-box-row.selected { color: var(--text); background: var(--covered-dim); }
.select-box-checkbox { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: var(--covered-text); }
.select-box-row.selected .select-box-checkbox { background: var(--covered); border-color: var(--covered); }
.select-box-empty { padding: 16px 12px; text-align: center; color: var(--text-faint); font-size: 12.5px; font-style: italic; }
.select-box-dropdown { position: relative; }
.select-box-trigger { width: 100%; text-align: left; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 10px 12px; font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.select-box-trigger:hover { border-color: var(--text-faint); }
.select-box-panel { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,0.35); padding: 8px; }
.select-box-panel.open { display: block; }
.select-box-panel-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.route-line { position: relative; height: 6px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.route-line .fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--ok); border-radius: 4px; }
.stop-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--border-soft); }
.stop-row:last-child { border-bottom: none; }
.stop-idx { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; font-weight: 700; margin-top: 1px; }
.stop-idx.done { background: var(--ok-dim); color: var(--ok); }
.stop-idx.next { background: var(--remaining-dim); color: var(--remaining); border: 1px solid var(--remaining); }
.stop-idx.todo { background: var(--panel-2); color: var(--text-faint); border: 1px dashed var(--border); }
.stop-meta { font-size: 11.5px; color: var(--text-faint); font-family: var(--mono); margin-top: 2px; }
.timeline-item { display: flex; gap: 12px; padding: 10px 0; }
.timeline-time { font-family: var(--mono); font-size: 11px; color: var(--text-faint); width: 64px; flex-shrink: 0; padding-top: 2px; }
.timeline-text { font-size: 13px; font-weight: 600; }
.timeline-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 1px; }
.week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.day-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 10px; min-height: 118px; cursor: pointer; transition: border-color .12s ease; }
.day-card:hover { border-color: var(--text-faint); }
.day-name { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); font-weight: 700; }
.day-zone { font-size: 14.5px; font-weight: 800; margin-top: 9px; }
.day-note { font-size: 11px; color: var(--text-faint); margin-top: 3px; font-family: var(--mono); }
.day-status { margin-top: 12px; }
.map-mock { position: relative; border-radius: 12px; overflow: hidden; height: 100%; min-height: 340px; background: radial-gradient(circle at 20% 30%, rgba(45,212,191,0.05), transparent 40%), radial-gradient(circle at 80% 70%, rgba(242,169,60,0.05), transparent 40%), var(--panel-2); border: 1px solid var(--border); }
.map-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--border-soft) 1px, transparent 1px), linear-gradient(90deg, var(--border-soft) 1px, transparent 1px); background-size: 34px 34px; opacity: .6; }
svg.route-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.legend { position: absolute; bottom: 14px; left: 14px; display: flex; gap: 16px; background: rgba(23, 29, 38, 0.85); backdrop-filter: blur(4px); padding: 8px 12px; border-radius: 9px; border: 1px solid var(--border); }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.legend-swatch { width: 14px; height: 3px; border-radius: 2px; }
.kpi-row { display: flex; gap: 22px; }
.kpi { flex: 1; }
.kpi .v { font-family: var(--font); font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.kpi .l { font-size: 11px; color: var(--text-faint); margin-top: 3px; }
.empty-note { font-size: 12px; color: var(--text-faint); font-style: italic; padding: 6px 0 0; }
select, input[type=date], input[type=text] { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 7px 10px; font-family: var(--font); font-size: 12.5px; font-weight: 600; }
input[type=text]::placeholder { color: var(--text-faint); font-weight: 500; }

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 18% 22%, rgba(45,212,191,0.08), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(242,169,60,0.07), transparent 42%),
    var(--bg);
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 32px 28px 26px;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 28px;
}

.login-title {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.login-sub {
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}

.login-field {
  margin-bottom: 16px;
}

.login-field label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.login-field input,
.login-field select {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font);
  font-size: 13px;
  outline: none;
  transition: border-color .12s ease;
}

.login-field input:focus,
.login-field select:focus {
  border-color: var(--covered);
}

/* two fields side by side (Your role + Company size) */
.login-field-pair {
  display: flex;
  gap: 10px;
  min-width: 0;
}

.login-field-pair .login-field {
  flex: 1 1 0;
  min-width: 0;
}

.login-field-row {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.login-field-row select {
  flex: 0 0 100px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-field-row input {
  flex: 1;
  min-width: 0;
}

.login-error {
  display: none;
  font-size: 12px;
  color: var(--alert);
  font-weight: 600;
  margin: -6px 0 14px;
}

.login-error.show { display: block; }

.login-btn {
  width: 100%;
  padding: 11px;
  font-size: 13px;
  margin-top: 4px;
}

.login-foot {
  text-align: center;
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 16px;
  font-style: italic;
}

/* Role-based visibility: JS toggles this class on elements with [data-roles] */
.hidden-role { display: none !important; }

/* Client availability confirm controls */
.avail-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.avail-actions { display: flex; gap: 6px; }
.avail-btn { border: 1px solid var(--border); background: var(--panel-2); color: var(--text-muted); font-family: var(--font); font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 6px; cursor: pointer; }
.avail-btn.yes:hover { border-color: var(--ok); color: var(--ok); }
.avail-btn.no:hover { border-color: var(--alert); color: var(--alert); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text-muted); border-radius: 6px; cursor: pointer; flex-shrink: 0; }
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover { color: var(--text); border-color: var(--text-faint); }
.icon-btn.danger:hover { color: var(--alert); border-color: var(--alert); }
.icon-btn.positive:hover { color: var(--ok); border-color: var(--ok); }
.avail-reset { border: none; background: none; color: var(--text-faint); font-size: 11px; cursor: pointer; text-decoration: underline; padding: 0; }
.badge-pending { background: var(--panel-2); color: var(--text-faint); border: 1px dashed var(--border); }
.toggle-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider { position: absolute; inset: 0; background: var(--border); border-radius: 999px; cursor: pointer; transition: background .15s ease; }
.toggle-slider::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s ease; }
.toggle-switch input:checked + .toggle-slider { background: var(--covered); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }
.toggle-switch input:disabled + .toggle-slider { opacity: .4; cursor: not-allowed; }

/* Fixed rep label shown instead of a dropdown for representative role */
.rep-fixed-label { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 7px 12px; font-size: 12.5px; font-weight: 700; }

/* My Activity page */
.activity-item { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px dashed var(--border-soft); }
.activity-item:last-child { border-bottom: none; }
.activity-date { width: 108px; flex-shrink: 0; }
.activity-date .d1 { font-size: 13px; font-weight: 700; }
.activity-date .d2 { font-size: 11px; color: var(--text-faint); font-family: var(--mono); margin-top: 1px; }
.activity-mid { flex: 1; }
.activity-mid-top { display: flex; justify-content: space-between; margin-bottom: 6px; }
.activity-ratio { font-family: var(--mono); font-weight: 700; font-size: 13px; }
.activity-zone { font-size: 11.5px; color: var(--text-faint); }
.activity-badge-wrap { flex-shrink: 0; width: 92px; text-align: right; }

/* Logout button */
.logout-btn { background: transparent; border: 1px solid var(--border); color: var(--text-faint); width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color .12s ease, color .12s ease; }
.logout-btn:hover { border-color: var(--alert); color: var(--alert); }

/* Modal overlay for Add Client / Add Representative */
.modal-overlay { position: fixed; inset: 0; background: rgba(6, 9, 13, 0.65); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.modal-overlay.show { display: flex; }
.modal-card { width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 14px; padding: 26px 26px 22px; }
.modal-title { font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.modal-sub { font-size: 12px; color: var(--text-faint); margin-top: 3px; margin-bottom: 20px; }
.field { margin-bottom: 14px; }
.field-label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
.field input, .field select { width: 100%; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 9px 11px; font-family: var(--font); font-size: 13px; outline: none; transition: border-color .12s ease; }
.field input:focus, .field select:focus { border-color: var(--covered); }
.field input.id-suggested { border-color: var(--remaining); background: var(--remaining-dim); color: var(--remaining); font-weight: 700; }
.field-hint { font-size: 11px; color: var(--text-faint); margin-top: 5px; }
.role-list-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text-muted); border: 1px solid var(--border-soft); background: var(--panel-2); }
.role-list-item:hover { border-color: var(--text-faint); }
.role-list-item.active { border-color: var(--covered); color: var(--text); background: var(--covered-dim); }
.view-detail-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.view-detail-row:last-child { border-bottom: none; }
.view-detail-label { font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0; }
.view-detail-value { font-size: 13.5px; color: var(--text); text-align: right; }
.modal-note { font-size: 11.5px; color: var(--text-faint); font-style: italic; background: var(--panel-2); border: 1px dashed var(--border); border-radius: 8px; padding: 9px 11px; margin-bottom: 6px; }
.modal-error { display: none; font-size: 12px; color: var(--alert); font-weight: 600; margin: 8px 0 4px; }
.modal-error.show { display: block; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
#toast-container { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--panel); border: 1px solid var(--border); color: var(--text); font-size: 13px; font-weight: 600; padding: 10px 18px; border-radius: 9px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.toast-ok { border-color: var(--ok); }

/* ---------- Route Builder — Step 1 (Representative / Zone / Clients) ---------- */
.builder-step1-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}

/* Name text inside each of the three Step 1 panels (rep/zone/client picks) —
   a name too long for a narrowed column now truncates cleanly instead of
   overflowing or shoving the secondary info (employee code / area) off
   the edge. The row and its flex wrapper both need min-width:0 (set
   inline where they're rendered) for this to actually take effect inside
   a flex layout. */
.builder-row-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* First responsive breakpoint in this stylesheet — below this width the
   rigid 3-equal-column grid gets too narrow for names/addresses to read
   comfortably, so it stacks to one full-width column per panel instead. */
@media (max-width: 900px) {
  .builder-step1-grid {
    grid-template-columns: 1fr;
  }
}
.toast.toast-error { border-color: var(--alert); color: var(--alert); }
/* ---------- Plans: locks, usage and plan cards ---------- */
.plan-lock { display: inline-block; margin-left: 6px; font-size: 11px; opacity: .75; }
.plan-lock-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; font-size: 12.5px; color: var(--text-muted); }
.plan-locked-panel { background: var(--panel); border: 1px solid var(--border-soft); border-radius: 14px; padding: 36px 24px; text-align: center; }
.plan-locked-panel .plan-locked-title { font-weight: 800; font-size: 16px; margin-bottom: 6px; }
.plan-locked-panel .plan-locked-text { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.plan-usage-row { padding: 10px 0; border-bottom: 1px dashed var(--border-soft); }
.plan-usage-row .plan-usage-top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.plan-usage-bar { height: 6px; background: var(--border-soft); border-radius: 3px; overflow: hidden; }
.plan-usage-bar > div { height: 100%; background: var(--covered); border-radius: 3px; }
.plan-usage-bar.full > div { background: var(--alert); }
.plan-feature-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--border-soft); font-size: 13px; }
.plan-option { border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.plan-option.selected { border-color: var(--covered); background: var(--covered-dim); }
.plan-option .plan-option-name { font-weight: 800; font-size: 14px; }
.plan-option .plan-option-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.plan-card { background: var(--panel); border: 1px solid var(--border-soft); border-radius: 14px; padding: 18px; }
.plan-card .plan-card-name { font-weight: 800; font-size: 16px; }
.plan-card .plan-card-lines { font-size: 12.5px; color: var(--text-muted); line-height: 1.8; margin: 10px 0 14px; }

/* ---------- Plans: side-by-side comparison table ---------- */
.plan-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.plan-table th, .plan-table td { padding: 13px 14px; text-align: center; border-bottom: 1px solid var(--border-soft); font-size: 13px; vertical-align: middle; }
.plan-table th:first-child, .plan-table td:first-child { text-align: left; width: 34%; font-weight: 600; }
.plan-table thead th { padding: 18px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.plan-table .plan-col-current { background: var(--covered-dim); }
.plan-table .plan-head-name { font-weight: 800; font-size: 15px; color: var(--text); }
.plan-table .plan-head-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; font-weight: 600; }
.plan-table .plan-section td { background: var(--panel-2); color: var(--text-faint); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; text-align: left; padding: 8px 14px; }
.plan-table tbody tr:last-child td { border-bottom: none; }
.plan-tick { color: var(--ok); font-size: 18px; font-weight: 800; }
.plan-dash { color: var(--text-faint); font-size: 16px; }

/* ---- Setup: plain blocks (no box inside the card) ---- */
.setup-block { min-width: 0; }
.setup-block-divide { border-top: 1px solid var(--border-soft); padding-top: 18px; }
.plan-locked button:not([data-setup-back]):not([data-plan-upgrade]) { opacity: .6; }

/* ---- Plan table: groups that open and close ---- */
.plan-group-toggle { background: none; border: none; padding: 0; color: inherit; font: inherit; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.plan-group-chev { display: inline-block; font-size: 11px; color: var(--text-faint); transition: transform .15s; }
.plan-group-toggle[aria-expanded="true"] .plan-group-chev { transform: rotate(90deg); }
.plan-group-count { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.plan-child-row td:first-child { padding-left: 38px; font-weight: 500; color: var(--text-muted); }
.plan-edit-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); margin-top: 6px; }

/* ---- Route builder: column heads, simple cards with details, vehicle ---- */
.builder-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.builder-col-title { font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }
.builder-add-link { background: none; border: none; color: var(--covered); font-weight: 700; font-size: 13px; cursor: pointer; padding: 2px 4px; }
.builder-add-link:hover { text-decoration: underline; }
.pick-card { border-bottom: 1px dashed var(--border-soft); padding: 10px 0; }
.pick-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pick-card-main { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; cursor: pointer; }
.pick-card-text { display: flex; flex-direction: column; min-width: 0; }
.pick-card-sub { font-size: 12.5px; color: var(--text-faint); }
.pick-more { background: none; border: none; color: var(--text-muted); font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 4px 6px; flex-shrink: 0; }
.pick-more:hover { color: var(--text); }
.pick-details { display: grid; gap: 4px; margin: 8px 0 2px 26px; padding: 10px 12px; background: var(--panel-2); border-radius: 8px; font-size: 12.5px; }
.pick-details[hidden] { display: none; }
.pick-detail-row { display: flex; justify-content: space-between; gap: 12px; }
.pick-detail-row span:first-child { color: var(--text-faint); flex-shrink: 0; }
.pick-detail-row span:last-child { text-align: right; overflow-wrap: anywhere; }
.vehicle-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.vehicle-opt { background: var(--panel-2); border: none; padding: 10px 26px; font-size: 14.5px; font-weight: 700; color: var(--text-muted); cursor: pointer; }
.vehicle-opt + .vehicle-opt { border-left: 1px solid var(--border); }
.vehicle-opt.active { background: var(--covered); color: var(--covered-text); }

/* ---- Setup > Zones: one map, list beside it ---- */
.zones-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.zones-map { height: 460px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-soft); }
.zone-search { position: relative; display: flex; gap: 8px; margin-bottom: 10px; }
.zone-search input { flex: 1; }
.zone-search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 8px; max-height: 240px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.zone-search-item { display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border-soft); padding: 10px 12px; font-size: 13px; color: var(--text); cursor: pointer; }
.zone-search-item:hover { background: var(--panel-2); }
.zone-search-empty { padding: 10px 12px; font-size: 13px; color: var(--text-faint); }
.zone-draft-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.zone-draft-bar input { flex: 1; min-width: 160px; }
.zones-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.zones-count { font-weight: 700; font-size: 13.5px; }
.zone-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px; border-bottom: 1px dashed var(--border-soft); font-size: 13px; cursor: pointer; border-radius: 6px; }
.zone-row:hover { background: var(--panel-2); }
.zone-row.active { background: var(--covered-dim); }
@media (max-width: 900px) { .zones-layout { grid-template-columns: 1fr; } }

/* Shown when a rep's phone reported a fake-location app for any GPS point. */
.fake-gps-warning {
  background: var(--alert-dim);
  color: var(--alert);
  border: 1px solid var(--alert);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* ---------- Company groups ---------- */
.company-switcher { display: flex; align-items: center; gap: 8px; margin-left: 14px; align-self: center; flex: none; }
.company-switcher-label { font-size: 10.5px; font-weight: 800; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; }
.company-switcher select { min-width: 190px; max-width: 260px; padding: 6px 10px; font-size: 12.5px; font-weight: 700; }
.company-switcher.elsewhere select { border-color: var(--remaining); }
.group-company-list { display: flex; flex-wrap: wrap; gap: 8px; }
.group-company { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); font-size: 13px; font-weight: 700; }
.group-company .group-company-code { font-family: var(--mono); font-size: 12px; color: var(--text-faint); font-weight: 600; }
.group-request { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 12px; margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
.group-request-actions { display: flex; gap: 8px; }
.group-tag { font-size: 10.5px; font-weight: 800; color: var(--covered); border: 1px solid var(--covered-dim); border-radius: 6px; padding: 2px 6px; }
.group-access-table th, .group-access-table td { white-space: nowrap; }
.group-access-table td.group-access-cell, .group-access-table th.group-access-cell { text-align: center; }
.group-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.group-row:last-child { border-bottom: none; }
.group-actions { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-top: 14px; }
.plan-paid-by { margin-top: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--covered-dim); background: var(--panel-2); font-size: 12.5px; color: var(--text-muted); }
.plan-paid-by b { color: var(--text); }

/* ---------- Import employees ---------- */
.import-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.import-step { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
.import-step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--covered-dim); color: var(--covered); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex: none; }
.import-step.done .import-step-num { background: var(--covered); color: var(--covered-text); }
.import-step-title { font-weight: 800; font-size: 13.5px; margin-bottom: 4px; }
.import-ok { color: var(--ok); font-weight: 700; font-size: 12px; }
.import-problem { color: var(--alert); font-size: 12px; line-height: 1.5; }
@media (max-width: 900px) {
  .import-steps { grid-template-columns: 1fr; }
  .company-switcher-label { display: none; }
  .company-switcher select { min-width: 140px; }
}

/* ---------- Setup > Branding: live preview (colours are set inline by updateSetupThemePreview) ---------- */
.theme-preview { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.theme-preview-mode { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 6px 12px; }
.theme-preview-body { display: grid; grid-template-columns: 150px 1fr; min-height: 210px; }
.theme-preview-side { padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.theme-preview-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.theme-preview-logo { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; background-size: contain; background-repeat: no-repeat; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.theme-preview-name { font-weight: 800; font-size: 12.5px; line-height: 1.2; }
.theme-preview-sub { font-size: 9.5px; letter-spacing: .04em; }
.theme-preview-nav { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; padding: 6px 8px; border-radius: 7px; }
.theme-preview-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.theme-preview-count { margin-left: auto; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 9px; font-family: var(--mono); }
.theme-preview-main { padding: 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.theme-preview-btn { border: none; border-radius: 8px; padding: 8px 14px; font-weight: 800; font-size: 12.5px; font-family: var(--font); cursor: default; }
.theme-preview-card { border-radius: 10px; padding: 12px; width: 100%; }
.theme-preview-card-title { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.theme-preview-card-text { font-size: 12px; }
.theme-preview-status-label { font-size: 10.5px; font-weight: 700; }
.theme-preview-status { display: flex; gap: 6px; flex-wrap: wrap; }
.theme-preview-chip { padding: 3px 9px; border-radius: 10px; font-size: 11px; font-weight: 800; }
@media (max-width: 900px) { .theme-preview-body { grid-template-columns: 1fr; } }

/* Report: Route Map Snapshot on the full screen */
#report-map-container:fullscreen { background: var(--bg); border-radius: 0 !important; }
#report-map-container:fullscreen #report-map,
#report-map-container:fullscreen #report-map-picture { height: 100vh !important; }
#report-map-container:fullscreen #report-map-picture { object-fit: contain !important; }
/* Close button on a full-screen map: only shown while the map fills the screen. */
.map-fullscreen-close { display: none; position: absolute; top: 16px; right: 16px; z-index: 5; height: 38px; padding: 0 14px; border-radius: 10px; border: none; background: rgba(0, 0, 0, 0.6); color: #fff; font-family: var(--font); font-size: 13px; font-weight: 700; cursor: pointer; }
.map-fullscreen-close:hover { background: rgba(0, 0, 0, 0.75); }
#report-map-container:fullscreen .map-fullscreen-close { display: block; }
#report-map-container:-webkit-full-screen .map-fullscreen-close { display: block; }


/* ---------- Phones and small tablets ---------- */
.menu-btn { display: none; }
.sidebar-backdrop { display: none; }
#tip-bubble { display: none; position: fixed; left: 12px; right: 12px; bottom: 16px; z-index: 3000; background: #1e293b; color: #f1f5f9; padding: 12px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); }
#tip-bubble.show { display: block; }
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  /* the real visible height (the address bar no longer covers the bottom of the page) */
  #app { height: 100vh !important; height: 100dvh !important; }
  .main { height: auto; min-height: 0; }

  /* the menu is a drawer that slides over the page; the ☰ button in the top bar opens it */
  .sidebar, .sidebar.collapsed { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1100; width: min(280px, 84vw); padding: 20px 14px; transform: translateX(-100%); transition: transform .2s ease; }
  body.menu-open .sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); }
  .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 1090; background: rgba(6, 9, 13, 0.55); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  body.menu-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  .sidebar-collapse-btn { display: none; }
  .nav-item { padding: 11px 10px; font-size: 14px; }

  /* top bar: ☰ + title; the long description in the middle is hidden; the rest wraps */
  .topbar { height: auto; min-height: 56px; padding: 8px 12px; flex-wrap: wrap; gap: 8px; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); border-radius: 10px; font-size: 20px; cursor: pointer; }
  .topbar > div:first-of-type { flex: 1 1 0; min-width: 0; }
  .topbar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-desc { display: none !important; }
  .company-switcher { margin-left: 0; width: 100%; }
  .company-switcher select { min-width: 0; width: 100%; max-width: none; }

  .page { padding: 14px 12px 28px; }
  .section-head { flex-wrap: wrap; gap: 10px; }
  .card { padding: 14px; }

  /* cards and forms: one column (the small number cards: two) */
  .cols-2, .cols-3 { grid-template-columns: 1fr; }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .stat-card .stat-value { font-size: 22px; }
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* toolbars built to stay on one line wrap to a second line instead */
  [style*="flex-wrap:nowrap"], [style*="flex-wrap: nowrap"] { flex-wrap: wrap !important; }

  /* Weekly Plan: a list of days instead of seven narrow boxes */
  .week-grid { grid-template-columns: 1fr; gap: 8px; }
  .day-card { min-height: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 12px; }
  .day-card .day-zone, .day-card .day-note, .day-card .day-status { margin-top: 0; }

  /* tables scroll sideways inside their card instead of widening the page */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Clients and Employees: each row is a card (labels come from the column headers, see script.js) */
  table.cards-on-phone, table.cards-on-phone tbody { display: block; overflow: visible; }
  table.cards-on-phone thead { display: none; }
  table.cards-on-phone tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); }
  table.cards-on-phone tr:last-child { border-bottom: none; }
  table.cards-on-phone td { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 5px 0; border: none; text-align: right; }
  table.cards-on-phone td::before { content: attr(data-label); flex-shrink: 0; color: var(--text-faint); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-align: left; }
  table.cards-on-phone td[colspan] { display: block; text-align: center; }
  table.cards-on-phone td[colspan]::before { content: none; }
  table.cards-on-phone tr:has(> th) { display: none; }          /* a heading row inside the body (Activity Log) */
  table.cards-on-phone td[data-label=""]::before { display: none; }   /* a cell with no column name (the buttons) */
  table.cards-on-phone td.wh-acts { flex-wrap: wrap; justify-content: flex-start; gap: 8px; text-align: left; padding-top: 10px; }
  table.cards-on-phone td.wh-acts .btn-accent, table.cards-on-phone td.wh-acts .btn-ghost { flex: 1 1 auto; }
  table.cards-on-phone td .nr-sub { text-align: right; }
  /* Reports toolbar: the boxes share the row and the Download button gets a full row (it was cut off at the right edge) */
  #page-report .section-head > div { width: 100%; flex-wrap: wrap !important; }
  #page-report .section-head select, #page-report .section-head input[type="date"] { min-width: 0 !important; flex: 1 1 140px; }
  #report-download-btn { flex: 1 1 100%; }

  /* easy to tap, and no zoom-in when a box is tapped on an iPhone (16px text) */
  input, select, textarea { font-size: 16px !important; }
  .field input, .field select { padding: 11px 12px; }
  .btn, .btn-accent, .btn-ghost, .btn-danger { min-height: 42px; font-size: 14px; }

  /* Setup boxes use the whole row and may shrink next to a colour picker / button (no poking out) */
  .setup-block input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), .setup-block select { width: 100%; min-width: 0; max-width: 100%; }
  .setup-block input[type="color"] { width: 40px; }
  .setup-block { min-width: 0; }
  .setup-block input[type="file"] { width: 100%; min-width: 0; max-width: 100%; font-size: 13px !important; }

  .modal-overlay { padding: 10px; }
  .modal-card { padding: 18px 16px; max-height: 92vh; max-height: 92dvh; }
  .modal-actions { flex-wrap: wrap; }

  .zones-map { height: 320px; }
  .map-mock { min-height: 260px; }
}

/* ---------- Route Builder: "Use a previous route" and the date calendar ---------- */

.builder-calendar { position: absolute; top: calc(100% + 6px); left: 0; z-index: 8; width: 300px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); font-size: 13px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 800; font-size: 14px; }
.cal-nav { background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: 8px; width: 30px; height: 28px; cursor: pointer; font-family: var(--font); font-size: 14px; }
.cal-nav:hover { color: var(--text); border-color: var(--text-faint); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { text-align: center; font-size: 11px; color: var(--text-faint); padding: 4px 0; font-weight: 700; }
.cal-day { position: relative; aspect-ratio: 1; border: 2px solid transparent; background: transparent; color: var(--text); border-radius: 8px; font-size: 13px; font-family: var(--font); cursor: pointer; padding: 0; }
.cal-day:hover:not(.cal-past):not(.cal-taken):not(.cal-selected) { background: var(--panel); }
.cal-day.cal-past { color: var(--text-faint); opacity: 0.4; cursor: default; }
.cal-day.cal-taken { background: var(--covered); color: var(--covered-text); font-weight: 700; cursor: not-allowed; }  /* already has a route: the indication colour */
.cal-day.cal-today { font-weight: 800; }  /* today: just a bold number; the chosen date (today by default) has the box */
.cal-day.cal-selected { border-color: var(--text); font-weight: 800; }  /* the chosen date: no colour, just a border */
.cal-foot { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.cal-legend { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12px; }
.cal-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--covered); flex-shrink: 0; }
.cal-msg { font-size: 12.5px; color: var(--text); }
.cal-msg:empty { display: none; }
@media (max-width: 768px) { .builder-calendar { width: min(320px, 86vw); } }
.date-box { position: relative; }
.date-box-icon { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }


/* ---------- Route Builder: "Old routes" heat-map (website only, next to the step bar) ---------- */
.builder-top-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.builder-top-left { flex: 0 1 460px; min-width: 0; margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.builder-copy-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.builder-copy-note .copy-warn { display: block; color: var(--warn); }
.builder-heatmap { position: relative; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.hm-name { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.hm-title { width: 164px; font-size: 12px; color: var(--text-muted); }
.hm-name strong { color: var(--text); font-weight: 800; }  /* the label; the rep's name after it stays normal */
.hm-nav { display: flex; align-items: center; justify-content: space-between; gap: 6px; white-space: nowrap; }
.hm-arrow { width: 24px; height: 22px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; font-family: var(--font); font-size: 14px; line-height: 1; }
.hm-arrow:hover:not(:disabled) { color: var(--text); border-color: var(--text-faint); }
.hm-arrow:disabled { opacity: 0.35; cursor: default; }
.hm-body { display: flex; flex-direction: column; gap: 4px; }
.hm-days { display: grid; grid-template-columns: repeat(7, 20px); gap: 4px; font-size: 11px; text-align: center; color: var(--text-faint); }
.hm-grid { display: grid; grid-template-columns: repeat(7, 20px); grid-auto-rows: 20px; gap: 4px; }
.hm-day { width: 20px; height: 20px; border-radius: 4px; border: none; padding: 0; background: var(--border); }
.hm-day.hm-blank { background: transparent; }
.hm-day.hm-on { background: var(--covered); cursor: pointer; }  /* the company's indication colour */
.hm-day.hm-on:hover, .hm-day.hm-selected { outline: 2px solid var(--text); outline-offset: 1px; }
.hm-legend { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--text-muted); }
.hm-error { font-size: 12px; color: var(--text-muted); }
.hm-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; background: var(--border); }
.hm-key.hm-key-on { background: var(--covered); }
.hm-card { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 320px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); }
.hm-card-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 14.5px; }
.hm-card-close { background: transparent; border: none; color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; font-family: var(--font); }
.hm-card-close:hover { color: var(--text); }
.hm-card-clients { margin: 8px 0 10px; padding-left: 22px; list-style: decimal; max-height: 200px; overflow-y: auto; font-size: 13.5px; line-height: 1.6; }
.hm-card-clients .hm-gone { color: var(--text-faint); }
/* Phones: not offered (too much for a small screen). */
@media (max-width: 768px) { .builder-heatmap { display: none !important; } }

/* ---------- Route Builder step 2: the always-open calendar on the right of the fields ---------- */
.builder-step2-row { display: flex; align-items: flex-start; gap: 40px; }
.builder-step2-fields { flex: 0 1 560px; min-width: 0; }
.builder-side-calendar { margin-top: -4px; flex: 0 0 320px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.cal-day.cal-repeat { border-style: dashed; border-color: var(--text-muted); }  /* the other dates the Repeat will also create */
.cal-day.cal-blank { visibility: hidden; }  /* places before the 1st: the calendars show one month only */
@media (max-width: 900px) {
  .builder-step2-row { flex-direction: column; gap: 22px; }
  .builder-side-calendar { flex: none; width: 100%; max-width: 360px; }
}

/* ---------- Date boxes: our own calendar in front of every browser date box (see enhanceDateInput) ---------- */
.dp-wrap { position: relative; display: inline-block; }
.dp-box { width: 150px; cursor: pointer; }
.dp-wrap[style*="flex"] .dp-box { width: 100%; }
.dp-icon { position: absolute; right: 10px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.dp-pop { z-index: 30; }


/* ---------- Activity Log (dashboard and route report) ---------- */
#dash-activity-sub:empty { display: none; }
.alog-scroll { max-height: 380px; overflow-y: auto; }
.alog-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border-soft); }
.alog-row.alog-click { cursor: pointer; }
.alog-time { flex: 0 0 62px; font-family: var(--mono); font-size: 12px; color: var(--text-faint); padding-top: 1px; }
.alog-text { font-size: 13px; font-weight: 600; }
.alog-detail { font-size: 12px; color: var(--text-faint); margin-top: 1px; }
.alog-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.alog-table th { text-align: left; font-weight: 600; color: var(--text-faint); padding: 6px 8px; border-bottom: 1px solid var(--border-soft); }
.alog-table td { padding: 8px; border-bottom: 1px dashed var(--border-soft); }
.alog-table tr.alog-pick { cursor: pointer; }
.alog-table tr.alog-pick:hover td { background: var(--panel-2); }
.alog-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.alog-bar input[type="search"] { flex: 1; min-width: 160px; max-width: 280px; }
.alog-link { color: var(--covered); cursor: pointer; font-size: 13px; font-weight: 600; background: none; border: none; padding: 0; }
#report-compliance { max-height: 420px; overflow-y: auto; }

/* A box that is only shown, not editable (for example the login email on the Edit employee page). */
.field input[readonly] { opacity: 0.7; cursor: not-allowed; }

/* Before choosing between "Add a branch" and "Link another company": they cannot be mixed. */
.access-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.access-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); font-size: 13px; cursor: pointer; color: var(--text); user-select: none; }
.access-pill small { color: var(--text-faint); font-size: 11px; }
.access-pill.on { background: var(--covered-dim); border-color: var(--covered); }
.access-pill.locked { opacity: .6; cursor: default; }
.access-all { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 13px; cursor: pointer; }
.access-chip { display: inline-block; padding: 2px 10px; margin: 2px 4px 2px 0; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); font-size: 12px; cursor: pointer; }
.group-branch-row { padding: 10px 0; border-top: 1px solid var(--border-soft); }
.group-branch-row:first-child { border-top: none; }
.group-branch-warn { font-size: 12.5px; color: var(--warn); }
.group-choice { margin: 4px 0 14px; padding: 10px 14px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--panel-2); font-size: 13px; line-height: 1.6; }
.group-choice-warn { margin: 4px 0 12px; font-weight: 700; color: var(--warn); }

/* Setup > Rewards */
.rw-badge { display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--warn, #f59e0b); color: #fff; font-size: 11px; font-weight: 800; margin-left: 4px; }
.rw-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--border-soft); cursor: pointer; }
.rw-switch-row > span:first-child { display: block; min-width: 0; }
.rw-switch-row .card-hint { display: block; margin-top: 2px; }
.rw-rule { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border-soft); font-size: 13px; }
.rw-rule .rw-rule-text { flex: 1; min-width: 0; }
.rw-rule .rw-rule-text b { display: block; }
.rw-rule input[type="number"] { width: 90px; }
.rw-item, .rw-request { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--border-soft); font-size: 13px; }
.rw-item .rw-emoji, .rw-request .rw-emoji { font-size: 22px; width: 30px; text-align: center; flex: none; }
.rw-item .rw-main, .rw-request .rw-main { flex: 1; min-width: 0; }
.rw-item .rw-main b, .rw-request .rw-main b { display: block; }
.rw-actions { display: flex; gap: 6px; flex: none; flex-wrap: wrap; }
.rw-pill { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 9px; background: var(--panel-2); color: var(--text-faint); }
.rw-pill.given { background: var(--covered-dim); color: var(--covered); }
.rw-request.rw-focus { background: var(--warn-dim, rgba(245,158,11,.12)); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.nr-row { display: grid; grid-template-columns: minmax(150px, 220px) 1fr 130px; gap: 10px; align-items: center; margin: 9px 0; font-size: 13px; }
.nr-track { background: var(--panel-2); border-radius: 8px; height: 14px; overflow: hidden; }
.nr-fill { height: 100%; border-radius: 8px; background: var(--text-muted); min-width: 2px; }
.nr-count { text-align: right; white-space: nowrap; }
.nr-sub { font-size: 12px; color: var(--text-muted); }
.nr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.nr-table th, .nr-table td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--border, rgba(128,128,128,0.2)); }
.nr-table td.num, .nr-table th.num { text-align: right; }
@media (max-width: 768px) { .nr-row { grid-template-columns: 1fr 70px; } .nr-row .nr-track { grid-column: 1 / -1; order: 3; } }
.rw-thumb { width: 64px; height: 64px; border-radius: 12px; background: var(--panel-2); display: flex; align-items: center; justify-content: center; font-size: 28px; overflow: hidden; flex: none; }
.rw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rw-thumb.sm { width: 40px; height: 40px; font-size: 22px; border-radius: 10px; }
.rw-rule input[data-digits], #rw-item-points { text-align: right; }

.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.pcard { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; }
.pcard { cursor: pointer; }
.pcard.selected { border: 2px solid var(--covered); padding: 17px; }
.pcard.current { background: var(--panel-2); }
.pcard-badge { align-self: flex-start; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 8px; background: var(--covered); color: var(--covered-text); margin-bottom: 8px; }
.pcard-badge.spacer { visibility: hidden; }
.pcard-name { font-size: 17px; font-weight: 800; margin: 0; }
.pcard-tag { font-size: 12.5px; color: var(--text-muted); margin: 2px 0 12px; }
.pcard-price { font-size: 26px; font-weight: 800; margin: 0; }
.pcard-price small { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.pcard-sub { font-size: 12px; color: var(--text-muted); margin: 2px 0 14px; min-height: 16px; }
.pcard ul { list-style: none; margin: 0 0 14px; padding: 0; flex: 1; font-size: 13px; }
.pcard li { display: flex; gap: 9px; padding: 6px 0; border-top: 1px solid var(--border-soft); line-height: 1.35; }
.pcard li::before { content: "\2713"; color: var(--ok); font-weight: 800; flex: none; }
.pcard li.off { color: var(--text-faint); }
.pcard li.off::before { content: "\2715"; color: var(--alert); font-weight: 800; }
.pcard li.heading { color: var(--text-muted); font-size: 12px; }
.pcard li.heading::before { content: ""; display: none; }
.pcard .btn-accent, .pcard .btn-ghost { width: 100%; }
.pcard-more { font-size: 12px; color: var(--text-muted); margin: 0 0 12px; line-height: 1.4; }
.pcard-note { font-size: 12px; color: var(--text-muted); text-align: center; margin: 8px 0 0; }
.pstrip { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.pswitch { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--panel); }
.pswitch button { background: none; border: 0; padding: 9px 18px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.pswitch button.sel { background: var(--covered); color: var(--covered-text); }
.pswitch small { margin-left: 6px; font-weight: 800; font-size: 11px; }
.pswitch button:not(.sel) small { color: var(--ok); }
.pperiods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 14px; }
.pperiod { border: 1px solid var(--border); border-radius: 10px; padding: 10px; cursor: pointer; background: var(--panel-2); text-align: left; color: var(--text); font-family: var(--font); }
.pperiod.sel { border: 2px solid var(--covered); padding: 9px; }
.pperiod b { display: block; font-size: 13px; }
.pperiod span { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pbreak { background: var(--panel-2); border-radius: 10px; padding: 10px 12px; margin: 6px 0 4px; font-size: 13px; }
.pbreak div { display: flex; justify-content: space-between; padding: 3px 0; }
.pbreak div.tot { font-weight: 800; font-size: 15px; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 7px; }
@media (max-width: 768px) { .pcards { grid-template-columns: minmax(0, 1fr); } .pperiods { grid-template-columns: 1fr; } }

/* Improvement report dashboard */
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.dash-kpi { background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 14px; }
.dash-kpi .l { font-size: 12px; color: var(--text-muted); }
.dash-kpi .v { font-size: 26px; font-weight: 800; margin: 2px 0; }
.dash-kpi .s { font-size: 12px; min-height: 16px; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 14px; }
.dash-box { border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px 16px; background: var(--panel); }
.dash-box h3 { font-size: 14px; font-weight: 800; margin: 0 0 10px; }
.dash-todo { margin: 0 0 12px; font-size: 13px; line-height: 1.5; }
.dash-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border: 1px solid; border-radius: 20px; margin-top: 3px; }
.rank-row { display: grid; grid-template-columns: minmax(80px, 130px) 1fr minmax(150px, 210px); gap: 10px; align-items: center; margin: 10px 0; font-size: 13px; }
.trend { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.trend .col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; font-size: 10px; color: var(--text-muted); gap: 3px; }
.trend .bar { width: 100%; max-width: 38px; border-radius: 6px 6px 0 0; min-height: 3px; }
.dash-details summary { cursor: pointer; font-weight: 700; font-size: 13px; }
@media (max-width: 768px) { .rank-row { grid-template-columns: 1fr auto; } .rank-row .nr-track { grid-column: 1 / -1; order: 3; } }
.dash-empty { padding: 26px 18px; text-align: center; border: 1px dashed var(--border); border-radius: 12px; }
.dash-empty-title { font-weight: 800; font-size: 15px; margin-bottom: 6px; }

/* Warehouse */
.wh-nav-badge { margin-left: auto; background: var(--warn); color: #1a1400; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 10px; }
.wh-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.wh-msg { font-size: 12.5px; color: var(--text-muted); margin-left: auto; }
.wh-msg.err { color: var(--alert); }
.wh-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.wh-tab { padding: 9px 16px; cursor: pointer; border-radius: 8px 8px 0 0; color: var(--text-muted); font-weight: 600; font-size: 13px; border: 1px solid transparent; border-bottom: none; }
.wh-tab.on { background: var(--panel); color: var(--text); border-color: var(--border); }
.wh-tab .wh-count { background: var(--warn); color: #1a1400; font-size: 11px; font-weight: 800; padding: 0 6px; border-radius: 9px; margin-left: 6px; }
.wh-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.wh-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.wh-form { background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.wh-chip { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11.5px; font-weight: 700; }
.wh-chip.pending { background: var(--warn-dim); color: var(--warn); }
.wh-chip.packing { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
.wh-chip.packed { background: var(--ok-dim); color: var(--ok); border: 1px solid var(--ok); }
.wh-chip.dispatched { background: var(--ok-dim); color: var(--ok); }
.wh-chip.delivered { background: var(--ok); color: #06201c; }
.wh-chip.cancelled { background: var(--alert-dim); color: var(--alert); }
.wh-chip.low { background: var(--alert-dim); color: var(--alert); }
.wh-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wh-table th { text-align: left; font-weight: 600; color: var(--text-muted); font-size: 12px; padding: 8px 8px; border-bottom: 1px solid var(--border); }
.wh-table td { padding: 9px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.wh-table .num { text-align: right; white-space: nowrap; }
.wh-table tr.low td { background: color-mix(in srgb, var(--alert) 7%, transparent); }
/* Set up your company card */
.ob-card { margin-bottom: 16px; }
.ob-bar { height: 6px; border-radius: 3px; background: var(--panel-2); margin: 12px 0; overflow: hidden; }
.ob-bar i { display: block; height: 100%; background: var(--ok); }
.ob-steps { display: flex; flex-direction: column; }
.ob-step { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border-soft); }
.ob-tick { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.ob-step.done .ob-tick { background: var(--ok); border-color: var(--ok); color: #06201c; }
.ob-step.done .ob-title, .ob-step.skipped .ob-title { color: var(--text-muted); }
.ob-step.done .ob-title { text-decoration: line-through; }
.ob-text { flex: 1; min-width: 0; }
.ob-title { font-weight: 700; font-size: 13.5px; }
.ob-hint { font-size: 12px; color: var(--text-muted); }
.ob-actions { display: flex; gap: 6px; flex-shrink: 0; }
/* Accounts: invoices and payments */
.ac-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ac-tile { background: var(--panel); border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px 16px; }
.ac-tile-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.ac-tile-value { font-size: 22px; font-weight: 800; margin: 4px 0 2px; }
.ac-tile-sub { font-size: 12px; color: var(--text-muted); }
.ac-tile.bad .ac-tile-value { color: var(--alert); }
.ac-chip { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11.5px; font-weight: 700; margin-left: 4px; }
.ac-chip.unpaid { background: var(--warn-dim); color: var(--warn); }
.ac-chip.part { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
.ac-chip.paid { background: var(--ok); color: #06201c; }
.ac-chip.overdue, .ac-chip.cancelled { background: var(--alert-dim); color: var(--alert); }
.ac-row { cursor: pointer; }
.ac-row:hover td { background: var(--panel-2); }
.ac-bad { color: var(--alert); font-weight: 700; }
.ac-void td { color: var(--text-muted); text-decoration: line-through; }
.ac-totals { max-width: 320px; margin-left: auto; margin-top: 8px; }
.ac-block { background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.ac-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 8px; }
.ac-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
/* Accounts: forms (every input and box in Accounts and the invoice window looks the same) */
.ac-field input, .ac-field textarea, .ac-field select, .ac-extra-row input { width: 100%; box-sizing: border-box; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px 10px; font-family: var(--font); font-size: 13px; font-weight: 600; }
.ac-field textarea { resize: vertical; line-height: 1.45; font-weight: 500; }
.ac-field input:focus, .ac-field textarea:focus, .ac-field select:focus, .ac-extra-row input:focus { outline: none; border-color: var(--covered); }
.ac-field input::placeholder, .ac-extra-row input::placeholder { color: var(--text-faint); font-weight: 500; }
.ac-settings { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.ac-card { margin: 0; }
.ac-card .section-head { margin-bottom: 12px; }
.ac-hint { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.ac-hint a, .ac-logo-note a { color: var(--text); font-weight: 700; }
.ac-hint-top { margin-bottom: 14px; }
.ac-form { margin-bottom: 0; }
.ac-savebar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding: 12px 0; background: linear-gradient(to top, var(--bg) 70%, transparent); }
.ac-logo-row { display: flex; align-items: center; gap: 16px; }
.ac-logo-img { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--border); border-radius: 12px; background: #fff; padding: 6px; box-sizing: border-box; flex-shrink: 0; }
.ac-logo-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ac-logo-note { font-size: 13px; color: var(--text-muted); line-height: 1.5; padding: 12px 14px; background: var(--panel-2); border: 1px dashed var(--border); border-radius: 10px; }
.ac-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.ac-check input { width: 16px; height: 16px; margin: 0; }
.ac-extra-row { display: grid; grid-template-columns: minmax(110px, 1fr) 2fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.ac-x-remove { padding: 4px 11px; font-size: 18px; line-height: 1; }
/* Accounts: the invoice window */
.ac-inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.ac-inv-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.55; }
.ac-inv-sub b { color: var(--text); }
.ac-inv-due { text-align: right; flex-shrink: 0; }
.ac-inv-due-value { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.ac-scroll { overflow-x: auto; }
.ac-list td, .ac-list th { white-space: nowrap; }
.ac-list td:nth-child(3) { white-space: normal; min-width: 140px; }
.ac-totals td { padding: 6px 8px; border-bottom: none; }
.ac-totals tr.ac-strong td { font-weight: 800; border-top: 1px solid var(--border); }
.ac-totals tr.ac-due-row td { background: var(--panel-2); border-radius: 0; }
.ac-section-label { font-size: 12px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 16px 0 8px; }
.ac-block .ac-section-label { margin-top: 0; }
.ac-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ac-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ac-two > div { display: flex; flex-direction: column; justify-content: space-between; }
.ac-form-3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 12px; }
.ac-block-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.ac-small { padding: 3px 9px; font-size: 12px; }
.ac-actions { align-items: center; border-top: 1px solid var(--border-soft); padding-top: 14px; }
.ac-actions-label { font-size: 12px; color: var(--text-muted); font-weight: 700; }
.ac-spacer { flex: 1; }
@media (max-width: 700px) {
  .ac-inv-head { flex-direction: column; }
  .ac-inv-due { text-align: left; }
  .ac-two, .ac-form-3 { grid-template-columns: 1fr; }
  .ac-extra-row { grid-template-columns: 1fr auto; }
  .ac-extra-row .ac-x-value { grid-column: 1 / 2; }
  .ac-logo-row { align-items: flex-start; }
}
.wh-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; align-items: start; }
.wh-col { background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 10px; min-height: 120px; }
.wh-col h3 { font-size: 13px; font-weight: 800; margin: 2px 4px 8px; }
.wh-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-top: 8px; font-size: 12.5px; }
.wh-card .wh-lines { color: var(--text-muted); margin: 4px 0 8px; line-height: 1.5; }
.wh-card button { margin: 2px 4px 2px 0; padding: 5px 10px; font-size: 12px; }
.wh-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.wh-switch { padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); }
.wh-switch .wh-step { padding: 8px 18px; font-size: 14px; }
.wh-switch .wh-step.on { background: var(--covered); color: var(--covered-text); border-color: var(--covered); }
.wh-step { padding: 6px 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--panel); color: var(--text-muted); font-weight: 600; font-size: 13px; cursor: pointer; }
.wh-step.on { background: var(--panel-2); color: var(--text); border-color: var(--text-muted); }
.wh-scroll { overflow-x: auto; }
.wh-deliveries td { font-size: 12.5px; }
.wh-deliveries .wh-acts button { margin: 2px 4px 2px 0; padding: 5px 10px; font-size: 12px; }
.wh-mine { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; margin-bottom: 10px; }
.wh-mine input { width: auto; }
/* on a phone the board is one column and the buttons are big enough for a thumb */
@media (max-width: 768px) {
  .wh-board { grid-template-columns: 1fr; }
  .wh-card { font-size: 14px; }
  .wh-card button { min-height: 44px; padding: 10px 16px; font-size: 14px; margin: 4px 6px 4px 0; }
  .wh-card a { display: inline-block; padding: 8px 0; }
  .wh-deliveries td { font-size: 14px; }
  .wh-deliveries .wh-acts button { min-height: 44px; padding: 10px 16px; font-size: 14px; margin: 4px 6px 4px 0; }
  .wh-deliveries a { display: inline-block; padding: 8px 0; }
}
.wh-line-row { display: grid; grid-template-columns: 1fr 90px; gap: 8px; align-items: center; margin: 6px 0; font-size: 13px; }
.wh-found { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); max-height: 180px; overflow-y: auto; margin-top: 4px; }
.wh-found div { padding: 7px 10px; cursor: pointer; font-size: 13px; }
.wh-found div:hover { background: var(--panel-2); }
@media (max-width: 768px) { .wh-msg { margin-left: 0; width: 100%; } }

/* Plan and billing */
.pb-badge { font-size: 11.5px; font-weight: 800; padding: 2px 10px; border-radius: 10px; }
.pb-badge.ok { background: var(--ok-dim); color: var(--ok); }
.pb-badge.warn { background: var(--warn-dim); color: var(--warn); }
.pb-badge.alert { background: var(--alert-dim); color: var(--alert); }
.pb-badge.grey { background: var(--panel-2); color: var(--text-muted); border: 1px solid var(--border); }
.pb-bar { height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; margin: 6px 0 2px; }
.pb-bar > div { height: 100%; background: var(--covered); border-radius: 4px; }
.pb-bar.full > div { background: var(--alert); }
.pb-amount { font-size: 24px; font-weight: 800; margin: 2px 0 4px; }
/* Warehouse: its boxes have no type attribute, so they get the same look as the other text boxes; links are quiet */
#page-warehouse input:not([type]), #modal-wh-dispatch input:not([type]) { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 7px 10px; font-family: var(--font); font-size: 12.5px; font-weight: 600; }
#page-warehouse input:not([type])::placeholder { color: var(--text-faint); font-weight: 500; }
#page-warehouse input:not([type]):focus { outline: none; border-color: var(--covered); }
#page-warehouse a { color: var(--text-muted); text-decoration: underline; }
/* the little lock and the new-orders number sit beside a menu name: with the menu folded to icons they would float alone */
.sidebar.collapsed .plan-lock, .sidebar.collapsed .wh-nav-badge { display: none; }

/* Platform admin: top tabs and screens */
.pa-nav { display: none !important; }
.pa-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 860px) { .pa-two { grid-template-columns: minmax(0, 1fr); } }
.pa-h { font-size: 14px; font-weight: 800; margin: 0 0 8px; }
.pa-barrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pa-barlabel { width: 130px; font-size: 13px; flex-shrink: 0; }
.pa-barrow .bar { flex: 1; height: 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.pa-barrow .bar i { display: block; height: 100%; background: #2a78d6; }
.pa-barnum { width: 28px; text-align: right; font-size: 13px; }
.pa-att { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.pa-msg { padding: 8px 10px; border-radius: 8px; margin-bottom: 6px; font-size: 13px; }
.pa-msg.u { background: var(--panel-2); }
.pa-msg.s { background: var(--ok-dim); }
.bars { display: flex; align-items: flex-end; gap: 3px; }
.bars > i { flex: 1; background: #2a78d6; border-radius: 3px 3px 0 0; min-height: 2px; }
.pa-pill { padding: 4px 12px; border: 1px solid var(--border); border-radius: 16px; cursor: pointer; font-size: 13px; color: var(--text-muted); }
.pa-pill.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.muted { color: var(--text-muted); font-size: 12px; }
.pa-chip { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11.5px; background: var(--panel-2); color: var(--text-muted); }
.pa-chip.ok { background: var(--ok-dim); color: var(--ok); }
.pa-chip.warn { background: var(--warn-dim); color: var(--warn); }
.pa-chip.bad { background: var(--alert-dim); color: var(--alert); }
.pa-chip.acc { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }

/* Sign in, register, forgot / set password: plain white (these screens are always shown in the white theme) */
:root[data-theme="light"] .login-screen { background: #ffffff; }
:root[data-theme="light"] .login-card { background: #ffffff; border: 1px solid #dbe1ea; box-shadow: 0 12px 32px rgba(16, 24, 40, 0.08); }


/* ---- sign in / register (the way other products do it) ---- */
.auth-h { font-size: 20px; font-weight: 800; margin: 4px 0 14px; color: var(--text); }
.auth-trust { font-size: 13px; color: var(--ok); font-weight: 600; margin: 0 0 14px 44px; }
.auth-forgot { text-align: right; margin: -4px 0 12px; }
.auth-forgot span, .auth-alt span { font-size: 13px; font-weight: 600; color: var(--covered); cursor: pointer; }
.auth-forgot span:hover, .auth-alt span:hover, .auth-alt a:hover { text-decoration: underline; }
.auth-alt { text-align: center; margin-top: 14px; font-size: 13px; color: var(--text-faint); }
.auth-alt a { color: var(--text-faint); font-weight: 600; text-decoration: none; }
.auth-legal { font-size: 12px; color: var(--text-faint); line-height: 1.5; margin-top: 12px; text-align: center; }
.auth-legal a { color: var(--covered); }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px !important; width: 100%; box-sizing: border-box; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: none; cursor: pointer; color: var(--text-faint); border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0; }
.pw-eye:hover { color: var(--text); background: var(--panel-2); }
.pw-eye svg { width: 20px; height: 20px; }
.field-err { display: none; color: var(--alert); font-size: 12px; margin-top: 4px; }
.field-err.show { display: block; }
.login-field input[aria-invalid="true"], .login-field select[aria-invalid="true"] { border-color: var(--alert); }
.reg-done { text-align: center; padding: 8px 0; }
.reg-tick { width: 52px; height: 52px; border-radius: 50%; background: var(--ok-dim); color: var(--ok); font-size: 28px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 6px auto 12px; }
.reg-done-title { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.reg-done-text { font-size: 13px; color: var(--text-faint); line-height: 1.6; }
.login-btn[disabled] { opacity: .7; cursor: wait; }


/* ---- simpler sign-in pages: big logo, one clear heading, roomy boxes (like the products people already use) ---- */
.login-screen { background: #fff; }
.login-card { max-width: 400px; border-radius: 16px; padding: 32px 32px 26px; }
.auth-logo-link { display: block; width: 64px; margin: 0 auto 14px; }
.auth-logo { display: block; width: 64px; height: 64px; object-fit: contain; }
.auth-center { text-align: center; }
.auth-h { font-size: 22px; letter-spacing: -0.02em; }
.auth-center.auth-h { margin: 0 0 18px; }
.auth-sub { text-align: center; color: var(--text-faint); font-size: 13px; line-height: 1.5; margin: -10px 0 18px; }
.auth-trust { text-align: center; margin: -8px 0 16px; }
.login-card .login-field label { font-size: 13px; color: var(--text); }
.login-card .login-field input, .login-card .login-field select { font-size: 15px; padding: 11px 12px; min-height: 44px; border-radius: 10px; }
.login-btn { min-height: 44px; font-size: 14px; border-radius: 10px; }
.auth-google { margin-bottom: 4px; }
.auth-google > div:first-child { display: flex; justify-content: center; min-height: 44px; }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--text-faint); font-size: 12px; margin: 16px 0 14px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-below { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
@media (max-width: 480px) { .login-screen { padding: 12px; align-items: flex-start; padding-top: 28px; } .login-card { padding: 26px 20px 22px; border: 0; box-shadow: none; } }


/* ---- sign-in pages: the product on the left, a floating sign-in card on the right. Same colours and type as the public website (frontend/website/site.css) ---- */
.login-screen {
  --text: #101828; --text-muted: #475467; --text-faint: #667085; --border: #e4e7ec; --border-soft: #e4e7ec;
  --panel: #ffffff; --panel-2: #ffffff; --bg: #ffffff; --covered: #12347a; --alert: #b42318; --ok: #067647; --ok-dim: #ecfdf3;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #101828; background: #fff;
}
.login-screen * { font-family: inherit; }
.login-screen.has-showcase { padding: 0 !important; align-items: stretch !important; justify-content: flex-start !important; background: linear-gradient(135deg, #eef3fc 0%, #f7f9fe 55%, #ffffff 100%); }

/* the card */
.login-screen.has-showcase > .login-card { margin: auto 4vw auto 0 !important; flex: 0 0 min(460px, 38vw); max-width: 460px; padding: 34px 36px 26px; background: #fff; border: 1px solid #e4e7ec; border-radius: 20px; box-shadow: 0 24px 60px rgba(16, 24, 40, .10); }
.auth-logo-link { display: block; width: auto; text-align: center; margin: 0 auto 12px; }
.auth-logo { display: inline-block; height: 74px; width: auto; }
.login-screen.has-showcase .auth-logo-link { display: none; }
.login-card .auth-h { color: #101828; font-weight: 800; font-size: 26px; }
.auth-center.auth-h { margin: 0 0 6px; }
.auth-sub { text-align: center; color: #475467; font-size: 15px; line-height: 1.5; margin: 0 0 22px; }
.login-card .login-field label { color: #101828; font-weight: 700; font-size: 14px; }
.login-card .login-field input, .login-card .login-field select { background: #fff; border: 1.5px solid #dbe1ec; color: #101828; font-weight: 400; border-radius: 10px; }
.login-card .login-field input::placeholder { color: #8a94a6; font-weight: 400; }
.login-card .login-field input:focus, .login-card .login-field select:focus { border-color: #12347a; box-shadow: 0 0 0 3px rgba(18, 52, 122, .12); }
.login-card .login-field [aria-invalid="true"] { border-color: #d92d20; }
.login-card input.has-icon { padding-left: 44px; background-repeat: no-repeat; background-position: 14px center; background-size: 20px; }
.login-card input.icon-mail { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.login-card input.icon-lock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 0 16px; }
.auth-remember { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #101828; cursor: pointer; }
.auth-remember input { width: 18px; height: 18px; accent-color: #12347a; margin: 0; }
.auth-row > span { font-size: 14px; font-weight: 700; color: #1d4ed8; cursor: pointer; }
.auth-row > span:hover { text-decoration: underline; }
.login-screen .login-btn { background: #12347a; color: #fff; font-weight: 700; border: 0; min-height: 46px; font-size: 15px; border-radius: 10px; }
.login-screen .login-btn:hover { background: #0c2457; }
.login-screen #register-submit-btn { background: #f57c1f; }
.login-screen #register-submit-btn:hover { background: #d9650f; }
.login-screen :focus-visible { outline: 3px solid #f57c1f; outline-offset: 2px; border-radius: 6px; }
/* the sign-in and create-account boxes show their focus with the navy border and soft glow only, never an orange ring */
.login-screen input:focus-visible, .login-screen select:focus-visible, .login-screen textarea:focus-visible { outline: none; border-radius: 10px; }
.auth-forgot span, .auth-alt span, .auth-legal a { color: #1d4ed8; }
.auth-alt { color: #475467; font-size: 14px; }
.auth-alt span { font-weight: 700; }
.auth-below { margin-top: 20px; padding-top: 0; border-top: 0; }
.auth-or { margin: 16px 0 14px; }
.auth-google > div:first-child { min-height: 0; }
#google-signin-btn, #google-register-btn { display: flex; justify-content: center; min-height: 44px; }
.auth-trust { color: #067647; }
.pw-eye { color: #667085; }

/* the left side */
.auth-showcase { flex: 1 1 0; min-width: 0; position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #101828; }
.as-inner { width: 100%; max-width: 720px; padding: 28px 28px 28px 5vw; }
.as-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; margin-bottom: 30px; }
.as-brand img { display: block; height: 68px; width: auto; }
.as-brand span { font-size: 31px; line-height: 1; font-weight: 800; letter-spacing: -0.02em; color: #12347a; }
.as-kicker { color: #f57c1f; font-weight: 800; font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.as-h { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 800; margin: 0 0 16px; color: #0b1b4a; }
.as-hl { position: relative; display: inline-block; white-space: nowrap; }
.as-hl::after { content: ""; position: absolute; left: 0; right: 2%; bottom: -8px; height: 11px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 Q 55 1 110 6 T 197 4' fill='none' stroke='%23f57c1f' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.as-sub { font-size: 17px; line-height: 1.6; color: #475467; margin: 0 0 24px; max-width: 520px; }
.as-mock { background: #fff; border: 1px solid #e4e7ec; border-radius: 16px; box-shadow: 0 18px 44px rgba(16, 24, 40, .09); overflow: hidden; max-width: 660px; }
.as-mock-bar { display: flex; align-items: center; gap: 6px; padding: 11px 16px; border-bottom: 1px solid #eef0f3; font-size: 14px; font-weight: 800; color: #0b1b4a; }
.as-mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d3dbea; }
.as-mock-bar span { margin-left: 12px; flex: 1; }
.as-mock-bar b { font-size: 12px; font-weight: 800; color: #067647; background: #ecfdf3; border-radius: 12px; padding: 3px 12px; }
.as-mock-body { display: grid; grid-template-columns: 1fr 190px; gap: 14px; padding: 12px; }
.as-left { min-width: 0; }
.as-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 4px; }
.as-stats > div { display: flex; align-items: center; gap: 8px; background: #f3f6fb; border-radius: 12px; padding: 8px 9px; min-width: 0; }
.as-stats p { margin: 0; min-width: 0; }
.as-stats strong { display: block; white-space: nowrap; font-size: 16px; color: #0b1b4a; line-height: 1.15; }
.as-stats small { display: block; font-size: 11.5px; color: #475467; }
.as-ic { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; }
.as-ic svg { width: 100%; height: 100%; }
.as-ic.blue { color: #1d5de8; }
.as-ic.line { width: 36px; height: 36px; color: #1d5de8; }
.as-stop { display: flex; align-items: center; gap: 11px; padding: 9px 4px; border-top: 1px solid #eef0f3; }
.as-stop:first-of-type { border-top: 0; }
.as-stop > div { flex: 1; min-width: 0; }
.as-stop em { display: block; font-style: normal; font-size: 14px; font-weight: 800; color: #0b1b4a; }
.as-stop small { display: block; font-size: 12px; color: #475467; }
.as-tick { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.as-tick svg { width: 14px; height: 14px; stroke-width: 3; }
.as-tick.done { background: #12a150; color: #fff; }
.as-tick.now { color: #f57c1f; } .as-tick.now svg { width: 22px; height: 22px; stroke-width: 2.4; }
.as-chip { font-size: 12px; font-weight: 800; border-radius: 8px; padding: 4px 14px; }
.as-chip.done { background: #dcf5e6; color: #067647; }
.as-chip.now { background: #ffe9d6; color: #d9650f; }
.as-map { width: 100%; height: 100%; min-height: 150px; border-radius: 12px; display: block; }
.as-features { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin-top: 26px; }
.as-features > div { display: flex; align-items: center; gap: 12px; padding: 0 22px; border-left: 1px solid #dbe1ec; }
.as-features > div:first-child { padding-left: 0; border-left: 0; }
.as-features p { margin: 0; white-space: nowrap; font-size: 14.5px; font-weight: 700; line-height: 1.3; color: #0b1b4a; }

/* narrower windows */
@media (max-width: 1280px) { .as-inner { padding-left: 4vw; } .as-features > div { padding: 0 14px; } .as-features p { font-size: 13.5px; } }
@media (max-width: 1100px) { .login-screen.has-showcase > .login-card { flex-basis: 400px; padding: 28px 26px 22px; } .as-mock-body { grid-template-columns: 1fr 140px; } .as-sub { font-size: 15px; } .as-features .as-ic.line { width: 28px; height: 28px; } }
@media (max-width: 900px) { .as-map, .as-features { display: none; } .as-mock-body { grid-template-columns: 1fr; } .as-sub { display: none; } .login-screen.has-showcase > .login-card { flex-basis: 360px; } }
@media (max-width: 760px) { .auth-showcase { display: none; } .login-screen.has-showcase { justify-content: center !important; align-items: flex-start !important; padding: 20px 12px !important; background: #fff; } .login-screen.has-showcase > .login-card { margin: 0 auto !important; flex: 1 1 auto; border: 0; box-shadow: none; padding: 20px 8px; } .login-screen.has-showcase .auth-logo-link { display: block; } }

/* short screens (a laptop at 125-150% scaling is only 550-750 px tall): everything gets smaller, nothing is hidden until it must be */
@media (max-height: 780px) { .as-inner { padding-top: 18px; padding-bottom: 18px; } .as-brand { margin-bottom: 16px; } .as-brand img { height: 56px; } .as-brand span { font-size: 26px; } .as-h { font-size: 30px; margin-bottom: 10px; } .as-sub { font-size: 15px; margin-bottom: 14px; } .as-stop { padding: 6px 4px; } .as-features { margin-top: 16px; } .login-screen.has-showcase > .login-card { padding-top: 24px; padding-bottom: 18px; } .auth-center.auth-h { font-size: 24px; } .auth-sub { margin-bottom: 14px; } }
@media (max-height: 660px) { .as-sub { display: none; } .as-brand { margin-bottom: 10px; } .as-kicker { margin-bottom: 6px; } .as-h { font-size: 27px; margin-bottom: 14px; } .as-map { min-height: 120px; } .login-card .login-field { margin-bottom: 11px; } .auth-below { margin-top: 12px; } }
@media (max-height: 540px) { .as-stats { display: none; } .as-features { display: none; } }


@media (max-height: 660px) { .as-brand img { height: 46px; } .as-brand span { font-size: 23px; } }

/* top bar on a narrower computer window: the date stays on one line and the long description steps aside instead of squeezing both */
.topbar-sub { white-space: nowrap; }
.topbar > div:first-of-type { flex-shrink: 0; }
@media (max-width: 1180px) { .topbar-desc { display: none !important; } }


/* ---- Navio Analysis (navio.js): charts and cards use the app's own theme colours ---- */
#page-navio { --nv-blue: #2a78d6; --nv-grey: #98a2b3; }
.nv-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nv-segs { display: flex; flex-wrap: wrap; gap: 6px; }
.nv-card { margin-bottom: 14px; }
.nv-h3 { font-size: 13px; font-weight: 700; margin: 14px 0 6px; color: var(--text-muted); }
.nv-chart { width: 100%; height: auto; display: block; }
.nv-chart text { font-size: 11px; fill: var(--text-faint); }
.nv-grid { stroke: var(--border-soft); stroke-width: 1; }
.nv-line { fill: none; stroke: var(--nv-blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.nv-area { fill: var(--nv-blue); fill-opacity: .1; }
.nv-chart circle { fill: var(--nv-blue); stroke: var(--panel); stroke-width: 2; }
.nv-bar { fill: var(--nv-blue); }
.nv-high { fill: var(--remaining); }
.nv-hit { cursor: pointer; }
.nv-hit:hover { opacity: .75; }
.nv-good { color: var(--ok); } .nv-bad { color: var(--alert); } .nv-warn { color: var(--warn); } .nv-flat { color: var(--text-muted); }
.nv-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 10px; white-space: nowrap; }
.nv-tag.nv-good { background: var(--ok-dim); color: var(--ok); } .nv-tag.nv-warn { background: var(--warn-dim); color: var(--warn); }
.nv-tag.nv-bad { background: var(--alert-dim); color: var(--alert); } .nv-tag.nv-flat { background: var(--panel-2); color: var(--text-muted); }
.nv-split { display: flex; gap: 2px; border-radius: 6px; overflow: hidden; margin-top: 4px; }
.nv-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.nv-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }
.nv-meter { height: 6px; background: var(--panel-2); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.nv-meter i { display: block; height: 100%; background: var(--nv-blue); border-radius: 4px; }
.nv-meter-big { height: 8px; }
.nv-row { cursor: pointer; } .nv-row:hover td { background: var(--panel-2); }
.nv-empty { text-align: center; padding: 28px 12px; color: var(--text-muted); }
.nv-skel { background: var(--panel-2); border-radius: 12px; height: 80px; margin-bottom: 12px; animation: nvPulse 1.2s ease-in-out infinite; }
@keyframes nvPulse { 50% { opacity: .55; } }
.nv-detail { border-color: var(--covered); }
.nv-ins { border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; border-left-width: 4px; }
.nv-ins-serious { border-left-color: var(--alert); } .nv-ins-watch { border-left-color: var(--warn); }
.nv-ins-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.nv-ins dl { margin: 8px 0 0; display: grid; grid-template-columns: 150px 1fr; gap: 4px 12px; font-size: 13px; }
.nv-ins dt { color: var(--text-muted); } .nv-ins dd { margin: 0; }
.ac-tile.warn .ac-tile-value { color: var(--warn); } .ac-tile.bad .ac-tile-value { color: var(--alert); }
@media (max-width: 700px) { .nv-ins dl { grid-template-columns: 1fr; } #navio-body .wh-table { font-size: 12px; display: block; overflow-x: auto; } }

/* Inactive account (trial ended, nobody paid): only the Plan page and Profile stay on the menu */
body.account-inactive .nav-item:not([data-page="plan"]):not([data-page="profile"]) { display: none !important; }
.ob-tick { font-size: 12px; }

#user-avatar, #user-name { cursor: pointer; }

/* the red star that marks a required box on the create-account form */
.login-screen .req { color: #d92d20; font-weight: 700; margin-left: 2px; }
.login-screen .req-note { font-size: 12.5px; color: #667085; margin: 0 0 10px; }

/* the company's badge (its initials) shown next to our mark when it has not uploaded a logo yet */
.brand-mark-initials { width: 52px; height: 52px; border-radius: 12px; background: var(--covered, #12347a); color: var(--covered-text, #fff); display: none; align-items: center; justify-content: center; font-weight: 800; font-size: 19px; letter-spacing: .02em; flex-shrink: 0; }
.sidebar.collapsed .brand.has-company-logo .brand-mark-initials { width: 40px; height: 40px; border-radius: 10px; font-size: 15px; }

/* "Set up your company": a horizontal stepper. Four numbered steps in a row joined by a line; a finished step is a green tick and its line is green. */
.ob-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 18px; }
.ob-st { padding-right: 14px; min-width: 0; }
.ob-rail { display: flex; align-items: center; margin-bottom: 10px; }
.ob-st .ob-tick { width: 34px; height: 34px; font-size: 14px; background: var(--panel); border: 2px solid var(--border); color: var(--text-muted); }
.ob-line { flex: 1; height: 3px; border-radius: 2px; background: var(--border); margin: 0 8px; }
.ob-st.done .ob-tick { background: var(--ok); border-color: var(--ok); color: #06201c; }
.ob-st.done .ob-line { background: var(--ok); }
.ob-st.current .ob-tick { border-color: var(--covered, #12347a); color: var(--covered, #12347a); box-shadow: 0 0 0 4px rgba(18, 52, 122, .14); }
.ob-st.locked .ob-tick, .ob-st.skipped .ob-tick { opacity: .55; }
.ob-st .ob-title { font-size: 13.5px; font-weight: 700; text-decoration: none; color: var(--text); }
.ob-st.done .ob-title, .ob-st.skipped .ob-title, .ob-st.locked .ob-title { color: var(--text-muted); text-decoration: none; }
.ob-st .ob-hint { margin-top: 2px; min-height: 32px; }
.ob-st .ob-actions { margin-top: 10px; flex-wrap: wrap; }
@media (max-width: 768px) {
  /* narrow screens: the same stepper stood upright (the line runs down the left) */
  .ob-stepper { grid-template-columns: 1fr; }
  .ob-st { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; padding: 0 0 14px 0; position: relative; }
  .ob-rail { grid-row: 1 / span 3; flex-direction: column; margin: 0; align-items: center; }
  .ob-line { width: 3px; height: auto; flex: 1; margin: 6px 0 0; min-height: 22px; }
  .ob-st .ob-hint { min-height: 0; }
  .ob-st .ob-actions { grid-column: 2; }
}

/* the days left of the free trial, at the top of every page for the company admin */
.trial-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 9px 20px; background: var(--panel); border-bottom: 2px solid var(--covered, #12347a); font-size: 13.5px; flex-shrink: 0; }
.trial-banner.urgent { border-bottom-color: var(--alert, #d92d20); }
.trial-banner .btn-accent { padding: 6px 14px; }

/* the red star on a required box in the pop-ups, and the Company details weekly-off choice */
.modal-card .req { color: #d92d20; font-weight: 700; }
.cd-radio { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 6px 0; cursor: pointer; }
.cd-radio input { width: auto; margin-top: 3px; }
.cd-days { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px 24px; }
.cd-day { cursor: pointer; }
.cd-day input { position: absolute; opacity: 0; pointer-events: none; }
.cd-day span { display: inline-block; min-width: 46px; text-align: center; padding: 6px 8px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); background: var(--panel-2); }
.cd-day input:checked + span { background: var(--covered, #12347a); border-color: var(--covered, #12347a); color: var(--covered-text, #fff); }
.cd-day input:focus-visible + span { outline: 2px solid var(--covered, #12347a); outline-offset: 2px; }
.field-label .req { color: #d92d20; font-weight: 700; }

.field-label .req { color: #d92d20; font-weight: 700; }

/* a button that is sending: a small spinner in front of its words, and it cannot be clicked again until the answer comes back */
button.is-loading { cursor: progress; opacity: .8; }
button.is-loading::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin .7s linear infinite; vertical-align: -2px; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { button.is-loading::before { animation-duration: 2s; } }

/* a role the company's plan does not include: shown greyed with a lock; clicking it explains and offers the Plan page */
.role-list-item.locked { opacity: .6; cursor: pointer; }
.role-list-item.locked .role-lock { font-size: 11px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }

/* Warehouse: the unit sits right after the number it belongs to ("12 kg") */
.wh-qty { display: inline-flex; align-items: center; gap: 6px; }
.wh-unit { font-size: 13px; font-weight: 600; color: var(--text); min-width: 24px; }
.wh-unit-pick { display: inline-flex; align-items: center; gap: 6px; }

/* Navio Analysis: field team bars */
.nv-val { font-size: 11px; font-weight: 700; fill: var(--text) !important; }
.nv-none { stroke: var(--text-faint); stroke-width: 2; stroke-linecap: round; }
.nv-barcell { min-width: 150px; }
.nv-barcell .nv-meter { margin-left: auto; width: 100%; max-width: 140px; }
.nv-meter-low i { background: var(--warn); }

/* Navio Analysis: field team, one row per representative */
.nv-reps { display: flex; flex-direction: column; gap: 10px; }
.nv-rep { display: grid; grid-template-columns: 170px 1fr 150px; gap: 16px; align-items: center; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 12px; }
.nv-rep-name { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.nv-rep-bars { display: flex; flex-direction: column; gap: 8px; }
.nv-hbar { display: grid; grid-template-columns: 110px 1fr 120px; gap: 10px; align-items: center; font-size: 12.5px; }
.nv-hbar-l { color: var(--text-muted); }
.nv-hbar-t { height: 10px; background: var(--panel-2); border-radius: 6px; overflow: hidden; }
.nv-hbar-t i { display: block; height: 100%; background: var(--nv-blue); border-radius: 6px; }
.nv-hbar-v { font-weight: 700; white-space: nowrap; }
.nv-rep-stats { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--text-muted); }
.nv-rep-stats b { color: var(--text); }
@media (max-width: 800px) { .nv-rep { grid-template-columns: 1fr; gap: 8px; } .nv-hbar { grid-template-columns: 100px 1fr 100px; } .nv-rep-stats { flex-direction: row; gap: 14px; } }

.wh-row .req, .wh-form .req { color: #d92d20; font-weight: 700; }

/* "I agree to the Terms and Privacy Policy" tick box (sign-up and set-password) */
.consent-row { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--text-faint); margin: 12px 0 4px; text-align: left; }
.consent-row input { margin-top: 3px; flex: none; }
.consent-row a { color: var(--covered); }

/* Plan page: users for the next renewal */
.seats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.seats-stat { background: var(--panel-2, #f6f8fb); border-radius: 10px; padding: 12px 14px; }
.seats-stat .n { font-size: 24px; font-weight: 800; line-height: 1.2; }
.seats-stat .l { font-size: 12.5px; color: var(--text-faint); }
.seats-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.seats-form input[type=number] { width: 110px; max-width: 100%; }
@media (max-width: 600px) { .seats-form { flex-direction: column; align-items: stretch; } .seats-form input[type=number] { width: 100%; } .seats-form button { width: 100%; } }

/* Warehouse: Add / Edit product, a side drawer (like most inventory apps) */
.wh-drawer-bg { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 900; }
.wh-pf { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); z-index: 901; flex-direction: column; padding: 0; margin: 0; border-radius: 14px 0 0 14px; background: var(--panel); box-shadow: -8px 0 30px rgba(0,0,0,.22); }
.wh-pf-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-soft); }
.wh-pf-title { font-size: 18px; font-weight: 800; }
.wh-pf-x { background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: var(--text-muted); padding: 0 6px; }
.wh-pf-body { flex: 1; overflow-y: auto; padding: 8px 20px 16px; }
.wh-pf-section { padding: 14px 0 6px; border-top: 1px solid var(--border-soft); }
.wh-pf-section:first-child { border-top: 0; }
.wh-pf-h { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 10px; }
.wh-pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-bottom: 8px; align-items: start; }
.wh-pf-grid label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-muted); min-width: 0; line-height: 1.3; }
.wh-pf-grid label .req { display: inline; margin-left: 3px; }
.wh-pf-grid label > input, .wh-pf-grid label > select, .wh-pf-grid label > .wh-unit-pick, .wh-pf-grid label > .wh-qty { margin-top: 6px; }
.wh-pf-grid input, .wh-pf-grid select { height: 42px; padding: 0 12px; font-size: 14px; font-weight: 400; color: var(--text); border-radius: 9px; }
.wh-pf-grid select { font-weight: 500; }
.wh-pf-grid input:focus, .wh-pf-grid select:focus { outline: 2px solid var(--accent, #2563eb); outline-offset: 0; }
.wh-pf-wide { grid-column: 1 / -1; }
.wh-pf-grid input, .wh-pf-grid select { width: 100% !important; box-sizing: border-box; min-width: 0; }
.wh-pf-grid .wh-unit-pick, .wh-pf-grid .wh-qty { display: flex; align-items: center; gap: 8px; width: 100%; }
.wh-pf-grid .wh-unit-pick > *, .wh-pf-grid .wh-qty > input { flex: 1 1 0; min-width: 0; }
.wh-pf-grid .wh-qty .wh-unit { flex: 0 0 auto; }
.wh-pf-foot { border-top: 1px solid var(--border-soft); padding: 12px 20px; background: var(--panel); border-radius: 0 0 0 14px; }
.wh-pf-msg { min-height: 0; font-size: 13px; margin-bottom: 8px; }
.wh-pf-msg.err { color: #d92d20; font-weight: 600; }
.wh-pf-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
@media (max-width: 600px) { .wh-pf { border-radius: 0; } .wh-pf-grid { grid-template-columns: 1fr; } .wh-pf-actions { flex-direction: column-reverse; } .wh-pf-actions button { width: 100%; } }

/* Support (company side) */
.help-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border-soft); margin: 4px 0 12px; overflow-x: auto; }
.help-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 0; font-size: 14px; color: var(--text-muted); cursor: pointer; white-space: nowrap; font-family: inherit; }
.help-tabs button.on { color: var(--text); border-bottom-color: var(--text); font-weight: 700; }
.help-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.help-filters input { flex: 2 1 220px; min-width: 0; }
.help-filters select { flex: 1 1 140px; min-width: 0; width: auto; }
.help-pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.help-empty { text-align: center; padding: 30px 16px; }
.help-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .help-grid2 { grid-template-columns: 1fr; } }
.help-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.help-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text-muted); margin: 8px 0 10px; }
.help-ctx { background: var(--panel-2); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; color: var(--text-muted); margin: 8px 0; }
.help-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.help-file { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 8px; padding: 5px 9px; font-size: 12.5px; color: var(--text); text-decoration: none; }
.help-file.img { flex-direction: column; align-items: flex-start; max-width: 160px; }
.help-file.img img { max-width: 100%; max-height: 90px; border-radius: 6px; object-fit: cover; }
.help-attach-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.help-chosen { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--panel-2); border-radius: 8px; padding: 6px 10px; margin-top: 6px; font-size: 13px; }
.help-x { background: none; border: 0; color: var(--alert); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.help-reply-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.help-reply-actions .spacer { flex: 1; }
.pa-msg.n { background: var(--warn-dim); border: 1px dashed var(--warn); }
.pa-msg.e { background: none; color: var(--text-muted); font-size: 12px; padding: 2px 10px; }
@media (max-width: 600px) { .help-reply-actions button { flex: 1 1 auto; } }

/* Platform admin: Tickets inbox */
.pt-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pt-pill { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 5px 13px; font-size: 13px; color: var(--text-muted); cursor: pointer; font-family: inherit; display: inline-flex; gap: 7px; align-items: center; }
.pt-pill .n { background: var(--panel-2); border-radius: 10px; padding: 0 7px; font-size: 11.5px; }
.pt-pill.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.pt-pill.on .n { background: rgba(255,255,255,.2); color: inherit; }
.pt-filters { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(4, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; }
.pt-filters input, .pt-filters select { width: 100%; min-width: 0; box-sizing: border-box; }
.pt-grid { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 14px; align-items: start; }
.pt-list { padding: 0; overflow: hidden; max-height: 78vh; overflow-y: auto; }
.pt-item { padding: 11px 14px; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.pt-item:hover { background: var(--panel-2); }
.pt-item.sel { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--text); }
.pt-item-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.pt-subject { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; min-width: 0; }
.pt-item-sub { font-size: 12px; margin: 2px 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-item-bot { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.pt-avatar { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--text); color: var(--bg); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.pt-detail { min-width: 0; }
.pt-empty { text-align: center; color: var(--text-muted); padding: 40px 16px; }
.pt-card { padding: 16px 18px; }
.pt-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.pt-title { flex: 1; min-width: 0; }
.pt-title h3 { margin: 2px 0 0; font-size: 17px; line-height: 1.3; }
.pt-back { display: none; }
.pt-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--text-muted); margin: 8px 0 12px; }
.pt-tag { background: var(--panel-2); border-radius: 6px; padding: 1px 8px; }
.pt-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 10px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.pt-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); min-width: 0; }
.pt-controls select { width: 100%; }
.pt-thread { max-height: 46vh; overflow-y: auto; padding: 12px 2px; display: flex; flex-direction: column; gap: 10px; }
.pt-msg { max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; }
.pt-msg-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 3px; font-size: 12px; }
.pt-msg.cus { background: var(--panel-2); align-self: flex-start; border-bottom-left-radius: 4px; }
.pt-msg.sup { background: var(--ok-dim); align-self: flex-end; border-bottom-right-radius: 4px; }
.pt-msg.note { background: var(--warn-dim); border: 1px dashed var(--warn); align-self: flex-end; }
.pt-event { align-self: center; font-size: 11.5px; color: var(--text-muted); background: var(--panel-2); border-radius: 10px; padding: 2px 10px; text-align: center; }
.pt-composer { border: 1px solid var(--border); border-radius: 12px; padding: 10px; margin-top: 8px; background: var(--panel); }
.pt-composer textarea { width: 100%; box-sizing: border-box; border: 0; background: transparent; color: var(--text); font-family: var(--font); font-size: 13.5px; resize: vertical; outline: none; padding: 6px 4px; }
.pt-composer textarea.note { background: var(--warn-dim); border-radius: 8px; }
.pt-tabs { display: flex; gap: 6px; margin-bottom: 6px; }
.pt-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 4px 8px; font-size: 13px; color: var(--text-muted); cursor: pointer; font-family: inherit; }
.pt-tabs button.on { color: var(--text); border-bottom-color: var(--text); font-weight: 700; }
.pt-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--border-soft); padding-top: 8px; margin-top: 4px; }
.pt-actions .spacer { flex: 1; }
.pt-then { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--text-muted); }
.pt-more, .pt-insights { margin-top: 12px; font-size: 13px; }
.pt-more summary, .pt-insights summary { cursor: pointer; color: var(--text-muted); }
@media (max-width: 1100px) { .pt-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pt-filters input { grid-column: 1 / -1; } }
@media (max-width: 860px) {
  .pt-grid { grid-template-columns: minmax(0, 1fr); }
  .pt-grid.open .pt-list { display: none; }
  .pt-grid:not(.open) .pt-detail { display: none; }
  .pt-back { display: inline-block; padding: 4px 10px; }
  .pt-head { flex-wrap: wrap; }
  .pt-controls { grid-template-columns: minmax(0, 1fr); }
  .pt-msg { max-width: 96%; }
  .pt-list { max-height: none; }
}

/* Platform admin lists: the whole row opens the company */
#companies-table tr.ac-row:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
#companies-table tr.ac-row td:last-child::after { content: "\203A"; float: right; color: var(--text-faint); font-size: 18px; line-height: 1; margin-left: 10px; }
#companies-table tr.ac-row:hover td:last-child::after { color: var(--text); }
.pa-att[data-pa-open-company]:hover { background: var(--panel-2); border-radius: 8px; }

/* Secure Support Access: the bar at the top for the company admin */
.sup-bar { background: var(--warn-dim); border-bottom: 2px solid var(--warn); padding: 9px 20px; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--text); }
.sup-bar-actions { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 600px) { .sup-bar { padding: 9px 14px; } .sup-bar-actions { width: 100%; } .sup-bar-actions button { flex: 1; } }

/* Support access on the Support page, and the red dot on the menu */
.sup-card { margin-bottom: 12px; border-left: 4px solid var(--warn); }
.sup-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--text-muted); }
.sup-actions { display: flex; gap: 8px; margin-top: 10px; }
.sup-history { margin-bottom: 12px; font-size: 13px; }
.sup-history summary { cursor: pointer; color: var(--text-muted); }
.sup-hrow { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 6px 2px; border-bottom: 1px solid var(--border-soft); }
.sup-hrow:last-child { border-bottom: 0; }
.nav-item.has-dot .nav-label::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #d92d20; margin-left: 8px; vertical-align: middle; }
@media (max-width: 600px) { .sup-actions button { flex: 1; } }