/* ============================================================
   Dabner Transport — Dacker overrides on top of Bootstrap.
   Brand tokens + targeted brand surfaces (navbar, homepage).
   Bootstrap stays in charge of form/table chrome for the rest
   of the app; this file just paints the bits the brand owns.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=Barlow:wght@400;500;600;700&display=swap');

:root {
  /* Navy — header bar, footer, hero overlay, dark bands */
  --navy-900: #1B2F40;
  --navy-800: #243F52;
  --navy-700: #2E4D63;
  --navy-600: #3B6079;

  /* Gold — longhorn, CTAs, stat numbers, eyebrows */
  --gold-100: #FBEBC6;
  --gold-400: #F2BF63;
  --gold-500: #E8A93C;
  --gold-600: #C98F2A;

  /* Warm neutrals */
  --paper:   #FAF7F1;   /* body bg — never pure white */
  --bone:    #F1ECE2;
  --dust:    #D9D2C4;
  --asphalt: #2A2A2A;
  --black:   #0E1822;

  /* Foreground / borders */
  --fg-1: #1B2F40;
  --fg-2: #4A5C6B;
  --fg-3: #7A8893;
  --fg-on-navy:   #FFFFFF;
  --fg-on-navy-2: #B9C7D2;
  --border:        #E2DBCB;
  --border-strong: #BFB6A2;
  --rule-on-navy:  rgba(255,255,255,0.12);

  /* Status */
  --success: #4A8B3F;
  --warn:    #D4811F;
  --danger:  #B23A2F;

  /* Type families */
  --font-display: 'Barlow Condensed', 'Oswald', 'Impact', sans-serif;
  --font-body:    'Barlow', 'Roboto', system-ui, -apple-system, sans-serif;

  /* Type scale (modest values — internal tool, not 1920 marketing) */
  --fs-eyebrow:  13px;
  --fs-body-sm:  14px;
  --fs-body:     16px;
  --fs-body-lg:  18px;
  --fs-h5:       20px;
  --fs-h4:       26px;
  --fs-h3:       32px;
  --fs-h2:       44px;
  --fs-h1:       60px;

  --tracking-display: 0.02em;
  --tracking-eyebrow: 0.18em;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  /* Radii — Dabner is squared */
  --radius-md: 4px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(27,47,64,0.08);
  --shadow-md: 0 6px 18px rgba(27,47,64,0.10);
  --shadow-inset-navy: inset 0 -3px 0 rgba(0,0,0,0.18);
}

/* ============================================================
   Base body — warm paper bg + Barlow body.
   Bootstrap typography stays for inputs/tables; we override
   the document baseline.
   ============================================================ */
html, body { background: var(--paper); }
body {
  font-family: var(--font-body);
  color: var(--fg-1);
  font-size: var(--fs-body);
}

/* Reusable typographic helpers (used by the homepage). */
.dabner-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold-600);
}
.dabner-display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: 1.02;
  color: var(--fg-1);
}
.dabner-display-on-navy { color: var(--fg-on-navy); }

/* ============================================================
   Nav bar — "Nav Refresh" Option A: grouped underline tabs with
   simple icon-tile dropdown menus + an account avatar menu.
   Hand-rolled (not Bootstrap's navbar) so the menus match the
   design's offsets and tile layout exactly; a small inline
   script in _Layout.cshtml drives the open/close behaviour.
   ============================================================ */
.dab-navbar {
  background: var(--navy-800);
  box-shadow: var(--shadow-inset-navy);
  padding: 16px 0;
  position: relative;
  z-index: 60;
}
.dab-navbar .container {
  display: flex;
  align-items: center;
  gap: 40px;
}
.dab-brand { padding: 0; display: block; flex: none; }
.dab-brand img { height: 44px; display: block; }

.dab-nav { display: flex; align-items: center; gap: 36px; }
.dab-nav-item { position: relative; }

/* Underline tab trigger */
.dab-tab {
  display: flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600; font-size: 15px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.dab-tab svg { transition: transform 160ms ease; }
.dab-tab:hover { color: #fff; border-bottom-color: var(--gold-500); }
.dab-nav-item.is-active > .dab-tab { color: #fff; border-bottom-color: var(--gold-500); }
.dab-nav-item.is-open > .dab-tab { color: #fff; }
.dab-nav-item.is-open > .dab-tab svg { transform: rotate(180deg); }

/* Dropdown panel (simple menu) */
.dab-menu, .dab-acct-menu {
  display: none;
  position: absolute;
  top: calc(100% + 22px); left: -8px;
  min-width: 296px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  padding: 8px;
  z-index: 50;
  animation: dabMenuIn 140ms ease;
}
.dab-nav-item.is-open > .dab-menu,
.dab-acct.is-open > .dab-acct-menu { display: block; }
@keyframes dabMenuIn {
  from { opacity: 0; transform: translateY(-7px); }
  to   { opacity: 1; transform: none; }
}

/* Menu item — icon tile + title (+ optional subtitle) */
.dab-mi {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 5px;
  text-decoration: none;
  transition: background 120ms ease;
}
.dab-mi:hover { background: var(--bone); text-decoration: none; }
.dab-mi.is-here { background: var(--bone); }
.dab-mi-ico {
  flex: none; width: 34px; height: 34px; border-radius: 5px;
  background: var(--gold-100); color: var(--navy-800);
  display: flex; align-items: center; justify-content: center;
}
.dab-mi.is-here .dab-mi-ico { background: var(--gold-500); color: var(--navy-900); }
.dab-mi-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dab-mi-t { font-family: var(--font-body); font-weight: 600; font-size: 14.5px; color: var(--navy-900); }
.dab-mi-s { font-family: var(--font-body); font-weight: 400; font-size: 12.5px; color: var(--fg-3); }
.dab-mi-dot { margin-left: auto; width: 7px; height: 7px; border-radius: 999px; background: var(--gold-600); flex: none; }

/* Compact item (Admin list — no subtitle, smaller tile) */
.dab-mi-compact { padding: 9px 12px; }
.dab-mi-compact .dab-mi-ico { width: 32px; height: 32px; }

/* Disabled "coming soon" report stub */
.dab-mi-soon { cursor: default; }
.dab-mi-soon:hover { background: transparent; }
.dab-mi-soon .dab-mi-ico { background: var(--bone); color: var(--fg-3); }
.dab-mi-soon .dab-mi-t { color: var(--fg-2); }
.dab-soon-badge {
  margin-left: auto; align-self: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-3); background: var(--bone);
  padding: 2px 8px; border-radius: 999px; flex: none;
}

/* Section eyebrow inside a menu */
.dab-menu-label {
  font-family: var(--font-body); font-weight: 600;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-600); padding: 4px 12px 8px;
}

/* Account avatar menu (right-aligned) */
/* Help "?" — sits between the tabs and the account chip. It takes over the
   margin-left:auto that pushes the right-hand cluster across; the sibling rule
   below then cancels .dab-acct's own auto margin, because flexbox splits free
   space *equally* between auto margins and two of them would leave a gap. */
.dab-help {
  margin-left: auto; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  color: var(--fg-on-navy-2);
  border: 1px solid rgba(255,255,255,0.22);
  text-decoration: none;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.dab-help:hover, .dab-help.is-active {
  color: var(--navy-900); background: var(--gold-500); border-color: var(--gold-500);
}

.dab-acct { position: relative; margin-left: auto; flex: none; }
.dab-help + .dab-acct { margin-left: 10px; }
.dab-acct-btn {
  display: flex; align-items: center; gap: 9px;
  background: none; border: none; cursor: pointer; padding: 3px 4px;
}
.dab-avatar {
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--gold-500); color: var(--navy-900);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
}
.dab-acct-chev { color: #fff; display: flex; transition: transform 160ms ease; }
.dab-acct.is-open .dab-acct-chev { transform: rotate(180deg); }
.dab-acct-menu { left: auto; right: -4px; min-width: 248px; }
.dab-acct-head { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.dab-acct-email { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--navy-900); word-break: break-all; }
.dab-acct-role {
  align-self: flex-start; font-family: var(--font-display);
  font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--navy-800); background: var(--gold-100);
  padding: 3px 10px; border-radius: 999px;
}
.dab-acct-div { height: 1px; background: var(--border); margin: 6px 4px; }
.dab-acct-action {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 5px;
  background: none; border: none; cursor: pointer;
  text-decoration: none; color: var(--navy-900);
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
}
.dab-acct-action:hover { background: var(--bone); color: var(--navy-900); text-decoration: none; }
.dab-acct-form { margin: 0; }

/* Sign-in button shown when signed out */
.dab-signin {
  margin-left: auto;
  font-family: var(--font-display); font-weight: 600;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-md); padding: 8px 18px;
  text-decoration: none; transition: background 140ms ease, border-color 140ms ease;
}
.dab-signin:hover { background: rgba(255,255,255,0.10); border-color: #fff; color: #fff; }

/* Narrow screens: let the bar wrap and the tab row scroll rather than
   building a separate hamburger (the desktop ops tool is the primary
   target; the design specifies no mobile treatment). */
@media (max-width: 860px) {
  .dab-navbar .container { gap: 16px; flex-wrap: wrap; }
  .dab-nav { gap: 22px; order: 3; width: 100%; overflow-x: auto; padding-bottom: 4px; }
  .dab-acct { margin-left: auto; }
}

/* ============================================================
   Homepage surfaces — hero, stat band, quick-action tiles,
   brand footer. Scoped to the .home-* classes so they don't
   bleed into the rest of the app.
   ============================================================ */
.home-hero {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  background: var(--navy-800) center/cover no-repeat;
  overflow: hidden;
  margin-top: -16px;          /* hug under the navbar */
  margin-bottom: 32px;
}
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(36,63,82,0.55) 0%,
    rgba(36,63,82,0.30) 45%,
    rgba(27,47,64,0.80) 100%);
}
.home-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 56px 0;
  color: var(--fg-on-navy);
}
.home-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.02;
  margin: 0 0 8px;
  text-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
.home-hero .home-hero-sub {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.92;
  margin: 0;
}
.home-hero .home-hero-greeting {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin: 0 0 18px;
}

/* Stat band */
.home-statband {
  background: var(--navy-800);
  color: var(--fg-on-navy);
  padding: 40px 0;
  margin-bottom: 32px;
}
.home-statband .stat {
  text-align: center;
  position: relative;
  padding: 4px 12px;
}
/* Hairline divider between stats — only on the lg breakpoint where
   all four sit on one row. On smaller screens stats stack 2×2. */
