/* =========================================================================
   NewAuto82 — Dark Theme Token System
   Light defaults in :root, dark overrides in [data-bs-theme="dark"].
   Extends existing --v2-* and --color-* tokens with dark mode values.
   Loaded BEFORE style.css so tokens are available to all downstream CSS.
   ========================================================================= */

:root {
  /* Declaring a scheme in BOTH modes is what stops the browser's forced-dark
     feature (Chrome "Auto dark mode for web contents") from inverting us: it only
     touches pages that never claim a scheme, and Bootstrap ships `color-scheme:
     dark` for its dark block only — so light mode was left open to a second,
     browser-made "theme" on top of ours. It also keeps native controls
     (scrollbars, selects, autofill) on the same side as the page.
     Must be restated here rather than left to Bootstrap: :root and
     [data-bs-theme=dark] have equal specificity, so this file — loaded later —
     would otherwise force `light` onto the dark theme too. */
  color-scheme: light;

  /* ── Unified semantic tokens (light mode defaults) ──────────────── */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f8f9fa;
  --surface-warm: #f1ede5;
  --surface-hover: #e9ecef;
  --fg: #111111;
  --fg-muted: #66666b;
  /* Was #6c757d, which only cleared AA on pure white (4.69) and failed on every
     other light surface this token actually lands on — 4.45 on --surface-2, 4.02
     on --surface-warm, 3.95 on --surface-hover. PSI caught it as one node
     (.car-picker__hint on /electro); the token was wrong for all four.
     #616a72 → 5.51 / 5.22 / 4.72 / 4.64. */
  --fg-subtle: #616a72;
  --fg-on-dark: #ffffff;
  /* The lead-form card (.buyout-calc) is a fixed dark plate in BOTH themes, so its
     accent cannot follow --price: in light mode that is #dc3545, which reads 3.79
     on #1b1b1f. Same value the dark theme already used. */
  --price-on-dark: #ff5160;
  --fg-muted-on-dark: #aeb0b7;
  --border: #dee2e6;
  --border-light: #e7e2d8;
  --border-dark: #2a2a30;
  --accent: #e0223a;
  --accent-hover: #c41d31;
  --price: #dc3545;
  --skeleton-bg: #e6e9ec;
  --skeleton-mid: #f3f5f7;
  --map-bg: #eef1f4;
  --map-fg: #4f5d6a;
  --shadow-sm: rgba(0, 0, 0, 0.1);
  --shadow-md: rgba(0, 0, 0, 0.15);

  /* Tag colors (light mode — solid tinted backgrounds) */
  --tag-featured-bg: #fff4d6;  --tag-featured-fg: #8a5a00;  --tag-featured-bd: #f0d97e;
  --tag-inventory-bg: #fde0e3; --tag-inventory-fg: #b1182a; --tag-inventory-bd: #f4b8c0;
  --tag-order-bg: #e8eaf0;     --tag-order-fg: #444c5c;     --tag-order-bd: #c5cad5;
  --tag-electro-bg: #e2f4eb;   --tag-electro-fg: #0c5c3c;   --tag-electro-bd: #b5dfcc;
  --tag-hybrid-bg: #eaf3df;    --tag-hybrid-fg: #31590f;    --tag-hybrid-bd: #c8ddb0;

  /* ── Map existing tokens to unified system ──────────────────────── */
  /* These override the values declared in style.css :root so that
     dark-mode overrides below propagate to every var(--v2-*) and
     var(--color-*) reference without touching each call site. */
  --color-bg-surface:     var(--surface-2);
  --color-bg-dark:        var(--border-dark);
  --color-bg-black:       #0a0a0a;
  --color-border:         var(--border);
  --color-text-secondary: var(--fg-muted);
  --color-text-muted:     var(--fg-subtle);
  --color-text-footer:    var(--fg-muted-on-dark);
  --color-price:          var(--price);

  --v2-bg:           var(--surface-warm);
  --v2-fg:           var(--fg);
  --v2-fg-muted:     var(--fg-muted);
  --v2-dark:         #0e0e10;
  --v2-dark-soft:    #1b1b1f;
  --v2-line:         var(--border-light);
  --v2-line-dark:    var(--border-dark);
  --v2-accent:       var(--accent);
  --v2-accent-hover: var(--accent-hover);

  /* Bootstrap body */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--fg);
  --bs-body-font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Dark mode token overrides ────────────────────────────────────── */
