/* assets/style.css */
.tooltip-hide .tooltip {
  display: none;
}

/* Walkthrough carousel indicators */
.wt-indicator {
    background-color: var(--mantine-color-gray-6) !important;
    opacity: 0.5;
    width: 12px;
    height: 6px;
    border: 1px solid var(--mantine-color-gray-7);
    transition: all 250ms ease;
}

.wt-indicator[data-active] {
    background-color: var(--mantine-color-blue-7) !important;
    opacity: 1;
    width: 30px;
}

/* Wider dbc tooltips */
.tooltip-inner {
    max-width: 350px !important;
}


/* Hide Plotly rangeslider on small screens — the external range buttons replace it,
   and hiding it removes the finger-target conflict with the overflow-x scrollbar. */
@media (max-width: 768px) {
    .rangeslider-container {
        display: none !important;
    }
}

/* Accordion control hover highlight (mirrors dbc.Button behaviour) */
.mantine-Accordion-control {
    transition: background-color 150ms ease;
}

.mantine-Accordion-control:not([data-disabled]):hover {
    background-color: var(--mantine-color-blue-8) !important;
}

/* Reduce inner panel content padding (default Mantine is 16px) */
.mantine-Accordion-content {
    padding: 6px;
}


/* ── Walkthrough highlight ───────────────────────────────────────── */
.wt-highlight {
    outline: 3px solid rgba(33, 113, 181, 0.8) !important;
    outline-offset: 4px;
    border-radius: 6px;
}

/* Custom colours for Mantine bars loader (m_870bb79 = bar div element) */
.m_870bb79:nth-of-type(1) { background: #2171b5 !important; }
.m_870bb79:nth-of-type(2) { background: #c6dbef !important; }
.m_870bb79:nth-of-type(3) { background: #fc9272 !important; }

/* Custom colours for Mantine dots loader (m_870c4af = dot div element, 3 dots) */
.m_870c4af:nth-of-type(1) { background: #2171b5 !important; }
.m_870c4af:nth-of-type(2) { background: #c6dbef !important; }
.m_870c4af:nth-of-type(3) { background: #fc9272 !important; }

/* Center all text in the alert-info panel.  The <ul> is made inline-block
   so the bullet block itself is centered within the container. */
#alert-info {
    text-align: center;
}

#alert-info p {
    margin-bottom: 0.15rem;
}

#alert-info ul {
    display: inline-block;
    margin: 0;
}

/* Instructional placeholder shown in a tab panel before it has real content
   (replaces the old disabled-tab + hover-tooltip pattern). */
.alert-tab-placeholder {
    color: #666;
    font-style: italic;
    padding: 8px 4px;
}

/* Tabs inside the alert-info panel */
#alert-tabs {
    --tabs-color: #2d7a2d;   /* dark green indicator line */
}
/* This DMC version DOES also render the classic "mantine-Tabs-*" BEM class
   names alongside the hashed CSS-module ones (confirmed via DevTools, e.g.
   <button class="... m_4ec4dce6 mantine-Tabs-tab ...">) - target those
   directly rather than only the ARIA role, they're more legible and stable
   across DMC/Mantine versions than the hash. */
#alert-tabs .mantine-Tabs-tab,
#alert-tabs [role="tab"] {
    font-weight: 600;
    font-size: 0.9rem;
    padding: 4px 10px;
    text-align: center;
    /* Icon (leftSection) + label side by side, centered as one unit within
       the tab. display:flex alone wasn't enough (DevTools confirmed the tab
       is already a flex container by default) - the actual culprit was
       flex-direction: Mantine's own rule sets it to column for this
       variant/orientation combo, and since an earlier version of this rule
       only set display/align/justify/gap (never flex-direction), that
       column value kept winning per-property regardless of this rule's
       higher specificity - CSS resolves each property independently, a
       more specific rule doesn't blanket-override properties it doesn't
       itself set. !important here because even the explicit flex-direction
       override alone wasn't reliably beating Mantine's - belt and braces. */
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 0px;
}
/* Icon and label were sitting far apart (icon pinned to the left edge,
   label centered in whatever space was left) because Mantine's own
   tabLabel span stretches to fill the remaining flex space by default, then
   centers its own text inside that wide box - so the *pair* looked spread
   out even with justify-content:center on the tab and a small `gap` above.
   Stop both sections from stretching so they size to their content and sit
   right next to each other (gap apart), with the tab's justify-content
   centering that tight icon+label unit as a whole instead. */
#alert-tabs .mantine-Tabs-tabSection,
#alert-tabs .mantine-Tabs-tabLabel {
    flex: none !important;
    width: auto !important;
}
/* Second, independent gap source, same as _nav_btn_styles' 'section' tweak
   for the shortcut nav buttons (app_layout.py): Tabs.Tab is built on
   UnstyledButton, so its left tabSection carries the same kind of built-in
   margin-inline-end as a Button's leftSection - a plain margin, not part of
   the flex `gap` above, so zeroing that didn't touch this. Halved (not
   zeroed) to match the exact same convention used there, still keyed off
   the theme spacing var so it scales with --mantine-scale. */
