.custom-container {
    max-width: 2000px;
}
.custom-container {
    margin: 1rem auto;         /* center, 1rem top/bottom on small screens */
    border-radius: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    padding: 1rem;
    background-color: #fff;
}

@media (min-width: 992px) {
    .custom-container {
        margin: 1rem auto;      /* more vertical breathing space on large screens */
        width: calc(100% - 4rem);  /* keep the same side gap */
    }
}

@media (min-width: 1800px) {
    .custom-container {
        margin: 1rem auto;      /* more vertical breathing space on large screens */
        width: calc(100% - 8rem);  /* keep the same side gap */
    }
}

/* Outer pill bar: only slightly larger than buttons (default / larger screens) */
.synop-nav-bar {
    border: 2px solid #ced4da;
    border-radius: 999px;
    padding: 0.35rem 0.5rem;
    background: transparent;
    display: inline-block;   /* <- move this from Bootstrap to here */
}

/* Buttons: pill-shaped, outlined grey */
.synop-nav .nav-link {
    border-radius: 999px;
    border: 1px solid #6c757d;
    color: #6c757d;
    background-color: transparent;
    padding: 0.3rem 0.9rem;
    margin: 0.15rem 0.25rem;
    font-size: 0.9rem;
    transition: background-color 0.15s ease,
                color 0.15s ease,
                box-shadow 0.15s ease,
                border-color 0.15s ease;
}

.synop-nav .nav-link:hover {
    text-decoration: none;
    background-color: #e9ecef;
    color: #495057;
}

.synop-nav .nav-link.active {
    background-color: #6c757d;
    color: #ffffff;
    box-shadow: 0 0 0 0.1rem rgba(108, 117, 125, 0.35);
}

/* Default: show pills, hide dropdown */
.synop-nav-dropdown-wrapper {
    display: none;
}

/* Mobile & small tablets: hide pill nav, show simple dropdown */
@media (max-width: 900px) {
    .synop-nav-bar {
        display: none;          /* hide pill buttons */
    }
    .synop-nav-dropdown-wrapper {
        display: block;         /* show the <select> */
    }

    #synopNavSelect {
        width: 55%;
        margin: 0 auto;
        font-size: 1.15rem;

        /* Center the *selected* text */
        text-align-last: center;        /* Chrome / Edge */
        -moz-text-align-last: center;   /* Firefox */
    }
}

@media (min-width: 768px) {
    .intro-text {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }

    .intro-toggle {
        display: none !important;
    }
}

@media (min-width: 768px) {
    /* Always show intro on md+ and ignore collapse */
    #introText {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }

    /* Hide the mobile toggle on md+ */
    #introToggle {
        display: none !important;
    }
}

/* dropdown for stationselect */
#stationSelect {
    text-align-last: center;        /* Chrome / Edge */
    -moz-text-align-last: center;   /* Firefox */
}

/* Center the visible flatpickr text */
.flatpickr-input.flatpickr-alt-input {
    text-align: center;
}

/* Wrapper around map + timestamp overlay */
#obsMapWrapper {
    position: relative;
}

/* Map container (inner div) */
#obsMap {
    width: 100%;
    height: 560px;
    border: 1px solid #ced4da;
    border-radius: 0.5rem;
}

/* Timestamp badge in top-right of map */
.map-timestamp {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 8px;
    font-size: 1.2rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid #000000ff;
    color: #000000ff;
    z-index: 500;           /* above tiles/markers */
    pointer-events: none;   /* don't block map interactions */
}

/* on small screens, reduce timestamp size */
@media (max-width: 575.98px) {
    .map-timestamp {
        position: absolute;
        top: 8px;
        right: 8px;
        padding: 3px 8px;
        font-size: 1rem;
        border-radius: 999px;
        background-color: rgba(255, 255, 255, 0.9);
        border: 2px solid #000000ff;
        color: #000000ff;
        z-index: 500;           /* above tiles/markers */
        pointer-events: none;   /* don't block map interactions */
    }
}

