/* BlackTMS Preview — Vivid 8K Theme Override
   Loaded after each dashboard's inline styles to elevate color depth. */

:root {
  --bg:       #ccdaf4;
  --surface:  #ffffff;
  --surface2: #e8f0fc;
  --border:   rgba(18,54,200,.22);
  --text:     #03091f;
  --text2:    #162e68;
  --text3:    #3d5c9a;
  --accent:   #1540cc;
  --accent2:  rgba(21,64,204,.13);
  --good:     #027a40;
  --good-bg:  rgba(2,122,64,.14);
  --warn:     #c06400;
  --warn-bg:  rgba(192,100,0,.14);
  --bad:      #c41420;
  --bad-bg:   rgba(196,20,32,.14);
  --shadow-sm: 0 2px 8px rgba(6,20,90,.12);
  --shadow:    0 6px 28px rgba(6,20,90,.18);
}

/* ── Richer card surfaces ── */
.kpi-card,
.chart-card,
.action-card,
.pop-card,
.pl-card {
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(6,20,90,.10);
}

.kpi-card:hover,
.chart-card:hover {
  box-shadow: 0 8px 32px rgba(6,20,90,.18) !important;
}

/* ── Headline KPI — vivid blue left bar ── */
.kpi-card.is-headline::before { background: #1540cc; }
.kpi-card.is-good::before     { background: #027a40; }
.kpi-card.is-warn::before     { background: #c06400; }
.kpi-card.is-bad::before      { background: #c41420; }

/* ── KPI value typography — bigger, bolder ── */
.kpi-value {
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
}

/* ── Section label — stronger accent line ── */
.section-label {
  color: var(--text3) !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
}

/* ── Tab strip — richer active state ── */
.tab-btn.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
  font-weight: 700 !important;
}

/* ── Topbar — crisper bottom border ── */
.topbar {
  border-bottom: 2px solid var(--border) !important;
  background: rgba(255,255,255,.99) !important;
}

/* ── Table — richer header ── */
th {
  background: rgba(21,64,204,.07) !important;
  color: var(--text2) !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
}

tr:hover td {
  background: rgba(21,64,204,.05) !important;
}

/* ── Badges — more saturated ── */
.badge.good,
.kpi-delta.up,
.pop-chip.up,
.health-pill.good { background: rgba(2,122,64,.14) !important; color: #027a40 !important; }

.badge.warn,
.kpi-delta.warn,
.health-pill.warn { background: rgba(192,100,0,.14) !important; color: #c06400 !important; }

.badge.bad,
.kpi-delta.dn,
.pop-chip.dn,
.health-pill.bad  { background: rgba(196,20,32,.14) !important; color: #c41420 !important; }

.badge.neutral,
.kpi-delta.flat   { background: rgba(21,64,204,.10) !important; color: #1540cc !important; }

/* ── Action bar fills ── */
.action-bar-fill.good { background: #027a40 !important; }
.action-bar-fill.warn { background: #c06400 !important; }
.action-bar-fill.bad  { background: #c41420 !important; }
.action-bar-fill      { background: #1540cc; }

/* ── P&L amounts ── */
.pl-amount.good { color: #027a40 !important; }
.pl-amount.bad  { color: #c41420 !important; }
.pl-amount.warn { color: #c06400 !important; }

/* ── Fleet KPI grid ── */
.kpi-card .kpi-value.good { color: #027a40 !important; }
.kpi-card .kpi-value.warn { color: #c06400 !important; }
.kpi-card .kpi-value.bad  { color: #c41420 !important; }

/* ── Freshness dot ── */
.freshness { background: #027a40 !important; }

/* ── Active tab button (pill style used in billing-ar / lanes / carrier-sales) ── */
.tab-btn.active { background: var(--accent) !important; color: #fff !important; }

/* ── Tabs nav pill-style container ── */
.tabs-nav {
  background: rgba(21,64,204,.07) !important;
  border-color: rgba(21,64,204,.2) !important;
}

/* ── Card body surface (pl-card, action-card etc) ── */
.pl-card,
.action-card,
.pop-card {
  border-color: rgba(18,54,200,.18) !important;
}

/* ── Chart card ── */
.chart-card {
  border-color: rgba(18,54,200,.18) !important;
}

/* ── Brand tagline — sits under "BlackIO" in every topbar ── */
.tb-brand-wrap { display: flex; flex-direction: column; line-height: 1.15; }
.tb-tagline {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text3);
  margin-top: 1px;
}