body {
    font-family: 'Libre Franklin', sans-serif;
}

/* Header section: fixed at the top */
.header {
    width: 100%; /* Take full width of the viewport */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px; /* Adjust height as needed */
    background-color: white; /* Set background color for visibility */
    z-index: 1000; /* Ensure it stays above other content */
    border-bottom: 1px solid #ddd; /* Optional: Add border for separation */
}

/* Body section will grow to fill available space */
.body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding-top: 90px;
}

/* -------------------------
   General Container Styles
   ------------------------- */

.container-style {
    padding: 1rem;
    background-color: white;
}

/* -------------------------
   Title and Year Text Styles
   ------------------------- */

/* Header container that holds title and buttons */
.header-container {
    display: flex;
    justify-content: space-between; /* Align title to the left, buttons to the right */
    align-items: center;
    width: 100%; /* Take full width of the header */
}


.header-title {
    flex-grow: 1;
}

.title-section {
    font-size: 40px;
    margin-left: 50px;
    color: black;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 12px;
}


/* Base styles for dropdown */
.nav-dropdown {
    position: absolute;
    right: 50px;
    top: 80px;
    background-color: white;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 999;
    padding: 10px;
    border-radius: 4px;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* When visible */
.nav-dropdown.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.nav-link {
    display: block;
    padding: 8px 12px;
    color: black;
    text-decoration: none;
    font-weight: 500;
    opacity: 1;
    text-align: left;
    transition: opacity 0.2s ease;
}

.nav-link:hover {
    opacity: 0.8;
}

.nav-link.active {
    color: #C2282D;
}


/* Main footer div */
.footer-main {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    width: 100%;
    z-index: 1000;
    background-color: white;
    display: flex;
    align-items: center;
    border-top: 1px solid #ddd; /* Optional: Add border for separation */
}

/* Info container */
.info-container {
    width: 100%;
    padding: 0 50px; /* Add space on the sides */
    display: flex; /* Flexbox for horizontal alignment */
    align-items: center; /* Vertically center the children */
    justify-content: flex-start; /* Align content to the left */
}

/* Footer text styling */
.info-footer {
    font-size: 9px;
    color: #555; /* Grey color for footer text */
    opacity: 0.7; /* Slight transparency */
    margin: 0;
    padding: 0;
}

.data-note {
    margin: 2px 2px !important;
    margin-bottom: 15px !important;
    padding: 5px 5px !important;
    background-color: #f9f9f9;
    font-size: 0.9rem !important;
    color: #333;
    border-radius: 5px;
    box-sizing: border-box;
}

.data-note small {
    line-height: 1.4;
}

.note-link {
    color: #007bff;       /* Bootstrap primary blue */
    text-decoration: none;
}

.note-link:hover {
    text-decoration: underline;
}

.data-note-text-1 {
    font-size: 0.8rem;   /* smaller than default */
    color: #444;         /* softer grey */
    margin-bottom: 6px;  /* a bit tighter spacing */
}

.data-note-text-2 {
    font-size: 0.6rem;   /* smaller than default */
    color: #444;         /* softer grey */
    margin-bottom: 6px;  /* a bit tighter spacing */
}

.data-number {
    color: #b30000;      /* deep red */
    font-family: monospace;
    font-weight: bold;
}


.not-found-content-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full height of the viewport */
    text-align: center; /* Center text inside the container */
}

.custom-text {
    font-size: 24px; /* Adjust font size as needed */
}


.dropdown-style {
    margin-bottom: 5px;
}

/* -------------------------
   Main Content Container for Map and Sidebar
   ------------------------- */

/* Main layout */
.main-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Main content: column flow */
.main-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-left: 50px;
    margin-right: 50px;
    padding-bottom: 80px; /* add space so content is not covered by footer */
}

/* Map + Sidebar stay fixed height */
.map-sidebar-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: stretch;
    height: 75vh;              /* fixed height for top section */
    margin-bottom: 20px;
}

/* Map section (left) */
.map-section {
    flex: 3;
    display: flex;
    flex-direction: column;
}

/* Map display fills map section */
.map-display {
    flex-grow: 1;
    height: 100%;
}

/* Sidebar (right) */
.sidebar-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Cursor override for clickability */
#map-display .scatterlayer path {
    cursor: pointer !important;
}

