/* ═══ DARK MODE FIX — colors only, no layout/spacing changes ═══ */
/* Loaded last. Targets [data-mode=dark] and [data-mode=black] only. */

/* ── 1. Token overrides ──────────────────────────────────────── */
[data-mode=dark],[data-mode=black],[data-mode=glass]{
  --text-secondary:#c8d4e8;
  --text-tertiary:#a0b2c8;
  --text-muted:#7a90a8;
}

/* ── 2. Search inputs ────────────────────────────────────────── */
[data-mode=dark] .form-input,
[data-mode=black] .form-input,
[data-mode=glass] .form-input,
[data-mode=dark] .form-select,
[data-mode=black] .form-select,
[data-mode=glass] .form-select,
[data-mode=dark] .form-textarea,
[data-mode=black] .form-textarea,
[data-mode=glass] .form-textarea,
[data-mode=dark] .tx-search-input,
[data-mode=black] .tx-search-input,
[data-mode=dark] .dash-search-input,
[data-mode=black] .dash-search-input,
[data-mode=dark] .contacts-search-input,
[data-mode=black] .contacts-search-input,
[data-mode=dark] .docs-search-input,
[data-mode=black] .docs-search-input,
[data-mode=dark] .tasks-search-input,
[data-mode=black] .tasks-search-input,
[data-mode=dark] .gs-input,
[data-mode=black] .gs-input {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--text-primary) !important;
}
[data-mode=dark] .form-input:focus,
[data-mode=black] .form-input:focus,
[data-mode=dark] .tx-search-input:focus,
[data-mode=black] .tx-search-input:focus,
[data-mode=dark] .dash-search-input:focus,
[data-mode=black] .dash-search-input:focus {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(78,117,84,.65) !important;
}

/* ── 3. Filter buttons / pills ───────────────────────────────── */
[data-mode=dark] .filter-chip,
[data-mode=black] .filter-chip,
[data-mode=dark] .cal-type-chip,
[data-mode=black] .cal-type-chip,
[data-mode=dark] .cal-qc-type-chip,
[data-mode=black] .cal-qc-type-chip,
[data-mode=dark] .notif-type-chip,
[data-mode=black] .notif-type-chip,
[data-mode=dark] .tasks-view-btn,
[data-mode=black] .tasks-view-btn {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.78) !important;
}
[data-mode=dark] .filter-chip:hover,
[data-mode=black] .filter-chip:hover,
[data-mode=dark] .cal-type-chip:hover,
[data-mode=black] .cal-type-chip:hover {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.92) !important;
}
[data-mode=dark] .cal-type-chip.active,
[data-mode=black] .cal-type-chip.active,
[data-mode=dark] .cal-qc-type-chip.active,
[data-mode=black] .cal-qc-type-chip.active {
  background: rgba(78,117,84,.18) !important;
  border-color: rgba(78,117,84,.40) !important;
  color: rgba(140,190,148,.95) !important;
}
[data-mode=dark] .tasks-view-btn.active,
[data-mode=black] .tasks-view-btn.active {
  background: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;
}

/* ── 4. Action buttons (secondary / outline) ─────────────────── */
[data-mode=dark] .btn-secondary,
[data-mode=black] .btn-secondary {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.88) !important;
}
[data-mode=dark] .btn-secondary:hover,
[data-mode=black] .btn-secondary:hover {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.20) !important;
}
[data-mode=dark] .btn-outline,
[data-mode=black] .btn-outline {
  background: transparent !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.82) !important;
}
[data-mode=dark] .btn-outline:hover,
[data-mode=black] .btn-outline:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.24) !important;
  color: rgba(255,255,255,.95) !important;
}
[data-mode=dark] .ctx-btn,
[data-mode=black] .ctx-btn {
  background: transparent !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.75) !important;
}
[data-mode=dark] .ctx-btn:hover,
[data-mode=black] .ctx-btn:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.92) !important;
}

