/* ATRT TMS component set. Loaded LAST in every page (after the page's own <style>) so one definition wins everywhere.
   Class names match what the existing pages already use (.btn .btn-primary .badge .modal-overlay …), so no markup change is needed. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); font-size: var(--fs-md); line-height: 1.45; color: var(--c-text); background: var(--c-bg); }
a { color: var(--blue-600); }
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
::selection { background: var(--c-primary-soft); }

/* ── Buttons ─────────────────────────────────────────── */
.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-ghost, .btn-danger, .btn-save, .btn-refresh, .btn-sm, button.btn-icon {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 34px; padding: 0 var(--s-4); border-radius: var(--r-md); border: 1px solid var(--c-border-strong);
  background: var(--c-surface); color: var(--c-text); font: 600 var(--fs-md)/1 var(--font); cursor: pointer; text-decoration: none;
  transition: background .12s, border-color .12s, box-shadow .12s, transform .05s; white-space: nowrap;
}
.btn:hover, .btn-outline:hover, .btn-ghost:hover, .btn-secondary:hover, .btn-refresh:hover { background: var(--gray-100); border-color: var(--gray-400); }
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-save { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.btn-primary:hover, .btn-save:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--c-text-2); }
.btn-danger { background: var(--c-surface); border-color: var(--red-600); color: var(--red-600); }
.btn-danger:hover { background: var(--red-100); border-color: var(--red-600); color: var(--red-600); }
.btn-sm { min-height: 28px; padding: 0 var(--s-3); font-size: var(--fs-sm); }
button:disabled, .btn[disabled], .btn-primary[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
button.btn-icon { min-width: 34px; padding: 0; }

/* ── Forms ───────────────────────────────────────────── */
input[type=text], input[type=search], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=time],
input[type=datetime-local], input[type=password], input[type=url], select, textarea, .form-control, .filter {
  min-height: 34px; padding: 6px var(--s-3); border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text); font: var(--fs-md)/1.3 var(--font); max-width: 100%;
}
textarea { min-height: 72px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-focus); }
input:disabled, select:disabled, textarea:disabled { background: var(--gray-100); color: var(--c-text-3); }
label, .field-label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-2); }
.field-row { display: flex; flex-direction: column; gap: var(--s-1); }

/* ── Cards, KPIs ─────────────────────────────────────── */
.card, .panel { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-border); font-weight: 700; }
.card-body { padding: var(--s-4); }
.kpi { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-4); }
.kpi-val { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.01em; }
.kpi-label, .kpi-lbl { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c-text-2); }

/* ── Tables ──────────────────────────────────────────── */
.data-table th, .tbl th { background: var(--c-surface-2); color: var(--c-text-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.data-table td, .tbl td { font-size: var(--fs-sm); border-bottom: 1px solid var(--gray-100); }
.data-table tbody tr:hover td, .tbl tbody tr:hover td { background: var(--c-surface-2); }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { padding: 9px var(--s-3); text-align: left; }
.tbl-wrap { overflow: auto; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }

/* ── Badges / pills ──────────────────────────────────── */
.badge, .pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; line-height: 1.5; background: var(--gray-100); color: var(--gray-600); }
.badge-green, .pill-green { background: var(--green-100); color: var(--green-600); }
.badge-yellow, .badge-amber, .pill-amber { background: var(--amber-100); color: var(--amber-600); }
.badge-red, .pill-red { background: var(--red-100); color: var(--red-600); }
.badge-blue, .pill-blue { background: var(--blue-100); color: var(--blue-600); }
.badge-purple, .pill-purple { background: var(--purple-100); color: var(--purple-600); }
.badge-gray, .pill-gray { background: var(--gray-100); color: var(--gray-600); }

/* ── Tabs ────────────────────────────────────────────── */
.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--c-border); }
.tab, .ptab { padding: var(--s-2) var(--s-4); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--c-text-2); font: 600 var(--fs-md) var(--font); cursor: pointer; }
.tab:hover, .ptab:hover { color: var(--c-text); }
.tab.active, .ptab.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }

/* ── Modal ───────────────────────────────────────────────
   RULE: this file must never decide whether a page's own modal / overlay / drawer is shown. Pages use `.modal`, `.overlay`,
   `.modal-overlay` as hidden full-screen wrappers (display:none until a class is added) AND as inner boxes, so a global
   `.modal { display:flex }` here made every such modal visible on load (consignments, loads, pallets — 2026-10-24).
   Only the UI.* helper classes (.ui-overlay / .ui-modal) get layout from here; page modals get COSMETICS ONLY, on the inner box. */
.ui-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: var(--s-4); background: rgba(15, 23, 42, .38); backdrop-filter: blur(2px); }
.ui-overlay.open { display: flex; }
.ui-modal { background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-3); width: min(560px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; }
.modal-overlay > .modal { border-radius: var(--r-lg); box-shadow: var(--shadow-3); }               /* cosmetics only: no display / position / size */
.modal-head, .modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--c-border); }
.modal-title { font-size: var(--fs-lg); font-weight: 700; margin: 0; }
.modal-body { padding: var(--s-5); overflow: auto; }
.modal-foot, .modal-footer { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--c-border); background: var(--c-surface-2); }
.close-btn, .modal-close { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--c-text-2); cursor: pointer; border-radius: var(--r-sm); padding: 2px 8px; }
.close-btn:hover, .modal-close:hover { background: var(--gray-100); color: var(--c-text); }

