/* ============================================================================
   ApparelMetrics Configurator — Dark Theme Override (theme.css)
   Loaded LAST (after each page's inline <style>) so it wins on source order.
   !important is used because the per-page rules live in inline <style> blocks
   that are often more specific than a shared override would be.

   ── PHASE 2 PLAN (audit → fix mapping) ──────────────────────────────────────
   Confirmed scope: full dark conversion of all 16 sub-pages + batch_pricing.html.
   index.html is already dark and does NOT load this file. No white surfaces kept.

   Tokens (exact, per brief):
     --bg #0f1117  --panel #1e2332  --panel-alt #252d3d
     --text-primary #ffffff  --text-secondary #c8cad4  --text-muted #8b92a8
     --border rgba(255,255,255,0.10)  --input-bg rgba(255,255,255,0.07)
     --input-text #ffffff  --accent #4f8ef7

   Audit FAIL/WARN → fix:
     - body #fff/#111 (inverts dark-on-dark)      → --bg / --text-secondary
     - all cards/blocks/headers #fff               → --panel ; sub-surfaces --panel-alt
     - inputs/selects/textarea #fff                → --input-bg / --input-text
     - table th/td #fafaf8/#fff, alt rows          → --panel-alt / --border
     - label/meta/note/unit/hint/desc #888/#999    → --text-secondary (min)
     - faint #aaa/#ccc/#bbb (na-cell, placeholders)→ --text-muted (still legible)
     - ghost inputs (.dept-label/.team-name/.team-id-input)
                                                    → --input-bg, b-bottom 0.20 white, --text-primary
     - active tabs/buttons (#111;#fff)             → --accent ; #fff text
     - native checkboxes                           → accent-color --accent
     - disabled inputs (#f5f5f5/#aaa)              → bg .04 white / --text-muted / border .06 white
     - step/stage numbers (#111 circle)           → default --text-secondary, done #4ade80, locked --text-muted

   LEFT ALONE (NOT selected here, or re-asserted to stay identical):
     - semantic badges/status (.badge.*, .status-*, .method-badge)
     - worker/workstep identity chips (.chip.w1–.w4 / .badge.w001–.w004 / .chip.ws / base .chip)
     - validation tints (.cat-select.row-pending/.row-done, .dept-cell input.cap-empty/.cap-filled,
       .labour-cell input / .labour-cell input.cap-empty / .labour-cell input.cap-filled,
       .recon-ok/.recon-warn/.recon-pending) — re-asserted !important where a broad rule would hit them
     - save/status messages (.msg.error/.success/.warn, inline save-msg colours)
     - labour_rates tier-card LEFT BORDER state colour (red/green/grey) — never set border-left
     - batch_pricing purple accent (.save-footer*, .layer-btn.active, .version-badge, .btn-preset.purple-active)
     - blue/green/red/amber semantic fills + text everywhere
     - the inline-styled "← Menu" pill and the amber no-key warning banner (inline styles; semantic warning kept)
   ============================================================================ */