/* ── 5. Stat/KPI cards ───────────────────────────────────────── */
[data-mode=dark] .stat-card,
[data-mode=black] .stat-card,
[data-mode=dark] .kpi-card,
[data-mode=black] .kpi-card,
[data-mode=dark] .exec-kpi-card,
[data-mode=black] .exec-kpi-card,
[data-mode=dark] .dash-pipe-card,
[data-mode=black] .dash-pipe-card {
  background: var(--bg-surface) !important;
}
[data-mode=dark] .stat-value,
[data-mode=black] .stat-value,
[data-mode=dark] .kpi-value,
[data-mode=black] .kpi-value {
  color: rgba(255,255,255,.92) !important;
}
[data-mode=dark] .stat-label,
[data-mode=black] .stat-label {
  color: rgba(255,255,255,.62) !important;
}
[data-mode=dark] .kpi-label,
[data-mode=black] .kpi-label {
  color: rgba(255,255,255,.62) !important;
}
[data-mode=dark] .kpi-context,
[data-mode=black] .kpi-context {
  color: rgba(255,255,255,.55) !important;
}
[data-mode=dark] .kpi-primary { --kpi-hue-light: rgba(10,40,80,0.12) !important; }
[data-mode=dark] .kpi-accent  { --kpi-hue-light: rgba(184,151,75,0.10) !important; }
[data-mode=dark] .kpi-success { --kpi-hue-light: rgba(16,185,129,0.10) !important; }
[data-mode=dark] .kpi-info    { --kpi-hue-light: rgba(59,130,246,0.10) !important; }
[data-mode=dark] .kpi-danger  { --kpi-hue-light: rgba(239,68,68,0.10) !important; }
[data-mode=dark] .kpi-warning { --kpi-hue-light: rgba(234,179,8,0.10) !important; }
[data-mode=black] .kpi-primary { --kpi-hue-light: rgba(10,40,80,0.14) !important; }
[data-mode=black] .kpi-accent  { --kpi-hue-light: rgba(184,151,75,0.12) !important; }

/* ── 6. Light hover backgrounds that leak through ────────────── */
[data-mode=dark] .tasks-row:hover,
[data-mode=black] .tasks-row:hover,
[data-mode=dark] .daf-row:hover,
[data-mode=black] .daf-row:hover,
[data-mode=dark] .notif-page-item:hover,
[data-mode=black] .notif-page-item:hover,
[data-mode=dark] .audit-log-item:hover,
[data-mode=black] .audit-log-item:hover {
  background: rgba(255,255,255,.04) !important;
}
[data-mode=dark] .docs-list-tx:hover,
[data-mode=black] .docs-list-tx:hover,
[data-mode=dark] .tasks-tx-link:hover,
[data-mode=black] .tasks-tx-link:hover,
[data-mode=dark] .contacts-tx-link:hover,
[data-mode=black] .contacts-tx-link:hover,
[data-mode=dark] .contact-action-btn:hover,
[data-mode=black] .contact-action-btn:hover,
[data-mode=dark] .notif-mark-all:hover,
[data-mode=black] .notif-mark-all:hover {
  background: rgba(255,255,255,.05) !important;
  color: rgba(255,255,255,.88) !important;
}
[data-mode=dark] .daf-group-label,
[data-mode=black] .daf-group-label {
  background: var(--bg-app, #111) !important;
}

/* ── 7. Calendar ─────────────────────────────────────────────── */
[data-mode=dark] .cal-month-cell,
[data-mode=black] .cal-month-cell,
[data-mode=dark] .cal-week-col,
[data-mode=black] .cal-week-col,
[data-mode=dark] .cal-day-col,
[data-mode=black] .cal-day-col {
  background: transparent !important;
}
[data-mode=dark] .cal-time-dd-item.selected,
[data-mode=black] .cal-time-dd-item.selected {
  background: rgba(78,117,84,.18) !important;
  color: rgba(140,190,148,.95) !important;
}
[data-mode=dark] .cal-month-more:hover,
[data-mode=black] .cal-month-more:hover {
  background: rgba(255,255,255,.06) !important;
}

/* ── 8. Dropdown / header action buttons ─────────────────────── */
[data-mode=dark] .header-action-btn,
[data-mode=black] .header-action-btn {
  color: rgba(255,255,255,.72) !important;
}
[data-mode=dark] .header-action-btn:hover,
[data-mode=black] .header-action-btn:hover {
  background: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.92) !important;
}
[data-mode=dark] .dropdown-item,
[data-mode=black] .dropdown-item {
  color: rgba(255,255,255,.82) !important;
}
[data-mode=dark] .dropdown-item:hover,
[data-mode=black] .dropdown-item:hover {
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.95) !important;
}

/* ── 9. Modal footer light background ────────────────────────── */
[data-mode=dark] .modal-footer,
[data-mode=black] .modal-footer {
  background: rgba(255,255,255,.018) !important;
}

