/* ════════════════════════════════════════════════════════════════
   SHIP247 · OPTION C / TERMINAL·OXBLOOD — TOKEN LAYER
   Source: /uploads/SHIP247_Option_C_Terminal_Oxblood.html
   Locked: 2026-04-19 by K. Al Sakran
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Palette */
  --black:    #000000;
  --white:    #FFFFFF;
  --offwhite: #F4F4F2;
  --bone:     #E8E6E1;
  --steel:    #1A1A1A;
  --ash:      #2A2A2A;
  --iron:     #141414;
  --smoke:    #888888;
  --fog:      #555555;
  --hivis:    #8B1818;
  --hivis-dk: #6B1212;
  --hivis-gh: rgba(139, 24, 24, 0.08);

  /* Semantic */
  --bg:             var(--black);
  --surface:        var(--iron);
  --surface-alt:    var(--steel);
  --rule:           var(--ash);
  --rule-soft:      #1E1E1E;
  --text:           var(--white);
  --text-dim:       var(--smoke);
  --text-dimmer:    var(--fog);
  --accent:         var(--hivis);

  /* State */
  --ok:   #4FA85E;
  --warn: #C49A2E;
  --err:  var(--hivis);
  --info: var(--smoke);

  /* Typography */
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Scale */
  --t-display-xl:  clamp(60px, 14vw, 200px);
  --t-display-lg:  clamp(48px, 8vw, 88px);
  --t-display-md:  clamp(40px, 5vw, 56px);
  --t-display-sm:  clamp(28px, 4vw, 44px);
  --t-section:     clamp(28px, 4vw, 48px);
  --t-body:        14px;
  --t-body-sm:     12px;
  --t-meta:        10px;
  --t-meta-sm:     9px;

  /* Tracking */
  --track-display: -0.04em;
  --track-section: -0.02em;
  --track-meta:    0.15em;
  --track-meta-lg: 0.2em;
  --track-meta-xl: 0.25em;

  /* Layout */
  --sidebar-w:  220px;
  --topbar-h:   48px;
  --gutter:     48px;
  --gutter-sm:  24px;
  --r:          0px;           /* no border radius — "keep it plumb" */
}

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Grain overlay — always on, matches brand spec */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.08;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }

/* ── Typography utilities ─────────────────────────────────────── */
.u-display-xl, .u-display-lg, .u-display-md, .u-display-sm, .u-section-title {
  font-family: var(--mono);
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}
.u-display-xl { font-size: var(--t-display-xl); line-height: 0.85; }
.u-display-lg { font-size: var(--t-display-lg); }
.u-display-md { font-size: var(--t-display-md); }
.u-display-sm { font-size: var(--t-display-sm); }
.u-section-title { font-size: var(--t-section); font-weight: 700; letter-spacing: var(--track-section); line-height: 1; }

.u-meta {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta-lg);
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 400;
}
.u-meta-sm {
  font-family: var(--mono);
  font-size: var(--t-meta-sm);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--text-dimmer);
  font-weight: 400;
}
.u-mono  { font-family: var(--mono); }
.u-sans  { font-family: var(--sans); }
.u-accent { color: var(--accent); }
.u-dim   { color: var(--text-dim); }
.u-dimmer { color: var(--text-dimmer); }

/* ── Logo / wordmark ──────────────────────────────────────────── */
.logo {
  font-family: var(--mono);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text);
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
}
.logo .slash { color: var(--accent); }
.logo-lg { font-size: 26px; letter-spacing: -0.04em; }
.logo-md { font-size: 19px; letter-spacing: -0.04em; }
.logo-sm { font-size: 15px; letter-spacing: -0.03em; }

/* ── App shell ────────────────────────────────────────────────── */
.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar main";
}
.app.no-chrome {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "main";
}

/* ── Topbar ───────────────────────────────────────────────────── */
.topbar {
  grid-area: topbar;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding: 0 var(--gutter-sm);
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--text-dim);
}
.topbar .brand { color: var(--text); }
.topbar .crumbs { display: flex; gap: 10px; align-items: center; }
.topbar .crumbs .sep { opacity: 0.4; }
.topbar .crumbs .current { color: var(--text); }
.topbar .status { margin-left: auto; display: flex; gap: 20px; align-items: center; }
.pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  animation: pulse 2s infinite;
  margin-right: 8px;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ── Sidebar ──────────────────────────────────────────────────── */
.sidebar {
  grid-area: sidebar;
  background: var(--bg);
  border-right: 1px solid var(--rule);
  padding: 24px 0;
  overflow-y: auto;
}
.sidebar .group { margin-bottom: 24px; }
.sidebar .group-label {
  font-family: var(--mono);
  font-size: var(--t-meta-sm);
  letter-spacing: var(--track-meta-xl);
  color: var(--fog);
  text-transform: uppercase;
  padding: 0 20px 10px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 8px;
}
.sidebar .navitem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px;
  color: var(--text-dim);
  font-size: 12px;
  font-family: var(--sans);
  border-left: 2px solid transparent;
  transition: all 0.12s;
}
.sidebar .navitem:hover { color: var(--text); background: var(--iron); }
.sidebar .navitem.active { color: var(--text); border-left-color: var(--accent); background: var(--iron); }
.sidebar .navitem .count {
  font-family: var(--mono);
  font-size: var(--t-meta-sm);
  letter-spacing: 0.1em;
  color: var(--fog);
}
.sidebar-foot {
  padding: 16px 20px;
  font-family: var(--mono);
  font-size: var(--t-meta-sm);
  color: var(--fog);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  line-height: 1.8;
  border-top: 1px solid var(--rule);
  margin-top: 24px;
}
.sidebar-foot strong { color: var(--text-dim); font-weight: 500; }

/* ── Main ─────────────────────────────────────────────────────── */
.main {
  grid-area: main;
  overflow-y: auto;
  background: var(--bg);
}

/* ── Page header ──────────────────────────────────────────────── */
.page-head {
  padding: 40px var(--gutter) 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  border-bottom: 1px solid var(--rule);
}
.page-head .num {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.3em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.page-head h1 {
  margin: 0;
  font-family: var(--mono);
  font-weight: 800;
  letter-spacing: var(--track-display);
  font-size: var(--t-display-md);
  line-height: 0.95;
  color: var(--text);
}
.page-head h1 em { color: var(--text-dim); font-style: normal; font-weight: 800; }
.page-head .actions { display: flex; gap: 10px; align-items: center; }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  height: 36px;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta-lg);
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: all 0.12s;
  font-weight: 500;
}
.btn:hover    { border-color: var(--smoke); }
.btn.primary  { background: var(--accent); color: var(--offwhite); border-color: var(--accent); }
.btn.primary:hover { background: var(--hivis-dk); border-color: var(--hivis-dk); }
.btn.ghost    { border: 0; color: var(--text-dim); padding: 0 8px; }
.btn.lg       { height: 48px; padding: 0 28px; font-size: 11px; }
.btn.sm       { height: 28px; padding: 0 12px; font-size: 9px; }

