/*!
 * Vigilog – widget/widget.css
 * Versione 2.5 – 2026-05-11
 *
 * Changelog:
 * v2.5 - 2026-05-11
 *   - .vmarker-hover: ora applicata al figlio del marker (non a _icon) per non sovrascrivere
 *     il transform:translate3d di Leaflet; rimosso transform-origin (non più necessario)
 * v2.4 - 2026-05-07
 *   - Aggiunto .vline-label (etichetta distanza sulla linea A→B "Rispetto a te")
 * v2.3 - 2026-05-07
 *   - Aggiunto .vmarker-hover: animazione rimbalzo marker su hover card
 * v2.2 - 2026-05-07
 *   - .vbadge-nearest e .vcard-nearest: colore cambiato da arancione a teal (#0d9488)
 *     per distinguerlo visivamente dal bottone "Naviga" (arancione = azione)
 * v2.1 - 2026-05-07
 *   - Resize handle: bordo+sfondo visibile, angoli arrotondati sotto la mappa
 *   - Aggiunto .vbtn-rispetto (bottone "Rispetto a te" dentro le card)
 * v2.0 - 2026-05-07
 *   - Aggiunto #vigilog-map-resizer (handle drag verticale per ridimensionare la mappa)
 *   - Aggiunto .vcard-selected (bordo blu sulla card attiva)
 * v1.9 - 2026-05-07
 *   - Aggiunto .vbtn-naviga (bottone arancione con testo "Naviga")
 * v1.8 - 2026-05-07
 *   - Aggiunto .vbadge-nearest (badge arancione "Più vicino")
 *   - Aggiunto .vcard-nearest (bordo arancione sullo stallo libero più vicino)
 * v1.7 - 2026-05-07
 *   - Aggiunto marker posizione utente (.vuser-dot) con animazione pulse blu
 * v1.6 - 2026-05-05
 *   - Aggiunto CSS fullscreen fallback per iOS (.vmap-fullscreen, #vmap-fs-close)
 * v1.5 - 2026-04-21
 *   - Aggiunto stili filtro (.vfilter-btn)
 *   - Aggiunto animazioni card: vcard-highlight (da marker) e vcard-changed (cambio stato)
 * v1.4 - 2026-04-21
 *   - Fix: rimosso logo come background CSS del body
 * v1.3 - 2026-04-20
 *   - Spostato in widget/
 */

/* ── Resize handle mappa ─────────────────────────────────── */

#vigilog-map-resizer {
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ns-resize;
    background: var(--vigilog-bg-card, #fff);
    border: 1px solid var(--vigilog-border, #dee2e6);
    border-top: none;
    border-radius: 0 0 10px 10px;
    color: #adb5bd;
    font-size: 1.1rem;
    user-select: none;
    margin-bottom: 0.75rem;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

#vigilog-map-resizer:hover {
    background: #fff8f3;
    color: #F28C28;
    border-color: #F28C28;
}

/* ── Card selezionata ────────────────────────────────────── */

.vcard-selected {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .2);
}

/* ── Posizione utente ────────────────────────────────────── */

.vuser-dot {
    width: 18px;
    height: 18px;
    background: #3b82f6;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .3);
    animation: vuser-pulse 2s ease infinite;
}

@keyframes vuser-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(59, 130, 246, .3); }
    50%       { box-shadow: 0 0 0 9px rgba(59, 130, 246, .1); }
}

/* ── Etichetta distanza linea A→B ────────────────────────── */

.vline-label {
    position: absolute;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 1.5px solid #3b82f6;
    border-radius: 12px;
    padding: 2px 9px;
    font-size: .78rem;
    font-weight: 600;
    color: #3b82f6;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    pointer-events: none;
}

html[data-bs-theme="dark"] .vline-label {
    background: #1a1c1f;
}

/* ── Marker hover (pulse su hover card) ─────────────────── */

@keyframes vmarker-pulse {
    0%, 100% { transform: scale(1);    }
    50%       { transform: scale(1.4); }
}

.vmarker-hover {
    animation: vmarker-pulse .7s ease infinite;
}

/* ── Filtri ─────────────────────────────────────────────── */

.vfilter-btn {
    border: 1px solid var(--vigilog-border, #dee2e6);
    color: inherit;
    background: transparent;
}

.vfilter-btn.active {
    background: #a8c93f;
    border-color: #a8c93f;
    color: #000;
}

/* ── Bottone Naviga ──────────────────────────────────────── */

.vbtn-naviga {
    background: #F28C28;
    color: #fff;
    border: none;
    white-space: nowrap;
}

.vbtn-naviga:hover,
.vbtn-naviga:focus {
    background: #d97a1e;
    color: #fff;
}

/* ── Bottone Rispetto a te ───────────────────────────────── */

.vbtn-rispetto {
    border: 1px solid #3b82f6;
    color: #3b82f6;
    background: transparent;
    white-space: nowrap;
}

.vbtn-rispetto:hover,
.vbtn-rispetto:focus {
    background: rgba(59, 130, 246, .1);
    color: #3b82f6;
    border-color: #3b82f6;
}

/* ── Badge più vicino / card evidenziata ─────────────────── */

.vbadge-nearest {
    background: #0d9488;
    color: #fff;
}

.vcard-nearest {
    border-color: #0d9488 !important;
}

/* ── Card ───────────────────────────────────────────────── */

.vcard {
    transition: box-shadow .2s ease, border-color .2s ease;
}

.vcard:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* highlight da click marker → card */
@keyframes vcard-highlight-anim {
    0%   { box-shadow: 0 0 0 3px rgba(168,201,63,.8); }
    100% { box-shadow: none; }
}
.vcard-highlight {
    animation: vcard-highlight-anim .8s ease forwards;
}

/* pulse quando lo stato cambia tra refresh */
@keyframes vcard-changed-anim {
    0%   { background-color: rgba(168,201,63,.25); }
    100% { background-color: transparent; }
}
.vcard-changed {
    animation: vcard-changed-anim 1.2s ease forwards;
}

/* ── Badge ──────────────────────────────────────────────── */

#vigilog-widget .badge {
    font-size: 0.85rem;
}

#vigilog-widget .text-bg-success {
    background-color: #a8c93f !important;
}

#vigilog-widget .text-bg-danger {
    background-color: #dc3545 !important;
}

/* ── Mappa ──────────────────────────────────────────────── */

#vigilog-widget .border {
    border-color: var(--vigilog-border) !important;
}

/* ── Fullscreen mappa ────────────────────────────────────── */

#vigilog-map { position: relative; }

/* Classe applicata via JS su iOS (requestFullscreen non disponibile) */
.vmap-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999 !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

body.vmap-fs-active { overflow: hidden; }

/* Bottone di chiusura iniettato dentro la mappa in modalità CSS fullscreen */
#vmap-fs-close {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}