/*
    GESTIONESEDI — TEMA (stile UnixProject, docs/STACK_TECNOLOGICO_BARCI.md §6.7)
    Bootstrap 5.3 + token --up-* (colori, misure) e classi ERP compatte, centralizzate qui
    invece che ripetute nei componenti come in UnixProject. Solo tema chiaro (SPECIFICHE D11).
*/
:root {
    /* Palette UnixProject */
    --up-primary: #6366f1;
    --up-primary-soft: #eef2ff;
    --up-bg-soft: #f8fafc;
    --up-sidebar-bg: #ffffff;
    --up-topbar-bg: #ffffff;
    --up-text: #1e293b;
    --up-muted: #64748b;
    --up-border-color: #e2e8f0;
    --up-success-bg: #ecfdf5;
    --up-success-text: #059669;
    --up-warning-bg: #fffbeb;
    --up-warning-text: #d97706;
    --up-danger-bg: #fef2f2;
    --up-danger-text: #dc2626;
    --up-info-bg: #eff6ff;
    --up-info-text: #2563eb;
    /* Misure del layout */
    --up-sidebar-width: 260px;
    --up-sidebar-collapsed: 72px;
    --up-topbar-height: 64px;
    /* Ombre */
    --up-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --up-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* Elenchi ERP */
    --erp-dark: #002d5a;
    --erp-primary: #004080;
    --erp-row-selected: #eef4ff;
    /* Bootstrap allineato ai token */
    --bs-primary: var(--up-primary);
    --bs-primary-rgb: 99, 102, 241;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-color: var(--up-text);
    --bs-body-bg: var(--up-bg-soft);
    --bs-border-color: var(--up-border-color);
}

html, body { height: 100%; }
body { background-color: var(--up-bg-soft); color: var(--up-text); }

.btn-primary {
    --bs-btn-bg: var(--up-primary); --bs-btn-border-color: var(--up-primary);
    --bs-btn-hover-bg: #4f46e5; --bs-btn-hover-border-color: #4f46e5;
    --bs-btn-active-bg: #4338ca; --bs-btn-active-border-color: #4338ca;
}
.btn-outline-primary {
    --bs-btn-color: var(--up-primary); --bs-btn-border-color: var(--up-primary);
    --bs-btn-hover-bg: var(--up-primary); --bs-btn-hover-border-color: var(--up-primary);
}

/* ---------------------------------------------------------------- Guscio */
.app-shell { display: flex; min-height: 100vh; }
.app-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.app-content { flex: 1; overflow: auto; padding: 1rem 1.25rem; }
.app-anon { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }

/* ---------------------------------------------------------------- Sidebar */
.sidebar-wrapper {
    width: var(--up-sidebar-width);
    flex-shrink: 0;
    background: var(--up-sidebar-bg);
    border-right: 1px solid var(--up-border-color);
    display: flex;
    flex-direction: column;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-x: hidden;
}
.sidebar-brand {
    height: var(--up-topbar-height);
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0 0.6rem 0 1rem;
    border-bottom: 1px solid var(--up-border-color);
    font-weight: 700; font-size: 1.05rem; color: var(--up-primary);
    white-space: nowrap;
}
.sidebar-brand .brand-secondaria { color: var(--up-text); }
/* Pulsante che riduce o espande il menu, nella riga del marchio (niente topbar). */
.sidebar-pulsante {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem;
    border: 1px solid var(--up-border-color); border-radius: 0.5rem; background: #fff; color: var(--up-muted); font-size: 0.85rem;
}
.sidebar-pulsante:hover { background: var(--up-bg-soft); color: var(--up-primary); }
.sidebar-pulsante:focus-visible { outline: 2px solid var(--up-primary); outline-offset: 1px; }
.sidebar-pulsante .icona-espandi { display: none; }
.sidebar-wrapper .nav { padding: 0.5rem; flex: 1; overflow-y: auto; flex-wrap: nowrap; }
.sidebar-wrapper .nav-section {
    font-size: 0.65rem; letter-spacing: 0.5px; font-weight: 600;
    color: var(--up-muted); padding: 0.9rem 0.75rem 0.35rem;
}
.sidebar-wrapper .nav-link {
    display: flex; align-items: center; gap: 0.6rem;
    color: var(--up-text); font-size: 0.875rem;
    border-radius: 0.5rem; padding: 0.5rem 0.75rem; white-space: nowrap;
}
.sidebar-wrapper .nav-link i { font-size: 1.05rem; color: var(--up-muted); }
.sidebar-wrapper .nav-link:hover { background: var(--up-bg-soft); }
.sidebar-wrapper .nav-link.active { background: var(--up-primary-soft); color: var(--up-primary); font-weight: 600; }
.sidebar-wrapper .nav-link.active i { color: var(--up-primary); }
/* Utente collegato in fondo al menu: nome (email) e menu con profilo ed Esci. */
.sidebar-utente { padding: 0.5rem; border-top: 1px solid var(--up-border-color); }
.sidebar-utente-pulsante {
    display: flex; align-items: center; gap: 0.6rem; width: 100%; min-width: 0; border: 0; background: none; text-align: left;
    color: var(--up-text); font-size: 0.8rem; border-radius: 0.5rem; padding: 0.5rem 0.75rem;
}
.sidebar-utente-pulsante:hover, .sidebar-utente-pulsante[aria-expanded="true"] { background: var(--up-bg-soft); }
.sidebar-utente-pulsante:focus-visible { outline: 2px solid var(--up-primary); outline-offset: -2px; }
.sidebar-utente-pulsante .bi { font-size: 1.15rem; color: var(--up-muted); }
.sidebar-utente-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 768px) {
    /* Il menu resta fermo mentre la pagina scorre: pulsante in alto e utente in basso sempre visibili.
       Il livello lo tiene sopra il contenuto (il menu dell'utente, a menu ridotto, esce dai 72 px) e
       sotto pannelli, finestre e vista espansa delle planimetrie. */
    .sidebar-wrapper { position: sticky; top: 0; z-index: 1025; height: 100vh; height: 100dvh; }
    .sidebar-wrapper.collapsed { width: var(--up-sidebar-collapsed); }
    .sidebar-wrapper.collapsed .sidebar-full-logo,
    .sidebar-wrapper.collapsed .nav-label { display: none !important; }
    .sidebar-wrapper.collapsed .sidebar-brand { justify-content: center; padding: 0; }
    .sidebar-wrapper.collapsed .sidebar-pulsante .icona-riduci { display: none; }
    .sidebar-wrapper.collapsed .sidebar-pulsante .icona-espandi { display: inline; }
    .sidebar-wrapper.collapsed .sidebar-utente-pulsante { justify-content: center; padding-left: 0; padding-right: 0; }
    .sidebar-wrapper.collapsed .sidebar-utente-pulsante::after { display: none; }
    .sidebar-wrapper.collapsed .sidebar-utente-pulsante .bi { font-size: 1.3rem; }
    .sidebar-wrapper.collapsed .nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
    .sidebar-wrapper.collapsed .nav-link i { font-size: 1.3rem; }
    .sidebar-backdrop { display: none !important; }
}

@media (max-width: 767.98px) {
    .sidebar-wrapper {
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 1045;
        width: 280px; max-width: 80vw;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }
    .sidebar-wrapper.show { transform: translateX(0); box-shadow: var(--up-shadow-md); }
    .sidebar-backdrop {
        position: fixed; inset: 0; z-index: 1040;
        background: rgba(15, 23, 42, 0.4);
        display: none;
    }
    .sidebar-backdrop.show { display: block; }
    .app-content { padding: 0.75rem; }
}

/* ---------------------------------------------------------------- Barra per mobile
   Niente topbar (richiesta dell'utente del 2026-09-30): lo spazio va alle viste. Sotto 768 px
   la sidebar è a comparsa e una barra sottile ha il pulsante per aprirla. */
.barra-mobile { display: none; }
.barra-mobile-titolo { font-size: 0.95rem; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767.98px) {
    .barra-mobile {
        position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: 0.75rem;
        height: 3rem; padding: 0 0.75rem; background: var(--up-topbar-bg);
        border-bottom: 1px solid var(--up-border-color); box-shadow: var(--up-shadow-sm);
    }
}

