/* The look. Type: Barlow (static/fonts, SIL Open Font License), a grotesk drawn from road and
   transit signage; Chinese falls back to the system's Traditional Chinese face. Colour: the logo's
   dock teal and safety yellow over cool concrete greys. The sidebar is the dock: every page has a line
   icon there and beside its title, the open one lit in the logo's yellow. Pages are quiet white cards:
   filters as soft filled fields, text-only row actions, hairline tables. The one loud thing is the dock
   edge's hazard stripe, which only an overloaded truck wears (.capacity-bar i.over, .truck-card.overload).
   Every colour is a token in :root and no rule writes one itself, so the Appearance blocks after :root
   (the dark theme, the accents, the canvases) re-dress the whole app. A new rule takes an existing
   token, or adds one in :root with its value in the dark block (and, for the brand, in the accents). */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/barlow-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/barlow-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --font-ui: "Barlow", "Segoe UI", "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", "Heiti TC", Arial, sans-serif;
  --canvas: #edf0f2;
  --surface: #fff;
  --surface-sunk: #f7f8f9;
  --line: #dce2e6;
  --line-soft: #e8ecef;
  --line-strong: #c3ccd2;
  --ink: #1a242c;
  --ink-2: #3c4952;
  --ink-3: #63707a;
  --ink-4: #8e99a1;
  --teal: #146c73;
  --teal-strong: #0e565c;
  --teal-tint: #e5f0f1;
  --teal-ring: rgba(20, 108, 115, .2);
  --dock: #0e3a3f;
  --dock-raised: #17525a;
  --dock-text: #cadcde;
  --dock-muted: #84a7ab;
  --signal: #f3b21a;
  --go: #1b744a;
  --go-tint: #e2f2e9;
  --warn: #85560a;
  --warn-tint: #faefd8;
  --stop: #b2312b;
  --stop-tint: #fbe8e6;
  --stop-line: #e5b1ac;
  --info: #235f9c;
  --info-tint: #e4edf8;
  --violet: #5b3c8c;
  --violet-tint: #eee7f8;
  --radius: 8px;
  --radius-sm: 8px;
  --shadow-1: 0 1px 2px rgba(15, 38, 44, .05);
  --shadow-pop: 0 20px 52px rgba(8, 30, 34, .26);
  --card-line: #e1e6ea;
  --radius-lg: 10px;
  --shadow-card: 0 1px 2px rgba(16, 32, 40, .04), 0 4px 14px rgba(16, 32, 40, .035);
  /* Filters: a soft filled field at rest, white with a ring when pointed at or in use. */
  --field: #f5f7f8;
  --field-line: #dfe5e8;
  --field-hover: #c9d3d8;
  /* Surfaces beyond the card: list headers and hover rows, an opened row, raised chips, menus, buttons,
     inputs and a filled field's active state; the segmented switches (track and the chosen piece). */
  --surface-head: #fafbfc;
  --surface-hover: #f8fafb;
  --surface-open: #f5f8f9;
  --surface-raised: #fff;
  --popover: #fff;
  --button: #fff;
  --input: #fff;
  --field-focus: #fff;
  --switch-track: #e3e8eb;
  --segment-on: #fff;
  --segment-hover: rgba(255, 255, 255, .7);
  /* Neutral fills: counts, chips, pills and tags, meter tracks, the status dots. */
  --fill: #eef2f4;
  --fill-off: #f0f2f4;
  --fill-2: #eaeff1;
  --meter-track: #e2e8eb;
  --meter-neutral: #9aa9b1;
  --dot: #8795a0;
  --dot-off: #b3bcc2;
  /* Lines beyond --line-soft / --line / --line-strong: table rows, a mid grey, dashes, hover borders. */
  --line-row: #edf0f2;
  --line-mid: #c9d3d8;
  --line-dash: #b9c6cc;
  --line-hover: #a9b5bc;
  --drop-line: #a9bac2;
  /* Text greys around --ink ... --ink-4, darkest first. */
  --ink-strong: #111d25;
  --ink-row: #1c2733;
  --ink-body: #26343d;
  --ink-soft: #47545c;
  --ink-note: #4c5b64;
  --ink-count: #5b6870;
  --ink-label: #6b7780;
  --ink-muted: #7b878e;
  --ink-faint: #9aa5ab;
  --ink-ghost: #b3bcc2;
  /* Text on a coloured fill (the brand, a red action), and the sidebar's own white text. */
  --on-accent: #fff;
  --dock-ink: #fff;
  /* The brand's whole ramp (the Appearance accent replaces it): fill hover, text and links, the tinted
     actions' and chips' text, tints, washes, selections, lines, the focus ring. */
  --teal-hover: #0e565c;
  --teal-text: #146c73;
  --teal-link: #176b78;
  --teal-link-hover: #0f4e58;
  --teal-alt: #176b78;
  --teal-ink: #0f5e6a;
  --teal-deep: #0f5360;
  --teal-tint-strong: #dceff1;
  --teal-select: #cfe4e6;
  --teal-wash: #f0f7f8;
  --teal-selected: #edf6f7;
  --teal-line: #9cc3ca;
  --teal-line-dash: #a7c4ca;
  --teal-line-soft: #c8e0e4;
  --teal-line-dim: #a9bcc4;
  --teal-line-grey: #9fb3bc;
  --teal-line-muted: #7f97a3;
  --teal-focus: #4a929d;
  --teal-chip-line: rgba(20, 108, 115, .42);
  --teal-ring-soft: rgba(23, 107, 120, .13);
  /* The dock (the sidebar): its gradient and overlays, the page-title tile, avatars, the logo's tile and
     the login backdrop's glows. */
  --dock-top: #0f4046;
  --dock-bottom: #0b3236;
  --dock-tile: var(--dock);
  --avatar: var(--dock);
  --dock-hover: rgba(255, 255, 255, .06);
  --dock-active: rgba(255, 255, 255, .1);
  --dock-line: rgba(255, 255, 255, .09);
  --dock-scroll: rgba(255, 255, 255, .16);
  --dock-ring: rgba(255, 255, 255, .16);
  --dock-shadow: rgba(14, 58, 63, .2);
  --brand-mark: #146c73;
  --login-glow-1: rgba(23, 82, 90, .95);
  --login-glow-2: rgba(20, 108, 115, .38);
  /* The logo's yellow (hover, the text on it, its rings), amber marks and edges, and the hazard
     stripe's black, which stays dark in every theme. */
  --signal-hover: #dda112;
  --on-signal: #17232b;
  --signal-ring: rgba(243, 178, 26, .8);
  --signal-glow: #f3b21a55;
  --amber: #e3a21a;
  --amber-meter: #d99a25;
  --amber-edge: #d8a033;
  --amber-ring: rgba(216, 160, 51, .25);
  --hazard: #1a242c;
  /* Warnings: texts, washes and lines; a truck's note. */
  --warn-ink: #855617;
  --warn-text: #94600f;
  --warn-alert: #9b5d0a;
  --warn-deep: #6b4a10;
  --warn-wash: #fff8e8;
  --warn-highlight: #fff3d6;
  --warn-line: #f0c36a;
  --note-ink: #4a3a12;
  --note-bg: #fffaf0;
  --note-line: #f1e0b8;
  /* Red: texts, marks and fills, row and banner washes, lines, the overload ring. */
  --stop-ink: #b02e2e;
  --stop-strong: #a02f2f;
  --stop-deep: #962620;
  --stop-note: #962b2b;
  --danger-text: #b03434;
  --danger-text-hover: #8d2323;
  --stop-mark: #d04545;
  --stop-fill: #c93636;
  --stop-wash: #fdf1f1;
  --stop-row: #fdf5f5;
  --stop-row-hover: #fbeeee;
  --stop-note-line: #e2a9a9;
  --stop-ring: rgba(178, 49, 43, .2);
  /* Green, blue (on the road, paper, the assign right's cyan), and the role avatars. */
  --go-ink: #1a6a45;
  --go-deep: #176344;
  --go-text: #1f7a50;
  --go-mark: #2f9a67;
  --road-ink: #155f86;
  --road-mark: #2b84c2;
  --road-tint: #e7f1f9;
  --info-ink: #1f5b8a;
  --info-wash: #f5f9fc;
  --cyan-ink: #145e79;
  --cyan-tint: #e3f1f6;
  --metric-edge: #3d768a;
  --role-manager: #5b3c8c;
  --role-user: #4c6b79;
  --role-driver: #a5670f;
  /* The bulk bar (dark, floating at the window's foot) and the toast. */
  --bar: #17232b;
  --bar-ink: #fff;
  --bar-line: #5d6d76;
  --bar-hover: #2a3c47;
  --bar-muted: #cbd6db;
  --bar-danger: #ffb4ae;
  --bar-danger-line: #7a4a48;
  --bar-danger-hover: #4a2a2a;
  --toast: #1a242c;
  --toast-ink: #fff;
  /* Paper: what stays white in every theme (signature pads and pictures, photo backdrops). */
  --paper: #fff;
  --paper-sunk: #f3f6f7;
  --paper-line: #d7dfe3;
  --paper-line-strong: #c9d4d9;
  --paper-dash: #b9c6cc;
  --paper-ink: #17232b;
  /* Shadows (black and deeper in the dark theme) and the dialog backdrop. */
  --shadow-segment: 0 1px 2px rgba(16, 32, 40, .16);
  --shadow-segment-ring: 0 0 0 1px rgba(16, 32, 40, .04);
  --shadow-chip: 0 1px 2px rgba(16, 32, 40, .06);
  --shadow-hairline: 0 1px 2px rgba(16, 32, 40, .04);
  --shadow-lift: 0 1px 2px rgba(16, 32, 40, .05), 0 6px 18px rgba(16, 32, 40, .08);
  --shadow-menu: 0 16px 40px rgba(16, 32, 40, .16), 0 2px 6px rgba(16, 32, 40, .06);
  --shadow-action-menu: 0 12px 32px rgba(16, 32, 40, .14), 0 2px 6px rgba(16, 32, 40, .06);
  --shadow-picker: 0 8px 24px rgba(18, 34, 42, .18);
  --shadow-toast: 0 10px 28px rgba(8, 30, 34, .28);
  --shadow-bar: 0 14px 36px rgba(18, 34, 42, .3), 0 2px 6px rgba(18, 34, 42, .16);
  --shadow-login: 0 30px 80px rgba(0, 0, 0, .34);
  --backdrop: rgba(8, 30, 34, .48);
  /* Line icons on a 24px grid, drawn as masks in the element's colour: one per page (the menu and the
     page header), and the download, sign-out and pen of a few buttons. */
  --i-dashboard: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='3.5' width='7' height='8' rx='1.5'/><rect x='13.5' y='3.5' width='7' height='5' rx='1.5'/><rect x='13.5' y='11.5' width='7' height='9' rx='1.5'/><rect x='3.5' y='14.5' width='7' height='6' rx='1.5'/></svg>");
  --i-activity: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3.6 12a8.4 8.4 0 1 0 2.46-5.94'/><path d='M3.5 4.2v4.3h4.3'/><path d='M12 7.6V12l3 1.9'/></svg>");
  --i-orders: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 13.5 6 5.6A1.5 1.5 0 0 1 7.4 4.5h9.2a1.5 1.5 0 0 1 1.4 1.1l2.5 7.9'/><path d='M3.5 13.5V18a1.5 1.5 0 0 0 1.5 1.5h14a1.5 1.5 0 0 0 1.5-1.5v-4.5h-5L14 16h-4l-1.5-2.5z'/></svg>");
  --i-dispatch: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2.5 5 13.5h6l-1 8 8-11h-6z'/></svg>");
  --i-plans: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='18' r='2.2'/><circle cx='18' cy='6' r='2.2'/><path d='M8.2 18H16a3 3 0 0 0 0-6H8a3 3 0 0 1 0-6h7.8'/></svg>");
  --i-self-pick: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 20 7.5v9L12 21l-8-4.5v-9z'/><path d='m4 7.5 8 4.5 8-4.5'/><path d='M12 12v9'/></svg>");
  --i-pod: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20.5h16'/><path d='M15 4.5 19 8.5 9 18.5H5v-4z'/></svg>");
  --i-trades: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='7' width='18' height='13' rx='2'/><path d='M8.5 7V5.5A1.5 1.5 0 0 1 10 4h4a1.5 1.5 0 0 1 1.5 1.5V7'/><path d='M3 12.5h18'/></svg>");
  --i-pocs: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4.5' width='18' height='15' rx='2'/><circle cx='9' cy='10.5' r='2.3'/><path d='M5.6 16.2c.7-1.5 1.9-2.3 3.4-2.3s2.7.8 3.4 2.3'/><path d='M15 9.5h3M15 13h3'/></svg>");
  --i-addresses: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z'/><circle cx='12' cy='10' r='2.4'/></svg>");
  --i-warehouses: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 20.5V9l9-5 9 5v11.5'/><path d='M7 20.5V13h10v7.5'/><path d='M7 16.7h10'/></svg>");
  --i-dockdoors: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 20.5v-15a1 1 0 0 1 1-1h15a1 1 0 0 1 1 1v15'/><path d='M2.5 20.5h19'/><path d='M7 8.5h10M7 12h10M7 15.5h10'/></svg>");
  --i-trucks: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 16.5V6H2.5v10.5h2.1'/><path d='M8.6 16.5H15'/><path d='M19 16.5h2V13l-3-3.5h-4'/><circle cx='6.6' cy='16.8' r='2'/><circle cx='17' cy='16.8' r='2'/></svg>");
  --i-units: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='12.5' width='7.5' height='7.5' rx='1'/><rect x='13' y='12.5' width='7.5' height='7.5' rx='1'/><rect x='8.25' y='3.5' width='7.5' height='7.5' rx='1'/></svg>");
  --i-pipe-carts: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5.5 3.5v13M18.5 3.5v13'/><path d='M5.5 8h13M5.5 12h13'/><path d='M3.5 16.5h17'/><circle cx='7.5' cy='19.5' r='1.6'/><circle cx='16.5' cy='19.5' r='1.6'/></svg>");
  --i-holidays: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15.5' rx='2'/><path d='M3.5 10h17M8 3v4M16 3v4'/><rect x='7' y='13' width='4' height='4' rx='1' fill='black'/></svg>");
  --i-email-templates: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='m3.5 6.5 8.5 6.5 8.5-6.5'/></svg>");
  --i-users: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8.5' r='3.3'/><path d='M3 19.5c.5-3.3 2.8-5.3 6-5.3s5.5 2 6 5.3'/><path d='M15.5 5.3a3.3 3.3 0 0 1 0 6.4'/><path d='M17.6 14.5c1.9.6 3.1 2.4 3.4 5'/></svg>");
  --i-download: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v11'/><path d='m7.5 10.5 4.5 4.5 4.5-4.5'/><path d='M4.5 19.5h15'/></svg>");
  --i-logout: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4.5h4A1.5 1.5 0 0 1 19.5 6v12a1.5 1.5 0 0 1-1.5 1.5h-4'/><path d='M10 8l-4 4 4 4'/><path d='M6 12h10'/></svg>");
  --i-pen: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20.5h16'/><path d='M15 4.5 19 8.5 9 18.5H5v-4z'/></svg>");
  --i-key: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='15' r='4'/><path d='m10.8 12.2 8.7-8.7'/><path d='m16.5 6.5 2.5 2.5'/><path d='m14 9 2 2'/></svg>");
  --i-page: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='3.5' width='14' height='17' rx='2'/><path d='M9 8.5h6M9 12h6M9 15.5h3.5'/></svg>");
  /* The menu's width (app.js "Appearance": a column, or the icon rail below). */
  --sidebar-w: 228px;
  --i-search: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.5' cy='10.5' r='6.5'/><path d='m15.5 15.5 5 5'/></svg>");
  --i-palette: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.5a8.5 8.5 0 1 0 0 17c1.2 0 1.8-.8 1.8-1.7 0-1.3-1.1-1.6-1.1-2.7 0-.9.7-1.6 1.6-1.6h2.1a4.1 4.1 0 0 0 4.1-4.1C20.5 6.8 16.7 3.5 12 3.5z'/><circle cx='7.8' cy='11' r='1.1'/><circle cx='10.5' cy='7.4' r='1.1'/><circle cx='14.8' cy='7.6' r='1.1'/></svg>");
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--canvas);
  font-size: 14px;
}
/* Appearance: app.js puts the user's choices on <html> as data-theme (light / dark), data-accent (teal,
   blue, indigo, green, amber, rose, slate) and data-canvas (concrete, white, warm, cool, mint). Without
   them, or with light / teal / concrete, the tokens above are the look. An accent replaces the brand's
   ramp and the dock's; a canvas changes the page behind the cards; the dark theme redefines the tokens,
   and every accent and canvas has a dark counterpart. Paper (signatures, photo backdrops) stays light,
   and the hazard stripe stays yellow and black. Rules below only ever use tokens. */
:root[data-accent="blue"] {
  --teal: #1d5fb0;
  --teal-hover: #174d92;
  --teal-strong: #174a8a;
  --teal-text: #1b58a3;
  --dock: #10294a;
  --dock-raised: #1a3d6b;
  --dock-text: #cad8ea;
  --dock-muted: #8fa7c6;
  --dock-top: #13315a;
  --dock-bottom: #0c213d;
}
:root[data-accent="indigo"] {
  --teal: #4a4fc2;
  --teal-hover: #3b3fa3;
  --teal-strong: #33378f;
  --teal-text: #4448b8;
  --dock: #1d1f4d;
  --dock-raised: #2b2e6e;
  --dock-text: #d2d3f0;
  --dock-muted: #989bcf;
  --dock-top: #24275c;
  --dock-bottom: #16183c;
}
:root[data-accent="green"] {
  --teal: #1d7448;
  --teal-hover: #175c3a;
  --teal-strong: #145a37;
  --teal-text: #1b6c43;
  --dock: #0e3424;
  --dock-raised: #17503a;
  --dock-text: #c9dfd3;
  --dock-muted: #8aae9b;
  --dock-top: #123e2b;
  --dock-bottom: #0a2a1c;
}
:root[data-accent="amber"] {
  --teal: #9a5a0c;
  --teal-hover: #7f4a0a;
  --teal-strong: #7a4709;
  --teal-text: #8a510b;
  --dock: #3b2608;
  --dock-raised: #5a3b0e;
  --dock-text: #ecdcc3;
  --dock-muted: #c2a275;
  --dock-top: #472f0b;
  --dock-bottom: #2d1d06;
}
:root[data-accent="rose"] {
  --teal: #b2325a;
  --teal-hover: #932849;
  --teal-strong: #8c2646;
  --teal-text: #a82d54;
  --dock: #3e1323;
  --dock-raised: #5c1d35;
  --dock-text: #f0d3dd;
  --dock-muted: #c793a6;
  --dock-top: #4b182b;
  --dock-bottom: #300e1b;
}
:root[data-accent="slate"] {
  --teal: #46596b;
  --teal-hover: #364655;
  --teal-strong: #33434f;
  --teal-text: #415365;
  --dock: #1c252e;
  --dock-raised: #2a3743;
  --dock-text: #d1d9df;
  --dock-muted: #97a5b0;
  --dock-top: #232e38;
  --dock-bottom: #151c23;
}
/* Any accent but teal, and every accent in the dark theme: the ramp's other steps follow from the accent
   (its fill, strong text and text) mixed with the surface, so they suit the theme they are in. */
