/* ============================================================
   FINAL DARK — single-source dark theme override
   Loaded last; takes precedence over fresh/crm/styles/dark.
   ============================================================ */

:root {
  /* Base palette */
  --bg-0:        #0E1116 !important;  /* page */
  --bg-1:        #151A22 !important;  /* panels behind cards */
  --bg-paper:    #1A2029 !important;  /* card surface */
  --bg-soft:     #232B36 !important;  /* row hover / chips */
  --bg-2:        #232B36 !important;
  --ink:         #F4F1E8 !important;  /* primary text */
  --text:        #F4F1E8 !important;
  --text-2:      #E0DBCB !important;
  --muted:       #B8B2A0 !important;  /* secondary text (readable) */
  --text-dim:    #B8B2A0 !important;
  --rule:        #2A323D !important;
  --border:      #2A323D !important;
  --border-2:    #38424F !important;

  /* CRM tokens */
  --crm-bg:      #0E1116 !important;
  --crm-panel:   #1A2029 !important;
  --crm-panel-2: #151A22 !important;
  --crm-rail:    #151A22 !important;
  --crm-border:  #2A323D !important;
  --crm-rule:    #232B36 !important;
  --crm-blue-soft: rgba(111,168,255,0.10) !important;
  --crm-blue-border: rgba(111,168,255,0.40) !important;
  --crm-blue-d:  #B5D0FF !important;
  --crm-red:     #E55A4D !important;
  --crm-ink:     #F4F1E8 !important;
  --crm-text:    #F4F1E8 !important;
  --crm-text-2:  #E0DBCB !important;
  --crm-muted:   #B8B2A0 !important;

  /* HomeSquare division accents (brighter for dark) */
  --crm-green:   #4FB97E !important;
  --crm-blue:    #6FA8FF !important;
  --crm-orange:  #FF8A3D !important;
  --crm-amber:   #E6C25C !important;
  --crm-red:     #E55A4D !important;
  --crm-eg:      #FF8A3D !important;

  --hsp-green:   #4FB97E !important;
  --hsp-blue:    #6FA8FF !important;
  --hsp-eg:      #FF8A3D !important;
  --hsp-pec:     #E6C25C !important;

  --danger:      #E55A4D !important;
  --success:     #4FB97E !important;
  --warning:     #E6C25C !important;
  --info:        #6FA8FF !important;

  /* Button brand colors stay loud */
  --btn-send:     #4A8DFF !important;
  --btn-download: #FF9933 !important;
}

/* Page chrome */
html, body { background: var(--bg-0) !important; color: var(--ink) !important; }
body { color-scheme: dark; }

/* Top app bar */
#app-bar {
  background: #0A0D12 !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--ink) !important;
}
#app-bar * { color: var(--ink) !important; }
#app-bar .app-bar-sep { background: var(--border) !important; }
#app-bar .app-bar-context { color: var(--muted) !important; }
#app-bar .brand img {
  filter: invert(1) hue-rotate(180deg) saturate(1.1) brightness(1.05) !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* Caller header */
#caller-header,
#caller-header.crm-rail,
#caller-header > * {
  background: var(--bg-1) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
#caller-header .caller-id .name,
#caller-header h1, #caller-header h2 { color: var(--ink) !important; }
#caller-header .caller-meta .stat-label { color: var(--muted) !important; }
#caller-header .caller-meta .stat-value { color: var(--ink) !important; }
#caller-header .rpm-link { color: var(--crm-blue) !important; }

/* Status strip */
#status-strip {
  background: var(--bg-1) !important;
  border-color: var(--border) !important;
}
#status-strip .status-chip,
#status-strip .chip {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border-2) !important;
  color: var(--ink) !important;
}
#status-strip .chip strong { color: var(--ink) !important; }

/* Body / summary container */
#app, main, #client-summary { background: var(--bg-0) !important; }

