/* ===== 3-LAYOUT-LIGNE-CONTROLE.CSS ===== */
/* 📐 Gère la disposition en grille de la ligne de contrôle */
/* Contient : Bannière | Switch Altérations | Panneau | Switch Mode | (Futur élément) */

/* ========================================
   WRAPPER PRINCIPAL
   ======================================== */

.control-zone-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1.5rem auto 0;
    position: relative;
    width: 100%;
    max-width: 1400px;
}

/* ========================================
   DESKTOP/TABLETTE : GRILLE 5 COLONNES
   ======================================== */

@media (min-width: 37.5rem) {
    .control-zone-wrapper {
        display: grid;
        grid-template-columns: 1fr auto auto auto 1fr;
        /* Colonne 1: Bannière nom (flexible à droite) */
        /* Colonne 2: Switch altérations (auto) */
        /* Colonne 3: Panneau de contrôle (auto) */
        /* Colonne 4: Switch mode (auto) */
        /* Colonne 5: Bannière mode (flexible à gauche) */
        align-items: center;
        gap: 1rem;
    }
    
    /* ========================================
       POSITIONNEMENT DES ÉLÉMENTS DANS LA GRILLE
       ======================================== */
    
    /* Colonne 1 : Bannière nom accord - alignée à DROITE */
    .chord-name-desktop {
        order: 1;
        justify-self: end;
        margin: 0;
    }
    
    /* Colonne 2 : Switch altérations - centré */
    .alteration-switch-vertical {
        order: 2;
        justify-self: center;
    }
    
    /* Colonne 3 : Panneau de contrôle (générateur ou dictionnaire) - centré */
    .control-zone,
    .navigation-panel {
        order: 3;
        justify-self: center;
        margin: 0;
    }
    
    /* Colonne 4 : Switch mode - centré */
    .mode-switch-vertical {
        order: 4;
        justify-self: center;
    }
    
    /* Colonne 5 : Bannière mode - dans colonne flexible, alignée à GAUCHE */
    .mode-banner {
        order: 5;
        justify-self: start;
        margin: 0;
    }
}

/* ========================================
   CONTAINER DES SWITCHES
   ======================================== */

/* Desktop : utilise display: contents pour intégrer les switches dans la grille */
.switches-horizontal-container {
    display: contents;
}

/* ========================================
   MODE DICTIONNAIRE : AJUSTEMENTS SPÉCIFIQUES
   ======================================== */

body[data-current-note] .control-zone-wrapper {
    justify-content: center;
    gap: 1rem;
    max-width: calc(100% - 0rem);
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

body[data-current-note] .navigation-panel {
    flex: 0 0 auto;
    margin: 0;
}

/* ========================================
   MOBILE : DISPOSITION VERTICALE
   ======================================== */

@media (max-width: 37.5rem) {
    .control-zone-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin: 0 auto;
        padding: 0 1rem;
        width: 100%;
        max-width: 100%;
    }
    
    /* Container des switches devient horizontal en mobile */
    .switches-horizontal-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        padding: 0.5rem 0;
    }
    
    /* Ordre en mobile : switches → bannière → panneau */
    .alteration-switch-vertical {
        order: 1;
    }
    
    .mode-switch-vertical {
        order: 2;
    }
    
    .chord-name-mobile {
        order: 3;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .control-zone,
    .navigation-panel {
        order: 4;
        width: 100%;
    }
}

/* ========================================
   WRAPPER COLONNE DROITE (Bannière + Grille perso)
   ======================================== */

/* Desktop/Tablette : le wrapper prend la colonne 5 */
@media (min-width: 37.5rem) {
    .right-column-wrapper {
        grid-column: 5;
        grid-row: 1;
        justify-self: start;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }
    
    .right-column-wrapper .mode-banner {
        order: 1;
        margin: 0;
    }
    
    .right-column-wrapper .custom-grid-controls {
        order: 2;
        margin: 0;
    }
}

/* Mobile : on défait le wrapper */
@media (max-width: 37.4975rem) {
    .right-column-wrapper {
        display: contents; /* Les enfants deviennent des éléments directs */
    }
    
    .mode-banner {
        order: 4;
    }
    
    .custom-grid-controls {
        order: 5;
        width: 100%;
        margin-top: 0.75rem;
    }
}


/* ========================================
   PRINT
   ======================================== */

@media print {
    .control-zone-wrapper {
        display: none;
    }
}