/* ── Variables ─────────────────────────────────────────────── */
:root {
  color-scheme: dark;
  --bg: #0f1117;
  --surface: #1a1d27;
  --surface-alt: #1f2333;
  --border: #2a2d3e;
  --border-light: #353849;
  --text: #e2e4f0;
  --text-muted: #7b7f9e;
  --accent: #f59e0b;
  --accent-hover: #d97706;
  --accent-text: #0f1117;
  --danger: #ef4444;
  --danger-hover: #dc2626;
  --status-pending-bg: #2a2d3e;
  --status-pending-text: #a1a3b5;
  --status-assigned-bg: #1e3a5f;
  --status-assigned-text: #60a5fa;
  --status-completed-bg: #14532d;
  --status-completed-text: #4ade80;
  --radius: 8px;
  --radius-sm: 4px;
  --shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Inter', sans-serif;
  background:
    radial-gradient(ellipse 900px 420px at 15% -10%, rgba(245,158,11,0.07), transparent 60%),
    radial-gradient(ellipse 900px 480px at 90% 110%, rgba(96,165,250,0.05), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.6;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* global scrollbar + selection */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
::selection { background: rgba(245,158,11,0.3); }

/* ── Navbar ────────────────────────────────────────────────── */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 56px;
  background: rgba(10,12,18,0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-brand {
  font-weight: 700;
  font-size: 16px;
  background: linear-gradient(100deg, var(--text) 30%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.02em;
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
}
.nav-links a {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 14px;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-links a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.nav-logout { color: var(--text-muted) !important; }

/* ── Layout ────────────────────────────────────────────────── */
.main-content { max-width: min(1600px, 96vw); margin: 0 auto; padding: 2rem; animation: page-in 0.25s ease; }
.section { margin-bottom: 2.5rem; }
.section-title {
  font-size: 19px; font-weight: 700; margin-bottom: 1rem; color: var(--text);
  display: inline-block; position: relative;
}
.section-title::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: 3px; width: 2.2rem;
  border-radius: 3px; background: linear-gradient(90deg, var(--accent), transparent);
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%), var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  animation: fade-in 0.2s ease;
}
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.form-card { max-width: 520px; }

/* ── Driver / Bus cards ─────────────────────────────────────── */
.entity-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%), var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  animation: fade-in 0.2s ease;
  transition: opacity 0.3s, transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.entity-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-light);
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
}
.entity-card.fading { opacity: 0; }
.entity-name { font-weight: 600; font-size: 15px; }
.entity-meta { color: var(--text-muted); font-size: 13px; }
.entity-id { font-family: monospace; font-size: 12px; color: var(--text-muted); }
.entity-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.75rem; }

/* ── Forms ─────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
label { font-weight: 500; font-size: 13px; color: var(--text); }
.hint { font-weight: 400; color: var(--text-muted); font-size: 12px; margin-left: 0.5rem; }
/* Every text-like input type must be listed. Anything missing falls back to the
   browser default — a white box on a dark form, which is why the Email field
   looked nothing like its neighbours. email/tel/password/search/url were all
   absent, affecting 9 fields across the app. */
