#masthead {
    text-align: left;
}
.top-home {
    height: 100%;
    padding-bottom: 30px;
    /* Override landing.css's background photo (shared with other pages,
       so it's overridden here rather than edited there) - white to match
       the bordered dashboard-style containers instead of a hero image. */
    background: var(--_background_color);
}
/* #map's height is governed by .map-column/.map below (flex-grow to
   match the metrics panel) - previously had a conflicting !important
   height rule left over from an earlier layout. */

/* Metric card tweaks scoped to this page's cards-container - metric-card.css
   is shared with the dashboard, so it isn't edited directly here. */
.cards-container .metric-card__header {
    margin-bottom: 0.5rem;
}
/* Overflow safety net */
.cards-container .metric-card {
    min-width: 0;
}
.cards-container .status-badge,
.cards-container .metric-card__title,
.cards-container .metric-value,
.cards-container .metric-card__details {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}
.cards-container .status-badge {
    white-space: normal;
    text-align: center;
}
.cards-container .metric-card__title {
    font-size: 1rem;
}
.cards-container .status-badge {
    font-size: 1rem;
}
.cards-container .metric-value {
    font-size: 1.4rem;
}
.cards-container .metric-unit {
    font-size: 0.85rem;
}
.cards-container .metric-card__details {
    font-size: 1rem;
    /* Same align-items: flex-start shrink-wrap issue as the badges/icon -
       needs full width before text-align: center has anything to center within. */
    width: 100%;
    text-align: center;
}
/* The advisory icon's centering rule in metric-card.css only takes effect
   if .metric-card__value actually spans the card's width - otherwise it
   shrinks to the icon's own size and there's nothing to center within. */
.cards-container .advisory-card-component .metric-card__value {
    width: 100%;
}
/* The warning-triangle glyph's bounding box is wider than the check-mark's,
   so at metric-card.css's default icon size it pokes past the circle
   (worse on --caution, whose 2px border eats further into the available
   space) instead of sitting fully inside it. */
.cards-container .advisory-icon {
    font-size: 1.1rem;
}
/* Neutral "no data" variants - metric-card.css only ships risk-level
   colored badges/icons, not a dedicated no-data state. */
.status-badge--no-data {
    background: var(--_border_color);
    color: var(--_text_secondary_color);
}
.advisory-icon--no-data {
    background-color: var(--_border_color);
    color: var(--_text_secondary_color);
}
.coverage-value--no-data {
    text-align: center;
    color: var(--_text_secondary_color);
}
/* Same fix for the Risk Level / Trophic Status badges - .metric-card__status
   shrink-wraps to the badge's own width under align-items: flex-start, so
   there's no room to center within until it spans the card. */
.cards-container .metric-card__status {
    width: 100%;
    text-align: center;
}
/* Same width fix as above, needed for the coverage gauge bar to span the
   card, plus the gauge bar itself (a simple bar rather than pulling in
   the Chart.js gauge plugin the dashboard uses elsewhere, which would be
   a heavy new dependency just for this page). */
.cards-container .coverage-card-component .metric-card__value {
    width: 100%;
}
.cards-container .coverage-value {
    /* The span itself (not just its wrapper div above) needs an explicit
       width for the gauge-bar's own width: 100% to resolve against -
       otherwise it's 100% of a shrink-wrapped, near-zero-width span. */
    display: block;
    width: 100%;
}
.cards-container .gauge-bar {
    width: 100%;
    height: 8px;
    background: var(--_border_color);
    border-radius: var(--_border_radius_pill);
    overflow: hidden;
    margin-bottom: 0.35rem;
}
.cards-container .gauge-bar-fill {
    height: 100%;
    background: var(--_primary_blue_color);
    border-radius: var(--_border_radius_pill);
}
.cards-container .gauge-bar-label {
    font-size: 1.4rem;
    font-weight: var(--_font_weight_bold);
    color: var(--_text_primary_color);
}
.summary-text {
    font-size: 18px;
}
.summary-header {
    min-height: 125px;
    overflow-y: auto;
    padding-top: 20px;
    text-align: center;
}

.summary-container {
    width: 100%;
    min-height: 600px;
    background-color: var(--_background_color);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--_border_radius_xl);
    border: var(--_border_width_thick) solid var(--_border_color);
    box-shadow: var(--_shadow_md);
    overflow: hidden;
    color: var(--_text_white_color);
    position: relative;
}

.summary-loading-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: var(--_border_radius_xl);
    font-size: 18px;
    font-weight: bold;
    color: var(--_text_primary_color);
}
.map-loading {
    z-index: 99999;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(156, 156, 156, 0.43);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    /* Match the rounded map frame it sits on top of */
    border-radius: var(--_border_radius_xl);
}
@media (max-width: 500px) {
    .table-summary {
        margin: 10px;
    }
    .cs-value {
        font-size: 25px !important;
    }
    .map {
        min-height: 300px !important;
    }
    .summary-text {
        font-size: 15px;
    }
    .summary-header {
        height: 150px;
    }
    .summary-container {
        min-height: 650px;
    }
    .mb-xs {
        margin-bottom: 8px;
    }
}
.map-column {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 0;
    padding-right: 0;
}
.map {
    width: 100%;
    flex: 1 1 auto;
    min-height: 500px;
    background-color: white;
    /* Rounded, shadowed frame matching the dashboard's map section */
    border-radius: var(--_border_radius_xl);
    border: var(--_border_width_thick) solid var(--_border_color);
    box-shadow: var(--_shadow_md);
    overflow: hidden;
}

