/* ==========================================================================
   CherryAI Dark Mode Compliance Layer
   MUST LOAD LAST — overrides all light-mode surfaces for detail/form screens
   Selector: html.dark (set by theme-toggle.js)
   ========================================================================== */

/* ---------- Semantic Tokens (dark palette only) ---------- */
html.dark {
  --dc-bg:             #080c14;
  --dc-surface-1:      #0f1726;
  --dc-surface-2:      #111827;
  --dc-surface-3:      #1e293b;
  --dc-border:         rgba(255,255,255,0.08);
  --dc-border-strong:  rgba(255,255,255,0.14);
  --dc-text-1:         #f1f5f9;
  --dc-text-2:         #94a3b8;
  --dc-text-3:         #64748b;
  --dc-input-bg:       #0f172a;
  --dc-input-border:   rgba(255,255,255,0.12);
  --dc-focus-ring:     rgba(207,51,57,0.5);
  --dc-tab-bg:         transparent;
  --dc-tab-text:       #94a3b8;
  --dc-tab-active:     #cf3339;
  --dc-badge-bg:       rgba(255,255,255,0.08);
  --dc-badge-text:     #e2e8f0;
}

/* ===== 1. SECTION CARDS / PANELS / FIELDSETS ===== */
html.dark .premium-tabs,
html.dark .premium-tabs > form,
html.dark .premium-tabs .tab-panel,
html.dark .premium-tabs .form-section,
html.dark .section-card,
html.dark .card,
html.dark .card-body,
html.dark .card-header,
html.dark .card-footer,
html.dark .detail-section,
html.dark .asset-header-card,
html.dark .activity-timeline-card,
html.dark .detail-card,
html.dark .info-card,
html.dark .panel,
html.dark fieldset,
html.dark .help-section,
html.dark .form-actions,
html.dark .list-group-item {
  background: #111827 !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #f1f5f9 !important;
}

html.dark .section-card-header,
html.dark .card-header {
  background-color: var(--dc-surface-1) !important;
  border-color: var(--dc-border) !important;
}

html.dark .premium-hero-header,
html.dark .screen-header,
html.dark .page-hero {
  background-color: var(--dc-surface-2) !important;
  background-image: none !important;
  border-color: var(--dc-border) !important;
}

/* ===== 2. FORM SECTIONS & DIVIDERS ===== */
html.dark .form-section {
  border-color: var(--dc-border) !important;
  color: var(--dc-text-1) !important;
}

html.dark .form-row,
html.dark .form-group {
  color: var(--dc-text-1) !important;
}

/* ===== 3. HEADINGS / SECTION TITLES ===== */
html.dark .form-section-title,
html.dark .section-card-title {
  color: var(--dc-text-1) !important;
  -webkit-text-fill-color: var(--dc-text-1) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* ===== 4. LABELS ===== */
html.dark .form-label,
html.dark label,
html.dark .form-group label,
html.dark .form-group .form-label,
html.dark .form-section .form-group label,
html.dark .form-section .form-group .form-label,
html.dark .form-row .form-group label,
html.dark .premium-tabs label,
html.dark .premium-tabs .form-label,
html.dark .tab-panel label,
html.dark .tab-panel .form-label {
  color: var(--dc-text-2) !important;
  -webkit-text-fill-color: var(--dc-text-2) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* ===== 5. DATA VALUES (the critical fix) ===== */
html.dark .form-value,
html.dark div.form-value,
html.dark .form-group .form-value,
html.dark .form-row .form-group .form-value,
html.dark .form-section .form-group .form-value,
html.dark .tab-content .form-group .form-value,
html.dark .tab-content .form-section .form-group .form-value,
html.dark .premium-tabs .form-value,
html.dark .premium-tabs .form-group .form-value,
html.dark .premium-tabs .form-section .form-group .form-value,
html.dark .premium-tabs .tab-content .form-section .form-group .form-value,
html.dark .premium-tabs .tab-panel .form-section .form-group .form-value {
  color: var(--dc-text-1) !important;
  -webkit-text-fill-color: var(--dc-text-1) !important;
}

html.dark .form-value.empty {
  color: var(--dc-text-3) !important;
  -webkit-text-fill-color: var(--dc-text-3) !important;
}

html.dark .text-muted,
html.dark .text-secondary {
  color: var(--dc-text-2) !important;
}

/* ===== 6. INPUTS / SELECTS / TEXTAREAS ===== */
html.dark .form-control,
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html.dark select,
html.dark textarea {
  background-color: var(--dc-input-bg) !important;
  background-image: none !important;
  border-color: var(--dc-input-border) !important;
  color: var(--dc-text-1) !important;
  -webkit-text-fill-color: var(--dc-text-1) !important;
}

html.dark .form-control:focus,
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: var(--dc-tab-active) !important;
  box-shadow: 0 0 0 3px var(--dc-focus-ring) !important;
}

html.dark .form-control::placeholder,
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: var(--dc-text-3) !important;
  -webkit-text-fill-color: var(--dc-text-3) !important;
}

