/* ═══ DISPATCH NXP OVERRIDES ═══ */
/* dispatch-nxp-overrides */

/* ── Kill old decorations ── */
#particleCanvas { display: none !important; }
.bg-glow-container { display: none !important; }
.omnis-logo, .topbar-logo-wrap { display: none !important; }

/* ── Sub-tabs bar ── */
.dispatch-tabs {
  background: rgba(8,8,11,.97) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  height: 38px !important;
  padding: 0 16px !important;
}
.dtab {
  font-family: 'Figtree', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #4A4A54 !important;
  border-bottom: 2px solid transparent !important;
  transition: all .15s !important;
  padding: 0 12px !important;
}
.dtab:hover { color: #7C7C86 !important; }
.dtab.active {
  color: #E8E8EC !important;
  border-bottom-color: #E8E8EC !important;
}
.dtab svg { opacity: .5; }
.dtab.active svg { opacity: 1; }
.dtab-right .btn { 
  background: #E8E8EC !important;
  color: #030305 !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.2) !important;
  border-radius: 100px !important;
  font-family: 'Figtree', sans-serif !important;
  font-weight: 600 !important;
}
.dtab-right .btn:hover { background: #fff !important; }

/* ── Board panel layout ── */
#panel-board {
  flex-direction: row !important;
}
#panel-board .main-column,
#panel-board section.main-column {
  flex: 1 !important;
  min-width: 0 !important;
}
#panel-board .side-column,
#panel-board aside.side-column {
  width: 300px !important;
  border-left: 1px solid rgba(255,255,255,.06) !important;
  padding: 0 !important;
  background: rgba(8,8,11,.97) !important;
}

/* ── Toolbar + Search ── */
.toolbar, .toolbar.glass {
  background: rgba(8,8,11,.97) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  padding: 8px 16px !important;
  gap: 8px !important;
  backdrop-filter: none !important;
  display: flex !important;
  align-items: center !important;
}
.search-wrap input, #searchInput {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 100px !important;
  padding: 6px 14px !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 12px !important;
  color: #E8E8EC !important;
}
#searchInput:focus {
  border-color: rgba(159,108,247,.3) !important;
  box-shadow: 0 0 0 3px rgba(159,108,247,.06) !important;
}
#searchInput::placeholder { color: #4A4A54 !important; }