@media (min-width: 992px) {
  .home-statband .stat + .stat {
    border-left: 1px solid var(--rule-on-navy);
  }
}
.home-statband .stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--gold-500);
}
.home-statband .stat-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin-top: 10px;
}
.home-statband .stat-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  color: var(--fg-on-navy-2);
  margin-top: 6px;
}

/* Quick-action tiles */
.home-actions h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0 0 4px;
}
.home-action-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  height: 100%;
  text-decoration: none;
  color: var(--fg-1);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.home-action-card:hover {
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: var(--fg-1);
}
.home-action-card .icon-tile {
  width: 48px;
  height: 48px;
  background: var(--navy-800);
  color: var(--gold-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  margin-bottom: 18px;
}
.home-action-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0 0 6px;
}
.home-action-card p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0 0 14px;
}
.home-action-card .arrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-600);
}

/* Signature bullet pattern (bold lead-in + colon + sentence). */
.dabner-bullet {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.55;
}
.dabner-bullet::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  background: var(--gold-500);
}
.dabner-bullet strong { color: var(--fg-1); }

/* Brand footer */
.dabner-footer {
  background: var(--navy-900);
  color: var(--fg-on-navy);
  padding: 40px 0 20px;
  margin-top: 64px;
}
.dabner-footer .footer-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.dabner-footer .footer-copy {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
}
.dabner-footer hr {
  border-color: rgba(255,255,255,0.10);
  margin: 24px 0;
}

/* ============================================================
   Existing tweaks kept from before this redesign.
   ============================================================ */
/* ============================================================
   Brand call-to-action, usable outside the skinned pages
   ------------------------------------------------------------
   The gold CTA already exists twice — .dabner-capture .lc-btn-primary
   and .dabner-report .dr-btn-primary — but both are scoped to pages
   that paint their own surface. Loads/Index is plain Bootstrap, so its
   primary action had nothing brand-coloured to reach for and sat in a
   default btn-primary blue. This is that same CTA, unscoped.
   ============================================================ */
.dab-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: var(--radius-md);
  background: var(--gold-500); color: var(--navy-900);
  border: 1px solid var(--gold-500); box-shadow: var(--shadow-sm);
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 100ms ease, border-color 100ms ease, box-shadow 100ms ease;
}
.dab-cta:hover {
  background: var(--gold-400); border-color: var(--gold-400);
  color: var(--navy-900); text-decoration: none; box-shadow: var(--shadow-md);
}
.dab-cta:active { background: var(--gold-600); border-color: var(--gold-600); }
.dab-cta:focus-visible { outline: 3px solid var(--navy-800); outline-offset: 2px; }
.dab-cta svg { flex: none; }

.role-badge {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.audit-table td.field, .audit-table td.value {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875rem;
}

/* ============================================================
   Daily shipment report — full Dabner redesign.
   All rules are .dabner-report scoped so they don't bleed into
   the rest of the app. JetBrains Mono is pulled in only here.
   See designs/design_handoff_daily_shipment_report/README.md
   for the spec; class names use a dr- prefix throughout.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600&display=swap');

.dabner-report { background: var(--paper); }

.dabner-report .dr-main {
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 32px 80px;
  display: flex; flex-direction: column; gap: 16px;
}

/* ---- Buttons (dr- prefix; don't fight Bootstrap .btn) ---- */
.dabner-report .dr-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer; border: 1px solid transparent;
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
  text-decoration: none;
}
.dabner-report .dr-btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.dabner-report .dr-btn-primary {
  background: var(--gold-500); color: var(--navy-900); border-color: var(--gold-500);
}
.dabner-report .dr-btn-primary:hover { background: var(--gold-400); border-color: var(--gold-400); }
.dabner-report .dr-btn-primary:active { background: var(--gold-600); border-color: var(--gold-600); }
.dabner-report .dr-btn-ghost {
  background: transparent; color: var(--navy-900); border-color: var(--border-strong);
}
.dabner-report .dr-btn-ghost:hover { background: var(--bone); border-color: var(--navy-800); color: var(--navy-900); text-decoration: none; }
.dabner-report .dr-btn-ghost:active { background: var(--dust); }
.dabner-report .dr-btn-danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.dabner-report .dr-btn-danger:hover { background: rgba(178,58,47,0.06); }

/* ---- Page head ---- */
.dabner-report .dr-pagehead { margin-bottom: 4px; }
.dabner-report .dr-crumbs {
  display: flex; gap: 8px; align-items: center;
  font-size: 13px; color: var(--fg-3); margin-bottom: 8px;
}
.dabner-report .dr-crumbs a { color: var(--fg-2); text-decoration: none; }
.dabner-report .dr-crumbs a:hover { color: var(--gold-600); }
.dabner-report .dr-crumb-sep { color: var(--fg-3); }
.dabner-report .dr-crumb-current { color: var(--fg-1); font-weight: 500; }
.dabner-report .dr-pagehead-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.dabner-report .dr-pagetitle {
  font-family: var(--font-display);
  font-weight: 700; font-size: 36px;
  text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--navy-900); margin: 0; line-height: 1;
}
.dabner-report .dr-pagetitle-sub { margin: 8px 0 0; color: var(--fg-2); font-size: 14px; }
.dabner-report .dr-pagehead-actions { display: inline-flex; gap: 8px; }

/* ---- Status banner (TempData success / error) ---- */
.dabner-report .dr-status {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, #E8F2DE, #DCEACE);
  color: #2D4A1F;
  border: 1px solid #BCD5A3; border-left: 4px solid var(--success);
  padding: 12px 16px; border-radius: var(--radius-md);
  font-size: 13.5px;
}
.dabner-report .dr-status-error {
  background: linear-gradient(180deg, #F8DDDB, #F2C9C5);
  color: #5A1B16; border-color: #E3A8A1; border-left-color: var(--danger);
}
.dabner-report .dr-status-check { color: var(--success); display: inline-flex; }
.dabner-report .dr-status-error .dr-status-check { color: var(--danger); }
.dabner-report .dr-status-text { flex: 1; }
.dabner-report .dr-status-text b { font-weight: 600; }
.dabner-report .dr-status-x {
  background: transparent; border: none; color: #4A6A38; cursor: pointer;
  width: 24px; height: 24px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
}
.dabner-report .dr-status-x:hover { background: rgba(0,0,0,0.06); }

/* ---- Card chrome (shared) ---- */
.dabner-report .dr-card {
  background: #FFFFFF; border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.dabner-report .dr-card-head {
  padding: 16px 20px 12px; border-bottom: 1px solid var(--border);
}
.dabner-report .dr-card-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--navy-900); margin: 0;
}
.dabner-report .dr-card-sub {
  display: block; font-size: 12.5px; color: var(--fg-2); margin-top: 4px;
}

/* ---- Filter card ---- */
.dabner-report .dr-filter-grid {
  display: grid;
  grid-template-columns: 1.6fr 1.2fr 1fr 1fr auto;
  gap: 16px; padding: 16px 20px 18px; align-items: end;
}
@media (max-width: 900px) {
  .dabner-report .dr-filter-grid { grid-template-columns: 1fr 1fr; }
}
.dabner-report .dr-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dabner-report .dr-field > label {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-3);
}
.dabner-report .dr-field input[type="text"],
.dabner-report .dr-field input[type="date"],
.dabner-report .dr-field select {
  height: 36px; padding: 0 12px;
  background: #FFFFFF; border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 14px; color: var(--fg-1);
  outline: none;
}
.dabner-report .dr-field input:focus, .dabner-report .dr-field select:focus {
  border-color: var(--navy-700);
  box-shadow: 0 0 0 3px rgba(36,63,82,0.10);
}
.dabner-report .dr-select { position: relative; }
.dabner-report .dr-select select {
  appearance: none; -webkit-appearance: none;
  width: 100%; padding-right: 32px; cursor: pointer;
}
.dabner-report .dr-select::after {
  content: ""; position: absolute; top: 50%; right: 12px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--fg-3); border-bottom: 2px solid var(--fg-3);
  transform: translateY(-75%) rotate(45deg); pointer-events: none;
}
.dabner-report .dr-field-action .dr-btn { width: 100%; height: 36px; justify-content: center; }

/* ---- Capture row ---- */
.dabner-report .dr-capture {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 20px; flex-wrap: wrap;
}
.dabner-report .dr-capture-text { display: flex; flex-direction: column; gap: 2px; }
.dabner-report .dr-capture-label { font-family: var(--font-body); font-size: 14px; color: var(--fg-1); }
.dabner-report .dr-capture-label b { color: var(--navy-900); font-weight: 700; }
.dabner-report .dr-capture-hint { font-size: 12.5px; color: var(--fg-3); }
.dabner-report .dr-capture-buttons { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.dabner-report .dr-capture-buttons form { margin: 0; }

/* ---- Table card ---- */
.dabner-report .dr-tablecard { display: flex; flex-direction: column; }
.dabner-report .dr-tablecard-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--border);
  gap: 16px; flex-wrap: wrap;
}
.dabner-report .dr-tablewrap { overflow-x: auto; border-bottom: 1px solid var(--border); }
.dabner-report .dr-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }

.dabner-report .dr-th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bone);
  padding: 8px 12px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy-900); text-align: left;
  border-bottom: 2px solid var(--navy-800); white-space: nowrap;
}
.dabner-report .dr-th-right { text-align: right; }
.dabner-report .dr-th-actions {
  position: sticky; right: 0; z-index: 3;
  background: var(--bone); border-left: 1px solid var(--border);
  text-align: center;
}

