/* ============================================================
   Mechvy design system
   Subject: the automotive workshop floor — pegboard tool walls,
   hand-written job tickets clipped to a board, hazard-orange
   signage. Quiet everywhere except one signature: the torn
   ticket-stub divider on every job card.
   ============================================================ */

:root {
  /* palette */
  --bg: #12151A;
  --surface: #1B2027;
  --surface-raised: #222932;
  --surface-hover: #2A323C;
  --line: #2E3742;
  --line-soft: #232A33;
  --text: #E9EDF1;
  --text-muted: #8B97A3;
  --text-faint: #5C6773;

  --accent: #FF5A1F;
  --accent-dim: #C4470F;
  --accent-soft: rgba(255, 90, 31, 0.14);

  --ok: #2BD97C;
  --ok-soft: rgba(43, 217, 124, 0.14);
  --warn: #FFC93C;
  --warn-soft: rgba(255, 201, 60, 0.14);
  --danger: #FF5577;
  --danger-soft: rgba(255, 85, 119, 0.14);
  --info: #3FA9F5;
  --info-soft: rgba(63, 169, 245, 0.14);
  --purple: #A970FF;
  --purple-soft: rgba(169, 112, 255, 0.14);

  /* type */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;

  --radius: 8px;
  --radius-sm: 5px;
}

/* ---------- light theme ----------
   Applied via `html.theme-light`. Same accent, same structure — only the
   background/surface/text and status colors change, so every component
   built against the CSS variables above works in both themes automatically. */
html.theme-light {
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-hover: #F0F2F6;
  --line: #E1E4EA;
  --line-soft: #EEF0F4;
  --text: #14181C;
  --text-muted: #5B6672;
  --text-faint: #9AA3AF;

  --accent: #FF5A1F;
  --accent-dim: #C4470F;
  --accent-soft: rgba(255, 90, 31, 0.10);

  --ok: #1FA971;
  --ok-soft: rgba(31, 169, 113, 0.12);
  --warn: #B87700;
  --warn-soft: rgba(184, 119, 0, 0.12);
  --danger: #E23355;
  --danger-soft: rgba(226, 51, 85, 0.10);
  --info: #2B7FD1;
  --info-soft: rgba(43, 127, 209, 0.10);
  --purple: #7C3AED;
  --purple-soft: rgba(124, 58, 237, 0.10);
}
html.theme-light .job-card,
html.theme-light .card,
html.theme-light .modal-box,
html.theme-light .slideover {
  box-shadow: 0 1px 3px rgba(20, 24, 30, 0.06);
}
html.theme-light .btn:not(.btn-primary) {
  background: #FFFFFF;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

#app { min-height: 100%; }

a { color: inherit; }
button { font-family: inherit; }

::selection { background: var(--accent-soft); color: var(--text); }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ---------- utility ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.h-display {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: var(--text);
}

.mono { font-family: var(--font-mono); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--text);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.btn:hover { background: var(--surface-hover); border-color: var(--text-faint); }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #1A0D06;
}
.btn-primary:hover { background: #ff6b35; border-color: #ff6b35; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-raised); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 14px;
  font-family: var(--font-body);
  outline: none;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Checkboxes and radios are native, small, fixed-size controls — the
   rule above is written for text-style fields (email, password, date,
   etc.) and was never meant to also stretch a checkbox or radio to
   100% width with 9px/12px padding, which is what happens without this
   exclusion. That bug showed up clearly in the vehicle/customer merge
   picker, where the radio button ballooned to fill nearly the entire
   row width, squeezing the actual candidate details into a sliver of
   space and pushing the rest off-screen. */
input[type="checkbox"], input[type="radio"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
label { font-size: 12.5px; color: var(--text-muted); font-weight: 600; display: block; margin-bottom: 5px; }
.field { margin-bottom: 14px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-family: var(--font-mono);
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

.priority-low { color: var(--text-muted); background: var(--line-soft); }
.priority-normal { color: var(--info); background: var(--info-soft); }
.priority-high { color: var(--warn); background: var(--warn-soft); }
.priority-urgent { color: var(--danger); background: var(--danger-soft); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ---------- app shell ---------- */
.shell { display: flex; height: 100vh; overflow: hidden; }

/* The sidebar is always dark, regardless of the app's own light/dark
   content theme — deliberately decoupled from --surface and friends,
   which do still change with html.theme-light. This fixed contrast
   between a dark rail and a light, clean workspace is meant to be part
   of Mechvy's visual identity, not something a theme toggle affects. */
.rail {
  --rail-bg: #14181D;
  --rail-line: #262E37;
  --rail-text: #FFFFFF;
  --rail-text-muted: #C3CBD3;
  --rail-text-faint: #8B97A3;
  --rail-hover: #1F262E;
  --rail-active: rgba(255, 90, 31, 0.16);
  width: 68px;
  background: var(--rail-bg);
  border-right: 1px solid var(--rail-line);
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  flex-shrink: 0;
  position: relative;
  transition: width 0.2s cubic-bezier(.4,0,.2,1);
}
.rail.expanded { width: 240px; }
.rail-brand {
  display: flex; align-items: center; gap: 10px;
  margin: 0 auto 20px;
  justify-content: center;
}
.rail.expanded .rail-brand { margin: 0 16px 20px; justify-content: flex-start; }
.rail-brand img { display: none; max-width: 100%; }
/* The rail's own background never changes with the theme toggle
   anymore, so its logo doesn't either — always the white-text lockup,
   the variant meant for a dark background. */
.rail-brand .rail-icon-dark { display: block; width: 40px; height: auto; }
.rail-brand .rail-icon-light { display: none; }
.rail.expanded .rail-brand .rail-icon-dark { display: none; }
.rail.expanded .rail-brand .rail-logo-dark { display: block; height: 34px; width: auto; max-width: 176px; }
.rail.expanded .rail-brand .rail-logo-light { display: none; }

/* The universal "+ Create" action — always visible, always orange, a
   dropdown rather than a single fixed action since what someone wants
   to create varies by what they're doing, not just what page they're
   on right now. */
.rail-create-wrap { position: relative; margin: 0 10px 14px; flex-shrink: 0; }
.rail.expanded .rail-create-wrap { margin: 0 16px 16px; }
.rail-create-btn {
  width: 100%; height: 40px; border: none; border-radius: var(--radius-sm);
  background: var(--accent); color: #1A0A00;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 14px;
  transition: background 0.12s ease;
}
.rail-create-btn:hover { background: #FF6B36; }
.rail-create-plus { font-size: 17px; line-height: 1; font-weight: 700; }
.rail-create-label { display: none; white-space: nowrap; }
.rail.expanded .rail-create-label { display: inline; }
.rail-create-chevron { display: none; width: 13px; height: 13px; }
.rail-create-chevron svg { width: 13px; height: 13px; }
.rail.expanded .rail-create-chevron { display: flex; align-items: center; justify-content: center; }
.rail-create-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 200px; background: var(--rail-hover); border: 1px solid var(--rail-line);
  border-radius: var(--radius-sm); padding: 6px; box-shadow: 0 12px 28px rgba(0,0,0,0.4);
}
.rail-create-menu.open { display: block; }
.rail-create-option {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: none; background: transparent; color: var(--rail-text);
  font-family: var(--font-body); font-size: 13px; font-weight: 500; text-align: left;
  border-radius: 6px; cursor: pointer;
}
.rail-create-option:hover { background: rgba(255,255,255,0.08); }
.rail-create-option .rail-icon { width: 16px; height: 16px; color: var(--rail-text-muted); }
.rail-create-option .rail-icon svg { width: 16px; height: 16px; }

.rail-toggle {
  position: absolute; top: 20px; right: -11px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--rail-hover); border: 1px solid var(--rail-line); color: var(--rail-text-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5;
  transition: transform 0.2s cubic-bezier(.4,0,.2,1), color 0.12s ease, border-color 0.12s ease;
}
.rail-toggle:hover { color: var(--accent); border-color: var(--accent); }
.rail-toggle svg { width: 12px; height: 12px; }
.rail.expanded .rail-toggle { transform: rotate(180deg); }
.rail-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0;
  display: flex; flex-direction: column; gap: 2px; padding: 0 10px;
}
.rail-scroll::-webkit-scrollbar { width: 0; }
.rail-item {
  display: flex; align-items: center; gap: 12px;
  min-height: 40px; padding: 8px;
  border-radius: var(--radius-sm);
  color: var(--rail-text-muted);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.12s ease, color 0.12s ease;
}
.rail-item:hover { background: var(--rail-hover); color: var(--rail-text); }
/* A subtle background wash plus the brand accent on text/icon, never a
   solid orange block — the spec's own "avoid huge orange blocks,
   should feel premium" note. */
.rail-item.active { background: var(--rail-active); color: var(--accent); }
.rail-item.active .rail-icon { color: var(--accent); }
.rail-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; }
.rail-icon svg { width: 20px; height: 20px; }
/* A child item inside a group carries its icon only for the collapsed
   (icon-only) rail, where every row — standalone, group header, or
   child alike — needs to stay a scannable, tooltipped icon. Once the
   rail is expanded, the icon gives way to the active dot below, and
   the child's text lines up under the group header's own label rather
   than under an icon (8px padding + 16px icon + 10px gap = 34px for
   the header; 8px padding + 14px dot-slot + 12px gap = 34px here). */
.rail-item-lead { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rail-child-icon { display: flex; }
.rail-dot-slot { width: 14px; height: 20px; display: none; align-items: center; justify-content: center; flex-shrink: 0; }
.rail-active-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.rail.expanded .rail-child-icon { display: none; }
.rail.expanded .rail-dot-slot { display: flex; }
.rail-item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow: hidden; }
.rail-label { font-size: 13px; font-weight: 500; opacity: 0; transition: opacity 0.15s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail.expanded .rail-label { opacity: 1; transition-delay: 0.05s; }
/* Subtitles exist purely for discoverability in an unfamiliar area —
   deliberately smaller and dimmer than the label so they never compete
   with it, and only ever shown once the rail is fully expanded. */
.rail-subtitle {
  display: none; font-size: 11px; font-weight: 400; color: var(--rail-text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail.expanded .rail-item.has-subtitle { min-height: 44px; }
.rail.expanded .rail-subtitle { display: block; }
.rail-item.active .rail-subtitle { color: var(--accent); opacity: 0.75; }

/* Collapsible groups (Level 2 of the spec's two collapse levels) — a
   header row with an icon, the group's own label, and a chevron that
   rotates to show/hide the group's children. Each group's collapsed
   state is remembered independently in localStorage, keyed by group
   name, so a user's own choice of which groups to keep open persists
   across sessions. */
.rail-group { flex-shrink: 0; }
.rail-group-header {
  display: flex; align-items: center; gap: 10px;
  height: 32px; padding: 0 8px; margin: 10px 0 2px;
  border-radius: var(--radius-sm);
  color: var(--rail-text-muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.rail-group-header:hover { background: var(--rail-hover); color: var(--rail-text); }
.rail-group-header .rail-icon { width: 16px; height: 16px; }
.rail-group-header .rail-icon svg { width: 16px; height: 16px; }
.rail-group-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  flex: 1; opacity: 0; transition: opacity 0.15s ease; white-space: nowrap; overflow: hidden;
}
.rail.expanded .rail-group-label { opacity: 1; transition-delay: 0.05s; }
.rail-group-chevron {
  display: none; width: 14px; height: 14px; flex-shrink: 0; color: var(--rail-text-faint);
  transition: transform 0.15s ease;
}
.rail-group-chevron svg { width: 14px; height: 14px; }
.rail.expanded .rail-group-chevron { display: flex; align-items: center; justify-content: center; }
.rail-group.collapsed .rail-group-chevron { transform: rotate(-90deg); }
.rail-group-children { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.rail-group.collapsed .rail-group-children { display: none; }
/* When the rail itself is collapsed to icon-only, groups never show
   their header/chevron at all — every item, standalone or grouped,
   flattens into one plain icon list with a tooltip on hover, matching
   the spec's collapsed-state example exactly. */
.rail:not(.expanded) .rail-group-header { display: none; }
.rail:not(.expanded) .rail-group-children { display: flex; }
/* Mechvy's own platform administration — superadmin only, and kept
   visually distinct from every workshop-facing group above it so it
   never reads as "just another menu item" to the one role that can
   see it. */
.platform-group.rail-group { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rail-line); }
/* A plain divider ahead of Settings — visually separating day-to-day
   workshop operations above it from configuration below, without
   needing its own distinct accent colour the way Platform does. */
.settings-group-wrap { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rail-line); }
.rail-group-header.platform-group { color: var(--purple); }
.rail-group-header.platform-group:hover { background: rgba(169, 112, 255, 0.12); }
.platform-group-wrap .rail-item.active { background: rgba(169, 112, 255, 0.16); color: var(--purple); }
.platform-group-wrap .rail-item.active .rail-subtitle { color: var(--purple); }

.rail-spacer { flex-shrink: 0; height: 8px; }
.rail-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--rail-hover);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; color: var(--rail-text);
  border: 1px solid var(--rail-line);
  cursor: pointer;
  margin: 8px auto 0;
  flex-shrink: 0;
}
.rail.expanded .rail-avatar { margin: 8px 16px 0; }

.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.topbar {
  height: 60px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
  padding: 0 24px;
  gap: 16px;
  flex-shrink: 0;
  background: var(--bg);
}
.topbar-title { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.02em; }
.topbar-spacer { flex: 1; }
.topbar-search {
  max-width: 320px;
  position: relative;
}
.role-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: capitalize;
}

.content { flex: 1; overflow-y: auto; padding: 24px 28px; }

/* ---------- login ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,90,31,0.07), transparent 40%),
    var(--bg);
  padding: 20px;
}
.login-box { width: 100%; max-width: 380px; }
/* A big, prominent lockup (icon + wordmark together) rather than the
   old small icon-plus-separate-heading treatment \u2014 this is the
   person's first impression of the product on every visit. */
.login-logo { display: none; height: 64px; width: auto; max-width: 100%; margin-bottom: 22px; }
.login-logo-dark { display: block; }
html.theme-light .login-logo-dark { display: none; }
html.theme-light .login-logo-light { display: block; }
.login-sub { color: var(--text-muted); font-size: 14px; margin: 0 0 28px; }
.demo-accounts {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px;
  color: var(--text-muted);
}
.demo-account-row {
  display: flex; justify-content: space-between;
  padding: 6px 0;
  cursor: pointer;
}
.demo-account-row:hover .demo-email { color: var(--accent); }
.demo-email { font-family: var(--font-mono); }
.error-banner {
  background: var(--danger-soft); color: var(--danger);
  border: 1px solid rgba(255,59,92,0.3);
  padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: 13.5px; margin-bottom: 16px;
}

/* ---------- dashboard ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.kpi-card {
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.kpi-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.kpi-value { font-family: var(--font-display); font-size: 32px; margin-top: 8px; }
.kpi-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }

.panel-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) { .panel-grid { grid-template-columns: 1fr; } }

/* ---------- Dashboard "control centre" redesign ---------- */
.dash-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; }
.dash-greeting { font-family: var(--font-display); font-size: 26px; margin: 0; }
.dash-subgreeting { color: var(--text-muted); font-size: 14px; margin-top: 4px; }
.dash-datetime { text-align: right; flex-shrink: 0; }
.dash-date { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; }
.dash-time { font-family: var(--font-display); font-size: 22px; margin-top: 2px; }

.dash-kpi-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 22px; }
@media (max-width: 1200px) { .dash-kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .dash-kpi-row { grid-template-columns: repeat(2, 1fr); } }
.dash-kpi {
  border-radius: var(--radius); padding: 16px; cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.dash-kpi:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.1); }