/* Filter chips → pills */
.filter-chip, .filter-row button {
  border-radius: 100px !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 4px 12px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  background: transparent !important;
  color: #4A4A54 !important;
  cursor: pointer !important;
  transition: all .15s !important;
}
.filter-chip:hover { color: #7C7C86 !important; border-color: rgba(255,255,255,.1) !important; }
.filter-chip.active {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #E8E8EC !important;
}
.btn-secondary, .toolbar-actions .btn {
  border-radius: 100px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: transparent !important;
  color: #7C7C86 !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 11px !important;
  padding: 4px 14px !important;
}
.btn-secondary:hover { color: #E8E8EC !important; border-color: rgba(255,255,255,.14) !important; }

/* ── KPI Cards — compact strip ── */
.kpi-grid {
  display: flex !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  background: rgba(8,8,11,.97) !important;
}
.kpi-card, .kpi-card.glass {
  flex: 1 !important;
  padding: 10px 16px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  border-right: 1px solid rgba(255,255,255,.04) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.kpi-card:last-child { border-right: none !important; }
.kpi-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: #4A4A54 !important;
  margin-bottom: 4px !important;
}
.kpi-value {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  letter-spacing: -.02em !important;
  color: #E8E8EC !important;
  line-height: 1 !important;
}
/* Status-colored KPIs */
.kpi-value.has-issues { color: #E84545 !important; text-shadow: 0 0 20px rgba(232,69,69,.3) !important; }

/* ── Trailer Board ── */
.board, .board.glass {
  background: rgba(8,8,11,.97) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  flex: 1 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.board-header {
  padding: 10px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.board-title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: #4A4A54 !important;
}
.board-subtitle {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  color: #7C7C86 !important;
}
.table-wrap { flex: 1 !important; overflow-y: auto !important; }

/* Table styling */
.trailer-table { width: 100% !important; border-collapse: collapse !important; }
.trailer-table th {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: #4A4A54 !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  text-align: left !important;
  background: rgba(13,13,17,.6) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}
.trailer-table td {
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.025) !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 12px !important;
  color: #E8E8EC !important;
  vertical-align: middle !important;
}
.trailer-table tr { transition: background .1s !important; cursor: pointer !important; }
.trailer-table tr:hover { background: rgba(255,255,255,.02) !important; }
.trailer-table .trailer-num {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: #E8E8EC !important;
}
.trailer-table .cell-muted {
  color: #4A4A54 !important;
  font-size: 11px !important;
}

/* ── Status badges — vibrant ── */
.status-pill, [class*="badge-"], [class*="sp-"] {
  border-radius: 100px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 9px !important;
  height: auto !important;
}

/* Loading/Unloading — cyan */
.sp-loading, .sp-unloading, .badge-loading, .badge-unloading, .badge-loading_complete {
  color: #00D4FF !important;
  background: rgba(0,194,240,.1) !important;
  border-color: rgba(0,194,240,.25) !important;
  box-shadow: 0 0 8px rgba(0,194,240,.08) !important;
}
/* Ready — teal */
.sp-ready, .badge-ready, .badge-dispatched {
  color: #2DD4A8 !important;
  background: rgba(45,212,168,.1) !important;
  border-color: rgba(45,212,168,.25) !important;
  box-shadow: 0 0 8px rgba(45,212,168,.08) !important;
}
/* Delayed/Issue — red (functional red stays) */
.sp-delayed, .badge-delayed, .badge-issue, .sp-no_show, .badge-no_show {
  color: #FF4D6A !important;
  background: rgba(255,77,106,.08) !important;
  border-color: rgba(255,77,106,.2) !important;
  box-shadow: 0 0 8px rgba(255,77,106,.1) !important;
}
/* At door/Arrived/Assigned — amber */
.sp-at_door, .sp-arrived, .badge-at_door, .badge-arrived, .badge-assigned {
  color: #FFB020 !important;
  background: rgba(255,176,32,.08) !important;
  border-color: rgba(255,176,32,.18) !important;
  box-shadow: 0 0 8px rgba(255,176,32,.06) !important;
}
/* Inbound — cyan */
.sp-inbound, .sp-scheduled, .badge-inbound, .badge-scheduled {
  color: #00D4FF !important;
  background: rgba(0,194,240,.08) !important;
  border-color: rgba(0,194,240,.18) !important;
}
/* Crossdock — purple */
.sp-crossdock, .badge-crossdock {
  color: #B88AFF !important;
  background: rgba(159,108,247,.08) !important;
  border-color: rgba(159,108,247,.18) !important;
}
/* Outbound/Completed — neutral */
.sp-outbound, .sp-completed, .sp-cancelled, .badge-outbound, .badge-completed, .badge-dropped {
  color: #7C7C86 !important;
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.08) !important;
}
/* Yard/Waiting — gray */
.sp-yard, .badge-yard, .badge-waiting {
  color: #7C7C86 !important;
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.06) !important;
}

/* ── Row status borders (left edge color) ── */
.trailer-table tr[data-status="DELAYED"] td:first-child,
.trailer-table tr[data-status="delayed"] td:first-child,
.trailer-table tr.status-delayed td:first-child { box-shadow: inset 3px 0 0 #E84545 !important; }
.trailer-table tr[data-status="LOADING"] td:first-child,
.trailer-table tr[data-status="loading"] td:first-child { box-shadow: inset 3px 0 0 #00C2F0 !important; }
.trailer-table tr[data-status="READY"] td:first-child,
.trailer-table tr[data-status="ready"] td:first-child { box-shadow: inset 3px 0 0 #2DD4A8 !important; }
.trailer-table tr[data-status="INBOUND"] td:first-child,
.trailer-table tr[data-status="inbound"] td:first-child { box-shadow: inset 3px 0 0 #00C2F0 !important; }
.trailer-table tr[data-status="AT_DOOR"] td:first-child,
.trailer-table tr[data-status="at_door"] td:first-child { box-shadow: inset 3px 0 0 #E5A011 !important; }

/* ── Side panel / drawer ── */
.side-column, aside.side-column {
  background: rgba(8,8,11,.97) !important;
  border-left: 1px solid rgba(255,255,255,.06) !important;
}
.panel, .panel.glass {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
}
.panel-head {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
  padding: 12px 16px !important;
}
.drawer-empty {
  padding: 40px 20px !important;
  text-align: center !important;
}
.drawer-empty-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #7C7C86 !important;
  margin-bottom: 6px !important;
}
.drawer-empty-sub {
  font-size: 12px !important;
  color: #4A4A54 !important;
}
.eyebrow {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8px !important;
  color: #4A4A54 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
}
.detail-grid {
  background: rgba(255,255,255,.02) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin: 12px 16px !important;
}
.detail-item {
  background: transparent !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
}
.detail-item span { color: #4A4A54 !important; font-size: 10px !important; }
.detail-item strong { color: #E8E8EC !important; font-family: 'JetBrains Mono', monospace !important; font-size: 12px !important; }

/* Action buttons in drawer */
.action-grid { gap: 6px !important; }
.action-grid .btn, .action-status {
  border-radius: 100px !important;
  font-size: 10px !important;
  padding: 4px 10px !important;
}

/* ── Mini chat ── */
.mini-chat-panel {
  border-top: 1px solid rgba(255,255,255,.06) !important;
}
.mini-chat-header {
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}

/* ── Detention counter — stays functional red ── */
.det-counter {
  border-radius: 100px !important;
}

/* ── Weather strip ── */
/* Let weather-strip.js handle it, just make sure text is visible */

/* ── NL Search ── */
.nl-search-input {
  border-radius: 100px !important;
  font-family: 'Figtree', sans-serif !important;
}
.nl-search-input:focus {
  border-color: rgba(159,108,247,.3) !important;
}

/* ── Modal ── */
.modal-card {
  background: rgba(13,13,17,.98) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
}

/* ── Scrollbar ── */
.table-wrap::-webkit-scrollbar, .board-scroll::-webkit-scrollbar { width: 4px !important; }
.table-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.06) !important; border-radius: 2px !important; }

/* ── Selection ── */
::selection { background: rgba(159,108,247,.15) !important; }

/* ── Toast ── */
.toast { border-radius: 100px !important; font-family: 'Figtree', sans-serif !important; }

/* ── Tab content backgrounds ── */
.tab-panel { background: rgba(3,3,5,.98) !important; }

/* ── Appointments tab ── */
.apt-layout { background: transparent !important; }
.apt-cal-col { border-right-color: rgba(255,255,255,.06) !important; }
.cal-cell { border-color: rgba(255,255,255,.03) !important; }
.cal-cell.today { border-color: rgba(159,108,247,.3) !important; }

/* ── Drivers tab ── */
.method-card {
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 10px !important;
}

/* ── Shipments tab ── */
.shp-table th {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: #4A4A54 !important;
}


/* ═══ KPI-COLOR-POP ═══ */

/* Inbound KPI — cyan */
#kpiInbound { color: #00C2F0 !important; text-shadow: 0 0 20px rgba(0,194,240,.25) !important; }

/* Outbound KPI — teal */
#kpiOutbound { color: #2DD4A8 !important; text-shadow: 0 0 20px rgba(45,212,168,.25) !important; }

/* Ready KPI — green glow */
#kpiReady { color: #2DD4A8 !important; text-shadow: 0 0 20px rgba(45,212,168,.3) !important; }

/* Issues KPI — red glow (functional) */
#kpiIssue, .kpi-value.has-issues { 
  color: #FF4D6A !important; 
  text-shadow: 0 0 24px rgba(255,77,106,.35) !important; 
}

/* Active trailers — stays white but bigger */
#kpiActive { color: #E8E8EC !important; }

/* KPI card subtle bottom glow on hover */
.kpi-card:hover {
  background: rgba(255,255,255,.02) !important;
}

/* ── Trailer number in table — bolder ── */
.trailer-table .trailer-num {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}

/* ── Carrier name — slightly brighter ── */
.trailer-table td:nth-child(5) {
  color: #B0B0BE !important;
}

/* ── Dwell time — color by severity ── */
/* (app.js adds dwell-ok, dwell-warn, dwell-breach classes) */
.dwell-ok { color: #7C7C86 !important; }
.dwell-warn { color: #E5A011 !important; text-shadow: 0 0 8px rgba(229,160,17,.15) !important; }
.dwell-breach { color: #FF4D6A !important; text-shadow: 0 0 8px rgba(255,77,106,.2) !important; }

/* ── Board count — mono, subtle ── */
.board-subtitle, #boardCount {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  color: #7C7C86 !important;
}

/* ── Weather strip fix — ensure text visible ── */
[class*="weather"], .weather-strip {
  color: #E8E8EC !important;
}

/* ── "All" filter when active — white bg pill ── */
.filter-chip.active[data-filter="ALL"] {
  background: rgba(255,255,255,.08) !important;
  color: #E8E8EC !important;
}

/* ── Direction column — colored ── */
.trailer-table td:nth-child(3) .badge-inbound,
.trailer-table td:nth-child(3) .sp-inbound {
  color: #00D4FF !important;
  background: rgba(0,212,255,.08) !important;
  border-color: rgba(0,212,255,.2) !important;
}

/* ── Door column — mono ── */
.trailer-table td:nth-child(4) {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* ── Sub-tab badge glow ── */
.dtab-badge-red { box-shadow: 0 0 8px rgba(232,69,69,.2) !important; }
.dtab-badge-blue { box-shadow: 0 0 8px rgba(0,194,240,.15) !important; }
.dtab-badge-grn { box-shadow: 0 0 8px rgba(45,212,168,.15) !important; }

/* ── Detention counter glow ── */
.det-counter {
  box-shadow: 0 0 12px rgba(232,69,69,.08) !important;
}
.det-counter-value {
  font-weight: 600 !important;
}

/* ── Side panel "No trailer selected" — warmer ── */
.drawer-empty-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #7C7C86 !important;
}

/* ── Hover row — subtle status tint ── */
.trailer-table tr:hover {
  background: rgba(255,255,255,.025) !important;
}

/* ── Chat button — purple instead of red ── */
.omnis-chat-fab, [class*="chat-fab"], .chat-toggle {
  background: #9F6CF7 !important;
  box-shadow: 0 4px 16px rgba(159,108,247,.3) !important;
}