.dabner-report .dr-row { transition: background 80ms ease; }
.dabner-report .dr-row:hover .dr-td { background: #FCFAF4; }
.dabner-report .dr-row:hover .dr-td-actions { background: #F4EFE2; }
.dabner-report .dr-row-offloaded .dr-td-id-num { color: var(--success); }

.dabner-report .dr-td {
  padding: 6px 12px; border-bottom: 1px solid var(--border);
  background: #FFFFFF; vertical-align: middle;
  font-size: 13.5px; color: var(--fg-1);
}
.dabner-report .dr-td-id { padding: 6px 12px; text-align: right; font-feature-settings: "tnum"; }
.dabner-report .dr-td-id-num {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 12.5px; color: var(--fg-3);
}
.dabner-report .dr-td-date {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 12.5px; color: var(--fg-2); white-space: nowrap;
}
.dabner-report .dr-td-client { font-weight: 600; color: var(--navy-900); white-space: nowrap; }

.dabner-report .dr-td-reg { display: flex; flex-direction: column; line-height: 1.15; }
.dabner-report .dr-td-reg-plate {
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; letter-spacing: 0.03em; color: var(--navy-900);
}
.dabner-report .dr-td-reg-order { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }

.dabner-report .dr-td-scheduler {
  display: inline-block; margin-left: 6px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--bone); color: var(--navy-900);
  border: 1px solid var(--border);
  font-family: var(--font-body); font-weight: 600;
  font-size: 10.5px; letter-spacing: 0.02em;
  vertical-align: middle;
}

.dabner-report .dr-td-weight { display: block; margin-top: 2px; font-size: 11.5px; }
.dabner-report .dr-td-weight .dr-cell-edit-inline {
  padding: 0; color: var(--fg-3); background: transparent; border: none;
}

.dabner-report .dr-td-route { line-height: 1.25; }
.dabner-report .dr-td-route-line { display: flex; align-items: center; gap: 6px; }
.dabner-report .dr-td-route-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dabner-report .dr-td-route-dot-from { background: var(--navy-800); }
.dabner-report .dr-td-route-dot-to   { background: var(--gold-500); }
.dabner-report .dr-td-route-from { font-size: 13px; color: var(--fg-2); }
.dabner-report .dr-td-route-to   { font-size: 13px; color: var(--navy-900); font-weight: 600; }

.dabner-report .dr-td-tpo {
  display: inline-block; padding: 2px 8px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 12px; font-weight: 600; color: var(--navy-900);
  background: var(--bone); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* ---- Inline edit cell ---- */
.dabner-report .dr-td-edit-cell { padding: 4px 8px; }
.dabner-report .dr-cell-edit {
  width: 100%; min-height: 28px; padding: 4px 8px;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-sm); text-align: left;
  font-family: inherit; font-size: 13.5px; color: var(--fg-1);
  cursor: text;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block;
}
.dabner-report .dr-cell-edit:hover { background: #FFF8E7; border-color: var(--gold-400); }
.dabner-report .dr-cell-placeholder { color: var(--dust); }
.dabner-report .dr-cell-edit-status { color: var(--success); font-weight: 600; }
.dabner-report .dr-cell-form { display: none; margin: 0; }
.dabner-report .dr-cell-form.is-active { display: block; }
.dabner-report .dr-cell-input {
  width: 100%; height: 28px; padding: 4px 8px;
  background: #FFFFFF; border: 1px solid var(--navy-700);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 13.5px; outline: none;
  box-shadow: 0 0 0 3px rgba(36,63,82,0.10);
}
.dabner-report .dr-cell-badge {
  display: inline-block; margin-left: 6px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-3);
}
.dabner-report .dr-cell-stale { color: var(--warn); }

/* Canonical lifecycle status pill — the same status the ops wall and client
   portal show, sat above the live place + ETA in the status cell. Colours map
   to the brand palette; Waiting (departed, signal lost) is the warn colour so
   it reads as the alarm it is. */
.dabner-report .dr-statuspill {
  display: block; width: max-content; margin-bottom: 4px;
  padding: 2px 8px; border-radius: 99px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap;
}
.dabner-report .dr-sp-booked     { background: rgba(122,136,147,0.16); color: var(--fg-2); }
.dabner-report .dr-sp-loading    { background: rgba(59,96,121,0.14);  color: var(--navy-600); }
.dabner-report .dr-sp-enroute    { background: rgba(74,139,63,0.16);  color: var(--success); }
/* Offloading is a solid danger fill, not a tint: a load stuck offloading
   delays its proof-of-delivery and therefore client invoicing, so it must
   stand out from the other (tinted) lifecycle pills. */
.dabner-report .dr-sp-offloading { background: var(--danger);         color: #fff; }
.dabner-report .dr-sp-offloaded  { background: rgba(122,136,147,0.12); color: var(--fg-3); }
.dabner-report .dr-sp-waiting    { background: rgba(212,129,31,0.16); color: var(--warn); }

/* "forced" marker on the pill when an operator has overridden the lifecycle
   status, plus the dropdown + resume control that drive it. */
.dabner-report .dr-statuspill-forced {
  margin-left: 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  opacity: 0.75;
}
.dabner-report .dr-statusedit { margin-bottom: 4px; }
.dabner-report .dr-statusedit form { display: inline; margin: 0; }
.dabner-report .dr-statusedit-select {
  font-size: 11px; padding: 1px 4px; max-width: 130px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #FFFFFF; color: var(--fg-2); cursor: pointer;
}
.dabner-report .dr-statusresume {
  margin-top: 3px; padding: 1px 6px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--fg-3); cursor: pointer;
}
.dabner-report .dr-statusresume:hover {
  color: var(--navy-700); background: #FFF8E7; border-color: var(--gold-400);
}

/* Per-cell ETA refresh icon — top-right of the three snapshot cells.
   Faded until row hover so cells stay visually quiet. Sits above the
   .dr-cell-edit button so the click lands on the refresh form. */
.dabner-report .dr-td-snapshot { position: relative; }
.dabner-report .dr-cell-refresh-form { display: inline; margin: 0; }
.dabner-report .dr-cell-refresh {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--fg-3); cursor: pointer;
  opacity: 0; transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.dabner-report .dr-row:hover .dr-cell-refresh { opacity: 0.55; }
.dabner-report .dr-cell-refresh:hover {
  opacity: 1; color: var(--navy-700);
  background: #FFF8E7; border-color: var(--gold-400);
}

/* ---- Actions column ---- */
.dabner-report .dr-td-actions {
  position: sticky; right: 0; z-index: 1;
  background: #FFFFFF; border-left: 1px solid var(--border);
  padding: 4px 12px; text-align: center;
}
.dabner-report .dr-rowactions { display: inline-flex; gap: 4px; }
.dabner-report .dr-rowactions form { margin: 0; }
.dabner-report .dr-iconbtn {
  width: 30px; height: 30px;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-sm); color: var(--fg-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 100ms ease;
  padding: 0;
}
.dabner-report .dr-iconbtn:hover { background: var(--bone); border-color: var(--border-strong); color: var(--navy-900); text-decoration: none; }

/* ---- Document controls ----
   A row can carry up to four document buttons — upload and view, for each of the
   proof of delivery and the proof of collection — and four lookalike page glyphs
   in a strip is unreadable. Two rules keep them apart, and the markup depends on
   both:

   The *glyph* carries the verb, never the document: an up arrow always means
   upload, an eye always means view. So the operator reads the action from the
   silhouette without hunting for a tooltip.

   The *tag* carries the document. Each proof owns one .dr-docgroup led by a
   .dr-doctag reading POD or POC, so which proof you are touching is spelled out
   rather than inferred from position — and a tag with only an upload after it
   reads as paperwork still outstanding. .dr-docs then fences the whole document
   block off from the map/edit/remove actions beside it.

   The tags are why the groups need no divider between them: the gap plus the
   leading word already separates them, and a rule as well would be noise. */
.dabner-report .dr-docs {
  display: inline-flex; align-items: center; gap: 10px;
  margin-right: 4px; padding-right: 8px;
  border-right: 1px solid var(--border);
}
.dabner-report .dr-docgroup { display: inline-flex; align-items: center; gap: 1px; }
.dabner-report .dr-doctag {
  font-family: var(--font-display); font-weight: 700; font-size: 10px;
  letter-spacing: 0.12em; color: var(--fg-3);
  margin-right: 3px; user-select: none;
}
/* Viewing is the quieter half of each pair: an upload writes something, a view
   just opens a file. Muted until hovered, so the uploads lead the eye. */
.dabner-report .dr-iconbtn-view { opacity: 0.6; }
.dabner-report .dr-iconbtn-view:hover { opacity: 1; }

.dabner-report .dr-iconbtn-primary { color: var(--success); }
.dabner-report .dr-iconbtn-primary:hover { background: #E8F2DE; border-color: var(--success); color: var(--success); }
.dabner-report .dr-iconbtn-danger:hover { background: rgba(178,58,47,0.08); border-color: var(--danger); color: var(--danger); }

/* ---- Upload-in-progress overlay ----
   Proof-of-delivery uploads are a full-page form POST, so the browser sits
   on the stale page with no feedback while a (possibly large) file uploads.
   This overlay is shown the instant the form submits so the operator can see
   something is happening. */
.dab-upload-overlay {
  position: fixed; inset: 0; z-index: 1080;
  display: none; align-items: center; justify-content: center;
  background: rgba(27, 47, 64, 0.55);
}
.dab-upload-overlay.is-active { display: flex; }
.dab-upload-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 28px 36px; min-width: 240px;
  background: #FFFFFF; border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  text-align: center;
}
.dab-upload-spinner {
  width: 38px; height: 38px;
  border: 4px solid var(--border);
  border-top-color: var(--success);
  border-radius: 50%;
  animation: dabSpin 700ms linear infinite;
}
.dab-upload-title { font-weight: 600; color: var(--navy-900); font-size: 15px; }
.dab-upload-sub { color: var(--fg-2); font-size: 13px; }
@keyframes dabSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dab-upload-spinner { animation: none; }
}

/* ---- Empty state inside the table card ---- */
.dabner-report .dr-table-empty { padding: 32px 20px; color: var(--fg-2); text-align: center; font-size: 14px; }
.dabner-report .dr-empty {
  padding: 16px 20px; color: var(--fg-2); font-size: 14px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
  background: #FFFFFF;
}

/* ============================================================
   Load Capture (per-client sheet) redesign — lc- prefix.
   Full-bleed surface like the report; brand tokens throughout.
   Source: claude.ai/design "Load capture screen redesign".
   ============================================================ */
.dabner-capture { background: var(--paper); }
/* Local copy of the design-system `.eyebrow` helper: the app only ships
   `.dabner-eyebrow`, so scope the bare class here for the divider labels. */
.dabner-capture .eyebrow {
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--gold-600);
}
.dabner-capture .lc-main {
  max-width: 1480px; width: 100%;
  margin: 0 auto; padding: 44px 40px 80px;
}

/* ---- Hero ---- */
.dabner-capture .lc-hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 32px;
}
.dabner-capture .lc-eyebrow { margin: 0 0 6px; }
.dabner-capture .lc-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 42px; line-height: 1; text-transform: uppercase;
  letter-spacing: 0.02em; color: var(--navy-900); margin: 0 0 8px;
}
.dabner-capture .lc-sub { font-size: 16px; color: var(--fg-2); margin: 0; }

