/* theme.css — Label Music Group global dark editorial theme.  v4
   Injected by shared-nav.js + linked in <head> on every page EXCEPT the
   self-styled Dashboard (which defines its own tokens and opts out).
   Loaded AFTER each page's own <style>, so it overrides the legacy light theme.

   Cascade strategy:
   - Pages hard-code dark text colors (#333, #6c757d, ...) on single-class
     selectors (specificity 0,1,0). The [class] selector is also 0,1,0 and,
     loading later, wins the tie by source order -> forces all that text readable.
   - !important here also beats inline style="color/background:..." (non-important).
   - Accent rules (revenue/+/-/badges/gold-pills) are placed LATER in this file,
     so among equal-specificity rules they win over the [class] baseline.

   v4 changes (page-by-page readability pass):
   - NAV: nav links were going gold because a[class]{color:gold !important}
     beat shared-nav's non-important white. Re-pinned to white WITH !important.
   - SURFACES: explicit class list for every page's light cards/rows/panels that
     the broad [class*="..."] patterns missed (e.g. -block, td:first-child, :hover,
     split-* modal bodies, version rows, stmt-* statement surfaces).
   - INLINE catch widened: background-color + more hex values + body gradient.
   - DROPDOWNS / SELECTS: dark by default, card-2 (slightly lighter) on hover — never white.
   - PROGRESS BARS: teal/colored fills remapped to gold; tracks to a dark line.
   - GOLD PILLS: the called-out white pills/rectangles/ovals + splits action
     buttons -> gold with near-black text.
*/

:root {
  --bg:#0F0E0A; --panel:#16150F; --card:#1C1B14; --card-2:#211F16;
  --line:#2C2A1F; --line-2:#3A3727;
  --ink:#F2EEE3; --ink-soft:#CFC9B8; --muted:#948D7C; --muted-2:#6F695B;
  --gold:#C9A24B; --gold-soft:#8A7536; --gold-dim:#5E5224;
  --pos:#7FB069; --neg:#D08458;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --ink-on-gold:#1A1812;
}

/* ============ SHELL ============ */
body { background: var(--bg) !important; color: var(--ink) !important;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.container { background: var(--panel) !important; border: 1px solid var(--line) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45) !important; }
.content { background: transparent !important; }
header { background: linear-gradient(180deg,#1A180F 0%,#141309 100%) !important;
  border-bottom: 1px solid var(--line) !important; color: var(--ink) !important; }

/* ============ TEXT READABILITY BASELINE ============ */
[class], body, .content, div, p, span, td, th, li, ul, ol, label, small, strong, b, em,
dt, dd, caption, figcaption, blockquote, summary, output, time, code, pre, abbr {
  color: var(--ink-soft) !important;
}
h1, h2, h3, h4, h5, legend { color: var(--ink) !important; font-family: var(--serif); }
h1[class], h2[class], h3[class], h4[class], h5[class] { color: var(--ink) !important; }
header h1, header h2 { font-family: var(--serif) !important; color: var(--ink) !important;
  letter-spacing: 2px; text-transform: uppercase; }
header h1 span, header .subtitle, header p { color: var(--muted) !important; }
a { color: var(--gold-soft) !important; } a:hover { color: var(--gold) !important; }
a[class] { color: var(--gold-soft) !important; }
.muted, .subtitle, .hint, .note, .loading, .secondary-text, .field-hint, .empty, .arrow,
.field-name, [class*="muted"], [class*="-label"], [class*="hint"], [class*="-meta"], small {
  color: var(--muted) !important;
}

/* ============ NAV (must beat a[class] !important from baseline) ============
   shared-nav.js styles #mainNav links white but WITHOUT !important, so the
   gold a[class] rule above used to win. Re-pin here with !important. Values
   match the Dashboard exactly (Dashboard just uses shared-nav untouched). */
#mainNav a, #mainNav a.nav-link, #mainNav a.nav-link.has-sub,
#mainNav .nav-dropdown > a.nav-link {
  color: rgba(255,255,255,0.72) !important; background: transparent !important;
}
#mainNav a.nav-link:hover { color:#fff !important; background: rgba(255,255,255,0.10) !important; }
#mainNav a.nav-link.active { color:#fff !important; }
#mainNav .nav-separator { color: rgba(255,255,255,0.20) !important; }
#mainNav .nav-user { color: rgba(255,255,255,0.72) !important; }
#mainNav .nav-signout { color: rgba(255,255,255,0.42) !important; }
#mainNav .nav-signout:hover { color: rgba(255,255,255,0.72) !important; }
#mainNav .nav-dropdown-content { background:#15140E !important; border:1px solid var(--line-2) !important; }
#mainNav .nav-dropdown-content a { color: rgba(255,255,255,0.72) !important; background: transparent !important; }
#mainNav .nav-dropdown-content a:hover { color:#fff !important; background: rgba(255,255,255,0.10) !important; }
#mainNav .nav-dropdown-content a.active { color:#fff !important; }