/* ── Chips ────────────────────────────────────────────────────── */
.chip {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: var(--t-meta-sm);
  letter-spacing: var(--track-meta-lg);
  text-transform: uppercase;
  border: 1px solid var(--rule);
  color: var(--text-dim);
  font-weight: 500;
}
.chip.accent { background: var(--accent); color: var(--offwhite); border-color: var(--accent); }
.chip.ok     { border-color: #2A4A2A; color: var(--ok); }
.chip.warn   { border-color: #4A3A1A; color: var(--warn); }
.chip.err    { border-color: var(--accent); color: var(--accent); }
.chip.live   { border-color: var(--accent); color: var(--accent); animation: pulse 2s infinite; }

/* ── Cards ────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
}
.card.accent-top { border-top: 2px solid var(--accent); }
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
}
.card-head .title {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta-lg);
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
}
.card-body { padding: 20px; }

/* ── KPI card ─────────────────────────────────────────────────── */
.kpi {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent);
  padding: 20px 22px;
}
.kpi .label {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta-lg);
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 500;
}
.kpi .value-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.kpi .value {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 44px;
  letter-spacing: var(--track-display);
  color: var(--text);
  line-height: 1;
}
.kpi .delta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.kpi .delta.up   { color: var(--accent); }
.kpi .delta.down { color: var(--text-dim); }
.kpi .sub {
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--fog);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  margin-top: 10px;
  font-weight: 400;
}

/* ── Tables ───────────────────────────────────────────────────── */
.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
}
.table thead th {
  text-align: left;
  padding: 14px 14px;
  font-family: var(--mono);
  font-size: var(--t-meta-sm);
  letter-spacing: var(--track-meta-lg);
  color: var(--text-dim);
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule);
  font-weight: 400;
}
.table tbody td {
  padding: 16px 14px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  color: var(--text);
  vertical-align: middle;
}
.table tbody tr { transition: background 0.1s; }
.table tbody tr:hover td { background: var(--iron); cursor: pointer; }
.table .strong { font-weight: 600; color: var(--text); }
.table .id {
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

/* ── Forms ────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--mono);
  font-size: var(--t-meta-sm);
  letter-spacing: var(--track-meta-lg);
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
}
.input, .field .input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  outline: none;
  transition: border-color 0.12s;
  border-radius: 0;
}
.input:focus, .field .input:focus { border-color: var(--accent); }
select.input {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--smoke) 50%),
    linear-gradient(135deg, var(--smoke) 50%, transparent 50%);
  background-position: right 16px top 50%, right 11px top 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
  cursor: pointer;
}
select.input option { background: var(--surface); color: var(--text); }

/* ── Toolbar ──────────────────────────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.toolbar .search {
  flex: 1;
  max-width: 440px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--rule);
  padding: 0 14px;
  height: 34px;
}
.toolbar .search .prefix {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  color: var(--accent);
  font-weight: 600;
}
.toolbar .search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font-family: var(--sans);
  font-size: 12px;
}
.toolbar .spacer { flex: 1; }

.filter-chip {
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: var(--t-meta-sm);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 500;
  transition: all 0.12s;
}
.filter-chip:hover { color: var(--text); }
.filter-chip.active { background: var(--accent); color: var(--offwhite); border-color: var(--accent); }
.filter-chip .n { font-family: var(--mono); font-size: var(--t-meta-sm); opacity: 0.7; }

/* ── Progress bar ─────────────────────────────────────────────── */
.progress {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}
.progress .track {
  flex: 1;
  height: 2px;
  background: var(--ash);
}
.progress .fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.4s;
}
.progress .pct {
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--text-dim);
  letter-spacing: 0.1em;
  min-width: 28px;
  text-align: right;
}

/* ── Meta row (key-value grid) ────────────────────────────────── */
.meta-row {
  display: grid;
  gap: 24px;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta-lg);
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 400;
}
.meta-row .cell .k { opacity: 0.6; margin-bottom: 6px; font-size: var(--t-meta-sm); }
.meta-row .cell .v { color: var(--text); font-size: var(--t-body-sm); letter-spacing: 0.08em; font-weight: 500; }

/* ── Section (editorial block) ────────────────────────────────── */
.section {
  padding: 80px var(--gutter);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.section-head {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 48px;
  font-family: var(--mono);
}
.section-head .num {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 500;
}
.section-head .meta {
  margin-left: auto;
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  color: var(--text-dim);
  text-transform: uppercase;
}

/* ── Ticker / live data row ───────────────────────────────────── */
.ticker {
  display: flex;
  gap: 32px;
  padding: 10px var(--gutter);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-meta-sm);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--text-dim);
  overflow-x: auto;
}
.ticker .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
}

/* ── Paper (invoice / document on dark) ───────────────────────── */
.paper {
  background: var(--offwhite);
  color: var(--black);
  padding: 48px;
  font-family: var(--sans);
  max-width: 900px;
  margin: 0 auto;
}
.paper .logo { color: var(--black); }
.paper .logo .slash { color: var(--accent); }

/* ── Divider ──────────────────────────────────────────────────── */
.hr { height: 1px; background: var(--rule); border: 0; margin: 24px 0; }
.hr-thick { height: 2px; background: var(--rule); border: 0; margin: 32px 0; }

/* ── Grid helpers ─────────────────────────────────────────────── */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { .grid-4, .grid-5, .grid-6 { grid-template-columns: repeat(2, 1fr); } }