/* ── 10. Gray variables used as light backgrounds ────────────── */
[data-mode=dark] .daf-header-count,
[data-mode=black] .daf-header-count {
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.65) !important;
}

/* ── 11. Quickbar ────────────────────────────────────────────── */
[data-mode=dark] .dqb-btn,
[data-mode=black] .dqb-btn {
  color: rgba(255,255,255,.78) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* ── 12. Settings cards / sections ──────────────────────────── */
[data-mode=dark] .settings-section,
[data-mode=black] .settings-section {
  background: var(--bg-surface) !important;
  border-color: rgba(255,255,255,.07) !important;
}
[data-mode=dark] .settings-card,
[data-mode=black] .settings-card {
  border-color: rgba(255,255,255,.07) !important;
}

/* ── 13. ea-template / ea-tone hover (light sage-50 leak) ──── */
[data-mode=dark] .ea-template-card.selected,
[data-mode=black] .ea-template-card.selected,
[data-mode=dark] .ea-tone-btn.active,
[data-mode=black] .ea-tone-btn.active {
  background: rgba(78,117,84,.14) !important;
  border-color: rgba(78,117,84,.40) !important;
}

/* ── 14. Smart suggestion chips ─────────────────────────────── */
[data-mode=dark] .smart-suggestion-chip,
[data-mode=black] .smart-suggestion-chip {
  background: rgba(78,117,84,.10) !important;
  border-color: rgba(78,117,84,.22) !important;
  color: rgba(140,190,148,.90) !important;
}

/* ═══ BUTTON & PILL DARK MODE FIX ═══ */

/* ── Primary button ──────────────────────────────────────────── */
[data-mode=dark] .btn-primary,
[data-mode=black] .btn-primary,
[data-mode=glass] .btn-primary {
  background: linear-gradient(145deg, var(--ql-sage-500) 0%, var(--ql-sage-700) 100%) !important;
  color: #fff !important;
  border-color: rgba(78,117,84,.5) !important;
  opacity: 1 !important;
}
[data-mode=dark] .btn-primary:hover,
[data-mode=black] .btn-primary:hover,
[data-mode=glass] .btn-primary:hover {
  background: linear-gradient(145deg, var(--ql-sage-400) 0%, var(--ql-sage-600) 100%) !important;
  box-shadow: 0 4px 14px rgba(78,117,84,.35) !important;
}
[data-mode=dark] .btn-primary:active,
[data-mode=black] .btn-primary:active {
  transform: scale(.97) !important;
  box-shadow: none !important;
}

/* ── Secondary button ────────────────────────────────────────── */
[data-mode=dark] .btn-secondary,
[data-mode=black] .btn-secondary,
[data-mode=glass] .btn-secondary {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.88) !important;
  box-shadow: none !important;
}
[data-mode=dark] .btn-secondary:hover,
[data-mode=black] .btn-secondary:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: #fff !important;
}
[data-mode=dark] .btn-secondary:active,
[data-mode=black] .btn-secondary:active {
  background: rgba(255,255,255,.06) !important;
}

/* ── Ghost / outline button ──────────────────────────────────── */
[data-mode=dark] .btn-outline,
[data-mode=black] .btn-outline,
[data-mode=glass] .btn-outline {
  background: transparent !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.80) !important;
  box-shadow: none !important;
}
[data-mode=dark] .btn-outline:hover,
[data-mode=black] .btn-outline:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #fff !important;
}
[data-mode=dark] .btn-outline:active,
[data-mode=black] .btn-outline:active {
  background: rgba(255,255,255,.04) !important;
}

/* ── All buttons: disabled state ─────────────────────────────── */
[data-mode=dark] .btn:disabled,
[data-mode=black] .btn:disabled,
[data-mode=glass] .btn:disabled,
[data-mode=dark] .btn[disabled],
[data-mode=black] .btn[disabled],
[data-mode=dark] .btn[aria-disabled=true],
[data-mode=black] .btn[aria-disabled=true] {
  opacity: .35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ── Pills / filter chips ────────────────────────────────────── */
[data-mode=dark] .filter-chip,
[data-mode=black] .filter-chip,
[data-mode=glass] .filter-chip {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.75) !important;
}
[data-mode=dark] .filter-chip:hover,
[data-mode=black] .filter-chip:hover {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
}
[data-mode=dark] .filter-chip:active,
[data-mode=black] .filter-chip:active {
  background: rgba(255,255,255,.05) !important;
  transform: scale(.96) !important;
}
[data-mode=dark] .filter-chip.active,
[data-mode=black] .filter-chip.active {
  background: rgba(78,117,84,.22) !important;
  border-color: rgba(78,117,84,.45) !important;
  color: rgba(150,200,158,.95) !important;
}
[data-mode=dark] .filter-chip.active:hover,
[data-mode=black] .filter-chip.active:hover {
  background: rgba(78,117,84,.30) !important;
  border-color: rgba(78,117,84,.55) !important;
}