:root:is([data-accent="blue"], [data-accent="indigo"], [data-accent="green"], [data-accent="amber"], [data-accent="rose"], [data-accent="slate"], [data-theme="dark"]) {
  --teal-link: var(--teal-text);
  --teal-alt: var(--teal);
  --teal-ink: var(--teal-strong);
  --teal-deep: var(--teal-strong);
  --teal-link-hover: var(--teal-strong);
  --teal-tint: color-mix(in srgb, var(--teal) 12%, var(--surface));
  --teal-tint-strong: color-mix(in srgb, var(--teal) 18%, var(--surface));
  --teal-select: color-mix(in srgb, var(--teal) 26%, var(--surface));
  --teal-wash: color-mix(in srgb, var(--teal) 6%, var(--surface));
  --teal-selected: color-mix(in srgb, var(--teal) 9%, var(--surface));
  --teal-line: color-mix(in srgb, var(--teal) 42%, var(--surface));
  --teal-line-dash: color-mix(in srgb, var(--teal) 38%, var(--surface));
  --teal-line-soft: color-mix(in srgb, var(--teal) 24%, var(--surface));
  --teal-line-dim: color-mix(in srgb, var(--teal) 30%, var(--line-strong));
  --teal-line-grey: color-mix(in srgb, var(--teal) 25%, var(--line-hover));
  --teal-line-muted: color-mix(in srgb, var(--teal) 35%, var(--ink-4));
  --teal-focus: color-mix(in srgb, var(--teal) 72%, var(--surface));
  --teal-chip-line: color-mix(in srgb, var(--teal) 42%, transparent);
  --teal-ring: color-mix(in srgb, var(--teal) 20%, transparent);
  --teal-ring-soft: color-mix(in srgb, var(--teal) 13%, transparent);
  --dock-shadow: color-mix(in srgb, var(--dock) 20%, transparent);
  --login-glow-1: color-mix(in srgb, var(--dock-raised) 95%, transparent);
  --login-glow-2: color-mix(in srgb, var(--teal) 38%, transparent);
}
/* The page behind the cards. White gives the cards a firmer edge; the tinted ones a matching switch track. */
:root[data-canvas="white"] {
  --canvas: #fff;
  --card-line: #dde3e7;
  --shadow-card: 0 1px 2px rgba(16, 32, 40, .05), 0 4px 16px rgba(16, 32, 40, .06);
  --switch-track: #e8ecef;
}
:root[data-canvas="warm"] {
  --canvas: #f3efe8;
  --switch-track: #e6e0d6;
}
:root[data-canvas="cool"] {
  --canvas: #eaf0f6;
  --switch-track: #dbe3ec;
}
:root[data-canvas="mint"] {
  --canvas: #e9f2ee;
  --switch-track: #d9e7e1;
}
/* The dark theme: slate surfaces a step lighter than the page, light inks in the same order as the light
   theme's dark ones, status colours lifted for a dark ground on dark tints, black shadows. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0e1316;
  --surface: #161e23;
  --surface-sunk: #12191d;
  --surface-head: #1a2329;
  --surface-hover: #1c262c;
  --surface-open: #1d2830;
  --surface-raised: #222d34;
  --popover: #1e282e;
  --button: #1f2a31;
  --input: #11181c;
  --field: #11181c;
  --field-line: #2b373f;
  --field-hover: #3c4a54;
  --field-focus: #0f1519;
  --switch-track: #1b242a;
  --segment-on: #2e3b44;
  --segment-hover: rgba(255, 255, 255, .06);
  --fill: #222d34;
  --fill-off: #1e282e;
  --fill-2: #26323a;
  --meter-track: #2a363e;
  --meter-neutral: #5f6e78;
  --dot: #6f7e88;
  --dot-off: #4b5760;
  --line-row: #212b31;
  --line-soft: #253037;
  --card-line: #263239;
  --line: #2d3a42;
  --line-mid: #374550;
  --line-strong: #3e4d58;
  --line-dash: #4b5a65;
  --line-hover: #566671;
  --drop-line: #4f5f6a;
  --ink-strong: #f4f7f8;
  --ink: #e6ebee;
  --ink-row: #e0e6e9;
  --ink-body: #d3dbdf;
  --ink-2: #bdc7cc;
  --ink-soft: #b1bcc2;
  --ink-note: #a9b4ba;
  --ink-count: #9ea9b0;
  --ink-3: #97a2a9;
  --ink-label: #919ca3;
  --ink-muted: #85919a;
  --ink-4: #77838b;
  --ink-faint: #67737b;
  --ink-ghost: #4f5b63;
  --teal: #19747c;
  --teal-hover: #1d808a;
  --teal-strong: #8ad3d9;
  --teal-text: #5cc0c8;
  --teal-link: #5cc0c8;
  --teal-link-hover: #8ad3d9;
  --teal-alt: #1d808a;
  --teal-ink: #94d8dd;
  --teal-deep: #a3dee2;
  /* Hovers lighten in the dark (menus are a step above the cards); a ticked row shows a little more. */
  --teal-wash: color-mix(in srgb, var(--teal) 12%, var(--surface-raised));
  --teal-selected: color-mix(in srgb, var(--teal) 16%, var(--surface));
  --dock: #0c1d20;
  --dock-raised: #13353a;
  --dock-text: #b7cbce;
  --dock-muted: #7b9a9e;
  --dock-top: #0f2427;
  --dock-bottom: #091619;
  --dock-tile: #164248;
  --avatar: #1b4a51;
  --dock-shadow: rgba(0, 0, 0, .35);
  --signal-hover: #f7c445;
  --amber: #e8a92a;
  --amber-edge: #a87c2c;
  --amber-ring: rgba(216, 160, 51, .3);
  --hazard: #0d1114;
  --go: #5fcf98;
  --go-tint: #13301f;
  --go-ink: #67d39e;
  --go-deep: #72d8a6;
  --go-text: #5ccb93;
  --go-mark: #34ad74;
  --warn: #e4b45c;
  --warn-tint: #33280f;
  --warn-ink: #e8bb67;
  --warn-text: #ebbf68;
  --warn-alert: #efb851;
  --warn-deep: #ecc98a;
  --warn-wash: #2a2111;
  --warn-highlight: #3a2d0e;
  --warn-line: #6e5424;
  --note-ink: #efdcae;
  --note-bg: #231d12;
  --note-line: #4c3e20;
  --stop: #f08a83;
  --stop-tint: #3a1d1c;
  --stop-line: #6d3633;
  --stop-ink: #f2928b;
  --stop-strong: #f39b95;
  --stop-deep: #f6aca6;
  --stop-note: #f5a9a3;
  --danger-text: #f08a83;
  --danger-text-hover: #f7b7b2;
  --stop-mark: #e05a5a;
  --stop-fill: #c93a3a;
  --stop-wash: #2c1818;
  --stop-row: #2a1718;
  --stop-row-hover: #351c1d;
  --stop-note-line: #6a3535;
  --stop-ring: rgba(240, 138, 131, .25);
  --info: #86b6ea;
  --info-tint: #172a40;
  --road-ink: #82c0ea;
  --road-mark: #3f9be0;
  --road-tint: #142a3b;
  --info-ink: #93c3f0;
  --info-wash: #132333;
  --cyan-ink: #78c6e2;
  --cyan-tint: #11303a;
  --violet: #c5a9f2;
  --violet-tint: #2a2140;
  --metric-edge: #4f8fa3;
  --role-manager: #6b4fa3;
  --role-user: #3f6474;
  --role-driver: #96600f;
  --bar: #26333b;
  --bar-line: #4f5f69;
  --bar-hover: #33444f;
  --bar-muted: #b9c6cc;
  --toast: #26333b;
  --toast-ink: #f4f7f8;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-pop: 0 20px 52px rgba(0, 0, 0, .6);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .2);
  --shadow-segment: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-segment-ring: 0 0 0 1px rgba(255, 255, 255, .04);
  --shadow-chip: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-hairline: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .35);
  --shadow-menu: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
  --shadow-action-menu: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
  --shadow-picker: 0 8px 24px rgba(0, 0, 0, .5);
  --shadow-toast: 0 10px 28px rgba(0, 0, 0, .55);
  --shadow-bar: 0 14px 36px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4);
  --shadow-login: 0 30px 80px rgba(0, 0, 0, .6);
  --backdrop: rgba(3, 8, 10, .66);
}
/* Each accent in the dark theme: a fill that still carries white text, light text and links, its dock. */
:root[data-theme="dark"][data-accent="blue"] {
  --teal: #2563b5;
  --teal-hover: #2b6fc6;
  --teal-strong: #a7c8f4;
  --teal-text: #7fb1ee;
  --teal-link: #7fb1ee;
  --teal-link-hover: #a7c8f4;
  --teal-alt: #2b6fc6;
  --teal-ink: #afcdf5;
  --teal-deep: #bad4f7;
  --dock: #0c1a2d;
  --dock-raised: #15304f;
  --dock-text: #c1d1e6;
  --dock-muted: #8099b8;
  --dock-top: #102139;
  --dock-bottom: #08131f;
  --dock-tile: #1a3a63;
  --avatar: #1f4677;
}
:root[data-theme="dark"][data-accent="indigo"] {
  --teal: #5055c8;
  --teal-hover: #5b60d2;
  --teal-strong: #c0c2f7;
  --teal-text: #a3a6f2;
  --teal-link: #a3a6f2;
  --teal-link-hover: #c0c2f7;
  --teal-alt: #5b60d2;
  --teal-ink: #c6c8f8;
  --teal-deep: #d0d1f9;
  --dock: #14152f;
  --dock-raised: #24275a;
  --dock-text: #cdcfee;
  --dock-muted: #9093c6;
  --dock-top: #1a1c3b;
  --dock-bottom: #0e0f22;
  --dock-tile: #2b2f73;
  --avatar: #353a86;
}
:root[data-theme="dark"][data-accent="green"] {
  --teal: #1f7a4d;
  --teal-hover: #21814f;
  --teal-strong: #96dcb7;
  --teal-text: #6fd19f;
  --teal-link: #6fd19f;
  --teal-link-hover: #96dcb7;
  --teal-alt: #21814f;
  --teal-ink: #9fe0bd;
  --teal-deep: #ace5c6;
  --dock: #0b1f16;
  --dock-raised: #14402d;
  --dock-text: #bfd8cb;
  --dock-muted: #7ea794;
  --dock-top: #0f281d;
  --dock-bottom: #07150f;
  --dock-tile: #17503a;
  --avatar: #1c5c43;
}
:root[data-theme="dark"][data-accent="amber"] {
  --teal: #9c5c10;
  --teal-hover: #a86412;
  --teal-strong: #f2c98a;
  --teal-text: #eab062;
  --teal-link: #eab062;
  --teal-link-hover: #f2c98a;
  --teal-alt: #a86412;
  --teal-ink: #f4ce95;
  --teal-deep: #f5d6a6;
  --dock: #21160a;
  --dock-raised: #3d2a0f;
  --dock-text: #e5d5bd;
  --dock-muted: #b59d79;
  --dock-top: #2a1c0c;
  --dock-bottom: #170f06;
  --dock-tile: #4d3410;
  --avatar: #5a3d12;
}
:root[data-theme="dark"][data-accent="rose"] {
  --teal: #b2375f;
  --teal-hover: #bf426b;
  --teal-strong: #f6b3c8;
  --teal-text: #f08fae;
  --teal-link: #f08fae;
  --teal-link-hover: #f6b3c8;
  --teal-alt: #bf426b;
  --teal-ink: #f7bcce;
  --teal-deep: #f8c7d6;
  --dock: #240b15;
  --dock-raised: #47172b;
  --dock-text: #ecccd7;
  --dock-muted: #ba889c;
  --dock-top: #2d0f1b;
  --dock-bottom: #18070e;
  --dock-tile: #561c34;
  --avatar: #66213e;
}
:root[data-theme="dark"][data-accent="slate"] {
  --teal: #4d6275;
  --teal-hover: #576d81;
  --teal-strong: #c4d2dd;
  --teal-text: #a7bccc;
  --teal-link: #a7bccc;
  --teal-link-hover: #c4d2dd;
  --teal-alt: #576d81;
  --teal-ink: #cad6e0;
  --teal-deep: #d3dee6;
  --dock: #131a20;
  --dock-raised: #24303a;
  --dock-text: #c9d3da;
  --dock-muted: #8e9da8;
  --dock-top: #182129;
  --dock-bottom: #0d1216;
  --dock-tile: #2c3a46;
  --avatar: #344553;
}
/* The canvases in the dark theme: near-black, brown-black, navy-black and green-black. */
:root[data-theme="dark"][data-canvas="white"] {
  --canvas: #060809;
  --switch-track: #161d21;
}
:root[data-theme="dark"][data-canvas="warm"] {
  --canvas: #16120e;
  --switch-track: #231d17;
}
:root[data-theme="dark"][data-canvas="cool"] {
  --canvas: #0b1220;
  --switch-track: #17202e;
}
:root[data-theme="dark"][data-canvas="mint"] {
  --canvas: #0b1511;
  --switch-track: #17231d;
}
* { box-sizing: border-box; }
body { margin: 0; }
.auth-required { display: none; }
.auth-required.authenticated { display: grid; }
.login-screen { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(900px 520px at 15% 0%, var(--login-glow-1), transparent 70%), radial-gradient(760px 520px at 100% 100%, var(--login-glow-2), transparent 70%), var(--dock); }
.login-screen.hidden { display: none; }
.login-panel { width: 400px; display: grid; gap: 18px; padding: 30px 30px 26px; background: var(--surface); border: 0; border-radius: 14px; box-shadow: var(--shadow-login); }
.login-panel label { display: grid; gap: 6px; color: var(--ink-3); font-size: 13px; font-weight: 500; }
.login-panel input, .login-panel button { width: 100%; }
.login-panel input { height: 40px; font-size: 14px; }
.login-panel button.primary { min-height: 40px; }
.login-panel p { margin-top: 6px; color: var(--ink-3); }
.login-brand { color: var(--ink); padding: 0 0 18px; border-bottom-color: var(--line-soft); }
.login-error { min-height: 20px; color: var(--danger-text); }
.language-switch { display: inline-flex; width: max-content; padding: 3px; border: 0; border-radius: 9px; background: var(--switch-track); }
/* width: auto keeps .login-panel's full-width button rule off the switch; nowrap keeps each label on one line. */
.language-switch button { min-height: 26px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-3); font-size: 12.5px; font-weight: 600; width: auto; white-space: nowrap; }
.language-switch button:hover { color: var(--ink); }
.language-switch button.active { color: var(--teal-strong); background: var(--segment-on); box-shadow: var(--shadow-segment); }
/* Login card: the switch sits at the right end of the logo row, above the divider. */
.login-brand .language-switch { margin-left: auto; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
/* The import template / sample downloads: quiet links with a download icon (.secondary colours them). */
.button-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 0 10px; text-decoration: none; transition: background-color .12s ease, color .12s ease; }
.button-link::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--i-download) center / contain no-repeat; mask: var(--i-download) center / contain no-repeat; }
.button-link.secondary { border-color: transparent; background: transparent; color: var(--teal-strong); }
.button-link.secondary:hover { border-color: transparent; background: var(--teal-tint); color: var(--teal-strong); }
.app-shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
/* The sidebar stays put while a long page scrolls (and scrolls by itself in a short window). */
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; align-self: start; height: 100vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--dock-scroll) transparent; background: linear-gradient(180deg, var(--dock-top) 0%, var(--dock) 34%, var(--dock-bottom) 100%); color: var(--dock-text); padding: 18px 12px 24px; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 6px 18px; border-bottom: 1px solid var(--dock-line); }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; overflow: hidden; background: var(--brand-mark); }
.brand-mark img { display: block; width: 100%; height: 100%; }
.brand strong, .brand small { display: block; }
.brand small { color: var(--dock-muted); margin-top: 3px; }
/* Sidebar menu only: the list pagers are <nav> elements too, and this padding pushed their page buttons below
   the rows-per-page select. */
#main-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; padding-top: 14px; }
/* One row per page: its icon (the page's --icon, below) and its name. The open page is lit: a raised
   row, the icon in the logo's yellow and a yellow rail on the sidebar's edge. showApplication hides rows
   and group names with the hidden attribute, which these display values would otherwise override. */
.nav-item { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 36px; margin: 0; padding: 0 10px; border: 0; border-radius: 8px; color: var(--dock-text); background: transparent; font-weight: 500; line-height: 1.2; text-align: left; }
.nav-item[hidden] { display: none; }
.nav-item::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; opacity: .72; -webkit-mask: var(--icon, var(--i-page)) center / contain no-repeat; mask: var(--icon, var(--i-page)) center / contain no-repeat; transition: opacity .12s ease; }
.nav-item:hover { color: var(--dock-ink); background: var(--dock-hover); }
.nav-item:hover::before { opacity: 1; }
.nav-item.active { color: var(--dock-ink); background: var(--dock-active); font-weight: 600; }
.nav-item.active::before { background: var(--signal); opacity: 1; }
.nav-item.active::after { content: ""; position: absolute; top: 8px; bottom: 8px; left: -12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--signal); }
.nav-item:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
/* English names run long ("Shipment Unit Management"): a size smaller and a little tighter keeps each on one line. */
:root:is([lang="en"], [lang="es"]) .nav-item { gap: 10px; padding-right: 8px; font-size: 13px; letter-spacing: -.005em; }
/* A group's name, with a hairline running on to the edge. */
.nav-label { display: flex; align-items: center; gap: 10px; color: var(--dock-muted); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; padding: 18px 10px 6px; }
.nav-label::after { content: ""; flex: 1; height: 1px; background: var(--dock-line); }
.nav-label[hidden] { display: none; }
.nav-item[data-page="dashboard"] { --icon: var(--i-dashboard); }
.nav-item[data-page="orders"] { --icon: var(--i-orders); }
.nav-item[data-page="dispatch"] { --icon: var(--i-dispatch); }
.nav-item[data-page="plans"] { --icon: var(--i-plans); }
.nav-item[data-page="self-pick"] { --icon: var(--i-self-pick); }
.nav-item[data-page="pod"] { --icon: var(--i-pod); }
/* The master data modules (one row each; their pages are the tabs under the page title) wear their first
   page's icon; each tab wears its own page's. */
.nav-item[data-module="trade-data"] { --icon: var(--i-trades); }
.nav-item[data-module="warehouse-data"] { --icon: var(--i-warehouses); }
.nav-item[data-module="fleet-data"] { --icon: var(--i-trucks); }
.module-tab[data-page="trades"] { --icon: var(--i-trades); }
.module-tab[data-page="pocs"] { --icon: var(--i-pocs); }
.module-tab[data-page="addresses"] { --icon: var(--i-addresses); }
.module-tab[data-page="warehouses"] { --icon: var(--i-warehouses); }
.module-tab[data-page="dockdoors"] { --icon: var(--i-dockdoors); }
.module-tab[data-page="holidays"] { --icon: var(--i-holidays); }
.module-tab[data-page="trucks"] { --icon: var(--i-trucks); }
.module-tab[data-page="units"] { --icon: var(--i-units); }
.module-tab[data-page="pipe-carts"] { --icon: var(--i-pipe-carts); }
.nav-item[data-page="email-templates"] { --icon: var(--i-email-templates); }
.nav-item[data-page="users"] { --icon: var(--i-users); }
/* A short window (a 1366 x 768 laptop): slightly shorter rows, so an administrator's whole menu still fits. */
@media (max-height: 840px) {
  .sidebar { padding-top: 14px; padding-bottom: 12px; }
  .brand { padding-bottom: 14px; }
  #main-nav { padding-top: 10px; }
  .nav-item { min-height: 33px; }
  .nav-label { padding-top: 12px; }
}
/* The menu's width (the icon rail's when collapsed); the floating bars centre on what is left of the window. */
:root[data-sidebar="collapsed"] { --sidebar-w: 68px; }
/* The menu's foot: collapse to an icon rail (or open it again). */
.sidebar-collapse { display: flex; align-items: center; gap: 11px; flex: none; width: 100%; min-height: 34px; margin-top: auto; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--dock-muted); font-size: 12.5px; font-weight: 600; text-align: left; }
.sidebar-collapse:hover { background: var(--dock-hover); color: var(--dock-text); }
.sidebar-collapse:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.sidebar-collapse svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
/* The icon rail: only the icons (each row's name is its tooltip), the brand's mark and hairlines for the groups. */
@media (min-width: 901px) {
  :root[data-sidebar="collapsed"] .sidebar { padding-left: 10px; padding-right: 10px; }
  :root[data-sidebar="collapsed"] .brand { justify-content: center; padding-left: 0; padding-right: 0; }
  :root[data-sidebar="collapsed"] .brand-name { display: none; }
  :root[data-sidebar="collapsed"] .nav-item { justify-content: center; gap: 0; padding: 0; font-size: 0; }
  :root[data-sidebar="collapsed"] .nav-item::before { width: 20px; height: 20px; }
  :root[data-sidebar="collapsed"] .nav-item.active::after { left: -10px; }
  :root[data-sidebar="collapsed"] .nav-label { gap: 0; padding: 14px 6px 6px; font-size: 0; }
  :root[data-sidebar="collapsed"] .sidebar-collapse { justify-content: center; padding: 0; }
  :root[data-sidebar="collapsed"] .sidebar-collapse span { display: none; }
  :root[data-sidebar="collapsed"] .sidebar-collapse svg { transform: rotate(180deg); }
}
.nav-backdrop { position: fixed; inset: 0; z-index: 85; background: var(--backdrop); }
.nav-backdrop[hidden] { display: none; }
.nav-toggle { display: none; place-items: center; flex: none; order: -1; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-2); }
.nav-toggle:hover { border-color: var(--line-strong); color: var(--ink); }
.nav-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* The topbar: the page's name, the global search (app.js "Global search": pages, trucks and orders as you
   type), then the language, the dark-mode switch and the account. */
