/* ==========================================================================
   AutoCijene — full dark mode (works with CSS variables in theme.css)
   ========================================================================== */

html[data-color-mode="dark"] body {
  background: var(--gradient-brands-section);
  color: var(--color-text);
}

/* ---- Universal elevated surfaces (cards, panels, embeds) ---- */
html[data-color-mode="dark"] :is(
  .brand-card,
  .variant-card,
  .model-card,
  .generation-card,
  .featured-generation-card,
  .news-card,
  .choice-card,
  .fuel-city-card,
  .spec-card,
  .finder-card,
  [class*="-panel"],
  [class*="-embed"],
  [class*="-bar"]:not(.compare-bar):not(.touch-swipe-hint):not(.results-filters-bar):not(.leaflet-bar),
  .container,
  .info-box,
  .faq-item,
  .dealer-item,
  .contact-item,
  .modal-content,
  .admin-card,
  .admin-table,
  .appearance-theme-card,
  .appearance-preview,
  .chargers-list-wrap,
  .charger-list-item,
  .variant-item,
  .variant-list.open,
  .model-description-section,
  .tucson-choice-bar,
  .tucson-choice-tag,
  .compare-empty,
  .compare-table-wrap,
  .compare-toggle,
  .finder-intro,
  .description-toggle-button,
  .sort-field,
  .sort-order,
  .filter-button:not(.active),
  .gallery-main
) {
  background: var(--color-surface) !important;
  background-image: none !important;
  border-color: #1a2332 !important;
  box-shadow: none !important;
  color: var(--color-text);
}

html[data-color-mode="dark"] :is(
  .featured-generation-thumb,
  .variant-image,
  .model-card-image,
  .generation-card-thumb,
  .news-card-image,
  .brand-img-container,
  .compare-car-img,
  .gallery-thumbnail
) {
  background: var(--color-surface-well) !important;
  background-image: none !important;
}

