/* ============================================================================
 *  Dark-mode polish — elegant, modern, high-contrast for the Maventech panel.
 *  Targets both the public storefront ([data-bs-theme=dark]) AND the admin
 *  shell (also uses data-bs-theme=dark).
 *  ----------------------------------------------------------------------------
 *  Loaded AFTER style.css so these rules win on equal specificity ties.
 *  Goals:
 *    1. No "white text on white card" combinations anywhere
 *    2. Subtle gradients + soft shadows for depth (avoid flat-pancake look)
 *    3. Strong focus rings + visible button outlines for accessibility
 *    4. Visible borders, dividers and chip backgrounds
 * ========================================================================== */

[data-bs-theme="dark"] {
  /* Slightly cooler page-bg gradient so cards lift visibly off the surface */
  background: radial-gradient(1200px 600px at 10% -10%, rgba(59,130,246,.08), transparent 50%),
              radial-gradient(900px 500px at 100% 0%, rgba(45,212,191,.06), transparent 50%),
              #131525 fixed !important;
}

/* Inputs — always solid + readable, never inherit `rgba(255,255,255,.04)` */
[data-bs-theme="dark"] input.form-control,
[data-bs-theme="dark"] textarea.form-control,
[data-bs-theme="dark"] select.form-control,
[data-bs-theme="dark"] select.form-select {
  background-color: #0f1729 !important;
  color: #f1f5f9 !important;
  border-color: #475569 !important;
}
[data-bs-theme="dark"] input.form-control::placeholder,
[data-bs-theme="dark"] textarea.form-control::placeholder {
  color: #64748b !important;
}
[data-bs-theme="dark"] input.form-control:focus,
[data-bs-theme="dark"] textarea.form-control:focus,
[data-bs-theme="dark"] select.form-select:focus {
  background-color: #0f1729 !important;
  color: #f8fafc !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 .2rem rgba(59,130,246,.30) !important;
}

