/**
 * IdeaDunes Dark Mode — Inline Style Overrides
 * 
 * Overrides hardcoded inline style="color:#xxx" / style="background:#xxx"
 * across 55+ dashboard PHP files. Uses !important because inline styles
 * have highest specificity and cannot be overridden otherwise.
 *
 * This file should be loaded AFTER dark-mode.css.
 *
 * Organized by:
 *   1. Hero banners (gradients)
 *   2. Inline text colors
 *   3. Inline background colors
 *   4. Module-specific overrides
 */

/* ========================================================
   1. HERO BANNERS — Common gradient pattern across modules
   ======================================================== */

html[data-theme="dark"] [style*="linear-gradient(135deg"],
html.dark-mode [style*="linear-gradient(135deg"] {
  background: linear-gradient(135deg, #3d2a51 0%, #2d1e3b 100%) !important;
}

/* Module hero sections — all use similar gradient pattern */
html[data-theme="dark"] .gs-hero,
html[data-theme="dark"] .wb-hero,
html[data-theme="dark"] .ui-hero,
html[data-theme="dark"] .uo-hero,
html[data-theme="dark"] .lm-hero,
html[data-theme="dark"] .at-hero,
html[data-theme="dark"] .nh-hero,
html[data-theme="dark"] .le-hero,
html[data-theme="dark"] .ac-hero,
html[data-theme="dark"] .cc-hero,
html[data-theme="dark"] .mhub-hero,
html[data-theme="dark"] .sm-hero,
html[data-theme="dark"] .sb-hero,
html.dark-mode .gs-hero,
html.dark-mode .wb-hero,
html.dark-mode .ui-hero,
html.dark-mode .uo-hero,
html.dark-mode .lm-hero,
html.dark-mode .at-hero,
html.dark-mode .nh-hero,
html.dark-mode .le-hero,
html.dark-mode .ac-hero,
html.dark-mode .cc-hero,
html.dark-mode .mhub-hero,
html.dark-mode .sm-hero,
html.dark-mode .sb-hero {
  background: linear-gradient(135deg, #3d2a51 0%, #2d1e3b 100%) !important;
  color: #e8e8e8 !important;
}

/* Ensure hero text/headings are visible */
html[data-theme="dark"] [class*="-hero"] h1,
html[data-theme="dark"] [class*="-hero"] h2,
html[data-theme="dark"] [class*="-hero"] h3,
html[data-theme="dark"] [class*="-hero"] p,
html.dark-mode [class*="-hero"] h1,
html.dark-mode [class*="-hero"] h2,
html.dark-mode [class*="-hero"] h3,
html.dark-mode [class*="-hero"] p {
  color: #e8e8e8 !important;
}

/* ========================================================
   2. INLINE TEXT COLORS — Override common inline color:#hex
   ======================================================== */

/* Muted text grays: #666, #888, #999, #777, #555 */
html[data-theme="dark"] [style*="color:#666"],
html[data-theme="dark"] [style*="color: #666"],
html[data-theme="dark"] [style*="color:#888"],
html[data-theme="dark"] [style*="color: #888"],
html[data-theme="dark"] [style*="color:#999"],
html[data-theme="dark"] [style*="color: #999"],
html[data-theme="dark"] [style*="color:#777"],
html[data-theme="dark"] [style*="color: #777"],
html[data-theme="dark"] [style*="color:#555"],
html[data-theme="dark"] [style*="color: #555"],
html.dark-mode [style*="color:#666"],
html.dark-mode [style*="color: #666"],
html.dark-mode [style*="color:#888"],
html.dark-mode [style*="color: #888"],
html.dark-mode [style*="color:#999"],
html.dark-mode [style*="color: #999"],
html.dark-mode [style*="color:#777"],
html.dark-mode [style*="color: #777"],
html.dark-mode [style*="color:#555"],
html.dark-mode [style*="color: #555"] {
  color: var(--color-text-muted) !important;
}

/* Dark text: #333, #14213d */
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #333"],
html[data-theme="dark"] [style*="color:#14213d"],
html[data-theme="dark"] [style*="color: #14213d"],
html.dark-mode [style*="color:#333"],
html.dark-mode [style*="color: #333"],
html.dark-mode [style*="color:#14213d"],
html.dark-mode [style*="color: #14213d"] {
  color: var(--color-text-primary) !important;
}

/* Brand primary: #6c587b */
html[data-theme="dark"] [style*="color:#6c587b"],
html[data-theme="dark"] [style*="color: #6c587b"],
html[data-theme="dark"] [style*="color:#5a4868"],
html[data-theme="dark"] [style*="color: #5a4868"],
html.dark-mode [style*="color:#6c587b"],
html.dark-mode [style*="color: #6c587b"],
html.dark-mode [style*="color:#5a4868"],
html.dark-mode [style*="color: #5a4868"] {
  color: var(--color-highlight) !important;
}

/* ========================================================
   3. INLINE BACKGROUND COLORS — Override common bg:#hex
   ======================================================== */

/* White backgrounds: #fff, #ffffff */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html.dark-mode [style*="background:#fff"],
html.dark-mode [style*="background: #fff"],
html.dark-mode [style*="background-color:#fff"],
html.dark-mode [style*="background-color: #fff"],
html.dark-mode [style*="background:#ffffff"],
html.dark-mode [style*="background: #ffffff"] {
  background: var(--color-bg-primary) !important;
}

/* Light gray backgrounds: #f8f9fa, #f5f7fb, #f0f0f0, #eee, #f8f6fa */
html[data-theme="dark"] [style*="background:#f8f9fa"],
html[data-theme="dark"] [style*="background: #f8f9fa"],
html[data-theme="dark"] [style*="background:#f5f7fb"],
html[data-theme="dark"] [style*="background: #f5f7fb"],
html[data-theme="dark"] [style*="background:#f0f0f0"],
html[data-theme="dark"] [style*="background: #f0f0f0"],
html[data-theme="dark"] [style*="background:#eee"],
html[data-theme="dark"] [style*="background: #eee"],
html[data-theme="dark"] [style*="background:#f8f6fa"],
html[data-theme="dark"] [style*="background: #f8f6fa"],
html[data-theme="dark"] [style*="background:#f0ecf3"],
html[data-theme="dark"] [style*="background: #f0ecf3"],
html.dark-mode [style*="background:#f8f9fa"],
html.dark-mode [style*="background: #f8f9fa"],
html.dark-mode [style*="background:#f5f7fb"],
html.dark-mode [style*="background: #f5f7fb"],
html.dark-mode [style*="background:#f0f0f0"],
html.dark-mode [style*="background: #f0f0f0"],
html.dark-mode [style*="background:#eee"],
html.dark-mode [style*="background: #eee"],
html.dark-mode [style*="background:#f8f6fa"],
html.dark-mode [style*="background: #f8f6fa"],
html.dark-mode [style*="background:#f0ecf3"],
html.dark-mode [style*="background: #f0ecf3"] {
  background: var(--color-bg-secondary) !important;
}

/* Colored tint backgrounds — map to dark-safe tints */
html[data-theme="dark"] [style*="background:#e8f0fe"],
html[data-theme="dark"] [style*="background: #e8f0fe"],
html[data-theme="dark"] [style*="background:#e3f2fd"],
html.dark-mode [style*="background:#e8f0fe"],
html.dark-mode [style*="background: #e8f0fe"],
html.dark-mode [style*="background:#e3f2fd"] {
  background: rgba(41, 182, 246, 0.12) !important;
}

html[data-theme="dark"] [style*="background:#e6f4f1"],
html[data-theme="dark"] [style*="background: #e6f4f1"],
html[data-theme="dark"] [style*="background:#e8f8f0"],
html[data-theme="dark"] [style*="background: #e8f8f0"],
html[data-theme="dark"] [style*="background:#d1fae5"],
html[data-theme="dark"] [style*="background: #d1fae5"],
html[data-theme="dark"] [style*="background:#e8f5e9"],
html[data-theme="dark"] [style*="background: #e8f5e9"],
html[data-theme="dark"] [style*="background:#e6f9f0"],
html[data-theme="dark"] [style*="background: #e6f9f0"],
html.dark-mode [style*="background:#e6f4f1"],
html.dark-mode [style*="background: #e6f4f1"],
html.dark-mode [style*="background:#e8f8f0"],
html.dark-mode [style*="background: #e8f8f0"],
html.dark-mode [style*="background:#d1fae5"],
html.dark-mode [style*="background: #d1fae5"],
html.dark-mode [style*="background:#e8f5e9"],
html.dark-mode [style*="background: #e8f5e9"],
html.dark-mode [style*="background:#e6f9f0"],
html.dark-mode [style*="background: #e6f9f0"] {
  background: rgba(76, 175, 80, 0.12) !important;
}

html[data-theme="dark"] [style*="background:#fef3ec"],
html[data-theme="dark"] [style*="background: #fef3ec"],
html[data-theme="dark"] [style*="background:#fdf2e9"],
html[data-theme="dark"] [style*="background: #fdf2e9"],
html[data-theme="dark"] [style*="background:#fef9e7"],
html[data-theme="dark"] [style*="background: #fef9e7"],
html.dark-mode [style*="background:#fef3ec"],
html.dark-mode [style*="background: #fef3ec"],
html.dark-mode [style*="background:#fdf2e9"],
html.dark-mode [style*="background: #fdf2e9"],
html.dark-mode [style*="background:#fef9e7"],
html.dark-mode [style*="background: #fef9e7"] {
  background: rgba(255, 183, 77, 0.12) !important;
}

html[data-theme="dark"] [style*="background:#f3e5f5"],
html[data-theme="dark"] [style*="background: #f3e5f5"],
html[data-theme="dark"] [style*="background:#f0e6f6"],
html[data-theme="dark"] [style*="background: #f0e6f6"],
html[data-theme="dark"] [style*="background:#f3eef8"],
html[data-theme="dark"] [style*="background: #f3eef8"],
html[data-theme="dark"] [style*="background:#f8f0ff"],
html[data-theme="dark"] [style*="background: #f8f0ff"],
html.dark-mode [style*="background:#f3e5f5"],
html.dark-mode [style*="background: #f3e5f5"],
html.dark-mode [style*="background:#f0e6f6"],
html.dark-mode [style*="background: #f0e6f6"],
html.dark-mode [style*="background:#f3eef8"],
html.dark-mode [style*="background: #f3eef8"],
html.dark-mode [style*="background:#f8f0ff"],
html.dark-mode [style*="background: #f8f0ff"] {
  background: rgba(167, 143, 191, 0.15) !important;
}

html[data-theme="dark"] [style*="background:#fdedee"],
html[data-theme="dark"] [style*="background: #fdedee"],
html[data-theme="dark"] [style*="background:#fdd"],
html[data-theme="dark"] [style*="background: #fdd"],
html.dark-mode [style*="background:#fdedee"],
html.dark-mode [style*="background: #fdedee"],
html.dark-mode [style*="background:#fdd"],
html.dark-mode [style*="background: #fdd"] {
  background: rgba(239, 83, 80, 0.12) !important;
}

html[data-theme="dark"] [style*="background:#e8f4fd"],
html[data-theme="dark"] [style*="background: #e8f4fd"],
html[data-theme="dark"] [style*="background:#f0f9ff"],
html[data-theme="dark"] [style*="background: #f0f9ff"],
html.dark-mode [style*="background:#e8f4fd"],
html.dark-mode [style*="background: #e8f4fd"],
html.dark-mode [style*="background:#f0f9ff"],
html.dark-mode [style*="background: #f0f9ff"] {
  background: rgba(41, 182, 246, 0.12) !important;
}

/* Amber/warning light backgrounds */
html[data-theme="dark"] [style*="background:#fef3c7"],
html[data-theme="dark"] [style*="background: #fef3c7"],
html[data-theme="dark"] [style*="background:#fde68a"],
html[data-theme="dark"] [style*="background: #fde68a"],
html.dark-mode [style*="background:#fef3c7"],
html.dark-mode [style*="background: #fef3c7"],
html.dark-mode [style*="background:#fde68a"],
html.dark-mode [style*="background: #fde68a"] {
  background: rgba(245, 158, 11, 0.15) !important;
}

/* ========================================================
   4. INLINE BORDER OVERRIDES
   ======================================================== */

html[data-theme="dark"] [style*="border-color:#ddd"],
html[data-theme="dark"] [style*="border-color: #ddd"],
html[data-theme="dark"] [style*="border-color:#ccc"],
html[data-theme="dark"] [style*="border-color: #ccc"],
html[data-theme="dark"] [style*="border-color:#e0e0e0"],
html[data-theme="dark"] [style*="border-color: #e0e0e0"],
html.dark-mode [style*="border-color:#ddd"],
html.dark-mode [style*="border-color: #ddd"],
html.dark-mode [style*="border-color:#ccc"],
html.dark-mode [style*="border-color: #ccc"],
html.dark-mode [style*="border-color:#e0e0e0"],
html.dark-mode [style*="border-color: #e0e0e0"] {
  border-color: var(--color-border) !important;
}

/* ========================================================
   5. MODULE-SPECIFIC DARK MODE OVERRIDES
   ======================================================== */

/* AI Services module — many icon/feature backgrounds */
html[data-theme="dark"] .ai-feature-card,
html[data-theme="dark"] .ai-service-card,
html.dark-mode .ai-feature-card,
html.dark-mode .ai-service-card {
  background: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
}

/* Modules Hub — category cards */
html[data-theme="dark"] .mhub-category-card,
html[data-theme="dark"] [class*="mhub-card"],
html.dark-mode .mhub-category-card,
html.dark-mode [class*="mhub-card"] {
  background: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

/* Checkout page */
html[data-theme="dark"] .checkout-summary,
html[data-theme="dark"] .checkout-card,
html.dark-mode .checkout-summary,
html.dark-mode .checkout-card {
  background: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
}

/* Monitoring/status cards */
html[data-theme="dark"] .monitor-card,
html[data-theme="dark"] .status-card,
html.dark-mode .monitor-card,
html.dark-mode .status-card {
  background: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
}

/* Invoice styling */
html[data-theme="dark"] .invoice-header,
html[data-theme="dark"] .invoice-body,
html[data-theme="dark"] .invoice-footer,
html.dark-mode .invoice-header,
html.dark-mode .invoice-body,
html.dark-mode .invoice-footer {
  background: var(--color-bg-primary) !important;
  color: var(--color-text-primary) !important;
}

/* Proposal view */
html[data-theme="dark"] .proposal-cover,
html.dark-mode .proposal-cover {
  background: linear-gradient(135deg, #3d2a51, #1e1e2e) !important;
}

html[data-theme="dark"] .phase-header,
html.dark-mode .phase-header {
  background: var(--color-bg-secondary) !important;
  border-left-color: var(--color-highlight) !important;
}

html[data-theme="dark"] .summary-box,
html.dark-mode .summary-box {
  background: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
}

/* Products/webstore cards */
html[data-theme="dark"] .pw-card,
html[data-theme="dark"] [class*="pw-card"],
html.dark-mode .pw-card,
html.dark-mode [class*="pw-card"] {
  background: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
}

/* Deal pipeline cards */
html[data-theme="dark"] .deal-card,
html[data-theme="dark"] .pipeline-card,
html.dark-mode .deal-card,
html.dark-mode .pipeline-card {
  background: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
}

/* Contact/lead import cards */
html[data-theme="dark"] .import-card,
html.dark-mode .import-card {
  background: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
}

/* Calendar events */
html[data-theme="dark"] .fc-event,
html.dark-mode .fc-event {
  border-color: var(--color-border) !important;
}

/* Hospital module cards */
html[data-theme="dark"] .hospital-card,
html[data-theme="dark"] .patient-card,
html.dark-mode .hospital-card,
html.dark-mode .patient-card {
  background: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
}

/* ========================================================
   6. AI CHAT PANEL (footer.php) DARK MODE
   ======================================================== */

html[data-theme="dark"] #dash-ai-toggle,
html.dark-mode #dash-ai-toggle {
  background: linear-gradient(135deg, #3d2a51, #2d1e3b) !important;
}

html[data-theme="dark"] #dash-ai-header,
html.dark-mode #dash-ai-header {
  background: linear-gradient(135deg, #3d2a51, #2d1e3b) !important;
}

html[data-theme="dark"] .dai-guided-avatar,
html.dark-mode .dai-guided-avatar {
  background: linear-gradient(135deg, #3d2a51, #2d1e3b) !important;
}

html[data-theme="dark"] .dai-msg--user .dai-bubble,
html.dark-mode .dai-msg--user .dai-bubble {
  background: rgba(167, 143, 191, 0.2) !important;
  color: var(--color-text-primary) !important;
}

/* ========================================================
   7. GENERAL SAFETY NET — Ensure text readability
   ======================================================== */

/* Any element with inline white text on dark mode needs reversal check */
html[data-theme="dark"] .tile [style*="color:#fff"],
html[data-theme="dark"] .panel [style*="color:#fff"],
html.dark-mode .tile [style*="color:#fff"],
html.dark-mode .panel [style*="color:#fff"] {
  color: var(--color-text-primary) !important;
}

/* Ensure form labels are visible */
html[data-theme="dark"] label[style*="color:#"],
html.dark-mode label[style*="color:#"] {
  color: var(--color-text-primary) !important;
}

/* Tooltip and popover dark mode */
html[data-theme="dark"] .tooltip-inner,
html.dark-mode .tooltip-inner {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

html[data-theme="dark"] .popover,
html.dark-mode .popover {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
}

html[data-theme="dark"] .popover-title,
html.dark-mode .popover-title {
  background: var(--color-bg-primary);
  border-bottom-color: var(--color-border);
  color: var(--color-text-primary);
}

html[data-theme="dark"] .popover-content,
html.dark-mode .popover-content {
  color: var(--color-text-primary);
}