/* ═══════════════════════════════════════════════════════════
   MERCURY PERMITS PORTAL — app.css
   ═══════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────── */
:root {
  --bg-base:     #f0f4f7;
  --bg-sidebar:  #323a45;
  --bg-surface:  #ffffff;
  --bg-elevated: #f8fafc;
  --bg-hover:    #edf1f5;
  --bg-input:    #ffffff;

  --border:       rgba(0, 0, 0, 0.10);
  /* Form-field focus/active border. Deliberately a neutral slate — NOT the
     orange accent (too close to the danger red) and not any status color, so a
     focused/editable field reads as "active" without signalling a state. */
  --border-focus: #475569;
  --focus-ring:   rgba(71, 85, 105, 0.22);  /* neutral glow companion to --border-focus */

  --accent:       #f05922;
  --accent-dim:   rgba(240, 89, 34, 0.15);
  --accent-hover: #d24a17;

  --text-primary:   #2d3748;
  --text-secondary: #4a5568;
  --text-muted:     #a0aec0;

  --success:     #2f9e6a;
  --success-bg:  rgba(47, 158, 106, 0.10);
  --warning:     #c07c10;
  --warning-bg:  rgba(192, 124, 16, 0.10);
  --danger:      #c53030;
  --danger-bg:   rgba(197, 48, 48, 0.10);
  --info:        #2b6cb0;
  --info-bg:     rgba(43, 108, 176, 0.10);

  --sidebar-w:           242px;
  --sidebar-w-collapsed: 64px;
  --topbar-h:            54px;

  --r-sm: 5px;
  --r:    8px;
  --r-lg: 12px;

  --shadow:    0 2px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 6px 32px rgba(0, 0, 0, 0.16);

  --font:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --transition: 140ms ease;
}

/* ── Sidebar scoped overrides (stays dark) ──────────────── */
#sidebar {
  --text-primary:   #e2e8f0;
  --text-secondary: #a0aec0;
  --text-muted:     #718096;
  --border:         rgba(255, 255, 255, 0.08);
  --bg-hover:       rgba(255, 255, 255, 0.07);
  --accent-dim:     rgba(240, 89, 34, 0.18);
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  height: 100%;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }
svg { flex-shrink: 0; }

/* ── Login Screen ───────────────────────────────────────── */
#login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, #fde4d8 0%, var(--bg-base) 65%);
}

.login-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.login-glow-1 {
  width: 500px; height: 500px;
  background: rgba(240, 89, 34, 0.12);
  top: -120px; left: -100px;
}
.login-glow-2 {
  width: 400px; height: 400px;
  background: rgba(240, 89, 34, 0.07);
  bottom: -80px; right: -80px;
}

.login-card {
  position: relative;
  z-index: 1;
  width: 380px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 40px 36px;
  box-shadow: var(--shadow-lg);
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}
.login-title {
  display: block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}
.login-subtitle {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
  letter-spacing: 0.4px;
}

.login-alt-link {
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
}
.login-alt-link a {
  color: var(--accent);
  text-decoration: none;
}
.login-alt-link a:hover { text-decoration: underline; }

/* ── App Shell ──────────────────────────────────────────── */
#app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── Sidebar ────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  transition: width var(--transition);
}

/* ── Collapsed icon-only rail ───────────────────────────── */
#sidebar.collapsed { width: var(--sidebar-w-collapsed); }
#sidebar.collapsed .brand-chip { display: none; }
#sidebar.collapsed .sidebar-nav { padding: 12px 8px; }
#sidebar.collapsed .nav-link { justify-content: center; padding: 9px; gap: 0; }
#sidebar.collapsed .nav-label { display: none; }
#sidebar.collapsed .sidebar-footer { justify-content: center; }
#sidebar.collapsed #version-footer,
#sidebar.collapsed #auth-badge,
#sidebar.collapsed #logout-btn .btn-label { display: none; }
#sidebar.collapsed #logout-btn { justify-content: center; width: auto; padding: 8px; }

/* Toggle button in the topbar */
#sidebar-toggle svg { display: block; }

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 14px;
  border-bottom: 1px solid var(--border);
}
/* The logo PNG has a baked-in white background; the chip turns that into an
   intentional rounded badge on the dark sidebar (overflow clips the corners). */
.brand-chip {
  display: inline-flex;
  background: #fff;
  padding: 5px 10px;
  border-radius: var(--r);
  overflow: hidden;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
}
.nav-link:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.nav-link.active {
  background: var(--accent-dim);
  color: var(--accent-hover);
}
.nav-link svg { opacity: 0.8; }
.nav-link.active svg { opacity: 1; }

.sidebar-footer {
  padding: 14px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.version-footer {
  flex-basis: 100%;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  opacity: 0.75;
}
.version-footer .vf-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  /* reset button chrome — this reads as a text line, not a button */
  appearance: none;
  background: none;
  border: 0;
  padding: 1px 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  transition: color .12s, background-color .12s;
}
.version-footer .vf-row:hover,
.version-footer .vf-row:focus-visible {
  color: var(--text);
  background: var(--surface-2, rgba(127, 127, 127, .12));
  outline: none;
}
.version-footer .vf-row:hover .vf-ver { text-decoration: underline; }
.version-footer .vf-date { font-variant-numeric: tabular-nums; }

/* Changelog modal body */
.changelog {
  max-height: 62vh;
  overflow-y: auto;
  padding-right: 6px;
}
.changelog .changelog-status { color: var(--text-muted); padding: 12px 2px; }
.changelog .cl-ver {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 18px 0 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border, rgba(127, 127, 127, .2));
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.changelog .cl-ver:first-child { margin-top: 2px; }
.changelog .cl-date {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.changelog .cl-desc {
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.changelog .cl-desc code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--surface-2, rgba(127, 127, 127, .14));
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13px;
  overflow: hidden;
  min-width: 0;
}
.sidebar-user #user-display-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-icon-bare {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 4px;
}
.btn-icon-bare:hover {
  color: var(--text);
  background: var(--surface-hover);
}

/* ── Main area ──────────────────────────────────────────── */
#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.breadcrumb {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  transition: background var(--transition), color var(--transition), opacity var(--transition);
  white-space: nowrap;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.btn-danger {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.25);
}
.btn-danger:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.22);
}

.btn-sm   { padding: 5px 11px; font-size: 12px; }
.btn-full { width: 100%; justify-content: center; padding: 11px 16px; }
.btn-icon { padding: 7px; border-radius: var(--r-sm); }

/* ── Forms ──────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-group:last-of-type { margin-bottom: 0; }

.form-label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}

.form-input,
.form-select {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  padding: 9px 12px;
  font-size: 13.5px;
  transition: border-color var(--transition);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.form-input:focus,
.form-select:focus {
  border-color: var(--border-focus);
}
.form-input::placeholder { color: var(--text-muted); }

/* Weight fields carry no up/down spinner arrows — the value is normalized on
   blur (e.g. "80k" → 80000), so the browser stepper adds nothing. Targeted by
   field, NOT a blanket input[type=number], so intentional steppers (tire count
   step=2, axle count, year, fees) keep their arrows. */
#f-weight::-webkit-inner-spin-button,
#f-weight::-webkit-outer-spin-button,
input[data-field="axle_weight_lbs"]::-webkit-inner-spin-button,
input[data-field="axle_weight_lbs"]::-webkit-outer-spin-button,
input[data-field="weight"]::-webkit-inner-spin-button,
input[data-field="weight"]::-webkit-outer-spin-button,
input[data-field="load_weight"]::-webkit-inner-spin-button,
input[data-field="load_weight"]::-webkit-outer-spin-button,
input[data-field="overall_weight"]::-webkit-inner-spin-button,
input[data-field="overall_weight"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#f-weight,
input[data-field="axle_weight_lbs"],
input[data-field="weight"],
input[data-field="load_weight"],
input[data-field="overall_weight"] {
  -moz-appearance: textfield;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a9bb8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}
.form-select option { background: var(--bg-surface); }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-error {
  font-size: 12.5px;
  color: var(--danger);
  padding: 8px 12px;
  background: var(--danger-bg);
  border-radius: var(--r-sm);
  margin-bottom: 14px;
  border: 1px solid rgba(248,113,113,0.2);
}

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 22px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}

