@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;600;700&family=Share+Tech+Mono&family=Rajdhani:wght@400;600;700&display=swap');

:root {
  --d5-ats:        #d4812a;
  --d5-ats-dim:    #8a4f12;
  --d5-dark:       #0d0d0e;
  --d5-mid:        #161718;
  --d5-light:      #1e2022;
  --d5-chrome:     #c8d8e0;
  --d5-chrome-dim: #8fa4ae;
  --d5-border:     rgba(200,216,224,.08);
  --d5-text:       #dce8ed;
  --d5-text-dim:   #7a9aaa;
  --d5-text-muted: #3a4a52;
  --d5-tech:       'Oxanium', sans-serif;
  --d5-mono:       'Share Tech Mono', monospace;
  --d5-disp:       'Rajdhani', sans-serif;
}

/* Page wrapper */
.d5-page {
  color: var(--d5-text);
  font-family: var(--d5-disp);
  padding: 20px 24px 40px;
  min-height: 100vh;
}


/* ── Section header ── */
.d-flex.align-items-center h4 {
  font-family: var(--d5-tech) !important;
  font-size: .8rem !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--d5-text-muted) !important;
  margin: 0 !important;
}

.d-flex.align-items-center hr {
  border-color: var(--d5-border) !important;
  opacity: 1 !important;
}

/* ── Truck stat card ── */
.truck-stat-card {
  background: linear-gradient(160deg, var(--d5-light), var(--d5-mid)) !important;
  border: 1px solid var(--d5-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05) !important;
  overflow: hidden;
}

/* ── ATS header stripe ── */
.tsc-header {
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--d5-border) !important;
  background: rgba(0,0,0,.2) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.tsc-header h5 {
  font-family: var(--d5-tech) !important;
  font-size: .72rem !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--d5-chrome) !important;
  margin: 0 !important;
}

.ats-header {
  border-top: 3px solid var(--d5-ats) !important;
  box-shadow: 0 0 12px rgba(212,129,42,.15) inset !important;
}

/* ── Truck image ── */
.truck-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-bottom: 1px solid var(--d5-border) !important;
}

.tsc-body { background: transparent !important; }

/* ── Stat rows ── */
.tsc-stats {
  border-top: 1px solid var(--d5-border) !important;
}

.tsc-stat-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
  transition: background .12s;
}

.tsc-stat-row:hover { background: rgba(255,255,255,.02) !important; }

.tsc-stat-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: .8rem !important;
}

.tsc-stat-label {
  font-family: var(--d5-mono) !important;
  font-size: .52rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--d5-text-muted) !important;
}

.tsc-stat-value {
  font-family: var(--d5-tech) !important;
  font-size: .82rem !important;
  color: var(--d5-chrome) !important;
}

.tsc-stat-sub {
  font-family: var(--d5-mono) !important;
  font-size: .58rem !important;
  color: var(--d5-text-muted) !important;
  margin-left: auto !important;
}

/* ── Heaviest load row ── */
.tsc-heavy-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
}

.tsc-heavy-label {
  font-family: var(--d5-mono) !important;
  font-size: .52rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--d5-text-muted) !important;
}

.tsc-heavy-value {
  font-family: var(--d5-tech) !important;
  font-size: .78rem !important;
}

.tsc-heavy-weight { margin-left: auto !important; text-align: right !important; }

.tsc-heavy-wval {
  font-family: var(--d5-tech) !important;
  font-size: .9rem !important;
  line-height: 1 !important;
}

.tsc-heavy-wlbl {
  font-family: var(--d5-mono) !important;
  font-size: .54rem !important;
  color: var(--d5-text-muted) !important;
}

/* ── Divider ── */
.truck-stat-card hr {
  border-color: rgba(212,129,42,.2) !important;
  opacity: 1 !important;
  margin: 8px 10px !important;
}

/* ── Damage section ── */
#extra-<?= $truckPlate ?> .d-flex.align-items-center span {
  font-family: var(--d5-mono) !important;
  font-size: .58rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--d5-text-muted) !important;
}

strong[style*="font-size: 0.8em"] {
  font-family: var(--d5-mono) !important;
  font-size: .58rem !important;
  color: var(--d5-text-dim) !important;
  font-weight: normal !important;
}

.progress {
  background: rgba(255,255,255,.06) !important;
  border-radius: 3px !important;
  height: 6px !important;
}

.bg-damage {
  background: linear-gradient(90deg, var(--d5-ats-dim), var(--d5-ats)) !important;
  box-shadow: 0 0 6px rgba(212,129,42,.4) !important;
}

/* ── Stats boxes ── */
.stats-box {
  background: linear-gradient(160deg, var(--d5-light), var(--d5-mid)) !important;
  border: 1px solid var(--d5-border) !important;
  border-radius: 6px !important;
  padding: 10px 8px !important;
  text-align: center !important;
  font-family: var(--d5-tech) !important;
  font-size: .82rem !important;
  color: var(--d5-chrome) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
  position: relative;
  overflow: hidden;
  transition: transform .15s;
}

.stats-box:hover { transform: translateY(-1px); }

.stats-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}

.stats-box.blue::before   { background: linear-gradient(90deg, transparent, var(--d5-ats), transparent); }
.stats-box.green::before  { background: linear-gradient(90deg, transparent, #4cad7a, transparent); }
.stats-box.yellow::before { background: linear-gradient(90deg, transparent, var(--d5-ats), transparent); }
.stats-box.red::before    { background: linear-gradient(90deg, transparent, #e05555, transparent); }

.stats-box small {
  font-family: var(--d5-mono) !important;
  font-size: .5rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--d5-text-muted) !important;
  display: block !important;
  margin-top: 2px !important;
}

/* Sold badge */
.badge.bg-secondary {
  background: rgba(255,255,255,.08) !important;
  font-family: var(--d5-mono) !important;
  font-size: .52rem !important;
  letter-spacing: .08em !important;
  color: var(--d5-text-muted) !important;
}

abbr.timeago { color: var(--d5-ats) !important; font-style: normal !important; text-decoration: none !important; }

.text-light { color: var(--d5-text) !important; }