src/styles/dark_theme.py

"""Dark theme based on Bootswatch Cyborg ('Jet black and electric blue')."""

DARK_THEME_CSS = """
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

    /* ── Cyborg palette ── */
    :root {
        --bg-primary: #060606;
        --bg-card: #111111;
        --bg-card-open: #1a1a1a;
        --accent: #2a9fd6;
        --accent-hover: #1a7099;
        --text-primary: #dee2e6;
        --text-muted: #adafae;
        --heading: #ffffff;
        --border: #222222;
    }

    /* ── Global ── */
    html, body, [class*="css"] {
        font-family: 'Inter', 'IBMPlexMono', sans-serif;
        font-size: 20px !important;
    }

    /* ── Main background ── */
    .stApp {
        background-color: var(--bg-primary) !important;
        color: #ffffff !important;
    }

    /* ── Hide the top header bar ── */
    header[data-testid="stHeader"] {
        display: none !important;
    }
    [data-testid="stToolbar"] {
        display: none !important;
    }
    [data-testid="stAppDeployButton"] {
        display: none !important;
    }
    /* Hide heading anchor links that appear on hover */
    h1 a, h2 a, h3 a, h1 a:link, h2 a:link, h3 a:link,
    h1 a:visited, h2 a:visited, h3 a:visited {
        display: none !important;
    }
    .headerlink {
        display: none !important;
    }

    /* ── Headings ── */
    h1, h2, h3 {
        color: var(--accent) !important;
        font-weight: 700 !important;
    }
    h1 { font-size: 2.4rem !important; }
    h2 { font-size: 1.8rem !important; }
    h3 { font-size: 1.4rem !important; }

    /* ── Expander cards ── */
    .stExpander {
        background-color: var(--bg-card) !important;
        border: 1px solid var(--border) !important;
        border-radius: 10px !important;
        margin-bottom: 8px !important;
    }
    .stExpander details:not([open]) {
        min-height: 82px !important;
    }
    .stExpander:hover {
        border-color: var(--accent) !important;
    }
    .stExpander:hover details[open] {
        border-color: var(--accent) !important;
    }
    .stExpander details[open] {
        background-color: var(--bg-card-open) !important;
        border-color: var(--border) !important;
    }
    .stExpander summary {
        font-size: 20px !important;
        color: var(--accent) !important;
        font-weight: 700 !important;
        line-height: 1.5 !important;
        background-color: var(--bg-card) !important;
    }
    .stExpander summary strong {
        color: var(--accent) !important;
        font-weight: 700 !important;
        font-size: 22px !important;
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .stExpander summary p {
        font-size: 16px !important;
        color: var(--text-muted) !important;
    }
    .stExpander summary:hover {
        color: var(--accent-hover) !important;
        background-color: var(--bg-card) !important;
    }
    /* ── Expanded card content ── */
    .stExpander div[data-testid="stExpanderDetails"] {
        border-top-color: var(--border) !important;
    }
    .stExpander div[data-testid="stExpanderDetails"] p,
    .stExpander div[data-testid="stExpanderDetails"] span {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
    .stExpander div[data-testid="stExpanderDetails"] em {
        font-size: 15px !important;
    }
    /* ── Uniform card heights via fixed desc area ── */
    .card-desc {
        font-size: 16px !important;
        line-height: 1.5 !important;
        min-height: 100px !important;
        display: block !important;
        margin-bottom: 4px !important;
    }

    /* ── Input widgets ── */
    .stTextInput > div > div > input,
    .stDateInput input,
    .stNumberInput input,
    .stSelectbox div > div > input {
        font-size: 18px !important;
        background-color: var(--bg-primary) !important;
        color: #ffffff !important;
        border-color: var(--border) !important;
    }
    /* All widget labels — force white text */
    .stSelectbox label,
    .stTextInput label,
    .stNumberInput label,
    .stDateInput label,
    .stRadio label,
    label[data-baseweb="label"] {
        color: #ffffff !important;
    }
    /* Selectbox trigger and dropdown — dark theme */
    .stSelectbox div[data-baseweb="select"] > div {
        background-color: var(--bg-primary) !important;
        color: #ffffff !important;
        border-color: var(--border) !important;
    }
    .stSelectbox div[data-baseweb="select"] > div:hover {
        border-color: var(--accent) !important;
    }
    [data-baseweb="popover"] {
        background-color: var(--bg-card) !important;
        border: 1px solid var(--border) !important;
        border-radius: 8px !important;
    }
    [data-baseweb="popover"] li[role="option"] {
        background-color: var(--bg-card) !important;
        color: #ffffff !important;
        font-size: 16px !important;
    }
    [data-baseweb="popover"] li[role="option"]:hover {
        background-color: var(--bg-card-open) !important;
        color: #ffffff !important;
    }
    [data-baseweb="popover"] li[role="option"][aria-selected="true"] {
        background-color: var(--accent) !important;
        color: #ffffff !important;
    }

    /* ── Button ── */
    .stButton > button,
    button[type="submit"],
    button[kind="secondaryFormSubmit"],
    button[kind="formSubmit"] {
        font-size: 13px !important;
        padding: 10px 16px !important;
        background-color: var(--accent) !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
    }
    .stButton > button:hover,
    button[type="submit"]:hover,
    button[kind="secondaryFormSubmit"]:hover,
    button[kind="formSubmit"]:hover {
        background-color: var(--accent-hover) !important;
    }

    /* ── Spinner ── */
    .stSpinner > div {
        font-size: 18px !important;
        color: var(--accent) !important;
    }

    /* ── Map: fill full width ── */
    .stFolium {
        width: 100% !important;
    }
    .stFolium > div {
        width: 100% !important;
    }
    .stFolium iframe {
        width: 100% !important;
    }
    /* Push map container down to align with cards */
    .stCustomComponentV1 {
        display: block !important;
    }
    iframe[title="streamlit_folium.st_folium"] {
        display: block !important;
    }
    /* Hide Leaflet attribution label */
    .leaflet-control-attribution {
        display: none !important;
    }
    /* Hide Leaflet zoom controls (+ and -) */
    .leaflet-control-zoom {
        display: none !important;
    }

    /* ── Reduce top padding ── */
    .block-container {
        padding-top: 0 !important;
    }
    /* Squeeze title closer to top */
    .main > div:first-child {
        margin-top: -8px !important;
    }
    h1 {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* ── Hide JS-tool iframes ── */
    iframe[title="st.iframe"] {
        display: none !important;
    }

    /* ── Hide scrollbars on all panels (keep scroll functionality) ── */
    ::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    * {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    /* ── Hide sidebar completely ── */
    section[data-testid="stSidebar"] {
        display: none !important;
    }
    section[data-testid="stSidebar"] + div {
        margin-left: 0 !important;
    }



    /* ── Flexible panel heights: dynamically set by JS ── */
    /* Fallback height (JS overrides with !important) */
    .stVerticalBlock[data-testid="stVerticalBlock"] > [data-testid="stLayoutWrapper"] > .stVerticalBlock {
        max-height: 800px;
    }
    /* ── Map container: cap height to prevent unbounded growth ── */
    .stCustomComponentV1 {
        height: 800px !important;
        max-height: 800px !important;
        overflow: hidden !important;
    }
    .stCustomComponentV1 iframe {
        max-height: 800px !important;
    }

    /* ── Category filter: horizontal radio pills ── */
    .stRadio label[data-baseweb="label"] {
        font-size: 12px !important;
        color: #ffffff !important;
        margin-bottom: 0 !important;
    }
    .stRadio > div[role="radiogroup"] {
        flex-direction: row !important;
        gap: 8px 3px !important;
        flex-wrap: wrap !important;
    }
    .stRadio > div[role="radiogroup"] > label {
        background-color: var(--bg-card) !important;
        border: 1px solid var(--border) !important;
        border-radius: 20px !important;
        padding: 4px 12px !important;
        min-height: 42px !important;
        line-height: 20px !important;
        color: #ffffff !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        transition: all 0.15s ease !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }
    /* Pill inner text — emoji + name */
    .stRadio > div[role="radiogroup"] > label > div:last-child {
        font-size: 13px !important;
        line-height: 1 !important;
    }
    /* Force white text on all inner elements of radio pills */
    .stRadio > div[role="radiogroup"] > label * {
        color: #ffffff !important;
    }
    .stRadio > div[role="radiogroup"] > label:hover {
        border-color: var(--accent) !important;
        color: #ffffff !important;
    }
    .stRadio > div[role="radiogroup"] > label[data-baseweb="radio"] {
        justify-content: center !important;
    }
    /* Selected / checked pill */
    .stRadio > div[role="radiogroup"] > label:has(input:checked),
    .stRadio > div[role="radiogroup"] > label[aria-checked="true"] {
        background-color: var(--accent) !important;
        border-color: var(--accent) !important;
        color: #ffffff !important;
        font-weight: 700 !important;
    }
    /* Hide the native radio circle */
    .stRadio > div[role="radiogroup"] > label > div:first-child {
        display: none !important;
    }
    .stRadio > div[role="radiogroup"] > label > div:last-child {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* ── Responsive search controls — tight gaps, proportional columns ── */
    [data-testid="stHorizontalBlock"] {
        flex-wrap: wrap !important;
        gap: 0.2rem 15px !important;
    }
    /* Stack layout: all columns full width, JS handles search controls 4-row layout */
    .stack-columns [data-testid="stHorizontalBlock"] > [data-testid="stColumn"] {
        flex: 0 1 100% !important;
    }
    /* Mobile: hide the map entirely */
    .stack-columns [data-testid="stHorizontalBlock"] .stCustomComponentV1 {
        display: none !important;
    }
    /* Mobile: hide the '🗺️ Map' title too */
    .stack-columns [data-testid="stHorizontalBlock"] [data-testid="stColumn"]:has(.stCustomComponentV1) h3 {
        display: none !important;
    }
    /* Align search/refresh buttons with selectbox dropdown (not label) */
    [data-testid="stHorizontalBlock"] > [data-testid="stColumn"]:nth-child(5) > div:first-child,
    [data-testid="stHorizontalBlock"] > [data-testid="stColumn"]:nth-child(6) > div:first-child {
        padding-top: 30px !important;
    }
    /* Make all form inputs fill their column width */
    .stTextInput,
    .stSelectbox,
    .stRadio,
    .stButton {
        width: 100% !important;
    }
    .stTextInput > div,
    .stSelectbox > div,
    .stSelectbox > div > div {
        width: 100% !important;
    }
    /* Compact selectbox — shrink height */
    .stSelectbox {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    .stSelectbox > div > div:first-child {
        padding: 0 8px !important;
        min-height: 38px !important;
    }
    .stSelectbox div[data-baseweb="select"] {
        height: 38px !important;
    }
    .stSelectbox div[data-baseweb="select"] > div {
        min-height: 38px !important;
        padding: 0 8px !important;
        font-size: 18px !important;
    }
    /* Dropdown popover menu — dark bg + light text */
    [data-baseweb="popover"] {
        background-color: var(--bg-card) !important;
        border: 1px solid var(--border) !important;
        border-radius: 8px !important;
    }
    [data-baseweb="popover"] li[role="option"] {
        background-color: var(--bg-card) !important;
        color: #ffffff !important;
        font-size: 16px !important;
    }
    [data-baseweb="popover"] li[role="option"]:hover {
        background-color: var(--bg-card-open) !important;
        color: #ffffff !important;
    }
    [data-baseweb="popover"] li[role="option"][aria-selected="true"] {
        background-color: var(--accent) !important;
        color: #ffffff !important;
    }
    .stSelectbox label {
        font-size: 13px !important;
        margin-bottom: 4px !important;
        color: #ffffff !important;
    }
    /* Compact text input to match */
    .stTextInput > div > div > input {
        min-height: 38px !important;
        padding: 0 8px !important;
    }
    .stTextInput label {
        font-size: 13px !important;
        margin-bottom: 4px !important;
        color: #ffffff !important;
    }

    /* ── Force dark on all wrappers (iframes, parent tries) ── */
    html, body, .stApp {
        background-color: #060606 !important;
    }
    /* Aggressive full-viewport dark fill */
    body::before {
        content: '';
        position: fixed;
        top: 0; left: 0; width: 100vw; height: 100vh;
        background: #060606;
        z-index: -1;
        pointer-events: none;
    }
    /* Darken any iframe wrapper or embed container */
    iframe[title="streamlit_folium"],
    iframe[src*="streamlit"],
    [data-testid="stAppViewContainer"],
    .main,
    .block-container {
        background-color: #060606 !important;
    }

    /* ── Global responsive breakpoints ── */

    /* Tablets / small laptops (≤1024px) */
    @media (max-width: 1024px) {
        /* Shrink form column gaps */
        div[data-testid="column"] {
            padding-left: 4px !important;
            padding-right: 4px !important;
        }
        /* Reduce selectbox font sizes */
        .stSelectbox label, .stSelectbox div[data-baseweb="select"] {
            font-size: 13px !important;
        }
        /* Shrink form button text */
        .stForm button p {
            font-size: 13px !important;
        }
    }

    /* Narrow tablets / large phones (≤768px) */
    @media (max-width: 768px) {
        /* Hero section compact */
        .hero-section {
            min-height: 400px !important;
            padding: 40px 16px 20px !important;
        }
        .hero-icon {
            font-size: 72px !important;
        }
        .hero-title {
            font-size: 28px !important;
        }
        .hero-subtitle {
            font-size: 16px !important;
        }
        .hero-card {
            width: 100% !important;
            max-width: 280px !important;
            padding: 16px 20px !important;
        }

        /* Results container */
        div[data-testid="stVerticalBlock"] > div.stScrollableContainer {
            height: auto !important;
            max-height: 500px !important;
        }

        /* Map container */
        iframe[title="streamlit_folium"] {
            height: 400px !important;
        }

        /* Card description font size */
        .card-desc {
            font-size: 13px !important;
        }
    }

    /* Phones (≤480px) */
    @media (max-width: 480px) {
        /* Card expander font */
        summary {
            font-size: 13px !important;
        }
    }
</style>
"""