/* ============ SURFACES (catch white/light backgrounds) ============ */
table { background: transparent !important; }
th { background: var(--card-2) !important; color: var(--muted) !important;
  border-bottom: 1px solid var(--line-2) !important; }
td { border-bottom: 1px solid var(--line) !important; }
tr:hover td { background: var(--card-2) !important; }

.filter-panel, .filter-group, .stats-bar, .stat-item, .stat-card, .card, .panel, .box,
.section, .summary-panel, .info-box, .upload-zone, .data-card, .table-wrap, .table-container,
.table-wrapper, .history-table, .recoup-line-items, .recoup-line-item, .split-song-body,
.split-song-header, .selector-group, .checkbox-dropdown-button, .checkbox-dropdown-menu,
.song-row, .song-row td, .version-row, .data-row, .mapping-row, .preview-table, .well,
[class*="-card"], [class*="-panel"], [class*="-box"], [class*="-section"], [class*="-tile"],
[class*="-body"], [class*="-menu"], [class*="-wrap"], [class*="-grid"], [class*="-list"],
[class*="-table"], [class*="-row"], [class*="-header"], [class*="dropdown"], [class*="-zone"],
[class*="-well"], [class*="-block"], #summaryHealthPanel, #adjustmentsSection {
  background: var(--card) !important; border-color: var(--line) !important;
}

/* ---- v4: explicit page surfaces the broad patterns missed ---- */
.selector-panel, .summary-card, .goal-card, .goal-timeframe, .recoup-project,
.recoup-project-block, .recoup-grand-total, .chart-container, .explainer,
.template-bar, .file-info, .warning-box, .wizard-step, .data-table, .unmatched-table,
.growth-section, .toggle-btn, .growth-neutral, .ramp-section, .artist-block,
.project-card, .detail-row td, .split-mode-switch, .creator-share-row, .recoup-form,
.recoup-table, .alloc-row, .stmt-body, .stmt-summary, .stmt-summary-card, .stmt-recoup,
.stmt-table-wrap, .stmt-balance-summary, .stmt-adjustments, .stmt-adj-total,
.history-section-header, .section-header, .adj-form, .adj-table, .platform-overrides-section {
  background: var(--card) !important; border-color: var(--line) !important;
}
/* nested/expanded rows a shade up from their parent so structure stays legible */
.song-row, .song-row td, .song-row td:first-child { background: var(--card) !important; }
.song-row:hover, .song-row:hover td, .song-row:hover td:first-child { background: var(--card-2) !important; }
.version-row, .version-row td, .version-row td:first-child { background: var(--card-2) !important; }
.version-row:hover, .version-row:hover td, .version-row:hover td:first-child { background: var(--line) !important; }
.detail-row td { background: var(--card) !important; }
.split-song-header { background: var(--card-2) !important; }
.split-song-header:hover { background: var(--line) !important; }
.split-song-body { background: var(--card) !important; }
.recoup-line-item { background: transparent !important; border-bottom: 1px solid var(--line) !important; }

