/* Hand-written dark-mode fixes, loaded after the generated *.dark.css files.
   Rule: pictures are never darkened or filtered. */

/* Light logo variant (theme.js also swaps the src for older browsers). */
html[data-theme="dark"] img.public-brand-logo,
html[data-theme="dark"] img[data-dark-src] {
  content: url("/static/ulox-logo-dark.png");
}

/* Category icons and the placeholder picture are dark line drawings with a
   transparent background; give them a light backing so they stay visible. */
html[data-theme="dark"] img[src*="/static/icons/categories/"] {
  background-color: #eef1f6;
  border-radius: 12px;
}

html[data-theme="dark"] .category-icon img[src*="/static/icons/categories/"] {
  padding: 3px;
}

/* The front page hero keeps its light look (photo + light overlay). Its text
   uses the root variables, so give it the light values back. */
html[data-theme="dark"] .marketplace-hero {
  color-scheme: light;
  --ink: #07133d;
  --muted: #53607a;
  --line: #dde5f1;
  --surface: #f7f9fd;
  --panel: #ffffff;
  --accent-soft: #edf4ff;
}

/* Dropdown panels opened from the hero filters are not part of the photo;
   they follow the dark theme. */
html[data-theme="dark"] .marketplace-hero .marketplace-filter-panel {
  color-scheme: dark;
  --ink: #e8ebf2;
  --muted: #a3acbf;
  --line: #2a3242;
  --surface: #0f1420;
  --panel: #171d2b;
  --accent-soft: #1a2540;
}

/* Maps: the map pictures stay light, so price pins, cluster bubbles, zoom
   buttons and the map/satellite switch keep their light look on top of them. */
html[data-theme="dark"] .marketplace-map-pin,
html[data-theme="dark"] .marketplace-map-cluster {
  border-color: rgba(7, 19, 61, .14);
  box-shadow: 0 3px 10px rgba(16, 31, 75, .28);
}
html[data-theme="dark"] .marketplace-map-pin { color: #07133d; background: #fff; }
html[data-theme="dark"] .marketplace-map-pin:hover,
html[data-theme="dark"] .marketplace-map-pin.is-selected { color: #fff; background: #07133d; }
html[data-theme="dark"] .marketplace-map-cluster { color: #fff; background: #1261f3; border-color: #fff; }
html[data-theme="dark"] .leaflet-bar a,
html[data-theme="dark"] .leaflet-control-attribution { color: #07133d; background-color: rgba(255, 255, 255, .9); }
html[data-theme="dark"] .leaflet-control-attribution a { color: #0c46bd; }
html[data-theme="dark"] .marketplace-map-layer-toggle { background: #fff; }
html[data-theme="dark"] .marketplace-map-layer-option { color: #07133d; }
html[data-theme="dark"] .marketplace-map-layer-option.is-active { color: #fff; background: #1261f3; }
html[data-theme="dark"] .marketplace-map,
html[data-theme="dark"] .detail-map { background: #dfe9f0; }