/* ============================================================================
   CGT — "Cold Chain, On Time" design system
   The Cool Guys Transport · refrigerated freight tracking portal

   Loaded LAST in every template <head>, so it wins the cascade over each
   page's inline <style>. Color is driven entirely through the shared token
   names (--navy/--accent/…) that every template already consumes, so redefining
   them here re-skins the whole app regardless of consuming-rule specificity.
   Type + component polish is layered on top.
   Fonts are loaded via <link> tags injected into each template <head>
   (see cgt-design fonts block), not @import, for reliable/faster loading.
   ============================================================================ */

:root {
  /* ── Cold-chain palette ─────────────────────────────────────────── */
  --ink:        #0B1E33;   /* deep freeze — headers, sidebar, dark type */
  --ink-2:      #081521;   /* darker sidebar well */
  --glacier:    #1C6FB5;   /* brand snowflake blue — primary action */
  --glacier-dk: #155A94;   /* hover */
  --frost:      #EDF3F7;   /* app background */
  --surface:    #FFFFFF;   /* cards */
  --ice:        #BFE3EF;   /* cold cue */
  --ice-soft:   #E4F1F7;   /* soft cold fill */
  --signal:     #F5A524;   /* SIGNAL AMBER — live / in-transit ONLY */
  --signal-dk:  #C77F13;
  --signal-soft:#FDEECB;
  --line:       #DBE6EE;   /* hairline borders */
  --muted-c:    #5E7183;   /* secondary text */
  --text-c:     #0F2233;   /* primary text */
  --ok:         #1E8E5A;   --ok-bg:   #E7F6EE;
  --late:       #D64545;   --late-bg: #FBEAEA;

  /* ── Remap the tokens every template already uses ───────────────── */
  --navy:         var(--ink);
  --blue:         var(--glacier-dk);
  --navy-light:   #14324E;
  --accent:       var(--glacier);
  --accent-light: var(--ice-soft);
  --ice-accent:   var(--ice);
  --bg:           var(--frost);
  --card:         var(--surface);
  --text:         var(--text-c);
  --muted:        var(--muted-c);
  --border:       var(--line);
  --error:        var(--late);

  /* ── Type roles ─────────────────────────────────────────────────── */
  --font-display: 'Saira Condensed', 'Inter', sans-serif;   /* dock-signage headings */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'SFMono-Regular', monospace; /* manifest data */

  --radius:    12px;
  --radius-sm: 9px;
  --shadow-card: 0 1px 2px rgba(11,30,51,0.04), 0 4px 16px rgba(11,30,51,0.05);
}

/* ── Base type ───────────────────────────────────────────────────── */
/* Only the type is set globally — background/color stay owned by each page
   (via the remapped tokens) so intentionally-dark screens keep their field. */
body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display face for headings + the technical labels of the domain */
h1, h2, h3,
.page-title, .page-header h1, .card-title, .pane-title,
.stat-title, .toolbar h1, .driver-name, .brand, .header-brand,
.section-title {
  font-family: var(--font-display);
  letter-spacing: 0.2px;
}

/* Uppercase eyebrow / column / stat labels — engineered tracking */
.stat-label, .m-detail-label, thead th, label,
.eyebrow, .filter-group label {
  font-family: var(--font-body);
  letter-spacing: 0.10em !important;
}

/* All numeric / code data reads like a printed manifest */
.stat-value, .order-no, .sched-time, .variance, .m-card-order,
.label-order-no, .mono, .stat-val {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}

/* ── Brand wordmark: dock-stencil lockup ─────────────────────────── */
.header-brand, .brand {
  font-family: var(--font-display) !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Header / sidebar / nav: colder ink, crisper edge ────────────── */
.top-header, .nav, .runboard-header {
  background: var(--ink) !important;
  border-bottom: 1px solid rgba(191,227,239,0.10);
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.left-sidebar { background: var(--ink-2) !important; }
.bottom-nav   { background: var(--ink) !important; border-top: 1px solid rgba(191,227,239,0.08); }

/* Primary sidebar CTA + active states use glacier */
.sidebar-primary { background: var(--glacier) !important; }
.sidebar-primary:hover { background: var(--glacier-dk) !important; }
.sidebar-link.active { background: rgba(28,111,181,0.24) !important; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.filter-btn, .print-btn, .btn-primary,
button.primary, .save-btn, .apply-btn {
  background: var(--glacier);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background .15s, transform .08s;
}
.filter-btn:hover, .print-btn:hover, .btn-primary:hover,
button.primary:hover, .save-btn:hover, .apply-btn:hover { background: var(--glacier-dk); }
.filter-btn:active, .print-btn:active { transform: translateY(1px); }

/* ── Cards + surfaces ────────────────────────────────────────────── */
.stat-card, .card, .table-wrap, .m-card, .filters, .pane, .panel {
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.stat-card { box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
/* cold-chain tick on every stat card */
.stat-card::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--ice);
}

/* ── Status system: cold semantics + amber for "live/in-transit" ─── */
.status-badge { font-family: var(--font-body); font-weight: 600; border-radius: 7px; }
.status-SUCCESS, .status-SUCCEEDED { background: var(--ok-bg)   !important; color: var(--ok)   !important; }
.status-FAILED,  .status-FAILURE   { background: var(--late-bg) !important; color: var(--late) !important; }
.status-PENDING                    { background: var(--ice-soft) !important; color: var(--glacier-dk) !important; }
.status-SCHEDULED                  { background: var(--signal-soft) !important; color: var(--signal-dk) !important; }

/* Table head — ink freight band */
thead th { background: var(--ink) !important; color: rgba(191,227,239,0.75) !important; font-weight: 600; }

/* ── Focus & accessibility floor ─────────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible, .status-pill:focus-visible {
  outline: 2px solid var(--glacier);
  outline-offset: 2px;
}

/* ============================================================================
   SIGNATURE — Delivery time-track
   A horizontal rail showing the scheduled window with a marker for the live
   ETA / actual arrival, colored by variance. Makes "12 min late" visible.
   ============================================================================ */
.track-cell { min-width: 128px; max-width: 190px; }
.track {
  --track-fill: var(--ice);
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  min-width: 88px;
  margin: 2px 0 5px;
}
.track__window {           /* the scheduled window band */
  position: absolute; top: 0; bottom: 0;
  border-radius: 999px;
  background: var(--track-fill);
  opacity: 0.9;
}
.track__marker {           /* live ETA / actual arrival */
  position: absolute; top: 50%; width: 12px; height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--glacier);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--glacier);
}
.track.is-late   { --track-fill: var(--late-bg); }
.track.is-late   .track__marker { background: var(--late); box-shadow: 0 0 0 1px var(--late); }
.track.is-early  .track__marker { background: var(--glacier); box-shadow: 0 0 0 1px var(--glacier); }
.track.is-ontime { --track-fill: var(--ok-bg); }
.track.is-ontime .track__marker { background: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.track.is-live   { --track-fill: var(--signal-soft); }
.track.is-live   .track__marker {
  background: var(--signal); box-shadow: 0 0 0 1px var(--signal);
  animation: track-pulse 1.6s ease-in-out infinite;
}
@keyframes track-pulse {
  0%,100% { box-shadow: 0 0 0 1px var(--signal), 0 0 0 0 rgba(245,165,36,0.5); }
  50%     { box-shadow: 0 0 0 1px var(--signal), 0 0 0 6px rgba(245,165,36,0); }
}
.track__caption {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted-c);
  display: flex; justify-content: space-between; gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}