[data-bs-theme="dark"] {
  color-scheme: dark;

  --bg: #0e0e10;
  --surface: #1b1b1f;
  --surface-2: #232328;
  --surface-warm: #1b1b1f;
  --surface-hover: #2a2a30;
  --fg: #e0e0e6;
  --fg-muted: #9aa0ab;
  /* Not the light-mode #6e6e76 flipped: that lands at 3.4:1 on --surface, and this
     token carries real body text (card spec labels, facet labels, form hints), so
     AA needs 4.5:1. #8a8a92 → 5.6 / 5.0 / 4.6 on --bg / --surface / --surface-2.
     Light mode already went through this fix — see the note on .card-title-2t. */
  --fg-subtle: #8a8a92;
  --border: #2a2a30;
  --border-light: #2a2a30;
  --price: #ff5160;
  --skeleton-bg: #1b1b1f;
  --skeleton-mid: #2a2a30;
  --map-bg: #1b1b1f;
  /* Was #6e6e76 — 3.40 on its own --map-bg. Exactly the value the --fg-subtle note
     above rejects for the same reason, kept here by oversight; the facade carries a
     16px call to action («Показать карту»), so it needs more, not less. 6.15. */
  --map-fg: #9a9aa2;
  --shadow-sm: rgba(0, 0, 0, 0.3);
  --shadow-md: rgba(0, 0, 0, 0.4);

  /* Tag colors (dark mode — translucent backgrounds, bright text) */
  --tag-featured-bg: rgba(138,90,0,0.2);    --tag-featured-fg: #ffd560;    --tag-featured-bd: rgba(240,217,126,0.3);
  --tag-inventory-bg: rgba(177,24,42,0.2);  --tag-inventory-fg: #ff8090;   --tag-inventory-bd: rgba(244,184,192,0.3);
  --tag-order-bg: rgba(68,76,92,0.3);       --tag-order-fg: #b8c0d0;       --tag-order-bd: rgba(197,202,213,0.3);
  --tag-electro-bg: rgba(12,92,60,0.2);     --tag-electro-fg: #5cc896;     --tag-electro-bd: rgba(181,223,204,0.3);
  --tag-hybrid-bg: rgba(49,89,15,0.2);      --tag-hybrid-fg: #9ac46f;      --tag-hybrid-bd: rgba(200,221,176,0.3);

  /* Map existing tokens to dark values */
  --color-bg-surface:     var(--surface-2);
  --color-bg-dark:        var(--border-dark);
  --color-border:         var(--border);
  --color-text-secondary: var(--fg-muted);
  --color-text-muted:     var(--fg-subtle);
  --color-text-footer:    var(--fg-muted-on-dark);
  --color-price:          var(--price);

  --v2-bg:           var(--surface-warm);
  --v2-fg:           var(--fg);
  --v2-fg-muted:     var(--fg-muted);
  --v2-line:         var(--border-light);

  /* Bootstrap body */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--fg);

  /* Bootstrap does NOT re-tune its shadows for dark mode — the stock
     rgba(0,0,0,.075) of `.shadow-sm` is invisible on a #0e0e10 page, and the
     car page separates every block with `.card border-0 shadow-sm` alone.
     These vars only reach Bootstrap *components*; the `.shadow-*` utilities
     compile to literals and are overridden separately below. */
  --bs-box-shadow:    0 .5rem 1rem rgba(0, 0, 0, .55);
  --bs-box-shadow-sm: 0 .125rem .35rem rgba(0, 0, 0, .5);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .6);
}

/* The `.shadow-*` utilities are compiled literals carrying `!important`, so the
   --bs-box-shadow-* overrides above never reach them. Matching !important is the
   only way in; the extra [data-bs-theme] specificity keeps light mode untouched. */
[data-bs-theme="dark"] .shadow-sm { box-shadow: 0 .125rem .35rem rgba(0, 0, 0, .5) !important; }
[data-bs-theme="dark"] .shadow    { box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .55) !important; }
[data-bs-theme="dark"] .shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, .6) !important; }

/* =========================================================================
   Bootstrap 5.3 utility overrides for dark mode
   Bootstrap's own data-bs-theme="dark" handles most utilities natively,
   but the site has custom classes and legacy patterns that need help.
   ========================================================================= */

[data-bs-theme="dark"] body { background-color: var(--bg); color: var(--fg); }