#alert-tabs .mantine-Tabs-tabSection[data-position="left"] {
    margin-inline-end: calc(var(--mantine-spacing-xs) / 2) !important;
}
/* 'Tips' is a plain string, so it centers via the tab's own layout. The
   other three tabs wrap their label in an extra span (for responsive
   mobile/desktop text, or - previously - a dmc.Tooltip), which doesn't
   stretch/center on its own - keep its text centered without forcing
   block/full-width (that's what broke the icon+label row above). */
#alert-tabs .mantine-Tabs-tab > *,
#alert-tabs [role="tab"] > * {
    text-align: center;
}
#alert-tabs [role="tabpanel"] {
    padding-top: 6px;
}

/* ── AI Summary button ────────────────────────────────────────────────────
   Used to be a small yellow circle floating in the alert-info title row,
   expanding on hover to reveal its label. Moved into the Figure summary
   tab as a normal, always-labelled dmc.Button (styled like the CMIP
   risk-ratio trigger - see _summary_tab_placeholder in climate_diy.py), so
   the expand-on-hover/tap treatment and its absolute positioning no longer
   apply - removed below along with the mobile two-tap handler that existed
   only to work around a label with no room to always be visible. */

/* Flex row shared by the breadcrumb bar and the alert-info title row (the
   title row itself no longer needs the space-between/relative positioning
   this gave it for the old button, but the breadcrumb row still does). */
.ai-summary-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    position: relative;
}

#alert-info-title {
    flex: 1;
    min-width: 0;
}




/* Map container: horizontal scroll only on small screens.
   On md+ screens overflow is left at the default (visible) so the
   walkthrough CSS outline on child elements is never clipped. */
@media (max-width: 767px) {
    .map-scroll-container {
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;       /* Firefox */
    }
    .map-scroll-container::-webkit-scrollbar {
        display: none;               /* Chrome / Safari */
    }
}

/* Desktop-only figure width floor. On mobile (<768px) the S/M/L control
   (seg-fig-size) owns figure width, so no floor is applied there. */
@media (min-width: 768px) {
    #map-world, #map-country, #lineplot {
        min-width: 500px;
    }
}

/* ── Mobile sidebar drawer ───────────────────────────────────────────────────
   On small screens the accordion sidebar becomes a slide-in drawer from the
   right. position:fixed removes it from the grid flow so the main content
   expands to fill the full width automatically.                             */

#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1049;
    cursor: pointer;
}

