/* =============================================================================
   PIBTS - FAMILLE : ALERTES MODERNES (messages de session)
   =============================================================================
   Composant d'affichage des messages flash, rendu par le partial
   resources/views/layouts/partials/_alerts.blade.php dans CINQ layouts :
   admin, teacher, student, public et consultation.

   Origine : bloc <style> embarqué dans ce partial.
   ⚠️ Ce bloc n'était PAS rendu par les navigateurs : il était poussé avec
   @push('styles') depuis le corps du layout, alors que @stack('styles') est
   exécuté dans le <head>, donc AVANT le corps. Les alertes s'affichaient sans
   styles ; les servir ici restaure l'apparence prévue (et corrige le même
   défaut sur les pages publiques).

   Doctrine : une famille = une feuille = une définition. Ce fichier est servi
   aux 3 espaces ET aux pages publiques : il ne consomme donc AUCUN jeton
   --pibts-* (le seul socle commun aux deux mondes) et sa palette reste locale.
   Le mode sombre est arbitré par le socle
   (layouts/partials/_styles.blade.php, règles « .dark-mode .alert-modern... »).
   ============================================================================= */

.alert-modern {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid transparent;
    margin-bottom: 1rem;
    position: relative;
    animation: alertSlideDown 0.4s ease forwards;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}

.alert-modern:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}

.alert-modern .alert-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.alert-modern .alert-content {
    flex: 1;
    min-width: 0;
}

.alert-modern .alert-title {
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.1rem;
}

.alert-modern .alert-message {
    font-size: 0.85rem;
    opacity: 0.9;
}

.alert-modern .alert-message ul {
    padding-left: 1.2rem;
    margin: 0;
}

.alert-modern .alert-message ul li {
    list-style-type: none;
    padding: 2px 0;
}

.alert-modern .alert-message ul li i {
    margin-right: 6px;
}

.alert-modern .alert-close {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    padding: 0.2rem;
    font-size: 0.9rem;
    transition: opacity 0.3s ease;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.alert-modern .alert-close:hover {
    opacity: 1;
}

/* --- Success --- */
.alert-modern.alert-success {
    background: #ecfdf5;
    border-color: #d1fae5;
    color: #065f46;
}

.alert-modern.alert-success .alert-icon {
    background: #d1fae5;
    color: #059669;
}

.alert-modern.alert-success .alert-title {
    color: #065f46;
}

/* --- Danger --- */
.alert-modern.alert-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.alert-modern.alert-danger .alert-icon {
    background: #fecaca;
    color: #dc2626;
}

.alert-modern.alert-danger .alert-title {
    color: #991b1b;
}

/* --- Warning --- */
.alert-modern.alert-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

.alert-modern.alert-warning .alert-icon {
    background: #fde68a;
    color: #d97706;
}

.alert-modern.alert-warning .alert-title {
    color: #92400e;
}

/* --- Info --- */
.alert-modern.alert-info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

.alert-modern.alert-info .alert-icon {
    background: #bfdbfe;
    color: #2563eb;
}

.alert-modern.alert-info .alert-title {
    color: #1e40af;
}

/* --- Animation d'entrée ---
   Nom propre au composant : « slideDown » est déjà déclaré par
   pibts-custom.css et pibts-family-animations-et-at-rules.css, et il n'existe
   qu'un seul jeu de @keyframes par nom dans le document. */
@keyframes alertSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --- Notifications persistantes ---
   Plus de compte à rebours ni de disparition automatique : les messages
   restent affichés jusqu'à la fermeture manuelle (bouton ✕), voir
   @push('scripts') du partial _alerts. */

/* --- Responsive --- */
@media (max-width: 576px) {
    .alert-modern {
        padding: 0.75rem 1rem;
        gap: 0.75rem;
        border-radius: 10px;
    }

    .alert-modern .alert-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem;
        border-radius: 8px;
    }

    .alert-modern .alert-title {
        font-size: 0.8rem;
    }

    .alert-modern .alert-message {
        font-size: 0.8rem;
    }
}