input[type="text"],
input[type="number"],
input[type="datetime-local"],
input[type="date"],
input[type="time"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea {
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.55rem 0.75rem;
  font-family: inherit;
  font-size: 14px;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(245,158,11,0.15);
}
.input-prefix-wrap { display: flex; align-items: center; }
.input-prefix {
  background: var(--surface-alt);
  border: 1px solid var(--border-light);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: 0.55rem 0.65rem;
  color: var(--text-muted);
  font-size: 14px;
}
.input-prefix-wrap input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.form-error { color: var(--danger); font-size: 13px; margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; background: rgba(239,68,68,0.08); border-radius: var(--radius-sm); border: 1px solid rgba(239,68,68,0.2); }

/* ── Address grid ──────────────────────────────────────────── */
.address-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.address-grid input:first-child {
  grid-column: 1 / -1;
}
.address-grid-2 { grid-template-columns: 2fr 1fr; }

/* Two equal fields side by side. Distinct from .address-grid, whose
   `input:first-child { grid-column: 1 / -1 }` is deliberate for address rows
   (the street line spans the row) but wrong anywhere the first field is just a
   normal field — it made the email box full width while Phone sat half width
   beneath it, so Email looked unlike every other input on the form. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.address-grid-2 input:first-child { grid-column: unset; }

/* ── Stops ─────────────────────────────────────────────────── */
.stop-row { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.stop-row:last-child { border-bottom: none; }
.stop-address-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.stop-address-grid .stop-street { grid-column: 1 / -1; }
.stop-address-grid-2 { grid-template-columns: 2fr 1fr; }
.stop-address-grid-2 .stop-street { grid-column: unset; }
.stop-time-row { display: flex; align-items: center; gap: 0.75rem; }
.stop-time-row .stop-time { width: 210px; }
.stop-time-label { font-size: 12px; color: var(--text-muted); }
.stop-row-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.stop-row-label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.stop-remove { background: none; border: 1px solid var(--border-light); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; padding: 0.3rem 0.6rem; font-size: 12px; transition: color 0.15s, border-color 0.15s; }
.stop-remove:hover { color: var(--danger); border-color: var(--danger); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.15s, opacity 0.15s;
}
.btn { transition: background 0.15s, opacity 0.15s, transform 0.12s, box-shadow 0.15s; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(180deg, #fbbf24, var(--accent));
  color: var(--accent-text);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--accent), var(--accent-hover));
  box-shadow: 0 4px 16px rgba(245,158,11,0.3);
}
.btn-secondary { background: var(--surface-alt); color: var(--text); border: 1px solid var(--border-light); }
.btn-secondary:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); box-shadow: 0 3px 12px rgba(0,0,0,0.3); }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid rgba(239,68,68,0.3); }
.btn-danger:hover:not(:disabled) { background: rgba(239,68,68,0.1); border-color: var(--danger); }
.btn-sm { padding: 0.35rem 0.75rem; font-size: 13px; }
.btn-block { width: 100%; justify-content: center; }

/* ── Toggle ────────────────────────────────────────────────── */
.toggle-wrap { display: flex; align-items: center; gap: 0.5rem; }
.toggle-wrap span { font-size: 13px; color: var(--text-muted); }
.toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--border-light);
  border-radius: 22px;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  left: 3px; top: 3px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.toggle input:checked + .toggle-slider { background: var(--accent); box-shadow: 0 0 10px rgba(245,158,11,0.4); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); background: #fff; }

/* ── Status badges ─────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}
.badge-pending { background: var(--status-pending-bg); color: var(--status-pending-text); }
.badge-assigned { background: var(--status-assigned-bg); color: var(--status-assigned-text); }
.badge-completed { background: var(--status-completed-bg); color: var(--status-completed-text); }

/* ── Table ─────────────────────────────────────────────────── */
.table-wrap { padding: 0; overflow-x: auto; border-radius: 10px; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.data-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); font-size: 14px; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
.data-table tbody tr:hover td { background: var(--surface-alt); }

/* ── Notification ──────────────────────────────────────────── */
.notification {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  z-index: 999;
  box-shadow: var(--shadow);
  animation: fade-in 0.2s ease;
}
.notification.success { background: var(--status-completed-bg); color: var(--status-completed-text); border: 1px solid #166534; }
.notification.error { background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.3); }
.notification.hidden { display: none; }

/* ── Spinner ───────────────────────────────────────────────── */
.spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: var(--accent-text);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}
.spinner.hidden { display: none; }