.global-search { position: relative; flex: 1 1 300px; min-width: 200px; max-width: 460px; margin-left: auto; }
.global-search-icon { position: absolute; top: 50%; left: 12px; width: 17px; height: 17px; transform: translateY(-50%); fill: none; stroke: var(--ink-4); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.global-search input { width: 100%; height: 40px; padding: 0 62px 0 38px; border: 1px solid var(--field-line); border-radius: 10px; background: var(--field); color: var(--ink); font-size: 14px; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.global-search input:hover { border-color: var(--field-hover); background: var(--surface); }
.global-search input:focus { border-color: var(--teal); background: var(--surface); box-shadow: 0 0 0 3px var(--teal-ring); outline: none; }
.global-search input::-webkit-search-cancel-button { cursor: pointer; }
.global-search-key { position: absolute; top: 50%; right: 10px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink-4); font: 600 11px/1.3 var(--font-ui); transform: translateY(-50%); pointer-events: none; }
.global-search input:focus ~ .global-search-key, .global-search input:not(:placeholder-shown) ~ .global-search-key { display: none; }
.global-search-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; width: max(100%, 440px); max-width: calc(100vw - 24px); max-height: min(540px, calc(100dvh - 120px)); overflow-y: auto; padding: 6px; border: 1px solid var(--card-line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-pop); }
.global-search-panel[hidden] { display: none; }
.gs-section + .gs-section { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.gs-section-title { padding: 8px 10px 4px; color: var(--ink-4); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; }
.gs-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-weight: 500; text-align: left; }
.gs-item.active { background: var(--teal-tint); color: var(--ink); }
.gs-icon { position: relative; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--surface-sunk); }
.gs-icon::after { content: ""; position: absolute; inset: 6px; background: var(--teal-strong); -webkit-mask: var(--icon, var(--i-page)) center / contain no-repeat; mask: var(--icon, var(--i-page)) center / contain no-repeat; }
.gs-item.active .gs-icon { background: var(--surface); }
.gs-main { display: grid; flex: 1; gap: 1px; min-width: 0; }
.gs-main > :first-child { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.gs-sub { overflow: hidden; color: var(--ink-3); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.gs-query { color: var(--teal-strong); font-weight: 600; }
.gs-item .plan-status, .gs-item .state-pill { flex: none; }
.gs-empty { padding: 8px 10px 10px; color: var(--ink-4); font-size: 13px; }

.theme-toggle { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--ink-3); }
.theme-toggle:hover { border-color: var(--line); background: var(--surface); color: var(--ink); }
.theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
.main { padding: 0 26px 36px; overflow: hidden; }
.topbar { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
/* The page's name beside its menu icon, lit as in the menu on a dock-teal tile (--page-icon follows the
   open page, below). */
.topbar > div:first-child { display: grid; flex: 0 1 auto; grid-template-columns: 40px minmax(0, 1fr); align-items: center; column-gap: 14px; min-width: 0; }
.topbar > div:first-child::before, .topbar > div:first-child::after { content: ""; grid-area: 1 / 1 / 2 / 2; place-self: center; }
.topbar > div:first-child::before { width: 40px; height: 40px; border-radius: 11px; background: var(--dock-tile); box-shadow: 0 2px 6px var(--dock-shadow); }
.topbar > div:first-child::after { width: 20px; height: 20px; background: var(--signal); -webkit-mask: var(--page-icon, var(--i-page)) center / contain no-repeat; mask: var(--page-icon, var(--i-page)) center / contain no-repeat; }
.topbar h1 { grid-column: 2; min-width: 0; }
.main:has(> #page-dashboard.active) { --page-icon: var(--i-dashboard); }
.main:has(> #page-orders.active) { --page-icon: var(--i-orders); }
.main:has(> #page-dispatch.active) { --page-icon: var(--i-dispatch); }
.main:has(> #page-plans.active) { --page-icon: var(--i-plans); }
.main:has(> #page-self-pick.active) { --page-icon: var(--i-self-pick); }
.main:has(> #page-pod.active) { --page-icon: var(--i-pod); }
/* A master data page's title is its module's, and so is the icon. */
.main:has(> :is(#page-trades, #page-pocs, #page-addresses).active) { --page-icon: var(--i-trades); }
.main:has(> :is(#page-warehouses, #page-dockdoors, #page-holidays).active) { --page-icon: var(--i-warehouses); }
.main:has(> :is(#page-trucks, #page-units, #page-pipe-carts).active) { --page-icon: var(--i-trucks); }
.main:has(> #page-email-templates.active) { --page-icon: var(--i-email-templates); }
.main:has(> #page-users.active) { --page-icon: var(--i-users); }
/* The open module's pages as tabs between the title and the page (#module-tabs, drawn by setPage): each
   page's icon and name, the open one teal and underlined as Truck Plans' tabs. */
.module-tabs { display: flex; flex-wrap: wrap; gap: 0 28px; margin: -4px 0 16px; padding: 0 2px; border-bottom: 1px solid var(--line); }
.module-tabs[hidden] { display: none; }
.module-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; margin-bottom: -1px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--ink-3); font-weight: 600; transition: color .15s ease, border-color .15s ease; }
.module-tab::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; opacity: .7; -webkit-mask: var(--icon, var(--i-page)) center / contain no-repeat; mask: var(--icon, var(--i-page)) center / contain no-repeat; }
.module-tab:hover { color: var(--ink); }
.module-tab.active { color: var(--teal-text); border-bottom-color: var(--teal); }
.module-tab.active::before { opacity: 1; }
.module-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; border-radius: 6px 6px 0 0; }
h1, h2, p { margin: 0; }
h1 { font-size: 22px; font-weight: 700; letter-spacing: -.005em; line-height: 1.2; }
h2 { font-size: 16px; font-weight: 600; }
.panel-header p { color: var(--ink-3); margin-top: 4px; }
.system-status { color: var(--ink-3); font-size: 13px; }
.system-status i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--go-mark); margin-right: 6px; }
.user-session { display: flex; flex-shrink: 0; align-items: center; gap: 12px; color: var(--ink-3); white-space: nowrap; }
/* Who is signed in: their initials on a teal disc, name over role, a chevron; it opens the account menu
   (My Signature, Change Password, Sign Out), the one place for the user's own things. */
.account { position: relative; }
.account-button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px 4px 5px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--ink); text-align: left; }
.account-button:hover, .account-button[aria-expanded="true"] { border-color: var(--line); background: var(--surface-raised); box-shadow: var(--shadow-1); }
.account-avatar { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--avatar); color: var(--on-accent); font-size: 12.5px; font-weight: 700; letter-spacing: .03em; }
.account-avatar.large { width: 42px; height: 42px; font-size: 15px; }
.account-text { display: grid; min-width: 0; line-height: 1.25; }
.account-name { max-width: 190px; overflow: hidden; color: var(--ink); font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; }
.account-role { color: var(--ink-3); font-size: 11.5px; font-weight: 500; }
.account-chevron { flex: none; width: 12px; height: 12px; fill: none; stroke: var(--ink-4); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.account-button[aria-expanded="true"] .account-chevron { transform: rotate(180deg); }
.account-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 65; width: 300px; padding: 6px; border: 1px solid var(--card-line); border-radius: 12px; background: var(--popover); box-shadow: var(--shadow-menu); white-space: normal; }
.account-menu[hidden] { display: none; }
.account-menu-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; padding: 10px 10px 14px; border-bottom: 1px solid var(--line-soft); }
.account-menu-who { display: grid; gap: 2px; min-width: 0; }
.account-menu-who strong { overflow: hidden; color: var(--ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-who span { color: var(--ink-3); font-size: 12.5px; }
.account-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-weight: 500; text-align: left; }
.account-menu-item:hover, .account-menu-item:focus-visible { background: var(--teal-wash); color: var(--ink); outline: none; }
.account-menu-item.danger { min-height: 42px; padding: 6px 10px; border: 0; color: var(--stop); background: transparent; }
.account-menu-item.danger:hover, .account-menu-item.danger:focus-visible { background: var(--stop-tint); color: var(--stop-deep); }
.account-menu-icon { flex: none; width: 18px; height: 18px; background: currentColor; opacity: .75; -webkit-mask: var(--menu-icon) center / contain no-repeat; mask: var(--menu-icon) center / contain no-repeat; }
.account-menu-icon.icon-pen { --menu-icon: var(--i-pen); }
.account-menu-icon.icon-key { --menu-icon: var(--i-key); }
.account-menu-icon.icon-logout { --menu-icon: var(--i-logout); }
.account-menu-icon.icon-palette { --menu-icon: var(--i-palette); }
.account-menu-label { display: grid; flex: 1; gap: 2px; min-width: 0; }
.account-menu-hint { color: var(--ink-3); font-size: 11.5px; font-weight: 500; line-height: 1.3; }
.account-menu-hint.missing { color: var(--warn); font-weight: 600; }
.account-signature-thumb { flex: none; display: grid; place-items: center; width: 64px; height: 30px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.account-signature-thumb[hidden] { display: none; }
.account-signature-thumb .pod-signature { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; }
.account-menu-separator { height: 1px; margin: 6px 8px; background: var(--line-soft); }
/* Appearance and language (app.js "Appearance"): segmented choices and colour swatches, each applied at once. */
.appearance-dialog { width: min(580px, calc(100vw - 24px)); }
.appearance-body { display: grid; gap: 20px; max-height: min(66vh, 640px); overflow-y: auto; padding: 18px 22px 10px; }
.appearance-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.appearance-group legend { margin-bottom: 9px; padding: 0; color: var(--ink-2); font-size: 13px; font-weight: 700; }
.appearance-note { margin: 8px 0 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.45; }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 3px; max-width: 100%; padding: 3px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-sunk); }
.segmented label, .segmented button { position: relative; display: inline-flex; align-items: center; min-height: 32px; margin: 0; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-3); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.segmented label:hover, .segmented button:hover { color: var(--ink); }
.segmented input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked), .segmented button.active { background: var(--surface); color: var(--teal-strong); box-shadow: var(--shadow-segment); }
.segmented label:has(input:focus-visible), .segmented button:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px 6px; }
.swatch { position: relative; display: grid; justify-items: center; gap: 6px; width: 68px; color: var(--ink-3); font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center; cursor: pointer; }
.swatch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.swatch-chip { width: 38px; height: 38px; border: 3px solid var(--surface); border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px var(--line-strong); transition: box-shadow .12s ease; }
.swatch:hover .swatch-chip { box-shadow: 0 0 0 1px var(--ink-4); }
.swatch:has(input:checked) { color: var(--ink); }
.swatch:has(input:checked) .swatch-chip { box-shadow: 0 0 0 2px var(--teal); }
.swatch:has(input:focus-visible) .swatch-chip { outline: 2px solid var(--teal); outline-offset: 3px; }
/* The swatches show the choices themselves (styles.css's accent and canvas blocks), so their colours are fixed. */
.swatch[data-swatch="teal"] { --swatch: linear-gradient(135deg, #146c73 0 50%, #0e3a3f 50% 100%); }
.swatch[data-swatch="blue"] { --swatch: linear-gradient(135deg, #1d5fb0 0 50%, #10294a 50% 100%); }
.swatch[data-swatch="indigo"] { --swatch: linear-gradient(135deg, #4a4fc2 0 50%, #1d1f4d 50% 100%); }
.swatch[data-swatch="green"] { --swatch: linear-gradient(135deg, #1d7448 0 50%, #0e3424 50% 100%); }
.swatch[data-swatch="amber"] { --swatch: linear-gradient(135deg, #9a5a0c 0 50%, #3b2608 50% 100%); }
.swatch[data-swatch="rose"] { --swatch: linear-gradient(135deg, #b2325a 0 50%, #3e1323 50% 100%); }
.swatch[data-swatch="slate"] { --swatch: linear-gradient(135deg, #46596b 0 50%, #1c252e 50% 100%); }
.swatch[data-swatch="concrete"] { --swatch: #edf0f2; }
.swatch[data-swatch="white"] { --swatch: #fff; }
.swatch[data-swatch="warm"] { --swatch: #f3efe8; }
.swatch[data-swatch="cool"] { --swatch: #eaf0f6; }
.swatch[data-swatch="mint"] { --swatch: #e9f2ee; }
/* In the dark theme the backgrounds are its dark ones, and the swatches show those. */
:root[data-theme="dark"] .swatch[data-swatch="concrete"] { --swatch: #0e1316; }
:root[data-theme="dark"] .swatch[data-swatch="white"] { --swatch: #060809; }
:root[data-theme="dark"] .swatch[data-swatch="warm"] { --swatch: #16120e; }
:root[data-theme="dark"] .swatch[data-swatch="cool"] { --swatch: #0b1220; }
:root[data-theme="dark"] .swatch[data-swatch="mint"] { --swatch: #0b1511; }
.form-error { margin: 0; padding: 9px 12px; border: 1px solid var(--stop-line); border-radius: 6px; background: var(--stop-tint); color: var(--stop); font-weight: 600; }
.form-error[hidden] { display: none; }
.page { display: none; }
.page.active { display: block; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.metric, .panel { background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.metric { padding: 18px; border-top: 3px solid var(--metric-edge); }
.metric span { display: block; color: var(--ink-label); }
.metric strong { display: block; font-size: 28px; margin-top: 8px; }
/* The Dashboard: a greeting line beside the warehouse switch, the role's strip (only while something
   needs it), then five cards. They sit in one column on a phone, two from 720px of page width and three
   from 1080px, where the latest actions take the third column over both rows and scroll inside it (its
   own length never stretches the rows). The page is the size container, so the sidebar's width, the
   icon rail and the drawer all count. */
#page-dashboard { container: dashboard / inline-size; }
.dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin: -6px 0 14px; }
.dash-hello { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.dash-hello h2 { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 19px; font-weight: 700; }
.hero-name { color: var(--teal-strong); }
.role-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: var(--surface-sunk); color: var(--ink-2); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.role-chip.role-admin { background: var(--dock); color: var(--dock-text); }
.role-chip.role-manager { background: var(--violet-tint); color: var(--violet); }
.role-chip.role-user { background: var(--teal-tint); color: var(--teal-strong); }
.dash-date { display: inline-flex; align-items: baseline; gap: 6px; color: var(--ink-3); font-size: 13px; }
.dash-date strong { color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.dash-head .warehouse-switch[hidden] { display: none; }
/* The role's strip: a mark, its title, one link per thing that needs looking at. */
.dash-alerts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; padding: 9px 14px; border: 1px solid var(--warn-line); border-radius: var(--radius-lg); background: var(--warn-tint); }
.dash-alerts[hidden] { display: none; }
.dash-alerts-title { display: inline-flex; align-items: center; gap: 8px; color: var(--warn); font-size: 13px; font-weight: 700; white-space: nowrap; }
.dash-alerts-mark { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--amber); }
.dash-alerts-mark::after { content: ""; position: absolute; top: 4px; left: 8px; width: 2px; height: 6px; border-radius: 1px; background: var(--surface); box-shadow: 0 8px 0 var(--surface); }
.dash-alert-list { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-alert { display: inline-flex; align-items: baseline; gap: 5px; min-height: 28px; padding: 4px 11px; border: 1px solid var(--warn-line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.dash-alert b { color: var(--warn); font-size: 13px; font-variant-numeric: tabular-nums; }
.dash-alert.tone-bad b { color: var(--stop); }
button.dash-alert:hover { border-color: var(--warn); color: var(--ink); }
/* The five cards. */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "new" "dispatched" "carts" "pick" "activity"; gap: 16px; transition: opacity .15s ease; }
#page-dashboard.is-loading .dash-grid { opacity: .7; }
#dash-new-orders { grid-area: new; }
#dash-dispatched { grid-area: dispatched; }
#dash-pipe-carts { grid-area: carts; }
#dash-self-pick { grid-area: pick; }
#dash-activity { grid-area: activity; }
@container dashboard (min-width: 720px) {
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "new dispatched" "carts pick" "activity activity"; }
  .dash-grid.no-pipe-carts { grid-template-areas: "new dispatched" "pick pick" "activity activity"; }
  /* The latest actions across the page: newest first down the left column, then the right. */
  .dash-card .dash-activity-list { display: block; columns: 2; column-gap: 12px; }
  .dash-card .dash-activity-list > li { break-inside: avoid; }
}
@container dashboard (min-width: 1080px) {
  .dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "new dispatched activity" "carts pick activity"; }
  .dash-grid.no-pipe-carts { grid-template-areas: "new dispatched activity" "pick pick activity"; }
  .dash-card-activity { contain: size; min-height: 460px; }
  .dash-card-activity .dash-activity-list { display: grid; flex: 1 1 auto; min-height: 0; overflow-y: auto; columns: auto; }
}
.dash-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--card-line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.dash-card[hidden] { display: none; }
.dash-card-head { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 16px 2px; }
.dash-card-icon { position: relative; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--teal-tint); }
.dash-card-icon::after { content: ""; position: absolute; inset: 7px; background: var(--teal-strong); -webkit-mask: var(--icon, var(--i-page)) center / contain no-repeat; mask: var(--icon, var(--i-page)) center / contain no-repeat; }
.dash-card-head h2 { flex: 1; min-width: 0; overflow: hidden; font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.dash-card-tools { display: flex; flex: none; align-items: center; gap: 6px; }
.dash-tool { min-height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.dash-tool:hover { border-color: var(--teal); background: var(--teal-wash); color: var(--teal-strong); }
.dash-segment { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--fill-2); }
.dash-segment button { min-height: 26px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.dash-segment button:hover { background: var(--segment-hover); color: var(--ink); }
.dash-segment button.active { background: var(--segment-on); color: var(--teal-strong); box-shadow: var(--shadow-segment), var(--shadow-segment-ring); }
/* The card's figure (a link to its list) with what it counts; beside it a note and the last seven days
   (today the brand colour). */
.dash-kpi { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 8px 16px 0; }
.dash-kpi-value { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink-3); font-size: 13.5px; font-weight: 600; text-align: left; }
.dash-kpi-value strong { color: var(--ink); font-size: 36px; font-weight: 700; letter-spacing: -.01em; line-height: 1; }
.dash-kpi-value:hover strong { color: var(--teal-text); }
.dash-kpi-note { color: var(--ink-4); font-size: 12.5px; white-space: nowrap; }
.dash-kpi-note::before { content: "·"; margin-right: 8px; }
.dash-kpi-side { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 6px; }
.dash-kpi-meta { display: inline-flex; align-items: baseline; gap: 5px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.dash-kpi-meta b { color: var(--ink); font-size: 14px; }
.dash-trend { display: flex; align-items: flex-end; gap: 3px; height: 30px; }
.dash-trend-bar { width: 8px; min-height: 2px; border-radius: 2px 2px 1px 1px; background: var(--teal-tint-strong); }
.dash-trend-bar.is-zero { background: var(--fill-2); }
.dash-trend-bar.is-today { background: var(--teal); }
/* The colour of a status, a place or a stage: a chip's dot, a bar's segment, a legend's square. */
:is(.dash-stat, .dash-legend-item, .dash-cart-bar > span).tone-wait { --tone: var(--amber); }
:is(.dash-stat, .dash-legend-item, .dash-cart-bar > span).tone-plan { --tone: var(--teal); }
:is(.dash-stat, .dash-legend-item, .dash-cart-bar > span).tone-road { --tone: var(--road-mark); }
:is(.dash-stat, .dash-legend-item, .dash-cart-bar > span).tone-done { --tone: var(--go-mark); }
:is(.dash-stat, .dash-legend-item, .dash-cart-bar > span).tone-off { --tone: var(--dot-off); }
:is(.dash-stat, .dash-legend-item, .dash-cart-bar > span).tone-pick { --tone: var(--violet); }
.dash-stats { display: flex; flex-wrap: wrap; gap: 5px; padding: 12px 16px 0; }
.dash-stat { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 10px 0 8px; border: 1px solid transparent; border-radius: 999px; background: var(--surface-sunk); color: var(--ink-3); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.dash-stat::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tone, var(--dot)); }
.dash-stat b { color: var(--ink); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.dash-stat:hover { border-color: var(--line-strong); color: var(--ink-2); }
.dash-stat.is-zero { opacity: .62; }
/* How far today's delivery trucks have got. */
.dash-progress { display: grid; gap: 6px; width: calc(100% - 32px); min-height: 0; margin: 12px 16px 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink-3); text-align: left; }
.dash-progress-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 600; }
.dash-progress-label b { color: var(--ink); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.dash-progress:hover .dash-progress-label { color: var(--ink); }
.dash-progress-track { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: var(--fill-2); }
.dash-progress-track > span { display: block; height: 100%; border-radius: inherit; background: var(--road-mark); }
/* What is late: a tinted line each (amber, or red), its count and a chevron. */
.dash-notices { display: grid; gap: 6px; padding: 12px 16px 0; }
.dash-notice { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 12px; border: 0; border-radius: 8px; background: var(--warn-tint); color: var(--warn); font-size: 12.5px; font-weight: 600; text-align: left; }
.dash-notice.tone-bad { background: var(--stop-tint); color: var(--stop); }
.dash-notice:hover { box-shadow: inset 0 0 0 1px var(--warn-line); }
.dash-notice.tone-bad:hover { box-shadow: inset 0 0 0 1px var(--stop-line); }
.dash-notice-text { flex: 1; min-width: 0; }
.dash-notice b { font-size: 14px; font-variant-numeric: tabular-nums; }
.dash-go { flex: none; width: 7px; height: 7px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg); }
/* A card's rows: what (and its pill) over a line of facts; a click opens it. */
.dash-list-title { padding: 14px 16px 0; color: var(--ink-4); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }
.dash-list { display: grid; margin: 8px 0 10px; padding: 0 8px; list-style: none; }
.dash-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main side" "sub extra"; align-items: center; gap: 3px 10px; width: 100%; min-height: 0; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); text-align: left; }
.dash-row:hover { background: var(--teal-wash); }
.dash-row-main { grid-area: main; overflow: hidden; color: var(--ink); font-size: 13.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.dash-row-side { display: inline-flex; grid-area: side; justify-self: end; }
.dash-row-sub { display: flex; grid-area: sub; min-width: 0; overflow: hidden; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.dash-row:not(:has(.dash-row-extra)) .dash-row-sub { grid-column: 1 / -1; }
.dash-row-sub > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dash-row-sub > span.is-fixed { flex: none; }
.dash-row-sub > span + span::before { content: "·"; margin: 0 6px; color: var(--ink-4); }
.dash-row-extra { grid-area: extra; justify-self: end; }
.dash-row-extra .qty-chips { flex-wrap: nowrap; }
.dash-row .wait-chip { margin-top: 0; }
.dash-empty { margin: 0; padding: 22px 16px 24px; color: var(--ink-4); font-size: 13px; text-align: center; }
.dash-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding: 8px 16px 10px; border-top: 1px solid var(--line-soft); }
.dash-more { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; margin-left: auto; padding: 0 2px; border: 0; background: transparent; color: var(--teal-link); font-size: 13px; font-weight: 600; white-space: nowrap; }
.dash-more:hover { color: var(--teal-link-hover); }
.dash-more .dash-go { width: 6px; height: 6px; }
.dash-foot-link { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; min-height: 30px; padding: 0; border: 0; background: transparent; color: var(--ink-3); font-size: 12.5px; font-weight: 600; text-align: left; }
.dash-foot-link b { color: var(--ink); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.dash-foot-link:hover { color: var(--ink); }
/* Pipe Carts: one bar of their places and a legend of them. */
.dash-cart-bar { display: flex; gap: 2px; height: 10px; margin: 14px 16px 0; overflow: hidden; border-radius: 999px; background: var(--fill-2); }
.dash-cart-bar > span { min-width: 4px; background: var(--tone); }
.dash-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 0 8px; margin: 8px 0 0; padding: 0 8px; list-style: none; }
.dash-legend-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-3); font-size: 12.5px; font-weight: 600; text-align: left; }
.dash-legend-item:hover { background: var(--surface-sunk); color: var(--ink-2); }
.dash-legend-item b { margin-left: auto; color: var(--ink); font-size: 13.5px; }
.dash-legend-item.is-zero b { color: var(--ink-4); }
.dash-dot { flex: none; width: 8px; height: 8px; border-radius: 3px; background: var(--tone); }
/* The latest actions: who (initials), what happened, on which truck or order, when. */
.dash-activity-list { display: grid; align-content: start; margin: 6px 0 0; padding: 0 8px 10px; list-style: none; }
.dash-activity { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 0; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); text-align: left; }
.dash-activity:not(:disabled):hover { background: var(--teal-wash); }
.dash-activity:disabled { cursor: default; }
.dash-avatar { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--teal-tint); color: var(--teal-strong); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.dash-avatar.is-system { background: var(--fill-2); }
.dash-avatar.is-system::after { content: ""; width: 15px; height: 15px; background: var(--ink-4); -webkit-mask: var(--i-dashboard) center / contain no-repeat; mask: var(--i-dashboard) center / contain no-repeat; }
.dash-activity-main { display: grid; flex: 1; gap: 2px; min-width: 0; }
.dash-activity-what { overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dash-activity-sub { display: flex; min-width: 0; overflow: hidden; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.dash-activity-sub > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dash-activity-sub > span + span::before { content: "·"; margin: 0 6px; color: var(--ink-4); }
.dash-activity-ref { display: inline-flex; flex: none; align-items: center; gap: 4px; color: var(--ink-2); font-weight: 600; }
.dash-activity-ref::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--ink-4); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.dash-activity-time { flex: none; align-self: flex-start; padding-top: 2px; color: var(--ink-4); font-size: 11.5px; white-space: nowrap; }
.master-missing-chips { border-bottom: 1px solid var(--line-soft); }
/* Tabs (the email templates) in Truck Plans' look: a 2px teal underline and a count. */
.focus-tabs { display: flex; align-items: center; gap: 0 22px; padding: 2px 20px 0; border-bottom: 1px solid var(--line-soft); }
.focus-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; margin-bottom: -1px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--ink-3); font-weight: 600; }
.focus-tab:hover { color: var(--ink); }
.focus-tab.active { color: var(--teal-text); border-bottom-color: var(--teal); }
.focus-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--fill); color: var(--ink-count); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.5; text-align: center; white-space: nowrap; }
.focus-tab.active .focus-count { color: var(--teal-ink); background: var(--teal-tint-strong); }
.sort-header { display: inline-flex; align-items: center; gap: 4px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-transform: inherit; cursor: pointer; }
.sort-header:hover { color: var(--ink-row); }
.sort-mark { display: inline-block; width: 10px; text-align: center; font-size: 9px; color: var(--teal-link); }
/* The waiting-days threshold: inside the Order Pool's quick-filter checkbox. */
.stale-days-input { width: 60px; height: 28px; padding: 0 6px; border-radius: 6px; text-align: center; }
.status-checkboxes .stale-days-input { width: 50px; height: 24px; border-radius: 6px; cursor: text; }
.stale-filter .status-checkboxes label { height: auto; min-height: 32px; flex-wrap: wrap; }
.panel { margin-bottom: 16px; }
.panel-header, .toolbar { min-height: 60px; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); }
.panel-header h2, .toolbar h2 { font-weight: 700; }
.toolbar { gap: 16px; }
.toolbar > h2 { flex-shrink: 0; }
.toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; white-space: nowrap; }
.toolbar-actions .selection-summary { align-self: center; }
/* The warehouses (Auto Dispatch, the Dashboard's focus lists) as one segmented control. */
.warehouse-switch { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; padding: 3px; border-radius: 10px; background: var(--fill-2); }
.warehouse-switch button { min-width: 112px; min-height: 32px; padding: 0 16px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-weight: 600; }
.warehouse-switch button:hover { background: var(--segment-hover); color: var(--ink); }
.warehouse-switch button.active { color: var(--teal-strong); background: var(--segment-on); box-shadow: var(--shadow-segment), var(--shadow-segment-ring); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
input, select { height: 34px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0 9px; background: var(--input); color: var(--ink); }
textarea { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 9px; resize: vertical; color: var(--ink); background: var(--input); }
textarea[name="special_instructions"] { min-height: 90px; }
/* Every select draws the same chevron (Truck Plans' filters had it first). */
select { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%237b878e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-ring); }
input::placeholder, textarea::placeholder { color: var(--ink-4); }
button { min-height: 34px; border-radius: var(--radius-sm); padding: 0 13px; border: 1px solid transparent; transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease; }
.primary { color: var(--on-accent); background: var(--teal); border-color: var(--teal); font-weight: 600; }
.primary:hover { background: var(--teal-hover); border-color: var(--teal-hover); }
.primary:disabled { opacity: .45; cursor: not-allowed; }
.secondary { color: var(--ink); background: var(--button); border-color: var(--line-strong); font-weight: 500; }
.secondary:hover { background: var(--surface-sunk); border-color: var(--line-hover); }
/* Auto Dispatch's own action wears the logo's yellow (the board's one loud button); a draft truck's
   Recalculate and its add buttons are quiet. */
#generate-dispatch {
  color: var(--on-signal);
  background: var(--signal);
  border-color: var(--signal);
  font-weight: 700;
}
#generate-dispatch:hover {
  background: var(--signal-hover);
  border-color: var(--signal-hover);
}
.recalculate-truck { min-height: 30px; padding: 0 10px; border-color: transparent; background: transparent; color: var(--teal-strong); font-size: 13px; font-weight: 600; }
.recalculate-truck:hover { border-color: transparent; background: var(--teal-tint); }
.add-orders { min-height: 30px; padding: 0 12px; border-color: var(--line); border-radius: 8px; background: var(--button); color: var(--teal-ink); font-size: 13px; font-weight: 600; }
.add-orders:hover { border-color: var(--teal-line); background: var(--teal-wash); }
.danger { color: var(--stop); background: var(--button); border-color: var(--stop-line); font-weight: 500; min-height: 28px; padding: 0 9px; }
.danger:hover { color: var(--stop-deep); background: var(--stop-tint); border-color: var(--stop); }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th { color: var(--ink-3); background: var(--surface-sunk); font-size: 12px; font-weight: 600; letter-spacing: .01em; text-align: left; }
th, td { padding: 11px 13px; border-bottom: 1px solid var(--line-row); vertical-align: top; white-space: nowrap; }
/* 緊湊 (Appearance): shorter rows and bars, for more rows on a small screen. */
:root[data-density="compact"] th, :root[data-density="compact"] td { padding-top: 7px; padding-bottom: 7px; }
:root[data-density="compact"] :is(.order-pool-table, .self-pick-table) > tbody > tr > td.col-select { padding-top: 9px; }
:root[data-density="compact"] .panel-header, :root[data-density="compact"] .toolbar { min-height: 50px; padding-top: 8px; padding-bottom: 8px; }
:root[data-density="compact"] .topbar { min-height: 72px; }
/* A list's first and last columns line up with its card's 20px inset (the toolbar's title, the filters).
   The order pool, Self Pick, Truck Plans and POD tables size their own edge columns. */
.panel > .table-wrap > table:not(.order-pool-table):not(.self-pick-table):not(.plans-table):not(.pod-table) > * > tr > :first-child { padding-left: 20px; }
.panel > .table-wrap > table:not(.order-pool-table):not(.self-pick-table):not(.plans-table):not(.pod-table) > * > tr > :last-child { padding-right: 20px; }
/* Reference-data management lists (Trade, POC, address, warehouse, holiday, dockdoor, truck type, shipment
   unit, pipe cart, user) put single-line text next to 34px action buttons: centre their cells so the text does
   not hug the top of the row. The order pool, dispatch and truck plan tables keep the default top alignment
   for their multi-line cells. */
#page-trades td, #page-pocs td, #page-addresses td, #page-warehouses td, #page-holidays td, #page-dockdoors td,
#page-trucks td, #page-units td, #page-pipe-carts td, #page-users td { vertical-align: middle; }
/* Row action buttons (the Edit / Delete pairs in the order pool, Trade, POC, address, warehouse, dockdoor,
   truck type, shipment unit, pipe cart, holiday and user tables, and the other buttons in those rows):
   text buttons, teal or red, that tint when pointed at, so a page of rows reads as data rather than as
   rows of boxes. One height and one padding; the first button's text lines up with its column's header,
   its tint reaching into the cell's padding. */
.edit-order, .delete-order, .edit-trade, .delete-trade, .edit-poc, .delete-poc, .edit-address, .delete-address,
.edit-warehouse, .delete-warehouse, .edit-dockdoor, .delete-dockdoor, .edit-truck-type, .delete-truck-type,
.edit-unit, .delete-unit, .edit-pipe-cart, .delete-pipe-cart, .edit-holiday, .delete-holiday,
.edit-user, .reset-user-password, .delete-user, .user-driver-devices, .pipe-cart-history,
.restore-deleted-order, .remove-group { min-height: 30px; padding: 0 10px; border-color: transparent; border-radius: 7px; background: transparent; color: var(--teal-strong); font-weight: 600; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.delete-order, .delete-trade, .delete-poc, .delete-address, .delete-warehouse, .delete-dockdoor, .delete-truck-type,
.delete-unit, .delete-pipe-cart, .delete-holiday, .delete-user, .remove-group { color: var(--stop); }
td > :is(.edit-order, .delete-order, .edit-trade, .delete-trade, .edit-poc, .delete-poc, .edit-address, .delete-address,
.edit-warehouse, .delete-warehouse, .edit-dockdoor, .delete-dockdoor, .edit-truck-type, .delete-truck-type, .edit-unit,
.delete-unit, .edit-pipe-cart, .delete-pipe-cart, .edit-holiday, .delete-holiday, .edit-user, .pipe-cart-history,
.restore-deleted-order, .remove-group):first-child, .row-actions > :first-child { margin-left: -10px; }
/* Hover feedback for the same buttons: a teal tint, a red one for Delete. */
.edit-order:hover, .edit-trade:hover, .edit-poc:hover, .edit-address:hover, .edit-warehouse:hover, .edit-dockdoor:hover,
.edit-truck-type:hover, .edit-unit:hover, .edit-pipe-cart:hover, .edit-holiday:hover, .edit-user:hover,
.reset-user-password:hover, .user-driver-devices:hover, .pipe-cart-history:hover,
.restore-deleted-order:hover { background: var(--teal-tint); border-color: transparent; color: var(--teal-strong); }
.delete-order:hover, .delete-trade:hover, .delete-poc:hover, .delete-address:hover, .delete-warehouse:hover, .delete-dockdoor:hover,
.delete-truck-type:hover, .delete-unit:hover, .delete-pipe-cart:hover, .delete-holiday:hover,
.delete-user:hover, .remove-group:hover { background: var(--stop-tint); border-color: transparent; color: var(--stop-deep); }
/* Order Pool: status tabs with the page's buttons at their right, one row of filters (as Self Pick's), then
   one order per row in a fixed-layout table that fits a 1366px window without scrolling sideways (it
   scrolls inside its card only below that): the order number over its Trade, its packages (only the ones
   it has), the delivery place over its address, the recipient, the day it came in over its warehouse and
   wait, where it stands (and its truck), and Edit beside ⋯. Cells hold two short lines; a long value ends
   in an ellipsis with the whole of it in the cell's tooltip. */
.plans-tabs-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; padding: 7px 0; }
.plans-tabs-actions .more-button { width: 34px; min-height: 34px; }
.plans-tabs-actions .more-button[aria-expanded="true"], .plans-tabs-actions .more-button:hover { background: var(--fill); color: var(--ink); }
.order-pool-filters .plans-search { flex: 1 1 160px; max-width: 420px; }
.order-pool-filters select { width: auto; min-width: 0; max-width: 180px; }
.order-pool-filters #order-trade-filter { max-width: 170px; }
.order-pool-filters .plans-date > select { min-width: 0; height: 34px; padding: 0 30px 0 2px; border: 0; background-color: transparent; background-position: right 10px center; color: var(--ink-body); }
.order-pool-filters .plans-date > select:hover, .order-pool-filters .plans-date > select:focus { border: 0; background-color: transparent; box-shadow: none; outline: none; }
.order-pool-filters .plans-text-filter > input { width: 150px; padding: 0 6px; }
.order-pool-filters .plans-date:has(> .is-set) { border-color: var(--teal); background-color: var(--surface); box-shadow: inset 0 0 0 1px var(--teal-ring); }
.order-pool-filters .plans-date > .is-set { box-shadow: none; }
.order-pool-filters:not(:has(> [data-more-group]:not([hidden]))) > .filter-break, .order-pool-filters > [hidden] { display: none; }
.order-pool-filters .filter-more-toggle { padding: 0 6px; }
.order-pool-filters .filter-clear { padding: 0 6px; color: var(--ink-3); font-weight: 500; }
.order-pool-filters .filter-clear:hover { color: var(--teal-strong); }
.order-pool-table { table-layout: fixed; min-width: 1000px; }
.order-pool-table > thead > tr > th { height: 40px; padding-top: 0; padding-bottom: 0; border-bottom-color: var(--line-soft); background: var(--surface-head); vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-pool-table > tbody > tr > td { padding-top: 11px; padding-bottom: 11px; vertical-align: top; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
/* Widths from what the cells hold: a 23-character order number on one line, the longest status pill
   (Awaiting Pickup in English) over a truck number, Edit + ⋯. The address takes the rest: 232px in a
   1366px window. The date / warehouse header may wrap. */
.order-pool-table .col-select { width: 46px; padding-left: 20px; padding-right: 4px; }
.order-pool-table .col-order { width: 200px; }
.order-pool-table .col-packages { width: 120px; }
.order-pool-table .col-recipient { width: 150px; }
.order-pool-table .col-created { width: 120px; }
.order-pool-table > thead > tr > th.col-created { white-space: normal; line-height: 1.25; }
.order-pool-table th.col-created .pod-sort-pair { flex-wrap: wrap; gap: 0 6px; }
.order-pool-table th.col-created .sort-header { white-space: nowrap; }
.order-pool-table .col-status { width: 118px; padding-right: 6px; }
.order-pool-table .col-actions { width: 100px; padding-left: 4px; padding-right: 14px; }
:root:is([lang="en"], [lang="es"]) .order-pool-table .col-created { width: 136px; }
:root:is([lang="en"], [lang="es"]) .order-pool-table .col-status { width: 132px; }
@media (min-width: 1600px) {
  .order-pool-table .col-order { width: 230px; }
  .order-pool-table .col-packages { width: 160px; }
  .order-pool-table .col-recipient { width: 200px; }
  .order-pool-table .col-created { width: 150px; }
}
@media (max-width: 1365px) {
  .order-pool-table .col-select { width: 40px; padding-left: 16px; }
  .order-pool-table .col-order { width: 186px; }
  .order-pool-table .col-packages { width: 110px; }
  .order-pool-table .col-recipient { width: 136px; }
  .order-pool-table .col-created { width: 112px; }
}
.order-pool-table > tbody > tr > td.col-select { padding-top: 13px; }
.order-pool-table input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--teal); cursor: pointer; }
.order-pool-table > tbody > tr:hover > td { background: var(--surface-hover); }
.order-pool-table > tbody > tr.selected > td { background: var(--teal-selected); }
.order-pool-table > tbody > tr[data-order-id]:not(.op-locked) { cursor: pointer; }
.order-pool-table > tbody > tr:hover .more-button { color: var(--ink-2); }
.order-pool-table .order-no-text { font-size: 14px; }
/* The day over the warehouse and, while the order waits for a truck, how long: plain, amber from the
   waiting-days threshold, red from a week past it. */
.op-created-sub { display: flex; min-width: 0; white-space: nowrap; }
.op-wait { flex: none; }
.op-wait::before { content: "·"; margin: 0 6px; color: var(--ink-ghost); }
.op-wait.tone-plain { color: var(--ink-4); }
.op-wait.tone-warn { color: var(--warn); font-weight: 600; }
.op-wait.tone-bad { color: var(--stop); font-weight: 600; }
/* Under the status, the truck the order is on: its number links to Truck Plans, a draft to Auto Dispatch. */
.op-trucks { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 5px; }
.op-truck-link { min-height: 0; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--teal-link); font-size: 12px; font-weight: 600; text-decoration: underline dotted; text-underline-offset: 3px; }
.op-truck-link:hover { color: var(--teal-link-hover); text-decoration-style: solid; }
.op-draft-link { color: var(--ink-3); font-weight: 500; }
.op-truck-more { color: var(--ink-4); font-size: 12px; }
/* An order number never breaks: one too long for its column ends in an ellipsis (the whole number in
   its tooltip); an RMA's "Pick Up:" sits on a small line of its own above it. */
.order-no-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.order-no-line .order-pickup { display: block; }
/* A cell's lines: the first in the row's ink, the next ones smaller and grey; .clamp-1 / .clamp-2 end
   a long one in an ellipsis. */
.cell-line, .cell-sub { display: block; min-width: 0; }
.cell-sub { margin-top: 2px; color: var(--ink-3); font-size: 12.5px; }
.cell-strong { color: var(--ink); font-weight: 600; }
.clamp-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tabular { font-variant-numeric: tabular-nums; }
.order-no-text { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cell-line .badge { margin-right: 6px; padding: 1px 7px; font-size: 11px; vertical-align: 1px; }
/* Packages: only the ones an order has, a number and its unit each, wrapping as whole pairs. */
.qty-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.qty-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 1px 7px; border-radius: 6px; background: var(--fill); color: var(--ink-2); font-size: 12px; white-space: nowrap; }
.qty-chip strong { color: var(--ink); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* A status as a pill with a dot (Truck Plans' look), coloured by where the order stands: waiting
   (amber), on a truck (teal), out on the road (blue), done (green), cancelled or off (grey). */
.state-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 9px 2px 7px; border-radius: 999px; background: var(--fill); color: var(--ink-2); font-size: 12px; font-weight: 600; line-height: 1.45; white-space: nowrap; }
.state-pill::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); }
.state-pill.tone-wait { color: var(--warn); background: var(--warn-tint); }
.state-pill.tone-wait::before { background: var(--amber); }
.state-pill.tone-plan { color: var(--teal-strong); background: var(--teal-tint); }
.state-pill.tone-plan::before { background: var(--teal); }
.state-pill.tone-road { color: var(--road-ink); background: var(--road-tint); }
.state-pill.tone-road::before { background: var(--road-mark); }
.state-pill.tone-done { color: var(--go-ink); background: var(--go-tint); }
.state-pill.tone-done::before { background: var(--go-mark); }
.state-pill.tone-off { color: var(--ink-label); background: var(--fill-off); }
.state-pill.tone-off::before { background: var(--dot-off); }
.state-pill.tone-bad { color: var(--stop); background: var(--stop-tint); }
.state-pill.tone-bad::before { background: var(--stop-mark); }
/* A toolbar button that steps back (Deleted Orders): text only until pointed at. */
.toolbar-actions .quiet-button { border-color: transparent; background: transparent; color: var(--teal-strong); font-weight: 600; }
.toolbar-actions .quiet-button:hover { border-color: transparent; background: var(--teal-tint); }
/* The bulk bars' delete: red text on the dark bar. */
.plans-bulk-bar .bulk-danger { color: var(--bar-danger); border-color: var(--bar-danger-line); }
.plans-bulk-bar .bulk-danger:hover { background: var(--bar-danger-hover); color: var(--bar-ink); }
/* While orders are ticked the card keeps room for the floating bar under its last row. */
.panel.has-selection { margin-bottom: 84px; }
td.address { white-space: normal; min-width: 250px; line-height: 1.4; }
tbody tr:hover { background: var(--surface-head); }
.badge { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--fill-2); }
.badge.active, .badge.unassigned { color: var(--go); background: var(--go-tint); }
.badge.pending { color: var(--ink-2); background: var(--fill-2); }
.badge.dispatched, .badge.completed { color: var(--go); background: var(--go-tint); }
.badge.cancelled { color: var(--stop); background: var(--stop-tint); }
.badge.onsite { color: var(--info); background: var(--info-tint); }
.badge.offsite { color: var(--warn); background: var(--warn-tint); }
/* Self Pick page: the category (Self Pick / Prefab) and the pickup status. */
.badge.self_pick { color: var(--info); background: var(--info-tint); }
.badge.prefab { color: var(--violet); background: var(--violet-tint); }
.badge.awaiting_pickup { color: var(--warn); background: var(--warn-tint); }
.badge.picked_up { color: var(--go); background: var(--go-tint); }
#alerts { padding: 8px 16px 16px; }
.alert-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line-row); }
.alert-row:last-child { border: 0; }
.workflow ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; padding: 18px 18px 18px 44px; }
.workflow li { padding-right: 18px; line-height: 1.5; }
.dispatch-flow { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 42px 20px; }
.dispatch-flow span { padding: 12px 16px; border: 1px solid var(--line-dash); background: var(--surface-hover); border-radius: 5px; }
.dispatch-flow b { color: var(--ink-4); font-size: 18px; }
/* Auto Dispatch, the planning board. One bar: the warehouse switch, the board's numbers (orders still
   waiting, draft trucks, their units; overloaded and half-empty trucks in red / amber) and the two
   actions. Then the order pool, which folds away (its head stays: title, count, what is ticked and a
   quick filter), a strip with every draft truck's load, and the draft trucks. */
.dispatch-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 12px 16px 12px 14px; }
.dispatch-bar-main { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; min-width: 0; }
.dispatch-bar .warehouse-switch { justify-content: flex-start; }
.dispatch-bar > .toolbar-actions { margin-left: auto; }
.dispatch-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; }
.dispatch-stat { display: inline-flex; align-items: baseline; gap: 6px; color: var(--ink-3); font-size: 13px; white-space: nowrap; }
.dispatch-stat strong { color: var(--ink); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dispatch-stat.stat-bad, .dispatch-stat.stat-bad strong { color: var(--stop); }
.dispatch-stat.stat-warn, .dispatch-stat.stat-warn strong { color: var(--warn); }
.dispatch-pool-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 58px; padding: 10px 16px 10px 12px; border-bottom: 1px solid var(--line-soft); }
.dispatch-pool-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); }
.dispatch-pool-toggle:hover { background: var(--fill); }
.dispatch-pool-toggle svg { flex: none; width: 12px; height: 12px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transition: transform .15s ease; }
.dispatch-pool.is-collapsed .dispatch-pool-toggle svg { transform: none; }
.dispatch-pool-title { font-size: 16px; font-weight: 700; }
.dispatch-pool-toggle .list-count { margin-left: 0; }
.dispatch-pool-note { min-width: 0; flex: 1 1 260px; color: var(--ink-3); font-size: 13px; }
.dispatch-pool-selected { padding: 3px 10px; border-radius: 999px; background: var(--teal-tint); color: var(--teal-strong); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.dispatch-pool-selected[hidden] { display: none; }
.dispatch-pool-search { flex: 0 1 300px; }
.dispatch-pool.is-collapsed .pending-pool, .dispatch-pool.is-collapsed .dispatch-pool-search { display: none; }
.dispatch-pool.is-collapsed .dispatch-pool-head { border-bottom: 0; }
.pending-pool { max-height: 340px; }
.pending-pool thead th,
.add-order-list thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface-sunk);
  box-shadow: 0 1px 0 var(--line);
}
.pool-table { table-layout: fixed; min-width: 760px; }
.pool-table > thead > tr > th { height: 38px; padding-top: 0; padding-bottom: 0; vertical-align: middle; }
.pool-table > tbody > tr > td { padding-top: 9px; padding-bottom: 9px; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.pool-table .col-select { width: 46px; padding-left: 20px; padding-right: 4px; }
.pool-table .col-created { width: 104px; }
.pool-table .col-order { width: 230px; }
.pool-table .col-packages { width: 180px; }
.pool-table .col-capacity { width: 108px; }
.pool-table > tbody > tr > td.col-select { padding-top: 11px; }
.pool-table input[type="checkbox"] { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.pending-pool tbody tr.selected, .order-pool-table tbody tr.selected, .self-pick-table tbody tr.selected { background: var(--teal-selected); }
.pending-pool input[type="checkbox"], .add-order-list input[type="checkbox"], .order-pool-table input[type="checkbox"], .plans-table input[type="checkbox"], .self-pick-table input[type="checkbox"] { height: auto; }
/* The draft trucks at a glance: number, a meter (red stripes over capacity, amber under half) and the
   fill; a click goes to the truck's card. */
.dispatch-overview { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 6px; }
.dispatch-overview[hidden] { display: none; }
.dispatch-overview-label { margin-right: 4px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.overview-truck { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px; border: 1px solid var(--card-line); border-radius: 8px; background: var(--button); color: var(--ink); box-shadow: var(--shadow-1); }
.overview-truck:hover { border-color: var(--teal-line); background: var(--surface-hover); }
.overview-truck-no { font-weight: 700; font-variant-numeric: tabular-nums; }
.overview-truck-meter { display: block; width: 46px; height: 5px; border-radius: 999px; background: var(--meter-track); overflow: hidden; }
.overview-truck-meter i { display: block; height: 100%; border-radius: 999px; background: var(--go); }
.overview-truck.low .overview-truck-meter i { background: var(--amber-meter); }
.overview-truck.over { border-color: var(--stop-line); }
.overview-truck.over .overview-truck-meter i { background: repeating-linear-gradient(-45deg, var(--signal) 0 4px, var(--hazard) 4px 8px); }
.overview-truck-load { color: var(--ink-3); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.overview-truck.over .overview-truck-load { color: var(--stop); }
.overview-truck.low .overview-truck-load { color: var(--warn); }
.dispatch-empty p { margin-top: 6px; }
.warehouse-section { margin-top: 18px; }
.warehouse-title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; padding: 0 2px; }
.warehouse-title h2 { font-size: 18px; font-weight: 700; }
.warehouse-title span { color: var(--ink-3); }
.truck-card { position: relative; background: var(--surface); border: 1px solid var(--line-mid); border-radius: var(--radius-lg); margin-bottom: 16px; overflow: visible; box-shadow: var(--shadow-card); scroll-margin-top: 16px; }
.truck-card.overload { border-color: var(--stop); box-shadow: 0 0 0 1px var(--stop-ring); }
.truck-card.low-load { border-color: var(--amber-edge); box-shadow: 0 0 0 1px var(--amber-ring); }
.truck-card.flash-highlight { animation: truck-flash 5s ease-in-out; }
@keyframes truck-flash {
  0%, 24%, 52%, 100% { box-shadow: 0 0 0 0 transparent; }
  10%, 38% { box-shadow: 0 0 0 4px var(--signal-ring); border-color: var(--signal); }
}
/* Closing a draft truck (its orders go back to the pool) is a quiet × at the end of its header. */
.close-truck { width: 30px; height: 30px; min-height: 30px; color: var(--ink-4); font-size: 20px; }
.close-truck:hover { background: var(--stop-tint); color: var(--stop); }
.truck-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 10px 10px 10px 16px; background: var(--surface-hover); border-bottom: 1px solid var(--line-soft); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.truck-card.overload .truck-header { padding-top: 14px; }
.truck-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.truck-identity strong { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.truck-type { border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 600; }
.truck-type.box-truck { color: var(--go); background: var(--go-tint); }
.truck-type.flatbed { color: var(--info); background: var(--info-tint); }
.truck-stats { display: flex; align-items: center; gap: 12px; }
.truck-load { color: var(--ink-3); font-size: 13px; white-space: nowrap; }
.truck-load strong { color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.truck-utilization { min-width: 44px; font-variant-numeric: tabular-nums; text-align: right; }
.truck-utilization.over { color: var(--stop); }
.truck-utilization.low { color: var(--warn); }
.capacity-bar { width: 140px; height: 8px; background: var(--meter-track); border-radius: 4px; overflow: hidden; }
.capacity-bar i { display: block; height: 100%; background: var(--go); }
.capacity-bar i.low { background: var(--amber-meter); }
.capacity-bar i.over { background: repeating-linear-gradient(-45deg, var(--signal) 0 5px, var(--hazard) 5px 10px); }
.truck-warning { color: var(--warn-alert); font-weight: 700; }
.truck-warning.over { color: var(--stop); }
.order-lines span { display: block; line-height: 1.45; }
/* A draft truck's units: Truck Plans' opened-row table (the number cell drags, the packages open the
   quantity editor, long order and recipient lists open with "N more"), fixed so it never scrolls
   sideways in a 1366px window. */
.dispatch-table { table-layout: fixed; min-width: 860px; }
.dispatch-table th { padding: 9px 12px; border-bottom-color: var(--line-soft); background: var(--surface-head); color: var(--ink-label); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.dispatch-table td { padding: 11px 12px; border-bottom-color: var(--line-row); vertical-align: top; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.dispatch-table th:first-child, .dispatch-table td:first-child { padding-left: 16px; }
.dispatch-table .col-seq { width: 70px; }
.dispatch-table .col-orders { width: 176px; }
.dispatch-table .col-load { width: 150px; }
.dispatch-table .col-trade { width: 13%; }
.dispatch-table .col-recipient { width: 17%; }
.dispatch-table .col-remove { width: 72px; }
.dispatch-table tbody tr:hover td { background: var(--surface-head); }
.dispatch-table tbody tr:last-child td { border-bottom: 0; }
.dispatch-table tbody tr.dragging { opacity: .4; }
.dispatch-table tbody tr.drag-over { box-shadow: inset 0 2px var(--teal-alt); }
.dispatch-table tr[data-reorder] .unit-seq { cursor: grab; }
.dispatch-table tr[data-reorder]:hover .drag-handle { color: var(--ink-note); }
.dispatch-table .unit-actions { padding-top: 7px; text-align: right; }
.dispatch-table .remove-group { padding: 0 8px; white-space: nowrap; }
:root:is([lang="en"], [lang="es"]) .dispatch-table .col-remove { width: 88px; }
.truck-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line-soft); }
.truck-actions .spacer { flex: 1; }
.add-order-list { max-height: 420px; }
.pipe-cart-assignment-panel { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); background: var(--surface-hover); border-radius: var(--radius); }
.pipe-cart-assignment-title { display: grid; gap: 3px; }
.pipe-cart-assignment-list { display: grid; gap: 10px; max-height: 360px; overflow: auto; }
.pipe-cart-assignment-item { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(240px, 1fr); gap: 12px; padding: 10px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); }
.pipe-cart-select-grid { display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 8px; }
.pipe-cart-select-grid label, .pipe-cart-slot { display: grid; gap: 5px; color: var(--ink-note); }
/* Searchable Pipe Cart picker: the box filters the cart list as you type; the menu is fixed-positioned
   (placed from JS) so it is not clipped by the scrolling assignment list or the dialog. */
.pipe-cart-picker { position: relative; }
.pipe-cart-picker-input { width: 100%; padding-right: 28px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%237b878e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 9px center; }
.pipe-cart-picker-menu { position: fixed; z-index: 20; max-height: 220px; overflow: auto; padding: 4px; border: 1px solid var(--line-mid); border-radius: 4px; background: var(--popover); box-shadow: var(--shadow-picker); }
.pipe-cart-picker-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 30px; padding: 0 8px; border: 0; border-radius: 3px; background: transparent; color: var(--ink-body); text-align: left; cursor: pointer; }
.pipe-cart-picker-option.active { background: var(--teal-selected); }
.pipe-cart-picker-option:disabled { color: var(--ink-faint); cursor: not-allowed; background: transparent; }
.pipe-cart-picker-option .muted { font-size: 12px; white-space: nowrap; }
.pipe-cart-picker-empty { padding: 6px 8px; }
/* The Pipe Cart page (app.js "Pipe Carts"): a card per place, the list with its marks, the bulk and status dialogs. */
/* One card per place, the count large; a card filters the list (the open one is ringed). */
.pipe-cart-stats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.pipe-cart-stat { position: relative; display: grid; align-content: start; gap: 4px; min-height: 86px; padding: 12px 14px 12px 16px; border: 1px solid var(--card-line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); color: var(--ink-2); text-align: left; overflow: hidden; }
.pipe-cart-stat::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--line-strong); }
.pipe-cart-stat strong { color: var(--ink); font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pipe-cart-stat-label { color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.pipe-cart-stat-note { color: var(--ink-4); font-size: 11.5px; font-weight: 600; }
.pipe-cart-stat-note.warn { color: var(--stop); }
.pipe-cart-stat:hover { border-color: var(--line-strong); }
.pipe-cart-stat.active { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-ring), var(--shadow-card); }
.pipe-cart-stat.tone-all::before { background: var(--ink-3); }
.pipe-cart-stat.tone-done::before { background: var(--go); }
.pipe-cart-stat.tone-plan::before { background: var(--teal); }
.pipe-cart-stat.tone-road::before { background: var(--info); }
.pipe-cart-stat.tone-wait::before { background: var(--signal); }
.pipe-cart-stat.tone-off::before { background: var(--ink-4); }
.pipe-cart-stat.tone-bad::before { background: var(--stop); }
.pipe-cart-filters .plans-search { flex: 1 1 300px; }
.pipe-carts-table { table-layout: fixed; min-width: 880px; }
.pipe-carts-table th, .pipe-carts-table td { vertical-align: middle; }
.pipe-carts-table .col-select { width: 52px; }
.pipe-carts-table td.col-select { overflow: visible; text-overflow: clip; }
.pipe-carts-table .col-cart { width: 150px; }
.pipe-carts-table .col-where { width: 150px; }
.pipe-carts-table .col-trip { width: 200px; }
.pipe-carts-table .col-days { width: 130px; }
.pipe-carts-table .col-actions { width: 250px; }
.pipe-carts-table td { overflow: hidden; text-overflow: ellipsis; }
.pipe-carts-table td.col-actions { overflow: visible; }
.pipe-carts-table.no-select .col-select { display: none; }
.pipe-carts-table input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--teal); cursor: pointer; }
.pipe-carts-table > tbody > tr:hover > td { background: var(--surface-sunk); }
.pipe-carts-table > tbody > tr.selected > td { background: var(--teal-tint); }
.pipe-carts-table .clamp-2 { white-space: normal; }
.pipe-cart-truck-status { margin-left: 6px; color: var(--ink-3); font-size: 11.5px; font-weight: 600; }
.pipe-cart-tag { display: inline-block; margin: 0 6px 6px 0; padding: 2px 8px; border-radius: 6px; background: var(--surface-sunk); color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.pipe-cart-tag.more { background: transparent; color: var(--ink-3); }
.pipe-cart-status-lead { margin: 0; color: var(--ink-2); }
.pipe-cart-status-list { max-height: 140px; overflow-y: auto; }
.pipe-cart-bulk-preview { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--teal-tint); color: var(--teal-strong); font-weight: 600; }
.pipe-cart-bulk-preview.is-error { background: var(--stop-tint); color: var(--stop); }
.pipe-cart-history-now { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--ink-3); font-size: 13px; font-weight: 600; }
.pipe-cart-history-now:empty { display: none; }
.dialog-section-title { margin: 16px 0 8px; color: var(--ink-2); font-size: 13.5px; font-weight: 700; }
.dialog-section-title:first-of-type { margin-top: 0; }
.pipe-cart-picker-flag { margin-left: auto; padding: 0 6px; border-radius: 5px; background: var(--stop-tint); color: var(--stop); font-size: 11.5px; font-weight: 700; }
.pipe-cart-picker-option.flagged > span:first-child { color: var(--stop); }
@media (max-width: 1365px) {
  .pipe-cart-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .pipe-cart-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Filters (the order pool, Self Pick and the master data pages): one wrapping row of soft filled fields
   under small captions, the choices as chips, then Search and Reset. */
.order-filter-grid, .master-filter-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.order-filter-grid label, .master-filter-grid label, .order-status-filter { display: grid; gap: 5px; color: var(--ink-3); font-size: 12px; font-weight: 500; }
.order-filter-grid > label:not(.filter-action) { flex: 1 1 150px; max-width: 240px; }
.order-filter-grid > label:has(> #recipient-search) { flex-basis: 170px; max-width: 280px; }
.order-filter-grid > label:has(> #address-search) { flex-basis: 200px; max-width: 300px; }
#order-status { flex: 1 1 420px; max-width: max-content; }
.master-filter-grid > label:not(.filter-action) { flex: 0 1 220px; }
.master-filter-grid > label:not(.filter-action):has(> select) { flex-basis: 170px; }
.order-status-filter { flex: 0 1 auto; }
.order-filter-grid > label > :is(input, select), .master-filter-grid > label > :is(input, select) { width: 100%; height: 36px; border-color: var(--field-line); background-color: var(--field); font-size: 14px; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.order-filter-grid > label > :is(input, select):hover, .master-filter-grid > label > :is(input, select):hover { border-color: var(--field-hover); background-color: var(--field-focus); }
.order-filter-grid > label > :is(input, select):focus, .master-filter-grid > label > :is(input, select):focus { border-color: var(--teal); background-color: var(--field-focus); }
.order-filter-grid > label > input::placeholder, .master-filter-grid > label > input::placeholder { font-size: 13px; }
.status-checkboxes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 36px;
}
.status-checkboxes label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--field-line);
  border-radius: 999px;
  background: var(--field);
  color: var(--ink-2);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.status-checkboxes label:hover { border-color: var(--field-hover); background: var(--field-focus); }
.status-checkboxes input { width: auto; height: auto; margin: 0; }
.status-checkboxes label:has(input:checked) {
  border-color: var(--teal-chip-line);
  background: var(--teal-tint);
  color: var(--teal-strong);
  font-weight: 600;
}
/* With 導出全部地址 the Address Library toolbar no longer fits narrow windows (below about
   1,250px in English): its buttons wrap to a second row instead of being cut off, and the title
   stays on one line. Wide enough for one row, nothing moves. */
#page-addresses .toolbar h2 { flex-shrink: 0; }
#page-addresses .toolbar-actions { flex-wrap: wrap; justify-content: flex-end; }
.filter-action { align-self: auto; }
.filter-action button { min-width: 78px; min-height: 36px; }
.filter-buttons {
  display: flex;
  gap: 6px;
}
/* Search is the filter row's action whichever class it carries (the order pool's is primary, the master
   data pages' secondary), tinted so the card's own add button stays its one solid teal; Reset is quiet. */
.filter-buttons > button:first-child { color: var(--teal-strong); background: var(--teal-tint); border-color: transparent; font-weight: 600; }
.filter-buttons > button:first-child:hover { color: var(--on-accent); background: var(--teal); border-color: var(--teal); }
/* 更多篩選's one-field boxes (and anything else a row hides) leave it while hidden. */
.order-filter-grid > [hidden], .master-filter-grid > [hidden] { display: none; }
/* The one search box: a caption like the other fields over a wider box with the magnifier inside it. */
.order-filter-grid > label.list-search { flex: 2 1 300px; max-width: 520px; }
.list-search-field { position: relative; display: flex; align-items: center; }
.list-search-field .plans-search-icon { left: 11px; }
.list-search-field > input { width: 100%; height: 36px; padding-left: 34px; border-color: var(--field-line); background-color: var(--field); font-size: 14px; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.list-search-field > input:hover { border-color: var(--field-hover); background-color: var(--surface); }
.list-search-field > input:focus { border-color: var(--teal); background-color: var(--surface); }
.list-search-field > input::placeholder { font-size: 13px; }
.filter-more-toggle { min-width: 0; padding: 0 6px; white-space: nowrap; }
/* A filter that narrows the list wears the brand's ring. */
:is(.order-filter-grid, .master-filter-grid, .pipe-cart-filters) :is(input, select).is-set,
.plans-filters :is(input, select).is-set { border-color: var(--teal); background-color: var(--surface); box-shadow: inset 0 0 0 1px var(--teal-ring); }
.filter-buttons > button + button { color: var(--ink-3); background: transparent; border-color: transparent; }
.filter-buttons > button + button:hover { color: var(--ink); background: var(--fill); border-color: transparent; }
.pagination-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 20px; border-top: 1px solid var(--line-soft); }
.pagination-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; color: var(--ink-3); }
.page-size-control { display: flex; align-items: center; gap: 8px; }
.page-size-control select { width: 84px; height: 32px; }
/* Page buttons are quiet until pointed at; the current page is solid teal. */
.pagination-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pagination-controls button { min-width: 32px; min-height: 32px; padding: 0 9px; border-color: transparent; background: transparent; color: var(--ink-2); }
.pagination-controls button:hover:not(:disabled) { border-color: transparent; background: var(--fill); color: var(--ink); }
.pagination-controls button.active, .pagination-controls button.active:hover { color: var(--on-accent); background: var(--teal); border-color: var(--teal); font-weight: 600; }
.pagination-controls button:disabled { opacity: .45; cursor: not-allowed; }
.pagination-ellipsis { padding: 0 4px; color: var(--ink-muted); }
.pagination-status { margin-left: 8px; color: var(--ink-note); }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* How long something has been out or waiting, as a small tinted chip (the Dashboard's and Pipe Carts'). */
.wait-chip { display: inline-block; width: max-content; margin-top: 4px; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.5; }
.wait-chip.tone-plain { background: var(--surface-sunk); color: var(--ink-3); }
.wait-chip.tone-warn { background: var(--warn-tint); color: var(--warn); }
.wait-chip.tone-bad { background: var(--stop-tint); color: var(--stop); }
/* Self Pick page (the pickup desk), in Truck Plans' look. The status tabs: the two kinds of order still
   waiting after 待提貨, a hairline, then 已提貨 and 全部. One row of the soft filter fields: the search,
   warehouse, Trade and category, the LSIR switch, 更多篩選, and 清除篩選 at the row's end while a filter
   narrows the list; 更多篩選's wait and dates take a row of their own while open. */
.plans-tab-rule { align-self: center; width: 1px; height: 18px; margin: 0 -6px; background: var(--line); }
.self-pick-filters .plans-search { flex-basis: 180px; max-width: 420px; }
/* The selects are as wide as their words in each language; the Trade names are long, so its is fixed. */
.self-pick-filters select { width: auto; min-width: 0; max-width: 200px; }
#self-pick-trade { width: 200px; }
/* 已等待's choices sit in a labelled field like the dates (the POD Pool's range). */
.self-pick-filters .plans-date > select { min-width: 0; height: 34px; padding: 0 30px 0 2px; border: 0; background-color: transparent; background-position: right 10px center; color: var(--ink-body); }
.self-pick-filters .plans-date > select:hover, .self-pick-filters .plans-date > select:focus { border: 0; background-color: transparent; box-shadow: none; outline: none; }
.filter-toggle { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px 0 11px; border: 1px solid var(--field-line); border-radius: 8px; background: var(--field); color: var(--ink-2); font-size: 13px; white-space: nowrap; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.filter-toggle:hover { border-color: var(--line-mid); background: var(--field-focus); }
.filter-toggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--teal-alt); cursor: pointer; }
.filter-toggle:has(input:checked) { border-color: var(--teal); background: var(--surface); color: var(--teal-strong); font-weight: 600; box-shadow: inset 0 0 0 1px var(--teal-ring); }
.filter-toggle:has(input:focus-visible) { outline: 2px solid var(--teal-focus); outline-offset: 1px; }
/* 更多篩選 and 清除篩選 keep together at the row's end (and wrap together when the row is full). */
.filter-links { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; white-space: nowrap; }
.self-pick-filters .filter-more-toggle { padding: 0 6px; }
.self-pick-filters .filter-clear { padding: 0 6px; color: var(--ink-3); font-weight: 500; }
.self-pick-filters .filter-clear:hover { color: var(--teal-strong); }
/* 更多篩選's fields start a line of their own (the break) and share it with the two links. */
.filter-break { flex-basis: 100%; height: 0; }
.self-pick-filters:not(:has(> [data-more-group]:not([hidden]))) > .filter-break, .self-pick-filters > [hidden] { display: none; }
/* A date or wait that narrows the list wears the ring on its whole field, label included. */
.self-pick-filters .plans-date:has(> .is-set) { border-color: var(--teal); background-color: var(--surface); box-shadow: inset 0 0 0 1px var(--teal-ring); }
.self-pick-filters .plans-date > .is-set { box-shadow: none; }
/* One order per row in a fixed-layout table that fits a 1366px window, two lines per cell at most with
   every cell's first line level: the order over its Trade, the packages, the warehouse over the WMS
   place, who collects it (the column that takes the rest), the day it came in over its wait, where it
   stands, and the next step beside its ⋯. A click on a row ticks it. What works on ticked orders floats
   at the window's foot (.plans-bulk-bar). */
.self-pick-table { table-layout: fixed; min-width: 960px; }
:root:is([lang="en"], [lang="es"]) .self-pick-table { min-width: 1000px; }
.self-pick-table > thead > tr > th { height: 40px; padding-top: 0; padding-bottom: 0; border-bottom-color: var(--line-soft); background: var(--surface-head); color: var(--ink-label); font-size: 12px; font-weight: 600; letter-spacing: .02em; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.self-pick-table > tbody > tr > td { padding-top: 12px; padding-bottom: 12px; border-bottom-color: var(--line-row); vertical-align: top; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; transition: background-color .12s ease; }
.self-pick-table > tbody > tr[data-self-pick-id] { cursor: pointer; }
/* Widths from what the cells hold: English and Spanish need a wider place header, wait and state, and
   Spanish's buttons a little more room; from 1600px every column breathes, below 1366px they tighten. */
.self-pick-table .col-select { width: 46px; padding-left: 20px; padding-right: 4px; }
.self-pick-table .col-order { width: 214px; }
.self-pick-table .col-packages { width: 112px; }
.self-pick-table .col-place { width: 150px; }
.self-pick-table .col-created { width: 108px; }
.self-pick-table .col-state { width: 136px; }
.self-pick-table .col-actions { width: 128px; padding-left: 4px; padding-right: 14px; }
:root:is([lang="en"], [lang="es"]) .self-pick-table .col-packages { width: 104px; }
:root:is([lang="en"], [lang="es"]) .self-pick-table .col-place { width: 190px; }
:root:is([lang="en"], [lang="es"]) .self-pick-table .col-created { width: 116px; }
:root:is([lang="en"], [lang="es"]) .self-pick-table .col-state { width: 142px; }
:root:is([lang="en"], [lang="es"]) .self-pick-table .col-actions { width: 124px; }
:root[lang="es"] .self-pick-table .col-place { width: 200px; }
:root[lang="es"] .self-pick-table .col-actions { width: 132px; }
@media (min-width: 1600px) {
  .self-pick-table .col-order { width: 270px; }
  .self-pick-table .col-packages { width: 150px; }
  .self-pick-table .col-place { width: 220px; }
  .self-pick-table .col-created { width: 130px; }
  .self-pick-table .col-state { width: 180px; }
  .self-pick-table .col-actions { width: 140px; }
  :root:is([lang="en"], [lang="es"]) .self-pick-table .col-packages { width: 150px; }
  :root:is([lang="en"], [lang="es"]) .self-pick-table .col-place { width: 240px; }
  :root:is([lang="en"], [lang="es"]) .self-pick-table .col-created { width: 130px; }
  :root:is([lang="en"], [lang="es"]) .self-pick-table .col-state { width: 180px; }
  :root:is([lang="en"], [lang="es"]) .self-pick-table .col-actions { width: 140px; }
  :root[lang="es"] .self-pick-table .col-place { width: 250px; }
}
@media (max-width: 1365px) {
  .self-pick-table .col-select { width: 40px; padding-left: 16px; }
  .self-pick-table .col-order { width: 200px; }
  .self-pick-table .col-packages { width: 104px; }
  .self-pick-table .col-place { width: 132px; }
  .self-pick-table .col-created { width: 106px; }
  .self-pick-table .col-state { width: 120px; }
  .self-pick-table .col-actions { width: 124px; padding-right: 12px; }
  :root:is([lang="en"], [lang="es"]) .self-pick-table .col-place { width: 176px; }
  :root:is([lang="en"], [lang="es"]) .self-pick-table .col-created { width: 112px; }
  :root:is([lang="en"], [lang="es"]) .self-pick-table .col-state { width: 136px; }
  :root:is([lang="en"], [lang="es"]) .self-pick-table .col-actions { width: 120px; }
  :root[lang="es"] .self-pick-table .col-place { width: 184px; }
  :root[lang="es"] .self-pick-table .col-actions { width: 128px; }
}
/* The checkbox sits level with the first line. */
.self-pick-table > tbody > tr > td.col-select { padding-top: 14px; }
.self-pick-table input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--teal-alt); cursor: pointer; }
.self-pick-table > tbody > tr:hover > td { background: var(--surface-hover); }
.self-pick-table > tbody > tr.selected > td { background: var(--teal-selected); }
.self-pick-table > tbody > tr:hover .more-button { color: var(--ink-2); }
.self-pick-table .order-no-text { font-size: 14px; }
/* The Trade under the number: a quiet link that narrows the list to it, then Prefab's tag. */
.sp-trade-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sp-trade { min-width: 0; min-height: 0; padding: 0; overflow: hidden; border: 0; border-radius: 3px; background: none; color: inherit; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.sp-trade:hover { color: var(--teal-link); text-decoration: underline; text-underline-offset: 2px; }
.sp-trade-line .badge { flex: none; padding: 0 6px; font-size: 10.5px; line-height: 1.6; }
.sp-place { color: var(--ink-4); }
/* Who collects it: from 1600px the email joins the phone. */
.sp-email { display: none; }
.sp-email::before { content: "·"; margin: 0 6px; color: var(--ink-ghost); }
@media (min-width: 1600px) { .sp-email { display: inline; } }
/* The wait: plain text, amber from 3 days, red from 7. */
.sp-wait.tone-plain { color: var(--ink-4); }
.sp-wait.tone-warn { color: var(--warn); font-weight: 600; }
.sp-wait.tone-bad { color: var(--stop); font-weight: 600; }
/* Where it stands, after a dot: amber while nobody has told the Trade (the desk's to-do), teal once told,
   green once picked up; the line under it starts under the word. */
.sp-state { display: flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; }
.sp-state::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--dot-off); }
.sp-state.tone-todo { color: var(--warn); }
.sp-state.tone-todo::before { background: var(--amber); }
.sp-state.tone-sent { color: var(--ink-2); }
.sp-state.tone-sent::before { background: var(--teal-alt); }
.sp-state.tone-done { color: var(--go-ink); }
.sp-state.tone-done::before { background: var(--go-mark); }
.sp-state + .cell-sub { padding-left: 14px; }
.text-warn { color: var(--warn); font-weight: 600; }
/* The row's next step (tinted as Truck Plans' 發車) and its ⋯. */
.row-tail { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.row-primary { min-height: 30px; padding: 0 11px; border: 0; border-radius: 8px; background: var(--teal-tint); color: var(--teal-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.row-primary:hover { background: var(--teal); color: var(--on-accent); }
.row-primary:disabled { opacity: .6; cursor: progress; }
/* A tab whose count is something to do (orders nobody has told yet): amber. */
.plans-tab.tab-todo .plans-tab-count { color: var(--warn-ink); background: var(--warn-tint); }
.list-empty { padding: 28px 20px !important; text-align: center; }
.list-empty .link-button { margin-left: 8px; }
/* Pipe Carts: a long current address wraps instead of pushing Edit and Delete out of the card. */
#page-pipe-carts td:nth-child(3) { min-width: 220px; white-space: normal; }
.import-pickup-note { margin: 0 0 8px; color: var(--cyan-ink); }
.drag-handle { color: var(--ink-muted); font-size: 17px; cursor: grab; }
.empty-state { padding: 56px 40px; text-align: center; color: var(--ink-3); }
.empty-state h2 { color: var(--ink); margin-bottom: 8px; }
dialog { width: 620px; border: 0; border-radius: 14px; padding: 0; color: var(--ink); box-shadow: var(--shadow-pop); background: var(--surface); }
.wide-dialog { width: min(820px, calc(100vw - 60px)); }
#batch-email-dialog { width: min(1100px, calc(100vw - 60px)); }
#batch-email-dialog td:nth-child(4), #batch-email-dialog td:nth-child(5), #batch-email-dialog td:nth-child(7) { white-space: normal; min-width: 200px; max-width: 360px; overflow-wrap: anywhere; }
dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(2px); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 14px 22px; border-bottom: 1px solid var(--line-soft); }
.icon-button { display: grid; place-items: center; width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); font-size: 22px; line-height: 1; }
.icon-button:hover { background: var(--fill); color: var(--ink); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 20px 22px; }
.form-grid label { display: grid; gap: 6px; color: var(--ink-3); font-size: 13px; font-weight: 500; }
.form-grid input, .form-grid select { width: 100%; font-size: 14px; }
.form-grid textarea { width: 100%; font-size: 14px; }
.form-grid .email-kind-options { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; color: var(--ink-note); }
.form-grid .email-kind-option { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-body); }
.form-grid .email-kind-option input { width: auto; }
.form-grid .email-kind-options[hidden] { display: none; }
#order-form label[hidden] { display: none; }
.email-meta { display: grid; gap: 4px; }
.email-body-preview { background: var(--surface-sunk); }
.span-2 { grid-column: 1 / -1; }
.time-window-list { display: grid; gap: 8px; }
.time-window-row { display: grid; grid-template-columns: 1fr auto 1fr 32px; align-items: center; gap: 8px; }
.small-button { min-height: 32px; padding: 6px 10px; justify-self: start; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--line-soft); background: var(--surface-sunk); }
.import-body { padding: 20px 22px; }
.file-drop { min-height: 112px; display: grid; place-items: center; align-content: center; gap: 6px; border: 1.5px dashed var(--drop-line); background: var(--surface-hover); border-radius: var(--radius-lg); cursor: pointer; }
.file-drop:hover { border-color: var(--teal); background: var(--teal-wash); }
input[type="file"] { height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink-3); }
input[type="file"]::file-selector-button { min-height: 32px; margin-right: 10px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--button); color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: var(--surface-sunk); border-color: var(--line-hover); }
.file-drop span, .import-columns span { color: var(--ink-label); }
.file-drop input { height: auto; margin-top: 8px; }
.import-columns { display: grid; gap: 5px; margin-top: 14px; padding: 12px 14px; background: var(--field); border-radius: var(--radius); }
.import-summary { display: flex; gap: 24px; padding: 14px 0 8px; }
.import-summary strong { font-size: 20px; display: block; }
.import-summary span { color: var(--ink-label); }
.import-issue-summary { border: 1px solid var(--card-line); padding: 10px 12px; margin: 8px 0; background: var(--surface-head); }
.import-issue-summary ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.import-issue-summary li { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.import-issue-summary li strong { color: var(--ink-strong); }
.import-result-section { margin: 8px 0; }
.import-result-section h3 { margin: 0; padding: 9px 12px; border: 1px solid var(--card-line); border-bottom: 0; background: var(--surface-sunk); font-size: 13px; color: var(--ink); }
.import-result-section-warning h3 { border-color: var(--warn-line); background: var(--warn-wash); }
.import-errors { max-height: 230px; overflow: auto; border: 1px solid var(--card-line); }
.import-warnings { border-color: var(--warn-line); }
.import-errors td:last-child { white-space: normal; }
#deleted-orders-dialog { width: min(1100px, calc(100vw - 60px)); }
#deleted-orders-dialog td:nth-child(3) { white-space: normal; min-width: 140px; max-width: 260px; overflow-wrap: anywhere; }
.deleted-orders-search { display: grid; gap: 6px; margin: 12px 0; color: var(--ink-note); }
.deleted-orders-search input { width: 100%; }
.deleted-orders-list { max-height: 420px; }
#toast { position: fixed; z-index: 70; right: 24px; bottom: 24px; color: var(--toast-ink); background: var(--toast); padding: 11px 16px; border-radius: var(--radius); box-shadow: var(--shadow-toast); opacity: 0; transform: translateY(8px); pointer-events: none; transition: .2s; }
#toast.show { opacity: 1; transform: translateY(0); }
.muted { color: var(--ink-muted); }
.recipient-line { display: grid; gap: 2px; line-height: 1.35; }
.recipient-line + .recipient-line { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.recipient-cell { min-width: 150px; white-space: normal; }
/* Master data rows: Edit hides on a page the user may only view, Delete for everyone but
   administrators (showApplication sets view-only-<page> and no-delete on the shell; the Pipe
   Cart rows are rendered with only the buttons the user may use). */
.app-shell.view-only-trades .edit-trade,
.app-shell.view-only-pocs .edit-poc,
.app-shell.view-only-addresses .edit-address,
.app-shell.view-only-warehouses .edit-warehouse,
.app-shell.view-only-dockdoors .edit-dockdoor,
.app-shell.view-only-trucks .edit-truck-type,
.app-shell.view-only-units .edit-unit,
.app-shell.view-only-holidays .edit-holiday,
.app-shell.no-delete .delete-trade,
.app-shell.no-delete .delete-poc,
.app-shell.no-delete .delete-address,
.app-shell.no-delete .delete-warehouse,
.app-shell.no-delete .delete-dockdoor,
.app-shell.no-delete .delete-truck-type,
.app-shell.no-delete .delete-unit,
.app-shell.no-delete .delete-holiday {
  display: none;
}
/* .button-link sets display, so it needs its own rule for the hidden attribute. */
.button-link[hidden] { display: none; }
/* Master data lists: the row count beside each list's title, and the counts that open a related tab (a
   Trade's POCs and addresses, a warehouse's Dockdoors) as quiet teal numbers lined up with their header. */
.list-count { display: inline-block; min-width: 22px; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--fill); color: var(--ink-count); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.5; text-align: center; vertical-align: 2px; }
.list-count:empty { display: none; }
.master-table th.count-col { width: 96px; }
.record-count, .record-count-link { font-variant-numeric: tabular-nums; }
.record-count.zero { color: var(--ink-4); }
.record-count-link { min-width: 30px; min-height: 28px; margin-left: -9px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: var(--teal-strong); font-weight: 600; text-decoration: underline dotted; text-underline-offset: 3px; }
.record-count-link:hover { background: var(--teal-tint); color: var(--teal-strong); text-decoration-style: solid; }
/* The POC and address lists wrap long text instead of scrolling sideways (an email after its @): the five
   address columns are one cell (street, then city, state and post code under it), the two phones one
   (the alternative under the phone). */
.master-table td.wrap-cell { min-width: 96px; white-space: normal; overflow-wrap: break-word; }
.master-table .cell-sub { margin-top: 2px; color: var(--ink-3); font-size: 12.5px; }
.cell-sub-label { margin-right: 6px; color: var(--ink-4); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.addresses-table td.address { min-width: 210px; }
.addresses-table td.receiving-windows { min-width: 120px; }
.pocs-table td.poc-other { min-width: 150px; }
/* A warehouse's code, which starts its truck numbers. */
.code-tag { display: inline-block; padding: 2px 7px; border-radius: 6px; background: var(--fill); color: var(--ink-2); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
/* Holidays: the weekday after the date, past days faded, the next active one marked. */
.weekday { margin-left: 6px; color: var(--ink-3); font-size: 12.5px; }
.holidays-table tr.past-row > td:not(:last-child) { color: var(--ink-4); }
.badge.next-holiday { margin-left: 6px; color: var(--teal-strong); background: var(--teal-tint); }
.badge.system-unit { margin-left: 6px; }
/* User dialog: a Manager's level on each page, grouped as the menu is. */
.page-access-editor { display: grid; gap: 8px; }
.page-access-editor[hidden] { display: none; }
.page-access-title { display: grid; gap: 3px; color: var(--ink-body); }
.page-access-table th, .page-access-table td { padding: 6px 10px; text-align: center; }
.page-access-table th:first-child, .page-access-table td:first-child { text-align: left; }
.page-access-table tr.page-access-group > th { padding: 12px 10px 4px; border-bottom: 0; background: transparent; color: var(--ink); font-size: 12.5px; }
.form-grid .page-access-table input { width: auto; height: auto; margin: 0; }
/* Email Templates page: the editor beside its placeholder list, the sample preview below. */
.email-template-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; padding: 20px; }
.email-template-editor { display: grid; gap: 10px; align-content: start; min-width: 0; }
.email-template-meta { min-height: 18px; }
/* Above the text: the template's facts, "unsaved" while edited, and the 編輯 / 預覽 switch. */
.email-template-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 34px; }
.email-template-head .email-template-meta { flex: 1 1 auto; min-width: 0; }
.unsaved-tag { padding: 2px 9px; border-radius: 999px; background: var(--warn-tint); color: var(--warn); font-size: 12px; font-weight: 700; }
.unsaved-tag[hidden] { display: none; }
.editor-switch { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--fill-2); }
.editor-switch button { min-height: 28px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-3); font-size: 13px; font-weight: 600; }
.editor-switch button:hover { color: var(--ink); }
.editor-switch button.active { color: var(--teal-strong); background: var(--segment-on); box-shadow: var(--shadow-segment); }
#email-template-body[hidden] { display: none; }
.email-template-note { margin: 0; padding: 9px 12px; border: 1px solid var(--warn-line); border-radius: 5px; background: var(--warn-wash); color: var(--warn-deep); }
.email-template-note[hidden] { display: none; }
#email-template-body { width: 100%; min-height: 420px; font-family: Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.5; padding: 10px 12px; }
#email-template-body[readonly] { background: var(--surface-sunk); }
.email-template-actions { display: flex; align-items: center; gap: 8px; }
.email-template-actions .email-template-spacer { flex: 1; }
.email-template-help { align-self: start; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--surface-head); }
.email-template-help h3 { margin: 0 0 6px; font-size: 13px; color: var(--ink); }
.email-template-help ul { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 6px; }
.email-template-help ul:last-child { margin-bottom: 0; }
.email-template-help .muted { margin: 0 0 8px; font-size: 12px; }
.email-template-placeholder { display: grid; gap: 2px; width: 100%; min-height: 0; padding: 7px 10px; text-align: left; color: var(--ink-body); background: var(--button); border-color: var(--field-line); }
.email-template-placeholder:hover:not(:disabled) { background: var(--teal-wash); border-color: var(--teal-line-muted); }
.email-template-placeholder:disabled { cursor: default; }
.email-template-placeholder code { color: var(--teal-link); font-weight: 700; }
.email-template-placeholder span { color: var(--ink-count); font-size: 12px; }
.email-template-rules li { color: var(--ink-note); font-size: 12px; line-height: 1.45; }
.email-template-preview { margin: 0; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.email-template-preview[hidden] { display: none; }
.email-template-preview-header { display: flex; align-items: baseline; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--card-line); background: var(--surface-sunk); }
.email-template-preview-header h3 { margin: 0; font-size: 13px; }
.email-template-preview pre { margin: 0; padding: 14px 16px; min-height: 380px; max-height: 560px; overflow: auto; white-space: pre-wrap; font-family: Calibri, Arial, sans-serif; font-size: 13px; line-height: 1.45; }
#email-template-history-body pre { margin: 6px 0 0; max-width: 520px; white-space: pre-wrap; font-family: Consolas, "Courier New", monospace; font-size: 12px; }
#email-template-history-body td { vertical-align: top; }
@media (max-width: 1200px) {
  .main { padding-left: 18px; padding-right: 18px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
}

/* TSPT BOOKING# is hidden on request (order pool, auto dispatch, truck plans: columns, search filter, order form field).
   The markup and data are untouched; delete this block to show it again. */
.tspt-booking { display: none !important; }

/* E-POD (proof of delivery): the Truck Plans badge and assigned driver, the POD page (簽收記錄), a driver's
   phones (User Management) and the dialogs. With E-POD off none of these is on the screen. Elements shown and
   hidden with the hidden attribute either get no display here or an explicit [hidden] rule. */
.pod-driver-inactive { color: var(--stop-strong); font-weight: 700; }
/* The POD page (簽收記錄) in Truck Plans' look (.plans-panel, .plans-tabs, .plans-filters): status tabs, one
   row of search and filters with the export menu at its end, then a fixed-layout list that never needs to
   scroll sideways in a 1366px window, its headers sorting it. A row is one order, at most two lines per cell
   (the second smaller and grey), with at most one tinted action and a borderless ⋯; a row with an open
   exception is tinted, an overdue one has an amber edge. */
.pod-tab-alert .plans-tab-count { color: var(--stop-ink); background: var(--stop-tint); }
/* The range's label sits inside its field, like the date filter on Truck Plans; 自訂 adds the two dates. */
.plans-filters :is(.pod-range, .pod-card-sort) { padding-right: 0; }
.plans-filters :is(.pod-range, .pod-card-sort) select { min-width: 0; height: 34px; padding: 0 30px 0 2px; border: 0; background-color: transparent; background-position: right 10px center; color: var(--ink-body); font-weight: 600; }
.plans-filters :is(.pod-range, .pod-card-sort) select:hover, .plans-filters :is(.pod-range, .pod-card-sort) select:focus { border: 0; background-color: transparent; box-shadow: none; outline: none; }
.pod-dates { gap: 2px; padding: 0 4px; color: var(--ink-4); }
.pod-dates[hidden] { display: none; }
/* The card view's sort (a field with a direction button at its end), the 表格 / 卡片 switch and the
   export menu end the row together. */
.pod-list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
/* The search gives up width first (as the Order Pool's does), so the row with the switch, and in the card
   view the sort, stays one line at 1366px. */
.pod-filters .plans-search { flex-basis: 160px; }
.pod-card-sort[hidden] { display: none; }
.pod-sort-dir { display: inline-grid; place-items: center; flex: none; width: 32px; height: 34px; min-height: 34px; margin-left: -4px; padding: 0; border: 0; border-left: 1px solid var(--field-line); border-radius: 0 7px 7px 0; background: transparent; color: var(--ink-3); }
.pod-sort-dir:hover { color: var(--teal-strong); }
.pod-sort-dir svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.pod-sort-dir[data-dir="asc"] svg { transform: rotate(180deg); }
.pod-view-switch { flex-wrap: nowrap; padding: 2px; border-radius: 9px; }
.pod-view-switch button { gap: 6px; min-height: 30px; padding: 0 11px; }
.pod-view-switch svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pod-export-button { display: inline-flex; align-items: center; gap: 7px; height: 36px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--button); color: var(--teal-ink); font-weight: 600; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease; }
.pod-export-button:hover, .pod-export-button[aria-expanded="true"] { border-color: var(--teal-line); background: var(--teal-wash); }
.pod-export-button:disabled { opacity: .6; cursor: progress; }
.pod-export-button svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pod-export-button .pod-export-chevron { width: 12px; height: 12px; margin-left: -2px; }
/* While a new answer is on its way the list fades a little, so a filter visibly took. */
.pod-panel.is-loading :is(#pod-body, #pod-cards) { opacity: .55; transition: opacity .15s ease .1s; }

.pod-table { table-layout: fixed; min-width: 940px; }
:root:is([lang="en"], [lang="es"]) .pod-table { min-width: 980px; }
.pod-table > thead > tr > th { height: 40px; padding-top: 0; padding-bottom: 0; border-bottom-color: var(--line-soft); background: var(--surface-head); color: var(--ink-label); font-size: 12px; font-weight: 600; letter-spacing: .02em; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod-table .sort-header { max-width: 100%; }
/* The first column sorts by order number or by Trade: two headers in one cell. */
.pod-sort-pair { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.pod-sort-separator { color: var(--ink-ghost); font-weight: 400; }
.pod-table .sort-header.active { color: var(--teal-link); }
.pod-table > tbody > tr.pod-row > td { padding-top: 11px; padding-bottom: 11px; border-bottom-color: var(--line-row); vertical-align: middle; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; transition: background-color .12s ease; }
.pod-table > tbody > tr.pod-row { cursor: pointer; }
.pod-table > tbody > tr.pod-row:hover > td { background: var(--surface-hover); }
.pod-table > tbody > tr.pod-row-alert > td { background: var(--stop-row); }
.pod-table > tbody > tr.pod-row-alert:hover > td { background: var(--stop-row-hover); }
.pod-table > tbody > tr.pod-row-alert > td:first-child { box-shadow: inset 3px 0 var(--stop-fill); }
.pod-table > tbody > tr.pod-row-overdue > td:first-child { box-shadow: inset 3px 0 var(--amber); }
.pod-table > tbody > tr.pod-row-skipped > td:first-child { box-shadow: inset 3px 0 var(--amber); }
/* Widths from what the cells hold (measured): a 20-character backorder number (165px), a date (72px),
   a truck number (97px), the widest state pill (76px; 118px in English), a signing time (115px) and the
   widest action plus ⋯ (119px; 131px in English). The stop takes the rest: 256px in a 1366px window
   (198px in English), 178px at 1280 (120px). */
.pod-table .pod-col-order { width: 198px; padding-left: 20px; padding-right: 10px; }
.pod-table .pod-col-date { width: 98px; padding-right: 8px; }
.pod-table .pod-col-truck { width: 132px; }
.pod-table .pod-col-state { width: 112px; padding-right: 8px; }
.pod-table .pod-col-signed { width: 148px; }
.pod-table .pod-col-actions { width: 140px; padding-left: 4px; padding-right: 16px; }
:root:is([lang="en"], [lang="es"]) .pod-table .pod-col-date { width: 116px; } /* the header: DELIVERY DATE and its sort mark */
:root:is([lang="en"], [lang="es"]) .pod-table .pod-col-state { width: 140px; }
:root:is([lang="en"], [lang="es"]) .pod-table .pod-col-actions { width: 152px; }
@media (min-width: 1600px) {
  .pod-table .pod-col-order { width: 220px; }
  .pod-table .pod-col-date { width: 110px; }
  .pod-table .pod-col-truck { width: 160px; }
  .pod-table .pod-col-state { width: 130px; }
  .pod-table .pod-col-signed { width: 180px; }
  .pod-table .pod-col-actions { width: 150px; }
  :root:is([lang="en"], [lang="es"]) .pod-table .pod-col-state { width: 156px; }
  :root:is([lang="en"], [lang="es"]) .pod-table .pod-col-actions { width: 160px; }
}
@media (max-width: 1365px) {
  .pod-table .pod-col-order { width: 190px; padding-left: 16px; padding-right: 8px; }
  .pod-table .pod-col-actions { padding-right: 12px; }
}

/* Cells: a first line and a smaller grey second one. */
.pod-line, .pod-sub { display: block; min-width: 0; }
.pod-sub { margin-top: 3px; color: var(--ink-label); font-size: 12px; }
.pod-none { color: var(--ink-faint); }
.pod-order-no { color: var(--ink-strong); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; cursor: text; }
.pod-date { color: var(--ink-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pod-truck-no { color: var(--ink-row); font-weight: 600; font-variant-numeric: tabular-nums; }
.pod-truck-tag { margin-left: 6px; padding: 0 5px; border-radius: 4px; color: var(--ink-label); background: var(--fill-off); font-size: 11px; font-weight: 600; white-space: nowrap; }
.pod-driver { display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; }
.pod-driver > span { overflow: hidden; text-overflow: ellipsis; }
.pod-driver svg { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pod-trade { overflow: hidden; color: var(--ink-note); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.pod-stop-name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--ink-body); }
.pod-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
/* The state: a pill with a dot (Truck Plans' status look) and, under it, what needs the office. */
.pod-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 9px 2px 7px; border-radius: 999px; background: var(--fill); color: var(--ink-2); font-size: 12px; font-weight: 600; line-height: 1.45; white-space: nowrap; }
.pod-pill::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); }
.pod-pill-signed { color: var(--go-ink); background: var(--go-tint); }
.pod-pill-signed::before { background: var(--go-mark); }
.pod-pill-paper { color: var(--road-ink); background: var(--road-tint); }
.pod-pill-paper::before { background: var(--road-mark); }
.pod-pill-exception { color: var(--stop-ink); background: var(--stop-tint); }
.pod-pill-exception::before { background: var(--stop-mark); }
.pod-pill-orders-added { color: var(--warn-ink); background: var(--warn-tint); }
.pod-pill-orders-added::before { background: var(--amber); }
.pod-pill-completed { color: var(--ink-label); background: var(--fill-off); }
.pod-pill-completed::before { background: var(--dot-off); }
/* Not delivered (the driver could not make it): amber, outlined so it is not read as "re-sign". */
.pod-pill-skipped { color: var(--warn-ink); background: var(--warn-tint); box-shadow: inset 0 0 0 1px var(--warn-line); }
.pod-pill-skipped::before { background: var(--amber); }
.pod-note { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; font-weight: 600; line-height: 1.3; }
.pod-note > span + span::before { content: "· "; }
.pod-note svg { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.pod-note-bad { color: var(--stop-ink); }
.pod-note-wait { color: var(--warn-text); }
.pod-note-ok { color: var(--go-text); font-weight: 500; }
.pod-note-muted { color: var(--ink-muted); font-weight: 500; }
/* Who signed: the name (a paper tag first), "+N" more sign-offs, the photos; the time under it. */
.pod-signer { display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; }
.pod-signer-name { overflow: hidden; color: var(--ink-row); text-overflow: ellipsis; }
.pod-signer-more { flex: none; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.pod-paper-tag { flex: none; padding: 0 5px; border-radius: 3px; color: var(--ink-soft); background: var(--fill-2); font-size: 12px; font-weight: 700; }
.pod-skip-mark { display: inline-flex; flex: none; color: var(--warn-ink); }
.pod-skip-mark svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.pod-signer .pod-photo-note { flex: none; margin-top: 0; color: var(--ink-label); font-weight: 600; }
/* The row's one action (tinted, red for an exception) and its ⋯. */
.pod-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.pod-primary { min-height: 30px; padding: 0 11px; border: 0; border-radius: 8px; background: var(--teal-tint); color: var(--teal-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.pod-primary:hover { background: var(--teal-alt); color: var(--on-accent); }
.pod-primary.danger { min-height: 30px; padding: 0 11px; border: 0; background: var(--stop-tint); color: var(--stop-ink); }
.pod-primary.danger:hover { background: var(--stop-fill); color: var(--on-accent); }
.pod-table tr.pod-row:hover .more-button { color: var(--ink-2); }
/* The card view: the same rows as delivery tickets on a sunk board, as many columns as fit (three in a
   1366px window, one on a phone). A ticket is the docket: the truck and its day on top, the order, its
   Trade and its stop, then a perforated tear line (a notch cut from each edge, in the board's colour) and
   the stub, the proof of delivery, tinted by the state as a docket's carbon copies are: green signed,
   blue on paper, red an exception, amber to re-sign, not delivered or overdue, grey closed without a POD.
   The stubs sit at the foot, so the tickets of one row line their tear lines up when their stubs match. */
.pod-view-cards > .table-wrap { display: none; }
.pod-cards { --board: var(--surface-sunk); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr)); gap: 14px; padding: 16px 20px 20px; background: var(--board); }
.pod-cards[hidden] { display: none; }
.pod-cards > .pod-cards-empty { grid-column: 1 / -1; }
.pod-ticket { --stub: var(--surface-head); position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--card-line); border-radius: 10px; background: var(--surface); line-height: 1.35; cursor: pointer; transition: border-color .15s ease; }
.pod-ticket:hover { border-color: var(--line-mid); }
.pod-ticket:hover .more-button { color: var(--ink-2); }
.pod-ticket-head { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 6px 0 16px; }
.pod-ticket-truck { display: flex; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; }
.pod-ticket-truck .pod-truck-no { overflow: hidden; color: var(--teal-link); font-size: 13px; letter-spacing: .02em; text-overflow: ellipsis; }
.pod-ticket-date { flex: none; margin-left: auto; color: var(--ink-label); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pod-ticket .more-button { flex: none; }
.pod-ticket-driver { padding: 0 16px; color: var(--ink-label); font-size: 12px; }
.pod-ticket-body { flex: 1; min-width: 0; padding: 12px 16px 14px; }
.pod-ticket-order { font-size: 16px; line-height: 1.25; }
.pod-ticket-order .pod-order-no { font-weight: 700; }
.pod-ticket-trade { margin-top: 2px; overflow: hidden; color: var(--ink-note); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.pod-ticket-stop { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; min-width: 0; font-size: 13px; }
.pod-ticket-stop svg { flex: none; width: 14px; height: 14px; margin-top: 2px; fill: none; stroke: var(--ink-4); stroke-width: 1.5; stroke-linejoin: round; }
.pod-ticket-place { display: block; flex: 1; min-width: 0; }
.pod-ticket-tear { position: relative; height: 0; margin: 0 -1px; border-top: 1.5px dashed var(--line-mid); }
.pod-ticket-tear::before, .pod-ticket-tear::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border: 1px solid var(--card-line); border-radius: 50%; background: var(--board); }
.pod-ticket-tear::before { left: -8px; clip-path: inset(0 0 0 50%); }
.pod-ticket-tear::after { right: -8px; clip-path: inset(0 50% 0 0); }
.pod-ticket-stub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: start; gap: 8px 12px; padding: 12px 16px 14px; border-radius: 0 0 9px 9px; background: var(--stub); }
.pod-ticket-stub .pod-pill { background: var(--surface); }
.pod-ticket-signer { justify-self: end; min-width: 0; max-width: 100%; text-align: right; }
.pod-ticket-signer .pod-signer { justify-content: flex-end; }
.pod-ticket-signer .pod-sub { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pod-ticket-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; }
.pod-ticket[data-state="signed"] { --stub: var(--go-tint); }
.pod-ticket[data-state="paper"] { --stub: var(--road-tint); }
.pod-ticket[data-state="exception"] { --stub: var(--stop-tint); }
.pod-ticket:is([data-state="orders-added"], [data-state="skipped"], .pod-ticket-overdue) { --stub: var(--warn-tint); }
.pod-ticket[data-state="completed"] { --stub: var(--fill-off); }
.pod-ticket-alert { border-color: var(--stop-line); }
.pod-ticket-alert:hover { border-color: var(--stop-mark); }
/* The POD dialog: counts and hints, then the stops, each with its Trades, their orders (each with its own
   state) and their sign-offs (fields beside the signature). The body scrolls, so the title and the buttons
   stay in view. */
#pod-dialog { width: min(1020px, calc(100vw - 60px)); }
.pod-title-truck { margin-left: 4px; color: var(--teal-link); }
.pod-dialog-body { max-height: calc(100vh - 200px); overflow: auto; }
.pod-dialog-content { display: grid; gap: 12px; }
.pod-dialog-actions { flex-wrap: wrap; }
.pod-actions-gap { flex: 1; }
#pod-paper-received[hidden], #pod-dialog-mark-paper[hidden] { display: none; }
.pod-truck-line { margin: 0; }
.pod-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.pod-count { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border: 1px solid var(--card-line); border-radius: 5px; background: var(--surface-head); color: var(--ink-note); }
.pod-count strong { color: var(--ink); font-size: 18px; }
.pod-count-signed strong { color: var(--go-deep); }
.pod-count-exception strong { color: var(--stop-strong); }
.pod-count-orders-added strong { color: var(--warn-ink); }
.pod-count-skipped strong { color: var(--warn-ink); }
.pod-banner { margin: 0; padding: 9px 12px; border: 1px solid var(--warn-line); border-radius: 5px; background: var(--warn-wash); color: var(--warn-deep); font-weight: 600; }
.pod-banner-exception { border-color: var(--stop-note-line); background: var(--stop-wash); color: var(--stop-note); }
.pod-empty { margin: 0; }
.pod-section-title { margin: 6px 0 0; font-size: 13px; color: var(--ink); }
.pod-stop { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-head); }
.pod-stop-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 14px; }
.pod-drop, .pod-unit { padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); scroll-margin-top: 8px; }
.pod-unit-focus { border-color: var(--amber); box-shadow: 0 0 0 2px var(--signal-glow); }
.pod-unit-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pod-unit-header .pod-mark-paper, .pod-unit-header .pod-return-pool { min-height: 30px; padding: 0 10px; }
.pod-drop-action { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.pod-order-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; margin: 8px 0 0; padding: 0; list-style: none; }
.pod-order-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 3px 6px; border-radius: 4px; scroll-margin: 8px; }
.pod-order-line.pod-order-focus { background: var(--warn-highlight); box-shadow: inset 0 0 0 1px var(--amber); }
.pod-unit-seq { color: var(--teal-link); font-weight: 700; }
.pod-unit-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; color: var(--ink-note); font-size: 13px; }
.pod-unit-orders { overflow-wrap: anywhere; }
.pod-unit-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-row); }
.pod-record-replaced { opacity: .8; }
.pod-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; align-content: start; margin: 0; }
.pod-fields dt { color: var(--ink-count); }
.pod-fields dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.pod-subtimes { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 2px; color: var(--ink-muted); font-size: 12px; }
.pod-flag { padding: 0 6px; border-radius: 4px; color: var(--stop-strong); background: var(--stop-tint); font-weight: 700; }
.pod-remark { white-space: pre-wrap; }
.pod-email { display: grid; justify-items: start; gap: 3px; }
.pod-email-status { padding: 2px 7px; border-radius: 4px; color: var(--ink-soft); background: var(--fill-2); font-size: 12px; font-weight: 700; white-space: nowrap; }
.pod-email-state-sent { color: var(--go-deep); background: var(--go-tint); }
.pod-email-state-failed, .pod-email-state-unknown { color: var(--stop-strong); background: var(--stop-tint); }
.pod-email-state-pending, .pod-email-state-sending { color: var(--warn-ink); background: var(--warn-tint); }
.pod-email-line { color: var(--ink-note); font-size: 12px; }
.pod-email-error { color: var(--stop-strong); font-size: 12px; }
.pod-fields .pod-resolve { min-height: 30px; margin-top: 3px; padding: 0 10px; }
.pod-email-head { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.pod-signature-box { display: grid; align-content: start; justify-items: start; gap: 8px; }
.pod-signature { display: block; width: 100%; height: auto; max-height: 140px; border: 1px solid var(--paper-line); border-radius: 4px; background: var(--paper); }
/* The strokes keep their width however small the signature is drawn. */
.pod-signature path { fill: none; stroke: var(--paper-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pod-paper-box { width: 100%; padding: 24px 12px; border: 1px dashed var(--line-dash); border-radius: 4px; color: var(--info-ink); background: var(--info-wash); font-weight: 700; text-align: center; }
/* A sign-off's signatures, one under the other: the recipient's, then the driver's (smaller). */
.pod-sign { display: grid; justify-items: start; gap: 4px; width: 100%; margin: 0; }
.pod-sign figcaption { color: var(--ink-count); font-size: 12px; font-weight: 700; }
.pod-sign-driver .pod-signature { max-height: 70px; }
.pod-link-button { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--teal-link); font-weight: 700; text-align: left; text-decoration: underline dotted; text-underline-offset: 3px; }
.pod-link-button:hover, .pod-link-button:focus-visible { color: var(--teal-link-hover); text-decoration-style: solid; }
.pod-link-button:disabled { opacity: .5; cursor: default; }
/* A sign-off's PDF and email, side by side under its signature. */
.pod-record-actions { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pod-record-actions .pod-link-button { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; text-decoration: none; }
.pod-record-actions .pod-link-button:hover span, .pod-record-actions .pod-link-button:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }
.pod-record-actions svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* The truck's shipper signature (whoever assigned its driver), above the stops. */
.pod-shipper { display: grid; grid-template-columns: minmax(0, 360px); }
.pod-shipper-card { display: grid; align-content: start; justify-items: start; gap: 5px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.pod-shipper-title { color: var(--ink-count); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.pod-shipper-card .pod-signature { max-width: 260px; max-height: 80px; }
.pod-shipper-name { color: var(--ink); font-weight: 700; }
.pod-shipper-card .pod-sign-shipper { min-height: 30px; padding: 0 10px; }
/* 我的簽名 and the POD dialog's shipper signing: the saved signature, or a pad to draw one (touch-action
   none, so a finger or pen draws instead of scrolling the page). The assign dialog's pad uses it too. */
#signature-dialog { width: min(560px, calc(100vw - 32px)); }
.signature-dialog-body { display: grid; gap: 12px; padding: 18px; }
.signature-intro { margin: 0; color: var(--ink-note); }
.signature-saved, .signature-draw { display: grid; justify-items: start; gap: 6px; }
.signature-saved[hidden], .signature-draw[hidden], #signature-submit[hidden] { display: none; }
.signature-preview { width: 100%; }
.signature-preview .pod-signature { max-height: 160px; }
.signature-pad { position: relative; width: 100%; height: 190px; border: 1px solid var(--paper-line-strong); border-radius: 6px; background: var(--paper); }
.signature-pad::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 38px; border-bottom: 1px dashed var(--paper-dash); pointer-events: none; }
.signature-pad canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.signature-draw-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; font-size: 13px; }
.signature-fields { width: 100%; }
.pod-replaced { padding: 8px 12px; border: 1px solid var(--card-line); border-radius: 6px; background: var(--surface-head); }
.pod-replaced summary { color: var(--ink-note); font-weight: 600; cursor: pointer; }
.pod-scan-list { display: grid; gap: 6px; margin: 0; padding-left: 18px; }
.pod-scan-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.pod-scan-list .danger { min-height: 28px; padding: 0 9px; }
/* The paper sign-off dialog. Its problem fields are shown and hidden with the hidden attribute. */
#pod-paper-dialog { width: min(760px, calc(100vw - 60px)); }
.pod-field-title { color: var(--ink-note); }
.pod-paper-section { display: grid; gap: 6px; }
.pod-paper-choices { display: grid; gap: 6px; max-height: 220px; overflow: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; }
.form-grid .pod-paper-choice, .form-grid .pod-paper-order, .form-grid .pod-check-row { display: flex; align-items: center; gap: 8px; color: var(--ink); }
/* .form-grid input is full width and 34px high: not for these checkboxes. */
.form-grid .pod-paper-choice input, .form-grid .pod-paper-order input, .form-grid .pod-check-row input { flex: none; width: auto; height: auto; margin: 0; }
.pod-paper-problem { display: grid; gap: 10px; padding: 10px 12px; border: 1px solid var(--stop-note-line); border-radius: 5px; background: var(--stop-row); }
.pod-paper-problem[hidden] { display: none; }
.pod-paper-orders { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.pod-form-note { margin: 0; }
/* A driver's phones (from User Management). */
.driver-devices-table td { vertical-align: middle; }
.driver-device span { display: block; }
.driver-device .muted { max-width: 320px; font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
.pod-device-status { padding: 2px 7px; border-radius: 4px; color: var(--ink-soft); background: var(--fill-2); font-size: 12px; font-weight: 600; }
.pod-device-active { color: var(--go-deep); background: var(--go-tint); }
.pod-device-blocked { color: var(--stop-strong); background: var(--stop-tint); }

/* Truck Plans (車次計劃管理): status tabs with counts, one row of search and filters (applied as they
   change), chips for the Dashboard's filters, a bulk bar while trucks are selected, then the table:
   one fact per column (truck, status, delivery, load, driver, POD) and one primary action plus a ⋯
   menu per row, two lines at most. A row opens (a click on it, or its chevron) onto the truck's load
   and notes and its shipment units, each with its own ⋯ menu. The look is quiet on purpose: soft
   filled filter fields, status pills with a coloured dot, a tinted primary action and borderless ⋯
   buttons, so a page of trucks reads as rows of facts rather than rows of boxes. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.link-button { min-height: 30px; padding: 0 6px; border: 0; background: transparent; color: var(--teal-text); font-weight: 600; }
.link-button:hover { color: var(--teal-strong); text-decoration: underline; }
.link-button[hidden] { display: none; }
.danger-link { color: var(--danger-text); }
.danger-link:hover { color: var(--danger-text-hover); }
.epod-off .epod-only { display: none !important; }

.plans-panel { border-color: var(--card-line); border-radius: 10px; box-shadow: var(--shadow-card); }
/* One focus ring for every control on the page. */
.plans-panel button:focus-visible, .plan-detail button:focus-visible { outline: 2px solid var(--teal-focus); outline-offset: 1px; }

.plans-tabs { display: flex; flex-wrap: wrap; gap: 0 24px; padding: 2px 20px 0; border-bottom: 1px solid var(--line-soft); }
.plans-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-bottom: -1px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--ink-3); font-weight: 600; transition: color .15s ease, border-color .15s ease; }
.plans-tab:hover { color: var(--ink-row); }
.plans-tab.active { color: var(--teal-link); border-bottom-color: var(--teal-alt); }
.plans-tab-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--fill); color: var(--ink-count); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.5; text-align: center; }
.plans-tab-count:empty { display: none; }
.plans-tab.active .plans-tab-count { color: var(--teal-ink); background: var(--teal-tint-strong); }

