/* ─────────────────────────────────────────────────────────────────────────────────────────────────
   Diagramma di sito (SiteDiagramPanel) e i modali che apre.

   Sta in un foglio a se' e non nel blocco <style> di SiteMap.razor perche' il diagramma ha DUE case:
   il modale della pagina mappa e la pagina /sito/{code}. Il blocco di SiteMap lo renderizza solo la
   prima, quindi sulla scheda il contenitore non era piu' flex a tutta altezza, l'SVG collassava e il
   diagramma non si vedeva. Il link sta in Components/App.razor, quindi vale su ogni pagina.

   NON e' un file di CSS isolation di Blazor (SiteDiagramPanel.razor.css): quello marca con l'attributo
   di scope i soli elementi generati da Razor, mentre gran parte di questo markup lo crea D3 a runtime -
   l'SVG del diagramma e i popup del menu' apparato - e resterebbe senza stile.

   Le regole della MAPPA (marker, rettangoli sito, tab di pagina, elenco anagrafica) restano nel blocco
   <style> di SiteMap.razor: qui dentro ci sta solo il diagramma e cio' che il diagramma apre.
   ───────────────────────────────────────────────────────────────────────────────────────────────── */

/* ── Modale diagramma apparati ──────────────────────────────────────────────────────────────────── */
.site-diagram-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-diagram-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    width: 88vw;
    max-width: 1200px;
    height: 82vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* "A tutta pagina": il modal occupa l'intera viewport */
.site-diagram-modal.maximized {
    width: 100vw;
    height: 100vh;
    max-width: none;
    border-radius: 0;
}

/* ── La scheda /sito/{code} (PresentazioneDiagramma.PienaPagina) ────────────────────────────────────
   La pagina non ha ne' backdrop ne' cornice dell'applicazione: il diagramma E' la pagina. Il
   contenitore si ancora alla viewport con position:fixed invece di rincorrere l'altezza dei genitori,
   cosi' regge anche se un domani il layout gli mette qualcosa attorno. */
.fk-diagram-page {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
}

/* Riempie il contenitore invece della viewport: con le 100vw/100vh ereditate da .maximized la barra di
   scorrimento verticale del browser produrrebbe una barra ORIZZONTALE di troppo. */
.site-diagram-modal.site-diagram-pagina {
    width: 100%;
    height: 100%;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
}

.site-diagram-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 2px solid #0d6efd;
    background: #f8f9fa;
}

.site-diagram-body {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    background: #fbfcfe;
}

#site-diagram-svg {
    width: 100%;
    height: 100%;
    display: block;
    /* Pizzico e trascinamento li gestisce lo zoom D3: senza questa riga sul telefono il browser
       ingrandirebbe o scorrerebbe la PAGINA invece di muovere il grafo. */
    touch-action: none;
}

.site-diagram-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 8px 16px;
    border-top: 1px solid #dee2e6;
    font-size: 0.8em;
    color: #495057;
    background: #f8f9fa;
}

.site-diagram-legend .lg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.site-diagram-legend .sw {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.25);
}