html[data-color-mode="dark"] .brand-card.premium .brand-card-image,
html[data-color-mode="dark"] .brand-card.non-premium .brand-card-image {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* ---- Section backgrounds: transparent (gradient lives on body only) ---- */
html[data-color-mode="dark"] :is(
  .brands-section,
  .brands-section--all,
  .featured-generations-section,
  .featured-banner-row,
  .home-utilities-section,
  .home-cost-tools-section,
  .models-section,
  .news-section,
  .brand-details-section,
  .model-gallery-section,
  .feature-cards-section,
  .compare-section,
  .results-section,
  .fuel-page,
  .tool-page,
  .chargers-page,
  .search-section,
  .finder-section,
  .generation-section,
  .faq-section,
  .model-description-section,
  .tucson-choice-bar
) {
  background: transparent !important;
  color: var(--color-text);
}

html[data-color-mode="dark"] .premium-brands-grid {
  background: var(--gradient-premium-grid) !important;
  animation: premium-grid-glow 4.5s ease-in-out infinite;
  border-color: rgba(245, 211, 122, 0.45) !important;
  box-shadow:
    var(--shadow-elevated),
    0 0 22px rgba(212, 175, 55, 0.38) !important;
}

html[data-color-mode="dark"] .brand-card.premium {
  box-shadow:
    0 6px 18px rgba(122, 15, 165, 0.18),
    0 0 26px rgba(212, 175, 55, 0.34) !important;
  animation: premium-card-glow 3.4s ease-in-out infinite;
}

html[data-color-mode="dark"] .brand-card.premium:hover {
  box-shadow:
    0 12px 28px rgba(122, 15, 165, 0.28),
    0 0 30px rgba(212, 175, 55, 0.42) !important;
}

html[data-color-mode="dark"] .finder-search-input::placeholder {
  color: rgba(255, 255, 255, 0.75) !important;
}

html[data-color-mode="dark"] .premium-brands-grid.reveal-glow.is-in {
  animation: premium-grid-glow 4.5s ease-in-out infinite;
  border-color: rgba(245, 211, 122, 0.45) !important;
  box-shadow:
    var(--shadow-elevated),
    0 0 22px rgba(212, 175, 55, 0.38) !important;
}

html[data-color-mode="dark"] .fuel-prices-embed--home,
html[data-color-mode="dark"] .chargers-embed--home,
html[data-color-mode="dark"] .fuel-prices-embed,
html[data-color-mode="dark"] .chargers-embed,
html[data-color-mode="dark"] .chargers-panel {
  background: var(--gradient-panel) !important;
}

/* ---- Readable text ---- */
html[data-color-mode="dark"] :is(
  h1, h2, h3, h4, h5, h6,
  p, span, label, li, dt, dd, th, td,
  .brand-title, .model-title, .models-title, .generation-title,
  .generation-name, .generation-expanded-title, .generation-expanded-subtitle,
  .generation-count, .generation-price, .model-card-name, .model-subtitle,
  .featured-generation-name, .featured-generation-model, .news-card-title,
  .variant-title, .variant-name-col, .variant-stat-col, .variant-price-col,
  .choice-card-title, .choice-card-text, .description-content,
  .finder-intro-title, .finder-intro-text, .finder-card-heading, .finder-divider-text,
  .finder-field label, .results-filter-field label, .results-count,
  .chargers-embed-title, .chargers-embed-subtitle, .chargers-filter-label,
  .chargers-count, .charger-list-title, .fuel-prices-embed-title,
  .fuel-prices-embed-subtitle, .fuel-city-name, .fuel-price-label, .fuel-price-value,
  .breadcrumb-row, .breadcrumb-current, .compare-car-name, .compare-value,
  .compare-attr, .compare-attr-head, .dealer-name, .dealer-contact-text,
  .spec-card-label, .spec-card-value, .faq-question, .faq-answer-inner,
  .admin-header h1, .admin-card h3, .admin-card p, .header-user-email,
  .nav-link, .header-mobile-link, .header-mobile-meta,
  .tucson-choice-main-title, .tucson-choice-tag, .tucson-choice-empty, .model-fit-audience-text,
  .premium-finder-cta-title, .premium-finder-cta-subtitle,
  .no-models, .no-variants, .chargers-empty, .fuel-empty, .fuel-source-note
) {
  color: var(--color-text) !important;
}

html[data-color-mode="dark"] .model-fit-divider {
  background: linear-gradient(
    180deg,
    transparent 0%,
    #2a3548 12%,
    #2a3548 88%,
    transparent 100%
  );
}

@media (max-width: 860px) {
  html[data-color-mode="dark"] .model-fit-divider {
    background: linear-gradient(
      90deg,
      transparent 0%,
      #2a3548 12%,
      #2a3548 88%,
      transparent 100%
    );
  }
}

html[data-color-mode="dark"] :is(
  .finder-intro-text, .featured-generation-model, .generation-count,
  .model-subtitle, .variant-stat-col, .choice-card-text, .fuel-price-label,
  .charger-list-meta, .charger-popup-city, .charger-popup-notes,
  .breadcrumb-separator, .compare-car-brand, .results-load-more-count,
  .finder-field-hint, .fuel-prices-embed-meta, .chargers-header-meta,
  .faq-answer-inner, .description-content, .fuel-source-note, .fuel-no-results,
  .variant-sorting label, .no-models, .no-variants
) {
  color: var(--color-text-muted) !important;
}

/* ---- Forms ---- */
html[data-color-mode="dark"] :is(
  input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not(.finder-search-input),
  select,
  textarea,
  .header-search-input,
  .finder-field input,
  .finder-field select,
  .results-filter-field input,
  .results-filter-field select,
  .results-sort-field select,
  .fuel-search input,
  .fuel-sort select,
  .chargers-city-filter select
) {
  background: var(--color-surface-input) !important;
  background-image: none !important;
  border: 1px solid #1a2332 !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .chargers-search input,
html[data-color-mode="dark"] .fuel-search input,
html[data-color-mode="dark"] .fuel-city-search,
html[data-color-mode="dark"] .ac-select-trigger {
  border: 1px solid #1a2332 !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .fuel-city-card,
html[data-color-mode="dark"] .charger-list-item,
html[data-color-mode="dark"] .chargers-list-wrap,
html[data-color-mode="dark"] .chargers-panel,
html[data-color-mode="dark"] .fuel-prices-embed--home,
html[data-color-mode="dark"] .chargers-embed--home,
html[data-color-mode="dark"] .btn-show-more {
  border-color: #1a2332 !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .fuel-tab:not(.active) {
  border-color: #1f2a3a !important;
}

html[data-color-mode="dark"] .toggle-filters-btn,
html[data-color-mode="dark"] .finder-btn.secondary,
html[data-color-mode="dark"] .results-filters-btn.secondary {
  background: var(--color-surface-section) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* ---- Buttons that stay light-on-dark ---- */
html[data-color-mode="dark"] :is(
  .finder-btn.primary,
  .admin-btn:not(.add-btn),
  .results-filters-btn.primary,
  .results-filters-mobile-toggle,
  .filter-button.active,
  .show-more-button:hover,
  .description-toggle-button:hover,
  .feature-cards-more-btn,
  .results-load-more-btn,
  .compare-add-more,
  .header-search-button,
  .btn-register,
  .sort-button,
  .ev-badge
) {
  color: #fff !important;
}

html[data-color-mode="dark"] .show-more-button,
html[data-color-mode="dark"] .description-toggle-button {
  color: #f8fafc !important;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.5) 0%, rgba(122, 15, 165, 0.38) 100%) !important;
  border: none !important;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.25) !important;
}

html[data-color-mode="dark"] .filter-button.active,
html[data-color-mode="dark"] .show-more-button:hover,
html[data-color-mode="dark"] .description-toggle-button:hover {
  background: linear-gradient(135deg, #a855f7 0%, #7a0fa5 100%) !important;
  color: #fff !important;
  border-color: #c084fc !important;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.4) !important;
}

html[data-color-mode="dark"] .add-btn {
  color: #111827 !important;
}

html[data-color-mode="dark"] .compare-clear-all {
  color: #f87171 !important;
}

html[data-color-mode="dark"] .variant-items {
  border-color: transparent !important;
}

html[data-color-mode="dark"] .variant-item {
  border-color: rgba(148, 163, 184, 0.32) !important;
}

@media (max-width: 768px) {
  html[data-color-mode="dark"] .variant-item {
    border-color: rgba(148, 163, 184, 0.38) !important;
    border-bottom-color: rgba(148, 163, 184, 0.38) !important;
  }

  html[data-color-mode="dark"] .variant-name-col {
    border-bottom-color: rgba(148, 163, 184, 0.28) !important;
  }
}

html[data-color-mode="dark"] .variant-item .variant-name-col,
html[data-color-mode="dark"] .variant-item .variant-stat-col,
html[data-color-mode="dark"] .variant-item .variant-stat-col::before,
html[data-color-mode="dark"] .variant-item .variant-price-col::before,
html[data-color-mode="dark"] .variant-item .variant-action-price-col::before {
  color: #fff !important;
}

html[data-color-mode="dark"] .variant-item .variant-price-col,
html[data-color-mode="dark"] .variant-item .variant-action-price-col {
  color: #34d399 !important;
}

/* ---- Accents ---- */
html[data-color-mode="dark"] .variant-card.premium-result {
  background: var(--color-surface) !important;
  background-image: none !important;
  border-color: #3a3a3a !important;
}

html[data-color-mode="dark"] .variant-item.highlighted-variant {
  background: rgba(16, 185, 129, 0.14) !important;
  border-color: #34d399 !important;
}

html[data-color-mode="dark"] .generation-card.highlighted {
  border-color: #34d399 !important;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2), var(--shadow-elevated) !important;
}

html[data-color-mode="dark"] .premium-chip {
  color: #fde68a !important;
  background: linear-gradient(135deg, #3f3010 0%, #5c4512 100%) !important;
}

html[data-color-mode="dark"] .variant-badge {
  background: var(--color-surface-input) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}

html[data-color-mode="dark"] .fuel-price-row.is-best,
html[data-color-mode="dark"] .fuel-city-card.is-cheapest {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(52, 211, 153, 0.35) !important;
}

html[data-color-mode="dark"] .fuel-meta-pill {
  background: var(--color-surface-section) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}

html[data-color-mode="dark"] .fuel-summary-card {
  box-shadow: none !important;
}

html[data-color-mode="dark"] .fuel-tab {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}

html[data-color-mode="dark"] .fuel-tab.active {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

html[data-color-mode="dark"] .fuel-tab-list {
  border-bottom-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .fuel-city-avatar {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
}

html[data-color-mode="dark"] .fuel-price-row {
  background: var(--color-surface-section) !important;
}

html[data-color-mode="dark"] .btn-show-more {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

html[data-color-mode="dark"] .utility-page-link {
  background: rgba(124, 58, 237, 0.18) !important;
  border-color: rgba(167, 139, 250, 0.35) !important;
  color: #c4b5fd !important;
}

html[data-color-mode="dark"] .chargers-search input {
  background: var(--color-surface-input) !important;
  border: 1px solid #1a2332 !important;
  color: var(--color-text) !important;
}

html[data-color-mode="dark"] .chargers-station-list {
  background: var(--color-surface-soft) !important;
}

html[data-color-mode="dark"] .charger-list-item {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .charger-list-city {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
}

html[data-color-mode="dark"] .chargers-list-header {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.12) 0%, var(--color-surface-section) 55%) !important;
  border-bottom-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

html[data-color-mode="dark"] .chargers-show-more-bar {
  background: var(--color-surface) !important;
  border-top-color: var(--color-border) !important;
}

/* ---- Header ---- */
html[data-color-mode="dark"] .main-header,
html[data-color-mode="dark"] .header-search-container {
  background: var(--gradient-header) !important;
  border-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .main-header :is(
  .header-all-cars-link,
  .nav-link,
  .header-user-email,
  .header-nav > span,
  .theme-toggle-btn,
  .header-menu-bar,
  .header-mobile-link:not(.header-mobile-link-accent),
  .header-mobile-meta,
  .header-mobile-button
) {
  color: #ffffff !important;
}

html[data-color-mode="dark"] .main-header .header-all-cars-link:hover,
html[data-color-mode="dark"] .main-header .nav-link:hover,
html[data-color-mode="dark"] .main-header .header-mobile-link:not(.header-mobile-link-accent):hover,
html[data-color-mode="dark"] .main-header .header-mobile-link:not(.header-mobile-link-accent):focus {
  color: rgba(255, 255, 255, 0.82) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

html[data-color-mode="dark"] .main-header .header-menu-toggle {
  border-color: rgba(255, 255, 255, 0.5) !important;
  background: transparent !important;
  color: #ffffff !important;
}

html[data-color-mode="dark"] .main-header .header-menu-toggle .header-menu-bar {
  background: currentColor !important;
  color: #ffffff !important;
}

html[data-color-mode="dark"] .main-header .theme-toggle-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}

html[data-color-mode="dark"] .main-header .theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}

html[data-color-mode="dark"] .header-search-input {
  color: #ffffff !important;
}

html[data-color-mode="dark"] .header-search-input::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

html[data-color-mode="dark"] .header-mobile-menu {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .header-menu-backdrop {
  background: rgba(0, 0, 0, 0.72) !important;
}

/* ---- Compare ---- */
html[data-color-mode="dark"] .compare-attr-head,
html[data-color-mode="dark"] .compare-attr {
  background: var(--color-surface-input) !important;
}

html[data-color-mode="dark"] .compare-table tbody tr:nth-child(odd) td,
html[data-color-mode="dark"] .compare-table tbody tr:nth-child(odd) .compare-attr {
  background: var(--color-surface-soft) !important;
}

html[data-color-mode="dark"] .compare-car-head {
  background: var(--color-surface) !important;
}

html[data-color-mode="dark"] .compare-bar {
  background: rgba(15, 23, 42, 0.96) !important;
  border-top-color: var(--color-border) !important;
}

/* ---- Admin ---- */
html[data-color-mode="dark"] .admin-table th {
  background: linear-gradient(135deg, var(--color-surface-section) 0%, var(--color-surface-alt) 100%) !important;
  color: var(--color-text-muted) !important;
}

html[data-color-mode="dark"] .admin-table td {
  color: var(--color-text) !important;
  border-bottom-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .admin-table tbody tr:hover {
  background-color: var(--color-surface-section) !important;
}

html[data-color-mode="dark"] .admin-header {
  border-bottom-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .admin-header h1 {
  color: var(--color-text) !important;
}

/* ---- Auth ---- */
html[data-color-mode="dark"] body:has(.container > form[action="/login"]),
html[data-color-mode="dark"] body:has(.container > form[action="/register"]) {
  background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 55%, #111827 100%) !important;
}

/* ---- Map ---- */
html[data-color-mode="dark"] .chargers-map {
  border-color: #1a2332 !important;
}

html[data-color-mode="dark"] .chargers-map .maplibregl-ctrl-group {
  border: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  background: #1e293b !important;
}

html[data-color-mode="dark"] .chargers-map .maplibregl-ctrl-group button {
  width: 34px !important;
  height: 34px !important;
  color: #f8fafc !important;
  background: #1e293b !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.28) !important;
}

html[data-color-mode="dark"] .chargers-map .maplibregl-ctrl-group button:hover {
  background: #334155 !important;
  color: #ffffff !important;
}

html[data-color-mode="dark"] .chargers-map .maplibregl-ctrl-group button:last-child {
  border-bottom: none !important;
}

html[data-color-mode="dark"] .charger-list-item.is-just-loaded {
  animation: chargerListFlashDark 1.1s ease;
}

@keyframes chargerListFlashDark {
  0% { background: rgba(34, 197, 94, 0.28) !important; }
  100% { background: var(--color-surface) !important; }
}

/* ---- Links ---- */
html[data-color-mode="dark"] a:not(.btn-register):not(.finder-btn):not(.results-filters-btn):not(.admin-btn):not(.brand-card):not(.variant-card):not(.model-card):not(.generation-card):not(.featured-generation-card):not(.news-card):not(.compare-car-link):not(.compare-add-more):not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out) {
  color: #7dd3fc;
}

html[data-color-mode="dark"] .breadcrumb-link {
  color: var(--color-primary-light) !important;
}

/* ---- Choice cards ---- */
html[data-color-mode="dark"] .choice-card::before {
  background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
}

html[data-color-mode="dark"] .choice-card-media {
  background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary)) !important;
}

html[data-color-mode="dark"] .choice-card-number {
  color: rgba(255, 255, 255, 0.08) !important;
}

html[data-color-mode="dark"] .feature-cards-viewport.is-collapsed::after {
  background: linear-gradient(180deg, transparent 0%, var(--color-surface) 72%);
}

html[data-color-mode="dark"] .admin-image-alert {
  background: linear-gradient(180deg, #450a0a 0%, #7f1d1d 100%);
  border-bottom-color: rgba(254, 202, 202, 0.45);
}

html[data-color-mode="dark"] .admin-image-alert a {
  color: #fde68a;
}

html[data-color-mode="dark"] .banner-wide-rotator,
html[data-color-mode="dark"] .banner-side-rotator {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .generation-expanded-header {
  background:
    radial-gradient(circle at 0% 0%, rgba(124, 58, 237, 0.12), transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.08), transparent 55%),
    var(--gradient-card) !important;
  border-bottom-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .variant-headers {
  background: var(--color-surface-input) !important;
  color: var(--color-text-muted) !important;
  border-color: var(--color-border) !important;
}

html[data-color-mode="dark"] select option {
  background: #1f2937;
  color: #e5e7eb;
}

html[data-color-mode="dark"] input::placeholder,
html[data-color-mode="dark"] textarea::placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}

html[data-color-mode="dark"] .spec-card:hover {
  background: var(--color-primary-muted) !important;
}

html[data-color-mode="dark"] .dealer-contact {
  background: var(--color-surface-input) !important;
  border-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .dealer-contact:hover {
  background: var(--color-accent-light) !important;
}

html[data-color-mode="dark"] .premium-finder-cta::after {
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.06) 30%, transparent 60%);
}

html[data-color-mode="dark"] .premium-finder-cta::before {
  color: rgba(255, 255, 255, 0.05);
}

html[data-color-mode="dark"] .theme-toggle-btn {
  background: var(--color-surface-section);
  border-color: var(--color-border);
  color: var(--color-text);
}

html[data-color-mode="dark"] .main-header .theme-toggle-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

html[data-color-mode="dark"] .theme-toggle-btn:hover {
  background: var(--color-surface-muted);
}

html[data-color-mode="dark"] .main-header .theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

html[data-color-mode="dark"] .finder-badge {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

html[data-color-mode="dark"] :is(
  .appearance-preview-shell,
  .appearance-preview-header,
  .appearance-preview-finder,
  .appearance-preview-cards,
  .appearance-preview-card,
  .appearance-preview-search
) {
  background: var(--color-surface-input) !important;
  border-color: var(--color-border) !important;
}

/* ---- Flat surfaces (no gradients) ---- */
html[data-color-mode="dark"] .results-filters-bar,
html[data-color-mode="dark"] .results-filters-panel,
html[data-color-mode="dark"] .results-filters-mobile-bar,
html[data-color-mode="dark"] .results-filters-form,
html[data-color-mode="dark"] .results-filters-row,
html[data-color-mode="dark"] .results-filter-field,
html[data-color-mode="dark"] .results-filters-actions {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .results-filters-bar {
  background: var(--color-surface) !important;
  border: 1px solid #1f2a3a !important;
}

html[data-color-mode="dark"] .results-filter-field input,
html[data-color-mode="dark"] .results-filter-field select,
html[data-color-mode="dark"] .results-sort-field select {
  background: var(--color-surface-input) !important;
  background-image: none !important;
  border: none !important;
  color: #f3f4f6 !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .results-filter-field label {
  color: #d1d5db !important;
}

html[data-color-mode="dark"] .variant-card,
html[data-color-mode="dark"] .variant-card.premium-result {
  background: var(--color-surface) !important;
  background-image: none !important;
  border-color: #3a3a3a !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .variant-card-body,
html[data-color-mode="dark"] .variant-card-row,
html[data-color-mode="dark"] .variant-price,
html[data-color-mode="dark"] .variant-badges {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .variant-price.premium-price {
  color: #41ffa6 !important;
}

html[data-color-mode="dark"] .variant-price.standard-price {
  color: #f3f4f6 !important;
}

html[data-color-mode="dark"] .variant-price--sale .variant-price-old {
  color: #94a3b8 !important;
}

html[data-color-mode="dark"] .variant-price--sale .variant-price-new {
  color: #4ade80 !important;
}

html[data-color-mode="dark"] .featured-generations-section,
html[data-color-mode="dark"] .featured-banner-row .featured-generations-section {
  background: transparent !important;
  background-image: none !important;
}

/* ==========================================================================
   Dark mode border reset (loaded last) — kills light #e2e8f0 / #dbe3ee outlines
   ========================================================================== */
html[data-color-mode="dark"] {
  --dm-border: #1c2433;
  --dm-border-soft: #161d2a;
}

/* Utility: force quiet borders on a subtree */
html.dm-theme .dm-quiet-borders,
html.dm-theme .dm-quiet-borders * {
  border-color: var(--dm-border, #1c2433) !important;
  outline-color: transparent !important;
  box-shadow: none !important;
}

html.dm-theme .dm-quiet-borders .fuel-tab.active,
html.dm-theme .dm-quiet-borders .chargers-show-more-bar .btn-show-more {
  border-color: transparent !important;
}

html.dm-theme .dm-quiet-borders .fuel-city-card.is-cheapest,
html.dm-theme .dm-quiet-borders .fuel-price-row.is-best,
html.dm-theme .dm-quiet-borders .charger-list-item.is-active {
  border-color: rgba(52, 211, 153, 0.4) !important;
}

html.dm-theme .dm-quiet-borders .fuel-summary-card {
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .dm-no-outline,
html[data-color-mode="dark"] .dm-no-outline * {
  border-color: var(--dm-border) !important;
  outline-color: transparent !important;
  box-shadow: none !important;
}

/* Broad element wipe for hardcoded light borders from page CSS */
html[data-color-mode="dark"] :is(
  .fuel-city-card,
  .fuel-prices-embed,
  .fuel-prices-embed--home,
  .fuel-meta-pill,
  .fuel-tab,
  .fuel-tab-list,
  .fuel-search input,
  .fuel-city-search,
  .fuel-sort select,
  .fuel-source-note,
  .fuel-empty,
  .fuel-price-row,
  .btn-show-more,
  .utility-page-link,
  .chargers-embed,
  .chargers-embed--home,
  .chargers-panel,
  .chargers-map,
  .chargers-list-wrap,
  .chargers-list-header,
  .chargers-station-list,
  .chargers-show-more-bar,
  .chargers-search input,
  .chargers-city-filter select,
  .charger-list-item,
  .charger-list-thumb-wrap,
  .ac-select-trigger,
  .ac-select-menu,
  .finder-card,
  .finder-intro,
  .finder-field input,
  .finder-field select,
  .toggle-filters-btn,
  .results-filters-bar,
  .results-filter-field input,
  .results-filter-field select,
  .results-sort-field select,
  .header-search-input,
  .header-menu-toggle,
  .theme-toggle-btn,
  .brand-card,
  .variant-card,
  .model-card,
  .generation-card,
  .featured-generation-card,
  .news-card,
  .admin-card,
  .compare-empty,
  .compare-table-wrap
) {
  border-color: var(--dm-border) !important;
}

/* Inputs: full border shorthand so page CSS cannot leave light edges */
html[data-color-mode="dark"] :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]):not(.finder-search-input),
  select,
  textarea,
  .ac-select-trigger
) {
  border: 1px solid var(--dm-border) !important;
  outline: none !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .finder-search-input {
  color: #fff !important;
  background: rgba(15, 23, 42, 0.82) !important;
  border: 1.5px solid rgba(233, 213, 255, 0.95) !important;
  caret-color: #e9d5ff !important;
}

html[data-color-mode="dark"] .finder-search-input:hover {
  border-color: #f8f0ff !important;
}

html[data-color-mode="dark"] .finder-search-input:focus {
  border-color: #ffffff !important;
  background: rgba(15, 23, 42, 0.92) !important;
}

/* Cards / panels / embeds — quiet borders, no default elevation shadows */
html[data-color-mode="dark"] :is(
  [class*="-card"]:not(.fuel-summary-card):not(.is-premium-all),
  [class*="-panel"],
  [class*="-embed"],
  [class*="-wrap"],
  [class*="-bar"]:not(.compare-bar):not(.touch-swipe-hint):not(.leaflet-bar),
  [class*="-list"],
  [class*="-grid"]
) {
  border-color: var(--dm-border) !important;
  box-shadow: none !important;
}

/* Premium brands in "Svi brendovi" — keep gold glow visible in dark mode */
html[data-color-mode="dark"] .brand-card.non-premium.is-premium-all {
  border-color: rgba(245, 211, 122, 0.65) !important;
  box-shadow:
    0 0 0 1px rgba(245, 211, 122, 0.35),
    0 0 14px rgba(245, 211, 122, 0.45),
    0 0 28px rgba(212, 175, 55, 0.28) !important;
}

html[data-color-mode="dark"] .brand-card.non-premium.is-premium-all:hover {
  box-shadow:
    0 0 0 1px rgba(245, 211, 122, 0.5),
    0 0 18px rgba(245, 211, 122, 0.55),
    0 0 32px rgba(212, 175, 55, 0.35) !important;
}

html[data-color-mode="dark"] .brand-card.non-premium.is-premium-all::after {
  font-size: 20px;
  color: #f5d37a;
  text-shadow:
    0 0 8px rgba(245, 211, 122, 0.95),
    0 0 16px rgba(212, 175, 55, 0.7);
}

html[data-color-mode="dark"] .fuel-summary-card {
  border: none !important;
  box-shadow: none !important;
}

/* Kill shadows on anything nested inside another surface */
html[data-color-mode="dark"] :is(
  .fuel-prices-embed,
  .fuel-prices-embed--home,
  .chargers-embed,
  .chargers-embed--home,
  .chargers-panel,
  .chargers-list-wrap,
  .finder-card,
  .finder-intro,
  .results-filters-bar,
  .results-section,
  .home-utilities-section,
  .home-cost-tools-section,
  .brands-section,
  .premium-brands-grid,
  .non-premium-brands-grid,
  .admin-card,
  .modal-content,
  [class*="-panel"],
  [class*="-embed"],
  [class*="-card"]
) :is(
  [class*="-card"]:not(.is-premium-all):not(.premium),
  [class*="-item"],
  [class*="-row"],
  [class*="-wrap"],
  [class*="-list"],
  [class*="-header"],
  [class*="-bar"]:not(.leaflet-bar),
  [class*="-thumb"],
  .btn-show-more,
  .utility-page-link,
  .fuel-tab,
  .fuel-meta-pill,
  .fuel-price-row,
  .fuel-summary-card,
  .charger-list-item,
  .ac-select-trigger,
  .ac-select-menu,
  input:not(.finder-search-input),
  select,
  textarea,
  button
) {
  box-shadow: none !important;
}

/* Finder search glow — must come after nested shadow kill */
html[data-color-mode="dark"] .finder-card .finder-search-input {
  color: #fff !important;
  background: rgba(15, 23, 42, 0.82) !important;
  border: 1.5px solid rgba(233, 213, 255, 0.75) !important;
  caret-color: #e9d5ff !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 0 10px rgba(216, 180, 254, 0.28),
    0 0 18px rgba(168, 85, 247, 0.16);
  animation:
    finder-input-attention 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both,
    finder-input-glow 2.8s ease-in-out 1.3s infinite;
}

html[data-color-mode="dark"] .finder-card .finder-search-input:hover {
  border-color: #f8f0ff !important;
}

html[data-color-mode="dark"] .finder-card .finder-search-input:focus {
  border-color: #ffffff !important;
  background: rgba(15, 23, 42, 0.92) !important;
  animation: finder-input-glow 1.8s ease-in-out infinite;
}

html[data-color-mode="dark"] .brands-section .brand-card.non-premium.is-premium-all,
html[data-color-mode="dark"] .non-premium-brands-grid .brand-card.non-premium.is-premium-all {
  border-color: rgba(245, 211, 122, 0.65) !important;
  box-shadow:
    0 0 0 1px rgba(245, 211, 122, 0.35),
    0 0 14px rgba(245, 211, 122, 0.5),
    0 0 28px rgba(212, 175, 55, 0.32) !important;
}

html[data-color-mode="dark"] .brands-section .brand-card.non-premium.is-premium-all:hover,
html[data-color-mode="dark"] .non-premium-brands-grid .brand-card.non-premium.is-premium-all:hover {
  box-shadow:
    0 0 0 1px rgba(245, 211, 122, 0.55),
    0 0 18px rgba(245, 211, 122, 0.6),
    0 0 34px rgba(212, 175, 55, 0.4) !important;
}

html[data-color-mode="dark"] .brands-section .brand-card.non-premium.is-premium-all::after,
html[data-color-mode="dark"] .non-premium-brands-grid .brand-card.non-premium.is-premium-all::after {
  font-size: 20px;
  color: #f5d37a;
  text-shadow:
    0 0 8px rgba(245, 211, 122, 0.95),
    0 0 16px rgba(212, 175, 55, 0.75);
}

html[data-color-mode="dark"] .fuel-tab:not(.active) {
  border: 1px solid var(--dm-border) !important;
  background: #151d2b !important;
}

html[data-color-mode="dark"] .fuel-tab.active {
  border-color: transparent !important;
}

html[data-color-mode="dark"] .fuel-tab-list {
  border-bottom: 1px solid var(--dm-border) !important;
}

html[data-color-mode="dark"] .fuel-price-row {
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .fuel-price-row.is-best {
  border-color: rgba(52, 211, 153, 0.28) !important;
  background: rgba(16, 185, 129, 0.12) !important;
}

html[data-color-mode="dark"] .fuel-city-card.is-cheapest {
  border-color: rgba(52, 211, 153, 0.35) !important;
}

html[data-color-mode="dark"] .charger-list-item {
  border: 1px solid var(--dm-border) !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .charger-list-item.is-active {
  border-color: #22c55e !important;
}

html[data-color-mode="dark"] .btn-show-more {
  border: 1px solid var(--dm-border) !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .chargers-show-more-bar .btn-show-more {
  border: none !important;
}

html[data-color-mode="dark"] .chargers-list-header,
html[data-color-mode="dark"] .chargers-show-more-bar {
  border-color: var(--dm-border) !important;
}

html[data-color-mode="dark"] .main-header,
html[data-color-mode="dark"] .header-search-container {
  border-bottom-color: var(--dm-border) !important;
  box-shadow: none !important;
}

/* Keep brand logo areas white (intentional) */
html[data-color-mode="dark"] .brand-card.premium .brand-card-image,
html[data-color-mode="dark"] .brand-card.non-premium .brand-card-image {
  background-color: #ffffff !important;
  border-color: transparent !important;
}

/* Leaflet zoom — keep after border kills so + / − stay clear in dark mode */
html[data-color-mode="dark"] .leaflet-control-zoom.leaflet-bar,
html[data-color-mode="dark"] .leaflet-bar.leaflet-control-zoom {
  border: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

html[data-color-mode="dark"] .leaflet-control-zoom a.leaflet-control-zoom-in,
html[data-color-mode="dark"] .leaflet-control-zoom a.leaflet-control-zoom-out {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  background: #1e293b !important;
  border: none !important;
  box-shadow: none !important;
}

html[data-color-mode="dark"] .leaflet-control-zoom a.leaflet-control-zoom-in {
  border-bottom: 1px solid rgba(148, 163, 184, 0.28) !important;
}

html[data-color-mode="dark"] .leaflet-control-zoom a.leaflet-control-zoom-in:hover,
html[data-color-mode="dark"] .leaflet-control-zoom a.leaflet-control-zoom-out:hover {
  background: #334155 !important;
  color: #ffffff !important;
}

/* Header hamburger — white lines, no fill (must be last) */
html[data-color-mode="dark"] .main-header button#headerMenuToggle.header-menu-toggle,
html.dm-theme .main-header button#headerMenuToggle.header-menu-toggle {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

html[data-color-mode="dark"] .main-header button#headerMenuToggle .header-menu-bar,
html.dm-theme .main-header button#headerMenuToggle .header-menu-bar {
  background: #ffffff !important;
}

html[data-color-mode="dark"] .header-search-input {
  background: rgba(15, 23, 42, 0.82) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  color: #fff !important;
}

html[data-color-mode="dark"] .header-search-input::placeholder {
  color: rgba(255, 255, 255, 0.58) !important;
}

/* Breadcrumbs — primary-light is too dim in dark theme */
html[data-color-mode="dark"] .breadcrumb-row {
  color: rgba(255, 255, 255, 0.78) !important;
}

html[data-color-mode="dark"] .breadcrumb-link {
  color: #ffffff !important;
  opacity: 0.9;
}

html[data-color-mode="dark"] .breadcrumb-link:hover {
  color: #ffffff !important;
  opacity: 1;
  text-decoration: underline;
}

html[data-color-mode="dark"] .breadcrumb-separator {
  color: rgba(255, 255, 255, 0.55) !important;
}

html[data-color-mode="dark"] .breadcrumb-current {
  color: #ffffff !important;
  font-weight: 700 !important;
}

html[data-color-mode="dark"] .market-stat,
html[data-color-mode="dark"] .brand-showcase,
html[data-color-mode="dark"] .model-showcase,
html[data-color-mode="dark"] .fuel-trip-card,
html[data-color-mode="dark"] .service-estimate,
html[data-color-mode="dark"] .page-hero,
html[data-color-mode="dark"] .fuel-estimate-card,
html[data-color-mode="dark"] .blog-card,
html[data-color-mode="dark"] .mobile-dock,
html[data-color-mode="dark"] .model-sticky-bar,
html[data-color-mode="dark"] .site-footer,
html[data-color-mode="dark"] .results-hero-count {
  border-color: var(--color-border) !important;
  background: var(--gradient-card, var(--color-surface));
}

html[data-color-mode="dark"] .market-strip--hero .market-stat {
  background: rgba(15, 23, 42, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-color-mode="dark"] .brand-showcase-link {
  color: var(--color-primary) !important;
}

html[data-color-mode="dark"] .finder-kicker {
  background: var(--color-primary-muted) !important;
  color: var(--color-primary) !important;
}

html[data-color-mode="dark"] .finder-intro-title,
html[data-color-mode="dark"] .finder-intro-text {
  text-shadow: none !important;
}

html[data-color-mode="dark"] .mobile-dock,
html[data-color-mode="dark"] .model-sticky-bar {
  background: rgba(15, 23, 42, 0.94) !important;
}

html[data-color-mode="dark"] .preset-chip {
  background: var(--color-surface-section) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

html[data-color-mode="dark"] .preset-chip:hover,
html[data-color-mode="dark"] .preset-chip.is-active {
  background: var(--gradient-btn) !important;
  color: #fff !important;
}

html[data-color-mode="dark"] .mobile-dock-item {
  color: var(--color-text-muted) !important;
}

html[data-color-mode="dark"] .mobile-dock-item.is-active {
  color: #fff !important;
  background: rgba(168, 85, 247, 0.22) !important;
}

html[data-color-mode="dark"] .price-from {
  color: var(--color-price) !important;
}

html[data-color-mode="dark"] .section-kicker,
html[data-color-mode="dark"] .finder-kicker {
  color: #e9d5ff !important;
}

html[data-color-mode="dark"] .search-field input,
html[data-color-mode="dark"] .header-search-input,
html[data-color-mode="dark"] .finder-search-input {
  background: var(--color-surface-input) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

html[data-color-mode="dark"] :is(
  .btn--primary,
  .finder-btn.primary,
  .results-filters-btn.primary,
  .header-search-button,
  .results-load-more-btn,
  .feature-cards-more-btn,
  .compare-bar-go,
  .compare-add-more
) {
  color: #fff !important;
}