/* ui_v2_blm.css — the PUBLIC BLM claim map (services:blm_map).
 *
 * UI v2 (W5 hygiene, spec §5 W5 scope 4 / §6 "Public/guest standalone").
 *
 * This is the FREE FUNNEL DOOR — an anonymous, unauthenticated public page the
 * landing site promotes, and the surface the layers wave deliberately left
 * alone ("public viewers are visually unchanged until their own W5 token
 * pass" — this is that pass).
 *
 * FLEET-GATED, like every other anonymous shell: blm_map.html links this only
 * inside {% ui_v2_public_skin %} (settings.UI_V2_DEFAULT == 'v2'). With the
 * lever off, the funnel door renders exactly the bytes it renders today.
 *
 * Linked AFTER includes/blm_map_styles.html, so it overrides on source order —
 * that 1,100-line stylesheet keeps its original CSS verbatim.
 *
 * The map page wears a dark sidebar over a light basemap, so — like the other
 * two public viewers — it takes the DARK token set (blm_map.html pins
 * data-theme="dark"). Basemap TILES and claim/parcel FEATURE colours are DATA
 * and are untouched: nothing here restyles a tile layer, a fillColor, or an
 * agency colour.
 */

/* ── the dark sidebar + its controls ── */
.blm-map-page .services-sidebar {
    background: linear-gradient(180deg, var(--rail-bg) 0%, var(--rail-line) 100%);
    color: var(--rail-ink);
}

.blm-map-page .mobile-sidebar-toggle {
    background: var(--rail-bg);
    color: var(--rail-active);
}

.tool-btn.active {
    background: var(--accent);
    color: var(--cta-ink);
}

.stats-card {
    border-left: 3px solid var(--accent);
}

.layer-control:has(input:checked) {
    border-left: 3px solid var(--accent);
}

/* ── banners ── */
.shared-map-title-banner,
.info-banner {
    background: linear-gradient(135deg, var(--cta-bg) 0%, var(--chart-3) 100%);
    color: var(--cta-ink);
}

/* ── zoom indicator + legend ── */
.zoom-indicator {
    border-left: 4px solid var(--accent);
    background: var(--panel);
}
.zoom-indicator .zoom-value { color: var(--ink); }

.map-legend { background: var(--panel); color: var(--ink); }
.map-legend .legend-title { color: var(--ink); }
.map-legend.collapsed,
.map-legend.collapsed .legend-header {
    background: var(--rail-bg);
    color: var(--rail-active);
}

/* ── modals (welcome / auto-fill / share / purchase) ──────────────────────
 *
 * These five modals shipped in the v1 palette and the W5 pass above did not
 * reach them: brand_tokens.css's Bootstrap bridge repaints the modal SHELL
 * (--bs-modal-bg et al) and the .bg-light utility, so they went dark by side
 * effect, but every v1 accent inside them survived — the #667eea/#764ba2
 * header gradient, the #f8f9fa tab strip, and the semantic
 * .alert-info/.border-primary/.text-success family.
 *
 * ⚠ HALF OF THIS IS DATA, NOT MARKUP. The welcome modal's body is
 * admin-editable HTML stored on services.MapWelcomeModal (introduction /
 * map_features / services_overview / competitive_advantage, rendered |safe)
 * and seeded by services/0002. So the feature cards and the "Why This
 * Matters" callout are Bootstrap classes we do not control from a template
 * and cannot assume stay put. That is why the rules below map the v1
 * Bootstrap vocabulary ONTO tokens rather than restyling by hand: an admin
 * pasting another .alert-info tomorrow lands tokenized for free, and no data
 * migration is needed. Scoped to the modal ids so nothing leaks to the map.
 */

/* Header gradient — replaces the inlined v1 indigo on #welcomeModal and
 * #claimDataPurchaseModal (class applied in blm_map_modals.html; it had to
 * leave the markup because an inline style outranks a stylesheet).
 *
 * ⚠ Declared as background-image + !important ON PURPOSE. Bootstrap's
 * `.bg-gradient` utility is `background-image:var(--bs-gradient)!important`,
 * so a plain `background:` shorthand here loses the image half to it and the
 * header renders FLAT — which is exactly what happened on the first pass
 * (the old markup only survived because an inline shorthand outranks a
 * utility class). `.bg-gradient` has since been dropped from these two
 * headers; this keeps the rule correct even if it comes back. */
.blm-modal-header-grad {
    background-image: linear-gradient(135deg, var(--cta-bg) 0%, var(--rail-bg) 100%) !important;
    background-color: var(--cta-bg);
}