/* ── Tab pills ───────────────────────────────────────────────── */
[data-mode=dark] .tab,
[data-mode=black] .tab {
  color: rgba(255,255,255,.55) !important;
  background: transparent !important;
}
[data-mode=dark] .tab:hover,
[data-mode=black] .tab:hover {
  color: rgba(255,255,255,.82) !important;
}
[data-mode=dark] .tab.active,
[data-mode=black] .tab.active {
  color: rgba(255,255,255,.95) !important;
  border-bottom-color: var(--ql-sage-400) !important;
}

/* ── Cal / type chips ────────────────────────────────────────── */
[data-mode=dark] .cal-type-chip,
[data-mode=black] .cal-type-chip,
[data-mode=dark] .cal-qc-type-chip,
[data-mode=black] .cal-qc-type-chip {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.72) !important;
}
[data-mode=dark] .cal-type-chip.active,
[data-mode=black] .cal-type-chip.active,
[data-mode=dark] .cal-qc-type-chip.active,
[data-mode=black] .cal-qc-type-chip.active {
  background: rgba(78,117,84,.20) !important;
  border-color: rgba(78,117,84,.42) !important;
  color: rgba(150,200,158,.95) !important;
}

/* ── View toggle buttons (tasks, calendar) ───────────────────── */
[data-mode=dark] .tasks-view-btn,
[data-mode=black] .tasks-view-btn,
[data-mode=dark] .cal-view-btn,
[data-mode=black] .cal-view-btn,
[data-mode=dark] .docs-view-btn,
[data-mode=black] .docs-view-btn,
[data-mode=dark] .contacts-view-btn,
[data-mode=black] .contacts-view-btn {
  background: transparent !important;
  color: rgba(255,255,255,.60) !important;
}
[data-mode=dark] .tasks-view-btn:hover,
[data-mode=black] .tasks-view-btn:hover,
[data-mode=dark] .cal-view-btn:hover,
[data-mode=black] .cal-view-btn:hover {
  background: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.88) !important;
}
[data-mode=dark] .tasks-view-btn.active,
[data-mode=black] .tasks-view-btn.active,
[data-mode=dark] .cal-view-btn.active,
[data-mode=black] .cal-view-btn.active {
  background: rgba(255,255,255,.11) !important;
  color: rgba(255,255,255,.95) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.08) !important;
}

/* ── Context action bar buttons ──────────────────────────────── */
[data-mode=dark] .ctx-btn,
[data-mode=black] .ctx-btn {
  background: transparent !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.72) !important;
}
[data-mode=dark] .ctx-btn:hover,
[data-mode=black] .ctx-btn:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.92) !important;
}
[data-mode=dark] .ctx-btn:disabled,
[data-mode=black] .ctx-btn:disabled {
  opacity: .30 !important;
  pointer-events: none !important;
}

/* ── Rpt / settings date + section buttons ───────────────────── */
[data-mode=dark] .rpt-date-btn,
[data-mode=black] .rpt-date-btn,
[data-mode=dark] .rpt-section-btn,
[data-mode=black] .rpt-section-btn {
  color: rgba(255,255,255,.65) !important;
  background: transparent !important;
}
[data-mode=dark] .rpt-date-btn:hover,
[data-mode=black] .rpt-date-btn:hover,
[data-mode=dark] .rpt-section-btn:hover,
[data-mode=black] .rpt-section-btn:hover {
  color: rgba(255,255,255,.88) !important;
  background: rgba(255,255,255,.06) !important;
}
[data-mode=dark] .rpt-date-btn.active,
[data-mode=black] .rpt-date-btn.active {
  background: var(--ql-sage-600) !important;
  color: #fff !important;
}
[data-mode=dark] .rpt-section-btn.active,
[data-mode=black] .rpt-section-btn.active {
  color: rgba(150,200,158,.95) !important;
  background: rgba(78,117,84,.14) !important;
}