/* Every filter is the same soft field: filled at rest, white with a ring when hovered or in use. */
.plans-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line-soft); }
.plans-search { position: relative; display: flex; align-items: center; flex: 1 1 320px; max-width: 480px; }
.plans-search-icon { position: absolute; left: 12px; width: 16px; height: 16px; fill: none; stroke: var(--ink-4); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.plans-search input, .plans-filters select, .plans-date { height: 36px; border: 1px solid var(--field-line); border-radius: 8px; background-color: var(--field); color: var(--ink-body); transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.plans-search input:hover, .plans-filters select:hover, .plans-date:hover { border-color: var(--line-mid); background-color: var(--field-focus); }
.plans-search input:focus, .plans-filters select:focus, .plans-date:focus-within { outline: none; border-color: var(--teal-focus); background-color: var(--field-focus); box-shadow: 0 0 0 3px var(--teal-ring-soft); }
.plans-search input { width: 100%; padding: 0 12px 0 36px; }
.plans-search input::placeholder { color: var(--ink-4); }
.plans-filters select { min-width: 150px; padding: 0 32px 0 12px; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%237b878e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; }
/* The date's label sits inside its field, like the other filters' "all" choices. */
.plans-date { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px 0 12px; color: var(--ink-3); font-size: 13px; white-space: nowrap; cursor: text; }
.plans-date input { height: 34px; padding: 0 4px; border: 0; background: transparent; color: var(--ink-body); }
.plans-date input:focus { outline: none; }
/* 今天 / 明天 beside the delivery date: two small chips, teal while the date filter holds their day. */
.date-quick-group { display: inline-flex; gap: 4px; margin-left: -4px; }
.date-quick { min-height: 30px; padding: 0 10px; border: 1px solid var(--field-line); border-radius: 999px; background: var(--button); color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.date-quick:hover { border-color: var(--line-mid); color: var(--ink); }
.date-quick.active { border-color: var(--teal-chip-line); background: var(--teal-tint); color: var(--teal-strong); }

.plans-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 20px; border-bottom: 1px solid var(--line-soft); background: var(--surface-head); }
.plans-chips[hidden] { display: none; }
.plans-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 11px; border: 1px solid var(--teal-line-soft); border-radius: 999px; background: var(--teal-selected); color: var(--teal-deep); font-size: 12.5px; }
.plans-chip-remove { width: 22px; min-height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--teal-deep); font-size: 16px; line-height: 1; }
.plans-chip-remove:hover { background: var(--teal-select); }

