/* ==========================================================================
   Nicolau Transport — auth & dashboard pages
   Builds on the design tokens in style.css (loaded first on every auth page).
   ========================================================================== */

.auth-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background:
    radial-gradient(60% 60% at 85% 10%, rgba(52, 211, 153, 0.12), transparent 70%),
    var(--color-bg);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6) var(--space-5);
}

.auth-brand {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-5);
}
.auth-brand img { height: 40px; width: auto; }

.auth-card h1 {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: var(--space-2);
}
.auth-card .auth-subtitle {
  text-align: center;
  margin-bottom: var(--space-5);
  color: var(--color-muted);
  font-size: 0.95rem;
}

.auth-links {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-4);
  font-size: 0.9rem;
}
.auth-links a { color: var(--color-teal-dark); font-weight: 500; }
.auth-links a:hover { text-decoration: underline; }

.auth-notice {
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: 0.9rem;
  margin-bottom: var(--space-4);
}
.auth-notice.error {
  background: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FECACA;
}
.auth-notice.success {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}
.auth-notice.warning {
  background: #FFFBEB;
  color: #92400E;
  border: 1px solid #FDE68A;
}

.auth-setup-block {
  max-width: 640px;
  margin: var(--space-7) auto;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.auth-setup-block code {
  background: var(--color-bg-alt);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

/* ==========================================================================
   Dashboard shell (admin + driver)
   ========================================================================== */
.dash-shell { min-height: 100dvh; background: var(--color-bg-alt); }

.dash-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-3);
}
.dash-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.dash-header-inner img { height: 34px; width: auto; }
.dash-user {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-3);
  font-size: 0.9rem;
  color: var(--color-muted);
}
.dash-user strong { color: var(--color-foreground); }

/* On a phone, "Signed in as X" + four buttons in one row was wide enough
   on its own to force the whole page's viewport wider than the screen
   (everything else then rendered zoomed-out to compensate) — wrapping
   fixes the overflow, but it's still a lot of clutter up top, so the
   signed-in label steps aside below this width and just leaves the
   actions themselves. */
@media (max-width: 640px) {
  .dash-user > span { display: none; }
}

.dash-main { padding-block: var(--space-6); }

.dash-tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  margin-block: var(--space-4) var(--space-5);
  /* Five tabs (Location/Analysis/Fleet/Costs/Invoices) don't all fit on a
     phone width — scroll sideways rather than wrapping onto a second row,
     which would break the underline styling across two lines. */
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}
.dash-tab { flex-shrink: 0; }
.dash-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-2);
  margin-bottom: -1px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-muted);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.dash-tab:hover { color: var(--color-foreground); }
.dash-tab.is-active { color: var(--color-teal-dark); border-bottom-color: var(--color-teal-dark); }

.dash-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.dash-panel h2 { font-size: 1.25rem; margin-bottom: var(--space-3); }
.dash-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-3);
}
.dash-panel-head h2 { margin-bottom: 0; }

.dash-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .dash-grid.two-col { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
}