.dash-kpi-top { display: flex; justify-content: space-between; align-items: flex-start; }
.dash-kpi-value { font-family: var(--font-display); font-size: 28px; line-height: 1; }
.dash-kpi-icon { width: 22px; height: 22px; opacity: 0.85; }
.dash-kpi-icon svg { width: 22px; height: 22px; }
.dash-kpi-label { font-size: 13px; font-weight: 600; margin-top: 10px; }
.dash-kpi-sub { font-size: 12px; margin-top: 2px; opacity: 0.85; }
/* Saturated but not neon — each tone is a real, distinct brand colour
   at a workable contrast for white text, not a pastel wash. The
   neutral (financial) card stays light instead, so the six cards read
   as "five operational signals + one number", not six equally loud
   alerts. */
.dash-kpi-blue { background: #2F6FED; color: #fff; }
.dash-kpi-green { background: #1FAA6E; color: #fff; }
.dash-kpi-orange { background: #E08A1E; color: #fff; }
.dash-kpi-purple { background: #7C5CE0; color: #fff; }
.dash-kpi-red { background: #E0483D; color: #fff; }
.dash-kpi-neutral { background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.dash-kpi-neutral .dash-kpi-icon { color: var(--text-muted); }
.dash-kpi-neutral .dash-kpi-sub { color: var(--text-muted); opacity: 1; }

.dash-main-row { display: grid; grid-template-columns: 2.1fr 1fr; gap: 16px; align-items: start; margin-bottom: 16px; }
@media (max-width: 1050px) { .dash-main-row { grid-template-columns: 1fr; } }

.dash-card-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.dash-card-title { font-family: var(--font-display); font-size: 16px; display: flex; align-items: center; gap: 8px; }
.dash-card-title-icon { width: 18px; height: 18px; color: var(--text-muted); display: inline-flex; }
.dash-card-title-icon svg { width: 18px; height: 18px; }
.dash-link { font-size: 13px; color: var(--accent); text-decoration: none; font-weight: 600; }
.dash-link:hover { text-decoration: underline; }

.dash-schedule-card { padding: 0; }
.dash-schedule-table { width: 100%; border-collapse: collapse; }
.dash-schedule-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); font-weight: 600; padding: 10px 18px; border-bottom: 1px solid var(--line-soft);
}
.dash-schedule-table td { padding: 12px 18px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; vertical-align: middle; }
.dash-schedule-row { cursor: pointer; transition: background 0.1s ease; }
.dash-schedule-row:hover { background: var(--surface-hover); }
.dash-schedule-row:last-child td { border-bottom: none; }
.dash-tech-avatar {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sched-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: var(--surface-hover); color: var(--text-muted);
}
.sched-pill-ok { background: var(--info-soft); color: var(--info); }
.sched-pill-warn { background: var(--warn-soft); color: #9A6B00; }
.sched-pill-danger { background: var(--danger-soft); color: var(--danger); }
.sched-pill-info { background: var(--purple-soft); color: var(--purple); }

.dash-right-col { display: flex; flex-direction: column; gap: 16px; }
.dash-attention-card, .dash-activity-card { padding: 0; }
.dash-attention-badge {
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}
.dash-attention-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 18px; cursor: pointer;
  border-bottom: 1px solid var(--line-soft); transition: background 0.1s ease;
}
.dash-attention-item:last-child { border-bottom: none; }
.dash-attention-item:hover { background: var(--surface-hover); }
.dash-attention-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.dash-attention-dot-red { background: var(--danger); }
.dash-attention-dot-orange { background: var(--warn); }
.dash-attention-dot-blue { background: var(--info); }
.dash-attention-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.dash-attention-icon svg { width: 18px; height: 18px; }
.dash-attention-icon-red { color: var(--danger); }
.dash-attention-icon-orange { color: #9A6B00; }
.dash-attention-icon-blue { color: var(--info); }
.dash-attention-title { font-size: 13.5px; font-weight: 600; }

.dash-activity-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); }
.dash-activity-item:last-child { border-bottom: none; }
.dash-activity-icon {
  width: 28px; height: 28px; border-radius: 50%; background: var(--surface-hover); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dash-activity-icon svg { width: 15px; height: 15px; }

.dash-perf-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 900px) { .dash-perf-row { grid-template-columns: repeat(2, 1fr); } }
.dash-perf-card { padding: 14px 16px; display: flex; align-items: flex-start; gap: 12px; }
.dash-perf-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.dash-perf-icon svg { width: 17px; height: 17px; }
.dash-perf-icon-green { background: var(--ok-soft); color: var(--ok); }
.dash-perf-icon-blue { background: var(--info-soft); color: var(--info); }
.dash-perf-icon-purple { background: var(--purple-soft); color: var(--purple); }
.dash-perf-icon-orange { background: var(--warn-soft); color: #9A6B00; }
.dash-perf-value { font-family: var(--font-display); font-size: 20px; margin-top: 2px; }
.dash-perf-change { font-size: 11.5px; font-weight: 600; margin-top: 3px; }
.dash-perf-up { color: var(--ok); }
.dash-perf-down { color: var(--danger); }

.dash-mobile-promo {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius);
  background: var(--accent-soft); border: 1px solid var(--accent);
}
.dash-mobile-promo-icon { width: 30px; height: 30px; color: var(--accent); flex-shrink: 0; }
.dash-mobile-promo-icon svg { width: 30px; height: 30px; }

.panel { padding: 18px 20px; }
.panel-title { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.02em; margin-bottom: 14px; text-transform: uppercase; color: var(--text-muted); }

.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.bar-name { width: 110px; flex-shrink: 0; color: var(--text-muted); }
.bar-track { flex: 1; height: 8px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 4px; }
.bar-value { width: 26px; text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

/* ---------- workshop board ---------- */
.board-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.board-resources {
  display: flex; gap: 24px; padding: 14px 16px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px;
  flex-wrap: wrap;
}
.resources-col { flex: 1; min-width: 220px; max-width: 320px; }
.resource-row { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.resource-row:last-child { border-bottom: none; }
.board-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 12px;
  height: calc(100vh - 190px);
}
.board-col {
  flex: 1 1 0;
  min-width: 148px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.board-col-head {
  padding: 10px 10px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.board-col-title { font-family: var(--font-display); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.25; }
.board-col-count {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
  background: var(--surface-raised); padding: 2px 7px; border-radius: 999px; flex-shrink: 0; margin-left: 6px;
}
.board-col-body { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.board-col-body.drag-over { background: var(--accent-soft); }

.job-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--text-faint);
  border-radius: var(--radius-sm);
  padding: 12px 13px 10px;
  cursor: grab;
  transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
}
.job-card:active { cursor: grabbing; }
.job-card:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(0,0,0,0.25); }
.job-card.dragging { opacity: 0.4; transform: scale(0.98); }
.job-card.priority-urgent-border { border-left-color: var(--danger); }
.job-card.priority-high-border { border-left-color: var(--warn); }
.job-card.priority-normal-border { border-left-color: var(--info); }
.job-card.priority-low-border { border-left-color: var(--text-faint); }

/* Border colour by workflow state — lets staff see at a glance why a
   vehicle is sitting where it is, without opening the card. The one
   override that matters most: a red border always means overdue,
   regardless of what stage the job is actually in, since that's the one
   piece of information the column itself can't show. */
.job-card.state-booked-border { border-left-color: var(--info); }
.job-card.state-waiting_approval-border { border-left-color: var(--accent); }
.job-card.state-waiting_parts-border { border-left-color: var(--purple); }
.job-card.state-ready_to_work-border { border-left-color: var(--ok); }
.job-card.state-working-border { border-left-color: var(--info); }
.job-card.state-quality_check-border { border-left-color: var(--warn); }
.job-card.state-ready_for_pickup-border { border-left-color: var(--ok); }
.job-card.state-collected-border { border-left-color: var(--text-faint); }
.job-card.state-invoiced-border { border-left-color: var(--text-faint); }
.job-card.state-overdue-border { border-left-color: var(--danger); border-left-width: 4px; }

.job-card-title { font-weight: 600; font-size: 12.5px; margin-bottom: 3px; line-height: 1.3; }
.job-card-vehicle { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

/* the signature: a torn ticket-stub divider between vehicle info and meta */
.ticket-stub {
  position: relative;
  margin: 10px 0 8px;
  border-top: 1px dashed var(--line);
  height: 1px;
}
.ticket-stub::before, .ticket-stub::after {
  content: '';
  position: absolute; top: -4px;
  width: 8px; height: 8px;
  background: var(--bg);
  border-radius: 50%;
}
.ticket-stub::before { left: -13px; }
.ticket-stub::after { right: -13px; }

.job-card-meta { display: flex; align-items: center; justify-content: space-between; }
.job-card-tech { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.tech-avatar {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--line-soft); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; font-family: var(--font-display);
}

/* ---------- tables / lists ---------- */
.list-table { width: 100%; border-collapse: collapse; }
.list-table th {
  text-align: left; font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted);
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.list-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.list-table tr:hover td { background: var(--surface); }
.list-table tr { cursor: pointer; }
.list-row-title { font-weight: 600; }
.list-row-sub { color: var(--text-muted); font-size: 12px; }

.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-title { font-family: var(--font-display); font-size: 24px; letter-spacing: 0.01em; }
.page-actions { display: flex; gap: 10px; }

.search-bar { max-width: 340px; margin-bottom: 18px; }

/* Mechanic job page (jobDetail.js's renderMechanicAll) — a dedicated two
   column layout: tab content on the left, a persistent task-timer/parts/
   vehicle/customer/actions rail on the right, so a mechanic never has to
   leave the page to find what they need. Collapses to one column (rail
   below content) once there isn't room for both side by side. */
.mech-job-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.mech-job-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
@media (max-width: 900px) {
  .mech-job-layout { grid-template-columns: 1fr; }
  .mech-job-rail { position: static; }
}

.empty-state {
  text-align: center; padding: 60px 20px; color: var(--text-muted);
}
.empty-state-title { font-family: var(--font-display); font-size: 18px; color: var(--text); margin-bottom: 6px; }

/* ---------- modal / slide-over ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: stretch; justify-content: flex-end;
  z-index: 100;
}
.overlay.center { align-items: center; justify-content: center; }
.slideover {
  /* Half the viewport by default — this panel has grown a lot (quotes,
     parts status, customer requirements, deadline tracking all stacked
     on top of what was already here), so the original fixed 460px was
     forcing a lot of unnecessary scrolling. Bounded on both ends: never
     narrower than it used to be on a normal desktop, never wider than
     is actually readable on an ultra-wide monitor, and the min() in both
     min/max keeps it from ever overflowing a small mobile screen the
     same way the old fixed width + max-width:92vw already didn't.
  */
  width: 50vw; min-width: min(460px, 92vw); max-width: min(800px, 92vw);
  background: var(--bg);
  border-left: 1px solid var(--line);
  height: 100%; overflow-y: auto;
  padding: 24px;
  animation: slidein 0.16s ease;
}
.modal-box {
  width: 480px; max-width: 92vw; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; max-height: 88vh; overflow-y: auto;
}
@keyframes slidein { from { transform: translateX(24px); opacity: 0.4; } to { transform: translateX(0); opacity: 1; } }
.overlay-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.overlay-close { cursor: pointer; color: var(--text-muted); font-size: 20px; background: none; border: none; }
.overlay-close:hover { color: var(--text); }

.section-label {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted); margin: 20px 0 10px;
}
.section-label:first-child { margin-top: 0; }

.line-item-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.note-item { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.note-author { font-weight: 600; font-size: 12.5px; }
.note-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.note-body { font-size: 13.5px; margin-top: 3px; color: var(--text-muted); }

.status-pill-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.status-chip {
  padding: 6px 10px; border-radius: 999px; font-size: 11.5px; font-family: var(--font-mono);
  border: 1px solid var(--line); cursor: pointer; text-transform: capitalize; background: var(--surface);
}
.status-chip.active { background: var(--accent); border-color: var(--accent); color: #1A0D06; font-weight: 700; }
.status-chip.disabled { opacity: .38; cursor: not-allowed; }
.btn-danger-outline { border-color: var(--danger); color: var(--danger); background: transparent; }
.btn-danger-outline:hover { background: var(--danger-soft); }

.low-stock-row td:first-child { border-left: 3px solid var(--danger); }

/* ---------- mobile shell (topbar, bottom tabs, More overlay) ---------- */
/* Below 720px the desktop rail and topbar are both hidden (see the
   media query at the end of this block) and replaced by these three
   pieces \u2014 built for every standard-nav user (not floor roles, who
   only ever have one page and need no nav chrome at all). Always
   present in the DOM; display is purely CSS-driven by that breakpoint,
   so there's no resize listener or JS branching needed to keep them in
   sync with the viewport. These base rules default to hidden and must
   come BEFORE the media query below \u2014 CSS resolves equal-specificity
   rules by source order, so a later override always wins; the query
   overriding display here has to be the last word, not the first. */
.mobile-topbar {
  display: none;
  align-items: center;
  height: 56px;
  padding: 0 8px 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  flex-shrink: 0;
  gap: 4px;
}
.mobile-topbar-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 12px; color: var(--text);
  flex-shrink: 0; cursor: pointer;
}
.mobile-topbar-title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600;
  flex: 1; min-width: 0;
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mobile-topbar-actions { display: flex; align-items: center; }

.mobile-tabbar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
}
.mobile-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 0;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 10px;
  background: none; border: none; cursor: pointer;
}
.mobile-tab.active { color: var(--accent); font-weight: 600; }

.mobile-more-overlay {
  display: none;
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 50;
  flex-direction: column;
}
.mobile-more-overlay.open { display: flex; }
.mobile-more-header {
  display: flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.mobile-more-close {
  background: none; border: none; cursor: pointer; color: var(--text);
  display: flex; align-items: center; padding: 4px;
}
.mobile-more-list { flex: 1; overflow-y: auto; padding-bottom: 76px; }
.mobile-more-section {
  padding: 14px 16px 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-faint);
}
.mobile-more-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text); text-decoration: none;
  font-size: 14px;
}
.mobile-more-item-chevron { margin-left: auto; color: var(--text-faint); }