/* While trucks are ticked, a bar floats at the foot of the window (so ticking never moves the rows
   under the pointer); the panel keeps room for it under its last row. */
.plans-bulk-bar { position: fixed; left: calc(var(--sidebar-w) / 2 + 50vw); bottom: 18px; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; width: max-content; max-width: calc(100vw - var(--sidebar-w) - 52px); padding: 9px 10px 9px 18px; border-radius: 12px; background: var(--bar); color: var(--bar-ink); box-shadow: var(--shadow-bar); transform: translateX(-50%); animation: plans-bulk-in .16s ease-out; }
.plans-bulk-bar[hidden] { display: none; }
@keyframes plans-bulk-in { from { opacity: 0; transform: translate(-50%, 12px); } }
.plans-panel.has-selection { margin-bottom: 84px; }
.plans-bulk-count { font-weight: 700; }
.plans-bulk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.plans-bulk-bar button { border-radius: 8px; }
.plans-bulk-bar .secondary { background: transparent; color: var(--bar-ink); border-color: var(--bar-line); }
.plans-bulk-bar .secondary:hover { background: var(--bar-hover); }
.plans-bulk-bar .secondary:disabled { opacity: .5; }
.plans-bulk-bar .primary { background: var(--signal); border-color: var(--signal); color: var(--on-signal); font-weight: 700; }
.plans-bulk-bar .primary:hover { background: var(--signal-hover); border-color: var(--signal-hover); }
.plans-bulk-bar .primary[hidden] { display: none; }
.plans-bulk-bar .link-button { color: var(--bar-muted); }
.plans-bulk-bar .link-button:hover { color: var(--bar-ink); }