:root {
  --bg: #0f1117;
  --panel: #1e2332;
  --panel-alt: #252d3d;
  --text-primary: #ffffff;
  --text-secondary: #c8cad4;
  --text-muted: #8b92a8;
  --border: rgba(255,255,255,0.10);
  --input-bg: rgba(255,255,255,0.07);
  --input-text: #ffffff;
  --accent: #4f8ef7;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body { background: var(--bg) !important; color: var(--text-secondary) !important; }

/* ── Panels / cards / blocks → --panel ───────────────────────────────────── */
/* UI-AUDIT-02 item 4: .tier-editor-wrap joins this list. It is the tier list
   editor's card (SPEC-RATE-01 Phase 1c), and it was never added here when that
   shipped -- so overhead_setup.html's own background:#fafaf8 applied
   uncontested and the tier editor and Named Individuals panels rendered as
   light cards on a dark page. A coverage gap in this list, not a hardcoded
   light theme in the page. */
.phase-block, .section-block, .dept-block, .team-card, .dept-card, .group-block,
.card, .summary-strip, .results-table-wrap, .matrix-table-wrap, .chart-card,
.tier-editor-wrap {
  background: var(--panel) !important;
  border-color: var(--border) !important;
}
/* tier-card: darken surface but NEVER touch its semantic left-border state colour */
.tier-card { background: var(--panel) !important; }

/* Headers / head surfaces → --panel */
.phase-header, .section-header, .dept-header, .card-head,
.team-card-head, .dept-card-head, .tier-card-head, .stage, .section-body, .dept-body {
  background: var(--panel) !important;
  border-color: var(--border) !important;
}

/* ── Alternate / sub surfaces → --panel-alt ──────────────────────────────── */
.phase-header:hover, .section-header:hover, .dept-header:hover, .group-head:hover,
.sub-header, .sub-group, .derived-row, .derived-wrap, .skip-bar, .outsource-bar,
.basis-row, .help-box, .rate-row, .preview-block, .upload-zone, .upload-drop,
.upload-result, .group-head, .mode-toggle, .tier-id, .placeholder-row {
  background: var(--panel-alt) !important;
  border-color: var(--border) !important;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
th {
  background: var(--panel-alt) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}
td { border-color: var(--border) !important; }
.band-table td, .model-table td, .sku-table td, .worker-table td, .team-table td,
.card-table td, .price-table td, .s4-table td, .results-table td, .matrix-table td,
.dept-tbl td, .tier-editor-table td {
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}
tr.group-hdr td, .price-table th { background: var(--panel-alt) !important; color: var(--text-secondary) !important; }
.card-table tr:hover td, .sku-table tr:hover td { background: var(--panel-alt) !important; }
.price-table td:first-child { color: var(--text-secondary) !important; }
/* semantic table cells re-asserted so the broad td rules above don't flatten them */
.results-table tr.error-row td, .matrix-table td.error-cell { color: var(--red, #b91c1c) !important; }
.matrix-table td.loading-cell { color: var(--text-muted) !important; }
.results-table tr.price-break > td:first-child { border-left-color: #059669 !important; }

/* ── Inputs / selects / textareas → --input-bg / --input-text ────────────── */
input, select, textarea {
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--border) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; }
input:focus, select:focus, textarea:focus { border-color: var(--accent) !important; }

/* Ghost inputs — explicit field affordance */
.dept-label-input, .team-name-input, .team-id-input {
  background: var(--input-bg) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.20) !important;
  color: var(--text-primary) !important;
}

/* Disabled / readonly — still visually distinct from active */
input:disabled, input[readonly], select:disabled, textarea:disabled,
.desig-select:disabled, .pl-iph-readonly, .field input[readonly] {
  background: rgba(255,255,255,0.04) !important;
  color: var(--text-muted) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* Native checkboxes */
input[type=checkbox] { accent-color: var(--accent) !important; }

/* Validation tints — re-asserted unchanged (broad input rule would otherwise flatten them) */
.cat-select.row-pending { background: #fef2f2 !important; border-color: #fca5a5 !important; color: #111 !important; }
.cat-select.row-done    { background: #f0fdf4 !important; border-color: #86efac !important; color: #111 !important; }
.dept-cell input.cap-empty  { background: #fef2f2 !important; border-color: #fca5a5 !important; color: #111 !important; }
.dept-cell input.cap-filled { background: #f0fdf4 !important; border-color: #86efac !important; color: #111 !important; }
/* Stage 5 labour inputs — same pattern as dept-cell, theme.css broad input rule overrides these without !important */
.labour-cell input           { background: #fef2f2 !important; border-color: #fca5a5 !important; color: #111 !important; }
.labour-cell input.cap-filled { background: #f0fdf4 !important; border-color: #86efac !important; color: #111 !important; }

/* ── Text: titles / values → --text-primary ──────────────────────────────── */
.phase-title, .section-title, .dept-title, .stage-title, .group-title, .tier-label,
.team-name, .model-name, .cons-name, .task-label, .toggle-label, .derived-value,
.derived-val, .rate-value, .overhead-value, .composite, .strip-val, .iph-derived span,
.upload-zone strong, .tier-stat b, .tier-editor-title {
  color: var(--text-primary) !important;
}

/* Text: labels / meta / notes / units / hints / descriptions → --text-secondary (min) */
.phase-meta, .section-meta, .dept-meta, .task-note, .field label, .field-unit,
.time-unit, .derived-label, .derived-unit, .sub-title, .sub-meta, .global-label,
.global-note, .overhead-label, .overhead-meta, .rate-label, .rate-meta, .tier-stat,
.tier-id, .search-hint, .pager, .basis-hint, .group-sub, .group-amount, .acct-amt,
.acct-name, .dept-cell-label, .base-label, .base-unit, .members-label, .fraction-label,
.team-id-label, .toggle-desc, .tier-desc, .stage-desc, .routing-commentary, .skip-label,
.upload-hint, .cons-supplier, .preview-meta, .preview-title, .sub-group-title,
.empty-state, .loading-state, .chevron, .iph-derived, .s4-total, .s4-empty,
.derived-row .derived-label, .toggle-workers, .time-col label, .method-selector-wrap label,
.basis-row label, .dept-meta, .tier-editor-status {
  color: var(--text-secondary) !important;
}

/* Faint "not set / placeholder" states → --text-muted (still legible) */
.na-cell, .cons-pending, .placeholder-name, .placeholder-tag,
.rate-value.unsaved, .rate-value.unset, .rate-value.empty {
  color: var(--text-muted) !important;
}

/* ── Active tabs / buttons (was #111;#fff) → --accent ────────────────────── */
.method-tab.active, .mode-btn.active, .tab-btn.active, .ws-chip.checked,
.save-btn.primary, .apply-btn {
  background: var(--accent) !important;
  color: #ffffff !important;
  border-color: var(--accent) !important;
}
.method-tab.active:hover, .mode-btn.active:hover, .tab-btn.active:hover,
.save-btn.primary:hover, .apply-btn:hover { background: #3b7de0 !important; }

/* Neutral (non-semantic) buttons → dark surface */
.save-btn:not(.primary), .btn-outline, .add-btn, .add-member-btn,
.action-btn:not(.danger), .mode-btn:not(.active), .method-tab:not(.active),
.tab-btn:not(.active), .pager button, .file-btn {
  background: var(--input-bg) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}
.save-btn:hover:not(.primary), .btn-outline:hover, .add-btn:hover,
.action-btn:not(.danger):hover, .file-btn:hover { background: var(--panel-alt) !important; }
/* disabled primary/apply buttons → dark disabled */
.apply-btn:disabled, .save-btn:disabled, .save-btn.primary:disabled {
  background: rgba(255,255,255,0.04) !important;
  color: var(--text-muted) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* "← Menu" back-link pill (inline-styled white bg). Scoped via :not([style*=font-weight])
   so the amber no-key banner's bold link (same href, has font-weight) is left untouched. */
a[href="/configurator/"]:not([style*="font-weight"]) {
  background: var(--panel-alt) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}

/* ── Step / stage number circles ─────────────────────────────────────────── */
.step-num, .stage-num { background: var(--text-secondary) !important; color: #0f1117 !important; }
.section-block.done .step-num, .stage-done .stage-num { background: #4ade80 !important; color: #0f1117 !important; }
.section-block.locked .step-num { background: var(--text-muted) !important; color: #0f1117 !important; }

/* ── batch_pricing.html specifics (uses --gray-* tokens / #fff) ───────────── */
/* Re-map the neutral gray scale to dark; keep --blue/--green/--red/--purple semantic. */
.mode-btn { color: var(--text-secondary) !important; }
.mode-btn.active { background: var(--accent) !important; color: #fff !important; }
.pl-header span, .strip-label, .progress-label, .layer-toggle-wrap span,
.results-table th, .matrix-table th { color: var(--text-secondary) !important; }
.results-table td, .matrix-table td { color: var(--text-secondary) !important; }
.matrix-table td:first-child, .results-table td:first-child { color: var(--text-primary) !important; }
.rc-empty, .matrix-table td.loading-cell { color: var(--text-muted) !important; }
.btn-preset:not(.active):not(.purple-active), .layer-btn:not(.active) {
  background: var(--input-bg) !important; color: var(--text-secondary) !important; border-color: var(--border) !important;
}
/* keep batch semantic active states explicit (broad rules above must not flatten them) */
.btn-preset.active { background: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #fff !important; }
.btn-preset.purple-active { background: #7c3aed !important; border-color: #7c3aed !important; color: #fff !important; }
.layer-btn.active { background: #7c3aed !important; border-color: #7c3aed !important; color: #fff !important; }

/* ── Save footer: light lavender bar — labels must be dark, not overridden by broad rules */
.save-footer-label { color: #1e2332 !important; }
.save-footer-field label { color: #1e2332 !important; }
.save-footer-field input { border-color: #ddd6fe !important; background: #fff !important; color: #1e2332 !important; }

/* FEAT-CONFIG-AUDIT-01 — per-field audit status dots */
.audit-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
}
.audit-dot--green { background: #10b981; }
.audit-dot--amber { background: #f59e0b; cursor: help; }