CARD_EQUALIZER_JS = """
<script>
(function() {
    // st.components renders in an iframe — reach out to the parent document
    const doc = window.parent.document;

    function equalizeCardDescriptions() {
        const expanders = doc.querySelectorAll('.stExpander details[open]');
        if (!expanders.length) {
            // Cards not yet rendered — retry
            setTimeout(equalizeCardDescriptions, 300);
            return;
        }

        const rows = {};
        expanders.forEach(details => {
            const rect = details.getBoundingClientRect();
            const rowKey = Math.round(rect.top / 20) * 20;
            if (!rows[rowKey]) rows[rowKey] = [];
            rows[rowKey].push(details);
        });

        Object.values(rows).forEach(rowItems => {
            // Reset all description heights in the row
            rowItems.forEach(details => {
                const pTags = details.querySelectorAll('.stMarkdown p');
                for (const p of pTags) {
                    if (!p.textContent.startsWith('💡') && !p.closest('.stMarkdown').querySelector('img')) {
                        p.closest('.stMarkdown').style.minHeight = '';
                    }
                }
            });

            // Measure tallest description
            let maxH = 0;
            const descs = [];
            rowItems.forEach(details => {
                const pTags = details.querySelectorAll('.stMarkdown p');
                for (const p of pTags) {
                    const parent = p.closest('.stMarkdown');
                    if (parent && !p.textContent.startsWith('💡') && !parent.querySelector('img')) {
                        const h = parent.getBoundingClientRect().height;
                        if (h > maxH) maxH = h;
                        descs.push(parent);
                        break;
                    }
                }
            });

            // Set all to tallest
            descs.forEach(desc => { desc.style.minHeight = maxH + 'px'; });
        });
    }

    // Start with a delay to let Streamlit render cards
    setTimeout(equalizeCardDescriptions, 500);

    // Watch for DOM changes in the parent
    new MutationObserver(() => {
        clearTimeout(window._cardEqTimer);
        window._cardEqTimer = setTimeout(equalizeCardDescriptions, 200);
    }).observe(doc.body, { childList: true, subtree: true });
})();
</script>
"""

