/* ============================================================
   Adnazo — Dark Mode Consistency Layer (Phase 16.2)
   Colors only. Uses CSS variables from colors.css.
   ============================================================ */

/* ---- Base document ---- */
body.dark-mode,
body.dark {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* ---- Map style.css aliases ---- */
body.dark-mode,
body.dark {
  --bg: var(--bg-primary);
  --surface: var(--bg-secondary);
  --surface-2: var(--bg-tertiary);
  --border: var(--border-color);
  --text: var(--text-primary);
}

/* ---- Public launch.css aliases ---- */
body.dark-mode,
body.dark {
  --dark: var(--text-primary);
  --light: var(--bg-primary);
  --gray: var(--text-secondary);
  --surface: var(--bg-secondary);
}

/* ---- Typography & links ---- */
body.dark-mode,
body.dark {
  color: var(--text-primary);
}
body.dark-mode a,
body.dark a {
  color: var(--accent-primary);
}
body.dark-mode a:hover,
body.dark a:hover {
  color: var(--accent-hover);
}

/* ---- Icons (SVG stroke/fill via currentColor) ---- */
body.dark-mode svg,
body.dark svg {
  color: var(--icon-color);
}
body.dark-mode .icon-btn svg,
body.dark-mode .topbar svg,
body.dark .icon-btn svg {
  color: var(--icon-color);
}
body.dark-mode img:not([src*="logo"]):not([src*="brand"]),
body.dark img:not([src*="logo"]):not([src*="brand"]) {
  opacity: 0.92;
}

/* ---- Header / Nav / Footer ---- */
body.dark-mode .topbar,
body.dark-mode .site-header,
body.dark-mode .header-top,
body.dark .site-header,
body.dark .header-top,
body.dark .topbar {
  background: var(--header-bg) !important;
  border-color: var(--header-border) !important;
  color: var(--header-text) !important;
}
body.dark-mode .mobile-nav,
body.dark-mode .dropdown-menu,
body.dark .mobile-nav,
body.dark .dropdown-menu {
  background: var(--dropdown-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
body.dark-mode .dropdown-menu a,
body.dark .dropdown-menu a {
  color: var(--text-primary) !important;
}
body.dark-mode .dropdown-menu a:hover,
body.dark .dropdown-menu a:hover {
  background: var(--bg-tertiary) !important;
}
body.dark-mode .site-footer,
body.dark .site-footer {
  background: var(--bg-primary) !important;
}
body.dark-mode .nav,
body.dark .nav {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

/* ---- Cards, panels, stat blocks ---- */
body.dark-mode .card,
body.dark-mode .stat-card,
body.dark-mode .creator-card,
body.dark-mode .ad-card,
body.dark-mode .glass-card,
body.dark-mode .dashboard-card,
body.dark-mode .panel,
body.dark .card,
body.dark .status-row,
body.dark .faq-q,
body.dark .blog-card,
body.dark .category-card,
body.dark .comment,
body.dark .comment-form {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
body.dark-mode .card:hover,
body.dark .card:hover {
  border-color: var(--border-hover) !important;
}

/* ---- Forms & inputs ---- */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .search-input,
body.dark-mode .header-search input,
body.dark-mode .input,
body.dark input,
body.dark select,
body.dark textarea,
body.dark .search-input {
  background: var(--input-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder,
body.dark input::placeholder {
  color: var(--text-secondary) !important;
}
body.dark-mode label,
body.dark-mode .label,
body.dark label {
  color: var(--text-secondary) !important;
}

/* ---- Buttons (secondary/ghost/outline) ---- */
body.dark-mode .btn-outline,
body.dark-mode .toggle-btn,
body.dark .btn-outline {
  background: transparent !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
body.dark-mode .toolbar button,
body.dark-mode .tabs button,
body.dark-mode .tabs button {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* ---- Tables ---- */
body.dark-mode table,
body.dark-mode thead,
body.dark-mode tbody,
body.dark-mode tr,
body.dark-mode th,
body.dark-mode td,
body.dark-mode .table-wrap {
  background: var(--table-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
body.dark-mode thead th,
body.dark thead th {
  background: var(--bg-tertiary) !important;
}
body.dark-mode tbody tr:hover,
body.dark tbody tr:hover {
  background: var(--bg-tertiary) !important;
}

/* ---- Modals & overlays ---- */
body.dark-mode .modal,
body.dark-mode .modal-content,
body.dark-mode [class*="modal"],
body.dark-mode .compare-field .value {
  background: var(--modal-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
body.dark-mode .modal-overlay {
  background: rgba(10, 15, 28, 0.75) !important;
}

/* ---- Chat panels ---- */
body.dark-mode .chat-panel,
body.dark-mode .chat-sidebar,
body.dark-mode .conversation-list,
body.dark-mode .message-composer,
body.dark-mode .chat-container {
  background: var(--chat-panel-bg) !important;
  border-color: var(--border-color) !important;
}
body.dark-mode .message-received,
body.dark-mode .chat-bubble.received {
  background: var(--chat-bubble-received) !important;
  color: var(--text-primary) !important;
}
body.dark-mode .message-sent,
body.dark-mode .chat-bubble.sent {
  background: var(--chat-bubble-sent) !important;
  color: var(--text-primary) !important;
}

/* ---- Dashboards ---- */
body.dark-mode .dashboard,
body.dark-mode .dashboard-shell,
body.dark-mode main,
body.dark-mode .page-shell,
body.dark-mode .content-page,
body.dark-mode section.section {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}
body.dark-mode .hero-panel {
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%) !important;
}
body.dark-mode .glass {
  background: rgba(19, 26, 42, 0.75) !important;
  border-color: var(--border-color) !important;
}

/* ---- Inline white backgrounds (audit catch-all) ---- */
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background:white"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background:#ffffff"],
body.dark [style*="background: white"],
body.dark [style*="background:white"],
body.dark [style*="background: #fff"],
body.dark [style*="background:#fff"] {
  background: var(--bg-secondary) !important;
}

/* ---- Badges & status chips (semantic — dark tints) ---- */
body.dark-mode .badge-warning,
body.dark-mode .pwa-toast-warning,
body.dark .badge-warning {
  background: var(--warning-light) !important;
  color: var(--warning) !important;
}
body.dark-mode .status-pending,
body.dark-mode .pending,
body.dark .status-pending,
body.dark .pending {
  background: var(--warning-light) !important;
  color: var(--warning) !important;
}
body.dark-mode .level-business,
body.dark .level-business {
  background: var(--warning-light) !important;
  color: var(--warning) !important;
}
body.dark-mode [style*="background: #fff3e0"],
body.dark-mode [style*="background:#fff3e0"],
body.dark-mode [style*="background: #fff3cd"],
body.dark-mode [style*="background:#fff3cd"],
body.dark [style*="background: #fff3e0"],
body.dark [style*="background:#fff3e0"] {
  background: var(--warning-light) !important;
  color: var(--text-primary) !important;
}

/* ---- Code blocks ---- */
body.dark-mode .code-block,
body.dark .code-block {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color);
}

/* ---- UI design system (when loaded) ---- */
body.dark-mode {
  --color-bg: var(--bg-primary);
  --color-bg-subtle: var(--bg-secondary);
  --color-bg-muted: var(--bg-tertiary);
  --color-surface: var(--bg-secondary);
  --color-surface-hover: var(--bg-tertiary);
  --color-border: var(--border-color);
  --color-border-strong: var(--border-color);
  --color-text: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-secondary);
  --color-primary: var(--accent-primary);
  --color-primary-hover: var(--accent-hover);
  --color-primary-subtle: var(--bg-tertiary);
}

body.dark-mode .login-box,
body.dark .login-box {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-card) !important;
}
body.dark-mode .sidebar,
body.dark .sidebar {
  background: var(--bg-tertiary) !important;
  border-right: 1px solid var(--border-color);
}
body.dark-mode .main,
body.dark .main {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}
body.dark-mode meta[name="theme-color"],
body.dark meta[name="theme-color"] {
  content: "#0A0F1C";
}