/* ===== 7. TABS ===== */
html.dark .tab-nav {
  background-color: var(--dc-surface-2) !important;
  border-color: var(--dc-border) !important;
}

html.dark .tab-nav__item,
html.dark .wo-tab-link,
html.dark .nav-tabs .nav-link {
  color: var(--dc-tab-text) !important;
}

html.dark .tab-nav__item--active,
html.dark .tab-nav__item.tab-nav__item--active,
html.dark .wo-tab-link.tab-nav__item--active,
html.dark .nav-tabs .nav-link.active {
  color: var(--dc-tab-active) !important;
  border-bottom-color: var(--dc-tab-active) !important;
}

html.dark .tab-panel,
html.dark .tab-content {
  background-color: var(--dc-surface-2) !important;
  color: var(--dc-text-1) !important;
}

/* ===== 8. TABLES ===== */
html.dark table,
html.dark .table {
  color: var(--dc-text-1) !important;
}

html.dark table thead,
html.dark .table thead,
html.dark table thead th,
html.dark .table thead th {
  background-color: var(--dc-surface-1) !important;
  color: var(--dc-text-2) !important;
  border-color: var(--dc-border) !important;
}

html.dark table td,
html.dark .table td,
html.dark table th,
html.dark .table th {
  border-color: var(--dc-border) !important;
}

html.dark table tbody tr:hover,
html.dark .table tbody tr:hover {
  background-color: rgba(207,51,57,0.06) !important;
}

html.dark .table-responsive {
  background-color: var(--dc-surface-2) !important;
}

/* ===== 9. BADGES / CHIPS ===== */
html.dark .badge,
html.dark .status-badge,
html.dark .badge-secondary {
  background-color: var(--dc-badge-bg) !important;
  color: var(--dc-badge-text) !important;
}

