/* ======================================================
   DRONE OPS GAE — responsive.css
   Media queries : grand écran, laptop, tablette, mobile
   ====================================================== */

/* ======================================================
   DESKTOPS 17-20" (1281px – 2199px)
   ====================================================== */
@media (min-width: 1281px) and (max-width: 2199px) {
    .dashboard {
        grid-template-columns:
            minmax(560px, 2fr)
            minmax(310px, 0.9fr)
            minmax(340px, 1fr);
        gap: 12px;
        padding: 10px 12px;
    }

    .toolbar {
        grid-template-columns: minmax(360px, 0.9fr) minmax(190px, 210px) max-content minmax(0, 1fr);
        min-height: 54px;
        padding: 6px 12px;
    }

    .meteo-drone-details {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1440px) and (max-width: 2199px) {
    .dashboard {
        grid-template-columns:
            minmax(660px, 2.25fr)
            minmax(330px, 0.85fr)
            minmax(380px, 0.95fr);
    }
}

@media (min-width: 1800px) and (max-width: 2199px) {
    .dashboard {
        grid-template-columns:
            minmax(1000px, 2.8fr)
            minmax(350px, 0.8fr)
            minmax(390px, 0.9fr);
    }

    .col-center {
        gap: 10px;
    }

    .analysis-panel {
        flex: 0 1 36%;
    }

    .zone-analysis-panel {
        flex: 1 1 190px;
    }

    .safety-panel {
        flex: 0 0 auto;
    }
}

@media (min-width: 1281px) and (max-width: 2199px) and (max-height: 950px) {
    :root {
        --header-h: 56px;
        --toolbar-h: 54px;
        --footer-h: 36px;
    }

    .dashboard {
        gap: 10px;
        padding: 8px 10px;
    }

    .panel-header {
        min-height: 32px;
        padding: 6px 12px;
    }

    .status-panel .panel-header,
    .meteo-panel-header {
        min-height: 30px;
    }
}

/* ======================================================
   GRANDS ÉCRANS 27" ET PLUS (> 2200px)
   ====================================================== */
@media (min-width: 2200px) {
    .dashboard {
        grid-template-columns:
            minmax(1160px, 2.35fr)
            minmax(430px, 0.85fr)
            minmax(470px, 0.9fr);
        gap: 16px;
        padding: 14px 16px;
    }

    .toolbar {
        grid-template-columns: minmax(520px, 0.8fr) 220px max-content minmax(0, 1fr);
        min-height: 58px;
    }

    .panel-header {
        min-height: 38px;
    }
}

@media (min-width: 2200px) and (max-height: 1250px) {
    :root {
        --header-h: 58px;
        --toolbar-h: 56px;
        --footer-h: 38px;
    }

    .dashboard {
        gap: 14px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

/* ======================================================
   ÉCRANS MOYENS (1024px – 1280px)
   ====================================================== */
@media (max-width: 1280px) {
    .dashboard {
        grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
        gap: 8px;
        padding: 8px;
    }

    .meteo-drone-details {
        grid-template-columns: 1fr 1fr;
    }
}

/* ======================================================
   PETITS LAPTOPS (< 1024px)
   ====================================================== */
@media (max-width: 1024px) {
    .dashboard {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        height: auto;
        overflow-y: auto;
    }

    .map-panel {
        grid-column: 1 / -1;
        height: 45vh;
    }

    .col-center,
    .ops-col {
        height: auto;
        overflow: visible;
    }

    body {
        overflow-y: auto;
    }

    .flight-params {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

/* ======================================================
   TABLETTE (< 768px)
   ====================================================== */
@media (max-width: 768px) {
    :root {
        --header-h: 50px;
        --toolbar-h: 50px;
    }

    .dashboard {
        grid-template-columns: 1fr;
        padding: 6px;
        gap: 6px;
    }

    .map-panel {
        height: 50vh;
        grid-column: 1;
    }

    .header-clocks {
        gap: 8px;
        font-size: 0.65rem;
    }

    .header-subtext {
        display: none;
    }

    .meteo-drone-details {
        grid-template-columns: 1fr 1fr;
    }

    .flight-params {
        grid-template-columns: 1fr 1fr;
    }

    .meteo-hours {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .toolbar {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .search-container {
        width: 100%;
    }

    #mobilePanel {
        display: block;
    }
}

/* ======================================================
   MOBILE PORTRAIT (< 480px)
   ====================================================== */
@media (max-width: 480px) {
    :root {
        --header-h: 46px;
    }

    .logo-zone {
        font-size: 0.7rem;
        letter-spacing: 2px;
    }

    .header-right {
        gap: 6px;
    }

    .mission-selector {
        display: none; /* masqué, accès via menu mobile */
    }

    .meteo-days {
        gap: 3px;
    }

    .meteo-day {
        min-width: 42px;
    }

    .waypoint-list {
        padding: 6px;
    }

    .decision-box {
        font-size: 0.75rem;
    }
}