/* ---------- customer portal shell ---------- */
/* Visually matches the staff mobile shell above (same avatar circle,
   same bottom-tab pattern) but deliberately always-on rather than
   toggled by a media query \u2014 the staff shell swaps to a sidebar on
   larger screens because that's a genuinely better experience for
   heavy daily use; the customer portal has no such alternate mode to
   fall back to, and stays this same simple layout at every width. */
.customer-shell { display: flex; flex-direction: column; min-height: 100vh; }
.customer-topbar {
  display: flex; align-items: center;
  height: 56px; padding: 0 8px 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky; top: 0; z-index: 10;
  gap: 4px; flex-shrink: 0;
}
.customer-topbar-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 12px; color: var(--text);
  flex-shrink: 0; cursor: pointer;
}
.customer-topbar-title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600;
  flex: 1; min-width: 0;
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.customer-content { flex: 1; padding: 16px; padding-bottom: 84px; max-width: 600px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.customer-tabbar {
  display: flex;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
}
.customer-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 0;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 10px;
  background: none; border: none; cursor: pointer;
  position: relative;
}
.customer-tab.active { color: var(--accent); font-weight: 600; }
.customer-tab-dot {
  position: absolute; top: 2px; right: calc(50% - 16px);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); border: 1.5px solid var(--bg);
}

