/**
 * grille-ui-controls.css
 * 🎨 Styles pour les contrôles UI spécifiques au mode grille
 * - Switch mode avec bouton + (Ajouter)
 * - Bannière mode avec boutons Nouvelle grille, 💾 Sauvegarder et 📥 Exporter
 */

/* ============================================
   SWITCH MODE EN MODE GRILLE
   Bouton + (Ajouter)
   ============================================ */

/* Masquer les boutons normaux en mode grille */
body[data-mode="custom-grid"] .mode-normal-btn {
    display: none !important;
}

/* Afficher le bouton d'action grille */
body[data-mode="custom-grid"] .grid-action-btn {
    display: flex !important;
    pointer-events: all;
    position: relative;
    z-index: 2;
    align-items: center;
    justify-content: center;
    height: 3.5rem;
    background: none;
    border: none;
    cursor: pointer;
}

/* Style par défaut des icônes grille */
body[data-mode="custom-grid"] .grid-action-btn i {
    font-size: 1.25rem;
    color: #666;
    transition: color 0.3s ease;
}

/* Style de l'icône Ajouter - blanc et gras (doit venir après pour écraser) */
body[data-mode="custom-grid"] .grid-action-btn[data-action="add"] i {
    color: white;
    font-weight: 700;
}

/* Deuxième bouton grille (Exporter) inactif = grisé */
body[data-mode="custom-grid"] .grid-action-btn:nth-child(2) {
    opacity: 0.5;
}

/* En mode grille, l'indicateur reste sur le bouton Ajouter */
body[data-mode="custom-grid"] .mode-switch-vertical::before {
    transform: translateY(0) !important;
    border-radius: 1.5rem 1.5rem 0.3rem 0.3rem !important;
}

/* ============================================
   BANNIÈRE MODE AVEC BOUTONS
   Boutons Nouvelle grille, Sauvegarder et Exporter intégrés
   ============================================ */

/* Conteneur de la bannière mode en mode grille */
body[data-mode="custom-grid"] .mode-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 16rem;
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
}

/* Texte du mode centré */
body[data-mode="custom-grid"] .mode-banner-content {
    flex: 1;
    text-align: center;
    font-size: var(--texte-lg);
}

/* Conteneur des boutons d'action */
.mode-banner-actions {
    display: none; /* Masqué par défaut */
    gap: 0.5rem;
    align-items: center;
}

/* Afficher les boutons en mode grille */
body[data-mode="custom-grid"] .mode-banner-actions {
    display: flex;
}

/* Style des boutons d'action */
.mode-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 2rem;
    padding: 0 0.75rem;
    background: var(--couleur-primaire);
    color: white;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    white-space: nowrap;
    width: auto;
}

/* Boutons sans texte (icône seule) - format carré */
.mode-action-btn:not(:has(span)) {
    width: 2rem;
    padding: 0;
}

.mode-action-btn:hover {
    background: #6b6b00;
    transform: scale(1.05);
}

.mode-action-btn:active {
    transform: scale(0.95);
}

/* Couleur spécifique pour le bouton exporter */
.mode-action-btn[data-action="export"] {
    background: #4a7c59;
}

.mode-action-btn[data-action="export"]:hover {
    background: #3a6147;
}

/* Bouton "Nouvelle grille" en gras */
.mode-action-btn[data-action="new-grid"] span {
    font-weight: 700;
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

@media (max-width: 47.9375rem) {
    /* Bannière mode avec boutons plus compacts */
    body[data-mode="custom-grid"] .mode-banner {
        min-width: auto;
        width: 90vw;
        max-width: 24rem;
        padding: 0.4rem 0.6rem;
        gap: 0.4rem;
    }
    
    body[data-mode="custom-grid"] .mode-banner-content {
        font-size: var(--texte-base);
    }
    
    .mode-action-btn {
        height: 1.75rem;
        padding: 0 0.5rem;
        font-size: 0.75rem;
        gap: 0.25rem;
    }
    
    .mode-action-btn:not(:has(span)) {
        width: 1.75rem;
        padding: 0;
    }
    
    /* Switch horizontal sur mobile */
    body[data-mode="custom-grid"] .grid-action-btn {
        width: 3rem;
        height: 100%;
    }
    
    body[data-mode="custom-grid"] .grid-action-btn i {
        font-size: 1rem;
    }
    
    /* Indicateur reste à gauche en mode horizontal */
    body[data-mode="custom-grid"] .mode-switch-vertical::before {
        transform: translateX(0) !important;
        border-radius: 1rem 0.25rem 0.25rem 1rem !important;
    }
}

/* ============================================
   RESPONSIVE - TABLETTE
   ============================================ */

@media (min-width: 48rem) and (max-width: 63.9375rem) {
    body[data-mode="custom-grid"] .mode-banner {
        min-width: 18rem;
    }
}

/* ============================================
   ACCESSIBILITÉ
   ============================================ */

.mode-action-btn:focus-visible {
    outline: 3px solid var(--couleur-primaire);
    outline-offset: 2px;
}

/* Afficher un tooltip au survol */
.mode-action-btn[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
}

/* ============================================
   PRÉFÉRENCE MOUVEMENT RÉDUIT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .mode-action-btn,
    body[data-mode="custom-grid"] .grid-action-btn i {
        transition: none;
    }
    
    .mode-action-btn:hover,
    .mode-action-btn:active {
        transform: none;
    }
}

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

@media print {
    .mode-banner-actions,
    body[data-mode="custom-grid"] .grid-action-btn {
        display: none !important;
    }
}