/* keep the header/nav area from being card-ified by the broad patterns above */
header, header * { background: transparent !important; }
header { background: linear-gradient(180deg,#1A180F 0%,#141309 100%) !important; }

/* override inline white/light that normal CSS can't reach (background + background-color) */
[style*="background:#fff"], [style*="background: #fff"], [style*="background:white"],
[style*="background: white"], [style*="background-color:#fff"], [style*="background-color: #fff"],
[style*="background-color:white"], [style*="background-color: white"],
[style*="#fffbe6"], [style*="#f8f9fa"], [style*="#fafafa"], [style*="#f9f9f9"],
[style*="#f0f0f0"], [style*="#f5f5f5"], [style*="#e9ecef"] {
  background: var(--card-2) !important; border-color: var(--line) !important;
}
/* light body gradient -> flat dark */
[style*="#f0f0f0 0%"], [style*="#e0e0e0 100%"] { background: var(--bg) !important; }

/* ============ INPUTS ============ */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  background: var(--card) !important; color: var(--ink) !important;
  border: 1px solid var(--line-2) !important;
}
input::placeholder, textarea::placeholder { color: var(--muted-2) !important; }
input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--gold-soft) !important; }
select option { background: var(--card) !important; color: var(--ink) !important; }

/* dropdown menus: dark default, slightly lighter on hover — never white */
.checkbox-dropdown-menu, .checkbox-dropdown-button { background: var(--card) !important; border-color: var(--line-2) !important; }
.checkbox-option { background: transparent !important; }
.checkbox-option:hover { background: var(--card-2) !important; }
.detail-row .project-card { background: var(--card-2) !important; }
.detail-row .project-card:hover { background: var(--line) !important; }

/* ============ BUTTONS ============ */
.btn-primary, .btn-generate, .btn-create, .btn-add, .btn-import, .btn-save, .recoup-add,
button.primary, .btn.primary {
  background: linear-gradient(180deg,var(--gold) 0%,var(--gold-soft) 100%) !important;
  color: var(--ink-on-gold) !important; border: 1px solid var(--gold-soft) !important;
}
.btn-secondary, .btn-pdf, .btn-sm, .btn-cancel, .btn-outline, button.secondary, .btn.secondary {
  background: var(--card-2) !important; color: var(--ink-soft) !important;
  border: 1px solid var(--line-2) !important;
}
.btn-secondary:hover, .btn-pdf:hover, .btn-sm:hover, .btn-cancel:hover, .btn-outline:hover {
  border-color: var(--gold-soft) !important; color: var(--ink) !important; background: var(--card) !important; }
.btn-danger, .btn-delete, .recoup-del { background: transparent !important; color: var(--neg) !important; border: 1px solid var(--neg) !important; }
button { font-family: inherit; }

/* ============ TABS ============ */
.tab, .recoup-tab, .growth-tab { color: var(--muted) !important; background: transparent !important; border-color: var(--line) !important; }
.tab.active, .recoup-tab.active, .growth-tab.active { color: var(--ink-on-gold) !important;
  background: linear-gradient(180deg,var(--gold) 0%,var(--gold-soft) 100%) !important; border-bottom-color: var(--gold) !important; }
.growth-tab:hover:not(.active), .toggle-btn:hover { background: var(--card-2) !important; }