/* Cards */
#client-summary .card,
.card {
  background: var(--bg-paper) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.4) !important;
}
.card .card-head,
.card .card-head .card-title {
  background: transparent !important;
  color: var(--ink) !important;
  border-bottom-color: var(--rule) !important;
}
.card .card-head .card-summary {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border-2) !important;
  color: var(--ink) !important;
}
.card .card-head .card-summary.money { color: var(--crm-amber) !important; }
.card[data-card="invoices"] .card-summary.money {
  background: var(--st-8, #E81516) !important;
  border-color: var(--st-8, #E81516) !important;
  color: #fff !important;
}
.card .card-body { background: transparent !important; color: var(--ink) !important; }

/* Rows */
.row {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
}
.row:hover { background: rgba(255,255,255,0.04) !important; }

/* Beat crm.css row:hover which uses light --crm-blue-soft */
#client-summary .card .card-body > .row:hover {
  background: rgba(111,168,255,0.08) !important;
  border-left-color: var(--crm-blue) !important;
}
#client-summary .card .card-body > .row:hover .invoice-amount { color: #F0C674 !important; }
#client-summary .card .card-body > .row.overdue:hover .invoice-amount { color: #FF8A7F !important; }
#client-summary .card .card-body > .row:hover .row-title,
#client-summary .card .card-body > .row:hover .title-text,
#client-summary .card .card-body > .row:hover strong { color: var(--ink) !important; }
.row .row-title,
.row .title-text,
.row .row-main,
.row strong { color: var(--ink) !important; }
.row .row-meta,
.row .row-meta .field-label,
.row .field-value { color: var(--muted) !important; }
.row .field-value { color: var(--text-2) !important; }

/* Invoice rows */
.row.invoice { background: rgba(255,255,255,0.03) !important; }
.row.invoice.overdue {
  background: rgba(229, 90, 77, 0.12) !important;
  border-color: rgba(229, 90, 77, 0.55) !important;
  border-left: 3px solid var(--danger) !important;
}
/* Invoice amount — amber bold mono. Overdue = red, larger.
   Hover never recolors. */
.row.invoice .invoice-amount,
#client-summary .row.invoice .invoice-amount {
  color: #F0C674 !important;
  background: transparent !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}
.row.invoice.overdue .invoice-amount,
#client-summary .row.invoice.overdue .invoice-amount {
  color: #FF8A7F !important;
  font-weight: 800 !important;
  font-size: 17px !important;
}
.row.invoice:hover .invoice-amount { color: #F0C674 !important; }
.row.invoice.overdue:hover .invoice-amount { color: #FF8A7F !important; }
.row.invoice.past .invoice-amount {
  color: var(--muted) !important;
  font-weight: 500 !important;
  background: transparent !important;
}

/* Badges & pills */
.badge, .pill, .stage-pill, .chip {
  background: var(--bg-soft) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border-2) !important;
}
.badge.overdue {
  background: var(--danger) !important;
  color: #fff !important;
  border-color: var(--danger) !important;
  font-weight: 800 !important;
}

/* Property rail card */
.properties-rail-card,
#caller-header .properties-rail-card {
  background: var(--bg-paper) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
}
.properties-rail-card .prc-head,
.properties-rail-card .prc-head h4 { color: var(--ink) !important; border-color: var(--rule) !important; }
.properties-rail-card .prc-item { border-color: var(--rule) !important; }
.properties-rail-card .prc-addr { color: var(--ink) !important; }
.properties-rail-card .prc-meta { color: var(--muted) !important; }

