/* Import de Tailwind CSS (via CDN dans le HTML, mais ces classes de base sont utiles) */
/* Ce fichier contient les styles personnalisés qui ne sont pas gérés par les classes Tailwind */

body {
    -webkit-tap-highlight-color: transparent; /* Empêche le flash gris sur les éléments cliquables sur mobile */
}

/* --- Style pour la notification (toast) --- */
#toast-notification {
    top: 5rem; /* Positionnement sous le header */
    right: 1.25rem;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease-out;
}
#toast-notification.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* --- Style pour l'indicateur hors ligne --- */
#offline-indicator {
    display: none; /* Caché par défaut */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
#offline-indicator.show {
    display: flex; /* Affiché via JS */
    opacity: 1;
}


/* Animations pour les modales */
.modal-enter { animation: fadeIn 0.3s ease-out forwards; }
.modal-leave { animation: fadeOut 0.3s ease-in forwards; }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes fadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } }

/* Style pour la barre de navigation active */
.nav-active { color: #2563eb; /* text-blue-600 */ }

/* Style pour la zone de signature pour s'assurer qu'elle est bien visible */
#signature-canvas, #tech-signature-canvas {
    border: 1px dashed #ccc;
    border-radius: 0.375rem; /* rounded-md */
    cursor: crosshair;
}

/* S'assurer que le body ne scrolle pas quand une modale est ouverte */
body.modal-open { overflow: hidden; }

/* Styles pour les placeholders des inputs */
input::placeholder, textarea::placeholder { color: #9ca3af; /* text-gray-400 */ }

/* --- Styles pour l'animation du switcher (toggle) --- */
.toggle-bg { transition: background-color 0.2s ease-in-out; }
.dot { transition: transform 0.2s ease-in-out; }

/* --- Styles pour l'accordéon des écoles --- */
.school-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
    padding-top: 0;
    padding-bottom: 0;
}
.school-details.expanded {
    max-height: 40rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.school-header .accordion-arrow { transition: transform 0.4s ease-in-out; }
.school-header.expanded .accordion-arrow { transform: rotate(180deg); }

/* Animation pour l'apparition du logo */
@keyframes fade-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fade-in 0.6s ease-out forwards; }

/* --- Styles pour les badges de priorité --- */
.priority-badge {
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* font-semibold */
    padding: 0.25rem 0.5rem; /* py-1 px-2 */
    border-radius: 9999px; /* rounded-full */
}
.priority-1 { background-color: #fecaca; color: #b91c1c; } /* red */
.priority-2 { background-color: #fed7aa; color: #c2410c; } /* orange */
.priority-3 { background-color: #bfdbfe; color: #1d4ed8; } /* blue */
.priority-4 { background-color: #d1d5db; color: #374151; } /* gray */


/* NOUVEAU: Styles pour les tags */
.tag-badge {
    display: inline-block;
    background-color: #e0e7ff; /* bg-indigo-100 */
    color: #4338ca; /* text-indigo-800 */
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
    padding: 0.25rem 0.75rem; /* px-3 py-1 */
    border-radius: 9999px; /* rounded-full */
}