/* ---- Buttons (lc- prefix; don't fight Bootstrap .btn) ---- */
.dabner-capture .lc-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 600;
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer; border: 1px solid transparent; text-decoration: none;
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}
.dabner-capture .lc-btn:disabled { cursor: not-allowed; opacity: 0.7; }
.dabner-capture .lc-btn-sm { padding: 6px 14px; }
.dabner-capture .lc-btn-primary {
  background: var(--gold-500); color: var(--navy-900); border-color: var(--gold-500);
}
.dabner-capture .lc-btn-primary:hover:not(:disabled) { background: var(--gold-400); border-color: var(--gold-400); }
.dabner-capture .lc-btn-primary:disabled { background: var(--dust); border-color: var(--dust); }
.dabner-capture .lc-btn-lg { padding: 13px 24px; font-size: 15px; font-weight: 700; box-shadow: var(--shadow-sm); }
.dabner-capture .lc-btn-gold-outline {
  background: transparent; color: var(--gold-600); border: 1.5px solid var(--gold-600);
}
.dabner-capture .lc-btn-gold-outline:hover {
  background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); text-decoration: none;
}
.dabner-capture .lc-btn-danger {
  background: transparent; color: var(--danger); border-color: transparent;
}
.dabner-capture .lc-btn-danger:hover { background: rgba(178,58,47,0.09); }

/* ---- Status banner ---- */
.dabner-capture .lc-banner {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, #E8F2DE, #DCEACE); color: #2D4A1F;
  border: 1px solid #BCD5A3; border-left: 4px solid var(--success);
  padding: 12px 16px; border-radius: var(--radius-md);
  font-size: 14px; margin-bottom: 24px;
}
.dabner-capture .lc-banner-error {
  background: linear-gradient(180deg, #F8DDDB, #F2C9C5);
  color: #5A1B16; border-color: #E3A8A1; border-left-color: var(--danger);
}
.dabner-capture .lc-banner svg { flex: none; color: var(--success); }
.dabner-capture .lc-banner-error svg { color: var(--danger); }

/* ---- Card chrome ---- */
.dabner-capture .lc-card {
  background: #FFFFFF; border: 1px solid var(--border);
  border-radius: 6px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.dabner-capture .lc-card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border);
}
.dabner-capture .lc-card-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 20px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--navy-900); margin: 0;
}
.dabner-capture .lc-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 22px; padding: 0 8px;
  background: var(--bone); border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--fg-2);
}

/* ---- Lines table ---- */
.dabner-capture .lc-tablewrap { overflow-x: auto; }
.dabner-capture .lc-table { width: 100%; border-collapse: collapse; min-width: 980px; }
.dabner-capture .lc-th {
  font-family: var(--font-body); font-weight: 600;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-3); text-align: left; padding: 6px 16px 12px;
}
.dabner-capture .lc-th:first-child { padding-left: 24px; }
.dabner-capture .lc-th:last-child  { padding-right: 24px; }
.dabner-capture .lc-th-right { text-align: right; }
.dabner-capture .lc-row { transition: background 100ms ease; }
.dabner-capture .lc-row:nth-child(even) { background: var(--bone); }
.dabner-capture .lc-row:hover { background: var(--gold-100); }
.dabner-capture .lc-td {
  padding: 16px; border-top: 1px solid var(--border);
  font-size: 15px; color: var(--fg-1); vertical-align: middle;
}
.dabner-capture .lc-td:first-child { padding-left: 24px; }
.dabner-capture .lc-td:last-child  { padding-right: 24px; }
.dabner-capture .lc-td-num { text-align: right; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.dabner-capture .lc-td-date { font-size: 14px; color: var(--fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dabner-capture .lc-td-truck { font-size: 15px; font-weight: 700; color: var(--navy-900); white-space: nowrap; }
.dabner-capture .lc-td-nowrap { white-space: nowrap; }
.dabner-capture .lc-weight { font-size: 13px; color: var(--fg-3); margin-top: 2px; }

/* ---- Status pills ---- */
.dabner-capture .lc-pill {
  display: inline-flex; align-items: center; padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 600;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.dabner-capture .lc-pill-booked     { background: var(--navy-800); color: #fff; }
.dabner-capture .lc-pill-loading    { background: var(--navy-600); color: #fff; }
.dabner-capture .lc-pill-enroute    { background: var(--success);  color: #fff; }
.dabner-capture .lc-pill-offloading { background: var(--danger);   color: #fff; }
.dabner-capture .lc-pill-offloaded  { background: var(--dust);     color: var(--navy-900); }
.dabner-capture .lc-pill-waiting    { background: var(--warn);     color: var(--navy-900); }

/* ---- Row actions ---- */
.dabner-capture .lc-actions { display: flex; gap: 8px; justify-content: flex-end; }
.dabner-capture .lc-actions form { margin: 0; }

/* ---- Add-a-line trigger + form ---- */
.dabner-capture .lc-add-trigger { margin-top: 36px; }
.dabner-capture .lc-form { margin-top: 36px; padding: 28px 28px 24px; }
.dabner-capture .lc-form-head { margin-bottom: 24px; }
.dabner-capture .lc-form-head .lc-eyebrow { margin: 0 0 4px; }
.dabner-capture .lc-form-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 22px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--navy-900); margin: 0;
}
.dabner-capture .lc-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  /* Reset browser <fieldset> chrome — the grid is a fieldset so it can be
     disabled wholesale when a load is offloaded (read-only). */
  border: 0; margin: 0; padding: 0; min-width: 0;
}
.dabner-capture .lc-grid-divider {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px;
}
.dabner-capture .lc-grid-divider .lc-eyebrow { margin: 0; }
.dabner-capture .lc-grid-divider .lc-rule { flex: 1; height: 1px; background: var(--border); }
.dabner-capture .lc-field { display: flex; flex-direction: column; gap: 7px; }
.dabner-capture .lc-label {
  font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--navy-900);
}
.dabner-capture .lc-label-hint { color: var(--fg-3); font-weight: 400; }
.dabner-capture .lc-input,
.dabner-capture .lc-select select {
  width: 100%; height: 44px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: #FFFFFF; font-family: var(--font-body); font-size: 15px; color: var(--navy-900);
  outline: none;
}
.dabner-capture .lc-input:focus,
.dabner-capture .lc-select select:focus {
  border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(232,169,60,0.2);
}
/* No spinner arrows on the amount fields (rates, quantities, weight, GIT): a
   step of R0.01 or 0.001 t is never what anyone wants to click. Typing and
   validation are unchanged. */
.dabner-capture .lc-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.dabner-capture .lc-input[type="number"]::-webkit-outer-spin-button,
.dabner-capture .lc-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dabner-capture .lc-select { position: relative; }
.dabner-capture .lc-select select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
}
.dabner-capture .lc-select select:disabled { background: var(--bone); color: var(--fg-3); cursor: not-allowed; }
.dabner-capture .lc-select::after {
  content: ""; position: absolute; top: 50%; right: 14px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--fg-3); border-bottom: 2px solid var(--fg-3);
  transform: translateY(-75%) rotate(45deg); pointer-events: none;
}
.dabner-capture .lc-form-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border);
}

.dabner-capture .lc-empty { padding: 40px 24px; text-align: center; color: var(--fg-2); font-size: 15px; }

/* ---- Breadcrumb / back link (hero sub-line) ---- */
.dabner-capture .lc-crumbs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 15px; color: var(--fg-2); margin: 0;
}
.dabner-capture .lc-crumbs a { color: var(--gold-600); font-weight: 600; }
.dabner-capture .lc-crumbs a:hover { color: var(--gold-500); }
.dabner-capture .lc-crumb-sep { color: var(--fg-3); }

/* ---- Full-width field + textarea + date-with-button group ---- */
.dabner-capture .lc-field-full { grid-column: 1 / -1; }
.dabner-capture .lc-textarea {
  width: 100%; min-height: 88px; padding: 11px 12px; resize: vertical;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: #FFFFFF; font-family: var(--font-body); font-size: 15px;
  line-height: 1.5; color: var(--navy-900); outline: none;
}
.dabner-capture .lc-textarea:focus { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(232,169,60,0.2); }
.dabner-capture .lc-inputgroup { display: flex; gap: 8px; }
.dabner-capture .lc-inputgroup .lc-input { flex: 1; min-width: 0; }
.dabner-capture .lc-inputgroup .lc-btn { height: 44px; white-space: nowrap; }

/* ---- Note box (offloaded status / inline form notice) ---- */
.dabner-capture .lc-note {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 22px; padding: 14px 16px;
  background: var(--bone); border: 1px solid var(--border); border-left: 4px solid var(--dust);
  border-radius: var(--radius-md); font-size: 14px; color: var(--fg-1);
}
.dabner-capture .lc-note-muted { color: var(--fg-3); font-size: 13px; }

/* ---- Multi-drop confirmation ----
   Shown in place of (capture) or above (edit) the form when the chosen truck
   already carries open loads. Per the "Alert message redesign" handoff: a
   gold-capped card that reads as a decision to make, not an error that happened
   — the multi-drop may well be deliberate, so nothing here is painted danger
   except the one row that looks like a missing proof-of-delivery. */
.dabner-capture .lc-confirm {
  margin-top: 36px; border-top: 4px solid var(--gold-500);
  box-shadow: 0 6px 18px rgba(27, 47, 64, 0.10);
}

.dabner-capture .lc-confirm-head { display: flex; gap: 18px; padding: 28px 32px 0; }
.dabner-capture .lc-confirm-icon {
  flex: none; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold-100); color: var(--gold-600); border-radius: var(--radius-md);
}
.dabner-capture .lc-confirm-eyebrow {
  margin: 0 0 6px; font-weight: 600; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-600);
}
.dabner-capture .lc-confirm-title {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: 30px; line-height: 1.1; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--navy-900);
}

/* Indented to clear the warning tile, so the headline and the detail share an edge. */
.dabner-capture .lc-confirm-body { padding: 22px 32px 0 94px; }

.dabner-capture .lc-confirm-list { list-style: none; margin: 0; padding: 0; }
.dabner-capture .lc-confirm-item + .lc-confirm-item { margin-top: 10px; }
.dabner-capture .lc-confirm-row {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 16px 20px; background: var(--paper);
  border: 1px solid var(--border); border-left: 4px solid var(--navy-800);
  border-radius: var(--radius-md);
}
.dabner-capture .lc-confirm-client {
  display: flex; align-items: center; gap: 10px; min-width: 96px;
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy-900);
}
.dabner-capture .lc-confirm-client svg { color: var(--fg-2); }
.dabner-capture .lc-confirm-leg {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; color: var(--navy-900);
}
.dabner-capture .lc-confirm-leg svg { flex: none; color: var(--fg-3); }
.dabner-capture .lc-confirm-booked { margin-left: auto; text-align: right; }
.dabner-capture .lc-confirm-booked-label {
  font-weight: 600; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-3);
}
.dabner-capture .lc-confirm-booked-date {
  font-size: 15px; color: var(--fg-2); font-variant-numeric: tabular-nums;
}