.card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ── Stats Grid ─────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
}
.stat-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 8px;
}
.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.stat-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 5px;
}

/* ── Health Info ────────────────────────────────────────── */
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.health-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.health-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.health-dot.ok       { background: var(--success); box-shadow: 0 0 8px var(--success); }
.health-dot.degraded { background: var(--warning); box-shadow: 0 0 8px var(--warning); }
.health-dot.down     { background: var(--danger);  box-shadow: 0 0 8px var(--danger); }
.health-dot.disabled { background: var(--text-muted); }

.health-label { font-size: 12px; color: var(--text-secondary); }
.health-value { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-top: 1px; }

/* ── System monitors (status page) ──────────────────────── */
.spark { display: block; width: 100%; height: 28px; margin-top: 8px; color: var(--accent); opacity: .85; }
.spark polyline {
  stroke: currentColor; stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;   /* preserveAspectRatio=none must not distort the stroke */
}
.spark polyline.spark-muted { stroke: var(--text-muted); stroke-width: 1.5; }
.stat-value.sv-sm { font-size: 19px; line-height: 1.2; }
.stat-value.stat-warn   { color: var(--warning); }
.stat-value.stat-danger { color: var(--danger); }

/* ── Tables ─────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.th-sort {
  cursor: pointer;
  user-select: none;
}
.th-sort:hover { color: var(--text-secondary); }
.th-sort-active { color: var(--accent); }

tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--bg-hover); }

tbody td {
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--text-primary);
  vertical-align: middle;
}

.td-muted { color: var(--text-secondary); }
/* A confirmed selection (e.g. the chosen carrier/contact/job in the New Order
   modal) — bold + accented so it stands out from the muted helper text. */
.no-picked { font-weight: 700; color: var(--success); }
.td-mono  { font-family: var(--font-mono); font-size: 12.5px; }
.td-payload-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  text-align: left;
}
.td-payload-btn:hover { color: var(--accent); text-decoration: underline; }
.td-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ── Badges ─────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.badge-active     { background: var(--success-bg); color: var(--success); }
.badge-inactive   { background: var(--bg-elevated); color: var(--text-muted); }
.badge-suspended  { background: var(--danger-bg); color: var(--danger); }
.badge-user       { background: var(--info-bg); color: var(--info); }
.badge-admin      { background: var(--accent-dim); color: var(--accent-hover); }
.badge-supervisor { background: var(--warning-bg); color: var(--warning); }
.badge-default    { background: var(--bg-elevated); color: var(--text-secondary); }
.badge-ok         { background: var(--success-bg); color: var(--success); }
.badge-degraded   { background: var(--warning-bg); color: var(--warning); }
.badge-down       { background: var(--danger-bg); color: var(--danger); }
/* Submitted-but-unassigned order — attention-getting, and distinct from every
   other status hue (not the amber "warning" or red "danger"). Solid violet. */
.badge-unassigned { background: #7c3aed; color: #fff; }
/* Marks a permit row that is an amendment of a previously issued permit. */
.badge-amendment  { background: var(--warning-bg); color: var(--warning); }

/* Marks a permit row that is a route authorization (reuses the amendment
   notation layout: .permit-amend-note / .permit-amend-desc). */
.badge-route-auth { background: var(--info-bg, var(--bg-elevated)); color: var(--info, var(--text)); }

/* Amendment notation stacked under the permit-type cell. */
.permit-amend-note { margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.permit-amend-desc { margin-top: 3px; }
.permit-amend-desc .ec-input { width: 100%; font-size: 12px; }

/* Amendment picker modal */
.amend-picker-controls { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.amend-picker-controls #amend-desc { flex: 1 1 260px; }
.amend-picker-controls #amend-num-search { flex: 0 1 260px; }
.amend-row:hover { background: var(--bg-elevated); }

/* ── Notification recipient chips ───────────────────────── */
.notif-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 10px;
  background: var(--accent-dim);
  color: var(--accent-hover);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 500;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notif-chip-remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  opacity: 0.6;
  flex-shrink: 0;
}
.notif-chip-remove:hover { opacity: 1; }

/* ── Pagination ─────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  gap: 12px;
}
.pagination-info {
  font-size: 12.5px;
  color: var(--text-muted);
}
.pagination-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  transition: background var(--transition), color var(--transition);
}
.page-btn:hover:not(:disabled) {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.page-btn.active {
  background: var(--accent-dim);
  color: var(--accent-hover);
  border-color: var(--border-focus);
}
.page-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Toolbar (above table) ──────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.toolbar-left  { display: flex; align-items: center; gap: 10px; }
.toolbar-right { display: flex; align-items: center; gap: 10px; }

.filter-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  padding: 6px 28px 6px 10px;
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a9bb8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  -webkit-appearance: none;
  appearance: none;
}
.filter-select:focus { border-color: var(--border-focus); }
.filter-select option { background: var(--bg-surface); }

/* File Management record type-ahead (upload + browse). Compact text input that
   matches the toolbar filters (no select arrow) plus an absolute results list. */
.fm-ta-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  padding: 6px 10px;
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition);
}
.fm-ta-input:focus { border-color: var(--border-focus); }
.fm-ta-input:disabled { opacity: 0.5; cursor: not-allowed; }
.fm-ta-dd {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 100%;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  z-index: 200;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.fm-ta-opt {
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fm-ta-opt:hover { background: var(--bg-hover); }

/* Two-line carrier rows in type-ahead dropdowns: name on top, a muted
   DOT · City, ST line beneath (carriers often share names — this disambiguates). */
.ta-opt-carrier { padding: 6px 10px; cursor: pointer; line-height: 1.3; }
.ta-opt-carrier:hover { background: var(--bg-hover); }
.ta-opt-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-opt-sub  { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Empty state ────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
  color: var(--text-muted);
  gap: 10px;
  text-align: center;
}
.empty-state svg { opacity: 0.35; }
.empty-state p { font-size: 13.5px; }

/* ── Spinner / Loading ──────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.spinner-lg {
  width: 32px; height: 32px;
  border-width: 3px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
}

/* ── Modal ──────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 18, 0.80);
  backdrop-filter: blur(3px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-box {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: modal-in 0.18s ease;
}
.modal-box.modal-wide { max-width: 1100px; }
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(-8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.modal-close-btn {
  color: var(--text-muted);
  padding: 4px;
  border-radius: var(--r-sm);
  display: flex;
  transition: color var(--transition);
}
.modal-close-btn:hover { color: var(--text-primary); }

.modal-body {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Confirm box ────────────────────────────────────────── */
.confirm-box {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  width: 100%;
  max-width: 360px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: modal-in 0.18s ease;
}
.confirm-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--danger);
}
.confirm-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.confirm-message {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.6;
}
/* Optional checkbox row in the confirm dialog (confirm(..., {checkbox})) */
.confirm-checkbox-row {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13px; cursor: pointer; margin: -12px 0 20px;
}
/* "TEMP" chip beside a plate that's a temporary tag (display-only) */
.temp-chip {
  display: inline-block; padding: 0 5px; border-radius: 4px;
  background: var(--warning-bg, #fef3c7); color: var(--warning, #b45309);
  border: 1px solid var(--warning, #b45309);
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px; vertical-align: middle;
}
/* "KIT" chip beside a glider/kit vehicle's VIN (display-only) */
.kit-chip {
  display: inline-block; padding: 0 5px; border-radius: 4px;
  background: var(--info-bg, #e0e7ff); color: var(--info, #4338ca);
  border: 1px solid var(--info, #4338ca);
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px; vertical-align: middle;
}
.confirm-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* ── Toasts ─────────────────────────────────────────────── */
#toasts {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 200;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--r);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  font-size: 13.5px;
  color: var(--text-primary);
  min-width: 260px;
  max-width: 380px;
  pointer-events: all;
  animation: toast-in 0.25s ease;
}
.toast.toast-out { animation: toast-out 0.22s ease forwards; }

@keyframes toast-in  {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0);    }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(30px); }
}