/* Fixed columns, so paging and the driver / POD cells filling in never reflow the table, sized to
   what they hold (English needs a wider status, delivery and action column), a little wider from
   1600px and tighter below 1366px; the Stops / Orders column takes the rest: in a 1366px window
   235px (157px in English), at 1280 195px (153px), with the page's scrollbar. The checkboxes line
   up with the search box. */
.plans-table { table-layout: fixed; min-width: 940px; }
:root:is([lang="en"], [lang="es"]) .plans-table { min-width: 980px; }
.plans-table > thead > tr > th { height: 40px; padding-top: 0; padding-bottom: 0; border-bottom-color: var(--line-soft); background: var(--surface-head); color: var(--ink-label); font-size: 12px; font-weight: 600; letter-spacing: .02em; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plans-table > tbody > tr.plan-row > td { padding-top: 14px; padding-bottom: 14px; border-bottom-color: var(--line-row); vertical-align: middle; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; transition: background-color .12s ease; }
.plans-table > tbody > tr.plan-row { cursor: pointer; }
.plans-table input[type="checkbox"] { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--teal-alt); cursor: pointer; }
.plans-table .col-select { width: 46px; padding-left: 20px; padding-right: 4px; }
.plans-table .col-truck { width: 166px; padding-left: 10px; }
/* The header lines up with the truck number, past the chevron. */
.plans-table > thead > tr > th.col-truck { padding-left: 38px; }
.plans-table .col-status { width: 86px; padding-left: 10px; padding-right: 8px; }
.plans-table .col-delivery { width: 144px; }
.plans-table .col-driver { width: 168px; }
.plans-table .col-pod { width: 104px; }
.plans-table .col-actions { width: 120px; padding-left: 8px; padding-right: 16px; }
:root:is([lang="en"], [lang="es"]) .plans-table .col-status { width: 110px; }
:root:is([lang="en"], [lang="es"]) .plans-table .col-delivery { width: 176px; }
:root:is([lang="en"], [lang="es"]) .plans-table .col-actions { width: 142px; }
@media (min-width: 1600px) {
  .plans-table .col-truck { width: 200px; }
  .plans-table .col-delivery { width: 168px; }
  .plans-table .col-driver { width: 210px; }
  .plans-table .col-pod { width: 140px; }
  :root:is([lang="en"], [lang="es"]) .plans-table .col-delivery { width: 188px; }
}
@media (max-width: 1365px) {
  .plans-tabs, .plans-filters, .plans-chips { padding-left: 16px; padding-right: 16px; }
  .plans-table .col-select { width: 40px; padding-left: 16px; }
  .plans-table .col-truck { width: 162px; }
  .plans-table .col-status { width: 84px; padding-left: 8px; padding-right: 6px; }
  .plans-table .col-driver { width: 150px; padding-left: 10px; padding-right: 10px; }
  .plans-table .col-pod { width: 96px; }
  .plans-table .col-actions { width: 112px; padding-left: 4px; padding-right: 12px; }
  .plans-table .plan-load { font-size: 13px; }
  .plans-table .plan-detail-cell { padding-left: 78px; }
  :root:is([lang="en"], [lang="es"]) .plans-table .col-status { width: 102px; }
  :root:is([lang="en"], [lang="es"]) .plan-status { padding-left: 7px; padding-right: 8px; }
  :root:is([lang="en"], [lang="es"]) .plans-table .col-delivery { width: 158px; padding-left: 12px; padding-right: 8px; }
  :root:is([lang="en"], [lang="es"]) .plan-date { gap: 3px 4px; font-size: 13px; }
  :root:is([lang="en"], [lang="es"]) .day-tag { padding: 1px 4px; font-size: 10px; }
  :root:is([lang="en"], [lang="es"]) .plans-table .col-pod { width: 88px; }
  :root:is([lang="en"], [lang="es"]) .plans-table .col-actions { width: 130px; }
  :root:is([lang="en"], [lang="es"]) .plan-primary { padding: 0 10px; }
}
.plans-table > tbody > tr.plan-row:hover > td { background: var(--surface-hover); }
.plans-table > tbody > tr.plan-row.is-expanded > td { background: var(--surface-open); border-bottom-color: transparent; }
.plans-table > tbody > tr.plan-row.pod-ready > td { background: var(--warn-wash); }
.plans-table > tbody > tr.plan-row.pod-ready > td:first-child { box-shadow: inset 3px 0 var(--amber); }
.plans-table > tbody > tr.plan-row.pod-exception > td { background: var(--stop-wash); }
.plans-table > tbody > tr.plan-row.pod-exception > td:first-child { box-shadow: inset 3px 0 var(--stop-fill); }
/* Last, so a ticked row looks ticked whatever else it is (the POD edge stays). */
.plans-table > tbody > tr.plan-row.selected > td { background: var(--teal-selected); }
/* A cancelled truck steps back as a whole (its checkbox and ⋯ stay as they are). */
.plan-row[data-status="CANCELLED"] > td:not(.col-select):not(.col-actions) > * { opacity: .5; }