/* ============ PROGRESS BARS ============ */
.progress-bar, .recoup-progress, .goal-timeframe { background: var(--line) !important; border-color: var(--line) !important; }
.progress-fill, .recoup-progress-fill, [class*="progress-fill"] {
  background: linear-gradient(90deg,var(--gold-soft) 0%,var(--gold) 100%) !important;
}
/* keep goal status fills meaningful but on-palette */
.progress-fill.on_track, .progress-fill.completed { background: linear-gradient(90deg,var(--gold-soft),var(--pos)) !important; }
.progress-fill.at_risk { background: linear-gradient(90deg,var(--gold-soft),var(--gold)) !important; }
.progress-fill.behind { background: linear-gradient(90deg,var(--neg),#b9603a) !important; }

/* ============ ACCENTS (placed last so they beat the text baseline) ============ */
.revenue-cell, .total-cell, .revenue-stat, .artist-total, .song-revenue, .num-revenue,
.earnings-num, .total-earnings, .revenue, .stat-value.revenue,
.song-row .revenue-cell, .song-row .total-cell, .version-row .revenue-cell, .version-row .total-cell,
[class*="revenue"], [class*="earnings"], [style*="20c9a0"], [style*="17a085"] {
  color: var(--gold) !important;
}
.pos, .positive, .up, .gain, .green, [class*="positive"], .val.green { color: var(--pos) !important; }
.neg, .negative, .down, .loss, .red, [class*="negative"], .val.red, .total-owed,
.recoup-line-item .amt, .recoup-subtotal .amt { color: var(--neg) !important; }
.val.blue { color: var(--gold) !important; }

/* ---- GOLD PILLS: the called-out white rectangles/ovals + splits action buttons ---- */
.recoup-grand-total, .recoup-grand-total *, .category-tag, .recoup-line-item .category-tag,
.adj-category-tag, .btn-light, .btn-light:hover,
.split-save-btn, .split-bulk-btn, .split-mode-switch button.active {
  background: linear-gradient(180deg,var(--gold) 0%,var(--gold-soft) 100%) !important;
  color: var(--ink-on-gold) !important; border-color: var(--gold-soft) !important;
}
.recoup-grand-total .amt { color: var(--ink-on-gold) !important; }
.split-add-btn { background: transparent !important; border: 1px dashed var(--line-2) !important; color: var(--ink-soft) !important; }
.split-add-btn:hover { border-color: var(--gold-soft) !important; color: var(--ink) !important; }
.split-mode-switch button { background: var(--card-2) !important; color: var(--ink-soft) !important; }
.splits-btn { background: linear-gradient(180deg,var(--gold) 0%,var(--gold-soft) 100%) !important; color: var(--ink-on-gold) !important; border-color: var(--gold-soft) !important; }

/* ============ STATUS BADGES ============ */
.status-badge, .badge, .pill, .chip, .tag, .project-badge { border: 1px solid var(--line-2); }
.status-confirmed, .badge-recouped, .status-paid, .badge-success, .split-status-set,
.status-badge.paid, .status-badge.published { background: rgba(127,176,105,0.16) !important; color: var(--pos) !important; }
.status-unknown, .status-draft, .badge-warning, .badge-owing, .recoup-badge.owing,
.status-badge.draft, .split-status-partial { background: rgba(201,162,75,0.16) !important; color: var(--gold) !important; border-color: var(--gold-dim) !important; }
.status-missing, .badge-owing, .status-overdue, .badge-danger { background: rgba(208,132,88,0.16) !important; color: var(--neg) !important; }
.split-status-none { background: var(--card-2) !important; color: var(--muted) !important; }
.source-megusta, .source-vydia, .source-musicbed, .source-limeblue, [class*="source-"] {
  background: var(--card-2) !important; color: var(--ink-soft) !important; border: 1px solid var(--line-2) !important; }

/* ============ MODALS ============ */
.modal, .modal-overlay, .overlay { background: rgba(8,7,4,0.72) !important; }
.modal-card, .modal-content, .modal-body, .modal-inner, .dialog {
  background: var(--panel) !important; border: 1px solid var(--line-2) !important; color: var(--ink) !important; }
.modal-header { background: var(--card-2) !important; color: var(--ink) !important; border-bottom: 1px solid var(--line) !important; }
/* page modals that are a bare .modal box (users/goals/artists) */
.modal { color: var(--ink) !important; }
.modal.modal, body > .modal, .modal:not(.modal-overlay):not(.overlay) { background: var(--panel) !important; }

/* ============ STATEMENTS: align the generated statement to the brand ============ */
.stmt-header { background: linear-gradient(135deg,#1A180F 0%,#0C0B07 100%) !important; border:1px solid var(--line) !important; }
.stmt-header, .stmt-header * { color: var(--ink) !important; }
.stmt-header::after { background: linear-gradient(90deg,var(--gold-soft) 0%,var(--gold) 50%,var(--gold-soft) 100%) !important; }
.stmt-body { background: var(--card) !important; border:1px solid var(--line) !important; }
.stmt-summary-card { border-right:1px solid var(--line) !important; }
.stmt-table th { background: var(--card-2) !important; color: var(--muted) !important; }
.stmt-balance-summary { background: var(--card-2) !important; border:1px solid var(--line-2) !important; }
.stmt-project-subtotal, .stmt-footer, .stmt-adjustments, .stmt-recoup { border-color: var(--line) !important; }

/* ============ already-dark blocks: align to brand ============ */
.artist-header, .stmt-header { background: var(--card-2) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; }
.stmt-body { background: var(--card) !important; }
.recoup-summary-divider { border-top-color: var(--line-2) !important; }

/* ==================================================================
   v5 — readability pass #2: project-budgets, payees, users,
   song-mapper, payee-earnings, statements. Appended last so it wins;
   within this block, surfaces come first, accents/buttons/badges last.
   ================================================================== */

/* ---- surfaces still rendering light ---- */
.summary-bar, .info-banner, [class*="-banner"], .manual-match, .step, .song-card {
  background: var(--card-2) !important; border-color: var(--line) !important; }
.summary-bar, .summary-bar *, .info-banner, .info-banner * { color: var(--ink-soft) !important; }
.summary-item strong, .summary-bar strong { color: var(--ink) !important; }
.budget-input.changed { background: rgba(201,162,75,0.12) !important; border-color: var(--gold-soft) !important; }
.payee-table th { background: var(--card-2) !important; color: var(--muted) !important; }
.stmt-project-subtotal { background: var(--card-2) !important; color: var(--ink) !important; border-top: 1px solid var(--line-2) !important; }
.stmt-grand-total { background: linear-gradient(135deg,#1A180F 0%,#0C0B07 100%) !important; border: 1px solid var(--line) !important; }
.stmt-grand-total, .stmt-grand-total .gt-label { color: var(--ink) !important; }

/* ---- date/month picker icons: visible (gold) on dark instead of black ---- */
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(72%) sepia(46%) saturate(560%) hue-rotate(1deg) brightness(92%) contrast(88%) !important;
  opacity: 1 !important; cursor: pointer;
}

/* ---- progress bars (payee-earnings chart bars): exactly TWO bg colors
       (fill + empty track). Row/label/value stay transparent so there's no
       stray box at the end; the value is plain gold text beside the bar. ---- */
.chart-bar-row { background: transparent !important; }
.chart-bar-bg { background: var(--line) !important; }
.chart-bar { background: linear-gradient(90deg,var(--gold-soft),var(--gold)) !important; }
.chart-value { background: transparent !important; color: var(--gold) !important; }
.chart-label { background: transparent !important; color: var(--muted) !important; }

/* ---- teal text -> gold ---- */
.teal, .value.teal, .summary-card .value.teal, .sub-earn, .gt-amount,
.stmt-grand-total .gt-amount, .stmt-project-subtotal .sub-earn { color: var(--gold) !important; }
.summary-card.accent { border-left-color: var(--gold) !important; }

/* ---- inline teal backgrounds (e.g. the Apply button) -> gold ---- */
[style*="background:#20c9a0"], [style*="background: #20c9a0"],
[style*="background:linear-gradient(90deg, #20c9a0"] {
  background: linear-gradient(180deg,var(--gold) 0%,var(--gold-soft) 100%) !important;
  color: var(--ink-on-gold) !important; border-color: var(--gold-soft) !important;
}

/* ---- BUTTONS consolidated ---- */
/* primary/action -> gold + dark text */
.btn-dark, .btn-edit, .btn-success, .btn-view, .btn-apply {
  background: linear-gradient(180deg,var(--gold) 0%,var(--gold-soft) 100%) !important;
  color: var(--ink-on-gold) !important; border: 1px solid var(--gold-soft) !important; }
.btn-dark:hover, .btn-edit:hover, .btn-success:hover { filter: brightness(1.06); }
/* neutral/inactive -> dark secondary (overrides v4's gold on .btn-light) */
.btn-light { background: var(--card-2) !important; color: var(--ink-soft) !important; border: 1px solid var(--line-2) !important; }
.btn-light:hover { background: var(--card) !important; border-color: var(--gold-soft) !important; color: var(--ink) !important; }
/* danger LAST so Delete (.btn-danger.btn-sm) wins over .btn-sm secondary */
.btn-danger, .btn-delete, .recoup-del { background: transparent !important; color: var(--neg) !important; border: 1px solid var(--neg) !important; }

/* ---- users role badges -> dark tinted chips ---- */
.role-badge { border: 1px solid var(--line-2) !important; }
.role-admin { background: rgba(201,162,75,0.16) !important; color: var(--gold) !important; border-color: var(--gold-dim) !important; }
.role-payee { background: rgba(127,176,105,0.16) !important; color: var(--pos) !important; border-color: rgba(127,176,105,0.30) !important; }
.role-viewer { background: var(--card-2) !important; color: var(--muted) !important; }
.payee-role { background: var(--card-2) !important; color: var(--ink-soft) !important; border: 1px solid var(--line-2) !important; }

/* ==================================================================
   v6 — readability pass #3: payee-earnings detail pills, payees status,
   statements adj badge, import-review buttons, users payee link.
   Appended last so it wins.
   ================================================================== */

/* ---- count / percentage pills -> dark chips (were #e9ecef light) ---- */
.badge, .section-header .badge, .pct-badge {
  background: var(--card-2) !important; color: var(--ink-soft) !important;
  border: 1px solid var(--line-2) !important; }

/* ---- payees status chips ---- */
.badge-active { background: rgba(127,176,105,0.16) !important; color: var(--pos) !important; border: 1px solid rgba(127,176,105,0.30) !important; }
.badge-inactive, .badge-archived { background: var(--card-2) !important; color: var(--muted) !important; border: 1px solid var(--line-2) !important; }

/* ---- users: linked-payee chip + no-link dash ---- */
.payee-link { background: rgba(127,176,105,0.16) !important; color: var(--pos) !important; border: 1px solid rgba(127,176,105,0.30) !important; }
.no-link { color: var(--muted) !important; background: transparent !important; }

/* ---- import-review buttons: teal -> gold (dark text); red -> danger ---- */
.btn-teal { background: linear-gradient(180deg,var(--gold) 0%,var(--gold-soft) 100%) !important; color: var(--ink-on-gold) !important; border: 1px solid var(--gold-soft) !important; }
.btn-red, .btn-remove { background: transparent !important; color: var(--neg) !important; border: 1px solid var(--neg) !important; }

/* ---- SAFETY: any element we paint gold gets near-black text, descendants too ---- */
.btn-primary, .btn-primary *, .btn-generate, .btn-generate *, .btn-create, .btn-add,
.btn-import, .btn-save, .btn-dark, .btn-dark *, .btn-edit, .btn-success, .btn-teal,
.btn-apply, .splits-btn, .split-save-btn, .split-bulk-btn, .recoup-add,
.recoup-grand-total, .recoup-grand-total *, .category-tag, .adj-category-tag,
.split-mode-switch button.active, button.primary, .btn.primary {
  color: var(--ink-on-gold) !important;
}
