/* =============================================================================
   Responsive
   All @media queries organized by breakpoint
   ============================================================================= */

/* --- Min-width: 769px (Desktop) --- */

/* Full-width cards in multi-column layouts */
@media (min-width: 769px) {
    #main-content[style*="--dashboard-columns: 2"] > [data-card-id="temp-chart"],
    #main-content[style*="--dashboard-columns: 2"] > [data-card-id="solar-chart"],
    #main-content[style*="--dashboard-columns: 2"] > [data-card-id="motion"],
    #main-content[style*="--dashboard-columns: 3"] > [data-card-id="temp-chart"],
    #main-content[style*="--dashboard-columns: 3"] > [data-card-id="solar-chart"],
    #main-content[style*="--dashboard-columns: 3"] > [data-card-id="motion"] {
        grid-column: 1 / -1;
    }
}

/* --- Max-width: 1024px (Tablet) --- */

@media (max-width: 1024px) {
    #main-content {
        grid-template-columns: repeat(min(var(--dashboard-columns, 1), 2), 1fr) !important;
    }
}

/* --- Max-width: 768px (Mobile) --- */

@media (max-width: 768px) {
    /* Layout */
    .dashboard {
        padding: 12px;
    }

    header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    header h1 {
        font-size: 1.4rem;
    }

    #main-content {
        grid-template-columns: 1fr !important;
    }

    /* Tab Navigation */
    .tab-nav {
        justify-content: center;
        order: 3;
        width: 100%;
    }

    .tab-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    /* Fullscreen Floor Plans */
    .fullscreen-floor-plan {
        height: calc(100vh - 220px);
        min-height: 400px;
    }

    .fullscreen-floor-plan-header {
        padding: 12px 16px;
        flex-direction: column;
        gap: 10px;
    }

    .fullscreen-floor-plan-header h2 {
        font-size: 1.2rem;
    }

    .fullscreen-floor-plan .sensor-marker {
        width: 28px;
        height: 28px;
    }

    .fullscreen-floor-plan .sensor-label {
        font-size: 0.7rem;
    }

    .fullscreen-sensor-info {
        bottom: 10px;
        left: 10px;
        right: 10px;
        gap: 8px;
    }

    .sensor-info-card {
        padding: 8px 12px;
        min-width: 110px;
    }

    /* Solar */
    .solar-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .metric-value {
        font-size: 1.4rem;
    }

    .solar-status {
        flex-direction: column;
        gap: 8px;
    }

    /* Devices */
    .devices-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    /* Weather */
    .weather-status {
        flex-direction: column;
        gap: 8px;
    }

    .weather-stations {
        grid-template-columns: 1fr;
    }

    .weather-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Floor Plans */
    .floor-plans {
        grid-template-columns: 1fr;
    }

    .floor-plan-area {
        height: 180px;
    }

    .sensor-marker {
        width: 20px;
        height: 20px;
    }

    .sensor-label {
        font-size: 0.6rem;
    }

    /* ISP Status */
    .isp-status-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
    }

    .isp-stats {
        width: 100%;
        justify-content: space-between;
    }

    .isp-stat {
        flex: 1;
        justify-content: center;
    }

    .isp-last-check {
        width: 100%;
        text-align: center;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Saltwater */
    .saltwater-metrics {
        grid-template-columns: repeat(3, 1fr);
    }

    .saltwater-controls {
        flex-direction: column;
        align-items: flex-start;
    }
}