.plan-truck { display: flex; align-items: center; gap: 6px; min-width: 0; }
.expand-plan { flex: none; display: grid; place-items: center; width: 22px; height: 22px; min-height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink-faint); }
.expand-plan svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.plan-row:hover .expand-plan { color: var(--ink-2); }
.expand-plan:hover { background: var(--fill-2); }
.plan-row.is-expanded .expand-plan { color: var(--teal-link); }
.plan-row.is-expanded .expand-plan svg { transform: rotate(90deg); }
.plan-truck-text { display: grid; gap: 3px; min-width: 0; }
.plan-truck-no { justify-self: start; color: var(--ink-strong); font-size: 14px; font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; cursor: text; }
.plan-sub { color: var(--ink-label); font-size: 12px; }
.plan-truck-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The status: a pill with a dot per state, grey while waiting, blue on the road, green when done (other
   pages keep their .badge colours). */
.plan-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--fill); color: var(--ink-2); font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.plan-status::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); }
.plan-status.dispatched { color: var(--road-ink); background: var(--road-tint); }
.plan-status.dispatched::before { background: var(--road-mark); }
.plan-status.completed { color: var(--go-ink); background: var(--go-tint); }
.plan-status.completed::before { background: var(--go-mark); }
.plan-status.cancelled { color: var(--ink-label); background: var(--fill-off); }
.plan-status.cancelled::before { background: var(--dot-off); }
.plan-date { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; color: var(--ink-row); font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-window, .plan-trades { margin-top: 3px; }
.day-tag { padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; line-height: 1.45; white-space: nowrap; }
.day-tag.today { color: var(--teal-ink); background: var(--teal-tint-strong); }
.day-tag.tomorrow { color: var(--ink-note); background: var(--fill); }
.day-tag.overdue { color: var(--stop-ink); background: var(--stop-tint); }
.plan-load { overflow: hidden; color: var(--ink-body); font-size: 13.5px; font-weight: 600; }
/* "A · B" that wraps as "A" over "B": each piece carries its dot in front, and the list sits that
   dot's width to the left inside a clipping box, so a dot at a line's start is never seen. */
.dot-list { display: flex; flex-wrap: wrap; margin-left: -13px; }
.dot-list > * { white-space: nowrap; }
.dot-list > *::before { content: "·"; display: inline-block; width: 13px; text-align: center; }
/* The Trades on one line: as many names as fit (app.js measures them), then +N. */
.plan-trades { display: flex; gap: 4px; min-width: 0; white-space: nowrap; }
.plan-trades-names { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.plan-trades-more { flex: none; color: var(--ink-soft); font-weight: 700; }

.driver-chip { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; min-height: 0; padding: 3px 10px 3px 3px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: inherit; text-align: left; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
button.driver-chip:hover { border-color: var(--field-line); background: var(--surface-raised); box-shadow: var(--shadow-chip); }
.driver-avatar { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--teal-tint); color: var(--teal-deep); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.driver-text { display: grid; min-width: 0; line-height: 1.3; }
.driver-name { overflow: hidden; color: var(--ink-row); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.driver-note { font-size: 11.5px; font-weight: 500; text-wrap: balance; }
.driver-note.ok { color: var(--go-text); }
.driver-note.pending { color: var(--ink-muted); }
.driver-note.warn { color: var(--stop-ink); font-weight: 600; }
.driver-note.caution { color: var(--warn-text); }
/* No driver yet: a dashed circle where the avatar goes, so assigned and unassigned rows line up. The
   avatar and the circle line up with the column's header too: their frames reach into the padding. */
.driver-chip, .driver-assign-empty { margin-left: -4px; }
.driver-assign-empty { display: inline-flex; align-items: center; gap: 9px; min-height: 0; padding: 3px 12px 3px 3px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--teal-link); font-weight: 600; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease; }
.driver-assign-empty > span:first-child { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px dashed var(--teal-line-dash); border-radius: 50%; font-size: 16px; font-weight: 500; line-height: 1; }
.driver-assign-empty:hover { border-color: var(--teal-line-soft); background: var(--teal-wash); }
.driver-assign-empty:hover > span:first-child { border-style: solid; border-color: var(--teal-alt); background: var(--surface-raised); }
@media (max-width: 1365px) {
  /* A smaller avatar below 1366px, so "Assign Driver" stays on one line. */
  .driver-avatar, .driver-assign-empty > span:first-child { width: 24px; height: 24px; }
  .driver-chip, .driver-assign-empty { gap: 7px; padding-right: 8px; }
}
.plans-table td > .muted { color: var(--ink-faint); }
.plan-cell-loading { display: block; width: 70%; max-width: 120px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--fill) 25%, var(--surface-sunk) 50%, var(--fill) 75%); background-size: 200% 100%; animation: plan-skeleton 1.2s linear infinite; }
@keyframes plan-skeleton { to { background-position: -200% 0; } }

.pod-progress { position: relative; display: grid; gap: 6px; width: 100%; max-width: 120px; min-height: 0; padding: 5px 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; text-align: left; overflow-wrap: normal; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.pod-progress:hover { border-color: var(--field-line); background: var(--surface-raised); box-shadow: var(--shadow-chip); }
/* The count lines up with the column's header; the hover frame reaches into the padding. */
.col-pod .pod-progress { margin-left: -9px; }
/* The count never breaks; a tag that does not fit beside it goes under it. */
.pod-progress-text { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: var(--ink-body); font-size: 12.5px; }
.pod-progress-text strong { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pod-issue-tag { padding: 0 6px; border-radius: 4px; color: var(--stop-ink); background: var(--stop-tint); font-size: 11px; font-weight: 700; white-space: nowrap; }
/* Orders the driver could not deliver that went back to the Order Pool: a return arrow and how many. */
.pod-returned-tag { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border-radius: 4px; color: var(--warn-ink); background: var(--warn-tint); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pod-returned-tag svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pod-progress-bar { display: block; height: 5px; border-radius: 999px; background: var(--meter-track); overflow: hidden; }
.pod-progress-bar i { display: block; height: 100%; border-radius: 999px; background: var(--meter-neutral); }
.pod-progress.pod-partial .pod-progress-bar i { background: var(--amber); }
.pod-progress.pod-done .pod-progress-bar i { background: var(--go-mark); }
.pod-progress.pod-issue .pod-progress-bar i { background: var(--stop-mark); }
/* A POD email failed: a red dot on the corner. */
.pod-progress.pod-email-failed::after { content: ""; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--stop-fill); box-shadow: 0 0 0 1.5px var(--surface); }
.col-pod .pod-hint { display: block; margin-top: 4px; color: var(--warn-ink); font-size: 11.5px; font-weight: 600; line-height: 1.3; }
.col-pod .pod-hint.pod-hint-exception { color: var(--stop-strong); }

.plan-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.plan-primary { min-width: 60px; min-height: 30px; padding: 0 12px; font-weight: 600; white-space: nowrap; }
/* The row's own action is a soft tint, so a page of them stays calm; it fills on hover. */
.plans-table .plan-primary { border-color: transparent; border-radius: 8px; background: var(--teal-tint); color: var(--teal-ink); font-size: 13px; transition: background-color .15s ease, color .15s ease; }
.plans-table .plan-primary:hover { background: var(--teal-alt); color: var(--on-accent); }
/* ⋯ has no frame until it is pointed at or open. */
.more-button { display: grid; place-items: center; width: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink-muted); transition: background-color .15s ease, color .15s ease; }
.more-button svg { width: 16px; height: 16px; fill: currentColor; }
.plan-row:hover .more-button, .plan-units-table tr:hover .more-button { color: var(--ink-2); }
.more-button:hover, .more-button[aria-expanded="true"] { background: var(--fill-2); color: var(--ink); }

/* The opened row, starting under the truck number: the truck's facts (load against capacity,
   warehouse, add buttons), its special instructions, then its units as a fixed-layout card table that
   never needs to scroll sideways. */
.plan-detail-row { display: none; }
.plan-detail-row.expanded { display: table-row; }
.plan-detail-cell { padding: 2px 20px 20px 84px; background: var(--surface-open); border-bottom: 1px solid var(--line-soft); white-space: normal; cursor: default; }
.plan-detail { display: grid; gap: 12px; }
.plan-detail-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 32px; }
.detail-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 28px; color: var(--ink-body); font-size: 13px; }
.detail-fact { display: inline-flex; align-items: center; gap: 10px; }
.detail-label { flex: none; color: var(--ink-label); font-size: 12px; font-weight: 500; }
.detail-fact strong { min-width: 0; color: var(--ink-row); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.capacity-meter { display: block; width: 112px; height: 6px; border-radius: 999px; background: var(--meter-track); overflow: hidden; }
.capacity-meter i { display: block; height: 100%; border-radius: 999px; background: var(--go-mark); }
.detail-capacity.over .capacity-meter i { background: var(--stop-mark); }
.detail-capacity.over strong { color: var(--stop-ink); }
.detail-note { display: flex; gap: 10px; padding: 9px 14px; border: 1px solid var(--note-line); border-left: 3px solid var(--amber); border-radius: 8px; background: var(--note-bg); color: var(--note-ink); font-size: 13px; }
.detail-note .detail-label { flex: none; color: var(--warn-ink); font-weight: 600; }
.detail-note-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-actions button { min-height: 30px; padding: 0 12px; border-color: var(--line); border-radius: 8px; background: var(--button); color: var(--teal-ink); font-size: 13px; font-weight: 600; transition: background-color .15s ease, border-color .15s ease; }
.detail-actions button:hover { border-color: var(--teal-line); background: var(--teal-wash); }

.plan-units { overflow-x: auto; border: 1px solid var(--card-line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-hairline); }
.plan-units-table { table-layout: fixed; }
.plan-units-table th { padding: 9px 12px; border-bottom-color: var(--line-soft); background: var(--surface-head); color: var(--ink-label); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.plan-units-table td { padding: 12px; border-bottom-color: var(--line-row); vertical-align: top; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.plan-units-table .unit-col-seq { width: 64px; }
.plan-units-table .unit-col-trade { width: 13%; }
.plan-units-table .unit-col-orders { width: 20%; }
.plan-units-table .unit-col-load { width: 15%; }
.plan-units-table .unit-col-recipients { width: 18%; }
.plan-units-table .unit-col-actions { width: 52px; }
.plan-units-table tbody tr:last-child td { border-bottom: 0; }
.plan-units-table tbody tr:hover td { background: var(--surface-head); }
.plan-units-table tbody tr.dragging { opacity: .4; }
.plan-units-table tbody tr.drag-over { box-shadow: inset 0 2px var(--teal-alt); }
.unit-seq { white-space: nowrap; }
.plan-units-table tr[data-reorder] .unit-seq { cursor: grab; }
.unit-seq .drag-handle { margin-right: 4px; color: var(--ink-ghost); font-size: 15px; vertical-align: middle; }
.plan-units-table tr[data-reorder]:hover .drag-handle { color: var(--ink-note); }
.unit-seq-no { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--teal-tint); color: var(--teal-deep); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: middle; }
.unit-place { color: var(--ink-row); font-weight: 600; }
.unit-address { margin-top: 3px; color: var(--ink-label); font-size: 12.5px; }
.unit-address .badge { margin-right: 6px; padding: 1px 6px; font-size: 11px; }
.unit-trade { color: var(--ink-body); font-weight: 600; }
.unit-list { display: grid; justify-items: start; gap: 2px; }
.unit-list-item { max-width: 100%; }
.unit-orders .unit-list-item { font-size: 13px; font-variant-numeric: tabular-nums; }
/* An order number never breaks (a real one is 23 characters at most); one too long for the column ends in … */
.order-no { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.order-pickup { color: var(--ink-label); font-size: 12px; font-weight: 600; }
.unit-recipients .unit-list { gap: 6px; }
.unit-list-extra { display: none; }
.unit-list.show-all .unit-list-extra { display: block; }
.unit-list-toggle { min-height: 0; padding: 0; font-size: 12px; }
.unit-list-less, .unit-list.show-all .unit-list-more { display: none; }
.unit-list.show-all .unit-list-less { display: inline; }
.unit-person { display: block; color: var(--ink-body); font-weight: 600; }
.unit-phone { display: block; overflow: hidden; color: var(--ink-label); font-size: 12px; }
.unit-phone .dot-list { margin-left: -11px; }
.unit-phone .dot-list > *::before { width: 11px; }
/* Packages as label / number pairs, the capacity they take under them. */
.unit-qty { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; gap: 1px 10px; color: var(--ink-note); font-size: 12.5px; }
.unit-qty strong { color: var(--ink-row); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.unit-qty .unit-qty-capacity { margin-top: 3px; color: var(--ink-label); font-weight: 600; }
/* On an open truck the packages are a button: the quantity editor. */
.unit-load-button { position: relative; display: block; width: calc(100% + 12px); min-height: 0; margin: -5px -6px; padding: 5px 6px; border: 1px dashed transparent; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; }
.unit-load-button:hover, .unit-load-button:focus-visible { border-color: var(--teal-line-dim); background: var(--surface-raised); }
.unit-edit-icon { position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; fill: none; stroke: var(--teal-link); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.unit-load-button:hover .unit-edit-icon, .unit-load-button:focus-visible .unit-edit-icon { opacity: 1; }
.plan-units-table .unit-actions { padding-top: 8px; padding-bottom: 8px; text-align: right; }
.unit-actions .more-button { display: inline-grid; }
.unit-empty { padding: 18px; color: var(--ink-muted); text-align: center; }
/* E-POD on the units: one the driver could not deliver that is still on the truck is red, like an
   exception row; after the others, the ones that went back to the Order Pool for it are faded with an
   amber edge. Each says why on a line under its address. */
.plan-units-table tbody tr.unit-not-delivered td { background: var(--stop-wash); }
.plan-units-table tbody tr.unit-not-delivered td:first-child { box-shadow: inset 3px 0 var(--stop-fill); }
.unit-not-delivered .unit-seq-no { background: var(--stop-tint); color: var(--stop-ink); }
.plan-unit-returns tr:first-child td { border-top: 1px dashed var(--line-dash); }
.plan-units-table tbody.plan-unit-returns td { background: var(--warn-wash); }
.plan-units-table tbody.plan-unit-returns td:first-child { box-shadow: inset 3px 0 var(--amber); }
.unit-returned :is(.unit-place, .unit-trade, .unit-orders) { color: var(--ink-label); }
.unit-seq-no.unit-seq-returned { padding: 0; width: 22px; background: var(--warn-tint); color: var(--warn-ink); }
.unit-seq-returned svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.unit-pod-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 6px; color: var(--ink-body); font-size: 12.5px; }
.unit-pod-tag { flex: none; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.unit-pod-note.tone-bad .unit-pod-tag { color: var(--stop-ink); background: var(--stop-tint); }
.unit-pod-note.tone-wait .unit-pod-tag { color: var(--warn-ink); background: var(--warn-tint); }
.unit-pod-reason { font-weight: 600; }
.unit-pod-remark { min-width: 0; overflow: hidden; color: var(--ink-label); text-overflow: ellipsis; white-space: nowrap; }
.unit-returned-who { color: var(--ink-label); font-size: 12.5px; }
.unit-who-line { display: block; }
.unit-who-line + .unit-who-line { margin-top: 3px; }
.unit-who-label { color: var(--ink-faint); font-size: 12px; font-weight: 600; }
.unit-who-line > span:nth-child(2) { color: var(--ink-body); font-weight: 600; }
.unit-who-time { font-variant-numeric: tabular-nums; }

/* The pager and the empty list, in the page's quieter frame. */
.plans-panel .pagination-bar { padding: 12px 20px; border-top-color: var(--line-soft); }
.plans-panel .pagination-bar select, .plans-panel .pagination-controls button { border-radius: 8px; }
.plans-panel .empty-state p { color: var(--ink-label); }
.plans-panel .empty-state button { margin-top: 14px; border-radius: 8px; }

/* The ⋯ menu (fixed, placed by app.js beside its button). */
.action-menu { position: fixed; z-index: 60; min-width: 208px; padding: 6px; border: 1px solid var(--card-line); border-radius: 10px; background: var(--popover); box-shadow: var(--shadow-action-menu); }
.action-menu[hidden] { display: none; }
.action-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-body); font-size: 13.5px; text-align: left; white-space: nowrap; }
.action-menu-item svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--ink-muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.action-menu-item:hover, .action-menu-item:focus-visible { background: var(--teal-wash); outline: none; }
.action-menu-item:hover svg, .action-menu-item:focus-visible svg { stroke: var(--teal-link); }
.action-menu-item.danger { min-height: 34px; padding: 0 10px; border: 0; background: transparent; color: var(--danger-text); }
.action-menu-item.danger svg { stroke: var(--danger-text); }
.action-menu-item.danger:hover, .action-menu-item.danger:focus-visible { background: var(--stop-row-hover); }
.action-menu-separator { height: 1px; margin: 5px 6px; background: var(--line-row); }

/* 指派司機 */
.assign-driver-dialog { width: min(640px, calc(100vw - 40px)); }
.assign-driver-body { display: grid; gap: 12px; padding: 16px 18px; }
.assign-driver-context { display: grid; gap: 6px; }
.assign-driver-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--ink-note); }
.assign-driver-now { color: var(--ink-note); }
.assign-driver-now strong { color: var(--ink); }
.assign-driver-trucks { display: flex; flex-wrap: wrap; gap: 6px; }
.assign-driver-truck { padding: 2px 8px; border-radius: 4px; background: var(--fill); color: var(--ink-body); font-size: 12px; font-weight: 700; }
.assign-driver-warning { margin: 0; padding: 9px 12px; border: 1px solid var(--warn-line); border-radius: 6px; background: var(--warn-wash); color: var(--warn-deep); font-weight: 600; }
.assign-driver-search { max-width: none; }
/* The list gives up the room the shipper signature under it takes (more while its pad is open). */
.assign-driver-list { display: grid; align-content: start; gap: 6px; max-height: min(420px, calc(100vh - 500px)); min-height: 120px; overflow: auto; padding: 2px; }
.assign-driver-dialog.drawing .assign-driver-list { max-height: min(420px, calc(100vh - 610px)); }
.assign-driver-option { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
.assign-driver-option:hover { border-color: var(--teal-line-grey); background: var(--surface-hover); }
.assign-driver-option.chosen { border-color: var(--teal-alt); background: var(--teal-wash); box-shadow: 0 0 0 2px var(--teal-ring); }
.assign-driver-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--teal-alt); }
.assign-driver-main { display: grid; gap: 2px; min-width: 0; }
.assign-driver-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assign-driver-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--ink-label); font-size: 12px; }
.assign-driver-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.assign-tag { padding: 2px 7px; border-radius: 10px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.assign-tag.current { color: var(--on-accent); background: var(--teal-alt); }
.assign-tag.busy { color: var(--warn-ink); background: var(--warn-tint); }
.assign-tag.warn { color: var(--stop-strong); background: var(--stop-tint); }
.assign-driver-empty { margin: 0; padding: 18px 12px; text-align: center; }
.assign-driver-error { margin: 0; padding: 9px 12px; border: 1px solid var(--stop-note-line); border-radius: 6px; background: var(--stop-wash); color: var(--stop-note); font-weight: 600; }
.assign-driver-error[hidden], .assign-driver-warning[hidden] { display: none; }
/* The shipper signature assigning signs with: the saved one beside the name, date and time it puts on
   the BOLs and PODs, or the pad (full width, the fields under it). */
.assign-driver-shipper { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-head); }
.assign-driver-shipper[hidden] { display: none; }
.assign-shipper-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
.assign-shipper-title { margin: 0; color: var(--ink); font-size: 13px; font-weight: 700; }
.assign-shipper-intro { margin: 0; color: var(--ink-note); font-size: 13px; }
.assign-shipper-body { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: center; gap: 10px 18px; }
.assign-shipper-preview { min-width: 0; }
.assign-shipper-preview .pod-signature { max-height: 72px; }
.assign-shipper-draw { grid-column: 1 / -1; display: grid; gap: 6px; }
.assign-shipper-draw .signature-pad { height: 150px; }
.assign-shipper-draw .signature-pad::after { bottom: 30px; }
.assign-shipper-preview[hidden], .assign-shipper-draw[hidden] { display: none; }
.assign-shipper-fields { font-size: 13px; }