/* ── Nav items (sidebar pills) ───────────────────────────────── */
[data-mode=dark] .nav-item:not(.active),
[data-mode=black] .nav-item:not(.active) {
  background: transparent !important;
}
[data-mode=dark] .nav-item:not(.active):hover,
[data-mode=black] .nav-item:not(.active):hover {
  background: rgba(255,255,255,.06) !important;
}

/* ── Dash quickbar buttons ───────────────────────────────────── */
[data-mode=dark] .dqb-btn,
[data-mode=black] .dqb-btn {
  background: transparent !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.75) !important;
}
[data-mode=dark] .dqb-btn:hover,
[data-mode=black] .dqb-btn:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.92) !important;
}

/* ═══ DASHBOARD CARDS DARK MODE FIX ═══ */

/* ── Base card elevation ─────────────────────────────────────── */
[data-mode=dark] .card,
[data-mode=black] .card,
[data-mode=dark] .ds-card,
[data-mode=black] .ds-card {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 2px 8px rgba(0,0,0,.40),
    0 1px 3px rgba(0,0,0,.28) !important;
}
[data-mode=dark] .card:hover,
[data-mode=black] .card:hover,
[data-mode=dark] .ds-card:hover,
[data-mode=black] .ds-card:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.13) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.09),
    0 8px 28px rgba(0,0,0,.55),
    0 3px 10px rgba(0,0,0,.32) !important;
}

/* ── Card header / footer ────────────────────────────────────── */
[data-mode=dark] .card-header,
[data-mode=black] .card-header,
[data-mode=dark] .rpt-card-header,
[data-mode=black] .rpt-card-header {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.07) !important;
}
[data-mode=dark] .card-footer,
[data-mode=black] .card-footer {
  background: rgba(0,0,0,.15) !important;
  border-color: rgba(255,255,255,.06) !important;
}

/* ── Card titles ─────────────────────────────────────────────── */
[data-mode=dark] .card-title,
[data-mode=black] .card-title,
[data-mode=dark] .rpt-card-title,
[data-mode=black] .rpt-card-title {
  color: rgba(255,255,255,.95) !important;
}
[data-mode=dark] .card-title .material-icons-round,
[data-mode=black] .card-title .material-icons-round {
  color: rgba(255,255,255,.45) !important;
}

/* ── KPI / stat cards ────────────────────────────────────────── */
[data-mode=dark] .kpi-card,
[data-mode=black] .kpi-card {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 2px 8px rgba(0,0,0,.38) !important;
}
[data-mode=dark] .kpi-card:hover,
[data-mode=black] .kpi-card:hover {
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.13) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.09),
    0 6px 20px rgba(0,0,0,.50) !important;
}
[data-mode=dark] .kpi-value,
[data-mode=black] .kpi-value {
  color: rgba(255,255,255,.96) !important;
}
[data-mode=dark] .kpi-label,
[data-mode=black] .kpi-label {
  color: rgba(255,255,255,.58) !important;
}
[data-mode=dark] .kpi-context,
[data-mode=black] .kpi-context {
  color: rgba(255,255,255,.48) !important;
}
/* Colored stripe stays vivid */
[data-mode=dark] .kpi-stripe,
[data-mode=black] .kpi-stripe {
  opacity: 1 !important;
}

/* ── Exec KPI cards ──────────────────────────────────────────── */
[data-mode=dark] .exec-kpi-card,
[data-mode=black] .exec-kpi-card {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 2px 8px rgba(0,0,0,.38) !important;
}
[data-mode=dark] .exec-kpi-card:hover,
[data-mode=black] .exec-kpi-card:hover {
  border-color: var(--exec-hue, rgba(255,255,255,.18)) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.5) !important;
}
[data-mode=dark] .exec-kpi-value,
[data-mode=black] .exec-kpi-value {
  color: rgba(255,255,255,.95) !important;
}
[data-mode=dark] .exec-kpi-label,
[data-mode=black] .exec-kpi-label {
  color: rgba(255,255,255,.58) !important;
}
[data-mode=dark] .exec-kpi-context,
[data-mode=black] .exec-kpi-context {
  color: rgba(255,255,255,.48) !important;
}
[data-mode=dark] .exec-kpi-stripe,
[data-mode=black] .exec-kpi-stripe {
  opacity: 1 !important;
}