/* Support Centre Phase 3 + Help Centre H2: floor roles' phone-width support
   entries (they have no mobile top bar; see app.js). A fixed bottom-right
   group holding "Help" and "Report a problem". Hidden on wider screens,
   where the desktop topbar buttons are shown instead. Both buttons are
   >=48px tall (large touch targets); .content already reserves 84px of
   bottom padding, and the group stays clear of the screen edge/safe area. */
.floor-fab-group {
  display: none; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  align-items: center; gap: 8px; max-width: calc(100vw - 32px);
}
.floor-feedback-fab {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 10px 16px; border-radius: 999px;
  background: var(--surface-raised); color: var(--text); border: 1px solid var(--line);
  font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  white-space: nowrap;
}
.floor-help-fab { background: var(--accent); color: #1A0D06; border-color: var(--accent); }

/* Help Centre H2: compact topbar/mobile controls. */
.mobile-help-btn { min-width: 44px; min-height: 44px; padding: 6px 8px; display: inline-flex; align-items: center; justify-content: center; }

/* "ⓘ Learn more →" — contextual link to a Help article (opens a new tab).
   Component only; placed nowhere until articles exist (H6). */
.learn-more {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600;
  color: var(--info); text-decoration: none; padding: 2px 0; font-family: var(--font-body);
}
.learn-more:hover { text-decoration: underline; }
.learn-more:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; border-radius: 4px; }
.learn-more-icon { width: 16px; height: 16px; display: inline-flex; flex: none; }
.learn-more-icon svg { width: 16px; height: 16px; }

@media (max-width: 720px) {
  .floor-fab-group { display: flex; }
  .rail { display: none; }
  .topbar { display: none; }
  .content { padding: 16px; padding-bottom: 84px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .mobile-topbar { display: flex; }
  .mobile-tabbar { display: flex; }
}

/* ---------- customer portal shell ---------- */
/* Deliberately its own namespace (cp-*), not a reuse of the staff app's
   .mobile-* classes above \u2014 those are hidden above 720px by design,
   since the staff app has a real desktop sidebar to fall back on. The
   customer portal has no desktop-specific nav at all; a customer with
   only three destinations (Home, Jobs, Invoices) is well served by the
   same simple bottom-tab shell at any screen size, the same way the
   reference app it's modeled on does \u2014 so this stays visible always,
   not just below a breakpoint. */
.cp-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.cp-topbar {
  display: flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0; position: sticky; top: 0; background: var(--bg); z-index: 30;
}
.cp-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-raised); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 12px; color: var(--text);
  flex-shrink: 0; cursor: pointer;
}
.cp-topbar-title { flex: 1; min-width: 0; }
.cp-topbar-org { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.cp-topbar-name { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.cp-content { flex: 1; max-width: 640px; width: 100%; margin: 0 auto; padding: 20px 20px 90px; }
.cp-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: center;
  background: var(--bg); border-top: 1px solid var(--line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
}
.cp-tabbar-inner { display: flex; width: 100%; max-width: 480px; }
.cp-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 0; color: var(--text-muted);
  background: none; border: none; cursor: pointer; font-size: 11px;
}
.cp-tab.active { color: var(--accent); font-weight: 600; }
.cp-tab svg { width: 21px; height: 21px; }



/* ---------- Jobs page redesign ---------- */
.jobs-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.jobs-tab {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line); color: var(--text-muted);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease;
}
.jobs-tab:hover { background: var(--surface-hover); }
.jobs-tab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.jobs-tab-count {
  font-family: var(--font-mono); font-size: 11px; background: var(--surface-hover); color: var(--text-muted);
  border-radius: 999px; padding: 1px 7px;
}
.jobs-tab.active .jobs-tab-count { background: var(--accent); color: #fff; }

.jobs-filter-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.jobs-filter-group { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }
.jobs-filter-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.jobs-filter-group select { width: 100%; }

.jobs-date-wrap { display: flex; flex-direction: column; gap: 4px; position: relative; }
.jobs-date-btn { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.jobs-date-btn-icon { width: 14px; height: 14px; display: inline-flex; color: var(--text-muted); }
.jobs-date-btn-icon svg { width: 14px; height: 14px; }
.jobs-date-popover {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 220px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}
.jobs-date-popover.open { display: block; }
.jobs-date-option {
  display: block; width: 100%; text-align: left; padding: 7px 10px; border: none; background: transparent;
  color: var(--text); font-size: 13px; border-radius: 6px; cursor: pointer;
}
.jobs-date-option:hover { background: var(--surface-hover); }
.jobs-date-custom { border-top: 1px solid var(--line-soft); margin-top: 4px; padding: 8px 6px 4px; }
.jobs-date-custom-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.jobs-date-custom input[type=date] { flex: 1; }

.jobs-search-row { margin-bottom: 10px; display: flex; gap: 10px; align-items: flex-start; }
.jobs-columns-wrap { position: relative; flex-shrink: 0; }
.jobs-columns-menu {
  display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 190px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18); max-height: 320px; overflow-y: auto;
}
.jobs-columns-menu.open { display: block; }
.jobs-chips-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.jobs-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 600; padding: 4px 6px 4px 10px; border-radius: 999px;
}
.jobs-chip-remove { border: none; background: transparent; color: var(--accent); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.jobs-chip-clear { border: none; background: transparent; color: var(--text-muted); font-size: 12px; text-decoration: underline; cursor: pointer; }

.jobs-result-bar { font-size: 12.5px; color: var(--text-muted); margin-bottom: 8px; }

.jobs-vehicle-thumb {
  width: 40px; height: 30px; border-radius: 5px; background: var(--surface-hover); background-size: cover; background-position: center;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.jobs-vehicle-thumb-placeholder { color: var(--text-faint); }

.jobs-mech-cell { display: flex; align-items: center; gap: 8px; }
.jobs-mech-avatar {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.jobs-mech-avatar-unassigned { background: var(--surface-hover); color: var(--text-faint); }

.jobs-status-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--surface-hover); color: var(--text-muted);
}
.jobs-status-pill-blue { background: var(--info-soft); color: var(--info); }
.jobs-status-pill-green { background: var(--ok-soft); color: var(--ok); }
.jobs-status-pill-orange { background: var(--warn-soft); color: #9A6B00; }
.jobs-status-pill-red { background: var(--danger-soft); color: var(--danger); }
.jobs-status-pill-purple { background: var(--purple-soft); color: var(--purple); }
.jobs-status-pill-neutral { background: var(--surface-hover); color: var(--text-muted); }

.jobs-table td { vertical-align: middle; }

.jobs-pagination-row { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; flex-wrap: wrap; gap: 10px; }
.jobs-pager { display: flex; gap: 4px; align-items: center; }

/* ---------- Excel-style per-column filter popovers ---------- */
.jobs-col-filter-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
  margin-left: 4px; color: var(--text-faint); cursor: pointer; vertical-align: middle; transform: rotate(90deg);
}
.jobs-col-filter-icon svg { width: 11px; height: 11px; }
.jobs-col-filter-icon:hover { color: var(--text-muted); }
.jobs-col-filter-icon.active { color: var(--accent); }
.jobs-col-popover {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 200px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18); font-weight: 400; text-transform: none; letter-spacing: normal;
  white-space: normal; cursor: default;
}
.jobs-col-popover.open { display: block; }
.jobs-col-sort-options { display: flex; flex-direction: column; }
.jobs-col-popover-divider { border-top: 1px solid var(--line-soft); margin: 4px 0; }
.jobs-col-popover-body { padding: 2px; }
.jobs-col-popover-body input[type=text], .jobs-col-popover-body input:not([type]) { width: 100%; margin-bottom: 6px; }
.jobs-col-popover-body select { width: 100%; }
.jobs-col-checklist-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 13px;
  font-weight: 400; color: var(--text); cursor: pointer;
}
.jobs-col-checklist-row:hover { background: var(--surface-hover); }

