/*
 * easipac / EasiRoute shared design tokens (UI-PARITY: Maxoptra palette and type).
 *
 * Used by the office planner, the driver app and the public tracking page:
 *   <link rel="stylesheet" href="/static/shared/tokens.css">
 *
 * Loads Lato (the typeface Maxoptra uses) and Material Symbols Rounded from Google Fonts. The
 * planner draws its own inline SVG icons; the .mi class is kept for the driver and track pages:
 *   <span class="mi" aria-hidden="true">local_shipping</span>
 * .mi glyphs stay hidden until the icon font has loaded (add the "icons-ready" class to <html>
 * after document.fonts.load, or set `html { --mi-visibility: visible }`).
 *
 * Layout, type and the semantic colours (late/early/failed, timeline stripes) follow Maxoptra, sampled from
 * reference/maxoptra-ui/*.jpg|png with Pillow. The chrome uses easipac's colours in place of Maxoptra's navy and blue
 * (Sam, 7 Oct 2026): Forest Green #0F3A27, Lime #B2D851 as an accent on Forest Green, Aqua #88E1E5.
 */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0&display=block");

:root {
  /* brand / chrome */
  /* the names are Maxoptra's roles (navy header, blue primary); the values are easipac's */
  --navy: #0F3A27;              /* header bar: easipac Forest Green */
  --blue: #0F3A27;              /* primary buttons, active sidebar item, checkboxes: Forest Green */
  --blue-hover: #0B2C1D;
  --blue-link: #1B7A4E;         /* links, vehicle names: a lighter forest that reads on white */
  --blue-tint: #EEF5E6;         /* selected row / block */
  --blue-tint-2: #DCEBC9;
  --lime: #B2D851;              /* easipac Lime: logo, active header tab, accents on Forest Green only */
  --aqua: #88E1E5;              /* easipac Aqua */

  /* surfaces and lines */
  --page: #FFFFFF;
  --panel: #F5F6FA;             /* right-hand orders panel, route header rows */
  --toolbar: #EDEFF5;           /* PLANNING toolbar */
  --grid-head: #FAFAFA;         /* list header and footer bars */
  --grid-hover: #F9F9F9;
  --line: #E1E3E8;
  --line-strong: #D5D6DE;
  --line-soft: #E9E9E9;
  --sidebar-line: #D4D4D4;

  /* text */
  --text: #354052;              /* slate: primary text */
  --text-strong: #1F2733;
  --muted: #7B7F91;
  --muted-2: #5F6378;
  --disabled: #B4B7C2;

  /* semantic */
  --danger: #E5334B;
  --danger-tint: #FDE8EB;
  --warning: #FA9600;
  --warning-tint: #FFF3DE;
  --success: #22BD22;
  --success-tint: #E3F7E3;
  --purple: #A532DF;
  --amber-text: #A15202;

  /* planning timeline */
  --drive: #FA9600;             /* driving stripe */
  --op: #354052;                /* operation (service) stripe */
  --break: #41A21B;             /* break stripe */
  --wait: #3FB8C2;              /* waiting stripe (aqua, deep enough for a thin stripe) */
  --block-end: #E1E3E8;         /* loading and route-end blocks */

  /* track and trace deviation cells and progress segments (sampled from reference/maxoptra-ui/22, 23) */
  --tt-green: #A7E4A9;          /* within tolerance */
  --tt-blue: #B5E6E9;           /* early beyond 30 min (aqua tint) */
  --tt-amber: #F2D59B;          /* late */
  --tt-red: #DE9C9E;           /* very late or failed */
  --tt-grey: #DDDFE5;           /* not done yet */
  --tt-lime: #CDE583;

  /* planning screen (reference/maxoptra-ui/20, 21) */
  --toolbar-plan: #FAFAFA;      /* toolbar and filter bars */
  --past-banner: var(--blue-link);       /* "You are looking at a day in the past", primary planning buttons: a lighter forest than the header (PD-1) */
  --off-hours: #F7F7F7;         /* hatched, outside the working window */
  --pill: #F2F2F2;              /* small grey pills in the vehicle rows */
  --green-text: #3AA03A;        /* spare capacity */
  --run-head: #EEEEEE;          /* grey run header rows on TRACK&TRACE */

  /* tracking widget accent (setting) */
  --widget-accent: #3EC188;

  /* shape and type */
  --radius: 4px;
  --radius-md: 6px;
  --font: "Lato", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-body: 14px;
  --fs-lg: 16px;
  --fs-h2: 20px;
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--blue);

  /* spacing */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  --mi-visibility: hidden;

  /* ---- deprecated aliases (earlier forest-green tokens), kept so older CSS keeps rendering ---- */
  --forest: var(--navy);
  --forest-hover: #0B2C1D;
  --forest-tint: var(--blue-tint);
  --cream: var(--panel);
  --cream-deep: var(--toolbar);
  --line-old: var(--line);
  --radius-sm: 4px;
  --fs-h1: 22px;
  --label-tracking: .02em;
}
html.icons-ready { --mi-visibility: visible; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.25; }
h1 { font-size: 24px; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-lg); }
p { margin: 0; }
a { color: var(--blue-link); text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Material Symbols Rounded (driver and track pages) */
.mi {
  font-family: "Material Symbols Rounded";
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  visibility: var(--mi-visibility);
  user-select: none;
  flex: none;
  width: 1em;
  height: 1em;
  overflow: hidden;
}

:focus { outline: none; }
:focus-visible { box-shadow: var(--focus-ring); }

/* buttons: Maxoptra blue, 4px radius, sentence case */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 30px; padding: 0 14px;
  border: 1px solid var(--blue); border-radius: var(--radius);
  background: var(--blue); color: #fff;
  font-size: var(--fs-body); font-weight: 400;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.btn[disabled], .btn[aria-disabled="true"] { background: #F5F5F5; border-color: var(--line); color: var(--disabled); cursor: not-allowed; }
.btn-outline { background: #fff; color: var(--text); border-color: var(--line-strong); }
.btn-outline:hover { background: var(--grid-head); border-color: #BFC1CC; }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: #C92A40; border-color: #C92A40; }
.btn-sm { min-height: 24px; padding: 0 10px; font-size: var(--fs-sm); }

.label { font-size: var(--fs-sm); color: var(--muted); }