/* Table section */
#stations-table {
    font-family: 'Libre Franklin', sans-serif;  /* same font as app */
    font-size: 0.9rem;
    color: #333;
    overflow: hidden;  /* ensures rounded corners apply to whole table */
}

#stations-table .dash-spreadsheet-container {
    border: none !important;
}

#stations-table .dash-data-column {
    font-family: 'Libre Franklin', sans-serif;
    border: none !important;
}

#stations-table th {
    font-family: 'Libre Franklin', sans-serif;
    background-color: #f5f5f5;
    font-weight: 600;
    color: #222;
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

#stations-table td {
    font-family: 'Libre Franklin', sans-serif;
    padding: 10px;
    border-bottom: 1px solid #eee;
}


#stations-table tr:hover td {
    background-color: #f0f7ff;  /* light hover effect */
}


.download-wrapper {
    display: flex;
    justify-content: flex-end;  /* push text + button to the right */
    align-items: center;        /* vertical alignment */
    gap: 6px;                   /* spacing between text and button */
    margin-top: 10px;           /* optional spacing from table */
}

.download-text {
    font-family: monospace;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #333;
}

.download-btn.minimal-btn {
    background-color: #f0f0f0;
    color: #333;
    padding: 5px 5px;
    border: none;               /* no border */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;                   /* spacing if text inside button */
    margin-right: 5px;
    margin-left: 5px;
}

.download-btn.minimal-btn:hover {
    background-color: #e0e0e0;
}


/* Make bottom pagination a flex container */
.previous-next-container:last-of-type {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: relative;
}



/* -------------------------
   Sidebar Content Styles
   ------------------------- */

.sidebar-container > * {
    padding: 0;
    margin: 0; /* Remove margins to make sure content does not "spill" out */
}

.description-container,
.instructions-container,
.dropdown-container {
    padding: 0; /* Remove padding */
    background-color: white;
}

/* Description and Instructions Styles */
.description-container {
    margin-bottom: 10px;
}

.site-description {
    font-size: 25px;
    font-weight: 700;
}

.instructions-container {
    margin-bottom: 10px;
}

.instructions {
    font-size: 16px;
    font-weight: 300;
}

.dropdown-title {
    font-size: 16px;
    font-weight: 700;
}

/* Dropdown option text styling */
.dropdown-style .Select-menu-outer,
.dropdown-style .VirtualizedSelectOption,
#oblast-dropdown .Select-menu-outer,
#oblast-dropdown .VirtualizedSelectOption {
    font-size: 11px;
}

/* For newer Dash versions using react-select */
.dropdown-style .css-26l3qy-menu,
.dropdown-style .css-1n7v3ny-option,
#oblast-dropdown .css-26l3qy-menu,
#oblast-dropdown .css-1n7v3ny-option {
    font-size: 11px;
}

/* Dropdown selected value and placeholder text */
.dropdown-style .Select-value-label,
.dropdown-style .Select-placeholder,
.dropdown-style .Select-control,
#oblast-dropdown .Select-value-label,
#oblast-dropdown .Select-placeholder,
#oblast-dropdown .Select-control {
    font-size: 11px;
}

/* For newer Dash versions - selected value and placeholder */
.dropdown-style .css-1wa3eu0-placeholder,
.dropdown-style .css-1uccc91-singleValue,
.dropdown-style .css-qc6sy-singleValue,
#oblast-dropdown .css-1wa3eu0-placeholder,
#oblast-dropdown .css-1uccc91-singleValue,
#oblast-dropdown .css-qc6sy-singleValue {
    font-size: 11px;
}

.dropdown-style {
    margin-bottom: 15px; /* Add some space between dropdowns */
}

.dropdown-container {
    margin-bottom: 0;
}

/* Switch filters styling */
.switches-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.switch-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.switch-label {
    font-size: 12px;
    font-weight: 500;
    color: #495057;
    margin-bottom: 8px;
    text-align: center;
}