/* ── Stat cards (simple) ─────────────────────────────────────── */
[data-mode=dark] .stat-card,
[data-mode=black] .stat-card {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 2px 8px rgba(0,0,0,.38) !important;
}
[data-mode=dark] .stat-value,
[data-mode=black] .stat-value {
  color: rgba(255,255,255,.96) !important;
}
[data-mode=dark] .stat-label,
[data-mode=black] .stat-label {
  color: rgba(255,255,255,.56) !important;
}

/* ── Pipeline cards ──────────────────────────────────────────── */
[data-mode=dark] .dash-pipe-card,
[data-mode=black] .dash-pipe-card {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.09) !important;
}
[data-mode=dark] .dash-pipe-card:hover,
[data-mode=black] .dash-pipe-card:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(78,117,84,.35) !important;
}
[data-mode=dark] .dash-pipe-count,
[data-mode=black] .dash-pipe-count {
  color: rgba(255,255,255,.95) !important;
}
[data-mode=dark] .dash-pipe-label,
[data-mode=black] .dash-pipe-label {
  color: rgba(255,255,255,.52) !important;
}

/* ── Contact / docs / kanban cards ──────────────────────────── */
[data-mode=dark] .contact-card,
[data-mode=black] .contact-card,
[data-mode=dark] .docs-card,
[data-mode=black] .docs-card,
[data-mode=dark] .kanban-card,
[data-mode=black] .kanban-card {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 2px 8px rgba(0,0,0,.35) !important;
}
[data-mode=dark] .contact-card:hover,
[data-mode=black] .contact-card:hover,
[data-mode=dark] .docs-card:hover,
[data-mode=black] .docs-card:hover,
[data-mode=dark] .kanban-card:hover,
[data-mode=black] .kanban-card:hover {
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 6px 20px rgba(0,0,0,.50) !important;
}

/* ── Rpt KPI cards ───────────────────────────────────────────── */
[data-mode=dark] .rpt-kpi,
[data-mode=black] .rpt-kpi,
[data-mode=dark] .rpt-card,
[data-mode=black] .rpt-card,
[data-mode=dark] .settings-card,
[data-mode=black] .settings-card {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 2px 6px rgba(0,0,0,.32) !important;
}

/* ── Context panel ───────────────────────────────────────────── */
[data-mode=dark] .ctx-panel,
[data-mode=black] .ctx-panel {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 4px 16px rgba(0,0,0,.45) !important;
}

/* ═══ INPUT FIELDS DARK MODE FIX ═══ */

/* ── All inputs, selects, textareas ──────────────────────────── */
[data-mode=dark] .form-input,
[data-mode=black] .form-input,
[data-mode=glass] .form-input,
[data-mode=dark] .form-select,
[data-mode=black] .form-select,
[data-mode=glass] .form-select,
[data-mode=dark] .form-textarea,
[data-mode=black] .form-textarea,
[data-mode=glass] .form-textarea {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: none !important;
}

/* ── Placeholder ─────────────────────────────────────────────── */
[data-mode=dark] .form-input::placeholder,
[data-mode=black] .form-input::placeholder,
[data-mode=glass] .form-input::placeholder,
[data-mode=dark] .form-textarea::placeholder,
[data-mode=black] .form-textarea::placeholder {
  color: rgba(255,255,255,.38) !important;
  opacity: 1 !important;
}

/* ── Focus state ─────────────────────────────────────────────── */
[data-mode=dark] .form-input:focus,
[data-mode=black] .form-input:focus,
[data-mode=glass] .form-input:focus,
[data-mode=dark] .form-select:focus,
[data-mode=black] .form-select:focus,
[data-mode=dark] .form-textarea:focus,
[data-mode=black] .form-textarea:focus {
  background: rgba(255,255,255,.10) !important;
  border-color: var(--ql-sage-400) !important;
  box-shadow: 0 0 0 3px rgba(78,117,84,.22) !important;
  outline: 0 !important;
}

