/**
 * Dark mode — hand-written layer
 *
 * Most of the dark theme is derived at runtime from the page's own CSS
 * (core/class-ir-dark-mode-css.php). This file holds what a transformer cannot
 * infer: the palette as tokens, native control colour, third-party widgets
 * (Leaflet), and components whose colours come from var() tokens rather than
 * literal colours.
 *
 * Everything is scoped to html[data-brx-theme="dark"] (set by the head script
 * in core/class-ir-dark-mode.php). The prefix weighs (0,1,1), enough to win over
 * the derived layer, which keeps each source selector's own specificity.
 *
 * Keep the --ir-dm-* values in step with IR_Dark_Mode_Css::PALETTE.
 */

html[data-brx-theme="dark"] {
    color-scheme: dark;

    --ir-dm-bg: #0f1923;
    --ir-dm-surface: #16222e;
    --ir-dm-surface-2: #1e2d3c;
    --ir-dm-surface-mid: #2c3c4d;
    --ir-dm-border: #2e4052;
    --ir-dm-text: #e6edf3;
    --ir-dm-muted: #a9b6c3;
    --ir-dm-link: #4fb3ea;
}

/* ------------------------------------------------------------------
 * Maps (Leaflet)
 * OpenStreetMap tiles have no dark variant; inverting the tile pane and
 * turning the hue back keeps water blue and parks green, at night brightness.
 * Only the tiles: markers, clusters and popups keep their colours.
 * ------------------------------------------------------------------ */
html[data-brx-theme="dark"] .leaflet-container {
    background: var(--ir-dm-surface-2);
}

html[data-brx-theme="dark"] .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.5);
}

html[data-brx-theme="dark"] .leaflet-bar a,
html[data-brx-theme="dark"] .leaflet-bar a:hover {
    background-color: var(--ir-dm-surface);
    border-bottom-color: var(--ir-dm-border);
    color: var(--ir-dm-text);
}

html[data-brx-theme="dark"] .leaflet-control-attribution {
    background: rgba(15, 25, 35, 0.75) !important;
    color: var(--ir-dm-muted);
}

html[data-brx-theme="dark"] .leaflet-control-attribution a {
    color: var(--ir-dm-link);
}

html[data-brx-theme="dark"] .leaflet-popup-content-wrapper,
html[data-brx-theme="dark"] .leaflet-popup-tip {
    background: var(--ir-dm-surface);
    color: var(--ir-dm-text);
}

/* ------------------------------------------------------------------
 * Form controls
 * color-scheme handles native widgets; placeholders in several plugin forms
 * are a literal mid grey that disappears on a dark field.
 * ------------------------------------------------------------------ */
html[data-brx-theme="dark"] input::placeholder,
html[data-brx-theme="dark"] textarea::placeholder {
    color: #7d8d9c;
    opacity: 1;
}

html[data-brx-theme="dark"] select option {
    background-color: var(--ir-dm-surface);
    color: var(--ir-dm-text);
}

/* Fields that set no background of their own (Bricks forms, the chatbot input)
   fall back under color-scheme: dark to the browser's neutral grey, off-palette
   next to navy. :where() keeps this at zero specificity, so any field that does
   style itself, including `background: transparent`, is left alone. */
:where(html[data-brx-theme="dark"]) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"], [type="color"]), textarea, select) {
    background-color: var(--ir-dm-surface-2);
    color: var(--ir-dm-text);
}

/* Bricks dropdowns take the page colour; a hairline keeps them off the header. */
html[data-brx-theme="dark"] .bricks-nav-menu .sub-menu {
    border: 1px solid var(--ir-dm-border);
}

/* ------------------------------------------------------------------
 * Novogradnja landing
 * Its palette is a token set on the wrapper, partly re-set inline by the
 * composer template (style="--ir-novogradnja-surface:..."), hence !important.
 * The derived layer already turns `color: var(--ir-novogradnja-primary)` into a
 * readable blue; the tokens below catch every other use. Primary, accent and the
 * status fills stay brand: they carry white text.
 * ------------------------------------------------------------------ */
html[data-brx-theme="dark"] .ir-novogradnja-landing,
html[data-brx-theme="dark"] .ir-novogradnja-archive {
    --ir-novogradnja-link: var(--ir-dm-link) !important;
    --ir-novogradnja-surface: var(--ir-dm-surface) !important;
    --ir-novogradnja-cream: var(--ir-dm-bg) !important;
    --ir-novogradnja-cream-deep: var(--ir-dm-surface) !important;
    --ir-novogradnja-surface-alt: var(--ir-dm-surface) !important;
    --ir-novogradnja-ink: var(--ir-dm-text) !important;
    --ir-novogradnja-body-color: var(--ir-dm-text) !important;
    --ir-novogradnja-muted: var(--ir-dm-muted) !important;
    --ir-novogradnja-hairline: rgba(255, 255, 255, 0.1) !important;
    --ir-novogradnja-hairline-soft: var(--ir-dm-border) !important;
    --ir-novogradnja-field-border: #3b4f64 !important;
    --ir-novogradnja-row-hover: var(--ir-dm-surface-2) !important;
    --ir-novogradnja-ok-bg: #133524 !important;
    --ir-novogradnja-hold-bg: #3a2711 !important;
    --ir-novogradnja-sold-bg: #2b2925 !important;
}

/* "Tlocrt stana" is a <button> styled as a link that never reset the UA button
   fill; invisible on white, a grey box once color-scheme is dark. */
html[data-brx-theme="dark"] button.ir-novogradnja-link {
    background-color: transparent;
}

/* ------------------------------------------------------------------
 * Icons drawn as <img>
 * The Iconsax set is stroked in #292D32 and loaded as <img>, so no colour
 * rule reaches it. Inverting turns the stroke light and keeps the TwoTone
 * secondary paths at their 40 % weight. Photos are never touched.
 * ------------------------------------------------------------------ */
html[data-brx-theme="dark"] img[src*="/assets/icons/iconsax/"] {
    filter: invert(1) brightness(0.92);
}