/* ── Order detail ──────────────────────────────────────────── */
.detail-header { margin-bottom: 1.5rem; }
.detail-header h1 { font-size: 22px; font-weight: 700; }
.detail-section { margin-bottom: 1.5rem; }
.detail-section h2 { font-size: 15px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.5rem; }
.detail-field { display: flex; flex-direction: column; gap: 0.2rem; }
.detail-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.detail-value { font-size: 14px; color: var(--text); }
.stops-list { display: flex; flex-direction: column; gap: 0.5rem; }
.stop-item { padding: 0.5rem 0.75rem; background: var(--surface-alt); border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: 13px; }
.stop-item .stop-addr { font-weight: 500; }
.stop-item .stop-sched { color: var(--text-muted); font-size: 12px; }
.ai-card { border-left: 3px solid var(--accent); }
.route-section { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1rem; background: var(--surface); }
.route-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--accent); }
.route-section-label { font-weight: 700; font-size: 14px; color: var(--accent); }
.route-card { border-left: 3px solid var(--border); }
.route-count-hint { font-size: 13px; font-weight: 400; color: var(--text-muted); }
.bus-assignment-row { padding: 0.75rem 0; border-bottom: 1px solid var(--border-light); }
.bus-assignment-row:last-of-type { border-bottom: none; }
.bus-assignment-header { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 0.5rem; }
.total-price-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0 0.25rem; border-top: 2px solid var(--border); margin-top: 0.25rem; }
.total-price-label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.total-price-value { font-size: 20px; font-weight: 700; color: var(--accent); }
.ai-reasoning { font-size: 13px; color: var(--text-muted); font-style: italic; line-height: 1.5; margin: 0.75rem 0; }
.confidence-bar-wrap { margin-bottom: 1rem; }
.confidence-label { font-size: 12px; color: var(--text-muted); margin-bottom: 0.25rem; }
.confidence-bar { height: 6px; background: var(--border-light); border-radius: 6px; overflow: hidden; }
.confidence-fill { height: 100%; background: var(--accent); border-radius: 6px; transition: width 0.5s ease; }
.action-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.override-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.override-section h3 { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.override-selects { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.override-selects select { flex: 1; min-width: 180px; }
.completed-banner { background: var(--status-completed-bg); border: 1px solid #166534; border-radius: var(--radius); padding: 1rem 1.25rem; color: var(--status-completed-text); font-weight: 600; }
.price-big { font-size: 24px; font-weight: 700; color: var(--accent); }
.loading-msg { color: var(--text-muted); font-size: 13px; margin-top: 0.5rem; }
.loading-placeholder { color: var(--text-muted); padding: 1rem 0; text-align: center; }

/* ── Animations ────────────────────────────────────────────── */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Fancy picker (select[data-fancy]) ─────────────────────── */
.fp-wrap { position: relative; flex: 1; min-width: 0; }
.fp-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.fp-trigger {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius);
  color: var(--text); font-family: inherit; font-size: 14px; text-align: left;
  padding: 0.45rem 0.65rem; cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fp-trigger:hover { border-color: var(--accent); }
.fp-wrap.fp-open .fp-trigger { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(245,158,11,0.15); }
.fp-trigger .fp-ph { color: var(--text-muted); }
.fp-chev { margin-left: auto; color: var(--text-muted); font-size: 0.75rem; transition: transform 0.18s; }
.fp-wrap.fp-open .fp-chev { transform: rotate(180deg); color: var(--accent); }

.fp-ava {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
}
.fp-ava-bus { background: rgba(245,158,11,0.15); font-size: 1rem; }

.fp-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.fp-main { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-sub { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fp-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
  background: var(--surface); border: 1px solid var(--border-light); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  opacity: 0; transform: translateY(-6px) scale(0.98); pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.fp-wrap.fp-open .fp-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.fp-searchwrap { padding: 0.5rem 0.5rem 0.25rem; }
.fp-search {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-family: inherit; font-size: 13px;
  padding: 0.4rem 0.6rem; outline: none;
}
.fp-search:focus { border-color: var(--accent); }

.fp-list { max-height: 260px; overflow-y: auto; padding: 0.35rem; }
.fp-list::-webkit-scrollbar { width: 8px; }
.fp-list::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 8px; }
.fp-opt {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.55rem;
  border-radius: 8px; cursor: pointer;
}
.fp-opt:hover, .fp-opt.fp-focus { background: var(--surface-alt); }
.fp-opt.fp-selected { background: rgba(245,158,11,0.10); }
.fp-check { margin-left: auto; color: var(--accent); font-weight: 700; }
.fp-empty { padding: 0.8rem; color: var(--text-muted); font-size: 0.85rem; text-align: center; }


/* ── Visual leg editor (order/route editing) ─────────────────────────── */
.leg-chain {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
  border: 1px solid var(--border); border-radius: 14px; padding: .75rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%), var(--surface);
}
.leg-ins {
  border: 1px dashed var(--border-light); background: var(--surface-alt);
  color: var(--accent); border-radius: 50%; width: 28px; height: 28px;
  cursor: pointer; flex-shrink: 0; font-size: .95rem; line-height: 1;
  transition: transform .12s, border-color .12s, background .12s;
}
.leg-ins:hover {
  border-color: var(--accent); background: rgba(245,158,11,0.14);
  transform: scale(1.12);
}
.lev {
  display: inline-flex; flex-direction: column; gap: 4px;
  border-radius: 12px; padding: .5rem .6rem; min-width: 195px;
  background: var(--surface-alt); border: 1px solid var(--border-light);
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
  transition: border-color .15s, box-shadow .15s;
}
.lev:not(.lev-fixed):focus-within {
  border-color: var(--accent); box-shadow: 0 0 0 2px rgba(245,158,11,0.14);
}
.lev-fixed { opacity: .8; border-style: dashed; }
.lev-badge { font-size: .6rem; font-weight: 700; letter-spacing: .06em; color: var(--accent); }
.lev-fixed .lev-badge { color: var(--text-muted); }
.lev input { width: 100%; padding: .32rem .5rem; font-size: .8rem; }
.lev .lev-extras { display: flex; gap: .3rem; }
.lev .lev-extras input { font-size: .74rem; padding: .25rem .4rem; }
.lev-x {
  border: none; background: none; color: var(--text-muted);
  cursor: pointer; font-size: .8rem; padding: 0 .1rem; transition: color .12s;
}
.lev-x:hover { color: #ef4444; }

/* Fields pre-filled from a customer change request — review before confirming */
.field-proposed, .lev.lev-proposed {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 2px rgba(96,165,250,0.22) !important;
}

/* Editable Leg B endpoints on the New Route form — mirror Leg A until typed in */
.lev.lev-end { border-style: dashed; }
.lev.lev-end .lev-addr { min-width: 200px; }

/* Landing on a conflict from an alert's Resolve button flashes the card. */
.conflict-card:target { animation: conflict-flash 1.6s ease-out 1; scroll-margin-top: 80px; }
@keyframes conflict-flash {
  0%   { box-shadow: 0 0 0 3px #ef4444; }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* Message-status chips (Reviews / Orders / School orders) */
.msg-chip { display:inline-block; font-size:.72rem; font-weight:600; padding:.2rem .6rem;
  border-radius:999px; border:1px solid; text-decoration:none; white-space:nowrap; }
.msg-chip-new { background:rgba(96,165,250,0.18); color:#60a5fa; border-color:rgba(96,165,250,0.5); }
.msg-chip-wait { background:rgba(234,179,8,0.14); color:#eab308; border-color:rgba(234,179,8,0.4); }
.msg-chip-viewed { background:rgba(148,163,184,0.12); color:#94a3b8; border-color:rgba(148,163,184,0.35); }

/* ── Navigation feedback ─────────────────────────────────────────────────
   Full page loads otherwise look like the app has frozen. See js/progress.js. */
.nav-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 9999; opacity: 0; transition: opacity .18s ease;
  pointer-events: none; background: transparent;
}
.nav-progress.on { opacity: 1; }
.nav-progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #1a73e8, #60a5fa);
  box-shadow: 0 0 8px rgba(96,165,250,.7);
  /* Slow ease-out so it creeps convincingly while waiting on the server. */
  transition: width 2.4s cubic-bezier(.15,.85,.3,1);
}

/* Spinner inside the button that was pressed. */
button.is-loading, .btn.is-loading, input.is-loading {
  position: relative; color: transparent !important;
  pointer-events: none; opacity: .85;
}
button.is-loading::after, .btn.is-loading::after, input.is-loading::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: .9em; height: .9em; margin: -.45em 0 0 -.45em;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff; border-radius: 50%;
  animation: nav-spin .6s linear infinite;
}
@keyframes nav-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .nav-progress-fill { transition: none; }
  button.is-loading::after, .btn.is-loading::after, input.is-loading::after {
    animation-duration: 1.6s;
  }
}

/* Centred spinner for the slow actions (routing, the model, mail, payroll).
   A hairline bar isn't reassuring enough when something runs 10s+, and the
   dim layer also stops a second click landing mid-flight. */
.nav-overlay {
  position: fixed; inset: 0; z-index: 10000;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); backdrop-filter: blur(1.5px);
  /* No fade — see crew.css: a transition can't complete once the browser has
     committed to navigating, leaving a near-invisible overlay. */
  display: none;
}
.nav-overlay.on { display: flex; }
.nav-overlay-box {
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  padding: 1.6rem 2rem; border-radius: 14px;
  background: var(--surface, #1b1b1b); border: 1px solid var(--border, #2a2a2a);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.nav-overlay-label { font-size: .9rem; color: var(--text-muted, #9aa0a6); }
.nav-spinner {
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.14);
  border-top-color: var(--accent, #f59e0b);
  animation: nav-spin .75s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .nav-spinner { animation-duration: 2s; }
  .nav-overlay { backdrop-filter: none; }
}

/* Generic hidden helper.

   Templates use a bare `class="… hidden"` in 8 places, but only
   `.notification.hidden` and `.spinner.hidden` were ever defined — so
   `.form-error hidden` and `.loading-msg hidden` were never actually hidden.
   An EMPTY .form-error still paints its red background and border, which is
   the stray red bar above the Submit Order button, and the "Calculating routes
   and running dispatch" message showed before anything had been submitted.
   Declared last so it wins on source order; the JS toggles the class only,
   never inline display, so no !important is needed. */
.hidden { display: none; }