/**
 * Theme everywhere – minimal overrides.
 * Tokens are defined in design-tokens.css (dark block for html[data-theme="dark"],
 * html[data-bs-theme="dark"], body.portal-backend-dark). This file only overrides
 * legacy .bg-white and inline white backgrounds until templates use tokens.
 */

/* ---------- Global: any element with white background (legacy; use var(--admin-surface) in new code) ---------- */
html[data-bs-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-white,
body.portal-backend-dark .bg-white {
  background: var(--admin-surface) !important;
  color: var(--admin-content-text) !important;
}

/* Inline white backgrounds (templates that use style="background: white" or "#fff") */
html[data-bs-theme="dark"] [style*="background: white"],
html[data-bs-theme="dark"] [style*="background:white"],
html[data-bs-theme="dark"] [style*="background: #fff"],
html[data-bs-theme="dark"] [style*="background:#fff"],
html[data-bs-theme="dark"] [style*="background: #ffffff"],
html[data-bs-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:#fff"],
body.portal-backend-dark [style*="background: white"],
body.portal-backend-dark [style*="background:#fff"],
body.portal-backend-dark [style*="background: #fff"] {
  background: var(--admin-surface) !important;
  color: var(--admin-content-text) !important;
}

/* ---------- Dashboard header (portal + backend + standalone) ---------- */
html[data-bs-theme="dark"] .dashboard-header-wrapper,
html[data-bs-theme="dark"] .dashboard-header,
html[data-theme="dark"] .dashboard-header-wrapper,
html[data-theme="dark"] .dashboard-header,
body.portal-backend-dark .dashboard-header-wrapper,
body.portal-backend-dark .dashboard-header {
  background: var(--admin-surface) !important;
  border-color: var(--admin-border) !important;
  color: var(--admin-content-text) !important;
}

html[data-bs-theme="dark"] .dashboard-header .text-muted,
body.portal-backend-dark .dashboard-header .text-muted {
  color: var(--admin-content-text-muted) !important;
}

/* ---------- Global search dropdown ---------- */
html[data-bs-theme="dark"] .header-search-dropdown,
html[data-bs-theme="dark"] #headerSearchResults,
html[data-bs-theme="dark"] .search-result-item,
body.portal-backend-dark .header-search-dropdown,
body.portal-backend-dark #headerSearchResults {
  background: var(--admin-content-surface) !important;
  border-color: var(--admin-border) !important;
  color: var(--admin-content-text) !important;
}

/* ---------- Notification center ---------- */
html[data-bs-theme="dark"] .notification-center,
html[data-bs-theme="dark"] .notification-panel,
html[data-bs-theme="dark"] [class*="notification-center"],
body.portal-backend-dark .notification-center,
body.portal-backend-dark .notification-panel {
  background: var(--admin-content-surface) !important;
  border-color: var(--admin-border) !important;
  color: var(--admin-content-text) !important;
}

/* ---------- User dropdown ---------- */
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .user-dropdown-menu,
body.portal-backend-dark .dropdown-menu {
  background: var(--admin-content-surface) !important;
  border-color: var(--admin-border) !important;
  color: var(--admin-content-text) !important;
}

/* ---------- Breadcrumb ---------- */
html[data-bs-theme="dark"] .breadcrumb,
html[data-bs-theme="dark"] .breadcrumb-item,
body.portal-backend-dark .breadcrumb {
  background: transparent !important;
  color: var(--admin-content-text-muted) !important;
}

/* ---------- Quick actions ---------- */
html[data-bs-theme="dark"] .quick-action-item,
html[data-bs-theme="dark"] [class*="quick-action"],
body.portal-backend-dark .quick-action-item {
  background: var(--admin-content-surface) !important;
  border-color: var(--admin-border) !important;
  color: var(--admin-content-text) !important;
}

/* ---------- AI Copilot ---------- */
html[data-bs-theme="dark"] .ai-copilot,
html[data-bs-theme="dark"] .ai-copilot-panel,
html[data-bs-theme="dark"] [class*="ai-copilot"],
body.portal-backend-dark .ai-copilot,
body.portal-backend-dark [class*="ai-copilot"] {
  background: var(--admin-content-surface) !important;
  border-color: var(--admin-border) !important;
  color: var(--admin-content-text) !important;
}

/* ---------- Toast notifications ---------- */
html[data-bs-theme="dark"] .toast-notification,
html[data-bs-theme="dark"] .toast-message,
body.portal-backend-dark .toast-notification {
  background: var(--admin-content-surface) !important;
  border-color: var(--admin-border) !important;
  color: var(--admin-content-text) !important;
}

/* ---------- Admin nav bridge (when shown on portal) ---------- */
body.portal-backend-dark .admin-nav-bridge {
  background: var(--header-brand-bg) !important;
  color: var(--admin-text) !important;
}

/* ---------- Portal base: main content area ---------- */
html[data-bs-theme="dark"] .main-content,
html[data-bs-theme="dark"] .page-wrap,
html[data-bs-theme="dark"] .content-area,
html[data-bs-theme="dark"] .dashboard-container,
body.portal-backend-dark .main-content,
body.portal-backend-dark .page-wrap,
body.portal-backend-dark .content-area,
body.portal-backend-dark .dashboard-container {
  background: var(--portal-bg) !important;
  color: var(--portal-text) !important;
}

/* ---------- Cards and panels (catch-all for dashboard cards) ---------- */
html[data-bs-theme="dark"] .card.bg-white,
html[data-bs-theme="dark"] .card-header.bg-white,
html[data-bs-theme="dark"] .metric-card,
html[data-bs-theme="dark"] .tile-green,
html[data-bs-theme="dark"] .tile-blue,
html[data-bs-theme="dark"] .tile-purple,
html[data-bs-theme="dark"] .tile-orange,
body.portal-backend-dark .card-header.bg-white {
  background: var(--admin-surface) !important;
  border-color: var(--admin-border) !important;
  color: var(--admin-content-text) !important;
}

/* ---------- Modals ---------- */
html[data-bs-theme="dark"] .modal-content,
body.portal-backend-dark .modal-content {
  background: var(--admin-content-surface) !important;
  border-color: var(--admin-border) !important;
  color: var(--admin-content-text) !important;
}

html[data-bs-theme="dark"] .modal-header,
body.portal-backend-dark .modal-header {
  border-color: var(--admin-border) !important;
  color: var(--admin-content-text) !important;
}

/* ---------- Login ---------- */
html[data-bs-theme="dark"] .login-card,
html[data-bs-theme="dark"] .auth-box,
body.portal-backend-dark .login-card {
  background: var(--admin-content-surface) !important;
  border-color: var(--admin-border) !important;
  color: var(--admin-content-text) !important;
}

/* ---------- Offcanvas (mobile menu) ---------- */
html[data-bs-theme="dark"] .offcanvas,
html[data-theme="dark"] .offcanvas,
body.portal-backend-dark .offcanvas {
  background: var(--admin-surface) !important;
  color: var(--admin-content-text) !important;
}

/* ---------- Common dashboard card patterns (analytics, etc.) ---------- */
html[data-bs-theme="dark"] .border.rounded-3.bg-white,
html[data-bs-theme="dark"] .p-3.rounded-3.bg-white,
html[data-theme="dark"] .border.rounded-3.bg-white,
body.portal-backend-dark .border.rounded-3.bg-white {
  background: var(--admin-surface) !important;
  border-color: var(--admin-border) !important;
  color: var(--admin-content-text) !important;
}

/* ---------- Badge that must stay visible (e.g. Default badge) ---------- */
html[data-bs-theme="dark"] .badge.bg-white,
body.portal-backend-dark .badge.bg-white {
  background: var(--admin-content-surface) !important;
  color: var(--admin-content-text) !important;
}