[data-bs-theme="dark"] .text-dark { color: var(--fg) !important; }
[data-bs-theme="dark"] .text-muted { color: var(--fg-muted) !important; }
[data-bs-theme="dark"] .text-secondary { color: var(--fg-muted) !important; }
[data-bs-theme="dark"] .text-body { color: var(--fg) !important; }

[data-bs-theme="dark"] .bg-white { background-color: var(--surface) !important; }
[data-bs-theme="dark"] .bg-light { background-color: var(--surface-2) !important; }
[data-bs-theme="dark"] .bg-body-tertiary { background-color: var(--surface-2) !important; }

[data-bs-theme="dark"] .card {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--fg);
}
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
  background-color: var(--surface-2);
  border-color: var(--border);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--surface-2);
  border-color: var(--border);
  color: var(--fg);
}
[data-bs-theme="dark"] .form-control::placeholder { color: var(--fg-subtle); }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--surface-2);
  border-color: var(--accent);
  color: var(--fg);
}

/* Buttons are remapped through Bootstrap's own --bs-btn-* variables rather than
   plain `background`/`color`: the raw-property version only fixed the resting
   state, leaving :hover/:active to fall back to Bootstrap's light-mode values
   (e.g. .btn-outline-dark hovering to #212529 — invisible on a dark page). */
[data-bs-theme="dark"] .btn-light {
  --bs-btn-bg: var(--surface-2);
  --bs-btn-border-color: var(--border);
  --bs-btn-color: var(--fg);
  --bs-btn-hover-bg: var(--surface-hover);
  --bs-btn-hover-border-color: var(--fg-subtle);
  --bs-btn-hover-color: var(--fg);
  --bs-btn-active-bg: var(--surface-hover);
  --bs-btn-active-border-color: var(--fg-subtle);
  --bs-btn-active-color: var(--fg);
}
[data-bs-theme="dark"] .btn-outline-dark {
  --bs-btn-color: var(--fg);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-bg: var(--surface-hover);
  --bs-btn-hover-border-color: var(--fg-subtle);
  --bs-btn-hover-color: var(--fg);
  --bs-btn-active-bg: var(--surface-hover);
  --bs-btn-active-border-color: var(--fg-subtle);
  --bs-btn-active-color: var(--fg);
}
/* .btn-dark is the site's neutral CTA («Перейти в каталог») AND the *active*
   state of the catalog filter pairs, where its counterpart is .btn-outline-dark.
   In dark mode Bootstrap keeps it at #212529 — near-invisible on a #0e0e10 page
   and indistinguishable from the outline variant. Lifted to a bordered surface
   so both roles still read; it keeps light text, so the `text-white` some call
   sites add stays correct. */
[data-bs-theme="dark"] .btn-dark {
  --bs-btn-bg: var(--surface-hover);
  --bs-btn-border-color: var(--fg-subtle);
  --bs-btn-color: var(--fg);
  --bs-btn-hover-bg: #383840;
  --bs-btn-hover-border-color: var(--fg-muted);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #383840;
  --bs-btn-active-border-color: var(--fg-muted);
  --bs-btn-active-color: #fff;
}
/* Bootstrap keeps .btn-outline-secondary at #6c757d in dark mode — ~3.4:1 on the
   page background, under AA for the small button text the site uses it for. */
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--fg-muted);
  --bs-btn-border-color: var(--fg-subtle);
  --bs-btn-hover-bg: var(--surface-hover);
  --bs-btn-hover-border-color: var(--fg-muted);
  --bs-btn-hover-color: var(--fg);
  --bs-btn-active-bg: var(--surface-hover);
  --bs-btn-active-border-color: var(--fg-muted);
  --bs-btn-active-color: var(--fg);
}

/* Bootstrap re-themes neither of these in dark mode: .btn-outline-danger keeps
   #dc3545 (4.26 on the page — the «В наличии» catalog filter) and
   .btn-outline-primary keeps #0d6efd (3.81 on a card — «Написать в Telegram» on
   /car). The filled hover has to take dark text: white on either lightened fill
   is worse than the problem being fixed (3.18 on #ff5160). */
