/* dash_table.DataTable ships its own stylesheet with a monospace-ish font, which made the
   demographics table look different from the rest of the page. style_cell sets the font
   inline too, but that stylesheet loads lazily with the component and can win the cascade,
   so this pins it with !important. var(--bs-body-font-family) is Bootstrap's own body font,
   so the table follows the page automatically if the theme ever changes. */
.dash-table-container .dash-cell,
.dash-table-container .dash-header,
.dash-table-container .dash-cell div,
.dash-table-container .dash-header div,
.dash-table-container .dash-cell-value {
    font-family: var(--bs-body-font-family) !important;
}

/* The Demographics column uses markdown presentation (so the section labels can be bolded
   in the cell value itself). Markdown wraps content in a <p>, whose default margin would
   make those rows taller and throw off the table-height/chart-height match. */
.dash-table-container .dash-cell-value p,
.dash-table-container .dash-cell-value.cell-markdown p {
    margin: 0;
}

/* Facility search box (below the facility map). Set here rather than via dcc.Input's
   style= prop — this Dash version doesn't apply that prop to the underlying DOM element
   for this component. Dash also wraps the <input> in its own flex container and sets
   flex-grow:1/flex-basis:0 on the input itself, which overrides `width` entirely for
   flexbox main-axis sizing — flex-grow must be disabled here for `width` to take effect. */
#facility-search-input {
    font-size: 14px;
    width: 40%;
    flex-grow: 0;
    flex-basis: auto;
    padding: 6px 10px;
    margin: 12px 0 0 0;
    box-sizing: border-box;
}

/* Facility search dropdowns close on an outside click (or Escape). assets/searchbox.js adds
   .searchbox-closed to the .facility-searchbox wrapper; only the results list is hidden, so
   anything else in the box (the input, a compare picker's current selection) stays visible.
   A class rather than an inline style so Dash/React and this never write the same property. */
.facility-searchbox.searchbox-closed .search-results {
    display: none;
}

/* Compare-panel facility pickers. Targeted as a descendant of the wrapper div rather than
   by id/class on the dcc.Input itself — this Dash version doesn't pass dcc.Input's style or
   className through to the underlying DOM element (same reason #facility-search-input above
   is styled here rather than inline). Full width, since each picker already sits in a
   half-width column. */
.compare-picker input {
    font-size: 14px;
    width: 100%;
    flex-grow: 0;
    flex-basis: auto;
    padding: 6px 10px;
    box-sizing: border-box;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

/* Locks the header row above each map (State/HRR toggle on the left, region name +
   facility-type filter on the right) to the same fixed height regardless of their
   different content (button group vs. radio items can render at slightly different
   natural heights, especially if the radio labels wrap), so both maps below them
   line up exactly instead of one being taller than the other. */
.region-header-row {
    height: 40px;
    display: flex;
    align-items: center;
}

/* Below Bootstrap's lg breakpoint the two maps stack vertically (see the lg=6 column
   breakpoints in app.py) instead of sitting side by side, so there's no longer anything
   for this row's fixed height to line up with — relax it so wrapped content (e.g. the
   4-option facility-type radio filter in a now-narrower column) isn't clipped. */
@media (max-width: 991.98px) {
    .region-header-row {
        height: auto;
        min-height: 40px;
    }
}

/* Facility-name metric card values (e.g. "KELLER LANDING (SNF)") can be much longer than
   a state/HRR name or a percentage. The 3 metric cards stay in one row even on mobile
   (fixed width=4 in app.py), so on narrow screens there's very little width per card —
   shrink just these long values there instead of letting them wrap awkwardly. Bootstrap's
   own h5 selector needs beating on specificity, hence !important. */
@media (max-width: 575.98px) {
    .metric-value-mobile-small {
        font-size: 0.8rem !important;
    }
}

/* Plotly renders the facility map's color legend (Hospital/SNF/ED) as an SVG group with
   its own background rect, positioned to the right of the plot by default — on a narrow
   mobile screen that eats into already-scarce horizontal space. Hide it there and use the
   plain-HTML mobile_facility_legend() row placed above the map in app.py instead, which is
   naturally responsive since it's regular flow content, not part of Plotly's SVG layout. */
@media (max-width: 991.98px) {
    #facility-map .legend {
        display: none;
    }
}

/* Always reserve space for the vertical scrollbar. Without this, short pages (no scrollbar)
   vs. tall pages (e.g. after the facility detail panel renders, adding scrollbar) have
   different usable widths, which makes responsive Plotly graphs visibly resize/"shift" when
   the scrollbar appears or disappears. */
html {
    overflow-y: scroll;
}

/* Retheme Bootstrap's default "primary" blue to a muted slate-navy accent.
   Bootstrap 5.3's .btn-primary / .btn-outline-primary use component-scoped
   CSS custom properties, so overriding the same property names here (loaded
   after the CDN stylesheet by Dash's assets mechanism) wins the cascade
   without needing !important. */

.btn-primary {
    --bs-btn-bg: #33475b;
    --bs-btn-border-color: #33475b;
    --bs-btn-hover-bg: #26323f;
    --bs-btn-hover-border-color: #26323f;
    --bs-btn-active-bg: #1f2933;
    --bs-btn-active-border-color: #1f2933;
    --bs-btn-disabled-bg: #33475b;
    --bs-btn-disabled-border-color: #33475b;
    --bs-btn-focus-shadow-rgb: 51, 71, 91;
}

.btn-outline-primary {
    --bs-btn-color: #33475b;
    --bs-btn-border-color: #33475b;
    --bs-btn-hover-bg: #33475b;
    --bs-btn-hover-border-color: #33475b;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #26323f;
    --bs-btn-active-border-color: #26323f;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #33475b;
    --bs-btn-disabled-border-color: #33475b;
    --bs-btn-focus-shadow-rgb: 51, 71, 91;
}