EMOJI_MAP = {
    "attractions": "✨",
}

FLEX_PANELS_JS = """<!DOCTYPE html>
<html>
<body>
<script>
(function() {
    // We run inside a Streamlit component iframe — target the parent document
    const doc = window.parent.document;

    let _resizing = false;

    function resizePanels() {
        if (_resizing) return;
        _resizing = true;
        const vh = window.parent.innerHeight;
        if (!vh) { _resizing = false; return; }

        // Strategy: find the scrollable card container and map iframe,
        // then set their height so they fill the remaining viewport.
        // Use getBoundingClientRect for accurate positioning.

        const cardContainer = Array.from(
            doc.querySelectorAll('[data-testid="stVerticalBlock"]')
        ).find(el => doc.defaultView.getComputedStyle(el).overflowY === 'auto');

        if (cardContainer) {
            // In narrow/stacked mode, let cards flow naturally without height cap
            if (doc.body.classList.contains('stack-columns')) {
                cardContainer.style.setProperty('height', 'auto', 'important');
                cardContainer.style.setProperty('max-height', 'none', 'important');
                if (cardContainer.parentElement?.getAttribute('data-testid') === 'stLayoutWrapper') {
                    cardContainer.parentElement.style.setProperty('height', 'auto', 'important');
                }
            } else {
                const rect = cardContainer.getBoundingClientRect();
                const panelHeight = Math.max(300, Math.min(vh - rect.top - 24, vh * 0.85));

                cardContainer.style.setProperty('height', panelHeight + 'px', 'important');
                cardContainer.style.setProperty('max-height', panelHeight + 'px', 'important');

                // Also resize parent LayoutWrapper
                if (cardContainer.parentElement?.getAttribute('data-testid') === 'stLayoutWrapper') {
                    cardContainer.parentElement.style.setProperty('height', panelHeight + 'px', 'important');
                }
            }
        }

        // Find the folium iframe container and set its height similarly
        const foliumContainer = doc.querySelector('.stCustomComponentV1');
        if (foliumContainer) {
            foliumContainer.style.setProperty('max-height', '800px', 'important');
            const rect = foliumContainer.getBoundingClientRect();
            const mapHeight = Math.max(300, Math.min(vh - rect.top - 24, vh * 0.85));
            foliumContainer.style.setProperty('height', mapHeight + 'px', 'important');
        }
        doc.querySelectorAll('.stCustomComponentV1 iframe').forEach(iframe => {
            iframe.style.setProperty('max-height', '800px', 'important');
            const rect = iframe.getBoundingClientRect();
            const mapHeight = Math.max(300, Math.min(vh - rect.top - 24, vh * 0.85));
            iframe.style.setProperty('height', mapHeight + 'px', 'important');
        });
        _resizing = false;
    }

    // Run on load (delayed to let Streamlit render)
    setTimeout(resizePanels, 200);

    // Run on resize
    window.parent.addEventListener('resize', () => {
        clearTimeout(window._panelResizeTimer);
        window._panelResizeTimer = setTimeout(resizePanels, 100);
    });

    // Watch for DOM changes in parent (Streamlit re-renders)
    new MutationObserver(() => {
        clearTimeout(window._panelResizeTimer);
        window._panelResizeTimer = setTimeout(resizePanels, 300);
    }).observe(doc.body, { childList: true, subtree: true });
})();
</script>
</body>
</html>
"""