/* Tab strip. The #f8f9fa inline background was the single most visible break —
 * one bright band across an otherwise dark modal. */
#welcomeModal .nav-tabs {
    background: var(--panel-2);
    border-bottom-color: var(--line);
}
#welcomeModal .nav-tabs .nav-link {
    color: var(--ink-2);
    border-color: transparent;
}
#welcomeModal .nav-tabs .nav-link:hover {
    color: var(--accent);
    border-color: transparent;
}
#welcomeModal .nav-tabs .nav-link.active {
    background: var(--panel);
    color: var(--accent);
    border-color: var(--line) var(--line) var(--panel);
}

/* Bootstrap semantic accents → brand tokens. .alert-* and .border-* carry no
 * --bs-* custom properties in 5.2.3, so these are direct declarations. */
#welcomeModal .alert-info,
#autoFillModal .alert-info,
#shareMapModal .alert-info,
#claimDataPurchaseModal .alert-info {
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    color: var(--ink);
}
#welcomeModal .alert-success,
#shareMapModal .alert-success,
#claimDataPurchaseModal .alert-success {
    background: var(--good-soft);
    border-left: 3px solid var(--good);
    color: var(--ink);
}
#shareMapModal .alert-danger,
#claimDataPurchaseModal .alert-danger {
    background: var(--bad-soft);
    border-left: 3px solid var(--bad);
    color: var(--ink);
}

/* Card borders + icon accents. The welcome modal's two feature cards use
 * .border-primary / .border-success with matching .text-* icons — raw
 * Bootstrap semantics, which read as a third accent system next to the rail.
 * Primary → accent; success keeps a GOOD hue so the pairing stays meaningful
 * rather than collapsing both cards to one colour. */
#welcomeModal .card.border-primary,
#claimDataPurchaseModal .card.border-primary { border-color: var(--accent) !important; }
#welcomeModal .card.border-success,
#autoFillModal .card.border-success,
#claimDataPurchaseModal .card.border-success { border-color: var(--good) !important; }

#welcomeModal .text-primary,
#autoFillModal .text-primary,
#shareMapModal .text-primary,
#claimDataPurchaseModal .text-primary { color: var(--accent) !important; }
#welcomeModal .text-success,
#autoFillModal .text-success,
#claimDataPurchaseModal .text-success { color: var(--good) !important; }
#claimDataPurchaseModal .text-warning { color: var(--warn) !important; }

/* Buttons. .btn-primary is Bootstrap blue; the v2 CTA is --cta-bg. */
#welcomeModal .btn-primary,
#autoFillModal .btn-primary,
#shareMapModal .btn-primary,
#claimDataPurchaseModal .btn-primary {
    background: var(--cta-bg);
    border-color: var(--cta-bg);
    color: var(--cta-ink);
}
#welcomeModal .btn-primary:hover,
#autoFillModal .btn-primary:hover,
#shareMapModal .btn-primary:hover,
#claimDataPurchaseModal .btn-primary:hover {
    filter: brightness(1.08);
    background: var(--cta-bg);
    border-color: var(--cta-bg);
    color: var(--cta-ink);
}
#welcomeModal .btn-outline-primary {
    border-color: var(--accent);
    color: var(--accent);
}
#welcomeModal .btn-outline-primary:hover {
    background: var(--accent);
    color: var(--on-solid);
}

/* Client-logo tiles — the inline `background: white` is gone from the markup
 * (it glared in dark); the logos are grayscale-until-hover PNGs, so they need
 * a light plate to stay legible. --panel is that plate in both themes. */
#welcomeModal .client-logo-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    min-height: 120px;
}

/* Modal-header close button: btn-close-white is correct on the saturated
 * gradient headers, but #autoFillModal/#shareMapModal use .bg-primary, which
 * the bridge does not repoint — pin those to the CTA fill so the white X and
 * white title keep their contrast. */
#autoFillModal .modal-header.bg-primary,
#shareMapModal .modal-header.bg-primary {
    background: var(--cta-bg) !important;
}

/* NOT tokenized, deliberately:
 *  - .claim-popup / .kml-popup interiors. Leaflet paints
 *    .leaflet-popup-content-wrapper WHITE in every theme, so their #2c3e50 ink
 *    and #3498db links are already the correct, legible colours on that white
 *    card. Token ink would go near-white and vanish. (Same call the marketplace
 *    slice made for its Leaflet popups.)
 *  - every `fillColor` / agency colour in blm_map_init.html and friends — those
 *    paint the CLAIM AND PARCEL GEOMETRY. Map features are DATA, not chrome
 *    (spec §4.4); recolouring them would change what the map means.
 */