/* The row that is probably not a second drop at all. */
.dabner-capture .lc-confirm-item-pod .lc-confirm-row {
  border-left-color: var(--danger); border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.dabner-capture .lc-confirm-hint {
  margin: 0; padding: 12px 20px; font-size: 15px; line-height: 1.5; color: var(--fg-2);
  background: #FBEEEC; border: 1px solid var(--border); border-top: none;
  border-left: 4px solid var(--danger);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.dabner-capture .lc-confirm-hint a { color: var(--gold-600); font-weight: 600; white-space: nowrap; }

.dabner-capture .lc-confirm-ask {
  margin: 20px 0 0; max-width: 780px;
  font-size: 17px; line-height: 1.55; color: var(--fg-2); text-wrap: pretty;
}
.dabner-capture .lc-confirm-ask strong { font-weight: 600; color: var(--navy-900); }

.dabner-capture .lc-confirm-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  margin-top: 28px; padding: 20px 32px;
  background: var(--paper); border-top: 1px solid var(--border);
}
.dabner-capture .lc-confirm-foot .lc-btn { padding: 12px 24px; font-size: 16px; }
.dabner-capture .lc-confirm-foot .lc-btn-primary { padding: 12px 28px; font-weight: 700; }
.dabner-capture .lc-btn-quiet {
  background: transparent; color: var(--fg-2); border: 1.5px solid var(--border-strong);
}
.dabner-capture .lc-btn-quiet:hover {
  border-color: var(--navy-800); color: var(--navy-900); text-decoration: none;
}

@media (max-width: 720px) {
  .dabner-capture .lc-confirm-head { padding: 22px 20px 0; }
  .dabner-capture .lc-confirm-title { font-size: 24px; }
  .dabner-capture .lc-confirm-body { padding: 18px 20px 0; }
  .dabner-capture .lc-confirm-booked { margin-left: 0; text-align: left; }
  .dabner-capture .lc-confirm-foot { padding: 16px 20px; }
}

/* ---- History timeline ---- */
.dabner-capture .lc-timeline { list-style: none; margin: 0; padding: 0; }
.dabner-capture .lc-tl-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 14px 24px; border-top: 1px solid var(--border);
}
.dabner-capture .lc-tl-item:first-child { border-top: none; }
.dabner-capture .lc-tl-body { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 15px; color: var(--fg-1); }
.dabner-capture .lc-tl-meta { text-align: right; white-space: nowrap; font-size: 13px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.dabner-capture .lc-tag {
  display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.dabner-capture .lc-tag-status { background: var(--navy-600); color: #fff; }
.dabner-capture .lc-tag-location { background: var(--gold-500); color: var(--navy-900); }
.dabner-capture .lc-tag-edit { background: var(--bone); color: var(--fg-2); border: 1px solid var(--border); }
.dabner-capture .lc-tl-empty { padding: 24px; color: var(--fg-2); font-size: 15px; }
.dabner-capture .lc-tl-note { padding: 14px 24px 4px; color: var(--fg-3); font-size: 13px; }


/* ============================================================
   Read-only load view (/Loads/View).
   Shares the .dabner-capture surface with Sheet and EditLoad —
   cards, pills, tables, timeline and buttons are all reused, so
   what follows is only what a read-only detail page needs and a
   form doesn't: the lifecycle strip, fact pairs, document rows
   and the position card. Brand tokens only.
   ============================================================ */
.dabner-capture .lc-hero-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

/* ---- Lifecycle strip ----
   A projection of the resolved LoadState, never of stored flags.
   Waiting has no node here: it is an overlay on En route, not a
   stage, so it is called out in .lc-life-note underneath instead. */
.dabner-capture .lc-life {
  display: flex; align-items: center; overflow-x: auto;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 18px 24px; margin-bottom: 20px;
}
.dabner-capture .lc-life-stage {
  display: flex; align-items: center; gap: 11px; flex: 1; min-width: 132px;
}
.dabner-capture .lc-life-stage:last-child .lc-life-bar { display: none; }
.dabner-capture .lc-life-node {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 12px;
  background: var(--bone); color: var(--fg-3); border: 1px solid var(--border);
}
.dabner-capture .lc-life-stage.is-done .lc-life-node {
  background: var(--navy-800); color: #fff; border-color: var(--navy-800);
}
.dabner-capture .lc-life-stage.is-current .lc-life-node {
  background: var(--gold-500); color: var(--navy-900); border-color: var(--gold-500);
}
.dabner-capture .lc-life-lbl {
  font-family: var(--font-body); font-weight: 600;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-3); white-space: nowrap;
}
.dabner-capture .lc-life-stage.is-done .lc-life-lbl,
.dabner-capture .lc-life-stage.is-current .lc-life-lbl { color: var(--navy-900); }
.dabner-capture .lc-life-bar { flex: 1; height: 2px; background: var(--border); margin: 0 4px; }
.dabner-capture .lc-life-stage.is-done .lc-life-bar { background: var(--navy-800); }
.dabner-capture .lc-life-note {
  margin: -8px 0 20px; padding: 0 4px;
  font-size: 13px; color: var(--warn);
}

/* ---- Two-column body ---- */
.dabner-capture .lc-cols {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start;
}
.dabner-capture .lc-cols > div { min-width: 0; }

.dabner-capture .lc-card-body { padding: 20px 24px; }

/* ---- Fact pairs (read-only counterpart to .lc-field) ---- */
.dabner-capture .lc-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px;
}
.dabner-capture .lc-fact { min-width: 0; }
.dabner-capture .lc-fact-wide { grid-column: 1 / -1; }
.dabner-capture .lc-fact-k {
  font-family: var(--font-body); font-weight: 600;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 4px;
}
.dabner-capture .lc-fact-v { font-size: 15px; color: var(--fg-1); overflow-wrap: anywhere; }
.dabner-capture .lc-fact-v.is-strong { font-weight: 700; color: var(--navy-900); }
.dabner-capture .lc-fact-none { color: var(--fg-3); }
.dabner-capture .lc-fact-sep { color: var(--fg-3); margin: 0 6px; }

/* ---- Route legs ---- */
.dabner-capture .lc-route { display: flex; flex-direction: column; gap: 7px; }
.dabner-capture .lc-route-leg { display: flex; align-items: center; gap: 9px; font-size: 15px; }
.dabner-capture .lc-route-cap {
  font-family: var(--font-body); font-weight: 600;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-3); width: 42px; flex: 0 0 auto;
}
.dabner-capture .lc-route-pin { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.dabner-capture .lc-route-pin.is-load { background: var(--navy-600); }
.dabner-capture .lc-route-pin.is-drop { background: var(--gold-500); }

/* ---- Timeline additions ---- */
.dabner-capture .lc-tag-doc { background: var(--gold-100); color: var(--navy-900); }
.dabner-capture .lc-delta {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bone); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 2px 9px; font-size: 13px;
}
.dabner-capture .lc-delta-old { color: var(--fg-3); text-decoration: line-through; }
.dabner-capture .lc-delta-arw { color: var(--fg-3); }
.dabner-capture .lc-delta-new { color: var(--navy-900); font-weight: 700; }
.dabner-capture .lc-docref {
  font-size: 13px; font-weight: 600; color: var(--navy-700);
  text-decoration: underline; text-underline-offset: 2px;
}