/* ── Search inputs (toolbar variants) ───────────────────────── */
[data-mode=dark] .tx-search-input,
[data-mode=black] .tx-search-input,
[data-mode=dark] .dash-search-input,
[data-mode=black] .dash-search-input,
[data-mode=dark] .contacts-search-input,
[data-mode=black] .contacts-search-input,
[data-mode=dark] .docs-search-input,
[data-mode=black] .docs-search-input,
[data-mode=dark] .tasks-search-input,
[data-mode=black] .tasks-search-input,
[data-mode=dark] .header-search-input,
[data-mode=black] .header-search-input,
[data-mode=dark] .gs-input,
[data-mode=black] .gs-input,
[data-mode=dark] .cal-modal-title-input,
[data-mode=black] .cal-modal-title-input {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
}
[data-mode=dark] .tx-search-input::placeholder,
[data-mode=black] .tx-search-input::placeholder,
[data-mode=dark] .dash-search-input::placeholder,
[data-mode=black] .dash-search-input::placeholder,
[data-mode=dark] .contacts-search-input::placeholder,
[data-mode=black] .contacts-search-input::placeholder,
[data-mode=dark] .docs-search-input::placeholder,
[data-mode=black] .docs-search-input::placeholder,
[data-mode=dark] .tasks-search-input::placeholder,
[data-mode=black] .tasks-search-input::placeholder,
[data-mode=dark] .header-search-input::placeholder,
[data-mode=black] .header-search-input::placeholder,
[data-mode=dark] .gs-input::placeholder,
[data-mode=black] .gs-input::placeholder {
  color: rgba(255,255,255,.38) !important;
  opacity: 1 !important;
}
[data-mode=dark] .tx-search-input:focus,
[data-mode=black] .tx-search-input:focus,
[data-mode=dark] .dash-search-input:focus,
[data-mode=black] .dash-search-input:focus,
[data-mode=dark] .contacts-search-input:focus,
[data-mode=black] .contacts-search-input:focus,
[data-mode=dark] .docs-search-input:focus,
[data-mode=black] .docs-search-input:focus,
[data-mode=dark] .tasks-search-input:focus,
[data-mode=black] .tasks-search-input:focus {
  background: rgba(255,255,255,.10) !important;
  border-color: var(--ql-sage-400) !important;
  box-shadow: 0 0 0 3px rgba(78,117,84,.22) !important;
}

/* ── Form label ──────────────────────────────────────────────── */
[data-mode=dark] .form-label,
[data-mode=black] .form-label {
  color: rgba(255,255,255,.68) !important;
}
[data-mode=dark] .form-group:focus-within .form-label,
[data-mode=black] .form-group:focus-within .form-label {
  color: var(--ql-sage-300) !important;
}

/* ── Form hint ───────────────────────────────────────────────── */
[data-mode=dark] .form-hint,
[data-mode=black] .form-hint {
  color: rgba(255,255,255,.44) !important;
}

/* ── Select arrow (native select) ────────────────────────────── */
[data-mode=dark] .form-select,
[data-mode=black] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 12px center !important;
}

/* ── Tasks status select ─────────────────────────────────────── */
[data-mode=dark] .tasks-status-select,
[data-mode=black] .tasks-status-select {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.78) !important;
}
[data-mode=dark] .tasks-status-select:focus,
[data-mode=black] .tasks-status-select:focus {
  border-color: var(--ql-sage-400) !important;
  box-shadow: 0 0 0 3px rgba(78,117,84,.20) !important;
}

/* ── Cal time dropdown inputs ────────────────────────────────── */
[data-mode=dark] .cal-time-dd-btn,
[data-mode=black] .cal-time-dd-btn {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.80) !important;
}
[data-mode=dark] .cal-time-dd.open .cal-time-dd-btn,
[data-mode=black] .cal-time-dd.open .cal-time-dd-btn {
  border-color: var(--ql-sage-400) !important;
  box-shadow: 0 0 0 2px rgba(78,117,84,.20) !important;
}
[data-mode=dark] .cal-time-dd-list,
[data-mode=black] .cal-time-dd-list {
  background: var(--bg-surface) !important;
  border-color: rgba(255,255,255,.10) !important;
}
[data-mode=dark] .cal-time-dd-item,
[data-mode=black] .cal-time-dd-item {
  color: rgba(255,255,255,.78) !important;
}
[data-mode=dark] .cal-time-dd-item:hover,
[data-mode=black] .cal-time-dd-item:hover {
  background: rgba(255,255,255,.07) !important;
}
[data-mode=dark] .cal-time-dd-item.selected,
[data-mode=black] .cal-time-dd-item.selected {
  background: rgba(78,117,84,.18) !important;
  color: rgba(150,200,158,.95) !important;
}