.summary {
    color: var(--_text_primary_color);
}
.card-summary {
    height: 150px;
    background-color: var(--_background_color);
    display: flex;
    /*text-align: center;*/
    /*justify-content: space-evenly;*/
    /*align-items: center;*/
    /*padding-top: 10px;*/
    /*padding-bottom: 10px;*/
    /* Rounder + shadowed, matching the metric cards on the dashboard/summary page */
    border-radius: var(--_border_radius_xl);
    border: var(--_border_width) solid var(--_border_color);
    box-shadow: var(--_shadow_sm);
}
#lake-name {
    font-size: 42px;
}
.table-summary {
    padding: 30px 25px 15px 25px;
    background-color: rgba(27, 53, 63, 0.5);
}
.table-summary table {
    border-top: 1px solid white;
}

.card-summary-sm {
    height: 120px;
}
.table-summary td, .table-summary th {
    color: white !important;
    text-shadow: 1px 1px 2px rgba(6, 6, 6, 0.54);
}
.table-summary tr:nth-child(even) {
    background-color: unset !important;
}
.cs-value {
    font-size: 30px;
    max-width: 80%;
}
.cs-label {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: var(--_font_weight_semibold);
    letter-spacing: 0.05em;
    padding-top: 2%;
    padding-left: 2%;
    max-width: 100%;
    text-align: center;
}
.cs-detail {
    font-size: 14px;
    font-weight: 200;
}
.cs-detail-container {
    display: flex;
    justify-content: center;
}
.cs-value-container {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    text-transform: uppercase;
}

.shadow-text {
    text-shadow: 1px 1px 1px #808080;
}
.summary-value-container {
    flex-direction: row!important;
    justify-content: center;
    align-items: baseline;
    height: 150px;
}
.summary-value-container>* {
    padding-left: 0;
    padding-right: 0;
}
.summary-value, .big-text {
    font-size: 64px;
    font-weight: bolder;
    width: auto;
}
.summary-unit {
    font-size: 20pt;
    width: auto;
}
.summary-loading-container {
    /*display: flex;*/
    height: 160px;
    justify-content: center;
}

.summary-loading {
    justify-content: center;
}

.loading-content {
    display: none;
}

.last-update {
    height: 30px;
}

#lake-name {
    font-weight: bolder;
}

@media (max-width: 500px) {
    #lake-name {
        font-size: 28px;
    }
}

.summary-loading-hide {
    display: none;
}
/* Floating search box - sits inside the map frame (top-left corner)
   instead of its own full-width bar above it. */
.map-search {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 320px;
}
.map-search .input-group {
    flex: 1 1 auto;
    background-color: var(--_background_color);
    border-radius: var(--_border_radius_pill);
    box-shadow: var(--_shadow_md);
    overflow: hidden;
}
.map-search .form-control {
    border: none;
    box-shadow: none;
    font-size: 0.9rem;
    padding: 0.4rem 0.9rem;
}
.map-search .btn-search {
    width: 36px;
    padding: 0;
}
/* Floating message - bottom overlay in the map frame, same treatment
   as .map-search but anchored to the bottom edge instead. */
/* Injected as a second bottomright map control (see createMessageDiv in
   open-api-map.js), stacking below the legend control in normal document
   flow rather than absolutely positioned - avoids needing to guess/reserve
   space to keep clear of the legend's footprint. */
.map-message {
    max-width: 220px;
    margin-top: 0.5rem;
    background-color: var(--_background_color);
    border-radius: var(--_border_radius_lg);
    box-shadow: var(--_shadow_md);
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    text-align: center;
}
/* Search suggestions dropdown (jQuery UI autocomplete, rendered as a
   Bootstrap dropdown-menu - see #lake-input-1 in open-api-map.js).
   Reformatted to match the compact, rounded search pill above it rather
   than Bootstrap's boxier default. */
.map-search .ui-autocomplete.dropdown-menu {
    width: 100%;
    max-width: 320px;
    border: none;
    border-radius: var(--_border_radius_lg);
    box-shadow: var(--_shadow_md);
    padding: 0.35rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}
.map-search .ui-autocomplete.dropdown-menu .dropdown-item {
    border-radius: var(--_border_radius);
    padding: 0.4rem 0.75rem;
    white-space: normal;
}
.map-search .ui-autocomplete.dropdown-menu .dropdown-item:hover,
.map-search .ui-autocomplete.dropdown-menu .dropdown-item:focus {
    background-color: var(--_background_secondary_color);
    color: var(--_primary_blue_color);
}
#detect-location {
    cursor: pointer;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--_background_color);
    color: var(--_text_primary_color);
    border-radius: 50%;
    box-shadow: var(--_shadow_md);
    font-size: 1rem;
}
.leaflet-popup-content {
    max-width: 200px !important;
}
/* Marker dots (see renderIcon in open-api-helper.js). Leaflet's default
   div-icon box (white background + border) is neutralized here since
   the dot itself carries the visual design. */
.risk-marker {
    background: transparent;
    border: none;
}
.risk-marker-dot {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid var(--_background_color);
    box-shadow: var(--_shadow_md);
}
.card-summary-no-box {
    background-color: rgba(0, 0, 0, 0);
    border: 0;
}




.store {
    margin-top: 68px;
    margin-bottom: 68px;
    background-color: #EEF2F2;
    padding-top: 60px;
    padding-bottom: 60px;
}
.summary {
    position: inherit;
    top: auto;
    left: auto;
    transform: inherit;
}
.btn-search {
    background-color: #329FD6 !important;
    color: white !important;
    border-color: #329FD6 !important;
}
.details-summary {
    background-color: rgba(27, 53, 63, 0.5);
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 30px;
}

a.header-text {
    text-decoration: none;
    color: black;
    font-size: 11px;
    letter-spacing: 0.1em;
    padding-left: 5px;
}

a.header-text:hover {
    color: #30A0D6
}