/* Carrier Portal — Phase 1 scaffolding
   WBL brand palette per wbl_brand_colors memory:
     accent #F87040 (orange), muted #C8856B
   Dark theme, system font stack, no external dependencies. */

:root {
  --bg:        #0e1116;
  --bg-card:   #161b22;
  --bg-elev:   #1c232c;
  --bg-input:  #0b0f14;
  --border:    #2a313c;
  --border-strong: #3a414c;
  --text:      #e6edf3;
  --text-dim:  #9aa4ad;
  --text-faint:#6b7480;
  --accent:    #F87040;
  --accent-hi: #ff8458;
  --accent-mute: #C8856B;
  --ok:        #22c55e;
  --warn:      #f59e0b;
  --danger:    #ef4444;
  --radius:    10px;
  --radius-sm: 6px;
  --gap:       16px;
  --maxw:      1200px;
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.45;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); text-decoration: underline; }

/* ------- topbar ------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 5;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--text);
  font-weight: 600;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  background: var(--accent);
  color: #0e1116;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: 800;
  letter-spacing: 0.5px;
  font-size: 13px;
}
.brand-text { font-size: 15px; }

.topnav { display: flex; gap: 18px; flex: 1; }
.topnav a {
  color: var(--text-dim);
  font-weight: 500;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.topnav a:hover { color: var(--text); text-decoration: none; border-bottom-color: var(--accent-mute); }

.topbar-right { display: flex; align-items: center; gap: 14px; }
.mc-pill {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--text-dim);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: 999px;
}
.logout { color: var(--text-dim); font-size: 13px; }
.logout:hover { color: var(--accent); }

/* hide nav + mc on anon pages */
.nav-anon .topnav, .nav-anon .topbar-right { display: none; }

/* ------- page ------- */
.page {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px 24px 48px;
}
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.page-head h1 { margin: 0; font-size: 22px; font-weight: 600; }
.page-head .dim { font-size: 13px; }

/* ------- footer ------- */
.footer {
  border-top: 1px solid var(--border);
  padding: 14px 24px;
  color: var(--text-faint);
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* ------- cards / grids ------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: var(--gap);
}
.card h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--text); }
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
@media (max-width: 800px) {
  .two-col { grid-template-columns: 1fr; }
}

/* ------- KPI grid ------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-bottom: var(--gap);
}
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.kpi-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-faint); }
.kpi-value { font-size: 24px; font-weight: 600; margin: 4px 0 2px; color: var(--text); }
.kpi-sub { font-size: 12px; color: var(--text-dim); }

/* ------- window picker chips ------- */
.window-picker { display: flex; gap: 6px; }
.chip {
  font-size: 12.5px;
  color: var(--text-dim);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: 999px;
}
.chip:hover { color: var(--text); text-decoration: none; }
.chip.is-active {
  color: #0e1116;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

/* ------- banner ------- */
.banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--gap);
  font-size: 13.5px;
}
.banner--warn {
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: var(--text);
}
.banner-icon {
  background: var(--warn);
  color: #0e1116;
  font-weight: 800;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.banner-text { flex: 1; }
.banner-cta {
  font-weight: 600;
  font-size: 13px;
}

/* ------- tables ------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.data-table th, .data-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.data-table th {
  font-weight: 600;
  color: var(--text-dim);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table .empty-row td { text-align: center; padding: 28px 12px; }
.pager { padding-top: 10px; font-size: 12px; }

/* ------- search ------- */
.search-form { display: flex; gap: 6px; }
.search-form input[type="search"] {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 13px;
  min-width: 240px;
}

/* ------- auth cards ------- */
.auth-card {
  max-width: 460px;
  margin: 60px auto 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}
.auth-card--centered { text-align: center; }
.auth-card h1 { margin: 0 0 8px; font-size: 22px; font-weight: 600; }
.auth-card .lede { color: var(--text-dim); font-size: 14px; margin: 0 0 22px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label { font-size: 12.5px; color: var(--text-dim); }
.auth-form input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
}
.auth-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(248, 112, 64, 0.25);
}
.form-row { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.form-row > div { display: flex; flex-direction: column; gap: 6px; }
.auth-alt { color: var(--text-dim); font-size: 13px; margin-top: 18px; text-align: center; }

/* ------- buttons ------- */
button {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  cursor: pointer;
  border: 1px solid transparent;
}
button.primary {
  background: var(--accent);
  color: #0e1116;
}
button.primary:hover { background: var(--accent-hi); }
button.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
button.ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ------- map placeholder ------- */
.card--map .map-embed-placeholder,
.card--map-full .map-embed-placeholder {
  background: var(--bg-input);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 20px;
  text-align: center;
}
.card--map-full .map-embed-placeholder { min-height: 480px; }
.map-legend {
  list-style: none;
  padding: 14px 0 0;
  margin: 0;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  color: var(--text-dim);
  font-size: 13px;
}
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot--fresh { background: var(--ok); }
.dot--stale { background: var(--warn); }
.dot--missing { background: var(--text-faint); }

/* ------- misc ------- */
.dim { color: var(--text-dim); }
.link-cta { display: inline-block; margin-top: 10px; font-weight: 600; font-size: 13px; }
.link-back { font-size: 13px; color: var(--text-dim); }
.link-back:hover { color: var(--accent); text-decoration: none; }
.stop-list, .doc-list { list-style: none; padding: 0; margin: 0; }
.stop-list li, .doc-list li { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.stop-list li:last-child, .doc-list li:last-child { border-bottom: none; }
code {
  background: var(--bg-input);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--accent-mute);
}

/* ------- form errors (Phase 2) ------- */
.form-error {
  color: var(--danger);
  font-size: 12.5px;
  margin: -8px 0 0;
}
.form-error[data-show=""] { display: none; }
.form-error--general {
  margin: 0 0 16px;
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.40);
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--text);
}
.form-error--general[data-show=""] { display: none; }

