/*
 * Styles personnalisés Routier
 * Ce fichier n'est PAS écrasé par Tailwind
 */

/* Header sticky pour les pages d'édition/création/détails */
.page-header-sticky {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background-color: rgba(235, 242, 250, 0.8) !important; /* routier-surface-alt avec transparence */
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    margin: -1.5rem -1.5rem 0 -1.5rem !important;
    padding: 1.5rem !important;
}

/* Sur mobile, compenser le pt-16 (4rem) du main pour laisser la place au hamburger flottant */
@media (max-width: 767px) {
    .page-header-sticky {
        margin: -4rem -0.75rem 0 -0.75rem !important;
        padding: 4rem 0.75rem 0.75rem 0.75rem !important;
    }
}

/* === UI de reconnexion Blazor ===
 * Réplique fidèle du design par défaut de Blazor (overlay sombre + carte blanche +
 * animation ripple), mais avec des textes en français. Le markup est dans App.razor ;
 * Blazor bascule les classes components-reconnect-* sur #components-reconnect-modal.
 */
#components-reconnect-modal { display: none; }

/* États actifs → overlay plein écran (comme .components-reconnect-overlay du défaut) */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-resume-failed {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 10000;
    overflow: hidden;
    /* MudBlazor pose un fond opaque en !important
       (#components-reconnect-modal { background: var(--mud-palette-background) !important })
       qui masquerait toute l'app : on le neutralise (notre id+classe bat leur id seul),
       seul le ::before fournit le voile léger. */
    background: transparent !important;
}

/* Voile léger — on garde l'app clairement visible en arrière-plan
   (le défaut Blazor utilise rgba(0,0,0,0.4), trop opaque : lavis gris qui masque l'app) */
#components-reconnect-modal::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.12); /* routier-text très transparent */
    animation: components-reconnect-fadeInOpacity 0.5s ease-in-out;
    opacity: 1;
}

/* Carte blanche centrée — mêmes dimensions/animation que le dialog par défaut */
.reconnect-dialog {
    position: relative;
    background-color: #fff;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    z-index: 10001;
    /* opacity de repos à 1 (l'animation reste une entrée) : si prefers-reduced-motion
       désactive l'animation, la carte reste visible au lieu de rester à 0. */
    opacity: 1;
    animation: components-reconnect-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s,
               components-reconnect-fadeInOpacity 0.5s ease-out;
}
.reconnect-dialog p { margin: 0; text-align: center; color: #1E293B; font-size: .9rem; }

/* Message enrichi de l'état "retrying" (indispo + cause + lien statut) */
.reconnect-msg-retrying p + p { margin-top: .5rem; }
.reconnect-strong { font-weight: 700; font-size: 1rem; }
.reconnect-sub { color: #64748B; }
.reconnect-link { color: #1565C0; font-weight: 500; text-decoration: underline; }
.reconnect-link:hover { color: #1E88E5; }

/* Bouton (état failed) — palette Routier, forme du bouton par défaut Blazor */
.reconnect-btn {
    border: 0;
    background-color: #1565C0; /* routier-primary */
    color: #fff;
    padding: .5rem 1.5rem;
    border-radius: .375rem;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease;
}
.reconnect-btn:hover { background-color: #1E88E5; } /* routier-primary-light */

/* Animation ripple — identique au défaut Blazor (deux cercles concentriques) */
.reconnect-ripple { display: block; position: relative; width: 80px; height: 80px; }
.reconnect-ripple div {
    position: absolute;
    border: 3px solid #1565C0; /* routier-primary (défaut : #0087ff) */
    opacity: 1;
    border-radius: 50%;
    animation: reconnect-ripple 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.reconnect-ripple div:nth-child(2) { animation-delay: -0.5s; }

@keyframes reconnect-ripple {
    0%   { top: 40px; left: 40px; width: 0;    height: 0;    opacity: 0; }
    4.9% { top: 40px; left: 40px; width: 0;    height: 0;    opacity: 0; }
    5%   { top: 40px; left: 40px; width: 0;    height: 0;    opacity: 1; }
    100% { top: 0;    left: 0;    width: 80px; height: 80px; opacity: 0; }
}
@keyframes components-reconnect-fadeInOpacity { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes components-reconnect-slideUp {
    0%   { transform: translateY(30px) scale(0.95); }
    100% { transform: translateY(0); }
}

/* Visibilité des messages selon l'état courant (tous masqués par défaut) */
.reconnect-msg, .reconnect-btn { display: none; }

/* show : reconnexion en cours */
#components-reconnect-modal.components-reconnect-show .reconnect-msg-show { display: block; }

/* retrying (ajouté par-dessus show) : masque le message "show" et affiche le compte à rebours */
#components-reconnect-modal.components-reconnect-retrying .reconnect-msg-show    { display: none; }
#components-reconnect-modal.components-reconnect-retrying .reconnect-msg-retrying { display: block; }

/* failed : message + bouton de reconnexion manuel */
#components-reconnect-modal.components-reconnect-failed .reconnect-msg-failed { display: block; }

/* rejected / resume-failed / paused : on garde le ripple + "Reconnexion au serveur…"
   pendant le rechargement automatique déclenché par app.js (pas de bouton qui flashe) */
#components-reconnect-modal.components-reconnect-rejected      .reconnect-msg-show,
#components-reconnect-modal.components-reconnect-resume-failed .reconnect-msg-show,
#components-reconnect-modal.components-reconnect-paused        .reconnect-msg-show { display: block; }