/* =============================================================================
 * Kilasinaka - CSS commun aux espaces connectés (student / teacher / admin)
 * =============================================================================
 * ORIGINE : extraction VERBATIM du bloc <style> de
 *   resources/views/student/static/head.blade.php
 *   resources/views/teacher/static/head.blade.php   (bloc identique au caractère près)
 *   resources/views/manager/static/head.blade.php   (fichier byte-identique à student)
 *
 * Ce fichier ne contient que ce que Tailwind ne peut pas exprimer en utilitaires.
 * Toute la mise en page reste faite avec des classes Tailwind dans le HTML, afin
 * que le portage vers JSP / ASPX / PHP se limite à un copier-coller du balisage.
 *
 * NOTE INTÉGRATEUR : la section 1 doit rester identique au projet Laravel.
 * La section 2 regroupe les seuls ajouts nécessaires à la maquette statique
 * (animations de suppression et notifications). Elle est facultative côté
 * back-end réel, où ces retours sont produits par le serveur.
 * ========================================================================== */

/* =============================================================================
 * SECTION 1 : EXTRACTION VERBATIM DU PROJET LARAVEL (ne pas modifier)
 * ========================================================================== */

[x-cloak] {
    display: none !important;
}

.custom-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.fade-in {
    animation: fadeIn 0.4s ease-out forwards;
    opacity: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================================================
 * SECTION 2 : AJOUTS PROPRES À LA MAQUETTE STATIQUE
 * -----------------------------------------------------------------------------
 * Nécessaires parce que le projet Laravel confie ces retours au serveur
 * (rechargement de page après POST). En statique, ils sont simulés côté client.
 * Les couleurs employées proviennent toutes du design system extrait
 * (slate-200/500, white, rose-600, emerald-600, amber-600, brand-600).
 * ========================================================================== */

/* --- Ligne de tableau en cours de suppression (animation de sortie) -------- */
.k-row-out {
    transition: opacity 0.25s ease, transform 0.25s ease;
    opacity: 0;
    transform: translateX(24px);
}

/* --- Ligne nouvellement créée (mise en évidence temporaire) ---------------- */
.k-row-in {
    animation: kRowIn 1.4s ease-out forwards;
}

@keyframes kRowIn {
    0% {
        background-color: #eff6ff;
    }

    /* brand-50 */
    100% {
        background-color: transparent;
    }
}

/* --- Notifications « toast » (générées par shared/js/app.js) --------------- */
#k-toast-root {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.k-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 260px;
    max-width: 360px;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    /* rounded-xl */
    background: #ffffff;
    border: 1px solid #e2e8f0;
    /* border-slate-200 */
    box-shadow: 0 20px 25px -5px rgb(15 23 42 / 0.1), 0 8px 10px -6px rgb(15 23 42 / 0.1);
    /* shadow-xl */
    font-size: 0.8125rem;
    color: #475569;
    /* text-slate-600 */
    animation: kToastIn 0.25s ease-out forwards;
}

.k-toast.k-toast-out {
    animation: kToastOut 0.25s ease-in forwards;
}

.k-toast-success i {
    color: #16a34a;
}

/* green-600 */
.k-toast-error i {
    color: #e11d48;
}

/* rose-600 */
.k-toast-info i {
    color: #2563eb;
}

/* brand-600 */
.k-toast-warning i {
    color: #d97706;
}

/* amber-600 */

@keyframes kToastIn {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes kToastOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(24px);
    }
}

/* --- Champ de formulaire en erreur (validation client de la maquette) ------ */
.k-invalid {
    border-color: #e11d48 !important;
    /* rose-600 */
}

.k-error-msg {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #e11d48;
}

/* --- Impression des fiches (élève, professeur, classe) -------------------- */
@media print {

    nav,
    aside,
    footer,
    #sidebar,
    #sidebar-overlay,
    .k-no-print {
        display: none !important;
    }

    html,
    body,
    main {
        overflow: visible !important;
        height: auto !important;
        background: #ffffff !important;
    }
}