/* ============================================================
   IWØRQH - ADS-B SPECIAL MONITOR (Configurazione Consolidata)
   ============================================================ */

/* 1. SPOSTAMENTO COMANDI MAPPA (ZOOM) IN BASSO A SINISTRA */
.leaflet-control-container .leaflet-top.leaflet-left {
    top: auto !important;
    bottom: 25px !important;
    left: 15px !important;
    display: block !important;
}

.leaflet-top.leaflet-right { display: block !important; }

.leaflet-control-zoom {
    margin: 0 !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.7) !important;
}

.leaflet-bar a {
    background-color: rgba(15, 15, 15, 0.95) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 20px !important;
}

/* 2. FIX PULSE E MARKER NIBBIO (Centratura Matematica) */
.nibbio-marker-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
}

.nibbio-dot, .nibbio-pulse {
    border-radius: 50% !important;
    box-sizing: border-box !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.nibbio-dot {
    width: 10px !important;
    height: 10px !important;
    background-color: #ef4444 !important;
    border: 2px solid #fff;
    box-shadow: 0 0 10px #ef4444;
    z-index: 5;
}

.nibbio-pulse {
    width: 10px !important;
    height: 10px !important;
    background-color: rgba(239, 68, 68, 0.6) !important;
    z-index: 4;
    animation: nibbio-radar-beam 2s infinite ease-out;
}

@keyframes nibbio-radar-beam {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

/* 3. HUD NIBBIO (ALTO SINISTRA) - LAYOUT A COLONNA */
#nibbio-hud {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 290px;
    z-index: 900;
    background: rgba(15, 15, 15, 0.9);
    backdrop-filter: blur(8px);
    padding: 12px 16px;
    border-radius: 4px;
    color: white;
    border-left: 5px solid #ef4444 !important; 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* 3. HUD NIBBIO - DIMENSIONE GENERALE */
#nibbio-hud {
    /* ... tue altre regole ... */
    font-size: 0.8rem !important; /* Riduce la base di tutto il testo (default solitamente è 1rem) */
}

/* 5. TITOLO */
.hud-title { 
    font-weight: bold; 
    font-size: 0.85rem !important; /* Un pochino più piccolo del precedente 0.9rem */
    text-transform: uppercase; 
}

/* AGGIUNGI O MODIFICA: Dati tra parentesi (ft, fpm) */
.tech-val {
    font-size: 0.8rem !important; /* Rende le unità di misura molto discrete */
    opacity: 0.7; /* Le rende leggermente più grigie per dare importanza al dato principale in metri */
    margin-left: 4px;
}


/* 4. LOGICA NIBBIO INTELLIGENTE */
.nibbio-reduce {
    opacity: 0.9; /* Leggermente più visibile */
    max-height: 100px !important; /* Aumentato per far stare Titolo + Tasto Archivio */
    overflow: hidden;
}

/* Nascondiamo i dati telemetrici ma NON il footer */
.nibbio-reduce .hud-content-row,
.nibbio-reduce .secondary-data {
    display: none !important;
    visibility: hidden !important;
}

/* Assicuriamoci che il footer sia visibile nel reduce */
.nibbio-reduce .hud-footer-action {
    display: block !important;
    margin-top: 5px;
}



/* 5. STILI INTERNI HUD E HEADER */
.hud-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important; /* Spinge il badge a destra */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
    margin-bottom: 5px;
}