/* ---- Document rows ---- */
.dabner-capture .lc-docgroup + .lc-docgroup { margin-top: 18px; }
.dabner-capture .lc-docgroup-h {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-family: var(--font-body); font-weight: 600;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3);
}
.dabner-capture .lc-kdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.dabner-capture .lc-kdot-poc { background: var(--navy-600); }
.dabner-capture .lc-kdot-pod { background: var(--success); }
.dabner-capture .lc-kdot-clc { background: var(--gold-500); }
.dabner-capture .lc-doc {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  margin-bottom: 9px; text-decoration: none; color: inherit;
  transition: background 100ms ease, border-color 100ms ease;
}
.dabner-capture .lc-doc:hover { background: var(--gold-100); border-color: var(--border-strong); }
.dabner-capture .lc-doc-thumb {
  width: 38px; height: 44px; flex: 0 0 auto; border-radius: var(--radius-md);
  display: grid; place-items: center; background: var(--bone);
  border: 1px solid var(--border); color: var(--navy-900);
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
}
.dabner-capture .lc-doc-meta { min-width: 0; flex: 1; display: block; }
.dabner-capture .lc-doc-fn {
  display: block; font-size: 14px; font-weight: 700; color: var(--navy-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dabner-capture .lc-doc-mm { display: block; font-size: 12px; color: var(--fg-2); margin-top: 2px; }

/* ---- Position card ---- */
.dabner-capture .lc-pos { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.dabner-capture .lc-pos-place { font-size: 16px; font-weight: 700; color: var(--navy-900); }
.dabner-capture .lc-pos-coords {
  font-size: 14px; color: var(--fg-2); font-variant-numeric: tabular-nums;
}
.dabner-capture .lc-pos-meta { font-size: 13px; color: var(--fg-3); margin-bottom: 6px; }
.dabner-capture .lc-pos-manual { color: var(--warn); font-weight: 600; }

/* The change-history table sits in the narrow column, so it opts out of
   .lc-table's 980px min-width rather than forcing a horizontal scrollbar. */
.dabner-capture .lc-table-compact { min-width: 0; }
.dabner-capture .lc-table-compact .lc-td { padding: 10px 12px; font-size: 13px; }
.dabner-capture .lc-table-compact .lc-th { padding: 6px 12px 10px; }
.dabner-capture .lc-table-compact .lc-td:first-child,
.dabner-capture .lc-table-compact .lc-th:first-child { padding-left: 24px; }
.dabner-capture .lc-table-compact .lc-td:last-child,
.dabner-capture .lc-table-compact .lc-th:last-child { padding-right: 24px; }
.dabner-capture .lc-td-field { font-weight: 700; color: var(--navy-900); }
.dabner-capture .lc-td-by { color: var(--fg-2); white-space: nowrap; }

/* ---- Find a load (/Loads/Find) ---- */
.dabner-capture .lc-find-form { margin: 0; }
.dabner-capture .lc-find-row { display: flex; gap: 10px; align-items: stretch; margin: 6px 0 8px; }
.dabner-capture .lc-find-row .lc-input { flex: 1; min-width: 0; }
.dabner-capture .lc-find-row .lc-btn { flex: 0 0 auto; }

/* Archived / cancelled sit beside the pill rather than in it: neither is a
   lifecycle stage, so neither may ever look like one. */
.dabner-capture .lc-flag {
  display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 8px;
  border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
  background: var(--bone); color: var(--fg-2);
  font-family: var(--font-body); font-weight: 600;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.dabner-capture .lc-flag-cancelled { border-color: var(--danger); color: var(--danger); background: transparent; }

@media (max-width: 1040px) {
  .dabner-capture .lc-cols { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .dabner-capture .lc-facts { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .dabner-capture .lc-main { padding: 28px 20px 64px; }
  .dabner-capture .lc-title { font-size: 32px; }
  .dabner-capture .lc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .dabner-capture .lc-grid { grid-template-columns: 1fr; }
}

/* Fuel capture/edit: red tint on an implausible invoice date, matching the
   photo/slip odometer-mismatch styling. Toggled by ~/js/fuel-invoice-date.js
   and server-rendered on first paint. */
.invoice-date.invoice-date-flag { background-color: #f8d7da; border-color: #f1aeb5; }

/* ============================================================
   Fuel extracts — coverage calendar (/Financial/FuelExtracts).
   One cell per day of a month, coloured by whether an uploaded
   register's date span covers it. Brand tokens only; the grid
   is deliberately not a Bootstrap table because the thing being
   read here is a shape, not rows.
   ============================================================ */
/* Coverage is ordinal — none < some < all — so the state fills are one hue in
   lightness steps rather than three unrelated colours. Deliberately lighter than
   --gold-500: a saturated fill on the commonest state made a wall of gold, and it
   left no contrast headroom for the per-account markers sitting inside the cell.

   Clear leaves that ramp on purpose. "Covered and nothing outstanding" is not more
   of the same quantity, it is the one state whose answer is "done", so it is the
   only cell that gets a second hue. */
.fx-coverage {
  --fx-covered: #F6D99B;
  --fx-partial: #FCF1D9;
  --fx-clear: #DFEDD8;
  background: #FFFFFF; border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* ---- Navy header: title, summary, month stepper ---- */
.fx-coverage-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); padding: 14px 20px;
  background: var(--navy-800); color: var(--fg-on-navy);
  box-shadow: var(--shadow-inset-navy);
  flex-wrap: wrap;
}
.fx-coverage-title { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.fx-coverage-heading {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 20px;
}
.fx-coverage-summary { font-size: 13px; color: var(--fg-on-navy-2); }
.fx-coverage-nav { display: flex; align-items: center; gap: var(--space-2); }
.fx-coverage-month {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 18px;
  min-width: 170px; text-align: center;
}
.fx-coverage-step {
  width: 32px; height: 32px; display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--rule-on-navy); border-radius: var(--radius-md);
  color: var(--fg-on-navy); text-decoration: none; font-size: 18px; line-height: 1;
}
.fx-coverage-step:hover { background: var(--navy-700); color: var(--fg-on-navy); }

/* ---- Account chips + legend ---- */
.fx-coverage-filters {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
  padding: 12px 20px; background: var(--bone);
  border-bottom: 1px solid var(--border);
}
.fx-chips { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.fx-chips-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-3); margin-right: var(--space-1);
}
/* The chip row is the calendar's legend, so each chip wears its account's colour
   rather than a shared "selected" navy — that is the only place the reader learns
   which hue means which account. Selected-ness is carried by fill and opacity
   instead, so the identity channel stays free. */
.fx-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px 12px; border-radius: var(--radius-md);
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  background: #FFFFFF; border: 1.5px solid currentColor;
}
.fx-chip:not(.fx-chip-on) { border-style: dashed; opacity: 0.6; }
.fx-chip:hover { box-shadow: 0 0 0 2px var(--bone); opacity: 1; }
.fx-chip-dot {
  width: 10px; height: 10px; border-radius: 2px;
  background: currentColor; flex: none;
}
.fx-chip:not(.fx-chip-on) .fx-chip-dot { background: transparent; border: 1.5px solid currentColor; }
/* Labels in ink, never in the series colour. */
.fx-chip-name { color: var(--fg-1); }
.fx-chip-code {
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.06em; color: var(--fg-2);
}
.fx-chip-format { font-weight: 400; font-size: 12px; color: var(--fg-3); }

.fx-legend { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.fx-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-2); }
.fx-swatch { width: 14px; height: 14px; border-radius: 2px; display: inline-block; }
.fx-swatch-clear   { background: var(--fx-clear);   border: 1px solid var(--success); }
.fx-swatch-covered { background: var(--fx-covered); border: 1px solid var(--gold-600); }
.fx-swatch-partial { background: var(--fx-partial); border: 1px solid var(--gold-500); }
.fx-swatch-gap     { background: #FFFFFF;      border: 1px solid var(--danger); }
.fx-swatch-nottracked { background: var(--bone); border: 1px dashed var(--border-strong); }
.fx-swatch-future  { background: var(--bone);  border: 1px solid var(--border); opacity: 0.55; }

/* ---- The grid ---- */
.fx-grid-wrap { padding: 16px 20px 20px; }
.fx-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.fx-grid-weekdays { margin-bottom: 6px; }
.fx-weekday {
  font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 13px; color: var(--fg-3); padding-left: 2px;
}
.fx-pad { min-height: 0; }

.fx-day {
  min-height: 92px; display: flex; flex-direction: column;
  justify-content: space-between; gap: 6px;
  padding: 8px; border-radius: var(--radius-md);
  text-decoration: none; color: var(--fg-1);
  border: 1px solid var(--border); background: #FFFFFF;
}
a.fx-day:hover { outline: 2px solid var(--navy-800); outline-offset: -1px; color: var(--fg-1); }
.fx-day-covered    { background: var(--fx-covered); border-color: var(--gold-600); }
.fx-day-partial    { background: var(--fx-partial); border-color: var(--gold-500); }
/* After .fx-day-covered, which every clear day also carries — a clear day is a
   covered one whose slips are all in, so it must win the fill. */
.fx-day-clear      { background: var(--fx-clear);   border-color: var(--success); }
.fx-day-gap        { background: #FFFFFF;          border-color: var(--danger); }
/* Both mean "nothing is owed here", but they are different facts and must not
   look alike: an account that has never uploaded shows a whole neutral month,
   and that must not read as "this month hasn't happened yet". Dashed = outside
   the range we were being sent anything for; dimmed solid = not yet elapsed. */
.fx-day-nottracked { background: var(--bone); border-color: var(--border-strong); border-style: dashed; }
.fx-day-future     { background: var(--bone); border-color: var(--border); opacity: 0.55; }

.fx-day-top { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.fx-day-num { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.fx-day-tag {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-2); text-align: right;
}
.fx-day-gap .fx-day-tag { color: var(--danger); }
.fx-day-covered .fx-day-tag,
.fx-day-clear .fx-day-tag { color: var(--navy-900); }
/* The count is the alarm on a short day; the cell keeps its covered fill rather
   than taking a second red, which would compete with .fx-day-gap and overstate a
   day whose register did arrive. */
.fx-day-short .fx-day-tag { color: var(--danger); }

/* Kept visible below the breakpoint where .fx-day-tag is hidden, so a clear day is
   never signalled by its background alone. */
.fx-day-check { color: var(--success); font-weight: 700; font-size: 14px; line-height: 1; }

.fx-day-bars { display: flex; flex-direction: column; gap: 3px; }
.fx-bar-row { display: flex; align-items: center; gap: 5px; }

/* The bar carries the account's identity colour; whether that account covered
   this day is carried by fill-vs-hollow and by the count beside it, never by the
   hue. Two channels, so neither colour alone nor shape alone has to do the work. */
.fx-bar {
  height: 6px; flex: 1; border-radius: 1px;
  background: transparent; border: 1px solid currentColor; opacity: 0.45;
}
.fx-bar-on { background: currentColor; opacity: 1; }

/* Text wears ink tokens, never the series colour — the mark beside it carries
   identity, and a coloured numeral on a tinted cell is the first thing to go
   unreadable. */
.fx-bar-code {
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.06em;
  color: var(--fg-2); min-width: 20px;
}
.fx-bar-count {
  font-size: 10.5px; font-variant-numeric: tabular-nums;
  color: var(--fg-2); min-width: 18px; text-align: right;
}
.fx-day-covered .fx-bar-code,
.fx-day-covered .fx-bar-count,
.fx-day-clear .fx-bar-code,
.fx-day-clear .fx-bar-count { color: var(--navy-900); }

/* ---- Account identity colours ----
   Three fixed slots, assigned by the account's place in the full alphabetical
   list and never cycled or re-derived from the current filter, so deselecting an
   account cannot repaint the others. Validated (OKLab CVD ΔE, chroma, lightness
   band, ≥3:1 contrast) against every surface a marker can land on: the covered
   tint, the partial tint, the clear tint, white and bone. The clear tint is held
   to the same lightness band as the covered one precisely so this stays true and
   the markers never had to be re-picked for it. A fourth account gets neutral ink and
   is told apart by the code printed on every row. */
.fx-acct-0 { color: #2A78D6; }
.fx-acct-1 { color: #A8367F; }
.fx-acct-2 { color: #8A5008; }
.fx-acct-x { color: var(--fg-3); }

/* ---- Footer: the gap sentence + jump ---- */
.fx-coverage-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  padding: 12px 20px; background: var(--bone);
  border-top: 1px solid var(--border);
  font-size: 13.5px; color: var(--fg-2);
}
.fx-next-gap {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 13px;
  padding: 8px 16px; border-radius: var(--radius-md);
  border: 1.5px solid var(--navy-800); color: var(--navy-800); text-decoration: none;
}
.fx-next-gap:hover { background: var(--navy-800); color: #FFFFFF; }

/* Narrow screens: the grid must stay seven columns to still read as a month,
   so the per-account bars go rather than the shape. The colour is the signal;
   the counts are detail, and they are one tap away on the day itself. */
@media (max-width: 820px) {
  .fx-day { min-height: 54px; }
  .fx-day-bars { display: none; }
  .fx-day-tag { display: none; }
  .fx-coverage-month { min-width: 130px; font-size: 16px; }
}

/* ============================================================
   Truck registration combobox (js/asset-combobox.js)

   One control for every truck picker. The original <select> is
   still in the DOM and still posts — it is parked off-screen
   rather than hidden, because an unfocusable control breaks
   native validation. The three select skins this drops into
   (Bootstrap .form-select, .dr-select, .lc-select) differ only
   in height and padding, so the shared look lives here and each
   context overrides those two below.
   ============================================================ */
.dab-combo { position: relative; display: block; }

.dab-combo-native {
  position: absolute; left: -9999px; top: 0;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

.dab-combo-status {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.dab-combo-input {
  width: 100%; height: 38px; padding: 0 34px 0 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: #FFFFFF; font-family: var(--font-body); font-size: 15px;
  color: var(--fg-1); outline: none;
}
.dab-combo-input::placeholder { color: var(--fg-3); }
.dab-combo-input:focus {
  border-color: var(--navy-700);
  box-shadow: 0 0 0 3px rgba(36,63,82,0.10);
}
.dab-combo-input:disabled { background: var(--bone); color: var(--fg-3); cursor: not-allowed; }

/* Caret, matching the two existing select skins. */
.dab-combo::after {
  content: ""; position: absolute; top: 19px; right: 13px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--fg-3); border-bottom: 2px solid var(--fg-3);
  transform: translateY(-75%) rotate(45deg); pointer-events: none;
}

.dab-combo-list {
  display: block; position: absolute; z-index: 1200; top: calc(100% + 2px); left: 0; right: 0;
  margin: 0; padding: 4px 0; list-style: none;
  max-height: 264px; overflow-y: auto;
  background: #FFFFFF; border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
/* Explicit, because the display:block above outranks the UA sheet's [hidden]
   rule. Bootstrap's Reboot marks it !important and would have covered for us on
   most pages — but the fleet map sets Layout = null and never loads Bootstrap. */
.dab-combo-list[hidden] { display: none; }

.dab-combo-option {
  display: block; padding: 7px 12px; font-family: var(--font-body); font-size: 15px;
  color: var(--fg-1); cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.dab-combo-option[hidden] { display: none; }
.dab-combo-option.is-selected { font-weight: 600; }
/* Background, not colour alone — the active row has to read without hue. */
.dab-combo-option.is-active,
.dab-combo-option:hover { background: var(--navy-800); color: #FFFFFF; }
.dab-combo-empty {
  display: block; padding: 10px 12px; font-family: var(--font-body); font-size: 14px;
  color: var(--fg-2); font-style: italic;
}
.dab-combo-empty[hidden] { display: none; }

/* The host skins draw their own caret on the wrapper; ours replaces it. */
.dab-combo-host::after { display: none !important; }

/* Context overrides: match the surrounding fields' geometry. */
.dabner-report .dr-field .dab-combo-input { height: 36px; font-size: 14px; }
.dabner-report .dr-field .dab-combo::after { top: 18px; right: 12px; }
.dabner-capture .lc-select .dab-combo-input { height: 44px; padding-right: 38px; }
.dabner-capture .lc-select .dab-combo::after { top: 22px; right: 14px; }
.dabner-capture .lc-select .dab-combo-input:focus {
  border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(232,169,60,0.2);
}

/* ============================================================
   Add Line wizard (/Loads/AddLine)
   ------------------------------------------------------------
   Sits on top of .dabner-capture: the form furniture (lc-field,
   lc-input, lc-select, lc-btn, lc-card, lc-confirm) is shared with
   the per-client Sheet so the two capture surfaces look alike. Only
   the parts the wizard actually invents live here — the step rail,
   the client cards, the chosen-so-far chips and the review rows.
   ============================================================ */
.dabner-wizard .dab-wiz-layout {
  display: flex; align-items: flex-start; gap: 32px;
}

/* ---- Step rail ---- */
.dabner-wizard .dab-wiz-rail {
  flex: none; width: 272px;
  background: #FFFFFF; border: 1px solid var(--border);
  border-radius: 6px; box-shadow: var(--shadow-sm);
  padding: 8px 0; overflow: hidden; position: sticky; top: 24px;
}
.dabner-wizard .dab-wiz-rail-head {
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--gold-600);
  padding: 12px 20px 8px; margin: 0;
}
.dabner-wizard .dab-wiz-railitem {
  position: relative; display: flex; gap: 14px; align-items: flex-start;
  width: 100%; text-align: left; background: transparent; border: none;
  padding: 14px 18px; cursor: pointer;
}
.dabner-wizard .dab-wiz-railitem:hover { background: var(--bone); }
/* The state bar is an overlay rather than a real border so the row's own
   padding doesn't shift by 3px as the wizard advances. */
.dabner-wizard .dab-wiz-railitem::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.dabner-wizard .dab-wiz-railitem.is-current::before {
  background: var(--gold-100); border-left: 3px solid var(--gold-500);
}
.dabner-wizard .dab-wiz-railitem.is-past::before {
  border-left: 3px solid var(--border-strong);
}
.dabner-wizard .dab-wiz-disc {
  position: relative; flex: none;
  width: 26px; height: 26px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  background: var(--bone); border: 1px solid var(--border-strong); color: var(--fg-3);
}
.dabner-wizard .dab-wiz-railitem.is-current .dab-wiz-disc {
  background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900);
}
.dabner-wizard .dab-wiz-railitem.is-past .dab-wiz-disc {
  background: var(--navy-800); border-color: var(--navy-800); color: #FFFFFF;
}
.dabner-wizard .dab-wiz-railtext { position: relative; display: block; min-width: 0; }
.dabner-wizard .dab-wiz-raillabel {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 17px; line-height: 1.2; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--navy-900);
}
.dabner-wizard .dab-wiz-railvalue {
  display: block; font-size: 13px; color: var(--fg-3);
  margin-top: 3px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Panel ---- */
.dabner-wizard .dab-wiz-panel { flex: 1; min-width: 0; }
.dabner-wizard .dab-wiz-head { padding: 28px 32px 0; }
.dabner-wizard .dab-wiz-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h4); line-height: 1.1; letter-spacing: var(--tracking-display);
  text-transform: uppercase; color: var(--navy-900); margin: 6px 0 8px;
}
.dabner-wizard .dab-wiz-blurb {
  font-size: 15px; color: var(--fg-2); margin: 0; max-width: 640px;
}
.dabner-wizard .dab-wiz-body { padding: 24px 32px 28px; }

/* ---- Chosen-so-far chips ---- */
.dabner-wizard .dab-wiz-chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;
}
.dabner-wizard .dab-wiz-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bone); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 5px 11px;
  font-size: 14px; color: var(--navy-900);
}
.dabner-wizard .dab-wiz-chip-k {
  font-weight: 600; font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-3);
}

/* ---- Step 1: client picker ----
   A dense list rather than a card grid, because the back office may carry a
   hundred clients and the task is "find the code I already know". One row is
   ~40px against a card's ~90px, so roughly ten times as many candidates are on
   screen at once, and the search box above them owns the keyboard. */
.dabner-wizard .dab-wiz-pickhead {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.dabner-wizard .dab-wiz-search { flex: 1; min-width: 0; margin-bottom: 0; }
.dabner-wizard .dab-wiz-pickcount {
  flex: none; font-size: 13.5px; color: var(--fg-3);
  min-width: 118px; text-align: right;
}

.dabner-wizard .dab-wiz-recent {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px;
}
.dabner-wizard .dab-wiz-recent-label {
  font-weight: 600; font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-3);
}
.dabner-wizard .dab-wiz-recent-chip {
  background: var(--bone); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 6px 12px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy-900);
}
.dabner-wizard .dab-wiz-recent-chip:hover { border-color: var(--gold-500); }
.dabner-wizard .dab-wiz-recent-chip.is-selected {
  border-color: var(--gold-500); background: var(--gold-100);
  box-shadow: inset 0 0 0 1px var(--gold-500);
}

.dabner-wizard .dab-wiz-clientlist {
  max-height: 392px; overflow-y: auto; background: #FFFFFF;
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
.dabner-wizard .dab-wiz-alpha {
  position: sticky; top: 0; z-index: 1;
  background: var(--bone); border-bottom: 1px solid var(--border);
  padding: 5px 18px;
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3);
}
.dabner-wizard .dab-wiz-clientrow {
  position: relative; display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left; background: transparent;
  border: none; border-bottom: 1px solid var(--border);
  padding: 10px 18px; cursor: pointer; overflow: hidden;
}
.dabner-wizard .dab-wiz-clientrow:hover { background: var(--bone); }
/* Overlay rather than a real border, exactly as the step rail does above: a
   3px left border would shift the row's text sideways as the cursor passes. */
.dabner-wizard .dab-wiz-clientrow::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.dabner-wizard .dab-wiz-clientrow.is-cursor::before {
  background: var(--bone); border-left: 3px solid var(--navy-600);
}
/* Chosen outranks cursor — the pick is the fact, the cursor is just where the
   keyboard happens to be resting. */
.dabner-wizard .dab-wiz-clientrow.is-selected::before {
  background: var(--gold-100); border-left: 3px solid var(--gold-500);
}
.dabner-wizard .dab-wiz-clientrow-code {
  position: relative; flex: none; width: 92px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-600);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dabner-wizard .dab-wiz-clientrow-name {
  position: relative; flex: 1 1 auto; min-width: 0;
  font-family: var(--font-body); font-weight: 600; font-size: 15.5px;
  color: var(--navy-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dabner-wizard .dab-wiz-clientrow-lines {
  position: relative; flex: none;
  font-size: 13px; color: var(--fg-3); white-space: nowrap; text-align: right;
}
.dabner-wizard .dab-wiz-empty {
  margin: 0; padding: 26px 18px; text-align: center;
  font-size: 14.5px; color: var(--fg-3);
}

/* ---- Steps 2 and 3: field grid ---- */
.dabner-wizard .dab-wiz-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 26px;
}
.dabner-wizard .dab-wiz-field-full { grid-column: 1 / -1; }

/* ---- Step 3: booking + transporter order (design "B") ----
   Booking first, then the order grouped the way it reads: when, money, at the
   gate. The Rate group carries a running total so "per ton = the step-2
   weight" is visible where the rate is typed. */
.dabner-wizard .dab-wiz-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 20px; }
.dabner-wizard .dab-wiz-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 18px; }
.dabner-wizard .dab-wiz-sub { display: flex; flex-direction: column; gap: 14px; }
.dabner-wizard .dab-wiz-subhead {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 16px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2);
}
.dabner-wizard .dab-wiz-orderhead { margin: 28px 0 18px; }
.dabner-wizard .dab-wiz-ownerchip {
  flex: none; font-size: 13px; font-weight: 600; color: var(--navy-900);
  background: var(--gold-100); border-radius: 999px; padding: 3px 10px;
}
.dabner-wizard .dab-wiz-groups {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
}
.dabner-wizard .dab-wiz-group {
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px;
  display: flex; flex-direction: column; gap: 14px; background: #FFFFFF;
}
.dabner-wizard .dab-wiz-group .dab-wiz-grid { gap: 14px 16px; }
.dabner-wizard .dab-wiz-groupnote { margin: 0; font-size: 13px; }
.dabner-wizard .dab-wiz-seg { margin: 0; padding: 0; border: 0; min-width: 0; }
.dabner-wizard .dab-wiz-seg legend { padding: 0; margin-bottom: 0; }
.dabner-wizard .dab-wiz-segopts {
  display: flex; height: 44px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm, 6px); overflow: hidden;
}
.dabner-wizard .dab-wiz-segopts label { flex: 1; display: flex; margin: 0; cursor: pointer; }
.dabner-wizard .dab-wiz-segopts label + label { border-left: 1px solid var(--border-strong); }
.dabner-wizard .dab-wiz-segopts input { position: absolute; opacity: 0; pointer-events: none; }
.dabner-wizard .dab-wiz-segopts span {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--fg-2); background: #FFFFFF;
}
.dabner-wizard .dab-wiz-segopts input:checked + span { background: var(--navy-900); color: #FFFFFF; font-weight: 600; }
.dabner-wizard .dab-wiz-segopts input:focus-visible + span { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.dabner-wizard .dab-wiz-value {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  background: var(--bone); border-radius: var(--radius-sm, 6px); padding: 12px 14px;
}
.dabner-wizard .dab-wiz-value-calc { font-size: 14px; color: var(--fg-2); }
.dabner-wizard .dab-wiz-value-total {
  font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--navy-900);
  white-space: nowrap;
}

/* Client rate sits under the booking fields; the margin line under the order
   value turns danger-red when the client value doesn't beat the transporter's. */
.dabner-wizard .dab-wiz-subhead-gap { margin-top: 20px; }
.dabner-wizard .dab-wiz-margin { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: #3E7A35; }
.dabner-wizard .dab-wiz-margin:empty,
.dabner-wizard .dab-wiz-margin[hidden] { display: none; }
.dabner-wizard .dab-wiz-margin.is-bad { color: var(--danger); }

/* ---- Step 4: review (design "A · cards by step") ---- */
.dabner-wizard .dab-wiz-review { display: flex; flex-direction: column; gap: 16px; }
.dabner-wizard .dab-wiz-rcard {
  border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px 18px;
  display: flex; flex-direction: column; gap: 12px; background: #FFFFFF;
}
.dabner-wizard .dab-wiz-rcard[hidden] { display: none; }
.dabner-wizard .dab-wiz-rcard-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dabner-wizard .dab-wiz-rcard-title {
  margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy-900);
}
.dabner-wizard .dab-wiz-rcard-title .dab-wiz-ownerchip { font-family: var(--font-body); letter-spacing: 0; text-transform: none; }
.dabner-wizard .dab-wiz-ownerchip:empty { display: none; }
.dabner-wizard .dab-wiz-change {
  min-height: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: #9A6A12; text-decoration: underline;
}
.dabner-wizard .dab-wiz-change:hover { color: var(--navy-900); }
.dabner-wizard .dab-wiz-rgrid { display: grid; gap: 12px 20px; }
.dabner-wizard .dab-wiz-rgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dabner-wizard .dab-wiz-rgrid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dabner-wizard .dab-wiz-rfact { display: flex; flex-direction: column; gap: 3px; font-size: 15px; min-width: 0; }
.dabner-wizard .dab-wiz-rlabel {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2);
}
.dabner-wizard .dab-wiz-rvalue { font-weight: 600; color: var(--navy-900); overflow-wrap: anywhere; }
.dabner-wizard .dab-wiz-rsub { font-size: 13px; color: var(--fg-2); }
.dabner-wizard .dab-wiz-rgroup {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2);
}
.dabner-wizard .dab-wiz-reviewrow {
  display: flex; gap: 24px; padding: 12px 18px;
  border-bottom: 1px solid var(--border); background: #FFFFFF;
}
.dabner-wizard .dab-wiz-reviewrow:last-child { border-bottom: none; }
.dabner-wizard .dab-wiz-reviewkey {
  flex: none; width: 170px; padding-top: 2px;
  font-weight: 600; font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-3);
}
.dabner-wizard .dab-wiz-reviewval { font-size: 16px; color: var(--navy-900); }
.dabner-wizard .dab-wiz-reviewnote { margin-top: 14px; }
/* The confirmation panel arrives with the shared .lc-confirm chrome, which
   already carries its own card border, so let it sit flush in the panel. */