/* Buttons — outline variants stay readable, primary keeps its vibe gradient */
[data-bs-theme="dark"] .btn-outline-secondary {
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}
[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-secondary:focus {
  background: #2d3a52 !important;
  color: #ffffff !important;
  border-color: #60a5fa !important;
}
[data-bs-theme="dark"] .btn-light {
  background: #2d3a52 !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}
[data-bs-theme="dark"] .btn-light:hover { background: #3b4a66 !important; color: #ffffff !important; }

/* Cards — always show a soft elevation gradient */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card-e {
  background: linear-gradient(180deg, #243049 0%, #1c2538 100%) !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
  background: rgba(255,255,255,.02) !important;
  border-color: #334155 !important;
}

/* Modals + dropdowns */
[data-bs-theme="dark"] .modal-content {
  background: linear-gradient(180deg, #243049 0%, #1c2538 100%) !important;
  border: 1px solid #334155;
  color: #f1f5f9;
}
[data-bs-theme="dark"] .modal-header { border-bottom-color: #334155; }
[data-bs-theme="dark"] .modal-footer { border-top-color: #334155; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) brightness(1.6) saturate(0); }

/* Accordion */
[data-bs-theme="dark"] .accordion {
  --bs-accordion-bg: #1c2538;
  --bs-accordion-color: #f1f5f9;
  --bs-accordion-border-color: #334155;
  --bs-accordion-btn-color: #f1f5f9;
  --bs-accordion-btn-bg: #1c2538;
  --bs-accordion-btn-focus-border-color: #60a5fa;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(59,130,246,.30);
  --bs-accordion-active-color: #93c5fd;
  --bs-accordion-active-bg: rgba(59,130,246,.10);
}

/* Tables */
[data-bs-theme="dark"] .table {
  --bs-table-color: #f1f5f9 !important;
  --bs-table-bg: transparent !important;
  --bs-table-striped-bg: rgba(255,255,255,.025);
  --bs-table-striped-color: #f1f5f9;
  --bs-table-hover-bg: rgba(96,165,250,.08);
  --bs-table-hover-color: #ffffff;
  --bs-table-border-color: #334155;
}

/* Code + pre — keep technical text readable */
[data-bs-theme="dark"] pre, [data-bs-theme="dark"] code {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

/* Badges — make sure tan/yellow "Not set" badges stay visible on dark cards */
[data-bs-theme="dark"] .badge[style*="background:#fef3c7"],
[data-bs-theme="dark"] .badge[style*="background:#f1f5f9"] {
  background: rgba(251,191,36,.18) !important;
  color: #fcd34d !important;
}
[data-bs-theme="dark"] .badge[style*="background:#d1fae5"] {
  background: rgba(16,185,129,.20) !important;
  color: #6ee7b7 !important;
}
[data-bs-theme="dark"] .badge[style*="background:#fee2e2"] {
  background: rgba(248,113,113,.20) !important;
  color: #fca5a5 !important;
}

/* Alerts */
[data-bs-theme="dark"] .alert {
  border-color: #334155;
}
[data-bs-theme="dark"] .alert-warning {
  background: rgba(251,191,36,.10) !important;
  color: #fcd34d !important;
  border-color: rgba(251,191,36,.30) !important;
}
[data-bs-theme="dark"] .alert-info {
  background: rgba(59,130,246,.10) !important;
  color: #93c5fd !important;
  border-color: rgba(59,130,246,.30) !important;
}

/* Soft surfaces — anywhere the markup uses background:#f8fafc / #f1f5f9 */
[data-bs-theme="dark"] [style*="background:#f8fafc"]:not(.seo-platform-card),
[data-bs-theme="dark"] [style*="background:#f1f5f9"]:not(.s-badge):not(.badge) {
  background: #1c2538 !important;
  color: #f1f5f9 !important;
}

/* Icons in colored brand circles — keep readable color but tone down glow */
[data-bs-theme="dark"] .ask-ai-card,
[data-bs-theme="dark"] .pd-seo-copy,
[data-bs-theme="dark"] .pd-review-snippets,
[data-bs-theme="dark"] .pd-deep-cluster,
[data-bs-theme="dark"] .cat-seo-copy,
[data-bs-theme="dark"] .cat-faq,
[data-bs-theme="dark"] .cat-deep-cluster {
  color: #f1f5f9;
}
[data-bs-theme="dark"] .pd-seo-copy .text-secondary,
[data-bs-theme="dark"] .cat-seo-copy .text-secondary,
[data-bs-theme="dark"] .pd-review-snippets .text-secondary,
[data-bs-theme="dark"] .pd-deep-cluster .text-secondary,
[data-bs-theme="dark"] .cat-deep-cluster .text-secondary { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .pd-seo-copy strong,
[data-bs-theme="dark"] .cat-seo-copy strong { color: #f8fafc; }

/* Popular-search chips — already styled, but they used a bright pastel that
   clashed in dark mode. */
[data-bs-theme="dark"] .badge[style*="background:#eff6ff"] {
  background: rgba(59,130,246,.16) !important;
  color: #93c5fd !important;
  border-color: rgba(59,130,246,.40) !important;
}

/* Footer + topbar look softer in dark */
[data-bs-theme="dark"] .footer-dark {
  background: linear-gradient(180deg, #1a1d35 0%, #0f1224 100%) !important;
}
[data-bs-theme="dark"] hr {
  border-color: rgba(148,163,184,.20) !important;
  opacity: .9;
}

/* Tabs */
[data-bs-theme="dark"] .nav-tabs {
  --bs-nav-tabs-border-color: #334155;
  --bs-nav-tabs-link-active-color: #f1f5f9;
  --bs-nav-tabs-link-active-bg: #243049;
  --bs-nav-tabs-link-active-border-color: #334155 #334155 #243049;
}
[data-bs-theme="dark"] .nav-tabs .nav-link { color: #cbd5e1; }
[data-bs-theme="dark"] .nav-tabs .nav-link:hover { color: #f1f5f9; border-color: transparent; }

/* Selection */
[data-bs-theme="dark"] ::selection { background: rgba(59,130,246,.45); color: #ffffff; }

/* Skeleton subtle improvement — improves perceived elegance on first paint */
[data-bs-theme="dark"] body { transition: background-color .25s ease; }


/* ---------------- Topic Cluster Hubs (public /hub/<slug>) ---------------- */
[data-bs-theme="dark"] .hub-hero { background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(15,23,42,.50)) !important; border-color: rgba(148,163,184,.18) !important; }
[data-bs-theme="dark"] .hub-hero h1, [data-bs-theme="dark"] .hub-hero .text-secondary { color: #f1f5f9 !important; }
[data-bs-theme="dark"] .hub-hero .lead { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .hub-hero .badge.text-bg-light { background: rgba(30,41,59,.85) !important; color: #e2e8f0 !important; border-color: rgba(148,163,184,.25) !important; }
[data-bs-theme="dark"] nav[aria-label="On this page"] .badge { background: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; }
/* Aggregated card grids */
[data-bs-theme="dark"] [data-testid="hub-product-card"],
[data-bs-theme="dark"] [data-testid="hub-guide-card"],
[data-bs-theme="dark"] [data-testid="hub-video-card"],
[data-bs-theme="dark"] [data-testid="hub-related-link"] { background:#1e293b !important; border-color:#334155 !important; color:#e2e8f0 !important; }
[data-bs-theme="dark"] [data-testid="hub-product-card"] .fw-bold,
[data-bs-theme="dark"] [data-testid="hub-guide-card"] .fw-bold,
[data-bs-theme="dark"] [data-testid="hub-related-link"] .fw-bold { color:#f1f5f9 !important; }
[data-bs-theme="dark"] [data-testid="hub-product-card"] .text-secondary,
[data-bs-theme="dark"] [data-testid="hub-guide-card"] .text-secondary,
[data-bs-theme="dark"] [data-testid="hub-related-link"] .text-secondary { color:#94a3b8 !important; }
[data-bs-theme="dark"] [data-testid="hub-video-card"] .fw-semibold { color:#f1f5f9 !important; }
/* FAQ accordion buttons keep the same hover treatment as product page */
[data-bs-theme="dark"] #hub-faq-accordion .accordion-button { background:#1e293b; color:#f1f5f9; }
[data-bs-theme="dark"] #hub-faq-accordion .accordion-body { background:#1e293b; color:#cbd5e1; border-top:1px solid #334155; }
/* Section headings stay readable */
[data-bs-theme="dark"] #hub-products h2, [data-bs-theme="dark"] #hub-guides h2, [data-bs-theme="dark"] #hub-faqs h2, [data-bs-theme="dark"] #hub-related h2, [data-bs-theme="dark"] #hub-videos h2 { color:#f1f5f9 !important; }
/* AEO Quick-Answer card body — inline color #1e293b is invisible in dark mode */
[data-bs-theme="dark"] .aeo-quick-answer { background: linear-gradient(180deg, rgba(59,130,246,.12), rgba(15,23,42,.50)) !important; border-left-color: #3b82f6 !important; }
[data-bs-theme="dark"] .aeo-quick-answer .aeo-answer-body,
[data-bs-theme="dark"] .aeo-quick-answer .fw-bold { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .aeo-quick-answer strong { color: #93c5fd !important; }

/* =====================================================================
 *  FULL DARK-MODE SWEEP (Feb 2026 — iteration 9)
 *  --------------------------------------------------------------------
 *  Hard inline styles across category.php, product.php, hub.php and the
 *  deep-cluster blocks shipped with light-only colours.  These rules
 *  force-override them in dark mode so every light bg / dark text combo
 *  becomes a dark bg / light text combo.  Using attribute selectors +
 *  !important is intentional — inline styles can only be defeated this
 *  way.
 * ===================================================================== */

/* ---- category.php — "Part of a wider topic hub" callout (the obvious bug). */
[data-bs-theme="dark"] .cat-topic-hub,
[data-bs-theme="dark"] [data-testid="category-topic-hub"] {
  background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(16,185,129,.10)) !important;
  border-color: rgba(96,165,250,.35) !important;
}
[data-bs-theme="dark"] .cat-topic-hub h2,
[data-bs-theme="dark"] .cat-topic-hub .h5,
[data-bs-theme="dark"] [data-testid="category-topic-hub"] h2 { color: #f1f5f9 !important; }
[data-bs-theme="dark"] .cat-topic-hub p,
[data-bs-theme="dark"] .cat-topic-hub .text-secondary { color: #cbd5e1 !important; }
[data-bs-theme="dark"] [data-testid="category-hub-link"],
[data-bs-theme="dark"] [data-testid="product-hub-link"] {
  background: rgba(30,41,59,.85) !important;
  border-color: rgba(148,163,184,.30) !important;
  /* Inline colour is the hub's brand accent — boost it for WCAG-AA contrast
     against the dark bg by adding a subtle text-shadow + slightly lifted
     opacity.  Each hub still keeps its identity colour. */
  filter: brightness(1.35) saturate(1.1);
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

/* ---- category.php — deep-cluster Popular Searches badges. */
[data-bs-theme="dark"] [data-testid="cluster-popular"] {
  background: rgba(30,58,138,.55) !important;
  color: #bfdbfe !important;
  border-color: rgba(96,165,250,.45) !important;
}
[data-bs-theme="dark"] .cat-deep-cluster h2,
[data-bs-theme="dark"] .cat-deep-cluster .text-secondary { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .cat-deep-cluster a:not(.badge) { color: #93c5fd !important; }
[data-bs-theme="dark"] .cat-deep-cluster a:not(.badge):hover { color: #bfdbfe !important; }
[data-bs-theme="dark"] .cat-deep-cluster .fw-bold.text-uppercase.text-secondary {
  color: #94a3b8 !important;
}

/* ---- product.php — deep-cluster + topic-hub badge row. */
[data-bs-theme="dark"] [data-testid="product-topic-hub-row"] {
  background: rgba(30,41,59,.70) !important;
  border-color: rgba(148,163,184,.30) !important;
}
[data-bs-theme="dark"] [data-testid="product-topic-hub-row"] .fw-semibold,
[data-bs-theme="dark"] [data-testid="product-topic-hub-row"] .text-secondary { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .pd-deep-cluster h2,
[data-bs-theme="dark"] .pd-deep-cluster .text-secondary { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .pd-deep-cluster a:not(.badge) { color: #93c5fd !important; }

/* ---- hub.php — related topic chips, breadcrumbs, badges. */
[data-bs-theme="dark"] [data-testid="hub-related-link"] {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}
[data-bs-theme="dark"] [data-testid="hub-toc"] .badge,
[data-bs-theme="dark"] [data-testid="hub-stats"] .badge {
  background: rgba(30,41,59,.85) !important;
  color: #e2e8f0 !important;
  border-color: rgba(148,163,184,.25) !important;
}
/* Hub stats badges + related topic chips that use Bootstrap text-bg-light
   or inline #f1f5f9 backgrounds become invisible on dark.  Force-light text. */
[data-bs-theme="dark"] .hub-hero .badge.text-bg-light,
[data-bs-theme="dark"] .badge.text-bg-light {
  background: rgba(30,41,59,.85) !important;
  color: #e2e8f0 !important;
  border-color: rgba(148,163,184,.25) !important;
}
[data-bs-theme="dark"] .hub-hero .badge.text-bg-light .bi,
[data-bs-theme="dark"] .badge.text-bg-light .bi { filter: brightness(1.35) saturate(1.1); }
[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .badge.bg-light.text-dark,
[data-bs-theme="dark"] .badge.bg-light.text-secondary {
  background: rgba(30,41,59,.85) !important;
  color: #e2e8f0 !important;
  border-color: rgba(148,163,184,.25) !important;
}
/* Generic "background:#f1f5f9/#fff" inline badge anchor (hub related topics). */
[data-bs-theme="dark"] a.badge[style*="#f1f5f9"],
[data-bs-theme="dark"] a.badge[style*="#fff"],
[data-bs-theme="dark"] a.badge[style*="#ffffff"] {
  background: rgba(30,41,59,.85) !important;
  color: #e2e8f0 !important;
  border-color: rgba(148,163,184,.30) !important;
}

/* ---- AEO Quick-Answer card (works everywhere it renders — product,
        category, hub).  Inline color #1e293b is invisible on dark bg. */
[data-bs-theme="dark"] .aeo-quick-answer,
[data-bs-theme="dark"] [data-testid$="-quick-answer"] {
  background: linear-gradient(180deg, rgba(59,130,246,.12), rgba(15,23,42,.55)) !important;
  border-left-color: #3b82f6 !important;
  border-color: rgba(96,165,250,.25) !important;
}
[data-bs-theme="dark"] .aeo-quick-answer .aeo-answer-body,
[data-bs-theme="dark"] .aeo-quick-answer .fw-bold,
[data-bs-theme="dark"] [data-testid$="-quick-answer"] .fw-bold,
[data-bs-theme="dark"] [data-testid$="-quick-answer-body"] {
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .aeo-quick-answer strong { color: #93c5fd !important; }

/* ---- Toolbar (shop-toolbar) — light grey bg breaks in dark mode. */
[data-bs-theme="dark"] .shop-toolbar {
  background: rgba(30,41,59,.55) !important;
  border-color: rgba(148,163,184,.20) !important;
}
[data-bs-theme="dark"] .shop-toolbar h2,
[data-bs-theme="dark"] .shop-toolbar .text-secondary,
[data-bs-theme="dark"] .shop-toolbar small { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .platform-seg {
  background: rgba(15,23,42,.55) !important;
  border-color: rgba(148,163,184,.20) !important;
}
[data-bs-theme="dark"] .platform-pill { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .platform-pill.active {
  background: #3b82f6 !important;
  color: #fff !important;
}
[data-bs-theme="dark"] .sort-select,
[data-bs-theme="dark"] .form-select {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

/* ---- buying-guide H2/H3 hierarchy — pure dark text in light mode. */
[data-bs-theme="dark"] .cat-buying-guide h2,
[data-bs-theme="dark"] .cat-buying-guide h3 { color: #f1f5f9 !important; }
[data-bs-theme="dark"] .cat-buying-guide p,
[data-bs-theme="dark"] .cat-buying-guide li { color: #cbd5e1 !important; }

/* ---- Category FAQ accordion in dark mode. */
[data-bs-theme="dark"] .cat-faq .accordion-button {
  background: #1e293b !important;
  color: #f1f5f9 !important;
}
[data-bs-theme="dark"] .cat-faq .accordion-body {
  background: #1e293b !important;
  color: #cbd5e1 !important;
  border-top: 1px solid #334155 !important;
}
[data-bs-theme="dark"] .cat-faq .accordion-item { background: #0f172a !important; border-color: #334155 !important; }

/* ---- alert-light (used for "No products found" empty state). */
[data-bs-theme="dark"] .alert-light {
  background: rgba(30,41,59,.85) !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

/* ---- Generic anchor inside dark mode containers (e2e8f0 text). */
[data-bs-theme="dark"] .container a:not(.btn):not(.badge):not(.nav-link):not([class*=text-]) { color: #93c5fd; }

/* ---- Product page reviews + spec bg. */
[data-bs-theme="dark"] .pd-reviews,
[data-bs-theme="dark"] .pd-spec,
[data-bs-theme="dark"] .pd-summary {
  background: rgba(30,41,59,.45) !important;
  border-color: rgba(148,163,184,.20) !important;
  color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .pd-reviews h2,
[data-bs-theme="dark"] .pd-spec h2,
[data-bs-theme="dark"] .pd-summary h2 { color: #f1f5f9 !important; }