.toast-icon { flex-shrink: 0; }
.toast-msg { flex: 1; min-width: 0; }
.toast-clickable { cursor: pointer; }
.toast-clickable:hover { border-color: var(--info); }
/* Inline action button on a sticky toast (e.g. Acknowledge). */
.toast-btn {
  flex-shrink: 0; cursor: pointer; white-space: nowrap;
  padding: 4px 10px; border-radius: 6px; font: inherit; font-size: 12px; font-weight: 600;
  color: #fff; background: var(--accent); border: none;
}
.toast-btn:hover { filter: brightness(1.06); }
.toast-success .toast-icon { color: var(--success); }
.toast-error   .toast-icon { color: var(--danger); }
.toast-info    .toast-icon { color: var(--info); }
.toast-warning .toast-icon { color: var(--warning); }

/* ── Helpers ────────────────────────────────────────────── */
.hidden { display: none !important; }
.text-right { text-align: right; }
.text-muted { color: var(--text-secondary); }
.mt-4 { margin-top: 16px; }

/* ── Section page header ────────────────────────────────── */
.page-header {
  margin-bottom: 22px;
}
.page-header h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}
.page-header p {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ── Dashboard stat card links ─────────────────────────── */
.stat-card-link {
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.stat-card-link:hover {
  background: var(--bg-hover);
  border-color: var(--border-focus);
  transform: translateY(-1px);
}

/* ── Section header (title + action) ───────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

/* ── Card-wrapped table ─────────────────────────────────── */
.card-table {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 24px;
}
.card-table table { border-collapse: collapse; }
.card-table thead th { border-bottom: 1px solid var(--border); }
.card-table tbody tr:last-child td { border-bottom: none; }

/* ── Dashboard quick-links ──────────────────────────────── */
.quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.quick-link {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: background var(--transition), border-color var(--transition);
  cursor: pointer;
}
.quick-link:hover {
  background: var(--bg-hover);
  border-color: var(--border-focus);
}
.quick-link-icon {
  width: 38px; height: 38px;
  border-radius: var(--r);
  background: var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-hover);
  flex-shrink: 0;
}
.quick-link-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.quick-link-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Assignment Panel ───────────────────────────────────── */
.assign-section { margin-bottom: 22px; }
.assign-section:last-child { margin-bottom: 0; }
.assign-section-title {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.assign-list {
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 10px;
}
.assign-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  gap: 10px;
}
.assign-item:last-child { border-bottom: none; }
.assign-item-name { font-size: 13px; color: var(--text-primary); flex: 1; }
.assign-item-meta { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.assign-empty {
  padding: 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 10px;
}
.assign-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.assign-add-row .form-select {
  flex: 1;
  padding: 7px 28px 7px 10px;
  font-size: 13px;
}
.assign-readonly-note {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 6px;
}

/* ── Requirement Field Builder ──────────────────────────── */
.requirements-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.requirement-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.requirement-row-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.requirement-row-fields .form-row { gap: 8px; }
.requirement-required-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

/* ── FMCSA SAFER Lookup ─────────────────────────────────── */
.fmcsa-lookup-box {
  padding: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 16px;
}
.fmcsa-lookup-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fmcsa-lookup-or {
  font-size: 12px;
  color: var(--text-muted);
}
.fmcsa-snapshot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.fmcsa-snapshot-header {
  font-size: 14px;
  margin-bottom: 8px;
}
.fmcsa-snapshot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}
.fmcsa-snapshot-field {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12.5px;
}
.fmcsa-snapshot-label {
  font-size: 11px;
  color: var(--text-muted);
}
.fmcsa-snapshot-field.fmcsa-diff {
  background: var(--warning-bg);
  border-radius: 4px;
  padding: 3px 6px;
  margin: -3px -6px;
}
strong.fmcsa-diff, span.fmcsa-diff {
  background: var(--warning-bg);
  border-radius: 3px;
  padding: 0 4px;
}
.fmcsa-diff-legend {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fmcsa-diff-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--warning-bg);
  border: 1px solid var(--warning);
}

/* ── Roles & Permissions Matrix ──────────────────────────── */
.pm-card { padding: 0; overflow-x: auto; }

.pm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pm-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  font-weight: 600;
  white-space: nowrap;
}
.pm-label-col {
  text-align: left;
  min-width: 190px;
  position: sticky;
  left: 0;
  z-index: 10 !important;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
}
.pm-role-col {
  text-align: center;
  min-width: 110px;
}
.pm-add-col { min-width: 48px; }
.pm-role-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-hover);
}
.pm-role-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
.pm-role-btns {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 6px;
}
.pm-btn {
  padding: 3px 6px;
  font-size: 11px;
  gap: 3px;
}

.pm-group-row .pm-group-label {
  background: var(--bg-hover);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  position: sticky;
  left: 0;
}