CARD_HOVER_JS = """<!DOCTYPE html>
<html>
<body>
<script>
(function() {
    const doc = window.parent.document;

    function getFoliumWin() {
        var iframe = doc.querySelector('.stFolium iframe, iframe[title="streamlit_folium.st_folium"]');
        return iframe ? iframe.contentWindow || iframe.contentWindow : null;
    }

    function getFoliumDoc() {
        var iframe = doc.querySelector('.stFolium iframe, iframe[title="streamlit_folium.st_folium"]');
        return iframe ? iframe.contentDocument || iframe.contentWindow.document : null;
    }

    function findLeafletMap() {
        var win = getFoliumWin();
        if (!win) return null;
        // Leaflet map instances are stored as global variables; find one
        for (var k in win) {
            try {
                if (win[k] && win[k]._container && win[k]._layers) return win[k];
            } catch(e) {}
        }
        return null;
    }

    function highlightMarker(idx) {
        var fdoc = getFoliumDoc();
        if (!fdoc) return;
        var el = fdoc.querySelector('.spider-marker[data-idx="'+idx+'"]');
        if (!el) return;
        el.style.background = '#f59e0b';
        el.style.transform = 'scale(1.35)';
        el.style.boxShadow = '0 0 14px rgba(245,158,11,0.6)';
        el.style.zIndex = '1000';
        // Open popup
        var map = findLeafletMap();
        if (map) {
            map.eachLayer(function(layer) {
                if (layer._icon === el.parentElement && layer._map) {
                    layer.openPopup();
                }
            });
        }
    }

    function unhighlightMarker(idx) {
        var fdoc = getFoliumDoc();
        if (!fdoc) return;
        var el = fdoc.querySelector('.spider-marker[data-idx="'+idx+'"]');
        if (!el) return;
        el.style.background = '#2a9fd6';
        el.style.transform = '';
        el.style.boxShadow = '0 2px 6px rgba(0,0,0,0.5)';
        el.style.zIndex = '';
        // Close popup
        var map = findLeafletMap();
        if (map) {
            map.eachLayer(function(layer) {
                if (layer._icon === el.parentElement && layer._map) {
                    layer.closePopup();
                }
            });
        }
    }

    function setupCardHover() {
        var pins = doc.querySelectorAll('.card-pin[data-card-idx]');
        if (!pins.length) { setTimeout(setupCardHover, 300); return; }

        pins.forEach(function(pin) {
            if (pin._hoverSetup) return;
            pin._hoverSetup = true;

            var idx = parseInt(pin.getAttribute('data-card-idx'));
            var column = pin.closest('[data-testid="stColumn"]') || pin.parentElement;
            var expander = column ? column.querySelector('.stExpander') : null;
            if (!expander) return;

            expander.addEventListener('mouseenter', function() {
                highlightMarker(idx);
            });
            expander.addEventListener('mouseleave', function() {
                unhighlightMarker(idx);
            });
        });
    }

    setTimeout(setupCardHover, 500);
    new MutationObserver(function() {
        clearTimeout(window._hoverObTimer);
        window._hoverObTimer = setTimeout(setupCardHover, 300);
    }).observe(doc.body, { childList: true, subtree: true });
})();
</script>
</body>
</html>
"""