/* ---------- Saved Views ---------- */
.jobs-views-menu { min-width: 220px; }
.jobs-views-section-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); padding: 6px 8px 4px; }
.jobs-views-option {
  display: block; width: 100%; text-align: left; padding: 7px 10px; border: none; background: transparent;
  color: var(--text); font-size: 13px; font-family: var(--font-body); border-radius: 6px; cursor: pointer;
}
.jobs-views-option:hover { background: var(--surface-hover); }
.jobs-views-save { color: var(--accent); font-weight: 600; }
.jobs-views-row { display: flex; align-items: center; }
.jobs-views-delete {
  border: none; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 15px;
  padding: 4px 10px; line-height: 1;
}
.jobs-views-delete:hover { color: var(--danger); }

/* ---------- Row actions menu (⋮) ---------- */
.jobs-row-menu-btn {
  width: 26px; height: 26px; border: none; background: transparent; color: var(--text-muted);
  font-size: 16px; line-height: 1; border-radius: 6px; cursor: pointer;
}
.jobs-row-menu-btn:hover { background: var(--surface-hover); color: var(--text); }
.jobs-row-menu {
  display: none; position: absolute; top: calc(100% + 2px); right: 8px; z-index: 25; min-width: 160px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}
.jobs-row-menu.open { display: block; }

/* ---------- Bulk selection toolbar ---------- */
.jobs-bulk-toolbar {
  display: none; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 10px;
  background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius);
}
.jobs-row-selected { background: var(--accent-soft); }

/* ---------- Tenant Control Centre (Platform Operator tenant detail redesign) ---------- */
.tcc-modal { width: min(1480px, 96vw); max-width: 96vw; }
.tcc-breadcrumb { font-size: 12px; color: var(--text-muted); }
.tcc-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.tcc-breadcrumb a:hover { color: var(--accent); }
.tcc-header-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.tcc-actions-wrap { position: relative; }
.tcc-actions-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 210px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}
.tcc-actions-menu.open { display: block; }
.tcc-actions-menu button {
  display: block; width: 100%; text-align: left; padding: 8px 10px; background: none; border: none;
  border-radius: 6px; font-size: 13px; color: var(--text); cursor: pointer;
}
.tcc-actions-menu button:hover { background: var(--surface-hover); }
.tcc-actions-menu button.danger { color: var(--danger); }
.tcc-header-main { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; flex-wrap: wrap; }
.tcc-photo {
  width: 84px; height: 84px; border-radius: var(--radius); background: var(--surface-hover);
  display: flex; align-items: center; justify-content: center; color: var(--text-faint); flex-shrink: 0; overflow: hidden;
}
.tcc-photo img { width: 100%; height: 100%; object-fit: cover; }
.tcc-info-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.tcc-info-card { flex: 1; min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.tcc-info-card h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 8px; font-family: var(--font-mono); }
.tcc-summary-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 20px; }
.tcc-summary-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.tcc-summary-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-family: var(--font-mono); }
.tcc-summary-value { font-size: 20px; font-weight: 700; font-family: var(--font-display); }
.tcc-summary-sub { font-size: 11px; color: var(--text-muted); }
.tcc-summary-link { font-size: 12px; color: var(--accent); font-weight: 600; text-decoration: none; margin-top: auto; cursor: pointer; background: none; border: none; padding: 0; text-align: left; }
.tcc-tabs { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.tcc-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; font-size: 13px; font-weight: 600;
  color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
}
.tcc-tab:hover { color: var(--text); }
.tcc-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tcc-tab-body { min-height: 120px; }
.tcc-quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 16px; }
.tcc-quick-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--text); text-align: center;
}
.tcc-quick-action:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.tcc-builder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }
.tcc-danger-divider { border-top: 1px solid var(--line); margin: 18px 0 4px; padding-top: 14px; }
@media (max-width: 1100px) {
  .tcc-summary-row { grid-template-columns: repeat(2, 1fr); }
  .tcc-builder-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .tcc-summary-row { grid-template-columns: 1fr; }
  .tcc-info-row { flex-direction: column; }
  .tcc-header-main { flex-direction: column; }
}

/* ============================================================
   Tenant onboarding wizard
   ============================================================ */