.pm-perm-row td {
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.pm-perm-row:hover td { background: var(--bg-hover); }
.pm-action {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  padding: 6px 12px 6px 20px;
  position: sticky;
  left: 0;
  background: inherit;
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.pm-cell {
  text-align: center;
  padding: 6px 4px;
}
.pm-cb {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--accent);
}
.pm-cb:disabled { opacity: 0.4; cursor: wait; }

/* ── Routing / map planner ──────────────────────────────── */
.route-editor {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 16px;
  /* Stretch so the map card tracks the form column's height (the details panel
     grew taller than the old fixed map height once the vehicle-dims fields
     landed). The embedded planner already worked this way. */
  align-items: stretch;
  /* Trap the Leaflet map's internal z-indexes (panes ~400, controls ~1000) in
     their own stacking context so they can't paint over a body-level modal
     backdrop (z 100) on the standalone Plan Route page. The embedded planner
     gets the same via .order-route-planner; fullscreen adopts the modal inside
     and bumps it to z 2000 instead. */
  isolation: isolate;
}
@media (max-width: 900px) {
  .route-editor { grid-template-columns: 1fr; }
}
.route-form { padding: 16px; }
.geo-field { position: relative; }
.geo-dd {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.geo-opt {
  padding: 7px 10px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.geo-opt:hover { background: var(--bg-hover); }
.geo-msg {
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}
/* Saved-place suggestion row (name + pin + scope chip), shown above geocode hits. */
.geo-opt.place-opt {
  display: flex;
  align-items: center;
  gap: 6px;
}
.geo-opt.place-opt svg { flex: 0 0 auto; color: var(--accent); }
.geo-opt.place-opt .place-opt-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Origin/Destination field + save-to-place icon button. */
.geo-field-row { display: flex; align-items: flex-start; gap: 6px; }
.geo-field-row .geo-field { flex: 1 1 auto; }
.save-place-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  align-self: stretch;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  cursor: pointer;
}
.save-place-btn:hover { border-color: var(--accent); color: var(--accent-hover); }
/* Visibility scope chips (Places + Routes pages + suggestions). */
.vis-badge,
.place-vis-badge {
  flex: 0 0 auto;
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  border: 1px solid transparent;
}
.vis-badge.vis-public,   .place-vis-badge.vis-public   { background: rgba(16, 185, 129, 0.14); color: #059669; border-color: rgba(16, 185, 129, 0.35); }
.vis-badge.vis-internal, .place-vis-badge.vis-internal { background: rgba(59, 130, 246, 0.14); color: #2563eb; border-color: rgba(59, 130, 246, 0.35); }
.vis-badge.vis-private,  .place-vis-badge.vis-private  { background: rgba(107, 114, 128, 0.14); color: #4b5563; border-color: rgba(107, 114, 128, 0.35); }
.route-map-card { padding: 0; overflow: hidden; }
.route-map {
  width: 100%;
  /* Fill the (stretched) grid cell; the min keeps a usable map when the form
     column is short. Fullscreen and embedded selectors below override. */
  height: 100%;
  min-height: 560px;
  background: var(--bg-input);
}
/* Embedded planner (inside the Order screen's Route group) — a shorter map so
   it sits comfortably among the other order groups. */
/* Trap the embedded Leaflet map's internal z-indexes (panes ~400, controls ~1000)
   in their own stacking context so they can't paint over modals (backdrop z 100). */
.order-route-planner { width: 100%; isolation: isolate; }
.route-editor-embedded { grid-template-columns: 300px 1fr; align-items: stretch; }
/* Map fills its (stretched) grid cell so its height tracks the form beside it. */
.route-editor-embedded .route-map { height: 100%; min-height: 280px; }
/* Full-screened planner (browser Fullscreen API via the map's ⛶ control).
   Fullscreen elements default to a black backdrop — paint the app background,
   let the form column scroll, and give the map the full viewport height. */
.route-editor:fullscreen { background: var(--bg-base); padding: 14px; overflow: auto; }
/* A modal/confirm overlay is moved into the fullscreen planner (JS) so it shares
   the top layer — bump it above Leaflet's panes (~400) and controls (~1000),
   which otherwise paint over the backdrop's default z-index (100). */
.route-editor:fullscreen .modal-backdrop { z-index: 2000; }
.route-editor:fullscreen .route-map,
.route-editor-embedded:fullscreen .route-map { height: calc(100vh - 28px); min-height: 0; }
#rt-fullscreen { display: flex; align-items: center; justify-content: center; }
/* Click-to-open layer panel (custom control replacing Leaflet's hover-expand
   layers control — scales to many layers and supports groups). */
.layer-ctl { position: relative; }
#rt-layers-btn { display: flex; align-items: center; justify-content: center; }
.layer-panel {
  position: absolute; top: 0; right: 34px; width: 190px;
  max-height: 300px; overflow-y: auto;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); padding: 6px 0 8px;
}
.layer-panel-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--text-muted); padding: 8px 12px 3px;
}
.layer-row {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 12px; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.layer-row:hover { background: var(--bg-hover); }
.layer-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  flex: 0 0 auto;
}
/* Collapsible sub-list inside a layer group (e.g. per-state restrictions). */
.layer-subhead {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 12px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; user-select: none;
}
.layer-subhead:hover { background: var(--bg-hover); }
.layer-caret { width: 10px; flex: 0 0 auto; font-size: 10px; color: var(--text-muted); }
#rt-states-list .layer-row { padding-left: 28px; }
.layer-count { margin-left: auto; font-size: 10.5px; color: var(--text-muted); }
#rt-fullscreen.active { color: var(--accent); }
@media (max-width: 900px) {
  .route-editor-embedded { grid-template-columns: 1fr; }
}
.route-summary {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}
.route-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.route-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.route-stat-val { font-weight: 600; color: var(--text-primary); }
.route-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
/* Embedded (order screen) — the form column is narrow, so let the actions wrap:
   the save-status message gets its own full-width line above the buttons. */
.route-actions-embedded { flex-wrap: wrap; align-items: center; }
.route-actions-embedded .rt-save-status {
  flex: 1 1 100%; text-align: right; font-size: 12px; line-height: 1.3;
}
.route-actions-embedded .rt-save-status:empty { display: none; }
.route-actions-embedded .btn { white-space: nowrap; }
.state-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.state-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  background: var(--accent-dim);
  color: var(--accent-hover);
  border: 1px solid var(--border);
}
/* Leaflet waypoint markers (divIcon — no image assets needed) */
.wp-marker {
  background: var(--accent);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
.leaflet-tooltip.wp-tip {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  font-size: 11px;
  font-weight: 500;
  padding: 1px 6px;
}
.leaflet-tooltip.wp-tip::before { display: none; }
.wp-marker.wp-marker-hi {
  background: var(--accent-hover, var(--accent));
  box-shadow: 0 0 0 4px var(--accent-dim), 0 1px 5px rgba(0, 0, 0, 0.5);
}
/* Restriction the route passes THROUGH because the detour computation failed
   (enforcement_failed) — an unmissable pulsing red pin. */
.rr-viol-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dc2626;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  animation: rr-viol-pulse 1.6s ease-out infinite;
  cursor: pointer;
}
@keyframes rr-viol-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55), 0 1px 5px rgba(0, 0, 0, 0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0), 0 1px 5px rgba(0, 0, 0, 0.5); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0), 0 1px 5px rgba(0, 0, 0, 0.5); }
}
.route-map.insert-mode { cursor: crosshair; }

/* Floating "find a location" search box on the route map */
/* position + z-index so the results dropdown paints above the sibling zoom control */
.rt-find-control { width: 240px; max-width: 60vw; position: relative; z-index: 1001; }
.rt-find-control input {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.rt-find-control input:focus { outline: none; border-color: var(--border-focus); }
/* Distinct find pin (teardrop dot) — visually different from the blue waypoint dots */
.find-marker {
  background: #f59e0b;
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

/* Editor tabs (Details / Waypoints) */
.route-tabs {
  display: flex;
  gap: 4px;
  margin: -4px 0 14px;
  border-bottom: 1px solid var(--border);
}
.route-tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.route-tab:hover { color: var(--text-primary); }
.route-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}
.route-tab-panel[hidden] { display: none; }

/* Waypoints tab */
.wp-toolbar { margin-bottom: 8px; }
#rt-insert-toggle.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent-hover);
}
.wp-hint {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}
.wp-list { display: flex; flex-direction: column; gap: 4px; }
.wp-empty { font-size: 13px; color: var(--text-muted); margin: 4px 0; }
.wp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
}
.wp-row:hover { border-color: var(--accent); }
.wp-row-label {
  flex: 0 0 auto;
  min-width: 40px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-hover);
}
.wp-row-coords {
  flex: 1 1 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}
.wp-row-actions { flex: 0 0 auto; display: flex; gap: 2px; }
.wp-mustpass { flex: 0 0 auto; display: inline-flex; align-items: center; cursor: pointer; }
.wp-mustpass input { margin: 0; cursor: pointer; }
.wp-btn {
  appearance: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-input);
  color: var(--text-primary);
  cursor: pointer;
}
.wp-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-hover); }
.wp-btn:disabled { opacity: 0.35; cursor: default; }
.wp-btn-del:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }

/* Directions tab */
.route-stat-via {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
}
.dir-empty { font-size: 13px; color: var(--text-muted); margin: 4px 0; }
.hwy-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.hwy-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  background: var(--accent-dim);
  color: var(--accent-hover);
  border: 1px solid var(--border);
}
.hwy-arrow { color: var(--text-muted); font-size: 11px; }
.dir-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: dir;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dir-step {
  counter-increment: dir;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 8px 7px 30px;
  position: relative;
  font-size: 13px;
  border-radius: 6px;
}
.dir-step::before {
  content: counter(dir);
  position: absolute;
  left: 8px;
  top: 7px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-muted);
}
.dir-step:nth-child(odd) { background: var(--bg-elevated); }
.dir-step-text { flex: 1 1 auto; color: var(--text-primary); line-height: 1.4; }
.dir-step-dist {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Maintenance mode card (dashboard, API-key sessions only) ── */
.maint-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  margin-bottom: 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
  border-radius: 10px;
}
.maint-card.maint-on {
  background: var(--warning-bg);
  border-color: rgba(251, 191, 36, 0.35);
  border-left-color: var(--warning);
}
.maint-info { flex: 1 1 auto; min-width: 0; }
.maint-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.maint-card.maint-on .maint-title { color: var(--warning); }
.maint-desc {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.maint-state {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.maint-card.maint-on .maint-state { color: var(--warning); }

/* ── Login maintenance notice ───────────────────────────── */
.login-maint {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  margin-bottom: 20px;
  background: var(--warning-bg);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 10px;
  color: var(--warning);
}
.login-maint svg { flex: 0 0 auto; margin-top: 1px; }
.login-maint-title { font-size: 14px; font-weight: 600; }
.login-maint-text {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* ── Toggle switch ──────────────────────────────────────── */
.switch { flex: 0 0 auto; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  display: block;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.switch-thumb {
  display: block;
  width: 20px;
  height: 20px;
  margin: 2px;
  border-radius: 50%;
  background: var(--text-secondary);
  transition: transform 0.18s ease, background 0.18s ease;
}
.switch input:checked + .switch-track {
  background: var(--warning);
  border-color: var(--warning);
}
.switch input:checked + .switch-track .switch-thumb {
  transform: translateX(20px);
  background: #1a1205;
}
.switch input:focus-visible + .switch-track { border-color: var(--border-focus); }
.switch input:disabled + .switch-track { opacity: 0.5; cursor: progress; }

/* ── File management ─────────────────────────────────────── */
.card-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 14px;
}
.fm-upload-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.fm-upload-grid .form-group { margin-bottom: 0; }
.fm-queue { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.fm-queue-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 4px 8px;
  background: var(--bg-elevated);
  border-radius: var(--r-sm);
}

/* Drag-and-drop zone (page + in-form) */
.dropzone {
  margin-top: 12px;
  padding: 22px 16px;
  border: 1.5px dashed var(--border);
  border-radius: var(--r-sm);
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-input);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone.dropzone-sm { padding: 14px 12px; margin-top: 8px; font-size: 12.5px; }
.dropzone.dragover {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--text-primary);
}

/* In-form Files section */
.rec-files {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.rec-files-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.rec-files-list { display: flex; flex-direction: column; gap: 4px; }
.rec-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  padding: 5px 8px;
  background: var(--bg-elevated);
  border-radius: var(--r-sm);
}
.rec-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-file-meta { flex-shrink: 0; font-size: 11.5px; }

/* A displayed file name that doubles as a download link. */
.file-dl-link { color: var(--accent-hover); cursor: pointer; text-decoration: none; }
.file-dl-link:hover, .file-dl-link:focus-visible { text-decoration: underline; }
.rec-files-upload { margin-top: 10px; }
.rf-agencies-list { display: flex; flex-wrap: wrap; gap: 4px 14px; max-height: 132px; overflow-y: auto; padding: 2px 0; }
.rf-agency-opt { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-primary); cursor: pointer; }
.rf-agency-opt input { margin: 0; }

/* ══ Orders — dashboard table + working screen ══ */

tr.col-filters th { padding: 4px 8px 8px; background: var(--bg-elevated); }
.col-filter {
  width: 100%; box-sizing: border-box; padding: 4px 7px; font-size: 12px;
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--bg-input); color: var(--text-primary);
}
.col-filter:focus { outline: none; border-color: var(--border-focus); }
tr.order-row { cursor: pointer; }
tr.order-row:hover td { background: var(--bg-hover); }

/* Workspace tab strip */
.ws-tabs {
  display: flex; gap: 6px; align-items: center; overflow-x: auto;
  padding: 2px 0 10px; scrollbar-width: thin;
}
.ws-tab {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 6px 10px; font-size: 12.5px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg-surface); color: var(--text-secondary);
}
.ws-tab:hover { background: var(--bg-hover); }
.ws-tab.active {
  border-color: var(--accent); color: var(--text-primary);
  background: var(--accent-dim); font-weight: 600;
}
.ws-tab-lines { display: inline-flex; flex-direction: column; gap: 1px; overflow: hidden; }
.ws-tab-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-tab-sub {
  font-size: 11px; font-weight: 400; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}
.ws-tab-close {
  border: none; background: none; cursor: pointer; font-size: 11px;
  color: var(--text-muted); padding: 0 2px;
}
.ws-tab-close:hover { color: var(--danger); }
.ws-tab-plus { text-decoration: none; font-weight: 700; color: var(--text-muted); }

/* Active-order banner — the wrong-carrier guard */
.ws-banner {
  position: relative;
  border: 1px solid; border-radius: 10px; padding: 14px 18px; margin-bottom: 12px;
  color: #fff;
}
.ws-banner-carrier { font-size: 22px; font-weight: 700; letter-spacing: 0.3px; margin-top: 6px; }
/* "Download PDF" pill in the banner's upper-right corner. */
.ws-banner-pdf {
  position: absolute; top: 12px; right: 14px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 11px; border-radius: 6px; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: 0.2px;
  transition: background var(--transition, 140ms ease);
}
.ws-banner-pdf:hover { background: rgba(255, 255, 255, 0.28); }
.ws-banner-pdf:disabled { opacity: 0.6; cursor: default; }
/* Third-party billing flag — small, non-bold, inline right after the carrier
   name (a subtle billing cue against the dark banner). */
.ws-banner-billto {
  margin-left: 10px; font-size: 13px; font-weight: 400; letter-spacing: normal;
  color: #ffdada; opacity: 0.85;
}
/* Red DRAFT strip between the carrier banner and the action buttons */
.draft-banner {
  background: var(--danger); color: #fff; text-align: center;
  font-weight: 700; letter-spacing: 4px; font-size: 14px;
  border-radius: 8px; padding: 6px 0; margin-bottom: 12px;
}
.ws-banner-meta {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-top: 6px; font-size: 13.5px; color: rgba(255, 255, 255, 0.92);
}
.ws-banner-meta .td-muted { color: rgba(255, 255, 255, 0.65); }
/* Customer PO — click-to-reveal, sits just right of the order number. Reads as
   plain banner text; only swaps to an input once its display is clicked. */