/* ---------------------------------------------------------------- Card e badge */
.up-card { background: #fff; border: 1px solid var(--up-border-color); border-radius: 0.75rem; box-shadow: var(--up-shadow-sm); }
.up-badge-success { background: var(--up-success-bg); color: var(--up-success-text); }
.up-badge-warning { background: var(--up-warning-bg); color: var(--up-warning-text); }
.up-badge-danger  { background: var(--up-danger-bg);  color: var(--up-danger-text); }
.up-badge-info    { background: var(--up-info-bg);    color: var(--up-info-text); }

/* ---------------------------------------------------------------- Elenchi ERP (UnixProject) */
.erp-app-layout { display: flex; flex-direction: column; gap: 0.5rem; }
.erp-filter-bar { background: #fff; border: 1px solid var(--up-border-color); border-radius: 0.5rem; padding: 0.5rem; }
.erp-grid-wrapper { background: #fff; border: 1px solid var(--up-border-color); border-radius: 0.5rem;
                    box-shadow: var(--up-shadow-md); overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.erp-scroll-area { overflow: auto; scrollbar-width: thin; }
.erp-grid-wrapper .table thead { position: sticky; top: 0; z-index: 2; background: #fff; }
.erp-grid-wrapper .table thead th {
    background: #f8fafc; border-bottom: 2px solid var(--up-border-color);
    font-size: 0.7rem; font-weight: 700; color: var(--up-muted);
    text-transform: uppercase; padding: 0.35rem 0.5rem; white-space: nowrap;
}
.form-erp-label { font-size: 0.62rem; font-weight: 700; color: #475569; text-transform: uppercase; margin-bottom: 0.1rem; }
.form-erp-control { border-color: #cbd5e1; font-size: 0.78rem; padding: 0.2rem 0.5rem; height: 28px; }
.kpi-card {
    background: #fff; border: 1px solid var(--up-border-color); border-left: 3px solid var(--erp-primary);
    border-radius: 4px; padding: 0.35rem 0.6rem; cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kpi-card:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }
.kpi-title { font-size: 0.6rem; font-weight: 700; color: var(--up-muted); text-transform: uppercase; line-height: 1; }
.kpi-val { font-size: 1rem; font-weight: 800; color: var(--erp-dark); line-height: 1.2; }
.selectable-row { cursor: pointer; }
.selectable-row.table-active, .selectable-row.table-active > * { --bs-table-bg-state: var(--erp-row-selected); }
.extra-small { font-size: 0.7rem; }

/* ---------------------------------------------------------------- Accesso */
.login-card { width: 100%; max-width: 26rem; }
.login-card .brand { font-weight: 800; font-size: 1.4rem; color: var(--up-primary); }
.login-card .brand span { color: var(--up-text); }

/* ---------------------------------------------------------------- Dispositivi (DispositiviE) */
.vista-icona {
    width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; display: inline-flex; align-items: center; justify-content: center;
    background: var(--up-primary-soft); color: var(--up-primary); font-size: 1.15rem;
}

/* KPI come filtri rapidi: stessa card ERP con bordo sinistro, più icona e numero in evidenza */
.griglia-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.5rem; }
.kpi-tile {
    --kpi-colore: var(--erp-primary); --kpi-sfondo: var(--up-primary-soft);
    position: relative; display: flex; align-items: center; gap: 0.65rem; text-align: left;
    padding: 0.6rem 0.75rem; background: #fff; border: 1px solid var(--up-border-color);
    border-left: 3px solid var(--kpi-colore); border-radius: 0.5rem; box-shadow: var(--up-shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.kpi-tile:hover { transform: translateY(-1px); box-shadow: var(--up-shadow-md); }
.kpi-tile:focus-visible { outline: 2px solid var(--kpi-colore); outline-offset: 2px; }
.kpi-tile.active { background: var(--kpi-sfondo); border-color: var(--kpi-colore); box-shadow: 0 0 0 1px var(--kpi-colore); }
.kpi-tile-icona {
    flex-shrink: 0; width: 2.1rem; height: 2.1rem; border-radius: 0.55rem; display: inline-flex; align-items: center; justify-content: center;
    background: var(--kpi-sfondo); color: var(--kpi-colore); font-size: 1.05rem;
}
.kpi-tile.active .kpi-tile-icona { background: #fff; }
.kpi-tile-val { font-size: 1.35rem; font-weight: 800; color: var(--erp-dark); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-tile-filtro { position: absolute; top: 0.4rem; right: 0.5rem; font-size: 0.7rem; color: var(--kpi-colore); }
.kpi-primario { --kpi-colore: var(--up-primary); --kpi-sfondo: var(--up-primary-soft); }
.kpi-avviso { --kpi-colore: var(--up-warning-text); --kpi-sfondo: var(--up-warning-bg); }
.kpi-pericolo { --kpi-colore: var(--up-danger-text); --kpi-sfondo: var(--up-danger-bg); }
.kpi-info { --kpi-colore: var(--up-info-text); --kpi-sfondo: var(--up-info-bg); }
.kpi-neutro { --kpi-colore: var(--up-muted); --kpi-sfondo: #f1f5f9; }

/* Riepilogo per tipo */
.griglia-riepilogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 0.5rem; }
.scheda-tipo { border: 1px solid var(--up-border-color); border-radius: 0.5rem; padding: 0.55rem 0.7rem; background: var(--up-bg-soft); }
.scheda-tipo.totale { background: var(--up-primary-soft); border-color: #c7d2fe; }
.scheda-tipo-icona { color: var(--up-primary); }
.barra-os { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--up-border-color); }
.barra-os-11 { background: var(--up-primary); }
.barra-os-10 { background: #f59e0b; }
.riepilogo-righe { display: grid; grid-template-columns: 1fr auto; column-gap: 0.5rem; row-gap: 0.1rem; color: var(--up-muted); }
.riepilogo-righe strong { color: var(--up-text); text-align: right; font-variant-numeric: tabular-nums; }
.riepilogo-righe .bi-circle-fill { font-size: 0.45rem; vertical-align: middle; }

/* Ricerca con suggerimenti ed etichette dei filtri */
.tipo-ricerca { max-width: 8.5rem; background-color: var(--up-bg-soft); }
.campo-ricerca { padding-left: 1.75rem; }
.campo-ricerca-icona { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--up-muted); font-size: 0.75rem; pointer-events: none; z-index: 5; }
.menu-suggerimenti {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1050; margin-top: 2px; padding: 0.25rem;
    background: #fff; border: 1px solid var(--up-border-color); border-radius: 0.5rem; box-shadow: var(--up-shadow-md);
    max-height: 22rem; overflow-y: auto;
}
.menu-suggerimenti-voce {
    display: grid; grid-template-columns: auto minmax(0, auto) minmax(0, 1fr); align-items: baseline; gap: 0.5rem;
    width: 100%; padding: 0.35rem 0.5rem; border: 0; border-radius: 0.35rem; background: none; text-align: left; font-size: 0.8rem;
}
.menu-suggerimenti-voce:hover { background: var(--up-primary-soft); }
.filtro-attivo {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.3rem 0.15rem 0.6rem;
    background: var(--up-primary-soft); color: var(--up-primary); border: 1px solid #c7d2fe; border-radius: 999px; font-size: 0.72rem; font-weight: 600;
}
.filtro-attivo .btn-close { width: 0.45em; height: 0.45em; padding: 0.3em; }

/* Intestazione della tabella: titolo e conteggio, oppure la barra delle azioni sui
   selezionati. Altezza fissa, così la selezione non sposta la tabella. */
.intestazione-tabella {
    display: flex; align-items: center; gap: 0.75rem; height: 3rem; padding: 0 0.75rem 0 1rem;
    border-bottom: 1px solid var(--up-border-color); transition: background-color 0.15s ease;
}
.intestazione-tabella.con-selezione { background: var(--up-primary-soft); }
.barra-azioni { display: flex; align-items: center; gap: 1rem; flex-grow: 1; min-width: 0; white-space: nowrap; }
.barra-azioni .btn, .barra-azioni .form-control { height: 28px; padding-top: 0; padding-bottom: 0; font-size: 0.78rem; }
.barra-azioni-conteggio {
    min-width: 1.5rem; height: 1.5rem; padding: 0 0.4rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--up-primary); color: #fff; font-weight: 700; font-size: 0.75rem;
}
.barra-azioni-nota { width: 17rem; flex-shrink: 0; }

/* Tabella */
/* Altezza della tabella: la finestra meno intestazione, riquadri, riepilogo e filtri. Misurata senza topbar
   (2026-09-30): a 1632x903 la tabella inizia a 305 px, sotto restano bordo e margine; la pagina non scorre. */
.dispositivi-scroll { max-height: calc(100vh - 20.25rem); min-height: 10rem; }
.tabella-dispositivi { font-size: 0.78rem; }
.tabella-dispositivi > :not(caption) > * > * { padding: 0.4rem 0.55rem; }
.tabella-dispositivi thead th { vertical-align: middle; }
.tabella-dispositivi th.ordinabile { cursor: pointer; user-select: none; }
.tabella-dispositivi th.ordinabile:hover, .tabella-dispositivi th.ordinata { color: var(--up-primary); }
.tabella-dispositivi .icona-ordina { opacity: 0.35; font-size: 0.65rem; }
.tabella-dispositivi th.ordinabile:hover .icona-ordina { opacity: 0.8; }
.tabella-dispositivi tbody tr { cursor: default; }
.tabella-dispositivi.con-selezione tbody tr { cursor: pointer; user-select: none; }
.tabella-dispositivi tbody tr > * { background-color: #fff; }
.tabella-dispositivi tbody tr:hover > * { background-color: #f5f7ff; }
.tabella-dispositivi tbody tr.riga-selezionata > * { background-color: var(--erp-row-selected); }
/* PC con l'ultimo file JSON non leggibile: giallo, anche quando è selezionato (bordo a sinistra). */
.tabella-dispositivi tbody tr.riga-file-non-valido > * { background-color: #fef9c3; }
.tabella-dispositivi tbody tr.riga-file-non-valido:hover > * { background-color: #fef08a; }
.tabella-dispositivi tbody tr.riga-file-non-valido.riga-selezionata > * { background-color: #fde68a; }
.tabella-dispositivi tbody tr.riga-file-non-valido > .colonna-fissa { box-shadow: inset 3px 0 0 var(--up-warning-text), inset -1px 0 0 var(--up-border-color); }
.tabella-dispositivi.con-selezione tbody tr.riga-file-non-valido > .colonna-fissa { box-shadow: inset -1px 0 0 var(--up-border-color); }
.tabella-dispositivi.con-selezione tbody tr.riga-file-non-valido > .colonna-selezione { box-shadow: inset 3px 0 0 var(--up-warning-text); }
.icona-file-non-valido { color: var(--up-warning-text); cursor: help; }
.tabella-dispositivi tbody tr.riga-dettaglio > * { box-shadow: inset 0 1px 0 var(--up-primary), inset 0 -1px 0 var(--up-primary); }
.tabella-dispositivi .cella-testo { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Colonne ridimensionabili (colonne.js, 2026-10-06): maniglia sul bordo destro dell'intestazione; con le
   larghezze fisse ogni cella si accorcia con "…" (testo intero al passaggio del mouse). */
.tabella-dispositivi thead th:not(.colonna-fissa):not(.colonna-selezione) { position: relative; }
.maniglia-colonna { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 4; touch-action: none; }
.maniglia-colonna::after { content: ''; position: absolute; top: 25%; bottom: 25%; left: 3px; width: 2px; border-radius: 1px; background: transparent; }
th:hover > .maniglia-colonna::after { background: var(--up-border-color); }
.maniglia-colonna:hover::after, body.ridimensiona-colonna .maniglia-colonna::after { background: var(--up-primary); }
body.ridimensiona-colonna, body.ridimensiona-colonna * { cursor: col-resize !important; user-select: none !important; }
.tabella-dispositivi.larghezze-fisse th, .tabella-dispositivi.larghezze-fisse td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabella-dispositivi.larghezze-fisse .cella-testo, .tabella-dispositivi.larghezze-fisse .cella-nota { max-width: none; }
.tabella-dispositivi.larghezze-fisse .colonna-fissa .d-flex { min-width: 0; }
.tabella-dispositivi.larghezze-fisse .colonna-fissa .fw-semibold { overflow: hidden; text-overflow: ellipsis; }
.tabella-dispositivi.larghezze-fisse .maniglia-colonna { right: 0; }
.tabella-dispositivi .cella-tag { white-space: nowrap; }
.tabella-dispositivi .cella-nota { max-width: 14rem; }
.tabella-dispositivi .colonna-selezione { width: 2.25rem; min-width: 2.25rem; position: sticky; left: 0; z-index: 1; text-align: center; }
.tabella-dispositivi .colonna-fissa { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 var(--up-border-color); }
.tabella-dispositivi.con-selezione .colonna-fissa { left: 2.25rem; }
.tabella-dispositivi thead .colonna-fissa, .tabella-dispositivi thead .colonna-selezione { z-index: 3; }
.tabella-dispositivi tbody tr.riga-selezionata .colonna-selezione { box-shadow: inset 3px 0 0 var(--up-primary); }
.barra-disco { height: 4px; width: 3.5rem; background: var(--up-border-color); border-radius: 2px; overflow: hidden; margin-top: 3px; }
.barra-disco-pieno { height: 100%; border-radius: 2px; }
.badge-tipo { background: #f1f5f9; color: #334155; font-weight: 600; }
.testo-nota { display: inline-block; max-width: 13rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* Tag modificabili inline */
.tag-inline { border: 1px dashed transparent; background: none; padding: 0.05rem 0.25rem; border-radius: 0.35rem; font-size: inherit; max-width: 100%; }
.tag-inline:hover, .tag-inline:focus-visible { border-color: var(--up-primary); background: #fff; }
.tag-inline.vuoto { color: var(--up-muted); opacity: 0; }
tr:hover .tag-inline.vuoto, .tag-inline.vuoto:focus-visible, .pannello-dispositivo .tag-inline.vuoto { opacity: 1; }
.tag-inline-input { min-width: 9rem; height: 26px; font-size: 0.75rem; }

/* Pannello di dettaglio */
.pannello-dispositivo { --bs-offcanvas-width: min(34rem, 100vw); visibility: visible; }
.pannello-dispositivo:focus { outline: none; }
.pannello-icona {
    flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 0.65rem; display: inline-flex; align-items: center; justify-content: center;
    background: var(--up-primary-soft); color: var(--up-primary); font-size: 1.25rem;
}
.sezione-titolo { font-size: 0.65rem; font-weight: 700; color: var(--up-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.35rem; }
.griglia-statistiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.griglia-statistiche > div { background: var(--up-bg-soft); border: 1px solid var(--up-border-color); border-radius: 0.5rem; padding: 0.45rem 0.6rem; min-width: 0; }
.griglia-statistiche span { display: block; font-size: 0.65rem; font-weight: 700; color: var(--up-muted); text-transform: uppercase; }
.griglia-statistiche strong { display: block; font-size: 0.8rem; overflow-wrap: anywhere; }
.elenco-dettagli { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0.3rem 0.75rem; font-size: 0.8rem; }
.elenco-dettagli dt { color: var(--up-muted); font-weight: 500; }
.elenco-dettagli dd { margin: 0; overflow-wrap: anywhere; }
.elenco-programmi li { display: flex; flex-direction: column; padding: 0.3rem 0; border-bottom: 1px solid var(--up-border-color); font-size: 0.8rem; }
.elenco-programmi li:last-child { border-bottom: 0; }
.elenco-programmi span { color: var(--up-muted); font-size: 0.72rem; }
.testo-nota-completo { white-space: pre-wrap; overflow-wrap: anywhere; }
.altro-pc {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: 0.5rem; text-align: left;
    padding: 0.35rem 0.6rem; border: 1px solid var(--up-border-color); border-radius: 0.5rem; background: #fff; font-size: 0.8rem;
}
.altro-pc:hover { border-color: var(--up-primary); background: var(--up-primary-soft); }
.min-w-0 { min-width: 0; }

/* ---------------------------------------------------------------- Account e ruoli (AccountB) */
.pannello-laterale { --bs-offcanvas-width: min(34rem, 100vw); visibility: visible; }
.pannello-laterale:focus { outline: none; }
.nav-pills .nav-link { padding: 0.3rem 0.75rem; font-size: 0.82rem; }
.tabella-dispositivi tbody tr.riga-disattivata > * { color: var(--up-muted); }
.scelta-ruolo, .scelta-permesso {
    display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.4rem 0.6rem; margin: 0;
    border: 1px solid var(--up-border-color); border-radius: 0.5rem; background: #fff; font-size: 0.8rem; cursor: pointer;
}
.scelta-ruolo .form-check-input, .scelta-permesso .form-check-input { margin-top: 0.15rem !important; flex-shrink: 0; }
.scelta-ruolo:hover, .scelta-permesso:hover { border-color: #c7d2fe; }
.scelta-ruolo.scelto, .scelta-permesso.scelto { background: var(--up-primary-soft); border-color: #c7d2fe; }
.categoria-permessi { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.6rem; }
.griglia-ruoli { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.6rem; }
.scheda-ruolo { display: flex; flex-direction: column; padding: 0.75rem 0.85rem; }
.scheda-ruolo.di-sistema { border-color: #fecaca; background: #fffafa; }
.scheda-ruolo-icona {
    width: 2rem; height: 2rem; border-radius: 0.55rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: var(--up-primary-soft); color: var(--up-primary);
}
.scheda-ruolo.di-sistema .scheda-ruolo-icona { background: var(--up-danger-bg); color: var(--up-danger-text); }
.riepilogo-categorie { display: flex; flex-wrap: wrap; gap: 0.25rem; }

/* ---------------------------------------------------------------- Licenze (LicenzeE) */
.kpi-successo { --kpi-colore: var(--up-success-text); --kpi-sfondo: var(--up-success-bg); }
/* Come .dispositivi-scroll: misurata senza topbar (2026-09-30), la tabella inizia a 256 px. */
.licenze-scroll { max-height: calc(100vh - 17.25rem); min-height: 10rem; }
.tabella-licenze tbody tr.riga-cliccabile { cursor: pointer; }
.tabella-licenze .cella-pacchetto { max-width: 20rem; }
/* Accessi (posti) del pacchetto nell'elenco: usati a bordo pieno, liberi tratteggiati, trovati dalla ricerca evidenziati. */
.tabella-licenze .cella-accessi { min-width: 11rem; max-width: 24rem; }
.accessi-pacchetto { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }
.chip-accesso {
    display: inline-block; max-width: 10rem; padding: 0 0.45rem; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff;
    font-size: 0.7rem; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip-accesso .conta { color: var(--up-muted); margin-left: 0.2rem; }
.chip-accesso.libero { border-style: dashed; background: transparent; color: var(--up-muted); }
.chip-accesso.trovato { border-color: var(--up-primary); background: var(--up-primary-soft); color: var(--up-text); font-weight: 600; }
.accessi-altri { font-size: 0.7rem; color: var(--up-muted); }
.tabella-licenze .nome-pacchetto { font-size: inherit; color: var(--up-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabella-licenze .nome-pacchetto:hover { color: var(--up-primary); }
.barra-posti { height: 5px; width: 4.5rem; border-radius: 3px; background: var(--up-border-color); overflow: hidden; flex-shrink: 0; }
.barra-posti-piena { height: 100%; background: var(--up-primary); border-radius: 3px; }
.barra-posti-piena.piena { background: var(--up-success-text); }
.barra-posti-piena.esaurita { background: var(--up-danger-text); }

/* Pannello del pacchetto: più largo, per la tabella dei posti */
.pannello-largo { --bs-offcanvas-width: min(46rem, 100vw); }
.griglia-statistiche-4 { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.sezione-riservata { border: 1px dashed #fcd34d; background: #fffdf5; border-radius: 0.5rem; padding: 0.55rem 0.7rem; }
.campo-segreto { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; align-items: baseline; gap: 0.5rem; font-size: 0.8rem; }
.campo-segreto-etichetta { color: var(--up-muted); font-weight: 500; }
.campo-segreto-valore { font-family: var(--bs-font-monospace); overflow-wrap: anywhere; }
.campo-segreto-valore.mascherato { letter-spacing: 0.1em; color: var(--up-muted); }
.campo-segreto-valore.multilinea { white-space: pre-wrap; font-family: inherit; }
.campo-segreto-azioni { display: inline-flex; gap: 0.6rem; }
.tabella-posti-contenitore { border: 1px solid var(--up-border-color); border-radius: 0.5rem; overflow: hidden; }
.tabella-posti { font-size: 0.78rem; }
.tabella-posti > :not(caption) > * > * { padding: 0.4rem 0.55rem; }
.tabella-posti thead th { background: #f8fafc; font-size: 0.65rem; font-weight: 700; color: var(--up-muted); text-transform: uppercase; white-space: nowrap; }
.tabella-posti tbody tr:last-child > * { border-bottom: 0; }
.tabella-posti .cella-posto { max-width: 12rem; }
.tabella-posti tr.riga-aperta > * { background: var(--up-primary-soft); border-bottom: 0; }
.tabella-posti tr.riga-editor > td { background: #fbfcff; padding: 0.6rem 0.75rem; }
.tabella-posti tr.riga-evidenziata > * { background: #fef9c3; }
/* Licenze per produttore (2026-10-07): la riga del gruppo apre e chiude i suoi pacchetti; il testo resta in vista scorrendo di lato. */
.tabella-dispositivi tbody tr.riga-gruppo > td { background: #f1f5f9; cursor: pointer; border-top: 1px solid var(--up-border-color); padding-top: 0.45rem; padding-bottom: 0.45rem; }
.tabella-dispositivi tbody tr.riga-gruppo:hover > td { background: #e8eef7; }
.riga-gruppo .contenuto-gruppo { position: sticky; left: 0.55rem; display: inline-flex; align-items: center; gap: 0.5rem; }
.riga-gruppo .bi-chevron-right, .riga-gruppo .bi-chevron-down { color: var(--up-muted); }
.segno-riservato { color: #b45309; margin-right: 0.35rem; }
.chip-persona {
    display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.2rem 0.1rem 0.5rem; max-width: 100%;
    background: #f1f5f9; border: 1px solid var(--up-border-color); border-radius: 999px; font-size: 0.72rem; font-weight: 600; white-space: nowrap;
}
.chip-persona .btn-close { width: 0.4em; height: 0.4em; padding: 0.3em; }
/* PC su cui è installato un posto (2026-10-06): come le persone, con l'icona; barrato se non più nell'inventario. */
.chip-pc { background: #fff; }
.chip-pc .bi { color: var(--up-muted); }
.chip-pc.rimosso { text-decoration: line-through; color: var(--up-muted); }
.editor-posto .form-control, .editor-posto .form-select { font-size: 0.78rem; }
.ricerca-persone { min-width: 12rem; }
.elenco-persone { max-height: 15rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.25rem; scrollbar-width: thin; }
.scelta-persona {
    display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.6rem; margin: 0;
    border: 1px solid var(--up-border-color); border-radius: 0.5rem; background: #fff; font-size: 0.8rem; cursor: pointer;
}
.scelta-persona:hover { border-color: #c7d2fe; }
.scelta-persona.scelto { background: var(--up-primary-soft); border-color: #c7d2fe; }
.scelta-persona.gia-assegnata { cursor: default; opacity: 0.65; }
/* Accessi accanto al pacchetto da assegnare (2026-10-06): interi, vanno a capo invece di accorciarsi. */
.scelta-persona .chip-accesso { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.riquadro-scelta { border: 1px solid var(--up-border-color); border-radius: 0.5rem; padding: 0.55rem; background: var(--up-bg-soft); }
.griglia-scelte { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.35rem; }

/* ---------------------------------------------------------------- Catalogo (CatalogoE) */
.tabella-licenze .cella-descrizione { max-width: 26rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-azioni .form-select { height: 28px; padding-top: 0; padding-bottom: 0; font-size: 0.78rem; max-width: 22rem; }

/* ---------------------------------------------------------------- Dashboard (DashboardB) */
a.kpi-tile { color: inherit; }
.scheda-dashboard { padding: 0.75rem 0.9rem; display: flex; flex-direction: column; min-width: 0; }
.griglia-dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 0.5rem; }
.elenco-dashboard { display: flex; flex-direction: column; gap: 0.3rem; }
.riga-dashboard {
    --tono: var(--up-muted); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.4rem 0.6rem; border: 1px solid var(--up-border-color); border-left: 3px solid var(--tono); border-radius: 0.45rem;
    background: #fff; font-size: 0.8rem; color: inherit; min-width: 0;
}
a.riga-dashboard.collegata:hover { background: var(--up-primary-soft); border-color: #c7d2fe; border-left-color: var(--tono); }
.riga-dashboard-testo { display: flex; flex-direction: column; }
.riga-dashboard-testo span { font-size: 0.7rem; color: var(--up-muted); }
.riga-dashboard-lato { display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.riga-dashboard-freccia { color: var(--up-muted); font-size: 0.7rem; }
.tono-info { --tono: var(--up-info-text); }
.tono-avviso { --tono: var(--up-warning-text); }
.tono-pericolo { --tono: var(--up-danger-text); }
.tono-neutro { --tono: #94a3b8; }
.tutto-in-ordine { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.9rem; border-left: 3px solid var(--up-success-text); }
.tutto-in-ordine > .bi { font-size: 1.6rem; color: var(--up-success-text); }
.numero-grande { display: inline-flex; align-items: baseline; gap: 0.3rem; font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--erp-dark); text-decoration: none; font-variant-numeric: tabular-nums; }
.numero-grande span { font-size: 0.75rem; font-weight: 600; color: var(--up-muted); }
a.numero-grande:not(.disattivo):hover { color: var(--up-primary); }
/* Barra composta (migrazione a Windows 11): parti separate da 2px di sfondo, estremi arrotondati. */
.barra-composta { display: flex; gap: 2px; height: 12px; }
.barra-composta-parte { min-width: 4px; height: 100%; }
.barra-composta-parte:first-child { border-radius: 4px 0 0 4px; }
.barra-composta-parte:last-child { border-radius: 0 4px 4px 0; }
.barra-composta-parte:only-child { border-radius: 4px; }
.barra-composta-parte:hover { filter: brightness(0.92); }
.legenda-dashboard { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; font-size: 0.75rem; }
.legenda-voce { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--up-text); text-decoration: none; }
.legenda-voce strong { font-variant-numeric: tabular-nums; }
a.legenda-voce.collegata:hover span:not(.legenda-pallino) { text-decoration: underline; }
.legenda-pallino { width: 0.6rem; height: 0.6rem; border-radius: 2px; flex-shrink: 0; }
/* Barre orizzontali (PC per tipo): una tinta sola, valore a destra. */
.barre-orizzontali { display: flex; flex-direction: column; gap: 0.3rem; }
.barra-riga { display: grid; grid-template-columns: minmax(5rem, 9rem) 1fr 2.5rem; align-items: center; gap: 0.5rem; font-size: 0.75rem; }
.barra-riga-traccia { height: 8px; background: var(--up-bg-soft); border-radius: 4px; }
.barra-riga-piena { display: block; height: 100%; min-width: 4px; background: var(--up-primary); border-radius: 4px; }
.barra-riga:hover .barra-riga-piena { filter: brightness(0.9); }
.barra-riga-valore { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.misuratore { height: 10px; background: var(--up-border-color); border-radius: 4px; }
.misuratore-pieno { display: block; height: 100%; background: var(--up-primary); border-radius: 4px; }
/* Colonne dei mesi (scadenze nei prossimi 12 mesi): valore sopra, mese sotto. */
.colonne-mesi { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; align-items: end; height: 6.5rem; }
.colonna-mese { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; cursor: default; }
/* Area della barra: l'altezza in percentuale è riferita a questa; il valore sta nel padding sopra. */
.colonna-mese-area { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-top: 0.9rem; }
.colonna-mese-valore { flex-shrink: 0; font-size: 0.65rem; font-weight: 700; line-height: 0.9rem; font-variant-numeric: tabular-nums; }
.colonna-mese-barra { flex-shrink: 0; width: 70%; max-width: 1.4rem; min-height: 4px; background: var(--up-primary); border-radius: 4px 4px 0 0; }
.colonna-mese-barra.vuota { min-height: 2px; height: 2px !important; background: var(--up-border-color); }
.colonna-mese:hover .colonna-mese-barra:not(.vuota) { filter: brightness(0.9); }
.colonna-mese-etichetta { font-size: 0.6rem; color: var(--up-muted); margin-top: 0.2rem; text-transform: capitalize; }
.qualita-dati { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.25rem; padding: 0.55rem 0.9rem; }
/* Suggerimento al passaggio del mouse, dal testo in data-suggerimento (niente script: CSP). */
.suggerimento { position: relative; }
.suggerimento:hover::after {
    content: attr(data-suggerimento); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 20;
    padding: 0.25rem 0.5rem; border-radius: 0.35rem; background: var(--erp-dark); color: #fff; font-size: 0.7rem; font-weight: 500;
    white-space: nowrap; pointer-events: none; box-shadow: var(--up-shadow-md);
}

/* ---------------------------------------------------------------- Registro di audit (AuditE) */
.confronto-audit td { overflow-wrap: anywhere; vertical-align: top; }
.confronto-audit th { font-size: 0.65rem; text-transform: uppercase; color: var(--up-muted); }
.confronto-audit tr.cambiato td { background: var(--up-warning-bg); }

/* ---------------------------------------------------------------- Planimetrie (GSPlanimetrieB)
   Ricavato dal prototipo provato con la planimetria vera (SPECIFICHE §8.5). Le regole della
   mappa iniziano con .gs-svg: l'esportazione SVG le copia nel file (con lo stato del contenitore). */
/* La vista riempie l'altezza della finestra: la mappa prende tutto lo spazio che resta dopo la
   barra dei comandi e la riga di stato. "Espandi" copre anche il menu dell'app. */
.pl-vista { height: calc(100vh - 2rem); height: calc(100dvh - 2rem); min-height: 32rem; }
.pl-vista.espansa {
    position: fixed; inset: 0; z-index: 1035; height: auto; min-height: 0; padding: 0.5rem 0.75rem; background: var(--up-bg-soft);
}
.pl-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
/* Basi piccole, poi crescono fino al massimo: la barra va a capo solo sotto i 1000 px circa di
   contenuto, e i nomi lunghi di planimetrie e settori si accorciano nel campo chiuso. */
.pl-scelta-planimetria { flex: 1 1 8rem; width: auto; min-width: 8rem; max-width: 15rem; }
.pl-ricerca { flex: 3 1 10rem; min-width: 10rem; max-width: 40rem; display: flex; }
/* Ambito della ricerca attaccato alla casella: un solo controllo a vista. */
.pl-ambito { flex: 0 0 auto; width: auto; border-top-right-radius: 0; border-bottom-right-radius: 0; background-color: var(--up-bg-soft); font-weight: 600; }
.pl-ricerca-campo { position: relative; flex: 1 1 auto; min-width: 0; margin-left: -1px; }
.pl-ricerca-campo .campo-ricerca { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.pl-settore { flex: 1 1 8rem; width: auto; min-width: 8rem; max-width: 12rem; }
.pl-colori { display: flex; align-items: center; gap: 0.35rem; }
.pl-barra-etichetta { font-size: 0.62rem; font-weight: 700; color: #475569; text-transform: uppercase; }
.pl-azioni-vista { display: flex; gap: 0.5rem; margin-left: auto; }
/* Riga di stato: filtri rapidi, comandi della mappa, etichette. Va a capo solo se la finestra è
   stretta: le etichette hanno base 0 e un minimo fisso, quindi aggiungerle non sposta mai la mappa. */
.pl-stato { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; min-height: 2rem; min-width: 0; }
.pl-filtri { display: flex; gap: 0.3rem; flex-shrink: 0; }
.pl-filtro {
    --kpi-colore: var(--up-primary); --kpi-sfondo: var(--up-primary-soft);
    display: inline-flex; align-items: center; gap: 0.35rem; height: 1.75rem; padding: 0 0.6rem; white-space: nowrap;
    background: #fff; border: 1px solid var(--up-border-color); border-radius: 999px; font-size: 0.75rem; color: var(--up-text);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pl-filtro i { color: var(--kpi-colore); }
.pl-filtro strong { font-variant-numeric: tabular-nums; }
.pl-filtro:hover:not(:disabled) { background: var(--up-bg-soft); border-color: var(--kpi-colore); }
.pl-filtro.active { background: var(--kpi-sfondo); border-color: var(--kpi-colore); box-shadow: inset 0 0 0 1px var(--kpi-colore); }
.pl-filtro:focus-visible { outline: 2px solid var(--kpi-colore); outline-offset: 1px; }
.pl-separatore { width: 1px; align-self: stretch; margin: 0.3rem 0.1rem; background: var(--up-border-color); flex-shrink: 0; }
.pl-stato-testo { color: var(--up-muted); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pl-togli-tutte { flex-shrink: 0; font-size: 0.75rem; }
.pl-suggerimenti { max-height: 60vh; }
.pl-sugg-gruppo { font-size: 0.6rem; text-transform: uppercase; font-weight: 700; color: var(--up-muted); padding: 0.35rem 0.5rem 0.1rem; }
.pl-sugg { display: flex; gap: 0.5rem; align-items: center; width: 100%; text-align: left; border: 0; background: none; padding: 0.3rem 0.5rem; border-radius: 0.35rem; font-size: 0.8rem; }
.pl-sugg.evidenziato, .pl-sugg:hover:not(:disabled) { background: var(--up-primary-soft); }
.pl-sugg:disabled { opacity: 0.5; }
.pl-sugg-testo { display: flex; flex-direction: column; min-width: 0; }
.pl-sugg-testo small { color: var(--up-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-tipo { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; color: var(--up-muted); background: #f1f5f9; border-radius: 0.25rem; padding: 0.05rem 0.3rem; white-space: nowrap; margin-right: 0.3rem; }
.pl-etichette { display: flex; flex: 1 1 0; flex-wrap: nowrap; gap: 0.35rem; align-items: center; min-width: 18rem; min-height: 1.75rem; overflow: hidden; }
.pl-chip {
    display: inline-flex; align-items: center; gap: 0.35rem; background: #fff; border: 1px solid var(--up-border-color); border-left: 4px solid var(--colore);
    border-radius: 999px; padding: 0.1rem 0.2rem 0.1rem 0.5rem; font-size: 0.78rem; box-shadow: var(--up-shadow-sm);
    flex: 0 1 auto; min-width: 0; max-width: 20rem; white-space: nowrap;
}
.pl-chip > :not(.pl-chip-titolo) { flex-shrink: 0; }
.pl-chip-campione { width: 0.7rem; height: 0.7rem; border-radius: 0.2rem; background: var(--colore); }
.pl-chip.compatta { gap: 0.1rem; padding: 0.1rem 0.1rem 0.1rem 0.4rem; }
.pl-chip.compatta .pl-chip-campione { width: 0.85rem; height: 0.85rem; }
.pl-chip-riepilogo { gap: 0.15rem; padding-right: 0.5rem; }
.pl-chip-riepilogo .pl-chip-campione { width: 0.6rem; height: 0.6rem; }
.pl-chip-titolo { font-weight: 600; min-width: 1.5rem; overflow: hidden; text-overflow: ellipsis; }
.pl-chip-azione { border: 1px solid var(--up-border-color); background: var(--up-bg-soft); border-radius: 999px; font-size: 0.68rem; padding: 0 0.45rem; }
.pl-chip-azione:hover { background: var(--up-primary-soft); }
.pl-chip-togli { border: 0; background: none; font-size: 1rem; line-height: 1; color: var(--up-muted); width: 1.3rem; height: 1.3rem; border-radius: 50%; }
.pl-chip-togli:hover { background: #f1f5f9; color: var(--up-danger-text); }

.pl-corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 0.5rem; }
.pl-mappa { position: relative; background: #fff; border: 1px solid var(--up-border-color); border-radius: 0.5rem; overflow: hidden; min-height: 0; }
.pl-mappa.in-disposizione { box-shadow: inset 0 0 0 2px #f59e0b; }
.pl-mappa-svg { position: absolute; inset: 0; cursor: grab; outline: none; }
.pl-mappa-svg.in-spostamento { cursor: grabbing; }
.pl-mappa-svg.modo-riquadro, .pl-mappa-svg.in-riquadro { cursor: crosshair; }
.pl-mappa-svg.in-trascinamento { cursor: move; }
.pl-mappa-svg > svg { width: 100%; height: 100%; display: block; user-select: none; touch-action: none; }
.pl-vuota {
    position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem;
    color: var(--up-muted); font-size: 0.85rem; text-align: center; background: rgba(255, 255, 255, 0.85);
}
.pl-riquadro-sel { position: absolute; border: 1.5px dashed #0f172a; background: rgba(99, 102, 241, 0.08); pointer-events: none; }
/* Banner e avvisi in pila sopra la mappa: non spostano mai il resto della vista. */
.pl-mappa-avvisi {
    position: absolute; top: 0.6rem; left: 50%; transform: translateX(-50%); z-index: 5; width: max-content; max-width: calc(100% - 1.2rem);
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem; pointer-events: none;
}
.pl-mappa-avvisi > * { pointer-events: auto; }
.pl-banner {
    display: flex; align-items: center; gap: 0.5rem; white-space: nowrap;
    background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; padding: 0.35rem 0.75rem; border-radius: 0.5rem; box-shadow: var(--up-shadow-md); font-size: 0.8rem;
}
.pl-avviso { max-width: 40rem; box-shadow: var(--up-shadow-md); }
.pl-banner-modifica { background: #fffbeb; border-color: #fde68a; color: #78350f; }
.pl-riepilogo { color: #92400e; font-size: 0.75rem; }
/* Comandi della mappa nella riga di stato, dopo i filtri rapidi (zoom, Adatta, Espandi, Nomi, Numeri, Riquadro). */
.pl-comandi-mappa { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.pl-gruppo { display: flex; gap: 0.25rem; }
.pl-gruppo .btn { height: 1.75rem; padding-top: 0; padding-bottom: 0; font-size: 0.75rem; }
.pl-icona { width: 1.75rem; padding: 0; }
/* Sempre al suo posto sulla mappa, visibile solo quando serve (il JS mette testi-piccoli sul contenitore). */
.pl-zoom-testi {
    position: absolute; left: 0.6rem; bottom: 1.6rem; z-index: 4; visibility: hidden; pointer-events: none;
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 0.35rem; padding: 0.15rem 0.5rem; font-size: 0.72rem;
}
.pl-mappa-svg.testi-piccoli ~ .pl-zoom-testi { visibility: visible; }
.pl-aiuto {
    position: absolute; left: 0.6rem; bottom: 0.35rem; z-index: 4; color: var(--up-muted); font-size: 0.68rem; pointer-events: none;
    background: rgba(255, 255, 255, 0.88); padding: 0 0.35rem; border-radius: 0.25rem;
}
.pl-tooltip {
    position: absolute; z-index: 10; background: #0f172a; color: #fff; padding: 0.35rem 0.55rem; border-radius: 0.35rem; font-size: 0.75rem;
    max-width: 18rem; pointer-events: none; box-shadow: var(--up-shadow-md); line-height: 1.45;
}
.pl-tooltip .pallino { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-right: 0.35rem; }
.pl-tooltip-nota { color: #fde68a; white-space: pre-wrap; }

.pl-colonna { display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; }
.pl-scheda { padding: 0.5rem 0.65rem; font-size: 0.8rem; }
.pl-scorrevole { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
.pl-pannello-testa { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; }
/* L'intestazione del pannello (indietro, Vai, schede dell'editor) resta visibile scorrendo; il
   margine negativo e top compensano il padding della scheda, rispettato da position: sticky. */
.pl-scorrevole > :is(.pl-pannello-testa, .pl-schede):first-child {
    position: sticky; top: -0.5rem; z-index: 2; background: #fff; margin: -0.5rem -0.65rem 0.4rem; padding: 0.5rem 0.65rem 0;
}
.pl-scorrevole > .pl-pannello-testa:first-child { margin-bottom: 0; padding-bottom: 0.35rem; }
/* Con molte etichette (fino a 20) la legenda scorre: i risultati sotto restano raggiungibili. */
.pl-voci { display: flex; flex-direction: column; gap: 1px; max-height: 45vh; overflow-y: auto; }
.pl-voce { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; border: 1px solid transparent; background: none; border-radius: 0.35rem; padding: 0.2rem 0.35rem; }
.pl-voce-riga { display: flex; align-items: center; gap: 0.2rem; }
.pl-voce-riga > .pl-voce { flex: 1 1 auto; min-width: 0; }
.pl-voce-riga > :not(.pl-voce) { flex-shrink: 0; }
.pl-voce-sotto { padding: 0.1rem 0 0.3rem 1.85rem; }
.pl-voce.cliccabile:hover { background: var(--up-bg-soft); border-color: var(--up-border-color); }
.pl-voce.attiva { background: var(--up-primary-soft); border-color: #c7d2fe; }
.pl-voce-testo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pl-voce-titolo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-voce-testo small { color: var(--up-muted); font-size: 0.68rem; }
/* Pacchetto o posto nella legenda: tutto visibile, il testo scorre e va a capo invece di accorciare. */
.pl-voce-licenza { display: block; line-height: 1.5; overflow-wrap: anywhere; }
.pl-voce-licenza > * { margin-right: 0.3rem; }
.pl-licenza-id {
    display: inline-block; max-width: 100%; padding: 0 0.3rem; border-radius: 0.25rem; border: 1px solid var(--up-border-color); background: var(--up-bg-soft); color: #334155;
    font-size: 0.7rem; font-weight: 600; line-height: 1.35; vertical-align: 0.05rem;
}
/* L'accesso intero, come nei risultati (.pl-accesso): bordo nella tinta dell'etichetta. */
.pl-licenza-posto {
    display: inline-block; max-width: 100%; vertical-align: 0.05rem; padding: 0 0.45rem; border: 1.5px solid var(--colore, #94a3b8); border-radius: 999px;
    background: color-mix(in srgb, var(--colore, #94a3b8) 10%, #fff); color: var(--erp-dark);
    font-size: 0.7rem; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere;
}
.pl-voce-numero { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--erp-dark); }
.pl-campione { width: 1rem; height: 1rem; border-radius: 0.25rem; border: 1.5px solid transparent; flex-shrink: 0; }
.campione-libera { background: #d1fae5; border-color: #059669; }
.campione-assegnata { background: #c7d2fe; border-color: #6366f1; }
.campione-nota { background: #fff; border-color: #94a3b8; position: relative; }
.campione-nota::after { content: ''; position: absolute; right: -1px; top: -1px; border-top: 8px solid #1e293b; border-left: 8px solid transparent; }
.campione-senzaSettore { background: #fff; border: 1.5px dashed #94a3b8; }
.campione-candidata { background: #dcfce7; border-color: #15803d; }
.campione-attenuata { background: #e2e8f0; border-color: #cbd5e1; opacity: 0.6; }
.campione-selezionata { background: #fff; border: 3px solid #0f172a; }
.campione-nuova { background: #c7d2fe; border: 2px dashed #b45309; }
.campione-spostata { background: #fff; border: 2px dashed #b45309; }
.campione-eliminata { background: #fee2e2; border: 1.5px solid #dc2626; }

.pl-elenco { display: flex; flex-direction: column; gap: 1px; }
.pl-riga { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; border: 1px solid transparent; background: none; border-radius: 0.35rem; padding: 0.2rem 0.35rem; }
button.pl-riga:hover:not(:disabled) { background: var(--up-bg-soft); border-color: var(--up-border-color); }
/* Persona senza postazione: la parte con nome e accessi apre la scheda (2026-10-06), i pulsanti restano a parte. */
.pl-riga-apri { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 auto; min-width: 0; border: 0; background: none; padding: 0; text-align: left; color: inherit; }
.pl-riga-persona:has(.pl-riga-apri:hover) { background: var(--up-bg-soft); border-color: var(--up-border-color); }
.pl-riga-codice { font-weight: 700; font-variant-numeric: tabular-nums; width: 2.6rem; flex-shrink: 0; color: var(--erp-dark); }
.pl-riga-testo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pl-riga-testo strong, .pl-riga-testo small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-riga-testo small { color: var(--up-muted); font-size: 0.68rem; }
.pl-riga-segni { display: inline-flex; align-items: center; gap: 0.25rem; }
.pl-riga-dove { color: var(--up-muted); font-size: 0.68rem; white-space: nowrap; }
.pl-segno-nota { color: #1e293b; font-size: 0.68rem; }
.pl-pallino { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; flex-shrink: 0; }
/* Accessi di licenza trovati (PlanimetrieAccessi): interi, bordo nella tinta dell'etichetta, testo scuro. */
.pl-riga-accessi { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.15rem; }
.pl-accesso-pc { margin-left: 0.3rem; padding-left: 0.3rem; border-left: 1px solid color-mix(in srgb, var(--colore) 45%, #fff); font-weight: 500; }
.pl-accesso-pc .bi { margin-right: 0.15rem; color: var(--up-muted); }
.pl-accesso {
    max-width: 100%; padding: 0 0.45rem; border: 1.5px solid var(--colore); border-radius: 999px;
    background: color-mix(in srgb, var(--colore) 10%, #fff); color: var(--erp-dark);
    font-size: 0.7rem; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere;
}
.pl-sezione { margin: 0.6rem 0 0.2rem; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; color: var(--up-muted); }
.pl-dettaglio section { border-top: 1px solid var(--up-border-color); padding: 0.45rem 0; }
.pl-dettaglio h6 { margin: 0 0 0.2rem; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--up-muted); }
.pl-codice { color: var(--erp-dark); }
.pl-settore-badge { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--up-bg-soft); border: 1px solid var(--up-border-color); border-radius: 999px; padding: 0 0.5rem; font-size: 0.75rem; }
.pl-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.3rem; }
.pl-azioni .btn { font-size: 0.75rem; }
.pl-scegli-persona { margin-top: 0.4rem; border: 1px solid #c7d2fe; background: var(--up-primary-soft); border-radius: 0.5rem; padding: 0.4rem; }
.pl-scegli-persona .pl-elenco { margin: 0.3rem 0; max-height: 16rem; overflow-y: auto; }
.pl-scegli-persona .pl-riga { background: #fff; }
.pl-pc { border: 1px solid var(--up-border-color); background: #fff; border-radius: 999px; padding: 0.05rem 0.55rem; font-size: 0.75rem; }
button.pl-pc:hover { background: var(--up-primary-soft); border-color: #c7d2fe; }
.pl-pc small { color: var(--up-muted); }
.pl-testo-nota { white-space: pre-wrap; }
.pl-schede { display: flex; gap: 0.25rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--up-border-color); }
.pl-schede button { border: 0; background: none; padding: 0.35rem 0.6rem; border-bottom: 2px solid transparent; font-weight: 650; color: var(--up-muted); font-size: 0.8rem; }
.pl-schede button.attiva { color: var(--up-primary); border-bottom-color: var(--up-primary); }
.pl-forme { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: 0.35rem; }
.pl-forma { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; border: 1px solid var(--up-border-color); background: #fff; border-radius: 0.35rem; padding: 0.3rem 0.2rem; font-size: 0.68rem; }
.pl-forma:hover:not(:disabled) { background: var(--up-primary-soft); border-color: #c7d2fe; }
.pl-forma.attiva { border-color: #b45309; background: #fffbeb; box-shadow: 0 0 0 1px #b45309; }
.pl-forma small { color: var(--up-muted); font-size: 0.62rem; }
.pl-versione { border: 1px solid var(--up-border-color); border-radius: 0.5rem; padding: 0.4rem 0.55rem; margin-bottom: 0.35rem; display: flex; flex-direction: column; gap: 0.1rem; }
.pl-versione.in-uso { border-color: #a7f3d0; background: #f0fdf4; }
.pl-tasti div { line-height: 2; color: var(--up-muted); font-size: 0.68rem; }
.pl-tasti kbd { font-size: 0.65rem; background: #f1f5f9; color: var(--up-text); border: 1px solid var(--up-border-color); border-bottom-width: 2px; padding: 0 0.25rem; }
.pl-gestisci-riga { display: flex; align-items: center; gap: 0.4rem; border: 1px solid var(--up-border-color); border-radius: 0.5rem; padding: 0.4rem 0.55rem; }
.pl-tabella-settori { font-size: 0.8rem; }
.pl-tabella-settori .form-control-color { width: 2.4rem; padding: 0.15rem; }

/* La planimetria: pareti, postazioni (gruppi con le forme dentro, o forme singole), testi. */
.gs-svg [data-floor-role="walls"] :is(line, polyline, polygon, path, rect, circle, ellipse) { stroke: #475569 !important; stroke-width: 0.7px !important; vector-effect: non-scaling-stroke; }
.gs-svg .gs-postazione { cursor: pointer; transition: opacity 0.12s ease; }
.gs-svg .gs-postazione :is(rect, path, polygon, polyline, circle, ellipse), .gs-svg .gs-postazione:not(g) { fill: var(--riemp, #ffffff) !important; stroke: var(--bordo, #94a3b8) !important; stroke-width: 1px !important; vector-effect: non-scaling-stroke; }
.gs-svg .gs-postazione.tratteggio :is(rect, path, polygon, polyline, circle, ellipse), .gs-svg .gs-postazione.tratteggio:not(g) { stroke-dasharray: 3 2; }
.gs-svg .gs-postazione.attenuata { opacity: 0.28; }
.pl-mappa-svg.filtrata .gs-svg .gs-postazione:not(.attenuata):not(.selezionata):not(.evidenzia):not(.sopra) :is(rect, path, polygon, polyline, circle, ellipse),
.pl-mappa-svg.filtrata .gs-svg .gs-postazione:not(.attenuata):not(.selezionata):not(.evidenzia):not(.sopra):not(g) { stroke-width: 1.8px !important; }
.gs-svg .gs-postazione.sopra :is(rect, path, polygon, polyline, circle, ellipse), .gs-svg .gs-postazione.sopra:not(g) { stroke: #0f172a !important; stroke-width: 2px !important; }
.gs-svg .gs-postazione.selezionata { opacity: 1; }
.gs-svg .gs-postazione.selezionata :is(rect, path, polygon, polyline, circle, ellipse), .gs-svg .gs-postazione.selezionata:not(g) { stroke: #0f172a !important; stroke-width: 3px !important; }
.gs-svg .gs-postazione.evidenzia { opacity: 1; }
.gs-svg .gs-postazione.evidenzia :is(rect, path, polygon, polyline, circle, ellipse), .gs-svg .gs-postazione.evidenzia:not(g) { stroke: #0f172a !important; stroke-width: 2.5px !important; }
.gs-svg .gs-postazione.scurisci { opacity: 0.12; }
.gs-svg .gs-postazione.spostata :is(rect, path, polygon, polyline, circle, ellipse), .gs-svg .gs-postazione.spostata:not(g) { stroke: #b45309 !important; stroke-width: 1.8px !important; stroke-dasharray: 2 2; }
.gs-svg .gs-postazione.nuova :is(rect, path, polygon, polyline, circle, ellipse), .gs-svg .gs-postazione.nuova:not(g) { stroke: #b45309 !important; stroke-width: 2.2px !important; stroke-dasharray: 4 2; }
.gs-svg .gs-postazione.selezionata.nuova :is(rect, path, polygon, polyline, circle, ellipse), .gs-svg .gs-postazione.selezionata.spostata :is(rect, path, polygon, polyline, circle, ellipse),
.gs-svg .gs-postazione.selezionata.nuova:not(g), .gs-svg .gs-postazione.selezionata.spostata:not(g) { stroke: #0f172a !important; stroke-width: 3px !important; stroke-dasharray: none; }
.pl-mappa-svg.modo-disposizione .gs-svg .gs-postazione { cursor: move; }
.gs-svg .gs-nota { fill: #1e293b; stroke: #ffffff; stroke-width: 0.6px; vector-effect: non-scaling-stroke; pointer-events: none; }
.gs-svg .gs-nota.attenuata { opacity: 0.3; }
.gs-svg text { pointer-events: none; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.gs-svg .gs-nome { fill: #0f172a; font-weight: 650; paint-order: stroke; stroke: rgba(255, 255, 255, 0.92); stroke-width: 3px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.gs-svg .gs-nome.importante { font-weight: 750; }
/* Nome della postazione selezionata: stessa misura, bianco su un'etichetta scura come il bordo della selezione. */
.gs-svg .gs-nome.selezionato { fill: #ffffff; stroke: none; }
.gs-svg .gs-nome-sfondo { fill: #0f172a; stroke: #ffffff; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.gs-svg :is(.gs-nome.selezionato, .gs-nome-sfondo) { pointer-events: auto; cursor: pointer; }
.pl-mappa-svg.modifica-etichette .gs-svg :is(.gs-nome.selezionato, .gs-nome-sfondo) { cursor: move; }
/* Linea verso un nome spostato a mano lontano dalla sua postazione. */
.gs-svg .gs-filo { stroke: #475569; stroke-width: 1px; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.gs-svg .gs-numero { fill: #0f172a; font-weight: 650; paint-order: stroke; stroke: rgba(255, 255, 255, 0.9); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.gs-svg .gs-numero.attenuata { opacity: 0.3; }
.gs-svg [data-gs="numeri"].nascosto { display: none; }
.gs-svg .gs-nome-settore { fill: #0f172a; font-weight: 800; paint-order: stroke; stroke: rgba(255, 255, 255, 0.95); stroke-width: 4px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.gs-svg [data-gs="misura"] { visibility: hidden; }
.pl-mappa-svg.in-trascinamento-postazioni .gs-svg :is([data-gs="nomi"], [data-gs="sfondi-nomi"], [data-gs="fili"], [data-gs="note"], [data-gs="numeri"]) { display: none; }
.gs-svg .gs-fantasma { pointer-events: none; }
.gs-svg .gs-fantasma :is(rect, path, polygon, polyline, circle, ellipse), .gs-svg .gs-fantasma:not(g) { fill: rgba(245, 158, 11, 0.35) !important; stroke: #b45309 !important; stroke-width: 1.5px !important; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.gs-svg .gs-guida { stroke: #db2777; stroke-width: 1px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }

@media (max-width: 991.98px) {
    .pl-vista { height: auto; min-height: 0; }
    .pl-vista.espansa { overflow: auto; }
    .pl-etichette { flex-wrap: wrap; }
    .pl-azioni-vista { margin-left: 0; }
    .pl-corpo { grid-template-columns: minmax(0, 1fr); }
    .pl-mappa { height: 60vh; }
    .pl-colonna { max-height: none; }
}

/* Identificativi del pacchetto accanto al nome (IdentificativoLicenza): la licenza si riconosce a colpo d'occhio. */
.id-licenza {
    display: inline-block; max-width: 100%; vertical-align: baseline; margin-left: 0.25rem; padding: 0 0.3rem; border-radius: 0.25rem;
    border: 1px solid var(--up-border-color); background: var(--up-bg-soft); color: #475569;
    font-size: 0.68rem; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}