.dabner-wizard .dab-wiz-confirm { margin: 0; }

/* ---- Footer ---- */
.dabner-wizard .dab-wiz-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 32px; border-top: 1px solid var(--border); background: var(--paper);
}
.dabner-wizard .dab-wiz-foot-right {
  display: flex; align-items: center; gap: 16px; margin-left: auto;
}
.dabner-wizard .dab-wiz-hint { font-size: 13.5px; color: var(--fg-3); }
.dabner-wizard .dab-wiz-foot .lc-btn:disabled {
  background: var(--dust); border-color: var(--dust); color: var(--fg-3); cursor: not-allowed;
}

/* ---- Narrow screens: the rail folds above the panel ---- */
@media (max-width: 900px) {
  .dabner-wizard .dab-wiz-layout { flex-direction: column; }
  .dabner-wizard .dab-wiz-rail { width: 100%; position: static; }
  .dabner-wizard .dab-wiz-grid,
  .dabner-wizard .dab-wiz-grid-4,
  .dabner-wizard .dab-wiz-grid-3,
  .dabner-wizard .dab-wiz-groups,
  .dabner-wizard .dab-wiz-rgrid-3,
  .dabner-wizard .dab-wiz-rgrid-4 { grid-template-columns: 1fr; }
  /* The name is what gets read; the open count is the first thing to go. */
  .dabner-wizard .dab-wiz-clientrow-lines { display: none; }
  .dabner-wizard .dab-wiz-clientrow-code { width: 78px; }
  .dabner-wizard .dab-wiz-pickhead { flex-wrap: wrap; }
  .dabner-wizard .dab-wiz-pickcount { min-width: 0; }
}