.ws-banner-po { display: inline-flex; align-items: center; }
.ws-banner-po-display {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; letter-spacing: inherit;
}
.ws-banner-po-display:hover {
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.ws-banner-po-display.is-empty { color: rgba(255, 255, 255, 0.5); }
.ws-banner-po .ec-input { display: none; width: 120px; }
.ws-banner-po.editing .ec-input { display: inline-block; }
.ws-banner-po.editing .ws-banner-po-display { display: none; }
/* Load description + overall dims/weight — the emphasized bottom line. */
.ws-banner-load {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 8px; font-size: 17px; font-weight: 700; letter-spacing: 0.2px;
}
/* Copy buttons sit on the dark banner — override the light-theme muted color. */
.ws-banner .copy-btn { color: rgba(255, 255, 255, 0.7); }
.ws-banner .copy-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.15); }
.ws-banner .copy-btn.copied { color: #4ade80; }

.ws-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
/* Receive-permit shortcut strip — a distinct accent callout so it doesn't read
   as more of the neutral action buttons above it. */
.ws-receive-strip {
  margin-top: 2px;
  align-items: center;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  background: var(--bg-elevated);
  border-radius: var(--r-sm);
}
.ws-receive-label { font-size: 12px; font-weight: 700; color: var(--accent-hover); margin-right: 2px; }
/* Accent chips — clearly different from the ghost buttons in the top strip. */
.ws-receive-strip .btn {
  background: var(--accent-dim);
  color: var(--accent-hover);
  border: 1px solid var(--accent);
  font-weight: 600;
}
.ws-receive-strip .btn:hover:not(:disabled) { background: var(--accent); color: #fff; }

/* Summary groups */
.ord-groups {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}
.ord-group {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
}
.ord-group-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 8px;
}
/* Collapsible group (Route block) — reuses .ord-group styling with a clickable
   summary. The <details> marker is replaced by a rotating chevron. */
.ord-collapsible > summary { list-style: none; }
.ord-collapsible > summary::-webkit-details-marker { display: none; }
.ord-collapsible-summary {
  cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px;
  margin-bottom: 0;
}
.ord-collapsible[open] > .ord-collapsible-summary { margin-bottom: 8px; }
.ord-collapsible-summary::before {
  content: '▸'; font-size: 10px; color: var(--text-muted);
  transition: transform 0.12s ease;
}
.ord-collapsible[open] > .ord-collapsible-summary::before { transform: rotate(90deg); }
.ord-collapsible-summary:hover { color: var(--text-secondary); }
/* Copy-to-clipboard buttons next to VIN / plate / load fields. */
.copy-cell { display: inline-flex; align-items: center; gap: 3px; min-width: 0; }
.copy-cell .veh-input { flex: 1 1 auto; min-width: 0; }
.copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; padding: 2px; margin-right: 3px; border: none; background: none;
  color: var(--text-muted); border-radius: 4px; cursor: pointer; line-height: 0;
  vertical-align: middle;
}
.copy-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.copy-btn.copied { color: var(--success, #16a34a); }

/* Axle spacing profile diagram (side view, circles = tires) under the grid. */
.ord-axle-diagram { margin-top: 10px; color: var(--text-primary); }
.ord-axle-diagram:empty { display: none; }
.ord-axle-diagram svg { display: block; width: 100%; max-width: 50%; height: auto; max-height: 90px; margin: 0 auto; }
.ord-field {
  display: flex; align-items: baseline; gap: 10px; padding: 4px 0;
  font-size: 13.5px; border-bottom: 1px dashed var(--border);
}
.ord-field:last-child { border-bottom: none; }
.ord-field-label { flex: 0 0 130px; color: var(--text-muted); font-size: 12.5px; }
.req-dot { color: var(--warning); font-size: 9px; margin-left: 4px; vertical-align: super; cursor: help; }
.ord-flags { display: flex; flex-wrap: wrap; gap: 10px; }
.ord-flag { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; cursor: pointer; }
.ord-group-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }

/* Inline-editable cells — always-live inputs, not click-to-reveal */
.ec-input {
  font: inherit; padding: 2px 5px; border: 1px solid var(--border-focus);
  border-radius: 5px; background: var(--bg-input); color: var(--text-primary);
  width: 140px; max-width: 100%;
}
.ec-input.invalid { border-color: var(--danger); }
.ec-input.invalid:focus { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger-bg); }
.ec-input.saving { opacity: 0.6; }
.ec-input.saved { background: var(--success-bg); border-color: var(--success); transition: background 1s; }
.ec-input:disabled { opacity: 0.55; cursor: not-allowed; }
/* Hours-based permit start: one flatpickr datetime field (vendored flatpickr —
   calendar + time controls in a single popup). Wide enough for "Aug 12, 2026 12:30 PM". */
.ec-input.start-dt-input { width: 175px; }
/* Requested route is free text that can run long — give it more room than the
   140px default (matches the old read-only display width). */
.ec-input[data-field="requested_route"] { width: 200px; }
/* Permit list Type cell: short description on top, tag beneath in a smaller,
   muted monospace line. */
.permit-type-desc { font-size: 13px; }
.permit-type-tag { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
/* Compact flatpickr popup typography — the vendored default is 14px days/time
   with a 135% month header; the app runs denser than that. app.css loads after
   the vendored sheet, so these plain overrides win. */
.flatpickr-calendar { font-size: 12px; }
.flatpickr-time input { font-size: 12px; }
.flatpickr-current-month { font-size: 105%; }
.flatpickr-current-month .numInputWrapper input.cur-year { font-size: inherit; }
.flatpickr-weekday { font-size: 10px; }
/* "Now"/"Today" shortcut appended to date/date-time popups on the order page. */
.fp-now-btn {
  text-align: center; padding: 6px; cursor: pointer; font-size: 12px;
  font-weight: 600; color: var(--text-secondary);
  border-top: 1px solid var(--border); background: var(--bg-elevated);
  border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;
}
.fp-now-btn:hover { color: var(--text-primary); background: var(--bg-input); }
/* Load Description grows to fill the rest of its row (full block width); the
   "Trip & Fuel only" toggle sits on its own row above it. */
.ord-field .ec-input[data-field="load_description"] { flex: 1 1 auto; }
/* Load H/W/L are short dimension values — keep them narrow (default is 140px) so
   the "H × W × L @ weight lbs" row doesn't overflow the half-width Load block.
   The weight field keeps the default width. */
.ord-field .ec-input[data-field="load_height"],
.ord-field .ec-input[data-field="load_width"],
.ord-field .ec-input[data-field="load_length"] { width: 72px; }
.ord-tripfuel { white-space: nowrap; }

/* Vehicle / axle editable grids */
.grid-table th { font-size: 11px; }
.grid-table td { padding: 4px 6px; }
.veh-input, .ax-input {
  width: 100%; min-width: 44px; box-sizing: border-box; padding: 3px 5px;
  font-size: 12.5px; border: 1px solid transparent; border-radius: 4px;
  background: transparent; color: var(--text-primary);
}
/* VIN / plate inputs size to their content (not stretched to fill the cell) so the
   copy button sits right beside the value instead of floating at the far edge.
   Higher specificity than `.veh-input{width:100%}` and `.copy-cell .veh-input{flex:1 1 auto}`.
   22ch (border-box, less 10px padding) still shows a full 17-char VIN with cushion. */
.grid-table .copy-cell .veh-input[data-vfield="vin"]           { flex: 0 0 auto; width: 22ch; }
.grid-table .copy-cell .veh-input[data-vfield="license_plate"] { flex: 0 0 auto; width: 11ch; }
.veh-input:hover, .ax-input:hover { border-color: var(--border); }
.veh-input:focus, .ax-input:focus { outline: none; border-color: var(--border-focus); background: var(--bg-input); }
.veh-input.invalid { border-color: var(--danger); }
.veh-input.invalid:focus { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger-bg); }
/* Order-grid Make cell: a catalog select with an "Other…" escape hatch that
   reveals a free-text input beneath it (styled to match the veh-input cells). */
.veh-make-cell { min-width: 108px; }
.veh-make-select, .veh-make-other {
  width: 100%; min-width: 90px; box-sizing: border-box; padding: 3px 5px;
  font-size: 12.5px; border: 1px solid transparent; border-radius: 4px;
  background: transparent; color: var(--text-primary);
}
.veh-make-other { margin-top: 3px; }
.veh-make-select:hover, .veh-make-other:hover { border-color: var(--border); }
.veh-make-select:focus, .veh-make-other:focus { outline: none; border-color: var(--border-focus); background: var(--bg-input); }

/* Jurisdictions */
.jur-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jur-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  font-size: 12.5px; border: 1px solid var(--border); border-radius: 20px;
  background: var(--bg-elevated);
}
.jur-src { color: var(--accent); font-size: 11px; }
.jur-del { border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 10px; padding: 0; }
.jur-del:hover { color: var(--danger); }