@media (max-width: 767px) {
    #sidebar-col {
        position: fixed !important;
        top: 0;
        right: 0;
        height: 100vh;
        width: 92vw !important;
        max-width: 400px;
        z-index: 1050;
        background: white;
        overflow: visible !important;  /* allow dropdown menus to escape the container */
        box-shadow: -6px 0 24px rgba(0, 0, 0, 0.18);
        transform: translateX(105%);
        transition: transform 0.3s ease;
        padding: 12px !important;
    }

    #sidebar-scroll-inner {
        height: 100vh;
        overflow-y: auto;
        padding-bottom: 24px;
        /* Side padding gives the wt-highlight outline room to show without being
           clipped — overflow-y:auto implicitly sets overflow-x:auto per CSS spec. */
        padding-left: 5px;
        padding-right: 5px;
    }

    #sidebar-col.sidebar-open {
        transform: translateX(0);
    }

    #sidebar-overlay.sidebar-open {
        display: block;
    }
}

@media (min-width: 768px) {
    #btn-open-sidebar,
    #btn-close-sidebar {
        display: none !important;
    }
}

/* Mantine portal dropdowns must appear above the sidebar overlay (z-index 1049) */
:root {
    --mantine-z-index-popover: 2000;
    --mantine-z-index-dropdown: 2000;
}

/* On mobile: breadcrumb capped so the tune FAB doesn't overlap it. */
@media (max-width: 767px) {
    #nav-breadcrumb {
        max-width: 75%;
    }
}

/* ── Mobile figure scroll buttons ◀ ▶ ──────────────────────────────────────── */
.fig-scroll-controls {
    display: none;   /* hidden by default; shown on mobile below */
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

/* Keep the S/M/L control right-aligned even when the scrollbar track is
   hidden (fig_scroll.js sets it display:none when the figure fits). */
#seg-fig-size {
    margin-left: auto;
}

/* Custom scrollbar track */
#fig-scroll-track {
    flex: 1;
    height: 20px;
    background: #e0e4ea;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    touch-action: none;
}

/* Thumb — width and left set by JS */
#fig-scroll-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-width: 30px;
    background: #6c94c0;
    border-radius: 10px;
    cursor: grab;
    touch-action: none;
    transition: background 0.15s ease;
}

#fig-scroll-thumb:active {
    background: #4a74a8;
    cursor: grabbing;
}

@media (max-width: 767px) {
    .fig-scroll-controls {
        display: flex;
    }
}

/* Risk-ratio slider (_risk_ratio_slider_div, alert-info-event): now always
   paired with the "Calculate how often..." button in a flex row (see
   _build_cmip_rr_trigger's `slider` param) - fills its own flex cell
   (flex: 1 1 auto there) rather than fighting that with its own fixed
   width, which is what the previous 75%-on-desktop rule here did back when
   the slider was still the sole, stacked element in this panel. */
.risk-ratio-slider {
    width: 100%;
    margin-left: 4px;
    margin-right: 4px;
}

/* Keep the slider and button side by side at every width, but stop the
   label from overflowing out of its own flex cell: it's a fixed 340px,
   absolutely-positioned, centered box (sized that way so it has room to
   track the handle position) - once its flex cell (.rr-trigger-slider-cell)
   renders narrower than ~350px, that fixed width doesn't shrink or wrap, it
   just spills out sideways and renders underneath/behind the button.
   This was originally gated on a `@media (max-width: 767px)` viewport
   check, which turned out to be the wrong proxy: the cell can render under
   350px on a perfectly wide desktop window too (sidebar/map width, browser
   zoom, window not maximized, ...), which is exactly why the overlap
   showed up intermittently rather than only on phones. A container query,
   keyed to the slider cell's own rendered width instead of the viewport's,
   fixes that - it fires whenever the cell itself is too narrow, regardless
   of why. */
.rr-trigger-slider-cell {
    container-type: inline-size;
}

@container (max-width: 380px) {
    .risk-ratio-slider {
        height: 96px !important;
    }
    .risk-ratio-slider .rr-slider-label {
        left: 50% !important;
        width: calc(100% - 4px) !important;
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
    }
}