/* ── Showcase navigation ──────────────────────────────────────── */
.nav-dots {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 100;
}
.nav-dots a {
  width: 10px; height: 10px;
  border: 1px solid var(--rule);
  background: transparent;
  transition: all 0.15s;
  position: relative;
}
.nav-dots a:hover,
.nav-dots a.active { background: var(--accent); border-color: var(--accent); }
.nav-dots a::before {
  content: attr(data-label);
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.nav-dots a:hover::before { opacity: 1; }

/* ════════════════════════════════════════════════════════════════
   GAP COMPONENTS · 2026-04-20
   Stepper · Modal · Tabs · Pagination · Date picker · File upload
   Toast · Breadcrumb · Empty state · Form validation · Timeline · Dropdown
   ════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb ───────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--gutter);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--rule);
}
.breadcrumb a { color: var(--text-dim); transition: color 0.12s; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb .sep { opacity: 0.4; }
.breadcrumb .current { color: var(--text); }

/* ── Tabs ─────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--rule);
  padding: 0 var(--gutter);
  gap: 0;
}
.tabs .tab {
  padding: 16px 20px;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta-lg);
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.12s;
  position: relative;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tabs .tab:hover { color: var(--text); }
.tabs .tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.tabs .tab .count {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--text-dimmer);
  padding: 2px 6px;
  border: 1px solid var(--rule);
}
.tabs .tab.active .count { color: var(--accent); border-color: var(--accent); }

/* ── Stepper / Wizard progress ────────────────────────────────── */
.stepper {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stepper .step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  border-right: 1px solid var(--rule);
  font-family: var(--mono);
  color: var(--text-dim);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  position: relative;
  font-weight: 500;
  transition: all 0.15s;
}
.stepper .step:last-child { border-right: 0; }
.stepper .step .num {
  width: 32px;
  height: 32px;
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  flex-shrink: 0;
}
.stepper .step .label {
  font-size: 11px;
  letter-spacing: 0.15em;
}
.stepper .step .label .sub {
  display: block;
  font-size: 9px;
  color: var(--text-dimmer);
  letter-spacing: 0.12em;
  margin-top: 3px;
  text-transform: none;
  font-family: var(--sans);
  font-weight: 400;
}
.stepper .step.done { color: var(--text); }
.stepper .step.done .num { background: var(--ash); color: var(--text); border-color: var(--ash); }
.stepper .step.current { background: var(--iron); color: var(--text); }
.stepper .step.current .num { background: var(--accent); color: var(--offwhite); border-color: var(--accent); }
.stepper .step.current::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}

/* ── Pagination ───────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px var(--gutter);
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--text-dim);
}
.pagination .page {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.12s;
  font-weight: 500;
}
.pagination .page:hover { color: var(--text); border-color: var(--smoke); }
.pagination .page.active { background: var(--accent); color: var(--offwhite); border-color: var(--accent); cursor: default; }
.pagination .page.disabled { opacity: 0.3; cursor: not-allowed; }
.pagination .gap { padding: 0 6px; color: var(--text-dimmer); }
.pagination .summary { margin-left: auto; color: var(--text-dimmer); font-size: 10px; }
.pagination .per-page {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
}
.pagination .per-page select {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--text);
  padding: 4px 22px 4px 8px;
  font-family: var(--mono);
  font-size: var(--t-meta-sm);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--smoke) 50%),
    linear-gradient(135deg, var(--smoke) 50%, transparent 50%);
  background-position: right 10px top 50%, right 6px top 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}

/* ── Modal / Dialog ───────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  backdrop-filter: blur(2px);
}
.modal {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent);
  min-width: 420px;
  max-width: 640px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
}
.modal .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--rule);
}
.modal .modal-head .title {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta-lg);
  text-transform: uppercase;
  color: var(--text);
  font-weight: 600;
}
.modal .modal-head .close {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px 8px;
}
.modal .modal-head .close:hover { color: var(--text); }
.modal .modal-body { padding: 24px; overflow-y: auto; }
.modal .modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--rule);
  background: var(--iron);
}

/* ── Toast / Notification ─────────────────────────────────────── */
.toast-stack {
  position: fixed;
  top: 64px;
  right: 24px;
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
}
.toast {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  padding: 14px 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: flex-start;
  animation: toast-in 0.3s ease-out;
}
.toast .icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 6px;
}
.toast .body { min-width: 0; }
.toast .title {
  font-family: var(--mono);
  font-size: var(--t-meta-sm);
  letter-spacing: var(--track-meta-lg);
  text-transform: uppercase;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 4px;
}
.toast .msg { font-family: var(--sans); font-size: 13px; color: var(--text-dim); line-height: 1.4; }
.toast .close { font-family: var(--mono); color: var(--text-dimmer); cursor: pointer; padding: 0 4px; }
.toast.ok    { border-left-color: var(--ok); }
.toast.ok    .icon { background: var(--ok); }
.toast.warn  { border-left-color: var(--warn); }
.toast.warn  .icon { background: var(--warn); }
.toast.err   { border-left-color: var(--accent); }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Empty state ──────────────────────────────────────────────── */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 80px 24px;
  text-align: center;
  border: 1px dashed var(--rule);
}
.empty .glyph {
  width: 56px;
  height: 56px;
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 800;
  color: var(--text-dim);
  letter-spacing: -0.02em;
}
.empty .empty-title {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 600;
}
.empty .empty-msg {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-dim);
  max-width: 420px;
  line-height: 1.6;
}

/* ── Form validation (error state) ────────────────────────────── */
.field.error .input { border-color: var(--accent); }
.field.error label { color: var(--accent); }
.field .hint {
  font-family: var(--mono);
  font-size: var(--t-meta-sm);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--text-dimmer);
}
.field.error .hint { color: var(--accent); }
.field .required {
  color: var(--accent);
  margin-left: 4px;
}
.field.success .input { border-color: var(--ok); }
.field.success .hint { color: var(--ok); }

/* ── Date range picker ────────────────────────────────────────── */
.daterange {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule);
  height: 34px;
  overflow: hidden;
}
.daterange .seg {
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text);
  border-right: 1px solid var(--rule);
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  background: transparent;
  transition: background 0.12s;
}
.daterange .seg:hover { background: var(--iron); }
.daterange .seg:last-child { border-right: 0; }
.daterange .seg .k {
  font-size: 8px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-right: 8px;
}
.daterange .presets {
  display: flex;
  height: 100%;
  border-left: 1px solid var(--rule);
}
.daterange .presets button {
  padding: 0 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 0;
  border-right: 1px solid var(--rule);
  background: transparent;
  cursor: pointer;
  transition: all 0.12s;
}
.daterange .presets button:last-child { border-right: 0; }
.daterange .presets button:hover { color: var(--text); background: var(--iron); }
.daterange .presets button.active { background: var(--accent); color: var(--offwhite); }