/* ── Tab scheda sito (Diagramma / Note & Foto / Diario) ─────────────────────────────────────────── */
.scribe-tabs {
    display: flex;
    gap: 4px;
    padding: 6px 12px 0 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.scribe-tab {
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 6px 6px 0 0;
    font-size: 0.9em;
    font-weight: 500;
    color: #495057;
    cursor: pointer;
}

.scribe-tab:hover { background: #eef1f4; }

.scribe-tab.active {
    background: #fff;
    border-color: #dee2e6;
    border-bottom: 2px solid #fff;
    margin-bottom: -1px;
    color: #0d6efd;
    font-weight: 600;
}

.scribe-content {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fbfcfe;
}

.scribe-panel {
    flex: 1 1 auto;
    overflow: auto;
    padding: 16px;
}

/* Barra frequenze: striscia fissa sotto il diagramma, non ruba spazio all'SVG (flex 0 0 auto) */
.site-freq-bar {
    flex: 0 0 auto;
    border-top: 1px solid #dee2e6;
    background: #fff;
    padding-top: 2px;
}

.scribe-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.scribe-photo {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 6px;
    background: #fff;
}

.scribe-photo.is-bg {
    border-color: #0d6efd;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

.scribe-photo img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

.scribe-photo-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-top: 4px;
}

/* ── Popup azioni apparato nel diagramma (markup generato da D3, non da Razor) ──────────────────── */
.device-popup {
    position: absolute;
    z-index: 60;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
    padding: 8px 10px;
    min-width: 150px;
    overflow-y: auto;   /* se più alto del container (finestra piccola) scorre invece di tagliarsi */
}

.device-popup-title {
    font-size: 0.8em;
    font-weight: 600;
    color: #212529;
    margin-bottom: 6px;
}

/* Tipologia apparato sotto il titolo del menù: informazione di contorno, non un'intestazione. */
.device-popup-subtitle {
    font-size: 0.75em;
    font-weight: normal;
    color: #6c757d;
    margin-top: 1px;
}

.device-popup-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Menù contestuale apparato (al posto dei bottoni) */
.device-menu {
    display: flex;
    flex-direction: column;
    min-width: 178px;
}

.device-menu-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .32rem .5rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #212529;
    font-size: .82em;
    text-align: left;
    width: 100%;
    cursor: pointer;
}

.device-menu-item:hover { background: #eef2f7; }
.device-menu-item i { width: 1rem; text-align: center; color: #6c757d; }
.device-menu-item.danger { color: #dc3545; }
.device-menu-item.danger i { color: #dc3545; }
.device-menu-sep { height: 1px; background: #e9ecef; margin: .3rem 0; }
.device-menu-status { font-size: .78rem; font-weight: 600; padding: .1rem .4rem .3rem; white-space: nowrap; }

/* ── Modali History (ping / guasti) — riusano .site-diagram-backdrop ────────────────────────────── */
.history-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
    width: 780px;
    max-width: 94vw;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.history-body { padding: 14px 16px; overflow: auto; }

/* Attesa della pagina /sito/{code}: finche' il sito non e' risolto e il diagramma non e' caricato, la
   pagina sarebbe bianca - e una schermata vuota non si legge come "sto lavorando", si legge come "e'
   rotto". Centrata nella finestra perche' li' non c'e' nient'altro. */
.fk-diagram-attesa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: #495057;
}

/* ── Probe di banda on-demand (site-bwtest.js) ──────────────────────────────────────────────────────
   Pannello fisso nell'angolo del container, NON un popup ancorato al click come .device-popup: il test
   dura circa un minuto e l'operatore continua a guardare il diagramma nel frattempo. */
.bwtest-panel {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 65;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
    width: 300px;
    max-width: 90%;
    max-height: 70%;
    overflow-y: auto;
    font-size: 0.82em;
}

.bwtest-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
}

.bwtest-panel-title {
    font-weight: 600;
    color: #212529;
    font-size: 0.92em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bwtest-panel-close {
    border: 0;
    background: transparent;
    color: #6c757d;
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.bwtest-panel-close:hover { color: #212529; }

.bwtest-panel-body { padding: 8px 10px; }
.bwtest-panel-footer { padding: 6px 8px 8px; border-top: 1px solid #e9ecef; }

.bwtest-live { display: flex; align-items: center; gap: 10px; }
.bwtest-live-secs { font-weight: 600; color: #0d6efd; }

/* Pallino che pulsa mentre il test è in corso: stessa idea di .device-menu-status ma per il pannello. */
.bwtest-live-secs::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
    background: #0d6efd;
    animation: bwtestPulse 1.2s infinite;
}

.bwtest-live-rates { display: inline-flex; gap: 12px; color: #495057; }

@keyframes bwtestPulse {
    0% { opacity: 1; }
    50% { opacity: 0.25; }
    100% { opacity: 1; }
}

.bwtest-status-line { padding: 2px 0; font-weight: 600; }
.bwtest-status-ok { color: #198754; }
.bwtest-status-warn { color: #fd7e14; }
.bwtest-status-err { color: #dc3545; }

.bwtest-summary-row { padding: 2px 0; color: #212529; }
.bwtest-muted { color: #6c757d; }

/* Filo che separa il RISULTATO (banda/ping/CPU) dalle misure di CONTORNO che servono a non leggerlo male
   (pioggia, modulazione, errori di porta, duplex): sono due letture diverse dello stesso test, e in un
   elenco unico si confonderebbero. Compare solo se sotto c'è almeno una riga (site-bwtest.js). */
.bwtest-summary-sep { border-top: 1px solid #e9ecef; margin: 6px 0 4px; }

/* ── Diagramma da telefono ──────────────────────────────────────────────────────────────────────────
   Sul telefono il diagramma e' il grafo degli apparati a schermo intero, da muovere come una mappa.
   Dell'intestazione restano il codice del sito, gli allarmi (batteria, scaricatore), il bottone
   Guasti e la ✕ del modale; tab, legenda, barra frequenze e azioni sono marcati sdp-solo-desktop.
   "Telefono" = schermo stretto, oppure basso e a tocco (telefono girato in orizzontale): un tablet
   resta col diagramma da computer. */
.sdp-solo-mobile { display: none !important; }

@media (max-width: 767.98px), (max-height: 500px) and (pointer: coarse) {
    .sdp-solo-desktop,
    .site-freq-bar,
    .site-diagram-legend { display: none !important; }

    .sdp-solo-mobile {
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

    /* Il modale aperto dalla mappa: da telefono non c'e' spazio per una cornice attorno. */
    .site-diagram-modal {
        width: 100vw;
        height: 100dvh;
        max-width: none;
        border-radius: 0;
    }

    .site-diagram-header {
        padding: 4px 8px;
        gap: 6px;
    }

    .site-diagram-header > div:first-child { min-width: 0; }

    .scribe-panel { padding: 8px; }
}