table.driver-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.driver-table th {
  text-align: left;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
table.driver-table td {
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
table.driver-table tr:last-child td { border-bottom: none; }

.status-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}
.status-pill.active { background: #ECFDF5; color: #065F46; }
.status-pill.invited { background: #FFFBEB; color: #92400E; }
.status-pill.disabled { background: #F3F4F6; color: #4B5768; }

.dash-empty {
  text-align: center;
  color: var(--color-muted);
  padding: var(--space-5) 0;
  font-size: 0.92rem;
}

/* ==========================================================================
   DHL Dailies
   ========================================================================== */
.dhl-driver-row { cursor: pointer; }
.dhl-driver-row:hover { background: var(--color-bg-alt); }
.dhl-driver-row-arrow { color: var(--color-muted); text-align: right; }

.dhl-gmail-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* Collapsible sections. Nested one inside another, so the inner panel is
   inset a little further to make the hierarchy readable at a glance. */
.dhl-disclosure {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.dhl-disclosure .dhl-disclosure { background: var(--color-surface); }
.dhl-disclosure .form-row:last-of-type { margin-bottom: var(--space-3); }

/* Chevron that rotates to show open/closed state. */
#dhl-options-toggle-btn::after,
#dhl-query-toggle-btn::after,
#dhl-merge-toggle-btn::after {
  content: '';
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.55em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-0.1em, -0.1em);
  transition: transform var(--transition-fast);
}
#dhl-options-toggle-btn.is-open::after,
#dhl-query-toggle-btn.is-open::after,
#dhl-merge-toggle-btn.is-open::after {
  transform: rotate(-135deg) translate(-0.15em, -0.15em);
}

.dhl-query-hint {
  margin: var(--space-2) 0 0;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.dhl-table-scroll { overflow-x: auto; }
.dhl-summary-table { white-space: nowrap; }
.dhl-summary-table th[colspan] {
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
/* Plain (non-grouped) column headers, e.g. the postcode x size table's
   "Small"/"Medium"/... row — same table.driver-table th specificity problem
   as the subheader row below: needs to explicitly outrank it to right-align
   against the numeric data underneath instead of sitting left of it. */
table.dhl-summary-table thead th:not([colspan]):not(:first-child) {
  text-align: right;
}
/* table.driver-table th (0,1,2) outranks a plain .dhl-subheader-row th
   (0,1,1) and forces left-align, so "Days"/"Total" sat left of the
   right-aligned numbers under them. table.dhl-summary-table .dhl-subheader-row th
   (0,2,2) is deliberately more specific than both that rule and
   .dhl-summary-table th:first-child (0,2,1), so it wins regardless of
   source order. */
table.dhl-summary-table .dhl-subheader-row th {
  font-size: 0.72rem;
  color: var(--color-muted);
  text-align: right;
  padding-top: var(--space-1);
}
.dhl-summary-table td { text-align: right; }
.dhl-summary-table td:first-child,
.dhl-summary-table th:first-child { text-align: left; }

.dhl-back-link {
  background: none;
  border: none;
  color: var(--color-teal-dark);
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: var(--space-3);
  cursor: pointer;
}
.dhl-back-link:hover { text-decoration: underline; }

/* Capped rather than filling the panel: at full width the day cells stretch
   into large squares that dwarf the breakdown underneath. */
.dhl-calendar { max-width: 340px; }

.dhl-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.dhl-cal-weekdays,
.dhl-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.dhl-cal-weekdays {
  margin-bottom: var(--space-2);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  text-align: center;
}
.dhl-cal-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--color-muted);
  position: relative;
}
.dhl-cal-cell.is-empty { visibility: hidden; }
.dhl-cal-cell.has-data {
  color: var(--color-foreground);
  background: var(--color-bg-alt);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.dhl-cal-cell.has-data:hover,
.dhl-cal-cell.has-data:focus-visible {
  background: rgba(13, 148, 136, 0.14);
}
.dhl-cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-teal-dark);
  margin-top: 2px;
}

.dhl-cal-tooltip {
  position: absolute;
  z-index: 1000;
  transform: translate(-50%, -100%);
  background: var(--color-navy);
  color: #fff;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast);
}
.dhl-cal-tooltip.is-visible { opacity: 1; visibility: visible; }

/* Breathing room above the breakdown when it's scrolled to on date click,
   so it doesn't land flush against the top of the viewport. */
#dhl-day-breakdown-mount { scroll-margin-top: var(--space-4); }

.dhl-day-summary { margin-top: var(--space-5); margin-bottom: var(--space-4); }
.dhl-day-summary h3 { margin-bottom: var(--space-3); }
.dhl-day-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
}
.dhl-stat {
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dhl-stat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); }
.dhl-stat-value { font-weight: 600; }
.dhl-stat-total { color: var(--color-teal-dark); font-size: 1.1rem; }

/* ==========================================================================
   Analysis tab
   ========================================================================== */
.dhl-trend-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
  margin-bottom: var(--space-4);
}
.dhl-trend-toolbar .form-row { min-width: 220px; }
.dhl-trend-toolbar select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--color-surface);
}

.dhl-driver-checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
}
.dhl-driver-checks .checkbox-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; }

.checkbox-label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.dhl-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* Fixed, not min-height: with maintainAspectRatio:false the canvas fills
   whatever height this container reports, so it needs a real number rather
   than a floor — otherwise the chart has no basis for how tall to be. */
.dhl-chart-wrap { position: relative; height: 260px; }
@media (max-width: 640px) { .dhl-chart-wrap { height: 220px; } }