/* Calendar popover (shown on click) */
.calendar {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 20px;
  width: 280px;
  font-family: var(--sans);
}
.calendar .cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--text);
  font-weight: 600;
}
.calendar .cal-head button {
  font-family: var(--mono);
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px 8px;
  border: 1px solid var(--rule);
  background: transparent;
}
.calendar .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font-family: var(--mono);
  font-size: 11px;
}
.calendar .cal-grid .wd {
  text-align: center;
  color: var(--text-dimmer);
  padding: 4px 0;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.calendar .cal-grid .d {
  text-align: center;
  padding: 8px 0;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.1s;
}
.calendar .cal-grid .d:hover { background: var(--iron); color: var(--text); }
.calendar .cal-grid .d.off { opacity: 0.3; }
.calendar .cal-grid .d.start,
.calendar .cal-grid .d.end { background: var(--accent); color: var(--offwhite); }
.calendar .cal-grid .d.in-range { background: rgba(139, 24, 24, 0.2); color: var(--text); }
.calendar .cal-grid .d.today { border: 1px solid var(--accent); }

/* ── File upload dropzone ─────────────────────────────────────── */
.dropzone {
  border: 1px dashed var(--rule);
  padding: 40px 24px;
  text-align: center;
  background: var(--iron);
  transition: all 0.15s;
  cursor: pointer;
}
.dropzone:hover,
.dropzone.dragover { border-color: var(--accent); background: rgba(139, 24, 24, 0.06); }
.dropzone .dz-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-weight: 800;
  color: var(--text-dim);
  margin-bottom: 14px;
  font-size: 16px;
}
.dropzone .dz-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 4px;
}
.dropzone .dz-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.dropzone .dz-accent { color: var(--accent); }

.file-item {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  background: var(--surface);
  margin-top: 8px;
}
.file-item .ext {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--iron);
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}
.file-item .fname {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-item .fname .fsize { color: var(--text-dimmer); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; margin-left: 8px; }
.file-item .fbar {
  width: 120px;
  height: 2px;
  background: var(--ash);
  overflow: hidden;
}
.file-item .fbar .ff { height: 100%; background: var(--accent); transition: width 0.3s; }
.file-item .fdel { font-family: var(--mono); font-size: 11px; color: var(--text-dim); cursor: pointer; padding: 0 6px; }
.file-item .fdel:hover { color: var(--accent); }

/* ── Timeline / event log ─────────────────────────────────────── */
.timeline {
  position: relative;
  padding-left: 28px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--rule);
}
.tl-event {
  position: relative;
  padding: 0 0 24px 0;
}
.tl-event::before {
  content: '';
  position: absolute;
  left: -25px;
  top: 6px;
  width: 9px;
  height: 9px;
  background: var(--iron);
  border: 2px solid var(--rule);
  border-radius: 50%;
}
.tl-event.accent::before { background: var(--accent); border-color: var(--accent); }
.tl-event.ok::before { background: var(--ok); border-color: var(--ok); }
.tl-event.warn::before { background: var(--warn); border-color: var(--warn); }
.tl-event .tl-time {
  font-family: var(--mono);
  font-size: var(--t-meta-sm);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--text-dimmer);
  margin-bottom: 4px;
}
.tl-event .tl-title {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 4px;
}
.tl-event .tl-body {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}
.tl-event .tl-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-dimmer);
  text-transform: uppercase;
  margin-top: 6px;
}

