:root {
  --d5-ats:        #d4812a;
  --d5-ats-dim:    #8a4f12;
  --d5-ets:        #5b9ec9;
  --d5-ets-dim:    #3a6f92;
  --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:       'Michroma', 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;
}

/* ── Card shell ── */
.card.text-white {
  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,.4), inset 0 1px 0 rgba(255,255,255,.05) !important;
  overflow: hidden !important;
  color: var(--d5-text) !important;
}

/* ── Card header — ATS (first card) ── */
.ats-card {
  border-top: 3px solid var(--d5-ats) !important;
}

/* ── Card header — ETS2 (second card) ── */
.ets-card {
  border-top: 3px solid var(--d5-ets) !important;
}

.card-header {
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--d5-border) !important;
  background: rgba(0,0,0,.2) !important;
  font-family: var(--d5-tech) !important;
  font-size: .72rem !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--d5-chrome-dim) !important;
}

.card-body {
  background: transparent !important;
  padding: 0 !important;
}

/* ── DataTable wrapper ── */
.dark-themed-widget { background: transparent !important; }

/* ── Table ── */
.table-exp {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--d5-mono) !important;
  font-size: .7rem !important;
  color: var(--d5-text) !important;
}

/* ── Override the light grey thead ── */
.table-exp thead tr th {
  background: rgba(0,0,0,.2) !important;
  color: var(--d5-chrome-dim) !important;
  font-family: var(--d5-mono) !important;
  font-size: .52rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: normal !important;
  border: none !important;
  border-bottom: 1px solid var(--d5-border) !important;
  padding: 9px 10px !important;
  border-radius: 0px !important;
}

/* ── Table rows ── */
.table-exp tbody tr {
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
  transition: background .1s;
}

.table-exp tbody tr:hover {
  background: rgba(255,255,255,.025) !important;
}

.table-exp tbody tr:nth-of-type(odd) {
  background: rgba(255,255,255,.01) !important;
}

.table-exp tbody td {
  color: var(--d5-text) !important;
  padding: 2px 5px !important;
  border: none !important;
  font-family: var(--d5-mono) !important;
  font-size: .7rem !important;
  vertical-align: middle !important;
}

/* Fine/violation text colour */
.table-exp tbody td font[style*="BF8888"] {
  color: #e05555 !important;
}

/* ── DataTables controls (search, pagination) ── */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  font-family: var(--d5-mono) !important;
  font-size: .62rem !important;
  color: var(--d5-text-muted) !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--d5-border) !important;
  color: var(--d5-text) !important;
  border-radius: 3px !important;
  font-family: var(--d5-mono) !important;
  font-size: .62rem !important;
  padding: 3px 8px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  font-family: var(--d5-mono) !important;
  font-size: .6rem !important;
  color: var(--d5-text-muted) !important;
  border: 1px solid var(--d5-border) !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,.03) !important;
  padding: 3px 8px !important;
  margin: 0 2px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(212,129,42,.08) !important;
  border-color: rgba(212,129,42,.4) !important;
  color: var(--d5-ats) !important;
}

/* ── Info icon ── */
.fa-circle-info[style*="BF8888"] { color: var(--d5-ats) !important; cursor: pointer; }

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