/**
 * ========================================
 * RECALCULATION SPLASH OVERLAY v3.0.0
 * ========================================
 * Overlay fullscreen semi-transparente durante recálculo/background-resume.
 * COBRE O MAPA para esconder caos visual (pulos GPS, re-renderização de rota).
 *
 * 🔧 v3.0.0 (Splash único — sem toast separado):
 * - Antes: splash "Recalculando..." + toast verde "Rota recalculada!" separado
 *   O toast (z-index 10000) furava o overlay e ficava atrás do nav-panel
 * - Agora: splash transiciona para estado SUCCESS (verde, checkmark, "Rota recalculada!")
 *   Tudo fica dentro do overlay fullscreen — nav-panel permanece coberto
 *   Splash só some quando heading-up 3D já foi restaurado
 *
 * 🔧 v2.0.0 (Redesign completo):
 * - Overlay fullscreen com card centralizado, z-index 1030
 * - Mínimo 3s de exibição (controlado por JS)
 * - Spinner 36px centralizado + texto
 * - Background escuro semi-transparente cobre toda a tela
 *
 * z-index hierarchy durante navegação:
 *   1030 = recalc-splash (ESTE)
 *   1025 = nav-alert (alerta de desvio)
 *   1020 = navigation-panel (painel de instrução)
 *   1015 = fab-navigation-container
 *   1014 = simulator-panel
 *   1010 = compass-widget
 *
 * Autor: RotaTruck
 * Data: Março 2026
 * ======================================== */

/* ==================== OVERLAY FULLSCREEN ==================== */
/* Cobre toda a tela — mapa fica invisível durante recálculo */
.recalc-splash {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--z-nav-ui) + 5);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.50);
}

.recalc-splash.visible {
    opacity: 1;
    visibility: visible;
}

/* ==================== CARD CENTRAL ==================== */
/* Spinner + texto sobre fundo colorido */
.recalc-splash-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 28px 36px;
    border-radius: 20px;
    color: white;
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 17px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ==================== TIERS ==================== */

/* TIER SMALL + MEDIUM (desvio padrão — âmbar) */
.recalc-splash.tier-small .recalc-splash-inner,
.recalc-splash.tier-medium .recalc-splash-inner {
    background: rgba(245, 158, 11, 0.92);
}

/* TIER LARGE (background resume / desvio grande — laranja RotaTruck + pulse) */
.recalc-splash.tier-large .recalc-splash-inner {
    background: rgba(255, 107, 53, 0.95);
}

/* TIER SUCCESS (recálculo concluído — verde sucesso) */
.recalc-splash.tier-success .recalc-splash-inner {
    background: rgba(16, 185, 129, 0.94);
}

/* 🔧 v3.0.0: Esconder spinner e mostrar checkmark no estado success */
.recalc-splash.tier-success .recalc-spinner {
    display: none;
}

.recalc-splash.tier-success .recalc-checkmark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 28px;
    flex-shrink: 0;
    animation: recalcCheckPop 0.35s ease-out;
}

/* Checkmark escondido por padrão */
.recalc-checkmark {
    display: none;
}

@keyframes recalcCheckPop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* ==================== SPINNER ==================== */
/* Spinner grande e centralizado (acima do texto) */
.recalc-spinner {
    display: inline-block;
    width: 36px;
    height: 36px;
    border: 3.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: recalcSpin 0.8s linear infinite;
    flex-shrink: 0;
}

/* ==================== ANIMAÇÕES ==================== */

@keyframes recalcSpin {
    to { transform: rotate(360deg); }
}

@keyframes recalcPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

/* Fade-in suave ao aparecer */
.recalc-splash.visible .recalc-splash-inner {
    animation: recalcFadeIn 0.3s ease-out;
}

/* Large: fade-in + pulse contínuo */
.recalc-splash.tier-large.visible .recalc-splash-inner {
    animation: recalcFadeIn 0.3s ease-out, recalcPulse 1.5s ease-in-out 0.3s infinite;
}

/* Success: sem animação de fade-in (transição suave de tier anterior) */
.recalc-splash.tier-success.visible .recalc-splash-inner {
    animation: none;
    transition: background 0.3s ease;
}

