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