.dhl-anomaly-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}
.dhl-anomaly-pill.high { background: #FFFBEB; color: #92400E; }
.dhl-anomaly-pill.low { background: #FEF2F2; color: #991B1B; }

.dhl-driver-initials {
  color: var(--color-teal-dark);
  font-size: 0.8em;
  letter-spacing: 0.02em;
}

/* Review column on the postcode/size "Other" rows sits alongside numeric
   money columns, which are right-aligned by .dhl-summary-table td; needs its
   own selector to override that back to a centered action column. */
.dhl-summary-table td.dhl-review-cell {
  text-align: center;
  white-space: nowrap;
}
.dhl-summary-table td.dhl-seen-cell {
  text-align: left;
  white-space: nowrap;
  font-size: 0.8em;
  color: var(--color-muted);
}
/* Compact "last seen" summary — the full sighting history (every report
   date + driver) is only a hover away via the title attribute, instead of
   listing every date inline. */
.dhl-seen-summary {
  cursor: help;
  border-bottom: 1px dashed currentColor;
}
/* Flags a sector+size whose paid rate has changed over time, right inside
   the Other table's own cells — the tooltip (native title attribute) names
   the report the new rate first showed up in, for a manual Gmail check. */
.dhl-rate-change {
  border-radius: 3px;
  padding: 1px 4px;
  cursor: help;
  border-bottom: 1px dashed currentColor;
}
.dhl-rate-change.up { color: #15803D; background: #F0FDF4; }
.dhl-rate-change.down { color: #B91C1C; background: #FEF2F2; }
.dhl-edit-btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface, #fff);
  border-radius: var(--radius-sm, 4px);
  width: 26px;
  height: 26px;
  line-height: 1;
  font-size: 0.9rem;
  cursor: pointer;
  margin: 0 2px;
  padding: 0;
  color: var(--color-teal-dark);
}
.dhl-edit-btn:hover { background: #F0FDF9; border-color: var(--color-teal-dark); }
.dhl-edit-status-select {
  font-size: 0.78rem;
  padding: 2px 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
}
.dhl-edit-save-btn, .dhl-edit-cancel-btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface, #fff);
  border-radius: var(--radius-sm, 4px);
  padding: 2px 8px;
  font-size: 0.72rem;
  cursor: pointer;
  margin-left: 2px;
}
.dhl-edit-save-btn { color: #15803D; border-color: #15803D; }
.dhl-edit-save-btn:hover { background: #F0FDF4; }
.dhl-edit-cancel-btn { color: var(--color-muted); }

/* A postcode imported within the last 24 hours — fades back to normal on
   its own once a day passes, no separate "seen it" action needed. */
tr.dhl-other-row.is-new { background: #EFF6FF; }
tr.dhl-other-row.is-new:hover { background: #DBEAFE; }
.dhl-new-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  background: #2563EB;
  border-radius: var(--radius-pill);
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}
.dhl-decision-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  vertical-align: middle;
}
.dhl-decision-badge.approved { background: #F0FDF4; color: #15803D; }
.dhl-decision-badge.rejected { background: #FEF2F2; color: #B91C1C; }
tr.dhl-other-row.is-rejected td:not(.dhl-review-cell) { opacity: 0.5; }

/* Collapsible Analysis panels: the h2/head is now a full-width button, and
   .dash-panel's own padding still applies since the button/body sit inside
   it unchanged — only Trends & comparison starts expanded (see dhl-analysis.js). */
.dhl-panel-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: var(--space-4);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.dhl-panel-toggle h2 { margin-bottom: 0; }
.dhl-panel-toggle:hover h2 { color: var(--color-teal-dark); }
.dhl-panel-chevron {
  transition: transform 0.15s ease;
  color: var(--color-muted);
  font-size: 0.9rem;
  flex-shrink: 0;
  margin-left: var(--space-3);
}
.dhl-panel-toggle[aria-expanded="true"] .dhl-panel-chevron { transform: rotate(180deg); }

/* Exclamation badge on the collapsed Anomaly flags header — cleared the
   moment the admin opens the panel, reappears only for a genuinely new flag. */
.dhl-anomaly-alert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #DC2626;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  margin-left: var(--space-2);
  vertical-align: middle;
}
/* [hidden] (0,1,0) ties with the plain class rule above (0,1,0) on
   specificity, and author styles win that tie — so `display: inline-flex`
   above was overriding the browser's default `[hidden] { display: none }`
   and keeping the badge visible even once JS set hidden=true. This selector
   is more specific and restores the hide. */
.dhl-anomaly-alert-badge[hidden] { display: none; }

/* ---------------------------------------------------------------- Fleet */

.fleet-vehicle-row { cursor: pointer; }
.fleet-vehicle-row:hover { background: var(--color-bg-alt); }

.fleet-expiry-pill {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.fleet-expiry-pill.ok { background: var(--color-bg-alt); color: var(--color-muted); }
.fleet-expiry-pill.soon { background: #FFFBEB; color: #92400E; }
.fleet-expiry-pill.expired { background: #FEF2F2; color: #B91C1C; }
.fleet-expiry-pill.none { background: var(--color-bg-alt); color: var(--color-muted); }

.fleet-reminder-banner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.fleet-reminder-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.fleet-reminder-pill.soon { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.fleet-reminder-pill.expired { background: #FEF2F2; color: #B91C1C; border: 1px solid #FCA5A5; }

/* This month's total vs last month's, on the DHL Daily driver list. */
table.dhl-summary-table td.dhl-trend-up { color: #15803D; font-weight: 700; }
table.dhl-summary-table td.dhl-trend-down { color: #B91C1C; font-weight: 700; }

/* Native <details>/<summary> used for the "Other" postcode list and the
   Trends "Add more drivers" disclosure — styled to read like the button
   toggles elsewhere rather than a plain bullet-marker default. */
.dhl-other-summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-navy, inherit);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.dhl-other-summary::-webkit-details-marker { display: none; }
.dhl-other-summary:hover { color: var(--color-teal-dark); }
details[open] > .dhl-other-summary .dhl-panel-chevron { transform: rotate(180deg); }
.dhl-other-body { margin-top: var(--space-3); }

/* Small dismissible "!" next to a size cell whose rate just changed —
   separate from the persistent green/red colouring, which stays put until
   the next actual rate change regardless of whether this has been clicked. */
.dhl-rate-ack-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: #DC2626;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  margin-left: 4px;
  padding: 0;
  vertical-align: middle;
}