/* Inline switch styling */
.switches-row-inline {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.switch-item-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.switch-label-inline {
    font-size: 11px;
    font-weight: 500;
    color: #495057;
    margin: 0;
    flex: 1;
}

.switch-container-small {
    position: relative;
    width: 32px;
    height: 18px;
    background-color: #ccc;
    border-radius: 9px;
    transition: background-color 0.3s;
    cursor: pointer;
    margin-left: 8px;
}

.switch-container-small:has(input:checked) {
    background-color: #007bff;
}

.switch-container-small::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.switch-container-small:has(input:checked)::after {
    transform: translateX(14px);
}

.switch-container {
    position: relative;
    width: 50px;
    height: 28px;
    background-color: #ccc;
    border-radius: 14px;
    transition: background-color 0.3s;
    cursor: pointer;
}

.switch-container:has(input:checked) {
    background-color: #007bff;
}

.switch-checkbox {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 2;
    cursor: pointer;
}

.switch-checkbox input[type="checkbox"] {
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

.switch-container::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.switch-container:has(input:checked)::after {
    transform: translateX(22px);
}

/* Power source button styling */
.power-source-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.power-source-btn {
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background-color: white;
    color: #495057;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.power-source-btn:hover {
    background-color: #f8f9fa;
    border-color: #007bff;
}

.power-source-btn-active {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

.power-source-btn-active:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.switch-container:has(input:checked)::after {
    transform: translateX(22px);
}


.station-details-container {
    margin-top: 20px;
}

@media screen and (max-width: 1400px) {
    .title-section {
        font-size: 35px;
    }
}

@media screen and (max-width: 1250px) {
    .title-section {
        font-size: 28px;
    }
}

@media screen and (max-width: 800px) {
    .header {
        font-size: 22px;
    }
}

@media screen and (max-width: 1400px) {

    /* Adjust title font size in the header */
    .header {
        height: 70px;
    }

    .title-section {
        font-size: 50px;
    }

    .nav-dropdown {
        top: 70px;           /* Same header height in this breakpoint */
    }

    .body {
        padding-top: 80px;
    }

    .description-container {
        margin-bottom: 10px;
    }

    /* Adjust site description font size */
    .site-description {
        font-size: 20px;
    }
}

/* Media Query for screens smaller than 1250px (Tablet Layout) */
@media screen and (max-width: 1250px) {
    /* Global layout changes */
    .main-content {
        margin-left: 30px;
        margin-right: 30px;
    }

    .header {
        margin-right: 30px;
    }

    .title-section {
        margin-left: 30px;
    }

    .nav-dropdown {
        right: 0;
        margin-right: 30px;  /* Aligns with hamburger's new position */
        top: 70px;           /* Same header height in this breakpoint */
    }

    .info-container {
        padding-left: 30px;
        padding-right: 30px;
    }

    /* Main layout changes */
    .main-layout {
        display: flex;
        flex-direction: column;
        min-height: 100vh;  /* Ensure the full height of the viewport is used */
    }

    .main-content {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        height: calc(100vh - 140px);  /* Adjusting height for header and footer */
        padding-bottom: 80px; /* add space so content is not covered by footer */
    }

    /* Sidebar now comes above the map */
    .map-sidebar-container {
        display: flex;
        flex-direction: column;  /* Stack sidebar above the map */
    }

    /* Move the sidebar content above the map */
    .sidebar-container {
        width: 100%;  /* Take full width */
        order: 1;  /* Move sidebar to appear first */
        height: auto;
        flex-shrink: 0;
        box-sizing: border-box;
    }

    /* Map section moves below the sidebar */
    .map-section {
        flex-grow: 1;
        width: 100%;  /* Map takes full width on tablet layout */
        padding-right: 0;  /* Remove padding */
        order: 2;  /* Move map below the sidebar */
        z-index: 0;
        position: relative;
    }

    /* Ensure map display takes full width and height */
    .map-display {
        flex-grow: 1;
        width: 100%;
        height: 100%;
    }

    /* Full-width description and instructions at the top of main content */
    .description-container {
        width: 100%;  /* Take full width */
        padding: 0;
        margin-bottom: 5px;
    }

    .instructions-container {
        margin-bottom: 10px;
    }

    .site-description, .instructions {
        padding: 0;
        margin: 0;  /* Ensure no bottom margin on the description text */
    }

    /* Adjustments for dropdown styling */
    .dropdown-style {
        width: 100%;             /* Ensure the dropdown takes full width of its container */
        position: relative;
        z-index: 1000;
    }

    /* When the dropdown is expanded, make sure it floats above the rest */
    .dropdown-style .dropdown-menu {
        position: absolute;  /* Float the expanded dropdown menu */
        top: 100%;  /* Ensure it appears just below the dropdown button */
        left: 0;
        z-index: 2000;  /* Ensure it's above everything else */
        width: 100%;  /* Expand to the full width of the dropdown */
    }
}