@media (max-width: 768px) {

    body, html {

        overflow: auto; 
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;

        overscroll-behavior-y: contain;
    }

    #page-container {

        flex-direction: column;
        height: 100vh; 
        width: 100vw;
        overflow: hidden; 
    }

    #map {
        height: 60vh; 
        width: 100%; 
        flex-shrink: 0; 
        flex-grow: 0;   
    }

    #sidebar {
        height: 40vh; 
        width: 100%;  
        max-height: 40vh; 
        flex-shrink: 0; 
        flex-grow: 0;   

        border-left: none;
        border-top: 1px solid #0a0a0a; 
        padding: 10px 15px; 
        box-sizing: border-box;

        overflow-y: auto;   
        overflow-x: hidden; 

        display: flex;
        flex-direction: column;
        background-color: #1e1e1e; 
        color: #e0e0e0; 
    }
    
    #home-link:hover {
        background-color: #444;
    }

    .sidebar-placeholder {
        text-align: center;
        color: #666;
        font-size: 0.9em;

        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 15px;
        margin: 0; 
    }

    .station-title {
        font-size: 1.25em; 
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #333;
        flex-shrink: 0; 
    }

    .station-data-section {
        margin: 0; 
        padding: 0 5px; 
        flex-shrink: 0; 
    }

    .primary-temp-display {
        margin-bottom: 15px;
        padding-bottom: 10px;
    }
    .primary-temp-display .data-value {
        font-size: 2.8em; 
    }
    .primary-temp-display .data-label {
        font-size: 0.8em;
    }

    .data-item {
        padding: 8px 5px; 
        font-size: 0.9em;
        margin-bottom: 2px;
    }

    #charts-area {
        margin-top: 15px;
        padding-top: 10px;
        border-top: 1px solid #333;

        flex-shrink: 1;

        min-height: 0;

        display: flex;
        flex-direction: column;
    }

    .chart-wrapper {
        height: 150px; 
        min-height: 150px; 
        margin-bottom: 60px;
        position: relative;
        flex-shrink: 0; 
    }
    .chart-wrapper h4 {
        font-size: 0.8em;
        margin: 0 0 5px 5px;
    }
    .chart-wrapper canvas {
        max-width: 100%;
        height: 100%; 
        width: 100%;
        display: block;
    }
    .chart-wrapper p { 
        text-align: center;
        color: #666;
        padding-top: 30px;
        font-size: 0.85em;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #sidebar::-webkit-scrollbar {
        width: 8px;
    }
    #sidebar::-webkit-scrollbar-track {
        background: #1e1e1e;
    }
    #sidebar::-webkit-scrollbar-thumb {
        background-color: #444;
        border-radius: 10px;
    }
    #sidebar::-webkit-scrollbar-thumb:hover {
        background-color: #555;
    }

    .leaflet-bottom.leaflet-right {

        visibility: hidden;
    }
}

@media (max-width: 480px) {
    #map { height: 55vh; } 
    #sidebar { height: 45vh; max-height: 45vh; padding: 8px 10px; }

    .station-title { font-size: 1.1em; }
    .primary-temp-display .data-value { font-size: 2.5em; }
    .data-item { font-size: 0.85em; padding: 6px 5px; }
    .chart-wrapper { height: 140px; min-height: 140px; margin-bottom: 40px; }
    .sidebar-placeholder { font-size: 0.85em; }
    #home-link { padding: 6px 8px; font-size: 0.85em; }
}