/**
 * change-key-modal.css
 * 🎨 Styles spécifiques pour la modale de changement de tonalité
 */

/* ========================================
   MODAL - PERMETTRE AUX DROPDOWNS DE DÉPASSER
   ======================================== */

/* Retirer l'overflow du modal */
#changeKeyOverlay .modal-content {
    overflow: visible !important;
}

#changeKeyOverlay .modal-body {
    overflow: visible !important;
}

/* Augmenter le z-index des custom selects */
#changeKeyOverlay .custom-select {
    position: relative;
    z-index: 1000;
}

#changeKeyOverlay .custom-select .select-dropdown {
    z-index: 1001;
}

/* ========================================
   LAYOUT GÉNÉRAL MODALE
   ======================================== */

/* Container des 3 colonnes - centrer les selects */
#changeKeyOverlay .modal-body > div[style*="display: flex"] {
    justify-content: center;
    position: relative;
}

/* Colonne du switch - positionnée absolument à gauche du select note */
#changeKeyOverlay .modal-body > div[style*="display: flex"] > div:first-child {
    position: absolute;
    left: 0;
    display: flex;
    align-items: center; /* Centrer verticalement */
    height: 100%;
}

/* Les deux colonnes des selects - centrées ensemble */
#changeKeyOverlay .control-group {
    position: relative;
}

/* Ajouter un espace à gauche du select note pour le switch */
#changeKeyOverlay .control-group:first-of-type {
    padding-left: calc(120px + 0.5rem); /* largeur du switch + gap */
}

/* Container du switch + select note */
#changeKeyOverlay .modal-body .control-group > div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ========================================
   SWITCH ALTÉRATION HORIZONTAL (MODALE)
   ======================================== */

#changeKeyAlterationSwitch {
    /* Forcer le mode horizontal */
    width: auto;
    min-width: 120px;
    max-width: 120px;
    height: 2.5rem;
    
    /* Layout horizontal */
    flex-direction: row;
    gap: 0.2rem;
    
    /* Bordure arrondie latérale */
    border-radius: 1.25rem;
    padding: 0.2rem;
    
    /* Pas de flex-shrink */
    flex-shrink: 0;
}

/* Indicateur glissant horizontal (3 positions) */
#changeKeyAlterationSwitch::before {
    width: 1.8rem;
    height: calc(100% - 0.4rem);
    top: 0.2rem;
    left: 0.2rem;
    border-radius: 1rem 0.25rem 0.25rem 1rem;
}

#changeKeyAlterationSwitch[data-active-alteration="flat"]::before {
    transform: translateX(0) translateY(0);
    border-radius: 1rem 0.25rem 0.25rem 1rem;
}

#changeKeyAlterationSwitch[data-active-alteration="natural"]::before {
    transform: translateX(2.5rem) translateY(0);
    border-radius: 0.25rem;
}

#changeKeyAlterationSwitch[data-active-alteration="sharp"]::before {
    transform: translateX(4.8rem) translateY(0);
    border-radius: 0.25rem 1rem 1rem 0.25rem;
}

/* Lignes séparatrices verticales */
#changeKeyAlterationSwitch::after,
#changeKeyAlterationSwitch .alteration-separator {
    width: 1px;
    height: 60%;
    top: 20%;
    left: auto;
    right: auto;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--bordure-principale) 20%,
        var(--bordure-principale) 80%,
        transparent
    );
}

#changeKeyAlterationSwitch::after {
    left: 33.33%;
}

#changeKeyAlterationSwitch .alteration-separator {
    left: 66.66%;
}

/* Boutons altérations horizontaux */
#changeKeyAlterationSwitch .alteration-switch-btn {
    width: 2rem;
    height: 100%;
    pointer-events: auto; /* ✅ Activer les clics */
    cursor: pointer;
}

#changeKeyAlterationSwitch .alteration-symbol {
    font-size: 1rem;
}

/* Alignement des symboles */
#changeKeyAlterationSwitch .alteration-switch-btn[data-alteration="natural"] .alteration-symbol {
    transform: translateX(0.2rem);
}

#changeKeyAlterationSwitch .alteration-switch-btn[data-alteration="sharp"] .alteration-symbol {
    transform: translateX(0.22rem);
}