@keyframes recalcFadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* Fadeout ao esconder */
.recalc-splash.hiding {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

/* ==================== NIGHT MODE ==================== */
/* Fundo mais escuro para não cegar o motorista à noite */
body.navigation-night .recalc-splash {
    background: rgba(0, 0, 0, 0.65);
}

body.navigation-night .recalc-splash.tier-large .recalc-splash-inner {
    background: rgba(204, 68, 0, 0.95);
}

body.navigation-night .recalc-splash.tier-medium .recalc-splash-inner,
body.navigation-night .recalc-splash.tier-small .recalc-splash-inner {
    background: rgba(180, 120, 10, 0.92);
}

body.navigation-night .recalc-splash.tier-success .recalc-splash-inner {
    background: rgba(12, 140, 97, 0.94);
}

/* ==================== 🔧 v3.0.0: ESCONDER UI DURANTE SPLASH ==================== */
/* Quando body.recalc-active, esconde nav-panel, FABs, bottom-nav, compass, speed, etc.
 * NÃO depende de z-index — visibility:hidden garante que nada apareça por cima do splash.
 * Resolve stacking context do nav-panel (transform + backdrop-filter criam contexto isolado).
 */
body.recalc-active .navigation-panel,
body.recalc-active .nav-alert,
body.recalc-active .fab-navigation-container,
body.recalc-active #bottom-navigation,
body.recalc-active .compass-widget,
body.recalc-active .speed-display,
body.recalc-active .simulator-panel,
body.recalc-active #notification-container,
body.recalc-active #notification-container-center,
body.recalc-active #notification-container-bottom {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ==================== ACESSIBILIDADE ==================== */
@media (prefers-reduced-motion: reduce) {
    .recalc-splash,
    .recalc-splash-inner,
    .recalc-spinner {
        animation: none !important;
        transition-duration: 0.1s !important;
    }
}

/* ==================== RESPONSIVO MOBILE ==================== */
@media (max-width: 480px) {
    .recalc-splash-inner {
        padding: 24px 28px;
        font-size: 16px;
        margin: 0 20px;
    }
}

/* ==================== 🆕 v11.2.116: MASCARA DE INSTRUCAO STALE ==================== */
/* StaleInstructionGate alterna .nav-recalc-masking em #navigation-panel durante
 * janelas em que a rota esta stale (recalculo em voo / StormGuard bloqueando /
 * teleporte pos-background). Esconde SO a manobra (texto + distancia + icone) e
 * mostra "Recalculando rota...". ETA/distancia/destino seguem visiveis.
 * Sem segundo writer: o conteudo real fica escondido (visibility:hidden) e um
 * pseudo-elemento exibe o aviso — updateNavigationPanel (Fase 7) intocado. */
#navigation-panel.nav-recalc-masking .nav-instruction {
    position: relative;
    min-height: 1.4em;
}

#navigation-panel.nav-recalc-masking .nav-instruction-text,
#navigation-panel.nav-recalc-masking .nav-instruction-distance {
    visibility: hidden;
}

#navigation-panel.nav-recalc-masking .nav-instruction::after {
    content: 'Recalculando rota...';
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    height: 100%;
    font-weight: 600;
    font-size: 0.95em;
    color: #FF6B35;
    white-space: nowrap;
}

/* Icone da manobra fica neutro (pode estar apontando errado durante o stale) */
#navigation-panel.nav-recalc-masking #nav-maneuver-icon {
    animation: navRecalcMaskPulse 1s ease-in-out infinite;
}

@keyframes navRecalcMaskPulse {
    0%, 100% { opacity: 0.30; }
    50% { opacity: 0.60; }
}

body.navigation-night #navigation-panel.nav-recalc-masking .nav-instruction::after {
    color: #ff8f5a;
}

/* 🆕 v11.2.135 (log 643 bairro): VIA PROIBIDA ACEITA — o app NAO esta recalculando
 * (o roteador HGV nao rota caminhao na via proibida; o recalc de saida foi suprimido
 * pela Frente A). Texto HONESTO em vez de "Recalculando rota..." preso por ~10min e
 * em vez da manobra stale "Vire a direita Rua Schmidt" (anexos 5-7 "me largou").
 * staleInstructionGate alterna .nav-via-aceita junto com .nav-recalc-masking. */
#navigation-panel.nav-recalc-masking.nav-via-aceita .nav-instruction::after {
    content: '⚠ Via proibida aceita — siga até sair';
    color: #E53935;
    font-size: 0.82em;
}
body.navigation-night #navigation-panel.nav-recalc-masking.nav-via-aceita .nav-instruction::after {
    color: #ff6b6b;
}

@media (prefers-reduced-motion: reduce) {
    #navigation-panel.nav-recalc-masking #nav-maneuver-icon {
        animation: none !important;
        opacity: 0.4;
    }
}