.onb-shell { min-height: 100vh; background: var(--bg); }
.onb-topbar { padding: 18px 28px; border-bottom: 1px solid var(--line); color: var(--text); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.onb-body { max-width: 1040px; margin: 0 auto; padding: 36px 24px 80px; display: flex; gap: 32px; align-items: flex-start; }
.onb-sidebar { width: 260px; flex-shrink: 0; position: sticky; top: 36px; }
.onb-progress-track { height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.onb-progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.onb-step-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 8px; border-radius: var(--radius-sm); cursor: default; }
.onb-step-item.active { background: var(--accent-soft); }
.onb-step-item.done, .onb-step-item.active { cursor: pointer; }
.onb-step-item:not(.done):not(.active) { opacity: .55; }
.onb-step-circle { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-raised); border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
.onb-step-item.done .onb-step-circle { background: var(--ok); border-color: var(--ok); color: #08130d; }
.onb-step-item.active .onb-step-circle { border-color: var(--accent); color: var(--accent); }
.onb-step-label { font-size: 13.5px; font-weight: 700; color: var(--text); }
.onb-step-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.onb-content { flex: 1; min-width: 0; }
.onb-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.onb-step-layout { display: flex; flex-direction: column; gap: 18px; }
.onb-footer { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 0; }
.onb-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.onb-welcome { max-width: 480px; margin: 60px auto; text-align: center; }
.onb-mini-steps { display: flex; justify-content: center; gap: 22px; margin-top: 8px; flex-wrap: wrap; }
.onb-mini-step { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.onb-mini-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; }
.onb-chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.onb-chip { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text); background: var(--surface-raised); transition: border-color .15s ease, background .15s ease; }
.onb-chip:hover { border-color: var(--accent); }
.onb-chip.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.onb-chip-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.onb-chip.selected .onb-chip-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.onb-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 420px; }
.onb-choice-card { padding: 22px; text-align: center; border: 1.5px solid var(--line); border-radius: var(--radius); cursor: pointer; background: var(--surface-raised); }
.onb-choice-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.onb-add-box { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 16px; margin-top: 14px; }
.onb-site-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.onb-site-row { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); }
.onb-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.onb-duration-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.onb-duration-row > div:first-child { flex: 1; font-size: 13.5px; }
.onb-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.onb-switch input { opacity: 0; width: 0; height: 0; }
.onb-switch-track { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background .15s ease; cursor: pointer; }
.onb-switch-track::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s ease; }
.onb-switch input:checked + .onb-switch-track { background: var(--accent); }
.onb-switch input:checked + .onb-switch-track::before { transform: translateX(18px); }
.onb-status-ok { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--ok-soft); color: var(--ok); font-weight: 600; font-size: 13.5px; }
.onb-preview-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface-raised); }
.onb-preview-hero { height: 100px; background: linear-gradient(135deg, #2A323C, #1B2027) center/cover; }
.onb-preview-body { padding: 14px; }
.onb-checklist { display: flex; flex-direction: column; gap: 10px; }
.onb-checklist-row { display: flex; align-items: center; gap: 12px; font-size: 13.5px; }
.onb-check-done, .onb-check-open { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.onb-check-done { background: var(--ok); color: #08130d; }
.onb-check-open { border: 1.5px solid var(--line); }
@media (max-width: 820px) {
  .onb-body { flex-direction: column; }
  .onb-sidebar { width: 100%; position: static; }
  .onb-grid-2 { grid-template-columns: 1fr; }
  .onb-choice-grid { grid-template-columns: 1fr 1fr; max-width: none; }
}

/* ---------- interactive product tour ---------- */
.tour-overlay { position: fixed; inset: 0; z-index: 500; pointer-events: none; }
.tour-card {
  pointer-events: auto; background: var(--surface-raised); border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 16px 18px; width: 260px; box-shadow: 0 12px 32px rgba(0,0,0,.35); z-index: 501;
}
.rail-item.tour-highlight { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); position: relative; z-index: 502; background: var(--rail-hover); }

/* ---------- in-dialog Help pill (Phase H2) ----------
   One body-level control, shown only while a .overlay is open (see
   components/helpDialogPill.js). z-index above .overlay (100). It never makes
   the page behind the dialog clickable — only this pill is reachable.
   Desktop: bottom-left. Modals are centred and slide-overs are right-aligned,
   so the bottom-left corner of the backdrop is free. */
.help-dialog-pill {
  position: fixed; z-index: 110;
  left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  min-height: 44px; min-width: 44px; padding: 0 16px 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; border: 1px solid var(--line); cursor: pointer;
  background: var(--accent); color: #1A0D06;
  font: 700 14px/1 var(--font-body, inherit);
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
.help-dialog-pill[hidden] { display: none; }
.help-dialog-pill:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
html.theme-light .help-dialog-pill { box-shadow: 0 6px 18px rgba(0,0,0,.28); border-color: rgba(26,13,6,.25); }
/* Phone (<=720px): a modal is centred with max-height 88vh, which leaves a
   ~6vh band at the bottom of the screen; the pill sits in that band as a 44px
   icon-only circle so it does not cover the modal. A slide-over is full height
   (no free band), so while the pill is shown it gets extra bottom padding so
   its last controls can always be scrolled clear of the pill. */
@media (max-width: 720px) {
  .help-dialog-pill { left: 12px; bottom: max(4px, env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; padding: 0; }
  .help-dialog-pill__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.help-pill-on .overlay .slideover { padding-bottom: 76px; }
}

/* ---- Loading feedback (see js/components/loading.js) ---- */
@keyframes mv-spin { to { transform: rotate(360deg); } }
@keyframes mv-logo-spin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(.86); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes mv-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@keyframes mv-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.spinner { display: inline-block; width: 22px; height: 22px; flex: none; vertical-align: -5px; background: url('/assets/brand/mechvy-loader-white.png') center / contain no-repeat; animation: mv-logo-spin 1.6s cubic-bezier(.65, .05, .35, 1) infinite; }
html.theme-light .spinner { background-image: url('/assets/brand/mechvy-loader-colour.png'); }
.spinner-lg { width: 56px; height: 56px; vertical-align: middle; }
.spinner-xl { width: 76px; height: 76px; vertical-align: middle; }
/* Shown from the first byte, before any script has run, and removed by app.js once the first page is built (CSS hides it after 25 s regardless). */
.boot-loader { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: var(--bg, #0b0d10); animation: mv-boot-timeout 0s 25s forwards; }
html.theme-light .boot-loader { background: var(--bg, #f6f7f9); }
@keyframes mv-boot-timeout { to { opacity: 0; visibility: hidden; } }
.loading-row { display: flex; align-items: center; gap: 8px; color: var(--text-muted, #667); font-size: 13px; padding: 8px 0; }
#mv-topbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100000; overflow: hidden; opacity: 0; transition: opacity .2s; pointer-events: none; }
#mv-topbar.on { opacity: 1; }
#mv-topbar::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; background: var(--accent, #ff5a1f); border-radius: 0 3px 3px 0; animation: mv-slide 1.1s ease-in-out infinite; }
#mv-busy { position: fixed; right: 14px; bottom: 14px; z-index: 100000; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--surface, #fff); color: var(--text-muted, #556); border: 1px solid var(--line, #ddd); box-shadow: 0 2px 10px rgba(0,0,0,.12); font-size: 12.5px; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; pointer-events: none; }
#mv-busy.on { opacity: 1; transform: none; }
.page-loader { position: fixed; left: 50%; top: max(300px, 42%); transform: translate(-50%, -50%); z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-muted, #667); font-size: 13px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: mv-pulse 1.4s ease-in-out infinite; }
  #mv-topbar::before { width: 100%; animation: mv-pulse 1.4s ease-in-out infinite; border-radius: 0; }
}

/* New-version notice (js/components/pwa.js) */
#mv-update { position: fixed; left: 14px; bottom: 14px; z-index: 100001; display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 16px; border-radius: 999px; background: var(--surface, #fff); color: var(--text, #111); border: 1px solid var(--line, #ddd); box-shadow: 0 4px 16px rgba(0,0,0,.18); font-size: 13px; }

/* ---------- workshop board v2 (4.187.0) + shared primary action ---------- */
.btn-lg { padding: 11px 20px; font-size: 15px; min-height: 44px; }
.wf-action { justify-content: center; min-height: 36px; }
.wf-action.is-busy { opacity: 0.7; cursor: progress; }
.wf-action-off { opacity: 0.55; border-style: dashed; cursor: not-allowed; }

.wf-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 16px; margin: 0 0 14px; border-left: 3px solid var(--accent); }
.wf-bar-label { font-family: var(--font-display); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.wf-bar-sub { font-size: 13px; margin-top: 2px; }
.wf-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.wb-toolbar { flex-wrap: wrap; }
.wb-view-toggle { display: inline-flex; gap: 0; }
.wb-view-toggle .btn { border-radius: 0; }
.wb-view-toggle .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.wb-view-toggle .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; text-decoration: none; }
.wb-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.wb-filters select { max-width: 180px; }
.wb-search { flex: 1 1 240px; min-width: 180px; max-width: 420px; }
.wb-status { margin: 0 0 8px; min-height: 18px; }

.wb-stage-tabs { display: none; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 6px; }
.wb-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 8px 14px; font-size: 13px; min-height: 40px; cursor: pointer; }
.wb-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.wb-tab-count { font-family: var(--font-mono); font-size: 11.5px; opacity: 0.85; }

.wb-main { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-items: start; }
.wb-col { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.wb-col-head { padding: 10px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.wb-col-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.wb-col-body { max-height: calc(100vh - 300px); min-height: 90px; overflow-y: auto; }
.wb-empty { text-align: center; color: var(--text-faint); font-size: 12.5px; padding: 18px 6px; }
.wb-more { width: 100%; justify-content: center; }

.wb-others-title { font-family: var(--font-display); font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 22px 0 8px; }
.wb-others { display: flex; flex-direction: column; gap: 8px; }
.wb-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.wb-panel-head { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: none; color: var(--text); padding: 12px 14px; min-height: 46px; cursor: pointer; }
.wb-panel-head:hover { background: var(--surface-hover); }
.wb-chevron { width: 14px; color: var(--text-muted); }
.wb-panel-summary { color: var(--text-muted); font-size: 12.5px; margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-panel-body { padding: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; border-top: 1px solid var(--line); }
.wb-panel-body .wb-more, .wb-panel-body .wb-empty, .wb-panel-body .loading-row { grid-column: 1 / -1; }

.wb-card { display: flex; flex-direction: column; flex: 0 0 auto; gap: 3px; padding: 10px 11px 9px; min-height: 148px; cursor: pointer; }
.wb-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wb-card.is-held { background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(255,201,60,0.06) 8px 16px); }
.wb-card.is-off-board { opacity: 0.8; border-style: dashed; }
.wb-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.wb-title { margin: 0; min-height: calc(1.3em * 2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.wb-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.wb-meta { margin-top: 2px; gap: 6px; }
.wb-where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; text-align: right; }
.wb-unassigned { font-style: italic; }
.wb-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; min-height: 20px; align-content: flex-start; }
.wb-chip { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-muted); white-space: nowrap; }
.wb-chip-danger { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); font-weight: 600; }
.wb-chip-warn { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.wb-chip-ok { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); font-weight: 600; }
html.theme-light .wb-chip-warn { color: #9A6B00; }
.wb-blocker { min-height: 16px; font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-card-foot { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; }
.wb-card-foot .wf-action { flex: 1; }
.wb-menu-btn { min-width: 40px; justify-content: center; }
.wb-menu { position: fixed; z-index: 1200; min-width: 200px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,0.35); padding: 4px; display: flex; flex-direction: column; }
.wb-menu-item { text-align: left; background: none; border: none; color: var(--text); padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; min-height: 40px; }
.wb-menu-item:hover:not(:disabled), .wb-menu-item:focus-visible { background: var(--surface-hover); outline: none; }
.wb-menu-item:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 1100px) {
  .wb-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .wb-stage-tabs { display: flex; }
  .wb-main { display: block; }
  .wb-col { display: none; }
  .wb-col.is-active { display: flex; }
  .wb-col-body { max-height: none; }
  .wb-card { min-height: 0; }
  .wb-panel-summary { display: none; }
  .wf-bar { flex-direction: column; align-items: stretch; }
  .wf-bar-actions .btn { flex: 1; justify-content: center; }
}
@media (min-width: 1700px) { .wb-col-body { max-height: calc(100vh - 280px); } }

/* ---------- workshop board: new look (4.188.0) ----------
   Plate-first cards, one neutral action button (colour is kept for things that need attention), an attention strip above the board,
   hours against the estimate, and the TV display. Everything uses the theme variables, so light and dark both work. */
.wb-statusrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
.wb-statusrow .wb-status { margin: 0; }
.wb-live { font-size: 12px; margin: 0; }

.wb-filter-extra { display: contents; }
.wb-filter-toggle { display: none; }
.wb-mine[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }

.wb-attn { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin: 0 0 14px; }
.wb-attn-chip { display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 12px 8px 8px; min-height: 56px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); cursor: pointer; font: inherit; min-width: 0; }
.wb-attn-chip:hover { border-color: var(--text-faint); }
.wb-attn-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wb-attn-chip.is-on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.wb-attn-count { flex: none; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 8px; display: grid; place-items: center; font-family: var(--font-display); font-size: 22px; font-weight: 600; background: var(--line-soft); color: var(--text); }
.wb-attn-text { display: flex; flex-direction: column; min-width: 0; }
.wb-attn-label { font-size: 13.5px; font-weight: 600; }
.wb-attn-sub { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-attn-chip.tone-danger .wb-attn-count { background: var(--danger-soft); color: var(--danger); }
.wb-attn-chip.tone-warn .wb-attn-count { background: var(--warn-soft); color: var(--warn); }
.wb-attn-chip.tone-info .wb-attn-count { background: var(--info-soft); color: var(--info); }
.wb-attn-chip.tone-ok .wb-attn-count { background: var(--ok-soft); color: var(--ok); }
.wb-attn-chip.tone-quiet .wb-attn-count { color: var(--text-muted); }
.wb-attn-chip.tone-quiet { opacity: 0.8; }
html.theme-light .wb-attn-chip.tone-warn .wb-attn-count { color: #8A5A00; }

/* the stage colour sits on the column, not on every card */
.wb-col { border-top: 3px solid var(--stage-c, var(--line)); }
.wb-col-booked { --stage-c: var(--text-muted); }
.wb-col-ready_to_work { --stage-c: #6C79F0; }
.wb-col-working { --stage-c: var(--info); }
.wb-col-quality_check { --stage-c: var(--purple); }
.wb-col-ready_for_pickup { --stage-c: var(--ok); }
.wb-col-head .board-col-title { font-size: 13px; letter-spacing: 0.06em; }
.wb-col-head .board-col-count { font-size: 12.5px; font-weight: 700; color: var(--text); }
.wb-panel { border-top: 3px solid var(--stage-c, var(--line)); }
.wb-panel-pending_quote { --stage-c: var(--warn); }
.wb-panel-waiting_approval { --stage-c: var(--accent); }
.wb-panel-waiting_parts { --stage-c: var(--info); }
.wb-panel-collected { --stage-c: var(--text-faint); }
.wb-others { margin-top: 18px; }

.wb-card { border-left: 1px solid var(--line); min-height: 0; gap: 7px; padding: 12px 12px 11px; }
.wb-card-top { align-items: center; }
.wb-plate { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: 0.05em; line-height: 1.05; }
.wb-tag { flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 5px; }
.wb-tag-high { background: var(--warn-soft); color: var(--warn); }
html.theme-light .wb-tag-high { color: #8A5A00; }
.wb-tag-urgent { background: var(--danger); color: #14181C; }
html.theme-light .wb-tag-urgent { color: #FFFFFF; }
.wb-line { font-size: 12.5px; }
.wb-title { min-height: 0; font-size: 14px; margin: 0; }
.wb-meta { margin-top: 0; }
.wb-avatar-empty { border: 1.5px dashed var(--text-faint); background: transparent; color: var(--text-muted); font-size: 12px; font-family: var(--font-body); font-weight: 600; }

.wb-hours { display: flex; flex-direction: column; gap: 4px; }
.wb-hours-bar { height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.wb-hours-fill { height: 100%; border-radius: 3px; background: var(--info); }
.wb-hours.is-over .wb-hours-fill { background: var(--accent); }
.wb-hours-text { font-size: 12px; color: var(--text-muted); }
.wb-hours.is-over .wb-hours-text { color: var(--accent); font-weight: 600; }
html.theme-light .wb-hours.is-over .wb-hours-text { color: #C2410C; }

.wb-blocker { display: flex; gap: 7px; align-items: flex-start; min-height: 0; white-space: normal; background: var(--warn-soft); color: var(--warn); border-radius: 6px; padding: 6px 8px; font-size: 12.5px; font-weight: 500; line-height: 1.3; overflow: visible; }
html.theme-light .wb-blocker { color: #7A4B00; }
.wb-blocker.is-held { background: var(--line-soft); color: var(--text-muted); }
.wb-chips { min-height: 0; }
.wb-chip { font-size: 12px; padding: 2px 9px; font-weight: 600; }
.wb-card-foot { padding-top: 6px; }
.wb-card-foot .wf-action { min-height: 42px; font-size: 14px; font-weight: 600; }
.wb-menu-btn { min-width: 42px; min-height: 42px; }
.wb-card .wf-action.btn-primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.wb-card .wf-action.btn-primary:hover { background: var(--text); border-color: var(--text); opacity: 0.88; }
.wf-action-alt { background: transparent; border: 1.5px solid var(--text); color: var(--text); font-weight: 600; }

@media (max-width: 760px) {
  .wb-filter-toggle { display: inline-flex; min-height: 44px; align-items: center; }
  .wb-filter-extra { display: none; width: 100%; gap: 8px; flex-wrap: wrap; }
  .wb-filters.is-open .wb-filter-extra { display: flex; }
  .wb-filters.is-open .wb-filter-extra select, .wb-filters.is-open .wb-filter-extra .btn { min-height: 44px; flex: 1 1 140px; }
  .wb-search { max-width: none; flex: 1 1 0; min-height: 44px; }
  #wb-tv-btn { display: none; }
  .wb-attn { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 6px; margin-bottom: 8px; }
  .wb-attn-chip { flex: none; min-width: 0; min-height: 48px; padding: 6px 12px 6px 6px; }
  .wb-attn-count { min-width: 34px; height: 34px; font-size: 19px; }
  .wb-attn-sub { display: none; }
  .wb-plate { font-size: 26px; }
  .wb-card-foot .wf-action { min-height: 52px; font-size: 16px; }
  .wb-menu-btn { min-width: 52px; min-height: 52px; }
  .wb-tab { min-height: 44px; }
}

/* ---------- workshop TV display (js/pages/boardTv.js): always dark, sized from the screen so it reads across a room ---------- */
body.wb-tv-open { overflow: hidden; }
.wb-tv { position: fixed; inset: 0; z-index: 100010; background: #0E1217; color: #F3F5F7; display: flex; flex-direction: column; gap: 2.2vh; padding: 2.4vh 2.8vw 3vh; font-family: var(--font-body); font-size: clamp(13px, 1.05vw, 26px); }
.wb-tv-bar { display: flex; align-items: center; gap: 2em; }
.wb-tv-title { margin-right: auto; }
.wb-tv-name { font-family: var(--font-display); font-size: 2.1em; font-weight: 700; line-height: 1.05; }
.wb-tv-date { color: #9AA6B5; font-size: 1.05em; }
.wb-tv-stat { display: flex; align-items: baseline; gap: 0.5em; }
.wb-tv-stat-n { font-family: var(--font-display); font-weight: 700; font-size: 3.2em; line-height: 1; color: #6FB1FF; }
.wb-tv-stat.is-plain .wb-tv-stat-n { color: #F3F5F7; }
.wb-tv-stat.is-ok .wb-tv-stat-n { color: #5FD3C2; }
.wb-tv-stat.is-warn .wb-tv-stat-n { color: #FFA766; }
.wb-tv-stat-l { font-size: 1.1em; color: #C3CCD8; }
.wb-tv-clock { font-family: var(--font-display); font-size: 3.8em; font-weight: 600; line-height: 1; padding-left: 0.6em; border-left: 1px solid #2A3441; }
.wb-tv-close { width: 2.6em; height: 2.6em; border-radius: 50%; border: 1px solid #2A3441; background: transparent; color: #9AA6B5; font-size: 1em; cursor: pointer; }
.wb-tv-close:hover, .wb-tv-close:focus-visible { color: #F3F5F7; border-color: #9AA6B5; outline: none; }
.wb-tv-body { flex: 1; min-height: 0; display: flex; gap: 1.6em; }
.wb-tv-stale { display: none; position: absolute; left: 50%; top: 0.8vh; transform: translateX(-50%); z-index: 1; background: #FFA766; color: #14181C; padding: 0.35em 1.1em; border-radius: 999px; font-weight: 700; font-size: 1.05em; }
.wb-tv-stale.is-on { display: block; }
.wb-tv-loading { margin: auto; font-size: 1.6em; color: #9AA6B5; }
.wb-tv-bays { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(12em, 1fr); gap: 1em; overflow: hidden; align-content: stretch; }
.wb-tv-bay { background: #171D25; border: 1px solid #2A3441; border-radius: 1em; padding: 1.1em 1.2em; display: flex; flex-direction: column; gap: 0.45em; min-width: 0; min-height: 0; overflow: hidden; }
.wb-tv-bay.is-free { background: transparent; border: 2px dashed #2F3A48; }
.wb-tv-bay-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.3em 0.5em; }
.wb-tv-bay-name { min-width: 0; font-size: 1em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #9AA6B5; }
.wb-tv-pill { padding: 0.2em 0.75em; border-radius: 999px; font-weight: 700; font-size: 0.9em; background: #242C37; color: #C3CCD8; white-space: nowrap; }
.wb-tv-pill.is-working { background: #173A66; color: #A9D0FF; }
.wb-tv-pill.is-quality_check { background: #3A2A5C; color: #D9C4FF; }
.wb-tv-pill.is-free { color: #9AA6B5; }
.wb-tv-plate { font-family: var(--font-display); font-weight: 700; font-size: 2.5em; line-height: 1; letter-spacing: 0.03em; margin-top: 0.1em; white-space: nowrap; overflow: hidden; }
.wb-tv-vehicle { font-size: 1.15em; color: #C3CCD8; }
.wb-tv-job { font-size: 1.3em; font-weight: 600; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wb-tv-bay-foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.5em; }
.wb-tv-bar-track { height: 0.6em; border-radius: 0.3em; background: #2A3441; overflow: hidden; }
.wb-tv-bar-fill { height: 100%; border-radius: 0.3em; background: #6FB1FF; }
.wb-tv-bay.is-quality_check .wb-tv-bar-fill { background: #C4A3FF; }
.wb-tv-bar-track.is-over .wb-tv-bar-fill { background: #FFA766; }
.wb-tv-bay-meta { display: flex; justify-content: space-between; gap: 0.6em; font-size: 1.1em; color: #C3CCD8; }
.wb-tv-bay-meta .is-over { color: #FFA766; font-weight: 600; }
.wb-tv-free { flex: 1; display: grid; place-items: center; font-family: var(--font-display); font-size: 2.8em; letter-spacing: 0.06em; color: #6C7888; }
.wb-tv-side { width: 28em; flex: none; display: flex; flex-direction: column; gap: 1em; }
.wb-tv-list { flex: 0 0 auto; min-height: 0; background: #171D25; border-radius: 1em; padding: 1em 1.2em; display: flex; flex-direction: column; gap: 0.5em; overflow: hidden; }
.wb-tv-list h2 { margin: 0; display: flex; align-items: center; justify-content: space-between; font-size: 1em; letter-spacing: 0.1em; text-transform: uppercase; color: #9AA6B5; font-family: var(--font-body); font-weight: 700; }
.wb-tv-list-n { font-family: var(--font-display); font-size: 1.7em; color: #F3F5F7; }
.wb-tv-list-n.is-ok { color: #5FD3C2; }
.wb-tv-list-n.is-warn { color: #FFD166; }
.wb-tv-row { display: flex; align-items: baseline; gap: 0.7em; }
.wb-tv-row-plate { width: 5.6em; flex: none; font-family: var(--font-display); font-weight: 700; font-size: 1.5em; white-space: nowrap; letter-spacing: 0.05em; }
.wb-tv-row-who { flex: 1; min-width: 0; font-size: 1.15em; color: #C3CCD8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-tv-row-note { flex: none; font-size: 1.15em; font-weight: 600; color: #C3CCD8; }
.wb-tv-row-note.is-late { color: #FFA766; }
.wb-tv-empty { color: #9AA6B5; font-size: 1.1em; }
@media (max-width: 900px) {
  .wb-tv-body { flex-direction: column; overflow: auto; }
  .wb-tv-bays { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .wb-tv-side { width: auto; }
  .wb-tv-bar { flex-wrap: wrap; gap: 1em; }
}

/* ---------- 4.189.0 site banner ----------
   One superadmin-chosen image. Tall on the dashboard (inside the page, scrolls away with it), a slim strip under the top bar on
   every other page. The text is always white on a dark scrim so it reads on any photo, in light and dark themes alike. */
.site-banner { position: relative; overflow: hidden; flex: none; color: #fff; background: linear-gradient(135deg, #1d2733, #0d1117); }
.site-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.site-banner-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 10, 14, 0.7) 0%, rgba(8, 10, 14, 0.36) 55%, rgba(8, 10, 14, 0.14) 100%),
              linear-gradient(0deg, rgba(8, 10, 14, 0.35) 0%, rgba(8, 10, 14, 0) 45%);
}
.site-banner-inner { position: relative; height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 28px; }
.site-banner.is-slim { height: 88px; border-bottom: 1px solid var(--line); }
.site-banner.is-tall { height: 196px; margin: -24px -28px 22px; }
.site-banner.is-tall .site-banner-inner { align-items: stretch; padding-top: 20px; padding-bottom: 24px; }
.site-banner.is-tall .site-banner-left { align-self: flex-end; }
.site-banner.is-tall .site-banner-right { align-self: flex-start; }
.site-banner-title, .site-banner .dash-greeting { font-family: var(--font-display); color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }
.site-banner-title { font-size: 26px; letter-spacing: 0.01em; }
.site-banner .dash-greeting { font-size: 34px; line-height: 1.15; }
.site-banner .dash-subgreeting { color: rgba(255, 255, 255, 0.9); font-size: 16px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }
.site-banner-right { text-align: right; flex-shrink: 0; }
.site-banner .dash-date, .site-banner .dash-time { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }
.site-banner .dash-date { font-size: 12px; }
.site-banner .dash-time { font-size: 26px; }
/* The strip already names the page, so the top bar's own title steps aside (kept for screen readers). */
.main.has-banner > .topbar .topbar-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 720px) {
  /* Phones are short of height: no strip on ordinary pages, and a shorter hero on the dashboard. */
  .site-banner.is-slim { display: none; }
  .site-banner.is-tall { height: 148px; margin: -16px -16px 16px; }
  .site-banner-inner { padding-left: 16px; padding-right: 16px; }
  .site-banner.is-tall .site-banner-inner { padding-top: 14px; padding-bottom: 16px; }
  .site-banner .dash-greeting { font-size: 24px; }
  .site-banner .dash-subgreeting { font-size: 13.5px; }
  .site-banner .dash-time { font-size: 20px; }
}
@media print { .site-banner { display: none; } }

/* ---------- 4.189.1: the banner is the page title ----------
   With a site banner the strip names the page, so a page's own eyebrow and title (marked data-page-heading) step aside. They stay in
   the page for screen readers, and nothing changes when no banner image has been chosen. Detail pages (a customer, a vehicle, a job)
   keep their own titles because those name the record, not the page. */
.main.has-banner [data-page-heading] {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: 0 !important; overflow: hidden;
  min-width: 0 !important; flex: none !important; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* a header left with only hidden titles takes no room; an action beside a hidden title moves to the right edge */
.main.has-banner .page-header:not(:has(> :not([data-page-heading]))) { margin-bottom: 0; }
.main.has-banner .page-header > [data-page-heading] + *,
.main.has-banner .board-toolbar > [data-page-heading] + * { margin-left: auto; }

/* ---- Interactive tours (tours/engine.js) ---- */
.mv-tour-root { position: fixed; inset: 0; z-index: 100000; pointer-events: none; }
.mv-tour-ring { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(10, 14, 20, .58), 0 0 0 3px #FF5A1F; opacity: 0; transition: left .2s, top .2s, width .2s, height .2s, opacity .2s; animation: mvTourPulse 1.4s ease-in-out infinite; pointer-events: none; }
@keyframes mvTourPulse { 0%, 100% { box-shadow: 0 0 0 9999px rgba(10, 14, 20, .58), 0 0 0 3px #FF5A1F, 0 0 0 3px rgba(255, 90, 31, .0); } 50% { box-shadow: 0 0 0 9999px rgba(10, 14, 20, .58), 0 0 0 3px #FF5A1F, 0 0 0 11px rgba(255, 90, 31, .35); } }
.mv-tour-card { position: fixed; pointer-events: auto; background: #fff; color: #14181d; border-radius: 16px; padding: 14px 16px 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); font-size: 16px; line-height: 1.4; transition: left .2s, top .2s; }
.mv-tour-step { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #667; margin-bottom: 6px; }
.mv-tour-text { font-size: 17px; font-weight: 500; }
.mv-tour-text strong { color: #D94A12; }
.mv-tour-actions { display: flex; gap: 8px; justify-content: space-between; margin-top: 12px; }
.mv-tour-btn { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid #cfd4da; background: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.mv-tour-next { background: #FF5A1F; border-color: #FF5A1F; color: #fff; }
.mv-tour-done { text-align: center; }
.mv-tour-good { font-size: 34px; font-weight: 800; color: #D94A12; margin-bottom: 6px; }
.mv-tour-done .mv-tour-actions { justify-content: center; }
.mv-tour-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .mv-tour-ring { animation: none; transition: none; } .mv-tour-card { transition: none; } }
.mv-tour-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Workshop Board: Bays view (4.199.0) */
.wb-bays-summary { margin: 4px 0 12px; }
.wb-bays-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.wb-bays-site { grid-column: 1 / -1; margin: 14px 0 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.wb-bay { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-height: 150px; }
.wb-bay.is-free { border-style: dashed; justify-content: space-between; }
.wb-bay-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.wb-bay-name { font-weight: 800; font-size: 15px; }
.wb-bay-type { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.wb-bay-free { font-size: 26px; font-weight: 800; color: var(--ok); }
.wb-bay select { width: 100%; min-height: 44px; }
.wb-bay-pill { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2, rgba(128,128,128,.15)); }
.wb-bay-open { display: block; color: inherit; text-decoration: none; }
.wb-bay-plate { font-size: 24px; font-weight: 800; letter-spacing: .04em; }
.wb-bay-vehicle { font-size: 13px; color: var(--text-muted); }
.wb-bay-job { font-size: 13.5px; margin-top: 4px; }
.wb-bay-meta { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-muted); margin-top: auto; }
.wb-bay-meta .is-over { color: var(--danger); font-weight: 700; }
.wb-bays-tray { display: flex; flex-wrap: wrap; gap: 8px; }
.wb-bay-chip { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: inherit; text-decoration: none; font-size: 13px; background: var(--surface); min-height: 36px; display: inline-flex; align-items: center; gap: 2px; }
@media (max-width: 600px) { .wb-bays-grid { grid-template-columns: 1fr; } }