/* ── Dropdown (custom select / menu) ──────────────────────────── */
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 34px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
}
.dropdown-trigger::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--text-dim);
  border-bottom: 1px solid var(--text-dim);
  transform: rotate(45deg);
  margin-top: -3px;
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  z-index: 50;
  padding: 6px 0;
}
.dropdown-menu .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s;
}
.dropdown-menu .item:hover { background: var(--iron); }
.dropdown-menu .item.active { color: var(--accent); }
.dropdown-menu .item .meta {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.dropdown-menu .divider { height: 1px; background: var(--rule); margin: 6px 0; }
.dropdown-menu .group-label {
  padding: 8px 14px 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--text-dimmer);
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════════════
   SAFETY NET · Option C dark-theme overrides for legacy inline styles
   Targets blades that hardcode white backgrounds + dark text assuming a
   light theme. Uses attribute selectors on style="..." to override inline.
   Without this, half of the admin/customer/supplier/tms sub-pages have
   white-on-white invisible text after the theme flip.
   ════════════════════════════════════════════════════════════════════════ */

/* White-ish backgrounds → dark card */
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background: #FFF"],
[style*="background:#FFF"],
[style*="background: white"],
[style*="background:white"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background-color: #FFF"],
[style*="background-color:#FFF"],
[style*="background-color: white"],
[style*="background-color:white"] {
  background: #141414 !important;
  background-color: #141414 !important;
}

/* Light-gray / near-white backgrounds → slightly darker card */
[style*="background: #f5f5"],
[style*="background:#f5f5"],
[style*="background: #F5F5"],
[style*="background:#F5F5"],
[style*="background: #f8f8"],
[style*="background:#f8f8"],
[style*="background: #F8F8"],
[style*="background:#F8F8"],
[style*="background: #f2f2"],
[style*="background:#f2f2"],
[style*="background: #fafafa"],
[style*="background:#fafafa"],
[style*="background: #FAFAFA"],
[style*="background:#FAFAFA"],
[style*="background: #eeeeee"],
[style*="background:#eeeeee"],
[style*="background: #e5e5e5"],
[style*="background:#e5e5e5"],
[style*="background: #F4F4F2"],
[style*="background:#F4F4F2"] {
  background: #1A1A1A !important;
  background-color: #1A1A1A !important;
}

/* Near-black text on dark bg is invisible — flip to bone */
[style*="color: #000"]:not([style*="background"]),
[style*="color:#000"]:not([style*="background"]),
[style*="color: #111"]:not([style*="background"]),
[style*="color:#111"]:not([style*="background"]),
[style*="color: #222"]:not([style*="background"]),
[style*="color:#222"]:not([style*="background"]),
[style*="color: #333"]:not([style*="background"]),
[style*="color:#333"]:not([style*="background"]),
[style*="color: #0A0A0F"]:not([style*="background"]),
[style*="color:#0A0A0F"]:not([style*="background"]),
[style*="color: black"]:not([style*="background"]),
[style*="color:black"]:not([style*="background"]) {
  color: #E8E6E1 !important;
}

/* Flash / alert banner inline colors → neutralize to Option C tones */
[style*="background: #FEE2E2"], [style*="background:#FEE2E2"],
[style*="background: #FECACA"], [style*="background:#FECACA"] {
  background: rgba(139, 24, 24, 0.12) !important;
  border-color: #8B1818 !important;
}
[style*="color: #991B1B"], [style*="color:#991B1B"],
[style*="color: #DC2626"], [style*="color:#DC2626"] { color: #E8E6E1 !important; }

[style*="background: #D1FAE5"], [style*="background:#D1FAE5"],
[style*="background: #DCFCE7"], [style*="background:#DCFCE7"] {
  background: rgba(79, 168, 94, 0.1) !important;
  border-color: #2A4A2A !important;
}
[style*="color: #065F46"], [style*="color:#065F46"],
[style*="color: #059669"], [style*="color:#059669"] { color: #4FA85E !important; }

[style*="background: #FEF3C7"], [style*="background:#FEF3C7"],
[style*="background: #FDE68A"], [style*="background:#FDE68A"] {
  background: rgba(196, 154, 46, 0.1) !important;
  border-color: #4A3A1A !important;
}
[style*="color: #92400E"], [style*="color:#92400E"],
[style*="color: #B45309"], [style*="color:#B45309"] { color: #C49A2E !important; }

[style*="background: #EFF6FF"], [style*="background:#EFF6FF"],
[style*="background: #DBEAFE"], [style*="background:#DBEAFE"] {
  background: rgba(136, 136, 136, 0.08) !important;
  border-color: #2A2A2A !important;
}
[style*="color: #1E40AF"], [style*="color:#1E40AF"],
[style*="color: #2563EB"], [style*="color:#2563EB"],
[style*="color: #3B82F6"], [style*="color:#3B82F6"] { color: #888888 !important; }

/* Tailwind utility class overrides (for pages that use bg-white etc.) */
.main .bg-white,  .main [class*="bg-white"]  { background-color: #141414 !important; }
.main .bg-gray-50,.main [class*="bg-gray-50"]{ background-color: #1A1A1A !important; }
.main .bg-gray-100, .main [class*="bg-gray-100"] { background-color: #1A1A1A !important; }
.main .text-gray-900, .main [class*="text-gray-900"] { color: #E8E6E1 !important; }
.main .text-gray-800, .main [class*="text-gray-800"] { color: #E8E6E1 !important; }
.main .text-black, .main [class*="text-black"] { color: #E8E6E1 !important; }
.main .border-gray-200, .main .border-gray-100, .main .border-gray-300 { border-color: #2A2A2A !important; }

/* Common legacy widget patterns — panel / card / metric / feed */
.main .panel, .main .card, .main .metric, .main .feed-item, .main .quick-action, .main .table, .main table {
  background: #141414 !important;
  border-color: #2A2A2A !important;
  color: #E8E6E1 !important;
  border-radius: 0 !important;
}
.main .panel-head, .main .card-head { border-color: #2A2A2A !important; background: #0A0A0A !important; }
.main .panel-head h3, .main .card-head h3 { color: #E8E6E1 !important; font-family: 'JetBrains Mono', monospace !important; font-weight: 700 !important; letter-spacing: -0.02em !important; font-size: 15px !important; }
.main .table thead th, .main table thead th { background: #0A0A0A !important; color: #888 !important; border-color: #2A2A2A !important; font-family: 'JetBrains Mono', monospace !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; font-size: 10px !important; }
.main .table tbody td, .main table tbody td { background: transparent !important; color: #E8E6E1 !important; border-color: #1E1E1E !important; }
.main .table tbody tr:hover td, .main table tbody tr:hover td { background: #1A1A1A !important; }
.main input, .main select, .main textarea {
  background: transparent !important;
  border-color: #2A2A2A !important;
  color: #E8E6E1 !important;
  border-radius: 0 !important;
}
.main input:focus, .main select:focus, .main textarea:focus { border-color: #8B1818 !important; outline: none !important; }

/* Buttons: legacy .btn.btn-primary → oxblood */
.main .btn, .main button.btn, .main a.btn {
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  font-size: 11px !important;
}
.main .btn-primary { background: #8B1818 !important; color: #F4F4F2 !important; border-color: #8B1818 !important; }
.main .btn-primary:hover { background: #6B1212 !important; }
.main .btn-outline { background: transparent !important; color: #E8E6E1 !important; border: 1px solid #2A2A2A !important; }

/* Badge / chip legacy classes */
.main .badge {
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-size: 9px !important;
  padding: 4px 10px !important;
  background: transparent !important;
  border: 1px solid #2A2A2A !important;
  color: #888 !important;
  font-weight: 500 !important;
}
.main .badge-completed, .main .badge-progress, .main .badge-delivered { border-color: #2A4A2A !important; color: #4FA85E !important; }
.main .badge-pending, .main .badge-review  { border-color: #4A3A1A !important; color: #C49A2E !important; }
.main .badge-transit, .main .badge-active  { background: rgba(139,24,24,0.15) !important; color: #8B1818 !important; border-color: #8B1818 !important; }
.main .badge-cancelled, .main .badge-error { border-color: #8B1818 !important; color: #8B1818 !important; }

/* Link color */
.main .panel-link, .main a:not(.btn):not(.sidebar-item):not(.sidebar-brand) { color: #888 !important; }
.main .panel-link:hover, .main a:not(.btn):not(.sidebar-item):not(.sidebar-brand):hover { color: #8B1818 !important; }

/* Muted / subtitle text */
.main .muted, .main .subtitle, .main .feed-time, .main .metric-label {
  color: #888 !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.05em !important;
}

/* Inputs with light-themed shadow rings */
[style*="box-shadow"] { box-shadow: none !important; }

/* Select2 + jQuery UI overrides for dark theme */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: transparent !important;
  border: 1px solid #2A2A2A !important;
  color: #E8E6E1 !important;
  border-radius: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: #E8E6E1 !important; }
.select2-dropdown {
  background: #141414 !important;
  border: 1px solid #2A2A2A !important;
  color: #E8E6E1 !important;
  border-radius: 0 !important;
}
.select2-results__option { color: #E8E6E1 !important; }
.select2-results__option--highlighted { background: #8B1818 !important; color: #F4F4F2 !important; }

/* ════════════════════════════════════════════════════════════════════════
   SAFETY NET · v2 — scrollbar / rounded kill / invisible text / icon bg
   ════════════════════════════════════════════════════════════════════════ */

/* Dark scrollbars everywhere (WebKit + Firefox) */
* { scrollbar-width: thin; scrollbar-color: #2A2A2A #0A0A0A; }
*::-webkit-scrollbar        { width: 10px; height: 10px; background: #0A0A0A; }
*::-webkit-scrollbar-track  { background: #0A0A0A; }
*::-webkit-scrollbar-thumb  { background: #2A2A2A; border: 2px solid #0A0A0A; }
*::-webkit-scrollbar-thumb:hover { background: #3A3A3A; }
*::-webkit-scrollbar-corner { background: #0A0A0A; }

/* Kill all rounded corners globally inside the main content area
   (avatars, pills, cards, icon boxes all become plumb squares per Option C spec) */
.main *[style*="border-radius"] { border-radius: 0 !important; }
.main .rounded, .main .rounded-sm, .main .rounded-md, .main .rounded-lg,
.main .rounded-xl, .main .rounded-2xl, .main .rounded-3xl, .main .rounded-full {
  border-radius: 0 !important;
}
.main .metric-icon, .main .quick-action-icon, .main .sidebar-avatar,
.main .feed-icon, .main [class*="icon-"], .main [class*="-icon"] {
  border-radius: 0 !important;
}

/* Icon background boxes — neutralize the blue/green/amber/purple pills to oxblood-dim */
.main .metric-icon.blue, .main .metric-icon.green, .main .metric-icon.amber,
.main .metric-icon.purple, .main .metric-icon.red {
  background: rgba(139, 24, 24, 0.08) !important;
  border: 1px solid #2A2A2A !important;
}
.main .metric-icon svg, .main .metric-icon *[stroke] {
  stroke: #8B1818 !important;
}
.main .quick-action-icon {
  background: rgba(139, 24, 24, 0.08) !important;
  border: 1px solid #2A2A2A !important;
}
.main .quick-action-icon svg, .main .quick-action-icon *[stroke] {
  stroke: #8B1818 !important;
}

/* Invisible text: extend the safety net to catch more patterns */
.main [style*="color: rgb(0, 0, 0)"],
.main [style*="color: rgb(0,0,0)"],
.main [style*="color: rgba(0, 0, 0"],
.main [style*="color: rgba(0,0,0"],
.main [style*="color: #0A0A0F"],
.main [style*="color:#0A0A0F"],
.main [style*="color: #1A1A22"],
.main [style*="color:#1A1A22"] {
  color: #E8E6E1 !important;
}

/* SVG icons with dark strokes/fills → light */
.main svg *[stroke="#000"],
.main svg *[stroke="#000000"],
.main svg *[stroke="black"],
.main svg *[stroke="#0A0A0F"],
.main svg *[stroke="#111"],
.main svg *[stroke="#333"] { stroke: #888 !important; }
.main svg *[fill="#000"],
.main svg *[fill="#000000"],
.main svg *[fill="black"],
.main svg *[fill="#0A0A0F"] { fill: #888 !important; }

/* Strong inputs / labels fallback for any blade that forgot the safety net */
.main input[type="text"], .main input[type="email"], .main input[type="number"],
.main input[type="password"], .main input[type="date"], .main input[type="tel"],
.main input[type="search"], .main input[type="url"],
.main select, .main textarea {
  background: transparent !important;
  border: 1px solid #2A2A2A !important;
  color: #E8E6E1 !important;
  border-radius: 0 !important;
}
.main input:focus, .main select:focus, .main textarea:focus {
  border-color: #8B1818 !important;
  outline: none !important;
}
.main label { color: #888 !important; }

/* Chart bars that were green/red/blue → oxblood variants */
.main .main *[style*="background: #00D26A"],
.main *[style*="background:#00D26A"] { background: #4FA85E !important; }
.main *[style*="background: #2F6FED"],
.main *[style*="background:#2F6FED"] { background: #8B1818 !important; }
.main *[style*="background: #7C5CFC"],
.main *[style*="background:#7C5CFC"] { background: rgba(139,24,24,0.6) !important; }
.main *[style*="background: #FFB020"],
.main *[style*="background:#FFB020"] { background: #C49A2E !important; }

/* Flex containers that used class="flex flex-col-3 gap-1" etc (from RFQ detail) — ensure readable */
.main .flex { display: flex; }
.main .gap-1 { gap: 8px; }

/* Fix dim chip text (default .oc-chip had color #888 which was invisible on dark row hover) */
.main .oc-chip,
.main span.oc-chip,
.main span.badge {
  color: #E8E6E1 !important;
  background: #1A1A1A !important;
}
.main .oc-chip.accent, .main span.oc-chip.accent { background: #8B1818 !important; color: #F4F4F2 !important; }
.main .oc-chip.ok, .main span.oc-chip.ok { background: rgba(79,168,94,0.12) !important; color: #4FA85E !important; border-color: #2A4A2A !important; }
.main .oc-chip.warn, .main span.oc-chip.warn { background: rgba(196,154,46,0.1) !important; color: #C49A2E !important; border-color: #4A3A1A !important; }
.main .oc-chip.err, .main span.oc-chip.err { background: rgba(139,24,24,0.15) !important; color: #8B1818 !important; border-color: #8B1818 !important; }
.main .oc-chip.transit, .main span.oc-chip.transit { background: rgba(139,24,24,0.15) !important; color: #8B1818 !important; border-color: #8B1818 !important; }
.main .oc-chip.live, .main span.oc-chip.live { background: rgba(139,24,24,0.15) !important; color: #8B1818 !important; border-color: #8B1818 !important; }

/* ═══ Native <select> dropdown — kill browser blue highlight, use oxblood ═══ */
select { accent-color: #8B1818 !important; }
select option {
  background: #141414 !important;
  color: #E8E6E1 !important;
  padding: 6px 10px !important;
}
select option:hover,
select option:focus,
select option:active,
select option:checked {
  background: #8B1818 linear-gradient(0deg, #8B1818 0%, #8B1818 100%) !important;
  color: #F4F4F2 !important;
  box-shadow: 0 0 10px 100px #8B1818 inset !important;
}
select:focus option:checked {
  background: #8B1818 linear-gradient(0deg, #8B1818 0%, #8B1818 100%) !important;
  color: #F4F4F2 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE · v1 — mobile/tablet rules for Option C theme + home page
   Added 2026-05-02 — original CSS shipped with one @media query.
   ════════════════════════════════════════════════════════════════════════ */

/* Tablet ≤1024px — collapse 4-col grids, tighten gutters */
@media (max-width: 1024px) {
  :root { --gutter: 28px; --gutter-sm: 16px; --sidebar-w: 200px; }
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: repeat(2, 1fr); }
  .toolbar { flex-wrap: wrap; row-gap: 10px; }
  .toolbar .search { max-width: none; flex-basis: 100%; }
  .stepper { flex-wrap: wrap; }
  .tabs { overflow-x: auto; }
  .tabs .tab { flex-shrink: 0; white-space: nowrap; }

  /* Homepage — top nav: drop the link list, keep brand + auth */
  #main > div:first-child { padding: 14px 22px !important; gap: 16px !important; }

  /* Homepage — quote widget cargo row to 2 cols + button full row */
  #oc-quote-form > div > div[style*="1.2fr 260px"] { grid-template-columns: 1fr 1fr !important; }
  #oc-quote-form > div > div[style*="1.2fr 260px"] > button { grid-column: 1 / -1 !important; padding: 18px !important; }

  /* Homepage — proof stats 4→2 */
  #main > div[style*="repeat(4, 1fr)"][style*="border-bottom: 1px solid var(--rule)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Homepage — service card 2-col → still 2-col on tablet, just tighten */
  #main [style*="min-height: 480px"] > div[style*="padding: 56px 48px"] { padding: 40px 28px !important; }
}

/* Phone ≤768px — single-column layout, large-tap targets */
@media (max-width: 768px) {
  :root { --gutter: 16px; --gutter-sm: 12px; }

  /* App shell — hide sidebar entirely on mobile */
  .app {
    grid-template-columns: 1fr !important;
    grid-template-rows: var(--topbar-h) 1fr !important;
    grid-template-areas: "topbar" "main" !important;
  }
  .sidebar { display: none !important; }
  .topbar { padding: 0 14px !important; gap: 14px !important; font-size: 9px !important; overflow-x: auto; }
  .topbar .status { gap: 12px !important; flex-shrink: 0; }

  /* Section paddings */
  .section { padding: 36px 16px !important; }
  .section-head { flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }

  /* Page header */
  .page-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 16px 16px !important;
  }
  .page-head .actions { flex-wrap: wrap; gap: 8px; }

  /* Grids fully collapse */
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: 1fr !important; }

  /* Stepper stacks vertically */
  .stepper { flex-direction: column; }
  .stepper .step { border-right: 0; border-bottom: 1px solid var(--rule); padding: 14px 16px; }
  .stepper .step:last-child { border-bottom: 0; }
  .stepper .step.current::after { display: none; }

  /* Toolbar */
  .toolbar { padding: 12px 16px !important; }

  /* Tabs */
  .tabs { padding: 0 12px !important; }
  .tabs .tab { padding: 14px 14px; font-size: 10px; }

  /* Modal */
  .modal {
    min-width: 0 !important;
    width: calc(100vw - 24px) !important;
    max-width: 100vw !important;
    max-height: 92vh !important;
  }
  .modal-backdrop { padding: 12px; }

  /* Toast */
  .toast-stack { right: 12px !important; left: 12px !important; max-width: none !important; }

  /* Tables — horizontal scroll wrapper behavior */
  .main table, .main .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Pagination — wrap, summary on its own line */
  .pagination { flex-wrap: wrap; padding: 12px 16px !important; gap: 8px; }
  .pagination .summary { margin-left: 0; flex-basis: 100%; order: 99; text-align: left; }
  .pagination .per-page { margin-left: 0; }

  /* Breadcrumb */
  .breadcrumb { padding: 10px 16px !important; flex-wrap: wrap; row-gap: 4px; }

  /* KPI: tighter */
  .kpi { padding: 16px 14px !important; }
  .kpi .value { font-size: 32px !important; }

  /* Date range picker — wrap + scroll presets */
  .daterange { flex-wrap: wrap; height: auto !important; }
  .daterange .seg { flex: 1 1 auto; min-width: 50%; }
  .daterange .presets { width: 100%; border-left: 0; border-top: 1px solid var(--rule); overflow-x: auto; }

  /* File item */
  .file-item { grid-template-columns: 36px 1fr auto; }
  .file-item .fbar { display: none; }

  /* Paper — readable padding */
  .paper { padding: 24px 18px !important; }

  /* Nav dots — hide vertical floating dots on mobile (they overlap content) */
  .nav-dots { display: none !important; }

  /* ── HOMEPAGE-SPECIFIC RULES (target inline styles in _home-main.blade.php) ── */

  /* Top nav: collapse — hide nav links, show brand + sign-in/get-started */
  #main > div:first-child {
    padding: 12px 14px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  #main > div:first-child > nav { display: none !important; }
  #main > div:first-child .logo-lg { font-size: 20px !important; }
  #main > div:first-child > div:last-child { gap: 6px !important; }
  #main > div:first-child > div:last-child a,
  #main > div:first-child > div:last-child button {
    padding: 0 12px !important;
    height: 32px !important;
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
  }
  #main > div:first-child > div:last-child span { display: none !important; }

  /* Hero block — tighter and shorter */
  #main > div[style*="min-height: 780px"] { min-height: 0 !important; }
  #main > div[style*="min-height: 780px"] > div[style*="flex-end"] {
    padding: 10px 14px !important;
    font-size: 9px !important;
    letter-spacing: 0.18em !important;
  }
  #main > div[style*="min-height: 780px"] > div[style*="flex: 1"] {
    padding: 36px 16px 24px !important;
  }
  #main h1[style*="clamp(56px"] {
    font-size: clamp(38px, 12vw, 60px) !important;
    line-height: 0.95 !important;
  }
  #main h1[style*="clamp(56px"] + div { font-size: 12px !important; margin-top: 18px !important; }

  /* Quote form */
  #oc-quote-form { padding: 0 12px 18px !important; }

  /* Mode tabs — keep 4 in a row but tighter, hide leading numbers */
  #oc-mode-tabs .oc-mode-tab {
    padding: 14px 6px !important;
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
  }
  #oc-mode-tabs .oc-mode-tab span { display: none !important; }

  /* Lane row (origin/⇄/destination) — stack vertically */
  #oc-quote-form > div > div[style*="1fr 64px 1fr"] {
    grid-template-columns: 1fr !important;
  }
  #oc-quote-form > div > div[style*="1fr 64px 1fr"] > div { padding: 14px 18px !important; }
  #oc-quote-form > div > div[style*="1fr 64px 1fr"] > div:not([style*="border-left"]):not(:first-child) {
    border-top: 1px solid var(--rule);
  }
  #oc-quote-form > div > div[style*="1fr 64px 1fr"] > div[style*="border-left"] {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 1px solid var(--rule);
    padding: 6px 0 !important;
    font-size: 16px !important;
  }
  #oc-origin-label, #oc-destination-label { font-size: 16px !important; }

  /* Cargo row — 2x2 grid, button full width below */
  #oc-quote-form > div > div[style*="1.2fr 260px"] {
    grid-template-columns: 1fr 1fr !important;
  }
  #oc-quote-form > div > div[style*="1.2fr 260px"] > div {
    padding: 12px 14px !important;
  }
  #oc-quote-form > div > div[style*="1.2fr 260px"] > div:nth-child(odd) {
    border-right: 1px solid var(--rule) !important;
  }
  #oc-quote-form > div > div[style*="1.2fr 260px"] > div:nth-child(3),
  #oc-quote-form > div > div[style*="1.2fr 260px"] > div:nth-child(4) {
    border-top: 1px solid var(--rule);
  }
  #oc-quote-form > div > div[style*="1.2fr 260px"] > button {
    grid-column: 1 / -1 !important;
    padding: 20px !important;
    border-top: 1px solid var(--rule) !important;
    font-size: 12px !important;
    letter-spacing: 0.22em !important;
  }
  #oc-quote-form select, #oc-quote-form input[type="number"], #oc-quote-form input[type="date"] {
    font-size: 16px !important;
  }
  /* Date input: dark color-scheme already set inline; keep 16px to avoid iOS zoom */

  /* Bottom strip of widget */
  #oc-quote-form > div > div[style*="border-top"][style*="space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 10px 14px !important;
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
  }

  /* Three indicators row under widget */
  #main > div[style*="min-height: 780px"] > div[style*="space-between"][style*="padding: 16px 48px 32px"],
  #main div[style*="padding: 16px 48px 32px"] {
    padding: 12px 16px 22px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    font-size: 9px !important;
    letter-spacing: 0.16em !important;
  }

  /* Indicative lanes ticker — already overflow-x scroll; tighten padding */
  #main div[style*="white-space: nowrap"][style*="overflow-x: auto"] {
    padding: 12px 16px !important;
    gap: 24px !important;
    font-size: 11px !important;
  }

  /* Big proof stats — 4→2 */
  #main > div[style*="repeat(4, 1fr)"][style*="border-bottom: 1px solid var(--rule)"]:not([style*="margin"]) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #main div[style*="padding: 56px 36px 48px"] {
    padding: 28px 16px !important;
    border-right: 1px solid var(--rule) !important;
  }
  #main div[style*="padding: 56px 36px 48px"] > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  #main div[style*="padding: 56px 36px 48px"] > div > div:first-child {
    font-size: clamp(32px, 11vw, 52px) !important;
  }
  #main div[style*="padding: 56px 36px 48px"] > div > div:last-child {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
  }
  /* Add bottom border between rows in the 2-col stat grid */
  #main > div[style*="repeat(4, 1fr)"]:not([style*="margin"]) > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--rule);
  }

  /* Partner carriers section header */
  #main div[style*="padding: 40px 48px 16px"] {
    padding: 28px 16px 12px !important;
  }

  /* Carriers grid 4→2 + tighter padding */
  #main div[style*="repeat(4, 1fr)"][style*="margin: 0 48px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    margin: 0 16px !important;
  }
  #main div[style*="repeat(4, 1fr)"][style*="margin: 0 48px"] > div {
    padding: 22px 14px !important;
  }
  #main div[style*="repeat(4, 1fr)"][style*="margin: 0 48px"] > div > div:first-child {
    font-size: 18px !important;
  }
  #main div[style*="repeat(4, 1fr)"][style*="margin: 0 48px"] > div > div:last-child {
    font-size: 9px !important;
    letter-spacing: 0.15em !important;
  }

  /* Editorial pull section 1fr/2fr/auto → stack */
  #main div[style*="grid-template-columns: 1fr 2fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 36px 16px !important;
  }
  #main div[style*="grid-template-columns: 1fr 2fr auto"] > div:nth-child(2) {
    font-size: 20px !important;
    line-height: 1.35 !important;
  }

  /* Service cards: 1fr/1fr split → stack vertically */
  #main div[style*="min-height: 480px"][style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  #main div[style*="min-height: 480px"] > div { order: unset !important; }
  /* Force visual side first, content second on mobile (override inline order: 1/2) */
  #main div[style*="min-height: 480px"] > div[style*="position: relative"][style*="overflow: hidden"] {
    order: 1 !important;
    min-height: 280px;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule);
  }
  #main div[style*="min-height: 480px"] > div[style*="padding: 56px 48px"] {
    order: 2 !important;
    padding: 32px 16px !important;
  }
  /* Service content typography */
  #main div[style*="min-height: 480px"] > div[style*="padding: 56px 48px"] > div[style*="clamp(44px"] {
    font-size: clamp(32px, 9vw, 44px) !important;
    margin-bottom: 18px !important;
  }
  #main div[style*="min-height: 480px"] > div[style*="padding: 56px 48px"] > div[style*="font-size: 16px"] {
    font-size: 14px !important;
    margin-bottom: 28px !important;
  }
  /* Service stats row — 3 cols of `auto` overflow on phones; switch to 3 equal */
  #main div[style*="grid-template-columns: repeat(3, auto)"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
  #main div[style*="grid-template-columns: repeat(3, auto)"] > div > div:first-child {
    font-size: 22px !important;
  }
  #main div[style*="grid-template-columns: repeat(3, auto)"] > div > div:last-child {
    font-size: 9px !important;
    letter-spacing: 0.15em !important;
  }
  /* Service visual side — shrink huge typography numerals */
  #main div[style*="min-height: 480px"] [style*="clamp(180px, 22vw, 340px)"] {
    font-size: clamp(110px, 32vw, 180px) !important;
  }
  #main div[style*="min-height: 480px"] [style*="clamp(160px, 18vw, 260px)"],
  #main div[style*="min-height: 480px"] [style*="clamp(140px, 16vw, 220px)"] {
    font-size: clamp(80px, 22vw, 140px) !important;
    top: 24px !important;
    left: 16px !important;
    right: auto !important;
  }
  #main div[style*="min-height: 480px"] [style*="clamp(64px, 8vw, 108px)"] {
    font-size: clamp(44px, 14vw, 72px) !important;
  }
  #main div[style*="min-height: 480px"] [style*="bottom: 64px"] {
    bottom: 48px !important;
    left: 16px !important;
    right: auto !important;
    text-align: left !important;
  }

  /* Tickers / horizontal scroll rows: smooth touch scroll */
  .ticker, #main div[style*="overflow-x: auto"] { -webkit-overflow-scrolling: touch; }
}

/* Phone ≤480px — even tighter */
@media (max-width: 480px) {
  /* Mode tabs: shrink labels further but keep 4-up to preserve "SEA·LAND·RAIL·AIR" identity */
  #oc-mode-tabs .oc-mode-tab { padding: 12px 4px !important; font-size: 9px !important; letter-spacing: 0.1em !important; }

  /* Cargo row: collapse to 1-col so each field gets full width */
  #oc-quote-form > div > div[style*="1.2fr 260px"] {
    grid-template-columns: 1fr !important;
  }
  #oc-quote-form > div > div[style*="1.2fr 260px"] > div {
    border-right: 0 !important;
    border-top: 1px solid var(--rule) !important;
  }

  /* Big proof stats: keep 2 cols but smaller numerals */
  #main div[style*="padding: 56px 36px 48px"] > div > div:first-child {
    font-size: clamp(28px, 10vw, 42px) !important;
  }

  /* Carriers: 2 cols, stacked label */
  #main div[style*="repeat(4, 1fr)"][style*="margin: 0 48px"] > div > div:first-child {
    font-size: 16px !important;
    letter-spacing: -0.01em !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   END RESPONSIVE v1
   ════════════════════════════════════════════════════════════════════════ */