.hud-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.radar-mini-icon {
    position: relative !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hud-title { 
    font-weight: bold; 
    font-size: 0.9rem; 
    text-transform: uppercase; 
}

/* 7. BADGE E STATI */
.hud-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: bold;
}
.badge-vfr { background: #2ecc71 !important; color: #fff; }
.badge-ground { background: #333 !important; color: #aaa; }
.badge-lost { background: #f39c12 !important; animation: blink-orange 1s infinite; }

/* 8. FOOTER ARCHIVIO (Tasto in fondo all'HUD) */
.hud-footer-action {
    margin-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 10px;
}

.hud-archive-btn {
    width: 100%;
    background: rgba(241, 196, 15, 0.1);
    border: 1px solid rgba(241, 196, 15, 0.3);
    color: #f1c40f;
    padding: 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.hud-archive-btn:hover {
    background: #f1c40f;
    color: #000;
    box-shadow: 0 0 10px rgba(241, 196, 15, 0.5);
}

/* 9. TOOLTIP RADAR (Label dinamica) */
.radar-label {
    /* Rimosso il margin-top: 15px che sballava l'allineamento verticale */
    margin: 0 !important;
    background: transparent !important; 
    border: none !important;            
    color: #2ecc71 !important; /* Colore verde brillante per alta visibilità */
    font-family: 'Courier New', monospace !important;
    font-size: 13px !important;
    font-weight: bold !important;
    padding: 0 0 0 30px !important; /* Spazio a sinistra per far entrare la linea \____ */
    box-shadow: none !important;
    text-shadow: 2px 2px 3px #000, -1px -1px 0 #000;
    white-space: nowrap !important;
    pointer-events: none !important;
    position: relative;
}

.radar-tag {
    margin-left: 10px !important; /* Spinge il testo a destra, allontanandolo dalla linea */
}

/* Nascondiamo il triangolino di default di Leaflet */
.radar-label::before { display: none !important; }

/* La linea spezzata (\____) che collega il marker al testo */
.radar-label::after {
    content: "";
    position: absolute;
    /* Ancorata al centro esatto dell'altezza del testo */
    top: 50%; 
    left: 5px; /* Partenza leggermente staccata dal pallino per eleganza */
    width: 20px;
    height: 12px;
    border-left: 1.5px solid #2ecc71;
    border-bottom: 1.5px solid #2ecc71;
    /* La trasformazione tira il box in alto e a destra, creando l'effetto \___ */
    transform: translateY(-100%) skewX(45deg); 
    opacity: 0.8;
}

/* 10. FIX ICONA SVG NIBBIO E MARKER MAPPA */
.nibbio-svg-icon, .nibbio-marker-node {
    background: none !important;
    border: none !important;
}


/* Stile Tasto Back to Live */
.back-live-style {
    position: absolute;
    bottom: 25px;
    right: 15px;
    z-index: 1000;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 18px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.back-live-style:hover {
    background: #ef4444;
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

/* Impedisce ai controlli Leaflet di coprire l'header */
.leaflet-top, 
.leaflet-bottom {
    z-index: 400 !important;
}

/* Regoliamo anche il tasto Back to Live */
.back-live-style {
    z-index: 800 !important;
}

/* Se la mappa dovesse ancora sovrapporsi, limitiamo il contenitore */
.map-card {
    z-index: 1;
    position: relative;
}

/* Animazioni e Mobile */
@keyframes blink-orange { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }


/* Limita l'altezza della sezione logbook e attiva lo scroll */
.gap-section {
    max-height: 450px; 
    overflow-y: auto;
    border: 1px solid #333;
    border-radius: 8px;
    /* Opzionale: stile per la scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #ef4444 #1a1a1a;
}

/* Blocca l'intestazione della tabella in alto mentre si scorre */
.gap-table thead th {
    position: sticky;
    top: 0;
    background-color: #1a1a1a; /* Deve essere lo stesso colore di sfondo della tua card */
    z-index: 10;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

/* Riga separatrice per i giorni nel logbook */
.date-group-row {
    background-color: #252525 !important;
    font-weight: bold;
    color: var(--accent);
    text-align: left;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.date-group-row td {
    padding: 8px 15px !important;
    border-left: 3px solid var(--accent);
}

/* Contenitore per il tasto carica altro */
.logbook-footer {
    text-align: center;
    padding: 15px;
    background: #1a1a1a;
}

/* Dimensioni minime per non tagliare i nomi lunghi dei mesi */
#filter-month {
    min-width: 120px; /* Spazio abbondante per "Settembre" e "Novembre" */
}

#filter-year {
    min-width: 80px;  /* Spazio sufficiente per l'anno */
}

/* Assicuriamoci che il selettore generale abbia il giusto padding */
.nibbio-select {
    background: #252525;
    color: #fff;
    border: 1px solid #444;
    padding: 6px 12px; /* Un po' più di respiro interno */
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
    /* Evita che il testo vada a capo o venga troncato brutalmente */
    white-space: nowrap; 
    text-overflow: ellipsis;
}

.nibbio-select:hover {
    border-color: var(--accent);
}

.logbook-controls {
    display: flex;
    gap: 10px;
}

@media (max-width: 768px) {
    #nibbio-hud, #club-hud {
        position: relative !important;
        top: 10px !important;
        left: 10px !important;
        right: 10px !important;
        width: calc(100% - 20px) !important; 
        margin: 0 0 10px 0 !important;
        box-sizing: border-box !important;
    }
    .hud-title { font-size: 0.8rem; }
    .hud-header { gap: 8px !important; }
}