/* Permits table */
.jur-head td {
  background: var(--bg-elevated); font-weight: 600; font-size: 12.5px;
  padding: 7px 12px;
}
.jur-head-label { margin-right: 12px; }
/* Per-jurisdiction collapse toggle (caret + clickable label). */
.jur-toggle {
  background: none; border: none; cursor: pointer; color: var(--text-secondary);
  font-size: 11px; line-height: 1; padding: 0 6px 0 0; vertical-align: middle;
}
.jur-toggle:hover { color: var(--accent); }
.jur-head-label[data-jur-toggle] { cursor: pointer; user-select: none; }
/* Applied-route roads through this jurisdiction, after the add-permit-type selector. */
.jur-head-roads { color: var(--text-muted); font-weight: normal; font-size: 12.5px; letter-spacing: 0; margin-left: 10px; }
.jur-head-roads::before { content: '— '; }
/* Add-permit-type selector sits inline, just right of the state label. */
.jur-head-actions { display: inline-flex; align-items: center; vertical-align: middle; }
.permit-status-sel {
  padding: 3px 6px; font-size: 12px; border: 1px solid var(--border);
  border-radius: 5px; background: var(--bg-input); color: var(--text-primary);
}
/* Brief highlight when a cell is updated in place by a live (realtime) update. */
@keyframes rt-flash-kf {
  from { background-color: var(--accent-dim, rgba(240, 89, 34, 0.18)); }
  to   { background-color: transparent; }
}
.rt-flash { animation: rt-flash-kf 1.1s ease-out; }
.jur-type-search {
  width: 200px; padding: 3px 8px; font-size: 12px;
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--bg-input); color: var(--text-primary); font-weight: normal;
}
.jur-type-search:focus { outline: none; border-color: var(--border-focus); }
.jur-type-opt {
  padding: 6px 10px; cursor: pointer; font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jur-type-opt:hover { background: var(--bg-hover); }
.jur-type-opt.jur-type-other { color: var(--text-muted); }
.jur-type-badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--warning); margin-left: 6px;
}
.jur-type-hint {
  padding: 6px 10px; font-size: 11.5px; color: var(--text-muted);
  border-top: 1px solid var(--border); font-style: italic;
}

/* Notes */
.notes-list { display: flex; flex-direction: column; gap: 8px; }
.note-row {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px;
  font-size: 13px; background: var(--bg-elevated);
}
.note-row.note-internal { border-style: dashed; }
.note-meta { font-size: 11.5px; color: var(--text-muted); margin-bottom: 3px; }
.note-body { word-break: break-word; }

/* Load + Notes side-by-side row (order screen). Load = left half, Notes = right
   half; Notes list scrolls internally, height capped to Load by JS (max-height
   below is the fallback). Wraps to stacked columns when the row is too narrow. */
.ord-load-notes-row {
  display: flex; gap: 12px; align-items: stretch;
  margin-top: 14px; flex-wrap: wrap;
}
.ord-load-notes-row > .ord-group,
.ord-load-notes-row > #order-notes-card { flex: 1 1 320px; }
/* Override the g() inline margin-top so the Load block's top aligns with Notes,
   and give Load 10px more height (deeper bottom padding, 12px → 22px). */
.ord-load-notes-row > .ord-group { margin-top: 0 !important; padding-bottom: 22px; }
.ord-load-notes-row > #order-notes-card { margin-top: 0; }
#order-notes-card { display: flex; flex-direction: column; min-height: 0; }
#order-notes-card .notes-list {
  overflow-y: auto; flex: 1 1 auto; min-height: 0; max-height: 340px;
}

/* Order Activity feed — capped to ~4-5 rows, scrolls internally. */
.ord-activity-list { overflow-y: auto; max-height: 270px; }

.note-row[data-note-id] { cursor: pointer; }
.note-row[data-note-id]:hover { border-color: var(--text-secondary); }
.note-row.note-unread { border-left: 3px solid var(--warning); }
.note-unread-dot { color: var(--warning); font-size: 9px; }
.note-action-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 6px; min-height: 20px;
}
.note-read-btn, .note-menu-btn {
  border: none; background: none; cursor: pointer; padding: 2px 6px;
  border-radius: 4px; line-height: 1; font-size: 12px; color: var(--text-muted);
}
.note-read-btn { border: 1px solid var(--border); color: var(--text-secondary); }
.note-read-btn:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.note-menu-btn { font-size: 16px; }
.note-menu-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.note-modal-body { white-space: pre-wrap; word-break: break-word; margin-top: 8px; }

/* Waivers + blockers */
.waiver-block {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px;
  margin-bottom: 8px; font-size: 13px;
}
.blocker-list { margin: 8px 0 8px 18px; font-size: 13.5px; color: var(--danger); }
.blocker-list li { margin-bottom: 5px; }

/* ── VIN validity signal (used wherever a VIN is edited/displayed) ──────── */
.form-input.invalid { border-color: var(--danger); }
.form-input.invalid:focus { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger-bg); }
.vin-invalid, .cell-invalid { border: 1px solid var(--danger); border-radius: 4px; padding: 0 4px; }

/* ── Error-outline invariant (regression guard, 2026-07-21) ──────────────────
   A field failing validation (the `.invalid` class — VIN check digit, a year
   that disagrees with the VIN, gross weight that doesn't reconcile with the axle
   weights, etc.) is ALWAYS outlined in the danger red, never the neutral
   focus/active border. The per-base-class rules above (.ec-input/.veh-input/
   .form-input) already do this; this catch-all covers every other validated
   control (axle-weight cells, selects, bare inputs) so a change to the neutral
   --border-focus can never quietly neutralise an error indicator. Keep red. */
.ax-input.invalid, .form-select.invalid, .filter-select.invalid,
.veh-make-select.invalid, .veh-make-other.invalid, .jur-type-search.invalid,
input.invalid, select.invalid, textarea.invalid { border-color: var(--danger); }
.ax-input.invalid:focus, .form-select.invalid:focus, .filter-select.invalid:focus,
input.invalid:focus, select.invalid:focus, textarea.invalid:focus {
  border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger-bg);
}

/* ── Legacy Import ─────────────────────────────────────── */
.li-banner {
  padding: 10px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 10px;
  border: 1px solid var(--border);
}
.li-banner-ok   { background: var(--success-bg); border-color: var(--success); }
.li-banner-new  { background: var(--accent-dim);  border-color: var(--accent); }
.li-banner-info { background: var(--accent-dim);  border-color: var(--accent); }
.li-banner-warn { background: var(--warning-bg);  border-color: var(--warning); }
.li-src {
  display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  padding: 1px 5px; border-radius: 4px; vertical-align: 1px;
  background: var(--accent-dim); color: var(--accent-hover);
}
.li-exists {
  font-size: 12px; font-weight: 600; color: var(--warning);
  background: var(--warning-bg); padding: 2px 8px; border-radius: 10px;
}
.li-vin-warn { font-size: 11.5px; color: var(--danger); font-weight: 600; margin-left: 6px; }
.li-veh-off { opacity: .5; }
.muted { color: var(--text-muted); }