/* User Management: kind tabs over a search box (the add button at its end), then one person per row:
   initials on a disc coloured by kind, the name over the account, how to reach them, the kind, the
   status and the actions. */
.plans-filters > .toolbar-end { margin-left: auto; }
.users-table { table-layout: fixed; min-width: 860px; }
.users-table th:nth-child(1) { width: 28%; }
.users-table th:nth-child(2) { width: 24%; }
.users-table th:nth-child(3) { width: 17%; }
.users-table th:nth-child(4) { width: 120px; }
.users-table th:nth-child(5) { width: 300px; }
:root:is([lang="en"], [lang="es"]) .users-table th:nth-child(5) { width: 340px; }
.users-table td { white-space: normal; overflow-wrap: anywhere; }
.users-table .row-actions { flex-wrap: nowrap; gap: 2px; }
.users-table .row-actions button { white-space: nowrap; }
.user-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.user-cell-text { display: grid; min-width: 0; }
.account-avatar.small { width: 32px; height: 32px; font-size: 11.5px; }
.account-avatar.role-admin { background: var(--avatar); }
.account-avatar.role-manager { background: var(--role-manager); }
.account-avatar.role-user { background: var(--role-user); }
.account-avatar.role-driver { background: var(--role-driver); }
.role-badge.role-admin { color: var(--teal-strong); background: var(--teal-tint); }
.role-badge.role-manager { color: var(--violet); background: var(--violet-tint); }
.role-badge.role-driver { color: var(--warn); background: var(--warn-tint); }
.list-footer { padding: 12px 20px; border-top: 1px solid var(--line-soft); font-size: 13px; }
/* User dialog: who may assign drivers; the user list's tag for it. */
.user-right-row { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-hover); }
.user-right-row[hidden] { display: none; }
.badge.assign-right { color: var(--cyan-ink); background: var(--cyan-tint); }

/* A sign-off's photos in the POD dialog, and their count on the POD page. */
.pod-photos { display: grid; gap: 6px; width: 100%; }
.pod-photos-title { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-note); font-size: 12px; font-weight: 700; }
.pod-photos-title svg, .pod-photo-note svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.pod-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.pod-photo { display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--paper-line); border-radius: 5px; background: var(--paper-sunk); }
.pod-photo:hover { border-color: var(--teal-alt); }
.pod-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pod-photo-note { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; color: var(--ink-note); font-size: 12px; font-weight: 700; }

/* ---- The look, part two: rules that only add what nothing above sets. */
::selection { background: var(--teal-select); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--teal); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.sidebar .brand strong { color: var(--dock-ink); font-size: 16px; font-weight: 700; letter-spacing: .01em; }
.sidebar .brand-mark { box-shadow: 0 0 0 1px var(--dock-ring); }
.dialog-header h2 { font-size: 18px; font-weight: 700; }
/* An overloaded truck must not leave the dock: like its meter, the top edge of its card wears
   the dock edge's yellow-and-black hazard stripe (Truck Plans' opened row too). */
.truck-card.overload::before { content: ""; position: absolute; z-index: 1; top: -1px; left: -1px; right: -1px; height: 6px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: repeating-linear-gradient(-45deg, var(--signal) 0 8px, var(--hazard) 8px 16px); pointer-events: none; }
.detail-capacity.over .capacity-meter i { background: repeating-linear-gradient(-45deg, var(--signal) 0 5px, var(--hazard) 5px 10px); }

/* Screen sizes. A window narrower than 1180px drops the topbar's language switch (it is in Appearance) and the
   account's name; at 900px and narrower the menu is a drawer over the page (#nav-toggle), the topbar wraps
   with the search on a row of its own, and forms take one column; a phone gets tighter margins. These come
   last so they win over the base rules they change. */
@media (max-width: 1180px) {
  .user-session .language-switch { display: none; }
  .account-text, .account-chevron { display: none; }
  .account-button { padding-right: 5px; }
}
@media (max-width: 900px) {
  :root, :root[data-sidebar] { --sidebar-w: 0px; }
  body { min-width: 0; }
  /* The drawer is fixed, so it leaves the grid: one column for the page. */
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 90; width: 268px; height: 100dvh; transform: translateX(-104%); transition: transform .2s ease, box-shadow .2s ease; }
  .app-shell.nav-open .sidebar { transform: none; box-shadow: var(--shadow-pop); }
  .sidebar-collapse { display: none; }
  .nav-toggle { display: inline-grid; }
  .main { padding: 0 14px 28px; }
  .topbar { flex-wrap: wrap; gap: 10px 12px; min-height: 0; padding: 12px 0 14px; }
  .topbar > div:first-child { flex: 1 1 0; }
  .global-search { order: 5; flex: 1 1 100%; max-width: none; margin-left: 0; }
  .global-search-key { display: none; }
  .global-search-panel { width: 100%; }
  .plans-bulk-bar { bottom: 10px; max-width: calc(100vw - 16px); padding: 8px 8px 8px 14px; }
  /* Self Pick's search takes a line of its own over the other filters. */
  .self-pick-filters .plans-search { flex-basis: 100%; max-width: none; }
  .order-pool-filters .plans-search { flex-basis: 100%; max-width: none; }
  .plans-tabs-actions { justify-content: flex-start; flex-basis: 100%; margin-left: 0; }
  dialog, .wide-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .form-grid { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .form-grid > * { grid-column: auto !important; }
}
@media (max-width: 600px) {
  .main { padding: 0 10px 22px; }
  .topbar > div:first-child { grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; }
  .topbar > div:first-child::before { width: 34px; height: 34px; border-radius: 9px; }
  .topbar > div:first-child::after { width: 17px; height: 17px; }
  .topbar h1 { font-size: 18px; }
  .panel-header, .toolbar { flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
  .toolbar h2 { flex: 1 1 100%; }
  .theme-toggle { width: 34px; height: 34px; }
}