html.dark .badge-success { background-color: rgba(16,185,129,0.2) !important; color: #6ee7b7 !important; }
html.dark .badge-danger  { background-color: rgba(239,68,68,0.2) !important; color: #fca5a5 !important; }
html.dark .badge-warning { background-color: rgba(245,158,11,0.2) !important; color: #fcd34d !important; }
html.dark .badge-info    { background-color: rgba(59,130,246,0.2) !important; color: #93c5fd !important; }

/* ===== 10. MODALS / DROPDOWNS / ALERTS ===== */
html.dark .modal-content {
  background-color: var(--dc-surface-3) !important;
  border-color: var(--dc-border) !important;
  color: var(--dc-text-1) !important;
}

html.dark .dropdown-menu {
  background-color: var(--dc-surface-3) !important;
  border-color: var(--dc-border) !important;
}
html.dark .dropdown-item { color: var(--dc-text-1) !important; }
html.dark .dropdown-item:hover { background-color: var(--dc-surface-2) !important; }

html.dark .alert {
  background-color: var(--dc-surface-3) !important;
  border-color: var(--dc-border) !important;
  color: var(--dc-text-1) !important;
}

/* ===== 11. KPI / STAT TILES (glossy elevated) ===== */
html.dark .kpi-stat-card,
html.dark .quick-stat-card,
html.dark .kpi-card,
html.dark .stat-card {
  background: linear-gradient(145deg, #1a2332 0%, #151c28 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07),
              inset 0 -1px 0 rgba(0,0,0,0.2),
              0 4px 16px rgba(0,0,0,0.5) !important;
  color: var(--dc-text-1) !important;
}

/* ===== 12. DASHBOARD ALERTS & TIMELINE ===== */
html.dark .alert-card,
html.dark .alert-danger,
html.dark .alert-warning {
  background: var(--dc-surface-2) !important;
  border-color: var(--dc-border) !important;
}

html.dark .quick-action-card {
  background: var(--dc-surface-2) !important;
  border-color: var(--dc-border) !important;
  color: var(--dc-text-1) !important;
}

html.dark .timeline-icon.neutral,
html.dark .activity-feed-icon.neutral {
  background: var(--dc-surface-3) !important;
  color: var(--dc-text-2) !important;
}

html.dark .timeline-icon.success,
html.dark .activity-feed-icon.success {
  background: rgba(16,185,129,0.15) !important;
  color: #6ee7b7 !important;
}

html.dark .timeline-icon.primary,
html.dark .activity-feed-icon.primary {
  background: rgba(59,130,246,0.15) !important;
  color: #93c5fd !important;
}

html.dark .timeline-icon.danger,
html.dark .activity-feed-icon.danger {
  background: rgba(239,68,68,0.15) !important;
  color: #fca5a5 !important;
}

html.dark .timeline-icon.warning,
html.dark .activity-feed-icon.warning {
  background: rgba(245,158,11,0.15) !important;
  color: #fcd34d !important;
}

html.dark .timeline-icon.info,
html.dark .activity-feed-icon.info {
  background: rgba(14,165,233,0.15) !important;
  color: #7dd3fc !important;
}

html.dark .timeline-icon.purple,
html.dark .activity-feed-icon.purple {
  background: rgba(124,58,237,0.15) !important;
  color: #c4b5fd !important;
}

/* ===== 13. STAT ICON DARK VARIANTS ===== */
html.dark .quick-stat-icon.primary { background: rgba(59,130,246,0.15) !important; color: #93c5fd !important; }
html.dark .quick-stat-icon.success { background: rgba(34,197,94,0.15) !important; color: #86efac !important; }
html.dark .quick-stat-icon.warning { background: rgba(245,158,11,0.15) !important; color: #fcd34d !important; }
html.dark .quick-stat-icon.danger  { background: rgba(239,68,68,0.15) !important; color: #fca5a5 !important; }
html.dark .quick-stat-icon.info    { background: rgba(14,165,233,0.15) !important; color: #7dd3fc !important; }
html.dark .quick-stat-icon.purple  { background: rgba(139,92,246,0.15) !important; color: #c4b5fd !important; }
html.dark .quick-stat-icon.pink    { background: rgba(236,72,153,0.15) !important; color: #f9a8d4 !important; }

/* ===== 14. MISC ===== */
html.dark hr {
  border-color: var(--dc-border) !important;
}

html.dark kbd {
  background-color: var(--dc-surface-3) !important;
  color: var(--dc-text-1) !important;
}

html.dark .btn-secondary,
html.dark .btn-outline-secondary {
  background-color: var(--dc-surface-3) !important;
  border-color: var(--dc-border-strong) !important;
  color: var(--dc-text-1) !important;
}

/* ===== 13. NUCLEAR: Inline style attribute overrides ===== */
html.dark [style*="background: white"],
html.dark [style*="background: #fff"],
html.dark [style*="background: #ffffff"],
html.dark [style*="background-color: white"],
html.dark [style*="background-color: #fff"],
html.dark [style*="background-color: #ffffff"],
html.dark [style*="background:#fff"],
html.dark [style*="background:#ffffff"],
html.dark [style*="background: #f8fafc"],
html.dark [style*="background: #f1f5f9"],
html.dark [style*="background: #f0f9ff"],
html.dark [style*="background: #f3f4f6"],
html.dark [style*="background: #f5f5f5"],
html.dark [style*="background:#f8fafc"],
html.dark [style*="background:#f1f5f9"],
html.dark [style*="background:#f3f4f6"] {
  background: var(--dc-surface-2) !important;
}

html.dark [style*="color: #1e293b"],
html.dark [style*="color: #334155"],
html.dark [style*="color: #374151"],
html.dark [style*="color: #475569"],
html.dark [style*="color:#1e293b"],
html.dark [style*="color:#334155"],
html.dark [style*="color:#374151"],
html.dark [style*="color:#475569"] {
  color: var(--dc-text-1) !important;
}

html.dark [style*="border-color: #e2e8f0"],
html.dark [style*="border-color: #e5e7eb"],
html.dark [style*="border-color: #f1f5f9"],
html.dark [style*="border: 1px solid #e2e8f0"],
html.dark [style*="border: 1px solid #e5e7eb"] {
  border-color: var(--dc-border) !important;
}