/* ── Realtime connection dot (topbar) ─────────────────────────────────── */
.rt-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-muted);
}
.rt-dot.rt-on    { background: var(--success); }
.rt-dot.rt-off   { background: var(--text-muted); }
.rt-dot.rt-retry { background: var(--warning, #d97706); animation: rt-pulse 1.2s ease-in-out infinite; }
@keyframes rt-pulse { 50% { opacity: 0.35; } }

/* ── Password reset / login-with-code (login screen) ────────────────────── */
.reset-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; text-align: center; }
.login-alt-sep { color: var(--text-muted); margin: 0 6px; }
.reset-channel {
  display: inline-flex; align-items: center; gap: 6px;
  margin-right: 16px; font-size: 13.5px; cursor: pointer;
}
.reset-channel input { margin: 0; }

/* ── Announcement banners ───────────────────────────────────────────────── */
.banner-strip { display: flex; flex-direction: column; }
.banner-strip:empty { display: none; }
.banner-strip-login { margin-bottom: 14px; gap: 8px; }

.banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  border-left: 4px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.banner-strip-login .banner { border-radius: var(--r-sm, 6px); border-bottom: none; }
.banner-icon { flex-shrink: 0; display: flex; margin-top: 1px; }
.banner-content { flex: 1; min-width: 0; }
.banner-title { font-weight: 600; }
.banner-msg { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.banner-link {
  flex-shrink: 0; align-self: center; white-space: nowrap;
  font-weight: 600; font-size: 12.5px; text-decoration: none; color: inherit;
  padding: 4px 10px; border: 1px solid currentColor; border-radius: 99px; opacity: 0.9;
}
.banner-link:hover { opacity: 1; }
.banner-close {
  flex-shrink: 0; align-self: flex-start; background: none; border: none; cursor: pointer;
  color: var(--text-secondary); font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 4px;
}
.banner-close:hover { color: var(--text-primary); background: rgba(127,127,127,0.12); }

/* Per-type accent (icon + left border tinted; subtle bg wash). */
.banner-announcement { border-left-color: var(--success); background: var(--success-bg); }
.banner-announcement .banner-icon { color: var(--success); }
.banner-information   { border-left-color: var(--info);    background: var(--info-bg); }
.banner-information .banner-icon { color: var(--info); }
.banner-warning       { border-left-color: var(--warning); background: var(--warning-bg); }
.banner-warning .banner-icon { color: var(--warning); }
.banner-important     { border-left-color: var(--danger);  background: var(--danger-bg); }
.banner-important .banner-icon { color: var(--danger); }

/* Admin-table type tag (icon + label pill). */
.banner-type-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.banner-type-tag svg { width: 15px; height: 15px; }
.banner-type-tag.banner-announcement { color: var(--success); background: none; border: none; }
.banner-type-tag.banner-information  { color: var(--info); }
.banner-type-tag.banner-warning      { color: var(--warning); }
.banner-type-tag.banner-important    { color: var(--danger); }

/* Permit Delivery recipient list (order work screen). */
.pd-row { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 13px; }
.pd-row + .pd-row { border-top: 1px solid var(--border); }
.pd-icon { flex: 0 0 auto; }
.pd-name { font-weight: 600; }
.pd-addr { color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.pd-badge { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 1px 7px; border-radius: 9px; border: 1px solid var(--border); }
.pd-badge-email { color: var(--info); }
.pd-badge-sms   { color: var(--success); }
.pd-badge-warn  { color: var(--warning); border-color: var(--warning); }
.pd-src { font-size: 10.5px; color: var(--text-muted); font-style: italic; }
.pd-del { margin-left: auto; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0 6px; font-size: 13px; }
.pd-del:hover { color: var(--danger); }

/* ── Conditions (admin catalog page + send-dialog checklist) ── */
.cond-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cond-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  font-size: 11.5px; border: 1px solid var(--border); border-radius: 20px;
  background: var(--bg-elevated); white-space: nowrap;
}
.cond-chip-req {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 0 5px; border-radius: 9px; border: 1px solid var(--border);
}
.cond-chip-req-always      { color: var(--warning); border-color: var(--warning); }
.cond-chip-req-conditional { color: var(--text-muted); }
/* "required" tag on an always-included condition row in the send dialog. */
.pd-badge-req { color: var(--warning); border-color: var(--warning); }
.pd-cond-title { font-size: 12.5px; font-weight: 600; margin: 12px 0 4px; }

/* ── File chooser (openFileChooser) — explorer-style picker overlay ── */
.fc-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 18, 0.80);
  backdrop-filter: blur(3px);
  z-index: 150; /* above .modal-backdrop (100) so it stacks over an open modal */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.fc-box {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 900px;
  height: min(70vh, 640px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: modal-in 0.18s ease;
}
.fc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.fc-header h3 { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0; }
.fc-x {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 4px; border-radius: var(--r-sm);
  font-size: 14px; line-height: 1;
}
.fc-x:hover { color: var(--text-primary); }
.fc-toolbar {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.fc-body { display: flex; flex: 1; min-height: 0; }
.fc-tree {
  width: 300px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  padding: 8px;
  position: relative;
}
.fc-files { flex: 1; overflow-y: auto; padding: 8px; position: relative; }
.fc-node-hdr, .fc-record, .fc-file {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  user-select: none;
}
.fc-node-hdr:hover, .fc-record:hover, .fc-file:hover { background: var(--bg-elevated); }
.fc-node-hdr svg, .fc-record svg, .fc-file svg { flex-shrink: 0; color: var(--text-muted); }
.fc-caret { display: flex; transition: transform 0.12s ease; }
.fc-node.open > .fc-node-hdr .fc-caret { transform: rotate(90deg); }
.fc-children { display: none; padding-left: 22px; }
.fc-node.open > .fc-children { display: block; }
.fc-record.active { background: var(--accent-dim); }
.fc-record.active svg { color: var(--accent); }
.fc-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-count {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border-radius: 8px;
  padding: 1px 7px;
  flex-shrink: 0;
}
.fc-file { padding: 8px; }
.fc-file.selected { background: var(--accent-dim); }
.fc-file.selected svg { color: var(--accent); }
.fc-file-main { display: flex; flex-direction: column; min-width: 0; }
.fc-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-file-meta { font-size: 11.5px; color: var(--text-muted); }
.fc-hint {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.fc-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Notification-template editor (CodeMirror + Jinja2 + live preview) ── */
.ft-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ft-toolbar .form-label { margin: 0; }
.ft-insertvar { width: auto; min-width: 160px; font-size: 12px; padding: 4px 8px; }
.ft-html-row { display: flex; gap: 12px; align-items: stretch; }
.ft-html-row .ft-editor-col, .ft-html-row .ft-preview-col { flex: 1 1 0; min-width: 0; }
.ft-preview-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 8px 0 4px; }
.ft-preview {
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-elevated); padding: 10px; margin: 0;
  overflow: auto; font-size: 12px; color: var(--text-primary);
}
.ft-preview-text { white-space: pre-wrap; font-family: var(--font-mono); min-height: 60px; max-height: 160px; }
.ft-preview-frame { width: 100%; height: 240px; background: #fff; }
.ft-sample { margin-top: 6px; }
.ft-sample-summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.ft-sample-hint { font-size: 12px; color: var(--text-muted); margin: 6px 0; }
.ft-sample-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ft-sample-row { display: flex; flex-direction: column; gap: 3px; }
.ft-sample-row label { font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); }
.ft-sample-val { font-size: 12px; padding: 5px 8px; }

/* CodeMirror surface themed to the app's light/orange tokens */
.CodeMirror {
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 12px; height: auto;
  background: var(--bg-input); color: var(--text-primary);
}
.CodeMirror-focused { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.CodeMirror-cursor { border-left-color: var(--accent); }
.CodeMirror-selected { background: var(--accent-dim); }
/* Jinja delimiters, highlighted over the base HTML/plain-text mode */
.cm-jinja-var     { color: var(--accent); font-weight: 600; }
.cm-jinja-tag     { color: #7c3aed; font-weight: 600; }   /* {% logic %} */
.cm-jinja-comment { color: var(--text-muted); font-style: italic; }