/* ============================================
   COMPREHENSIVE DARK MODE OVERRIDES
   Force all backgrounds to dark theme
   ============================================ */

[data-theme="dark"] {
    /* Force body and html */
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] body {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] html {
    background-color: var(--bg-primary) !important;
}

/* All main content sections */
[data-theme="dark"] main,
[data-theme="dark"] .main-content,
[data-theme="dark"] .content,
[data-theme="dark"] section {
    background-color: var(--bg-primary) !important;
}

/* All containers */
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid,
[data-theme="dark"] .container-lg,
[data-theme="dark"] .container-md,
[data-theme="dark"] .container-sm,
[data-theme="dark"] .container-xl,
[data-theme="dark"] .container-xxl {
    background-color: transparent !important;
}

/* Product sections and grids */
[data-theme="dark"] .product-section,
[data-theme="dark"] .product-grid,
[data-theme="dark"] .category-section {
    background-color: var(--bg-primary) !important;
}

/* Override any inline styles with white/light backgrounds */
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color: #ffffff"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background: #ffffff"] {
    background-color: var(--bg-primary) !important;
    background: var(--bg-primary) !important;
}

/* Product cards */
[data-theme="dark"] .product-card,
[data-theme="dark"] .card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Any remaining white backgrounds */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-gray-100,
[data-theme="dark"] .bg-gray-50 {
    background-color: var(--bg-card) !important;
}

/* Wrapper divs */
[data-theme="dark"] .wrapper,
[data-theme="dark"] .page-wrapper,
[data-theme="dark"] .content-wrapper {
    background-color: var(--bg-primary) !important;
}

/* Row backgrounds */
[data-theme="dark"] .row {
    background-color: transparent !important;
}

/* Any section with py-* (padding) classes */
[data-theme="dark"] [class*="py-"],
[data-theme="dark"] [class*="pt-"],
[data-theme="dark"] [class*="pb-"] {
    background-color: transparent !important;
}

/* Gradient backgrounds - override completely */
[data-theme="dark"] [style*="linear-gradient"],
[data-theme="dark"] [style*="radial-gradient"] {
    background: var(--bg-primary) !important;
}

/* Text colors for headings */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-primary) !important;
}

/* Paragraph text */
[data-theme="dark"] p {
    color: var(--text-secondary) !important;
}

/* Links */
[data-theme="dark"] a {
    color: var(--text-primary);
}

[data-theme="dark"] a:hover {
    color: var(--primary);
}