:root {
  color-scheme: light;
  --accent: #E8822E;
  --accent-text: #1E1F22;
  --fg: #1f2328;
  --muted: #6b7280;
  --border: #d0d7de;
  --bg: #f6f8fa;
  --card: #ffffff;
  --input-bg: #ffffff;
  --th-bg: #f0f2f4;
  --track: #eef0f2;
  --done: #166534;
  --danger-text: #991b1b;
}
:root[data-theme="dark"] {
  color-scheme: dark;   /* native date/time/number controls + scrollbars go dark */
  --fg: #e6e6e6;
  --muted: #9aa0a6;
  --border: #3a3d41;
  --bg: #1e1f22;
  --card: #2b2d30;
  --input-bg: #1e1f22;
  --th-bg: #34363a;
  --track: #3a3d41;
  --done: #4ade80;
  --danger-text: #f87171;
  /* accent (orange) is kept for both themes */
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--fg);
  background: var(--bg);
}
/* Form controls follow the theme (per-context rules add border/padding on top) */
input:not([type=checkbox]):not([type=radio]), select, textarea {
  background-color: var(--input-bg);
  color: var(--fg);
}
/* Theme toggle: SVG icons (font-independent). Moon in light mode (click ->
   dark), sun in dark mode (click -> light). */
.theme-toggle { display: inline-flex; align-items: center; padding: 4px; color: var(--muted); }
.theme-toggle:hover { color: var(--fg); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; background: var(--card); border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; text-decoration: none; color: var(--fg); }
.topbar nav { display: flex; align-items: center; gap: 12px; }
.who { color: var(--muted); }
.inline { display: inline; margin: 0; }
.content { max-width: 960px; margin: 24px auto; padding: 0 20px; }
/* The roster grid is far denser than any other page — give it more room. */
.content.wide { max-width: 1280px; }
.page-head { display: flex; align-items: center; justify-content: space-between; }

.btn {
  display: inline-block; padding: 8px 16px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--card); color: var(--fg);
  cursor: pointer; text-decoration: none; font-size: 15px;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn:hover { border-color: var(--accent); }
.link { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; font: inherit; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 28px; }
.login { max-width: 380px; margin: 60px auto; text-align: center; }
.login h1 { margin-top: 0; }
.muted { color: var(--muted); }

