/* =========================================================
   Preflight — portfolio-matched dark theme
   ========================================================= */

/* ── Palette ─────────────────────────────────────────────── */
:root {
  --bg:        #080808;
  --surface:   #111111;
  --border:    #1e1e1e;
  --accent:    #3b82f6;
  --accent-dim: rgba(59,130,246,.12);
  --text:      #f0f0f0;
  --muted:     #6b7280;
}

/* ── Base ─────────────────────────────────────────────────── */
html, body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 15px;
  line-height: 1.6;

  /* dot grid — matches portfolio */
  background-image:
    radial-gradient(circle at 60% 10%, rgba(59,130,246,.08) 0%, transparent 55%),
    radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px) !important;
  background-size: 100% 100%, 28px 28px !important;
}

/* ── Container ───────────────────────────────────────────── */
.container-fluid {
  max-width: 1200px;
  margin: 0 auto;
  background: transparent !important;
}

/* ── Nav ─────────────────────────────────────────────────── */
.pf-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}

.pf-logo {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text) !important;
  text-decoration: none !important;
}

.pf-nav-links {
  display: flex;
  gap: 28px;
}
.pf-nav-links a {
  color: var(--muted) !important;
  text-decoration: none !important;
  font-size: 13.5px;
  letter-spacing: .02em;
  transition: color .2s;
}
.pf-nav-links a:hover {
  color: var(--text) !important;
}

/* ── Hero ─────────────────────────────────────────────────── */
.pf-hero {
  padding: 18px 0 26px;
}
.pf-hero-title {
  font-size: clamp(30px, 6vw, 46px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em !important;
  color: transparent !important;
  background: linear-gradient(135deg, #f0f0f0 28%, #3b82f6 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.pf-hero-sub {
  color: var(--muted) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin-top: 8px;
}

/* ── HR ──────────────────────────────────────────────────── */
hr {
  border-color: var(--border) !important;
  opacity: 1 !important;
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
}
.card-body {
  background: var(--surface) !important;
}

/* ── Tabs ────────────────────────────────────────────────── */
.tab {
  background-color: var(--surface) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  transition: color .2s !important;
}
.tab:hover {
  color: var(--text) !important;
}
.tab--selected {
  background-color: var(--accent-dim) !important;
  color: var(--accent) !important;
  border-bottom: 2px solid var(--accent) !important;
  font-weight: 600 !important;
}
.tab-content {
  border: 1px solid var(--border) !important;
  border-top: none !important;
  background: transparent !important;
}

/* ── Buttons ─────────────────────────────────────────────── */
/* General app buttons — exclude DataTable pagination controls */
button:not(.dash-table-container button) {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 6px 18px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: opacity .2s !important;
}
button:not(.dash-table-container button):hover {
  opacity: .85 !important;
}
button:not(.dash-table-container button):disabled {
  opacity: .5 !important;
  cursor: default !important;
}

/* ── Inputs ──────────────────────────────────────────────── */
input:not([type="range"]),
textarea {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}

/* ── Labels ──────────────────────────────────────────────── */
label {
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

/* ── Checkboxes ──────────────────────────────────────────── */
.form-check-label {
  color: var(--text) !important;
  font-size: 13.5px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
}

/* ── Dropdowns (dcc.Dropdown — react-select v1) ──────────── */
.Select-control,
.Select-menu-outer,
.Select-option {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.Select-option.is-focused {
  background-color: var(--accent-dim) !important;
}
.Select-value-label {
  color: var(--text) !important;
}
.Select-placeholder {
  color: var(--muted) !important;
}

/* ── Upload zone ─────────────────────────────────────────── */
#upload-data {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  border-radius: 12px !important;
  color: var(--muted) !important;
  transition: border-color .2s, box-shadow .2s;
}
#upload-data:hover {
  border-color: rgba(59,130,246,.45) !important;
  box-shadow: 0 0 0 3px var(--accent-dim);
}
#upload-data a {
  color: var(--accent) !important;
}

/* ── Range sliders ───────────────────────────────────────── */
.rc-slider-track { background-color: var(--accent) !important; }
.rc-slider-handle {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
}
.rc-slider-rail { background-color: var(--border) !important; }

/* ── Alerts ──────────────────────────────────────────────── */
.alert {
  border-radius: 10px !important;
  font-size: 13.5px !important;
}

/* ── DataTable: base cells ───────────────────────────────── */
.dash-table-container .dash-spreadsheet-container {
  background-color: var(--surface) !important;
}
.dash-table-container .dash-spreadsheet-inner td,
.dash-table-container .dash-spreadsheet-inner th {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.dash-table-container .dash-spreadsheet-inner th {
  font-weight: 600;
  letter-spacing: .04em;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted) !important;
}
.dash-table-container .dash-spreadsheet-inner td.focused,
.dash-table-container .dash-spreadsheet-inner td.cell--selected {
  background-color: var(--accent-dim) !important;
}

/* ── DataTable: pagination ───────────────────────────────── */
.dash-table-container .previous-next-container,
.dash-table-container .previous-next-container * {
  color: #ffffff !important;
}
.dash-table-container .previous-next-container button {
  color: #ffffff !important;
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
}
.dash-table-container .previous-next-container button:disabled {
  opacity: 0.45 !important;
}
.dash-table-container .previous-next-container input,
.dash-table-container .previous-next-container input:not(:focus),
.dash-table-container .previous-next-container input:focus {
  color: #ffffff !important;
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  -webkit-text-fill-color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 4px !important;
}
.dash-table-container .previous-next-container .current-page,
.dash-table-container .previous-next-container .page-number {
  color: #ffffff !important;
}
.dash-table-container .previous-next-container svg {
  fill: #ffffff !important;
}

/* ── DataTable: inline dropdown (typing table) ───────────── */
.dash-spreadsheet-container .Select-control {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}
.dash-spreadsheet-container .Select-value-label {
  color: var(--text) !important;
}
.dash-spreadsheet-container .Select-menu-outer * {
  color: var(--text) !important;
  background-color: var(--surface) !important;
}