/* ── Toasts (UI.toast) ───────────────────────────────── */
#ui-toasts { position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--s-2); max-width: min(420px, calc(100vw - 32px)); }
.ui-toast { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background:var(--c-surface); color: var(--c-text); box-shadow: var(--shadow-2); font-size: var(--fs-md); border-left: 4px solid var(--gray-400); animation: ui-in .18s ease-out; }
.ui-toast.success { border-left-color: var(--green-600); } .ui-toast.error { border-left-color: var(--red-600); } .ui-toast.warn { border-left-color: var(--amber-600); } .ui-toast.info { border-left-color: var(--blue-600); }
.ui-toast button { margin-left: auto; background: none; border: 0; color: var(--c-text-3); cursor: pointer; font-size: 16px; }
@keyframes ui-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Misc ────────────────────────────────────────────── */
.empty, .empty-sm { color: var(--c-text-3); text-align: center; padding: var(--s-6) var(--s-4); font-size: var(--fs-md); }
.spin { width: 16px; height: 16px; border: 2px solid var(--gray-200); border-top-color: var(--c-primary); border-radius: 50%; animation: ui-spin .7s linear infinite; display: inline-block; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-6); background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.page-head h1 { margin: 0; font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.01em; }
.page-head .sub { color: var(--c-text-2); font-size: var(--fs-sm); margin-top: 2px; }
.page-body { padding: var(--s-5) var(--s-6); display: grid; gap: var(--s-4); }
.grid { display: grid; gap: var(--s-4); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack > * + * { margin-top: var(--s-3); } .row { display: flex; align-items: center; gap: var(--s-3); } .grow { flex: 1; } .muted { color: var(--c-text-2); }
.mono { font-family: var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Small screens ───────────────────────────────────── */
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-head, .page-body { padding-left: var(--s-4); padding-right: var(--s-4); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .ui-modal { width: 100%; max-height: 100vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .ui-overlay { align-items: flex-end; padding: 0; }
  .btn, input, select, textarea { min-height: 44px; }
}

/* ── COLOUR RULES (docs/ui-nav-map.md → "Colour rules") ──────────────────────────────────────────────────────────
   The shell's sidebar is the ONLY dark surface. Everything else is a white (or very light grey) surface with a light-grey border and dark text.
   Buttons and primary actions are orange (--c-primary); a light tint (very light orange / light blue) marks highlights such as result totals.
   Text is never lighter than --c-text-3 (#5b6678): >= 4.5:1 on white and on the page grey. Nothing below is a new look — it is a BACKSTOP so a page
   (or a result panel built by script) that still carries an old dark rule cannot put a dark panel in the content area. The page rules themselves were rewritten
   (scripts/ui/lighten_css.js); scripts/ui/design_audit.js fails on any dark element or text under 4.5:1. */
.topbar, .topnav, .top-nav { background: var(--c-surface) !important; color: var(--c-text) !important; border-bottom: 1px solid var(--c-border) !important; }
.topbar a, .topbar span, .topbar div, .topbar h1, .topbar h2, .topbar b, .topbar label { color: var(--c-text-2) !important; border-color: var(--c-border) !important; }
.topbar .btn-primary, .topbar .btn-primary * { color: #fff !important; }
.toast, #toast, .snack, [id$="toast-msg"], .toast-msg { background: var(--c-surface) !important; color: var(--c-text) !important; border: 1px solid var(--c-border-strong) !important; box-shadow: var(--shadow-2); }
.toast.err, .toast.error, #toast.err, #toast.error { border-left: 4px solid var(--red-600) !important; }
.toast.ok, .toast.success, #toast.ok, #toast.success { border-left: 4px solid var(--green-600) !important; }
table th, table thead th { background: var(--c-surface-2); color: var(--c-text-2); }
pre, code, kbd, samp, .code, .code-box, .info-box, .result-box, .callout { background: var(--gray-100); color: var(--c-text); border-color: var(--c-border); }
.info-box, .result-box, .callout, .highlight { background: var(--c-primary-soft); border: 1px solid #fed7aa; color: var(--c-text); }   /* highlights / result totals: light orange tint */
.result-box *, .info-box * { border-color: var(--c-border); }
[role="tooltip"], .tooltip, .tip, .popover, .dropdown-menu, .ctx-menu { background: var(--c-surface) !important; color: var(--c-text) !important; border: 1px solid var(--c-border-strong); box-shadow: var(--shadow-2); }
button.btn-primary, .btn-primary, .btn-save, .btn-p, .btnp { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
button.btn-primary:hover, .btn-primary:hover, .btn-save:hover, .btn-p:hover, .btnp:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); }