/* ===============================================
   Theme System - Dark/Light Mode Support
   =============================================== */

/* Apply theme transitions to common elements */
*,
*::before,
*::after {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

/* Disable transitions on theme change for instant switch */
[data-theme-changing] *,
[data-theme-changing] *::before,
[data-theme-changing] *::after {
  transition: none !important;
}

/* Dark mode specific overrides */
[data-theme="dark"] {
  color-scheme: dark;
}

[data-theme="dark"] .product-card,
[data-theme="dark"] .metric-card {
  background: var(--theme-card-bg);
  border-color: var(--theme-border);
  box-shadow: 0 2px 8px var(--theme-card-shadow);
}

[data-theme="dark"] .product-card:hover,
[data-theme="dark"] .metric-card:hover {
  box-shadow: 0 4px 16px var(--theme-card-shadow);
}

/* Input fields in dark mode */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--theme-input-bg);
  border-color: var(--theme-input-border);
  color: var(--theme-text-primary);
}

[data-theme="dark"] input::placeholder {
  color: var(--theme-text-tertiary);
}

/* Buttons in dark mode */
[data-theme="dark"] .btn-unsaved {
  background-color: #444444;
}

[data-theme="dark"] .btn-saved {
  background-color: #6b7f3d;
}

/* Tables in dark mode */
[data-theme="dark"] table {
  background: var(--theme-card-bg);
  color: var(--theme-text-primary);
}

[data-theme="dark"] th {
  background: var(--theme-bg-tertiary);
  color: var(--theme-text-primary);
  border-color: var(--theme-border);
}

[data-theme="dark"] td {
  border-color: var(--theme-border);
}

[data-theme="dark"] tr:hover {
  background: var(--theme-bg-tertiary);
}

/* Modals in dark mode */
[data-theme="dark"] .modal__overlay {
  background: rgba(0, 0, 0, 0.75);
}

[data-theme="dark"] .modal__content {
  background: var(--theme-card-bg);
  color: var(--theme-text-primary);
}

/* Form controls in dark mode */
[data-theme="dark"] .form-control {
  background: var(--theme-input-bg);
  border-color: var(--theme-input-border);
  color: var(--theme-text-primary);
}

[data-theme="dark"] .form-control:focus {
  border-color: #5b8fd9;
  box-shadow: 0 0 0 3px rgba(91, 143, 217, 0.2);
}

/* Scroll wrappers in dark mode */
[data-theme="dark"] .scroll-wrapper::after {
  background: linear-gradient(to right, transparent, var(--theme-bg-primary));
}

/* Product tile badges in dark mode */
[data-theme="dark"] .product-card__badge--available {
  background: rgba(116, 128, 86, 0.25);
  border-color: rgba(116, 128, 86, 0.45);
  color: #a8b88a;
}

[data-theme="dark"] .product-card__badge--sold {
  background: rgba(148, 82, 74, 0.25);
  border-color: rgba(148, 82, 74, 0.42);
  color: #d89a91;
}

/* Pricing elements in dark mode */
[data-theme="dark"] .product-card__pricing {
  background: rgba(55, 55, 55, 0.85);
  border-color: rgba(148, 163, 184, 0.25);
}

/* Beta notice in dark mode - already handled by theme variables */

/* Navigation currency dropdown in dark mode */
[data-theme="dark"] .nav-currency__menu {
  background: var(--theme-card-bg);
  border-color: var(--theme-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .nav-currency__option:hover {
  background: var(--theme-bg-tertiary);
}

[data-theme="dark"] .nav-currency__trigger {
  background: var(--theme-bg-tertiary);
  border-color: var(--theme-border);
  color: var(--theme-text-primary);
}

[data-theme="dark"] .nav-currency__trigger:hover {
  background: var(--theme-bg-primary);
}

/* Code blocks in dark mode */
[data-theme="dark"] pre,
[data-theme="dark"] code {
  background: #1e1e1e;
  color: #d4d4d4;
  border-color: #404040;
}

/* Links in dark mode */
[data-theme="dark"] a {
  color: #7fb3ff;
}

[data-theme="dark"] a:hover {
  color: #a3c9ff;
}

/* Comparison table specific dark mode styles */
[data-theme="dark"] .comparison-table {
  background: var(--theme-card-bg);
}

[data-theme="dark"] .comparison-table__head {
  background: var(--theme-bg-tertiary);
  color: var(--theme-text-primary);
}

[data-theme="dark"] .comparison-table__cell {
  border-color: var(--theme-border);
  color: var(--theme-text-primary);
}

[data-theme="dark"] .comparison-row:hover {
  background: var(--theme-bg-tertiary);
}

/* Badge styles in dark mode */
[data-theme="dark"] .badge {
  background: rgba(148, 163, 184, 0.25);
  color: var(--theme-text-secondary);
  border-color: rgba(148, 163, 184, 0.35);
}

[data-theme="dark"] .badge--available {
  background: rgba(116, 128, 86, 0.25);
  border-color: rgba(116, 128, 86, 0.45);
  color: #a8b88a;
}

[data-theme="dark"] .badge--sold {
  background: rgba(148, 82, 74, 0.25);
  border-color: rgba(148, 82, 74, 0.42);
  color: #d89a91;
}

/* Metric cards in dark mode */
[data-theme="dark"] .metric-card__header {
  border-color: var(--theme-border);
}

[data-theme="dark"] .metric-card__value {
  color: var(--theme-text-primary);
}

[data-theme="dark"] .metric-card__subtitle {
  color: var(--theme-text-secondary);
}

/* Dealer page specific dark mode */
[data-theme="dark"] .dealer-hero {
  background: var(--theme-bg-tertiary);
  color: var(--theme-text-primary);
}

/* Blog post dark mode */
[data-theme="dark"] .blog-post {
  background: var(--theme-card-bg);
  color: var(--theme-text-primary);
}

[data-theme="dark"] .blog-post__title {
  color: var(--theme-text-primary);
}

/* Search results dark mode */
[data-theme="dark"] .search-result {
  background: var(--theme-card-bg);
  border-color: var(--theme-border);
}

[data-theme="dark"] .search-result:hover {
  background: var(--theme-bg-tertiary);
}

/* Ensure images don't become too bright in dark mode */
[data-theme="dark"] img {
  opacity: 0.9;
}

[data-theme="dark"] img:hover {
  opacity: 1;
}

/* SVG icons color in dark mode */
[data-theme="dark"] svg {
  color: var(--theme-text-primary);
}

/* Cluster styles in dark mode */
[data-theme="dark"] .cluster-header {
  background: var(--theme-bg-tertiary);
  border-color: var(--theme-border);
}

[data-theme="dark"] .cluster-body {
  background: var(--theme-card-bg);
}

/* Footer links in dark mode */
[data-theme="dark"] footer a {
  color: var(--theme-text-secondary);
}

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