[data-bs-theme="dark"] .btn-outline-danger {
  --bs-btn-color: var(--price);
  --bs-btn-border-color: var(--price);
  --bs-btn-hover-bg: var(--price);
  --bs-btn-hover-border-color: var(--price);
  --bs-btn-hover-color: #111;
  --bs-btn-active-bg: var(--price);
  --bs-btn-active-border-color: var(--price);
  --bs-btn-active-color: #111;
}
[data-bs-theme="dark"] .btn-outline-primary {
  /* Bootstrap's own $blue-300 — the blue its dark theme uses for primary text. */
  --bs-btn-color: #6ea8fe;
  --bs-btn-border-color: #6ea8fe;
  --bs-btn-hover-bg: #6ea8fe;
  --bs-btn-hover-border-color: #6ea8fe;
  --bs-btn-hover-color: #111;
  --bs-btn-active-bg: #6ea8fe;
  --bs-btn-active-border-color: #6ea8fe;
  --bs-btn-active-color: #111;
}

[data-bs-theme="dark"] .list-group-item {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--fg);
}

[data-bs-theme="dark"] .breadcrumb-item a { color: var(--fg-muted); }
[data-bs-theme="dark"] .breadcrumb-item.active { color: var(--fg); }

/* Bootstrap's .link-* helpers read --bs-{name}-rgb, and it leaves --bs-dark-rgb
   and --bs-secondary-rgb at their light-mode values in dark mode. .link-dark then
   paints #212529 on a #1b1b1f card — 1.1:1, i.e. the link disappears outright
   («Карта станций Крыма» on an EV page). Those vars can't just be remapped:
   --bs-dark-rgb also drives .bg-dark, which is the (intentionally) dark navbar.
   Matching !important is required — the helpers carry it. */
[data-bs-theme="dark"] .link-dark {
  color: var(--fg) !important;
  text-decoration-color: var(--fg-muted) !important;
}
[data-bs-theme="dark"] .link-secondary {
  color: var(--fg-muted) !important;
  text-decoration-color: var(--fg-subtle) !important;
}

[data-bs-theme="dark"] .page-link {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--fg);
}
[data-bs-theme="dark"] .page-item.active .page-link {
  background-color: var(--accent);
  border-color: var(--accent);
}

[data-bs-theme="dark"] .modal-content {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--fg);
}
[data-bs-theme="dark"] .modal-header { border-bottom-color: var(--border); }
[data-bs-theme="dark"] .modal-footer { border-top-color: var(--border); }

/* .nav-offcanvas is excluded: the header, the navbar and the drawer are the
   site's fixed dark chassis in BOTH themes, and a blanket .offcanvas override
   made the drawer #1b1b1f in dark mode — i.e. LIGHTER than the #0a0a0a it uses
   in light mode, which reads as a bug rather than a theme. It is currently the
   only offcanvas on the public site; the generic rule is kept for future ones. */
[data-bs-theme="dark"] .offcanvas:not(.nav-offcanvas) { background-color: var(--surface); color: var(--fg); }

[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--surface);
  border-color: var(--border);
}
[data-bs-theme="dark"] .dropdown-item { color: var(--fg); }
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: var(--surface-hover);
  color: var(--fg);
}
[data-bs-theme="dark"] .dropdown-divider { border-color: var(--border); }

[data-bs-theme="dark"] .table { --bs-table-color: var(--fg); --bs-table-border-color: var(--border); }
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--surface-2);
}
/* .table-light is a *static* Bootstrap variant — it does not follow data-bs-theme,
   so the privacy-policy table head stayed near-white with near-white text. */
[data-bs-theme="dark"] .table-light {
  --bs-table-color: var(--fg);
  --bs-table-bg: var(--surface-2);
  --bs-table-border-color: var(--border);
  --bs-table-striped-color: var(--fg);
  --bs-table-hover-color: var(--fg);
}

[data-bs-theme="dark"] .accordion-button {
  background-color: var(--surface);
  color: var(--fg);
}
[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--surface-2);
  color: var(--fg);
  box-shadow: 0 -1px var(--border) inset;
}
[data-bs-theme="dark"] .accordion-button::after { filter: invert(1) brightness(0.9); }
[data-bs-theme="dark"] .accordion-collapse { background-color: var(--surface); }
[data-bs-theme="dark"] .accordion-body { color: var(--fg); }

[data-bs-theme="dark"] .alert-info { background-color: var(--surface-2); border-color: var(--border); color: var(--fg); }
[data-bs-theme="dark"] .alert-warning { background-color: rgba(255, 193, 7, 0.1); border-color: var(--border); color: var(--fg); }

[data-bs-theme="dark"] hr { border-color: var(--border); opacity: 0.5; }

/* =========================================================================
   Component-specific dark overrides
   Components that still have hardcoded colors or need special handling.
   ========================================================================= */

