/* ============================================================
   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) */
.dab-acct { position: relative; margin-left: auto; flex: none; }
.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.
   ============================================================ */
.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; }
.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); }

/* ---- 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;
}