/**
 * Niveaux de barre d'outils pour Imagilire Studio
 * Contrôle l'affichage des options Quill selon le niveau sélectionné
 */

/* Style pour le sélecteur de niveau */
#toolbar-level-select {
    min-width: 120px;
    margin-right: 10px;
}

/* Préserver le comportement par défaut de Quill */

/* === NIVEAU BASIQUE === 
   Français/Littéraire : Headers, formatage de base, listes, liens, nettoyage */
.toolbar-level-basic .ql-toolbar .ql-color,
.toolbar-level-basic .ql-toolbar .ql-background,
.toolbar-level-basic .ql-toolbar .ql-strike,
.toolbar-level-basic .ql-toolbar .ql-indent,
.toolbar-level-basic .ql-toolbar .ql-formula,
.toolbar-level-basic .ql-toolbar .ql-code-block,
.toolbar-level-basic .ql-toolbar .ql-image {
    display: none !important;
}

/* Masquer le groupe couleur/background pour le niveau basique */
.toolbar-level-basic .ql-toolbar .ql-formats:has(.ql-color) {
    display: none !important;
}

/* Fallback pour les navigateurs sans support de :has() */
@supports not selector(:has(*)) {
    .toolbar-level-basic .ql-toolbar .ql-formats:nth-child(3) {
        display: none !important;
    }
}

/* === NIVEAU SCIENTIFIQUE === 
   Tout le basique + formules, couleurs, images, barré */
.toolbar-level-scientific .ql-toolbar .ql-indent,
.toolbar-level-scientific .ql-toolbar .ql-code-block {
    display: none !important;
}

/* === NIVEAU TECHNIQUE === 
   Tout le basique + code, indentation, images, couleurs (mais pas formules) */
.toolbar-level-technical .ql-toolbar .ql-formula {
    display: none !important;
}

/* === NIVEAU COMPLET === 
   Toutes les options visibles (comportement par défaut) */
/* Aucune règle spécifique nécessaire pour le niveau complet */

/* Styles spéciaux pour améliorer la présentation selon les niveaux */

/* En niveau basique, grouper visuellement les éléments essentiels */
.toolbar-level-basic .ql-toolbar {
    padding: 8px 12px;
}

.toolbar-level-basic .ql-toolbar .ql-formats {
    margin-right: 8px;
    padding-right: 8px;
    border-right: 1px solid #ccc;
}

.toolbar-level-basic .ql-toolbar .ql-formats:last-child {
    border-right: none;
    margin-right: 0;
}

/* Indicateur visuel du niveau actif */
.studio-toolbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-color, #007bff);
    opacity: 0.6;
    transition: background-color 0.3s ease;
}

.toolbar-level-basic .studio-toolbar::before {
    background: #28a745; /* Vert pour basique */
}

.toolbar-level-scientific .studio-toolbar::before {
    background: #6f42c1; /* Violet pour scientifique */
}

.toolbar-level-technical .studio-toolbar::before {
    background: #fd7e14; /* Orange pour technique */
}

.toolbar-level-complete .studio-toolbar::before {
    background: #007bff; /* Bleu pour complet */
}

/* Responsive : adapter les niveaux sur mobile */
@media (max-width: 768px) {
    #toolbar-level-select {
        min-width: 100px;
        font-size: 14px;
    }
    
    /* En mode mobile, forcer un niveau plus simple */
    .toolbar-level-complete .ql-toolbar .ql-indent,
    .toolbar-level-complete .ql-toolbar .ql-formula {
        display: none !important;
    }
    
    /* Réduire l'espacement sur mobile */
    .ql-toolbar .ql-formats {
        margin-right: 4px;
    }
}

/* Smooth transitions pour les changements de niveau - seulement quand nécessaire */
.ql-toolbar.level-changing .ql-formats > *[style*="display: none"] {
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

/* Préserver l'affichage normal des icônes et boutons Quill */
.ql-toolbar button:not([style*="display: none"]),
.ql-toolbar .ql-picker:not([style*="display: none"]),
.ql-toolbar .ql-picker-label:not([style*="display: none"]) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Ne jamais appliquer de transitions aux éléments Quill (sauf pendant les changements de niveau) */
.ql-toolbar:not(.level-changing) * {
    transition: none !important;
}

/* Animation pour la transition de niveau */
.ql-toolbar.level-transition {
    position: relative;
    overflow: hidden;
}

.ql-toolbar.level-transition::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: levelTransition 0.6s ease-out;
}

@keyframes levelTransition {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Masquer avec transition fluide */
.ql-toolbar .ql-formats > *[style*="display: none"] {
    opacity: 0;
    transform: scale(0.8);
    visibility: hidden;
}

/* Note: Éviter les pseudo-éléments ::after qui peuvent interférer avec les icônes Quill */