/* ── Salon address section ────────────────────────────────────────── */
[data-bs-theme="dark"] .salon-addr-section { background: var(--surface); }
[data-bs-theme="dark"] .salon-addr-info { background: var(--surface-2); }
[data-bs-theme="dark"] .salon-addr-eyebrow { color: var(--fg-muted); }
[data-bs-theme="dark"] .salon-addr-hours { color: var(--fg-muted); }
[data-bs-theme="dark"] .salon-addr-btn { border-color: var(--fg); color: var(--fg); }
[data-bs-theme="dark"] .salon-addr-btn--dark { background: var(--fg); color: var(--bg); }
/* Hover brightens the plate — it must NOT reach for --surface-hover. In light mode
   the plate is dark and the label is --bg (white); mapping the same pair onto dark
   mode gives a #2a2a30 plate under #0e0e10 text, i.e. the button turns dark and the
   phone number disappears into it (1.5:1). */
[data-bs-theme="dark"] .salon-addr-btn--dark:hover { background: #ffffff; color: var(--bg); }
[data-bs-theme="dark"] .salon-addr-btn--outline:hover { background: var(--fg); color: var(--bg); }
[data-bs-theme="dark"] .salon-addr-map { background: var(--surface-2); }

/* ── Car picker (/order "help me choose") ─────────────────────────── */
[data-bs-theme="dark"] .car-picker { background: var(--surface-2); border-color: var(--border); }
[data-bs-theme="dark"] .car-picker__title { color: var(--fg); }
[data-bs-theme="dark"] .car-picker__sub { color: var(--fg-muted); }
[data-bs-theme="dark"] .car-picker__modes { border-bottom-color: var(--border); }
[data-bs-theme="dark"] .car-picker__mode { color: var(--fg-muted); }
[data-bs-theme="dark"] .car-picker__mode:hover { color: var(--fg); }
[data-bs-theme="dark"] .car-picker__mode--active { color: var(--fg); border-bottom-color: var(--accent); }
[data-bs-theme="dark"] .car-picker__field label { color: var(--fg-muted); }
[data-bs-theme="dark"] .car-picker__field select,
[data-bs-theme="dark"] .car-picker__field input,
[data-bs-theme="dark"] .car-picker__field textarea {
  background: var(--surface); color: var(--fg); border-color: var(--border);
}
[data-bs-theme="dark"] .car-picker__hint { color: var(--fg-subtle); }
[data-bs-theme="dark"] .car-picker__success p { color: var(--fg-muted); }

/* ── Car detail tags ──────────────────────────────────────────────── */
[data-bs-theme="dark"] .car-tag--featured  { background: var(--tag-featured-bg);  color: var(--tag-featured-fg);  border-color: var(--tag-featured-bd); }
[data-bs-theme="dark"] .car-tag--inventory { background: var(--tag-inventory-bg); color: var(--tag-inventory-fg); border-color: var(--tag-inventory-bd); }
[data-bs-theme="dark"] .car-tag--order     { background: var(--tag-order-bg);     color: var(--tag-order-fg);     border-color: var(--tag-order-bd); }
[data-bs-theme="dark"] .car-tag--electro   { background: var(--tag-electro-bg);   color: var(--tag-electro-fg);   border-color: var(--tag-electro-bd); }
[data-bs-theme="dark"] .car-tag--hybrid    { background: var(--tag-hybrid-bg);    color: var(--tag-hybrid-fg);    border-color: var(--tag-hybrid-bd); }
[data-bs-theme="dark"] .car-tag--country   { background: var(--surface-2); color: var(--fg); border-color: var(--border); }
/* «Продан» is #1f1f24 in light mode — one shade off --surface (#1b1b1f), so in
   dark mode the tag dissolved into the card it sits on. Inverted instead. */
[data-bs-theme="dark"] .car-tag--sold      { background: var(--fg-muted); color: var(--bg); border-color: var(--fg-muted); }

/* ── /contacts warm blocks ────────────────────────────────────────────
   --surface-warm collapses onto --surface in dark mode (#1b1b1f both), so the two
   blocks the design makes "warm" — the email bar and the address column — became
   indistinguishable from the contact cards sitting right above them, and the page
   read as one flat sheet. --surface-2 is the next step up (#232328) and is already
   what the messenger buttons use inside those cards. Scoped rather than fixed on
   the token, because --surface-warm also feeds --v2-bg (hero.css) and the salon
   address section, where the collapse is intentional. */
[data-bs-theme="dark"] .email-bar,
[data-bs-theme="dark"] .addr-info {
  background: var(--surface-2);
}

/* ── "NO IMAGE" fallback ──────────────────────────────────────────────
   A light-grey JPG baked at build time, so it cannot follow the theme — on a
   dark grid it read as a lit panel among the photos. Matched on the src because
   the same file is emitted from four places (CarService, ListingImageService,
   _card_media, admin cards) and the path is a constant in all of them. */
[data-bs-theme="dark"] img[src$="/images/placeholder.jpg"] {
  filter: brightness(0.42) contrast(1.15);
}

/* ── Card media skeleton + map placeholder ────────────────────────── */
[data-bs-theme="dark"] .card-media {
  background-color: var(--skeleton-bg);
  background-image: linear-gradient(100deg, var(--skeleton-bg) 30%, var(--skeleton-mid) 50%, var(--skeleton-bg) 70%);
}
[data-bs-theme="dark"] .map-lazy { background: var(--map-bg); color: var(--map-fg); }
[data-bs-theme="dark"] .map-lazy:hover { background: var(--surface-hover); }

/* The Yandex map widget has no dark mode — the free Constructor product takes no
   theme parameter, and the Style Editor only feeds the paid JS API (review.md O-28).
   Until that migration is worth paying for, the frame is flipped here: invert()
   darkens it and the 180° hue rotation puts the hues back, so water stays blue and
   parks stay green instead of turning orange.
   Costs: the balloon, the star rating and the Yandex logo are flipped too, and the
   traffic layer loses its red/amber/green coding — acceptable for a static store
   locator, not for anything where those colours carry meaning.
   Deliberately scoped to the salon-map modifier and NOT to every .map-container:
   /electro embeds elektrokarta.ru, which renders dark on its own (verified in both OS
   schemes — it ignores prefers-color-scheme) and would come out white. */
[data-bs-theme="dark"] .map-container--salon iframe {
  filter: invert(1) hue-rotate(180deg);
}

/* ── Electro strip ────────────────────────────────────────────────── */
[data-bs-theme="dark"] .electro-strip {
  background: var(--tag-electro-bg);
  color: var(--fg);
  border-color: var(--tag-electro-bd);
}
[data-bs-theme="dark"] .electro-strip:hover { background: rgba(12, 92, 60, 0.3); }
[data-bs-theme="dark"] .electro-strip .ti-bolt { color: var(--tag-electro-fg); }
[data-bs-theme="dark"] .electro-strip__cta { color: var(--tag-electro-fg); }

/* ── Brand chips + facet labels (home browse) ─────────────────────── */
[data-bs-theme="dark"] .brand-chip { background: var(--surface); color: var(--fg); border-color: var(--border); }
[data-bs-theme="dark"] .brand-chip:hover { border-color: var(--accent); color: var(--fg); }
[data-bs-theme="dark"] .brand-chip__count { background: var(--surface-2); color: var(--fg-muted); }
[data-bs-theme="dark"] .brand-chip:hover .brand-chip__count { background: var(--tag-inventory-bg); color: var(--tag-inventory-fg); }
[data-bs-theme="dark"] .facet-label { color: var(--fg-subtle); }
[data-bs-theme="dark"] .brand-more { color: var(--fg-muted); border-color: var(--border); }
[data-bs-theme="dark"] .brand-more:hover { color: var(--accent); border-color: var(--accent); }

/* ── Brand marks on dark ──────────────────────────────────────────────
   The 404 vendor PNGs are all drawn for a light background: 237 of them have a
   mean luminance below 90 (Nissan, Audi, Lexus, Zeekr, Renault and Lynk & Co are
   flat black, i.e. ~1:1 against the #1b1b1f card) so they vanish outright. There
   is no per-brand data telling those from the brand-coloured ones, so every mark
   is flattened to a white silhouette: uniform, and it costs the brand colour only
   at 15–28 px. **The list of selectors is the whole point** — the filter used to
   sit on the chips alone, which left the card title, the car-page H1 and the admin
   preview showing black-on-black. The active chip sits on a light background
   already and opts out.

   ⚠️ CarsBase does ship `{MARK}_DARK.png` (410 of them, `/download/logos.zip` on
   api.cars-base.ru — the `/api2` path in their docs 404s). Measured 2026-08-21:
   for 4 of 5 sampled marks the file is pixel-identical to what this filter
   produces — same alpha shape, filled pure white — so it IS this monochrome, not
   a way out of it, and 10 of our marks (incl. TANK, CUPRA) have no dark variant
   at all. Don't spend the 3.6 MB archive on it.

   A light plate under the mark is the option that would keep the brand colour;
   tried 2026-08-21 and rejected on looks. */
[data-bs-theme="dark"] .brand-chip:not(.brand-chip-active) img,
[data-bs-theme="dark"] .logo-inline,
[data-bs-theme="dark"] .logo-inline-sm {
  filter: brightness(0) invert(1);
}

/* ── Catalog brand/body chips + button hovers ─────────────────────────
   These live in an inline <style> at the bottom of catalog/index.php, which the
   layout renders AFTER this file — so overriding them needs the extra
   [data-bs-theme] specificity, and `!important` wherever the inline rule has it.
   Both chip families are named `.brand-chip`, but the catalog one is a
   transparent outline pill and the home one a filled white pill; the shared
   dark treatment above is deliberate — they converge in dark mode. */
[data-bs-theme="dark"] .body-chip { background: var(--surface); color: var(--fg); border-color: var(--border); }
[data-bs-theme="dark"] .brand-chip-active,
[data-bs-theme="dark"] .body-chip-active {
  /* #212529 read as "off" against the dark page — the active facet was invisible. */
  background-color: var(--fg) !important;
  color: var(--bg) !important;
  border-color: var(--fg) !important;
}
[data-bs-theme="dark"] .btn-outline-dark:hover,
[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-warning:hover {
  color: var(--fg) !important;
  background-color: var(--surface-hover) !important;
}
[data-bs-theme="dark"] .btn-outline-danger:hover {
  color: var(--price) !important;
  background-color: var(--surface-hover) !important;
}

/* ── Card body (spec grid, condition badge) ───────────────────────── */
[data-bs-theme="dark"] .car-specs .k { color: var(--fg-subtle); }
[data-bs-theme="dark"] .car-specs .v { color: var(--fg); }
[data-bs-theme="dark"] .card-cond { background: var(--surface-2); color: var(--fg); }
[data-bs-theme="dark"] .card-title-2t .ct-trim { color: var(--fg-muted); }

/* ── Chevron toggle ───────────────────────────────────────────────── */
[data-bs-theme="dark"] .chevron-toggle { color: var(--fg-subtle); }

/* ── Contacts page messenger links (inline <style> in contacts/index.php) ──
   #6c757d is an AA pass on white (4.7) but only 4.1 on --bg, and these carry the
   link text «Написать в Telegram», not just an icon. The MAX brand plum (#2a1f33)
   is darker than the page itself, so hovering the icon made it disappear. */
[data-bs-theme="dark"] .messenger-link { color: var(--fg-muted); }
[data-bs-theme="dark"] .messenger-link.max:hover { color: #b98fd0; }

/* ── Catalog chip remove + condition toggle ───────────────────────── */
[data-bs-theme="dark"] .catalog-chip-remove { border-color: var(--border); color: var(--fg-muted); }
[data-bs-theme="dark"] .catalog-chip-remove:hover {
  background-color: var(--surface-hover);
  border-color: var(--fg-muted);
  color: var(--fg);
}
[data-bs-theme="dark"] .btn.disabled.condition-unavailable {
  color: var(--fg-subtle) !important;
  background-color: var(--surface-2) !important;
  border-color: var(--border) !important;
}
[data-bs-theme="dark"] .status-overlay { background: rgba(14, 14, 16, 0.5); }

/* ── Gallery price tag + spec icons ───────────────────────────────── */
[data-bs-theme="dark"] .price-tag { color: var(--price); }
[data-bs-theme="dark"] .spec-icon { color: var(--accent); }
[data-bs-theme="dark"] .gallery-thumb:hover,
[data-bs-theme="dark"] .gallery-thumb.active { border-color: var(--accent); }

/* ── Landing pages ────────────────────────────────────────────────── */
[data-bs-theme="dark"] .landing-hero {
  background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
  border-color: var(--border);
}
[data-bs-theme="dark"] .step-number { background-color: var(--accent); }
[data-bs-theme="dark"] .region-badge {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
}

/* ── Lead form (.buyout-calc) — light variant reverts to dark in dark mode */
[data-bs-theme="dark"] .buyout-calc--light {
  background: var(--v2-dark-soft);
  color: #fff;
  border-color: var(--v2-line-dark);
}
[data-bs-theme="dark"] .buyout-calc--light .buyout-calc__title { color: var(--price-on-dark); }
[data-bs-theme="dark"] .buyout-calc--light .buyout-calc__sub { color: #aeb0b7; }
[data-bs-theme="dark"] .buyout-calc--light .buyout-calc__toggle { color: #aeb0b7; }
[data-bs-theme="dark"] .buyout-calc--light .buyout-calc__field label { color: #aeb0b7; }
[data-bs-theme="dark"] .buyout-calc--light .buyout-calc__field select,
[data-bs-theme="dark"] .buyout-calc--light .buyout-calc__field input,
[data-bs-theme="dark"] .buyout-calc--light .buyout-calc__field textarea {
  background: #0e0e10;
  color: #fff;
  border-color: var(--v2-line-dark);
}
[data-bs-theme="dark"] .buyout-calc--light .buyout-calc__hint { color: #6e6e76; }
[data-bs-theme="dark"] .buyout-calc--light .buyout-calc__error { color: #ff7a8a; }
[data-bs-theme="dark"] .buyout-calc--light .buyout-calc__success p { color: #aeb0b7; }

/* ── Brand wordmark on light surfaces ─────────────────────────────── */
[data-bs-theme="dark"] .brand-wordmark--dark .brand-wordmark__lead,
[data-bs-theme="dark"] .brand-wordmark--dark .brand-wordmark__accent {
  color: var(--fg);
}

/* =========================================================================
   Theme switcher — segmented system / light / dark
   Lives in the sticky navbar and the mobile drawer header. BOTH are permanently
   dark surfaces regardless of theme, so these colours are deliberately fixed
   white-on-transparent and must NOT be moved onto the --fg/--bg tokens.
   ========================================================================= */
.theme-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.theme-switch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.theme-switch__btn:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.theme-switch__btn:focus-visible { outline: 2px solid #fff; outline-offset: -1px; }
/* Active segment: filled pill, so the current mode is readable at a glance
   instead of being inferred from which icon happens to be showing. */
.theme-switch__btn[aria-pressed="true"] {
  background: #fff;
  color: #111;
}
.theme-switch__icon { width: 16px; height: 16px; display: block; }

/* Desktop: the switcher closes the sticky nav on the right. */
.theme-switch--nav { margin-left: auto; }

/* Mobile drawer header — sits beside the wordmark and the close button. */
.theme-switch--drawer .theme-switch__btn { width: 28px; height: 24px; }
.theme-switch--drawer .theme-switch__icon { width: 15px; height: 15px; }

@media (prefers-reduced-motion: reduce) { .theme-switch__btn { transition: none; } }

/* =========================================================================
   Compact theme dropdown — replaces the 3-button segmented control below xxl
   (1400px), where horizontal nav space is tight. A single icon-and-caret
   button opens a small menu. Same data-theme-mode buttons inside, so the
   shared JS in theme-switch.js wires them with zero extra code.
   ========================================================================= */
.theme-switch-dropdown {
  margin-left: auto;
  align-items: center;
  flex-shrink: 0;
}

.theme-switch-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.theme-switch-dropdown__toggle:hover,
.theme-switch-dropdown__toggle[aria-expanded="true"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}
.theme-switch-dropdown__toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -1px;
}

/* Only the icon matching the current mode is visible; the others are hidden.
   The container's data-current-mode is kept in sync by theme-switch.js. */
.theme-switch-dropdown__toggle .ts-toggle-icon { display: none; }
.theme-switch-dropdown[data-current-mode="system"] .ts-toggle-icon--system,
.theme-switch-dropdown[data-current-mode="light"]  .ts-toggle-icon--light,
.theme-switch-dropdown[data-current-mode="dark"]   .ts-toggle-icon--dark { display: block; }

.theme-switch-dropdown__caret {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.6;
}
.theme-switch-dropdown__toggle[aria-expanded="true"] .theme-switch-dropdown__caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* Dropdown menu — dark surface matching the navbar */
.theme-switch-dropdown__menu {
  --bs-dropdown-min-width: 190px;
  background-color: #2a2d31;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.theme-switch-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.75);
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.theme-switch-dropdown__item:hover,
.theme-switch-dropdown__item:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.theme-switch-dropdown__item[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-weight: 600;
}
.theme-switch-dropdown__item .theme-switch__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .theme-switch-dropdown__toggle,
  .theme-switch-dropdown__caret { transition: none; }
}