/* Buttons — action bar */
#actions, .actions-inner {
  background: rgba(10,13,18,0.96) !important;
  border-top: 1px solid var(--border) !important;
  backdrop-filter: blur(8px);
}
.btn, button.btn {
  background: var(--bg-soft) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border-2) !important;
}
.btn:hover { background: #2E3845 !important; border-color: #475260 !important; }
.btn.primary {
  background: var(--crm-green) !important;
  color: #06120B !important;
  border-color: var(--crm-green) !important;
  font-weight: 700 !important;
}
.btn.primary:hover { background: #5FCB8E !important; border-color: #5FCB8E !important; }
.btn.danger { background: var(--danger) !important; color: #fff !important; border-color: var(--danger) !important; }

.menu {
  background: var(--bg-paper) !important;
  border: 1px solid var(--border-2) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6) !important;
}
.menu button { color: var(--ink) !important; background: transparent !important; }
.menu button:hover { background: var(--bg-soft) !important; }
.menu .menu-label { color: var(--muted) !important; }
.menu hr { border-color: var(--rule) !important; }
.menu .danger { color: var(--danger) !important; }

/* Invoice action buttons keep their brand colors */
.iv-btn.download, .iv-btn[data-action="download"],
button[data-action="download_invoice"] {
  background: var(--btn-download) !important;
  color: #1A0F00 !important;
  border-color: var(--btn-download) !important;
  font-weight: 700 !important;
}
.iv-btn.send, .iv-btn[data-action="send"],
button[data-action="send_invoice"] {
  background: var(--btn-send) !important;
  color: #fff !important;
  border-color: var(--btn-send) !important;
  font-weight: 700 !important;
}

/* Division strip remains colored */
.division-strip { border-top: 0 !important; }

/* Tweaks panel */
.tweaks-panel, .tweaks {
  background: var(--bg-paper) !important;
  color: var(--ink) !important;
  border-color: var(--border-2) !important;
}
.tweaks * { color: var(--ink) !important; }
.tweaks .muted { color: var(--muted) !important; }

/* Forms / inputs (used in modals) */
input, textarea, select {
  background: var(--bg-1) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border-2) !important;
}
input::placeholder, textarea::placeholder { color: var(--muted) !important; }

/* Generic: anything still gray on light becomes readable */
.muted, .text-dim, [class*="muted"], [class*="dim"],
.field-label, .stat-label, .spec-label,
.kicker, .section-label, .menu-label {
  color: var(--muted) !important;
}

/* Card "money" summary on past invoices should be visible */
.card[data-card="past-invoices"] .card-summary { color: var(--crm-amber) !important; }

/* Stage color coding in dark mode.
   The previous per-stage rules targeted classes that don't exist in
   the SPA's render (.stage-new-lead / .stage-in-comm / .stage-completed),
   so most pills got dark text on dark backgrounds. Replaced with a
   single theme-aware rule that color-mixes the stage hue against the
   dark surface for the background and against the cream ink for the
   text — works for every stage automatically, including new ones. */
.svc-row .stage-pill,
.row .stage-pill {
  background: color-mix(in srgb, var(--stage-color, var(--st-default)) 22%, #1F1D17) !important;
  color: color-mix(in srgb, var(--stage-color, var(--st-default)) 78%, #F1ECE0) !important;
  border-color: color-mix(in srgb, var(--stage-color, var(--st-default)) 50%, transparent) !important;
  font-weight: 700 !important;
}
.row .stage-pill.overdue {
  background: var(--danger) !important;
  color: #FFFFFF !important;
  border-color: var(--danger) !important;
}

/* Theme switcher chip (top right) */
#theme-sw {
  background: var(--bg-paper) !important;
  border-color: var(--border-2) !important;
  color: var(--ink) !important;
}
#theme-sw button { color: var(--muted) !important; }

/* Modals */
#modal-root .modal-backdrop {
  background: rgba(0,0,0,0.72) !important;
}
#modal-root .modal,
#modal-root .m {
  background: var(--bg-paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border-2) !important;
}

/* Toast */
#toast {
  background: var(--bg-paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border-2) !important;
}
#toast .toast-undo {
  border-color: var(--ink-2) !important;
  color: var(--ink-2) !important;
}
#toast .toast-undo:hover {
  background: rgba(241,236,224,0.08) !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
}

/* Call details strip */
#call-details {
  background: var(--bg-paper) !important;
  border-top-color: var(--rule) !important;
  border-bottom-color: var(--rule) !important;
  color: var(--muted) !important;
}
#call-details[data-status="ended"] {
  background: rgba(227, 146, 0, 0.10) !important;
  border-color: rgba(227, 146, 0, 0.40) !important;
}
#call-details .cd-cell + .cd-cell { border-left-color: var(--rule-2) !important; }
#call-details .cd-label { color: var(--muted) !important; }
#call-details .cd-value { color: var(--ink) !important; }
#call-details .cd-copy { color: var(--muted) !important; }
#call-details .cd-copy:hover { color: var(--ink) !important; }
#call-details .cd-pill {
  background: rgba(91,178,105,0.14) !important;
  color: #8FE39C !important;
  border-color: rgba(91,178,105,0.40) !important;
}
#call-details[data-status="ended"] .cd-pill {
  background: rgba(227,146,0,0.16) !important;
  color: #E39200 !important;
  border-color: rgba(227,146,0,0.50) !important;
}
#call-details[data-status="stale"] .cd-pill {
  background: rgba(138,132,116,0.18) !important;
  color: var(--muted) !important;
  border-color: var(--rule) !important;
}

/* Kill any leftover white backgrounds anywhere in main UI */
#app *,
#client-summary *,
#caller-header *,
#status-strip * {
  /* Don't blanket-recolor — selectively above is safer */
}

/* Service rows in open-services & services cards — kill the white gradient from crm.css */
#client-summary .card[data-card="open-services"] .card-body > .row,
#client-summary .card[data-card="services"] .card-body > .row,
#client-summary .svc-row {
  background: linear-gradient(
    to right,
    var(--stage-bg, transparent) 0,
    var(--stage-bg, transparent) 8px,
    var(--bg-paper) 8px,
    var(--bg-paper) 100%
  ) !important;
  color: var(--ink) !important;
}
#client-summary .card[data-card="open-services"] .card-body > .row:hover,
#client-summary .card[data-card="services"] .card-body > .row:hover,
#client-summary .svc-row:hover {
  background: linear-gradient(
    to right,
    var(--stage-bg, transparent) 0,
    var(--stage-bg, transparent) 8px,
    var(--bg-soft) 8px,
    var(--bg-soft) 100%
  ) !important;
}
#client-summary .svc-row .row-main,
#client-summary .svc-row .row-title,
#client-summary .svc-row strong { color: var(--ink) !important; }
#client-summary .svc-row .row-meta,
#client-summary .svc-row .field-label { color: var(--muted) !important; }