/* ==========================================================================
   Transporter confirmation (/Loads/Confirmation) — design "A · document first".
   A miniature of the printed order on the left (fields changed since the last
   issued version highlighted in place), status / issue / versions on the right.
   ========================================================================== */
.dabner-capture .lcc-layout { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; margin-top: 8px; }
.dabner-capture .lcc-stage {
  flex: 999 1 560px; min-width: 0; background: var(--bone); border-radius: 12px; padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.dabner-capture .lcc-stage-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.dabner-capture .lcc-stage-title {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2);
}
.dabner-capture .lcc-legend { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2); }
.dabner-capture .lcc-legend-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--gold-100); border: 1px solid var(--gold-600); }

.dabner-capture .lcc-paper {
  background: #FFFFFF; border-radius: 4px; box-shadow: 0 1px 3px rgba(27,47,64,0.14);
  padding: 26px 30px; display: flex; flex-direction: column; gap: 12px;
  font-size: 13.5px; line-height: 1.5; color: var(--navy-900);
}
.dabner-capture .lcc-paper b { font-weight: 700; }
.dabner-capture .lcc-box { border: 1px solid var(--navy-900); padding: 10px 12px; }
.dabner-capture .lcc-letterhead { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.dabner-capture .lcc-col { display: flex; flex-direction: column; }
.dabner-capture .lcc-right { text-align: right; }
.dabner-capture .lcc-logo { height: 52px; width: auto; }
.dabner-capture .lcc-title { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 8px; text-align: center; }
.dabner-capture .lcc-title strong { font-size: 15.5px; letter-spacing: 0.02em; }
.dabner-capture .lcc-badge { color: var(--danger); font-weight: 700; }
.dabner-capture .lcc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.dabner-capture .lcc-full { grid-column: 1 / -1; margin-top: 4px; }
.dabner-capture .lcc-stack { display: flex; flex-direction: column; gap: 4px; }
/* The numbered pallet-return options under their bullet, as on the paper form. */
.dabner-capture .lcc-indent { display: block; padding-left: 1.6em; }
.dabner-capture .lcc-changed { background: var(--gold-100); box-shadow: 0 0 0 2px var(--gold-100); border-radius: 2px; }
.dabner-capture .lcc-paper details summary { cursor: pointer; color: var(--fg-2); }
.dabner-capture .lcc-terms { margin: 8px 0 0; padding-left: 22px; font-size: 12.5px; color: var(--fg-2); }

.dabner-capture .lcc-rail { flex: 1 1 340px; max-width: 400px; display: flex; flex-direction: column; gap: 18px; }
.dabner-capture .lcc-card {
  background: #FFFFFF; border: 1px solid var(--border); border-radius: 12px; padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.dabner-capture .lcc-card-title {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 18px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.dabner-capture .lcc-status-head { display: flex; align-items: center; gap: 10px; }
.dabner-capture .lcc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fg-3); }
.dabner-capture .lcc-status-stale .lcc-dot { background: var(--warn); }
.dabner-capture .lcc-status-current .lcc-dot { background: var(--success); }
.dabner-capture .lcc-status-blocked .lcc-dot { background: var(--danger); }
.dabner-capture .lcc-status-new .lcc-dot { background: var(--gold-500); }
.dabner-capture .lcc-status-title {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.dabner-capture .lcc-status-text { margin: 0; font-size: 15px; line-height: 1.45; }
.dabner-capture .lcc-missing { margin: 0; font-size: 13.5px; color: var(--fg-2); background: var(--paper); border-radius: 6px; padding: 10px 12px; }
.dabner-capture .lcc-error { margin: 0; font-size: 14px; color: var(--danger); font-weight: 600; }
.dabner-capture .lcc-form { display: flex; flex-direction: column; gap: 12px; }
.dabner-capture .lcc-issue { width: 100%; min-height: 48px; justify-content: center; }
.dabner-capture .lcc-fine { margin: 0; font-size: 13px; color: var(--fg-2); }
.dabner-capture .lcc-version {
  display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border);
  text-decoration: none; color: var(--navy-900);
}
.dabner-capture .lcc-version:hover strong { text-decoration: underline; }
.dabner-capture .lcc-pdf {
  width: 40px; height: 48px; flex-shrink: 0; border: 1px solid var(--border-strong); border-radius: 4px;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.dabner-capture .lcc-version-meta { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--fg-2); }
.dabner-capture .lcc-version-meta strong { font-size: 15px; color: var(--navy-900); }
.dabner-capture .lcc-version.is-superseded strong { color: var(--fg-2); }
@media (max-width: 900px) {
  .dabner-capture .lcc-rail { max-width: none; }
  .dabner-capture .lcc-grid { grid-template-columns: 1fr; }
  .dabner-capture .lcc-letterhead { flex-wrap: wrap; }
}