/* ── Global search panel input ───────────────────────────────── */
[data-mode=dark] .gs-input-wrap,
[data-mode=black] .gs-input-wrap {
  border-color: rgba(255,255,255,.08) !important;
}
[data-mode=dark] .gs-search-icon-wrap .material-icons-round,
[data-mode=black] .gs-search-icon-wrap .material-icons-round {
  color: rgba(255,255,255,.40) !important;
}

/* ═══ COMPREHENSIVE AUDIT FIX ═══ */
/* Root cause: --ql-warm-50, --ql-sage-50, --navy-50 are light-only.
   Overriding them here fixes 165+ component backgrounds in one shot. */

[data-mode=dark],
[data-mode=black],
[data-mode=glass] {
  /* Light palette vars — make them dark-safe */
  --ql-warm-50:  rgba(255,255,255,0.04);
  --ql-warm-100: rgba(255,255,255,0.06);
  --ql-warm-200: rgba(255,255,255,0.08);
  --ql-warm-300: rgba(255,255,255,0.12);
  --ql-sage-50:  rgba(78,117,84,0.10);
  --ql-sage-100: rgba(78,117,84,0.14);
  --navy-50:     rgba(77,103,147,0.12);
  --navy-100:    rgba(77,103,147,0.18);
  --gray-25:     rgba(255,255,255,0.02);
  --gray-50:     rgba(255,255,255,0.03);
  --gray-75:     rgba(255,255,255,0.045);
  --gray-100:    rgba(255,255,255,0.06);
  --gray-200:    rgba(255,255,255,0.08);

  /* Status backgrounds — make them dark-safe */
  --danger-50:   rgba(239,68,68,0.12);
  --warning-50:  rgba(234,179,8,0.10);
  --info-50:     rgba(59,130,246,0.10);
  --success-50:  rgba(16,185,129,0.10);
}

/* ── Specific hardcoded color fixes ──────────────────────────── */

/* ddp urgency overdue: #fef2f2 → dark-safe */
[data-mode=dark] .ddp-urgency-overdue,
[data-mode=black] .ddp-urgency-overdue {
  background: rgba(239,68,68,0.14) !important;
  color: #fca5a5 !important;
}
[data-mode=dark] .ddp-urgency-critical,
[data-mode=black] .ddp-urgency-critical {
  background: rgba(239,68,68,0.14) !important;
  color: #fca5a5 !important;
}

/* Pricing current plan: #f0fdf4 → dark-safe */
[data-mode=dark] .pp-plan-card.pp-current,
[data-mode=black] .pp-plan-card.pp-current {
  background: rgba(16,185,129,0.10) !important;
  border-color: rgba(34,197,94,0.35) !important;
}

/* Signature canvas: must stay white (functional requirement) */
/* sig-canvas, sig-display — intentionally left white (digital signature area) */

/* Toggle slider knobs (#fff) — correct, intentional — left as-is */

/* Print styles — correct, intentional — left as-is */

/* ── Light hover states still leaking ────────────────────────── */
/* These use the variables above, but some are hardcoded inline */

[data-mode=dark] .txd-conflict-banner,
[data-mode=black] .txd-conflict-banner {
  background: rgba(234,179,8,0.10) !important;
  border-color: rgba(251,191,36,0.40) !important;
  color: rgba(255,255,255,0.88) !important;
}

[data-mode=dark] .modal-footer,
[data-mode=black] .modal-footer {
  background: rgba(255,255,255,0.02) !important;
}

/* ── Inline background:white in portal/pricing pages ─────────── */
[data-mode=dark] .portal-page,
[data-mode=black] .portal-page,
[data-mode=dark] .pricing-page,
[data-mode=black] .pricing-page {
  background: var(--bg-app) !important;
  color: var(--text-primary) !important;
}

/* ── Time tracking ───────────────────────────────────────────── */
[data-mode=dark] .tt-card,
[data-mode=black] .tt-card,
[data-mode=dark] .tt-entry-row,
[data-mode=black] .tt-entry-row {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
[data-mode=dark] .tt-entry-row:hover,
[data-mode=black] .tt-entry-row:hover {
  background: rgba(255,255,255,0.07) !important;
}

/* ── Lexbinder ───────────────────────────────────────────────── */
[data-mode=dark] .lb-panel,
[data-mode=black] .lb-panel {
  background: var(--bg-surface) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ── Mobile touch targets ────────────────────────────────────── */
[data-mode=dark] .touch-menu,
[data-mode=black] .touch-menu {
  background: var(--bg-surface) !important;
}