SMART_IMAGE_POSITION_JS = """<!DOCTYPE html>
<html>
<body>
<script>
(function() {
    var doc = window.parent.document;

    function repositionPortraitImages() {
        var imgs = doc.querySelectorAll('.card-img');
        var found = 0;
        imgs.forEach(function(img) {
            // If natural dimensions are available, check immediately
            if (img.naturalHeight > 0 && img.naturalWidth > 0) {
                found++;
                if (img.naturalHeight > img.naturalWidth) {
                    // Portrait: show upper third to capture the attraction, not the ground
                    img.style.objectPosition = '50% 25%';
                } else {
                    img.style.objectPosition = '50% 50%';
                }
            }
        });
        // Retry if no images have loaded yet
        if (found === 0 && imgs.length > 0) {
            setTimeout(repositionPortraitImages, 300);
        }
    }

    // Also handle lazy-loaded images — they'll fire 'load' after becoming visible
    doc.addEventListener('load', function(e) {
        if (e.target && e.target.classList && e.target.classList.contains('card-img')) {
            if (e.target.naturalHeight > e.target.naturalWidth) {
                e.target.style.objectPosition = '50% 25%';
            }
        }
    }, true);

    // Initial run after DOM settles
    setTimeout(repositionPortraitImages, 500);
})();
</script>
</body>
</html>
"""