/* ------- mini list (dashboard active summary) ------- */
.mini-list { list-style: none; padding: 0; margin: 0; }
.mini-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.mini-row:last-child { border-bottom: none; }
.mini-link { font-weight: 600; }
.mini-route { color: var(--text-dim); }
.pill {
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-dim);
  text-transform: capitalize;
}
.pill--dispatched { background: rgba(248, 112, 64, 0.15); border-color: rgba(248, 112, 64, 0.45); color: var(--accent); }
.pill--in-transit { background: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.45); color: var(--ok); }
.pill--completed  { color: var(--text-faint); }

.data-table th.num, .data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pager { padding-top: 12px; font-size: 12.5px; color: var(--text-dim); }
.pager a { font-weight: 600; }

/* ------- lease-on totals strip ------- */
.kpi-grid--narrow { grid-template-columns: repeat(4, 1fr); margin-top: -4px; }
.kpi-grid--narrow .kpi-value { font-size: 22px; }

/* lease-on 6-tile strip */
.kpi-grid--lease { grid-template-columns: repeat(6, 1fr); }
.kpi-grid--lease .kpi { padding: 12px 14px; }
.kpi-grid--lease .kpi-value { font-size: 20px; }
.kpi-grid--lease .kpi-label { font-size: 10.5px; }
@media (max-width: 1100px) { .kpi-grid--lease { grid-template-columns: repeat(3, 1fr); } }

/* ------- load detail page ------- */
.meta-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: var(--gap);
  font-size: 13px;
}
.meta-strip > div { display: flex; flex-direction: column; gap: 2px; }
.meta-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-faint); }
.meta-value { font-weight: 600; color: var(--text); }
@media (max-width: 900px) { .meta-strip { grid-template-columns: repeat(2, 1fr); } }

.stop-timeline { list-style: none; padding: 0; margin: 0; }
.stop {
  position: relative;
  padding: 12px 0 12px 22px;
  border-bottom: 1px solid var(--border);
}
.stop:last-child { border-bottom: none; }
.stop::before {
  content: ""; position: absolute; left: 6px; top: 18px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-faint);
}
.stop--pickup::before { background: var(--accent); }
.stop--delivery::before { background: var(--ok); }
.stop-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.stop-addr { font-size: 13px; margin-bottom: 6px; }
.stop-times { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; }
.stop-times span { white-space: nowrap; }

.doc-list { list-style: none; padding: 0; margin: 0; }
.doc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.doc-row:last-child { border-bottom: none; }
.doc-type { flex-shrink: 0; }
.doc-link { flex: 1; font-weight: 500; word-break: break-all; }
.doc-size { font-size: 12px; }

/* ------- trip P&L card ------- */
.pnl-card { padding: 18px 22px; }
.pnl-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pnl-table td { padding: 7px 0; }
.pnl-table .num { font-variant-numeric: tabular-nums; text-align: right; }
.pnl-table .pnl-sep td { border-bottom: 1px solid var(--border); padding: 0; }
.pnl-net td { font-weight: 600; padding-top: 10px; }
.pnl-net .pnl-amount { color: var(--accent); font-size: 15px; }
.you-badge {
  display: inline-block;
  background: var(--accent);
  color: #0e1116;
  font-size: 10.5px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  margin-left: 6px;
  vertical-align: 1px;
}
.you-badge[data-show=""] { display: none; }

/* sortable history headers */
.sort-link { color: var(--text-dim); text-decoration: none; }
.sort-link:hover { color: var(--text); }

/* mini live map iframe */
.mini-map-wrap { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); margin-bottom: 10px; background: #0b0d11; }
.mini-map-frame { display: block; width: 100%; height: 320px; border: 0; }

/* P&L credit row (positive money for invoicer) */
.pnl-credit .pnl-amount { color: var(--ok); }

/* status pill — cancelled */
.pill--cancelled { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.45); color: var(--danger); }
.pill--completed { color: var(--text-faint); }

/* TONU status pill */
.pill--tonu { background: rgba(192, 132, 252, 0.15); border-color: rgba(192, 132, 252, 0.45); color: #c084fc; }

/* admin Refresh button next to window picker */
.page-head-actions { display: flex; align-items: center; gap: 14px; }
.admin-refresh-form { margin: 0; padding: 0; }
.admin-refresh-form button {
  font-size: 12.5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border-strong);
  cursor: pointer;
}
.admin-refresh-form button:hover { border-color: var(--accent); color: var(--accent); }

.banner--ok {
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.45);
  color: var(--text);
}
.banner--ok .banner-icon {
  background: var(--ok);
  color: #0e1116;
}

/* admin owned-MC switcher (top of authed pages) */
.owned-switcher { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 18px; }
.owned-switcher .chip { font-size: 12px; padding: 4px 11px; }