/* On md+ screens: map is always visible, toggle hidden */
@media (min-width: 768px) {
    #mapCollapse.collapse {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }

    #mapToggleBtn {
        display: none !important;
    }
}

/* on small screens, reduce map height */
@media (max-width: 575.98px) {
    #obsMap {
        height: 360px;
    }
}

/* Station labels via Leaflet divIcon: just numbers on the map */
.station-icon {
    background: transparent;
    border: none;
    position: relative;
    left: -10px;
    top: -13px;
    text-align: center;
    white-space: nowrap;
    font-size: 0.925rem;
    font-weight: 650;
    color: #111;                       /* or whatever text color you prefer */
    pointer-events: auto;              /* so clicks still work */
}

.station-value {
    /* just the number, no bubble */
    display: inline-block;
    padding: 0;
    border: none;
    background: transparent;
}

.station-extra {
    display: none;
    font-size: 0.75rem;
    color: #333;
    margin-top: 2px;
}

/* Base marker already defined as .station-icon */
/* Max value: red text */
.station-max .station-value {
    color: #dc1414;          /* strong red */
    font-weight: 800;        /* a bit bolder so it pops */
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.9); /* subtle halo for readability */
    /* font-size: 1.0rem;    */
}

/* Min value: blue text */
.station-min .station-value {
    color: #0f2be5;          /* strong blue */
    font-weight: 800;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
    /* font-size: 1.0rem;    */
}

/* Highlight currently selected station */
.station-selected .station-value {
    border: 1px solid #000;
    border-radius: 4px;          /* small rounded corners */
    padding: 0 3px;              /* adjusts to content width */
    background-color: rgba(255, 255, 255, 0.75); /* subtle white background for contrast */
    /* center on the point definfed by .station-icon */
    position: relative;
    left: -5px;
    top: -2px;
    font-size: 1.0rem;    /* slightly larger for emphasis */

}

/* When map has 'show-extra' class, show station name + ID below the number */
#obsMap.show-extra .station-extra {
    display: block;
}

.graph-panel img {
    /* max-height: 480px; */
    object-fit: contain;
}
.graph-panel {
    display: flex;
    flex-direction: column;
    /* justify-content: center;  vertical centering within the column */
    height: 100%;
}

.graph-panel .text-center {
    width: 100%;
}

/* Card around extremes table */
.synop-extreme-wrapper {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 0.75rem 0.75rem 0.5rem;
    background-color: #ffffff;
}

/* Scrollable area – height tuned to sit nicely next to plots (~20 rows) */
.synop-table-scroll {
    max-height: 500px;   /* tweak if your PNGs are taller/shorter */
    overflow-y: auto;
}

/* Table styling tweaks */
.synop-extreme-wrapper .table {
    font-size: 0.9rem;
}

/* Sticky header while scrolling */
.synop-extreme-wrapper .table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #f8f9fa;
}

/* Small header + valid time text */
.synop-list-header {
    font-weight: 500;
}

.synop-list-valid {
    white-space: nowrap;
}

.synop-list-empty {
    padding: 0.25rem 0;
}


/* Each list: max ~45% of the available row width */
.synop-extreme-pair .synop-extreme-col {
    flex: 1 1 48%;
    max-width: 48%;
}

/* On smaller screens, stack them full-width */
@media (max-width: 991.98px) { /* below xl */
    .synop-extreme-pair .synop-extreme-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.synop-list-header-block {
    line-height: 1.2;
}

.synop-list-header {
    font-weight: 600;
    font-size: 1.05rem;
}

.synop-list-valid {
    font-size: 0.8rem;
    color: #6c757d;
}

/* On md+ screens, always show the list even if it's inside .collapse */
@media (min-width: 768px) {
    .synop-table-wrapper-md.collapse {
        display: block !important;
        height: auto !important;
    }
}