/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400;500&family=Outfit:wght@300;400;500;600&display=swap');

/* ── CSS Variables ────────────────────────────────────────────────────────── */
:root {
  --bg:        #0a0c12;
  --paper:     #13161f;
  --surface:   #1c202e;
  --border:    #2a2d3e;
  --text:      #e8eaf0;
  --subtext:   #6b7080;
  --accent:    #e8722a;
  --accent-dim: rgba(232, 114, 42, 0.15);
  --blue:      #4ea8de;
  --font-brand: 'Bebas Neue', sans-serif;
  --font-mono:  'DM Mono', monospace;
  --font-ui:    'Outfit', sans-serif;
}

/* ── Global reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-ui) !important;
  margin: 0;
}

/* ── Dash Dropdown fix (the black-on-dark problem) ────────────────────────── */
.Select-control,
.Select-menu-outer,
.Select--single > .Select-control,
.VirtualizedSelectOption,
.VirtualizedSelectFocusedOption {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.Select-value-label,
.Select-placeholder,
.Select-input input {
  color: var(--text) !important;
  font-family: var(--font-ui) !important;
}

.Select-option {
  background-color: var(--surface) !important;
  color: var(--text) !important;
}

.Select-option:hover,
.Select-option.is-focused {
  background-color: var(--accent-dim) !important;
  color: var(--text) !important;
}

.Select-option.is-selected {
  background-color: var(--accent) !important;
  color: #fff !important;
}

.Select-arrow {
  border-color: var(--subtext) transparent transparent !important;
}

.Select.is-open .Select-arrow {
  border-color: transparent transparent var(--subtext) !important;
}

/* Dash 2.x dropdown */
.dash-dropdown .dropdown .Select-control {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

/* ── DatePickerRange ──────────────────────────────────────────────────────── */
.DateInput_input {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-bottom-color: var(--border) !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
}

.DateRangePickerInput {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

.DateRangePickerInput_arrow_svg { fill: var(--subtext) !important; }

.CalendarDay__default {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.CalendarDay__selected,
.CalendarDay__selected:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

.CalendarDay__selected_span {
  background: var(--accent-dim) !important;
  color: var(--text) !important;
}

.DayPicker,
.DayPicker__withBorder,
.CalendarMonthGrid,
.CalendarMonth {
  background: var(--paper) !important;
}

.CalendarMonth_caption { color: var(--text) !important; }
.DayPickerNavigation_button { border-color: var(--border) !important; }
.DayPickerNavigation_svg__horizontal { fill: var(--text) !important; }
.DayOfWeek { color: var(--subtext) !important; }

/* ── Date picker width fix ────────────────────────────────────────────────── */
.DateInput {
  width: 110px !important;
}

.DateInput_input {
  font-size: 13px !important;
  padding: 6px 8px !important;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.custom-tabs .tab--selected {
  border-top: 2px solid var(--accent) !important;
}

/* ── Inputs ───────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="number"] {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  font-family: var(--font-ui) !important;
  outline: none !important;
  transition: border-color 0.2s;
}

input[type="text"]:focus,
input[type="number"]:focus {
  border-color: var(--accent) !important;
}

input::placeholder { color: var(--subtext) !important; }

/* ── Checklist ────────────────────────────────────────────────────────────── */
.dash-checklist label {
  color: var(--text) !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
}

/* ── AG Grid dark theme tweaks ────────────────────────────────────────────── */
.ag-theme-alpine-dark {
  --ag-background-color: var(--surface) !important;
  --ag-header-background-color: var(--paper) !important;
  --ag-odd-row-background-color: #161923 !important;
  --ag-border-color: var(--border) !important;
  --ag-foreground-color: var(--text) !important;
  --ag-header-foreground-color: var(--subtext) !important;
  font-family: var(--font-ui) !important;
}

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--subtext); }

/* ── Brand header ─────────────────────────────────────────────────────────── */
.tm26-brand {
  font-family: var(--font-brand);
  font-size: 48px;
  color: var(--accent);
  letter-spacing: 4px;
  line-height: 1;
  margin: 0;
}

.tm26-tagline {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--subtext);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 4px 0 0 2px;
}

/* ── Card panels ──────────────────────────────────────────────────────────── */
.tm26-card {
  background-color: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}

.tm26-card:hover {
  border-color: #3a3d4e;
  transition: border-color 0.2s;
}

/* ── Section labels ───────────────────────────────────────────────────────── */
.tm26-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--subtext);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

/* ── Chip / card badge ────────────────────────────────────────────────────── */
.tm26-chip {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 12px;
  font-family: var(--font-ui);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.2s;
}

.tm26-chip:hover { border-color: var(--accent); }

.tm26-chip-remove {
  cursor: pointer;
  color: var(--subtext);
  font-size: 14px;
  line-height: 1;
  transition: color 0.15s;
}

.tm26-chip-remove:hover { color: var(--accent); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.tm26-btn {
  background-color: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 9px 22px !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  letter-spacing: 0.5px;
  transition: background-color 0.2s, transform 0.1s;
  white-space: nowrap;
}

.tm26-btn:hover { background-color: #d4651f !important; }
.tm26-btn:active { transform: scale(0.98); }

/* ── Stat boxes (for future use) ──────────────────────────────────────────── */
.tm26-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 16px;
  font-family: var(--font-mono);
}

.tm26-stat-value {
  font-size: 22px;
  color: var(--text);
  font-weight: 500;
}

.tm26-stat-label {
  font-size: 10px;
  color: var(--subtext);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 2px;
}

/* ── Plotly chart container ───────────────────────────────────────────────── */
.js-plotly-plot .plotly .main-svg {
  border-radius: 6px;
}

/* ── No-data message ──────────────────────────────────────────────────────── */
.tm26-empty {
  color: var(--subtext);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 16px 0;
}