FORCE_DARK_WRAPPER_JS = """<!DOCTYPE html>
<script>
(function() {
    /* Best-effort attempt to force dark on parent wrapper (HF Spaces).
       Cross-origin restrictions silently fail — no breakage. */
    try {
        if (window.parent !== window) {
            var p = window.parent;
            var html = p.document.documentElement;
            var body = p.document.body;
            if (html) {
                html.style.backgroundColor = '#060606';
                html.classList.add('dark');
            }
            if (body) body.style.backgroundColor = '#060606';
            /* Also try to find and style the main wrapper container */
            var containers = p.document.querySelectorAll('.SpacePage, .main-container, main, [class*="container"]');
            for (var i = 0; i < containers.length; i++) {
                var bg = getComputedStyle(containers[i]).backgroundColor;
                if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') {
                    containers[i].style.backgroundColor = '#060606';
                }
            }
        }
    } catch(e) {
        /* Cross-origin iframe — can't access parent. This is expected. */
    }
    })();
</script>"""

STACK_CONTROLS_JS = """<!DOCTYPE html>
<html>
<body>
<script>
(function() {
    try {
        var p = window.parent;
        if (!p) return;

        // Fixed breakpoint matching CSS @media (max-width: 768px)
        var BREAKPOINT = 768;

        function updateStack() {
            var body = p.document.body;
            if (!body) return;
            var isNarrow = p.window.innerWidth <= BREAKPOINT;
            body.classList.toggle('stack-columns', isNarrow);

            // Apply 4-row layout to search controls (first horizontal block) only
            var firstHB = body.querySelector('[data-testid="stHorizontalBlock"]');
            if (isNarrow && firstHB) {
                var cols = firstHB.querySelectorAll('[data-testid="stColumn"]');
                // Columns 3-6: 50% width (Picks, Translation, Search, Refresh)
                for (var i = 2; i < 6 && i < cols.length; i++) {
                    cols[i].style.flex = '0 1 calc(50% - 7.5px)';
                }
                // Spacing above each control row
                for (var i = 0; i < cols.length; i++) {
                    var inner = cols[i].querySelector('div');
                    if (inner) inner.style.paddingTop = '12px';
                }
            } else if (firstHB) {
                // Clear inline styles when unstacked
                var cols = firstHB.querySelectorAll('[data-testid="stColumn"]');
                for (var i = 0; i < cols.length; i++) {
                    cols[i].style.flex = '';
                    var inner = cols[i].querySelector('div');
                    if (inner) inner.style.paddingTop = '';
                }
            }

            if (isNarrow) {
                // Hide the map container directly (more reliable than CSS alone)
                var mapContainer = body.querySelector('.stCustomComponentV1');
                if (mapContainer) {
                    mapContainer.style.setProperty('display', 'none', 'important');
                }
                // Hide the map title
                var mapTitles = body.querySelectorAll('h3');
                for (var i = 0; i < mapTitles.length; i++) {
                    if (mapTitles[i].textContent.trim() === '🗺️ Map') {
                        mapTitles[i].style.setProperty('display', 'none', 'important');
                    }
                }
            } else {
                // Restore map visibility
                var mapContainer = body.querySelector('.stCustomComponentV1');
                if (mapContainer) {
                    mapContainer.style.display = '';
                }
                var mapTitles = body.querySelectorAll('h3');
                for (var i = 0; i < mapTitles.length; i++) {
                    if (mapTitles[i].textContent.trim() === '🗺️ Map') {
                        mapTitles[i].style.display = '';
                    }
                }
            }
        }

        // Collapse all cards except the first when stacking activates
        function collapseCards() {
            if (p.window.innerWidth > BREAKPOINT) return;
            var body = p.document.body;
            if (!body) return;
            var expanders = body.querySelectorAll('.stExpander details');
            for (var i = 0; i < expanders.length; i++) {
                if (i === 0) {
                    expanders[i].setAttribute('open', '');
                } else {
                    expanders[i].removeAttribute('open');
                }
            }
        }

        // Run on load — collapse cards after Streamlit renders them
        if (document.readyState === 'complete') {
            setTimeout(updateStack, 100);
            setTimeout(collapseCards, 300);
            setTimeout(collapseCards, 1000);
        } else {
            p.window.addEventListener('load', function() {
                setTimeout(updateStack, 100);
                setTimeout(collapseCards, 300);
                setTimeout(collapseCards, 1000);
            });
        }

        // Debounced resize — update layout and re-collapse
        var timer;
        p.window.addEventListener('resize', function() {
            clearTimeout(timer);
            timer = setTimeout(function() {
                updateStack();
                collapseCards();
            }, 100);
        });

        // Watch for DOM changes — Streamlit renders content via websocket
        // Only update layout (map hide/show, search controls), NEVER collapse
        // so user can freely tap to expand/collapse cards
        var moTimer;
        var observer = new MutationObserver(function() {
            clearTimeout(moTimer);
            moTimer = setTimeout(updateStack, 200);
        });
        if (p.document.body) {
            observer.observe(p.document.body, { childList: true, subtree: true });
        }
    } catch(e) {
        /* Cross-origin — silently skip */
    }
})();
</script>
</body>
</html>"""

def apply_dark_theme():
    """Inject dark-theme CSS, flexible panel JS, card↔map hover JS, and smart image positioning JS."""
    import streamlit as st
    st.markdown(DARK_THEME_CSS, unsafe_allow_html=True)
    # Use st.iframe to execute JS (st.markdown strips <script> tags)
    st.iframe(FORCE_DARK_WRAPPER_JS, height=1)
    st.iframe(FLEX_PANELS_JS, height=1)
    st.iframe(CARD_HOVER_JS, height=1)
    st.iframe(SMART_IMAGE_POSITION_JS, height=1)
    st.iframe(STACK_CONTROLS_JS, height=1)