/* Stage pills — keep colored but ensure readable text */
#client-summary .svc-row .stage-pill {
  filter: brightness(1.08);
}

/* Service-history badges and stage pills used solid light backgrounds */
.stage-pill.stage-intake    { background: rgba(236,213,143,0.18) !important; color: #ECD58F !important; border-color: rgba(236,213,143,0.4) !important; }
.stage-pill.stage-scheduled { background: rgba(111,168,255,0.18) !important; color: #B5D0FF !important; border-color: rgba(111,168,255,0.4) !important; }
.stage-pill.stage-overdue   { background: rgba(229,90,77,0.20) !important; color: #FFA89E !important; border-color: rgba(229,90,77,0.5) !important; }
.stage-pill.stage-completed { background: rgba(79,185,126,0.18) !important; color: #9EDCB0 !important; border-color: rgba(79,185,126,0.4) !important; }
.stage-pill.stage-archived,
.stage-pill.stage-rejected,
.stage-pill.stage-spam      { background: var(--bg-soft) !important; color: var(--muted) !important; border-color: var(--border-2) !important; }
.badge.warranty { background: rgba(236,213,143,0.18) !important; color: #ECD58F !important; border-color: rgba(236,213,143,0.4) !important; }
.badge.upcoming { background: rgba(111,168,255,0.18) !important; color: #B5D0FF !important; border-color: rgba(111,168,255,0.4) !important; }
.badge.active   { background: rgba(79,185,126,0.18) !important; color: #9EDCB0 !important; border-color: rgba(79,185,126,0.4) !important; }
.badge.inactive, .badge.expired, .badge.archived, .badge.spam {
  background: var(--bg-soft) !important; color: var(--muted) !important; border-color: var(--border-2) !important;
}

/* Stage tinted backgrounds (the 8px left wash) — softer on dark */
#client-summary .svc-row.stage-intake    { --stage-bg: rgba(236,213,143,0.12); }
#client-summary .svc-row.stage-scheduled { --stage-bg: rgba(111,168,255,0.14); }
#client-summary .svc-row.stage-overdue   { --stage-bg: rgba(229,90,77,0.16); }
#client-summary .svc-row.stage-completed { --stage-bg: rgba(79,185,126,0.12); }
#client-summary .svc-row.stage-in-progress { --stage-bg: rgba(255,138,61,0.14); }
#client-summary .svc-row.stage-estimate  { --stage-bg: rgba(230,221,59,0.14); }
#client-summary .svc-row.stage-approved  { --stage-bg: rgba(95,203,142,0.14); }

/* Card head row (white panel-2 in crm.css) */
#client-summary > .card { background: var(--bg-paper) !important; }
#client-summary .card .card-head {
  background: var(--bg-1) !important;
  border-bottom-color: var(--rule) !important;
}
#client-summary .card .card-head .count {
  background: var(--bg-soft) !important;
  border-color: var(--border-2) !important;
  color: var(--ink) !important;
}
.card .card-head .card-title { color: var(--ink) !important; }

/* Status strip & properties summary */
#status-strip, #client-summary { background: var(--bg-0) !important; }
.status-chip {
  background: var(--bg-paper) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}

/* App bar (crm.css hard-codes white) */
#app-bar { background: #0A0D12 !important; border-bottom-color: var(--border) !important; }
#caller-header .caller-eyebrow { background: rgba(79,185,126,0.16) !important; color: #9EDCB0 !important; border-color: rgba(79,185,126,0.4) !important; }

/* Action bar at bottom */
#actions {
  background: rgba(10,13,18,0.96) !important;
  border-top-color: var(--border) !important;
  box-shadow: 0 -1px 6px rgba(0,0,0,0.4) !important;
}

/* Spec sheet (generator) */
.spec-toggle, .spec-sheet {
  background: var(--bg-1) !important;
  border-color: var(--border-2) !important;
  color: var(--ink) !important;
}

/* Specific known-light surfaces */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:#FFF"],
[style*="background: #FFF"],
[style*="background: white"] {
  background: var(--bg-paper) !important;
}