.grid { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.grid th, .grid td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.grid th { background: var(--th-bg); font-size: 13px; color: var(--muted); }
.grid tr:last-child td { border-bottom: none; }

.badge { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge-new { background: #eee; color: #555; }
.badge-uploaded { background: #dbeafe; color: #1e40af; }
.badge-geocoded { background: #fef3c7; color: #92400e; }
.badge-pushed { background: #dcfce7; color: #166534; }

.empty { text-align: center; color: var(--muted); padding: 48px 0; }

/* Forms */
.form label { display: block; margin-bottom: 16px; font-weight: 600; }
.form input[type=text], .form input[type=file],
.form input[type=email], .form select {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 6px; font: inherit; font-weight: 400;
}
/* A role dropdown / deactivate button inline in a table cell shouldn't stretch. */
.grid .inline select, .grid .inline { width: auto; display: inline-block; margin: 0; }
.row-inactive td { opacity: 0.55; }
.form small { display: block; margin-top: 4px; font-weight: 400; }
.form fieldset { border: 1px solid var(--border); border-radius: 8px; margin: 0 0 16px; padding: 12px 16px; }
.form legend { font-size: 13px; color: var(--muted); padding: 0 6px; }
.form .row { display: flex; gap: 16px; }
.form .row label { flex: 1; }
.actions { display: flex; gap: 10px; align-items: center; }
.step-nav { margin-top: 18px; }
.step-nav form { margin: 0; }
.rowlabel { margin: 12px 0 2px; font-size: 13px; font-weight: 600; color: var(--fg); }
.bbox-lookup { display: flex; gap: 8px; margin: 4px 0 6px; }
.bbox-lookup input { flex: 1; }
.bbox-error { display: block; margin-top: 4px; color: var(--danger-text); }

/* Review rows (editable + re-geocode) */
.review-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.rev-row {
  display: grid; grid-template-columns: minmax(180px, 1.2fr) 2fr auto;
  gap: 10px; align-items: center; margin: 0;
}
.rev-addr { padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; font: inherit; }
.rev-info { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev-actions { display: flex; gap: 6px; }
@media (max-width: 800px) {
  .rev-row { grid-template-columns: 1fr; }
}
.btn.danger { border-color: #dc2626; color: #dc2626; }
.btn.danger:hover { background: #dc2626; color: #fff; }

/* Detail */
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 16px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.steps { margin: 8px 0 0; padding-left: 20px; }
.steps li { margin: 8px 0; }
.steps li .btn.small, .kv dd .btn.small { vertical-align: baseline; margin-left: 4px; }
.steps li.done { color: var(--done); }
.steps li.todo { color: var(--muted); }
.card + .card, form + .card, .card + form { margin-top: 16px; }
h2 { font-size: 17px; margin-top: 0; }

/* Roster editor */
.rgrid {
  display: grid;
  /* All tracks fixed/fr (no `auto`) so the header and every row — which are
     SEPARATE grids — compute identical column widths and line up. `class` is
     kept as a hidden input (not shown) so it's not a column here. */
  /* last·first·address·dest·parent·phone·note·rides·amb·wc·status·actions */
  grid-template-columns: 1.3fr 1.3fr 2fr 1.3fr 1fr .85fr 1fr 96px 46px 46px 104px 156px;
  gap: 6px; align-items: center; margin-bottom: 0;
}
.rhead { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 8px; }
.rrow input, .rrow select {
  width: 100%; padding: 5px 6px; border: 1px solid var(--border);
  border-radius: 4px; font: inherit; font-size: 13px;
  background: var(--input-bg); color: inherit;
}
.rstatus { font-size: 12px; }
.rstatus .badge { font-size: 11px; padding: 2px 6px; }
.ractions { display: flex; gap: 4px; flex-wrap: nowrap; justify-content: flex-end; }
.ractions .btn { padding: 5px 8px; font-size: 13px; }
.add-row { margin-top: 10px; }
.rtoolbar { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.glist { list-style: none; margin: 10px 0 0; padding: 0; }
.glist li { padding: 6px 0; border-top: 1px solid var(--border); }
.glist li:first-child { border-top: none; }

/* Roster CSV tabs (client-side; the save form still wraps every row) */
.rtabs {
  display: flex; flex-wrap: wrap; gap: 2px; margin: 4px 0 14px;
  border-bottom: 1px solid var(--border);
}
.rtab {
  background: none; border: 1px solid transparent; border-bottom: none;
  border-radius: 6px 6px 0 0; padding: 7px 14px; margin-bottom: -1px;
  cursor: pointer; font: inherit; font-size: 14px; color: var(--muted);
}
.rtab:hover { color: var(--fg); }
.rtab.active {
  color: var(--fg); font-weight: 600;
  border-color: var(--border); border-bottom: 1px solid var(--card);
  background: var(--card);
}

/* per-passenger overrides + group defaults (Phase 5) */
.prow { margin-bottom: 6px; }
.rdest { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rdest.inherited { color: var(--muted); }
.rdest.ovr { font-weight: 600; }
.ractions .expand { padding: 5px 7px; font-size: 13px; }
.rdetail {
  margin: 2px 0 4px; padding: 8px 10px; border: 1px dashed var(--border);
  border-radius: 6px;
}
.rdetail .drow { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 6px; }
.rdetail label, .gcard label {
  font-size: 11px; color: var(--muted); display: flex; flex-direction: column; gap: 2px;
}
/* Time/date fields need enough width to show the whole value incl. a 12-hour
   AM/PM meridiem (they clip at the old narrow width). PM load is just a 2-digit
   number, so it stays small. */
.rdetail .drow.times label { width: 118px; }
.rdetail .drow.times label.gload { width: 66px; }
.rdetail .drow:first-child label { flex: 1 1 240px; }
.rdetail input, .gcard input {
  padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px;
  font: inherit; font-size: 13px; background: var(--input-bg); color: inherit;
}
.rdetail .drow.times input, .gcard .grow input { width: 100%; }

.gpanel { margin: 10px 0 16px; }
.gpanel h3 { margin: 0 0 8px; font-size: 15px; }
.gcard { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.gcard-top { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 6px; }
.gcard-top .btn.small { margin-left: auto; }   /* push Reupload to the right edge */
.gcard .gname { width: 260px; }
.gcard .gname input { width: 100%; }
.gcard .gdest { display: block; margin-bottom: 6px; }
.gcard .gdest input { width: 100%; max-width: 440px; }
.gcard .grow { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 8px; }
.gcard .grow label { width: 118px; }         /* full time incl. AM/PM meridiem */
.gcard .grow label.gdate { width: 150px; }   /* full date */
.gcard .grow label.gload { width: 66px; }    /* 2-digit number */

.rgrid.rrow, .rgrid.rhead { max-width: 100%; }
@media (max-width: 900px) {
  .rgrid { grid-template-columns: 1fr; }
  .rhead { display: none; }
  .rrow { border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
}

/* Job progress */
.progress { height: 10px; background: var(--track); border-radius: 999px; overflow: hidden; margin: 8px 0; }
.progress .bar { height: 100%; background: var(--accent); transition: width .3s ease; }
.progress .bar.indeterminate { width: 40%; animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; }
.flash-error { background: #fee2e2; color: #991b1b; }
.flash-success { background: #dcfce7; color: #166534; }
.flash-info { background: #dbeafe; color: #1e40af; }