/*
 * Classi proprie di H.E.L.P. (prefisso help-). Prima era app.css, insieme ai residui del
 * template Blazor/Bootstrap che nessun componente usava e che, essendo CSS non layerizzato,
 * avrebbero battuto quello di Blueprint: eliminati con la shell (Task UI-03).
 * Il layout delle pagine e' Tailwind nel markup: qui restano solo animazioni e pochi casi
 * che una classe di utilita' non esprime.
 */
/* ── Dashboard operativa (Task 2.4) ──────────────────────────────────────── */

/* Lampeggio del pannello emergenze all'arrivo di un nuovo SOS */
@keyframes help-sos-flash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(244, 67, 54, 0.85); }
}

.help-sos-flash {
    animation: help-sos-flash 0.9s ease-in-out 4;
}

/* Zona della mappa con emergenza attiva */
@keyframes help-zone-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

.help-zone-active {
    animation: help-zone-pulse 1.1s ease-in-out infinite;
}

/* Il feed cresce dall'alto ma non deve spingere la pagina */
.help-feed {
    max-height: 320px;
    overflow-y: auto;
}

/* La lista delle emergenze attive scorre dentro il proprio riquadro.
   Con cinquanta emergenze aperte la pagina si allungava a dismisura e la mappa
   usciva dalla vista: per guardarla bisognava risalire ogni volta. L'altezza e'
   agganciata alla finestra, non fissa, cosi' su uno schermo grande si vedono piu'
   emergenze invece di sprecare spazio. */
.help-emergency-list {
    max-height: calc(100vh - 320px);
    min-height: 240px;
    overflow-y: auto;
    padding-right: 4px;
}

/* La mappa resta ferma mentre la colonna di destra scorre. Sotto il breakpoint md
   le due colonne si impilano e lo sticky non si applica: su schermo stretto
   inchiodare la mappa in cima toglierebbe spazio invece di darne. */
@media (min-width: 960px) {
    .help-map-panel {
        position: sticky;
        top: 88px;
    }
}

.help-map-svg {
    width: 100%;
    height: auto;
    max-height: 460px;
}

/* Mappa di localizzazione: occupa la finestra, e' l'unico contenuto della pagina */
.help-locate-svg {
    width: 100%;
    height: calc(100vh - 210px);
    min-height: 320px;
    border: 1px solid var(--border);
    background: var(--background);
}

/* Anello sull'Access Point raggiunto da un link "mostra su planimetria" */
@keyframes help-ap-ping {
    0%   { opacity: 1;   stroke-width: 0.5; }
    70%  { opacity: 0.1; stroke-width: 0.15; }
    100% { opacity: 1;   stroke-width: 0.5; }
}

.help-ap-highlight {
    animation: help-ap-ping 1.4s ease-in-out infinite;
}

/* Alone di un SOS aperto sulla pagina Presenze: sfumato radiale che pulsa attorno all'AP. Il centro resta fermo (transform-box) */
@keyframes help-sos-pulse {
    0%, 100% { transform: scale(0.78); opacity: 0.55; }
    50%      { transform: scale(1.08); opacity: 1; }
}

.help-sos-pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: help-sos-pulse 1.8s ease-in-out infinite;
}

/* Rispetta chi ha chiesto meno animazioni a livello di sistema.
   L'anello NON sparisce: perde solo l'animazione, altrimenti chi ha disattivato
   il movimento resterebbe senza il segnale che lo ha portato fin qui. */
@media (prefers-reduced-motion: reduce) {
    .help-sos-flash, .help-zone-active, .help-ap-highlight, .help-sos-pulse { animation: none; }
}

/* ── Banner di errore non gestito (Blazor lo mostra togliendo display:none) ───────────
   Prima stava in MainLayout.razor.css. Usa i token del tema, non colori propri. */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    padding: 0.6rem 3rem 0.6rem 1.25rem;
    background: var(--destructive);
    color: var(--destructive-foreground);
}

#blazor-error-ui .reload {
    margin-left: 0.5rem;
    color: inherit;
    text-decoration: underline;
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    cursor: pointer;
    background: none;
    border: 0;
    color: inherit;
}

/* Planimetria di sfondo: il disegno e' scuro su chiaro, quindi in tema scuro si inverte (Task UI-06). */
.dark .help-floor-bg {
    filter: invert(1) hue-rotate(180deg);
}

/*
 * Testo rosso di allarme (DSG-01). Blueprint e le nostre pagine scrivono il testo "distruttivo"
 * con `text-destructive`, cioe' con il colore del RIEMPIMENTO (--destructive, l'allerta vivo
 * del design). Su una tinta chiara (badge SoftDestructive, card emergenza) quel rosso arriva a
 * 3,9:1: il designer ha previsto per questo uso un token apposta, --text-destructive
 * (allerta-scuro, corretto in theme.overrides.css). Si applica qui a tutto il testo
 * distruttivo; il riempimento dei pulsanti (`bg-destructive`) non cambia.
 */
.bb\:text-destructive,
.text-destructive {
    color: var(--text-destructive);
}


/* ── Logo (HelpLogo) ──────────────────────────────────────────────────────────────────────────────────────────────
   Quattro immagini nel DOM (esteso/pittogramma × chiaro/scuro), UNA visibile: dipende dal tema (.dark su <html>) e dallo stato
   della sidebar (data-collapsible=icon). Le regole di "mostra" hanno specificita' piu' alta di quella di "nascondi"; la sidebar
   ridotta nasconde l'esteso con !important perche' deve vincere sempre. */
.help-logo { display: none; }
html:not(.dark) .help-logo[data-variant="full"][data-theme="light"],
.dark .help-logo[data-variant="full"][data-theme="dark"] { display: block; }
[data-collapsible="icon"] .help-logo[data-variant="full"] { display: none !important; }
html:not(.dark) [data-collapsible="icon"] .help-logo[data-variant="ico"][data-theme="light"],
.dark [data-collapsible="icon"] .help-logo[data-variant="ico"][data-theme="dark"] { display: block; }

/* ── Animazione di allarme sulla pianta (pagina Posizione emergenza) ─────────────────────────────────────────────────
   Due <image> nell'SVG della mappa, una per tema: le onde sono animazioni CSS DENTRO il file, quindi girano anche come immagine. */
.help-danger-dark { display: none; }
.dark .help-danger-light { display: none; }
.dark .help-danger-dark { display: inline; }