/* 
 * Foglio di stile principale. Gestisce il layout Card, Masonry e temi.
 */

/* ==========================================================================
   MODERN DASHBOARD LAYOUT (Sidebar + Header)
   ========================================================================== */

:root {
    --sidebar-width: 260px;
    --sidebar-bg: #1e1e2d;         /* Dark Blue professionale */
    --sidebar-color: #a2a3b7;      /* Grigio chiaro leggibile */
    --sidebar-active-bg: #1b1b29;  /* Sfondo attivo più scuro */
    --sidebar-active-color: #ffffff;
    --sidebar-hover-bg: #2a2a3c;
    --header-height: 48px;
    --primary-accent: #0d6efd;     /* Bootstrap Primary */

    /* Grafica 2.0: valori comuni. Le coppie dei temi hanno contrasto almeno 4,5:1 */
    --colore-sfondo: #f4f6f9;
    --colore-superficie: #ffffff;
    --colore-testo: #212529;
    --colore-testo-secondario: #5c636a;
    --colore-bordo: #dee2e6;
    --colore-bordo-campo: #86909a;
    --colore-focus: #0a58ca;
    --colore-hover: #f8f9fa;
    --raggio-card: 12px;
    --raggio-interno: 8px;
    --ombra-riposo: 0 2px 8px rgba(0, 0, 0, 0.05);
    --ombra-hover: 0 8px 16px rgba(0, 0, 0, 0.1);
    --spazio-1: 0.25rem;
    --spazio-2: 0.5rem;
    --spazio-3: 1rem;
    --spazio-4: 1.5rem;
    --bersaglio-minimo: 24px;
    --theme-blue-bg: #e7f1ff;    --theme-blue-color: #084298;
    --theme-green-bg: #d1e7dd;   --theme-green-color: #0a3622;
    --theme-red-bg: #f8d7da;     --theme-red-color: #58151c;
    --theme-warning-bg: #fff3cd; --theme-warning-color: #664d03;
    --theme-info-bg: #cff4fc;    --theme-info-color: #055160;
    --theme-gray-bg: #e9ecef;    --theme-gray-color: #343a40;
    --theme-orange-bg: #ffe5d0;  --theme-orange-color: #7a3608;
    --theme-purple-bg: #e2d9f3;  --theme-purple-color: #432874;
    --theme-dark-bg: #ced4da;    --theme-dark-color: #212529;

    /* Densità media: margini della pagina, distacchi, righe, testo e controlli */
    --spazio-pagina-y: 1rem;
    --spazio-pagina-x: 2rem;
    --gap-griglia: 1rem;
    --spazio-pannello: 1rem;
    --riga-tabella: 40px;
    --testo-base: 0.9375rem;
    --testo-piccolo: 0.875rem;
    --titolo-pagina: 1.375rem;
    --altezza-controllo: 36px;
    --altezza-scheda: 38px;
    --altezza-voce-compatta: 30px;
    --colore-bordo-tenue: #e9ecef;
    --larghezza-etichetta-coppia: 10.5rem;
    --larghezza-colonna-dettaglio: 26rem;
    /* Stati dei turni nei grafici: tinte distinte fra loro, ognuna almeno 3:1 sul bianco */
    --colore-stato-confermato: #198754;
    --colore-stato-pianificato: #3d8bfd;
    --colore-stato-scoperto: #dc3545;
    --colore-stato-errore: #b35c00;
    --colore-stato-chiuso: #6c757d;
}

body {
    background-color: #f4f6f9;     /* Sfondo pagina grigio tenue */
    font-family: 'Segoe UI', Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- LAYOUT: barra in alto, colonna del menu e contenuto --- */
/* Il piede sta nella prima schermata delle pagine corte: il corpo lascia il suo posto */
.corpo-app { display: flex; align-items: stretch; min-height: calc(100vh - var(--header-height) - var(--altezza-piede)); }
#content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* --- BARRA IN ALTO --- */
.barra-alto {
    min-height: var(--header-height);
    background-color: var(--colore-superficie);
    border-bottom: 1px solid var(--colore-bordo);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spazio-1) var(--spazio-3);
    padding: 0 var(--spazio-3);
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: var(--ombra-riposo);
}
@media (min-width: 992px) { .barra-alto { padding: 0 2rem; } }
/* Con lo zoom al 200% la barra va a capo invece di tagliare: l'altezza è minima, non fissa */
.barra-sinistra, .barra-destra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-2); min-width: 0; }
.btn-barra {
    width: 36px; height: 36px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--colore-bordo); border-radius: var(--raggio-interno);
    color: var(--colore-testo-secondario); font-size: 1.15rem;
}
.btn-barra:hover { background-color: var(--colore-hover); color: var(--colore-focus); }
.barra-logo { display: flex; align-items: center; gap: 0.6rem; min-height: 36px; color: var(--colore-testo); font-weight: 700; text-decoration: none; }
.brand-icon {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--raggio-interno); background-color: var(--theme-blue-bg); color: var(--theme-blue-color);
}
/* Sotto 576 px il testo del logo resta nel DOM, solo nascosto alla vista, così il collegamento ha un nome */
.barra-logo-testo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media (min-width: 576px) { .barra-logo-testo { position: static; width: auto; height: auto; overflow: visible; clip: auto; } }
.settore-attivo, .btn-settore {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 32px; max-width: 14rem; padding: 0.2rem 0.65rem;
    border: 0; border-radius: var(--raggio-interno); background-color: var(--theme-gray-bg); color: var(--theme-gray-color); font-weight: 600;
    font-size: var(--testo-piccolo);
}
.settore-attivo span, .btn-settore > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-settore:hover { background-color: var(--theme-dark-bg); }
.selettore-settore { margin: 0; min-width: 0; }
.selettore-settore .dropdown, .settore-attivo { min-width: 0; }
.btn-settore { max-width: 100%; }
@media (max-width: 767.98px) {
    /* Su mobile le voci dei menu a tendina della barra arrivano a 44 px */
    .barra-alto .dropdown-item { display: flex; align-items: center; min-height: 44px; }
}

/* Menu del nome */
.user-profile-widget {
    display: flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; padding: 2px 6px;
    border-radius: var(--raggio-interno); transition: background 0.2s;
}
.user-profile-widget:hover { background-color: var(--colore-hover); }
.user-info { text-align: right; line-height: 1.2; }
.user-name { font-weight: 600; font-size: var(--testo-piccolo); color: var(--colore-testo); }
.user-role { font-size: 0.75rem; color: var(--colore-testo-secondario); }
.user-avatar {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: var(--theme-blue-color); color: var(--colore-superficie); border-radius: var(--raggio-interno); font-weight: 700; font-size: 0.85rem;
}
.user-freccia { color: var(--colore-testo-secondario); font-size: 0.8rem; }
/* «Esci» in rosso: sul grigio del passaggio e del focus il rosso di Bootstrap scende a 3,8:1, quello del tema no */
.barra-alto .dropdown-item.text-danger:hover, .barra-alto .dropdown-item.text-danger:focus { color: var(--theme-red-color) !important; }
@media (max-width: 767.98px) {
    /* Il nome resta per i lettori di schermo anche quando non c'è posto per mostrarlo */
    .user-info { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}

/* --- MENU LATERALE: un pannello a scomparsa a ogni larghezza, nascosto finché non lo apre il pulsante della barra --- */
.menu-pannello { --bs-offcanvas-bg: var(--sidebar-bg); --bs-offcanvas-color: var(--sidebar-color); --bs-offcanvas-width: min(var(--sidebar-width), 88vw); }
.menu-pannello .offcanvas-header { background-color: rgba(0, 0, 0, 0.1); color: var(--sidebar-active-color); }
/* Scorre il corpo del pannello, alto quanto la finestra, anche con lo zoom al 200% */
.menu-pannello .offcanvas-body { padding: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* Menu */
.sidebar-menu { padding: 0.5rem 0; width: 100%; }
.menu-sezione + .menu-sezione { border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 0.5rem; }
.nav-label {
    padding: 0.5rem 0 0;
    margin: 0;
    font-size: var(--testo-piccolo);
    color: #9a9cb5;                /* Contrasto 6:1 sullo sfondo della sidebar */
    font-weight: 700;
}

/* Sezioni richiudibili: senza JavaScript restano tutte aperte e il titolo è solo un'etichetta, senza pulsante */
.nav-label-pulsante {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; min-height: 36px;
    padding: 0.35rem 1.25rem; border: 0; border-left: 3px solid transparent; background: transparent;
    color: inherit; font: inherit; letter-spacing: inherit; text-align: left; text-transform: inherit; cursor: pointer;
}
.nav-label-fisso { display: block; padding: 0.35rem 1.25rem; }
.nav-label-pulsante i { font-size: 0.85rem; }
html:not(.menu-js) .nav-label-pulsante, .menu-js .nav-label-fisso { display: none; }
.menu-js .nav-label-pulsante:hover { color: #fff; background-color: var(--sidebar-hover-bg); }
.menu-sezione.chiusa .nav-label-pulsante i { transform: rotate(-90deg); }
/* Il corpo si chiude con la riga della griglia a 0 e visibility, che toglie le voci anche dalla tabulazione */
.menu-sezione-corpo { display: grid; grid-template-rows: 1fr; visibility: visible; }
.menu-sezione-corpo > ul { min-height: 0; overflow: hidden; }
.menu-sezione.chiusa .menu-sezione-corpo { grid-template-rows: 0fr; visibility: hidden; }
.menu-sezione-corpo { transition: grid-template-rows 0.2s ease, visibility 0s linear 0s; }
.menu-sezione.chiusa .menu-sezione-corpo { transition: grid-template-rows 0.2s ease, visibility 0s linear 0.2s; }
.nav-label-pulsante i { transition: transform 0.2s; }
/* Allo stato iniziale le sezioni prendono la loro altezza subito, così lo scorrimento alla voce attiva misura quella vera */
.menu-iniziale .menu-sezione-corpo, .menu-iniziale .menu-sezione.chiusa .menu-sezione-corpo, .menu-iniziale .nav-label-pulsante i { transition: none; }
.menu-vuoto { padding: 1rem 1.5rem; margin: 0; color: var(--sidebar-color); }

.sidebar-menu .nav-link, .torna-al-settore {
    position: relative;
    padding: 0.4rem 1.25rem;
    min-height: 36px;
    color: var(--sidebar-color);
    display: flex;
    align-items: center;
    transition: all 0.2s ease-in-out;
    border-left: 3px solid transparent;
    font-size: var(--testo-base);
    text-decoration: none;
}
.sidebar-menu .nav-link i, .torna-al-settore i { font-size: 1rem; margin-right: 10px; width: 20px; text-align: center; transition: transform 0.2s; }
.sidebar-menu .nav-link:hover, .torna-al-settore:hover { color: #fff; background-color: var(--sidebar-hover-bg); }
.sidebar-menu .nav-link:hover i { transform: translateX(3px); }
.sidebar-menu .nav-link.active {
    color: var(--sidebar-active-color);
    background-color: var(--sidebar-active-bg);
    border-left-color: var(--primary-accent);
    font-weight: 600;
}
.torna-al-settore { margin-bottom: 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: var(--sidebar-active-color); font-weight: 600; }
.badge-voce {
    margin-left: auto; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
    background-color: var(--theme-red-bg); color: var(--theme-red-color);
}

/* --- MAIN CONTENT CONTAINER: margini della densità media; le pagine escluse dalla densità tengono i 2rem --- */
.main-container {
    padding: 2rem;
    flex-grow: 1;
}
.densita-media .main-container { padding: var(--spazio-pagina-y) var(--spazio-pagina-x); }

/* Versione dell'app in fondo al menu del nome */
.versione-menu { font-size: var(--testo-piccolo); color: var(--colore-testo-secondario); }

@media (max-width: 575.98px) {
    .main-container, .densita-media .main-container { padding: var(--spazio-3); }
}

/* Con il tocco i controlli della barra e le voci del menu tornano a 44 px */
@media (pointer: coarse) {
    .btn-barra { width: 44px; height: 44px; }
    .barra-logo, .settore-attivo, .btn-settore, .user-profile-widget, .nav-label-pulsante, .sidebar-menu .nav-link, .torna-al-settore { min-height: 44px; }
}

/* --- Layout & Masonry --- */
.masonry-container {
    column-count: 1;
    column-gap: 1.5rem;
}
@media (min-width: 768px) { .masonry-container { column-count: 2; } }
@media (min-width: 1200px) { .masonry-container { column-count: 3; } }

.card-masonry {
    display: inline-block;
    width: 100%;
    margin-bottom: 1.5rem; /* Spazio verticale */
    break-inside: avoid;   /* Evita che la card venga spezzata tra le colonne */
}

/* --- Card Styling --- */
.card-custom {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    background-color: #fff;
    overflow: hidden;
}

.card-custom:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.card-header-custom {
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    padding: 1rem 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-body-custom {
    padding: 1.25rem;
}

/* --- Grafici Chart.js --- */
/* Con maintainAspectRatio: false il grafico prende l'altezza del genitore: senza un'altezza propria il contenitore cresce col grafico all'infinito */
.grafico-contenitore {
    position: relative;
    width: 100%;
    height: 15rem;
}
@media (max-width: 575.98px) {
    .grafico-contenitore { height: 11rem; }
}

/* --- Icon Boxes --- */
.icon-box {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1rem;
}

.theme-blue { background-color: var(--theme-blue-bg); color: var(--theme-blue-color); }
.theme-green { background-color: var(--theme-green-bg); color: var(--theme-green-color); }
.theme-red { background-color: var(--theme-red-bg); color: var(--theme-red-color); }
.theme-warning { background-color: var(--theme-warning-bg); color: var(--theme-warning-color); }
.theme-info { background-color: var(--theme-info-bg); color: var(--theme-info-color); }
.theme-gray { background-color: var(--theme-gray-bg); color: var(--theme-gray-color); }
.theme-orange { background-color: var(--theme-orange-bg); color: var(--theme-orange-color); }
.theme-purple { background-color: var(--theme-purple-bg); color: var(--theme-purple-color); }

/* --- Dash Items (Liste Interattive) --- */
.dash-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    transition: all 0.2s;
    margin-bottom: 0.25rem;
}

.dash-item:hover {
    background-color: #f8f9fa;
    transform: translateX(5px);
    color: inherit;
    text-decoration: none;
}

.dash-item i { margin-right: 10px; color: #6c757d; }

/* --- Utility --- */
.cursor-pointer { cursor: pointer; }
.bg-white-transparent { background-color: rgba(255,255,255,0.9); }

/* --- PLANNING WEEK VIEW (NEW) --- */

.planning-week-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0;
    padding-bottom: 20px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background-color: #fff;
    min-height: 600px;
}

.planning-day-col {
    flex: 0 0 14.28%; /* 100% / 7 giorni = 14.28% */
    min-width: 180px; /* Larghezza minima per leggibilità mobile */
    border-right: 1px solid #dee2e6;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

.planning-day-col:last-child {
    border-right: none;
}

/* Colori colonne speciali */
.col-festivo {
    background-color: #fff5f5; /* Rosso chiarissimo per festivi */
}
.col-today {
    background-color: #e3f2fd; /* Azzurro per oggi */
    border-left: 2px solid var(--primary-accent);
    border-right: 2px solid var(--primary-accent);
}

/* Fasce Orarie Headers */
.fascia-header {
    background-color: #f8f9fa;
    color: #495057;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    /* top: 0; se volessimo sticky headers dentro la colonna, ma c'è già day-header sticky */
}

.fascia-content {
    padding: 8px;
    flex-grow: 1; /* Riempie lo spazio se vuoto */
    min-height: 100px; /* Altezza minima per fascia */
}

/* Card Planning Specifica */
.planning-card {
    transition: transform 0.15s ease-in-out, box-shadow 0.15s;
    cursor: pointer;
}
.planning-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
    z-index: 10;
}

.small-text-xs {
    font-size: 0.7rem;
}

.blink-soft {
    animation: blinker 2s linear infinite;
}
@keyframes blinker {
    50% { opacity: 0.6; }
}

/* Modale di assegnazione: menu «Sposta» sopra il modale e riga secondaria delle voci di Tom Select */
.planning-menu-sposta { min-width: 300px; z-index: 1070; }
.planning-voce-sotto { font-size: 0.75rem; }
/* Intestazione del modale: sfondo scuro, così il titolo bianco si legge */
.modal-header.theme-bg-primary { background-color: var(--theme-blue-color); color: var(--colore-superficie); }

/* Dimensioni del testo delle card e del calendario (erano in linea) */
.planning-testo-60, .badge.planning-testo-60 { font-size: 0.6rem; }
.planning-testo-65, .badge.planning-testo-65 { font-size: 0.65rem; }
.planning-testo-70, .badge.planning-testo-70 { font-size: 0.7rem; }
.planning-testo-75, .badge.planning-testo-75 { font-size: 0.75rem; }

/* Card del kanban colorata dal percorso: il colore arriva da --colore-percorso (colori.css) */
.planning-card.planning-card-colore {
    background-color: color-mix(in srgb, var(--colore-percorso, #ffffff) 15%, var(--bs-card-bg, white));
    border-radius: 12px;
}

/* Mobile responsive adjustments */
@media (max-width: 992px) {
    .planning-day-col {
        min-width: 250px; /* Più largo su mobile per scorrere */
    }
}
/* ==========================================================================
   PLANNING TABELLARE & PERSONALE
   ========================================================================== */

/* --- Tabella Matrice con Sticky Headers --- */
.table-matrix-container {
    max-height: 75vh;
    overflow: auto;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.table-matrix {
    margin-bottom: 0;
    font-size: 0.85rem;
    border-collapse: separate; /* Necessario per sticky */
    border-spacing: 0;
}

.table-matrix th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    color: #495057;
    font-weight: 600;
    padding: 12px;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Prima colonna (Operatore) fissa a sinistra */
.table-matrix td:first-child,
.table-matrix th:first-child {
    position: sticky;
    left: 0;
    background-color: #fff;
    z-index: 11; /* Sopra gli altri header */
    border-right: 2px solid #e9ecef;
    min-width: 180px;
}
.table-matrix th:first-child {
    z-index: 12; /* Angolo in alto a sinistra sempre sopra tutto */
    background-color: #f8f9fa;
}

.table-matrix td {
    border-bottom: 1px solid #ebedf3;
    border-right: 1px solid #f0f0f0;
    padding: 8px;
    vertical-align: middle;
}

.table-matrix tr:hover td {
    background-color: #fcfcfc;
}
/* Fix hover sulla colonna sticky */
.table-matrix tr:hover td:first-child {
    background-color: #fcfcfc; 
}

/* Badge turno nella cella */
.turno-badge {
    display: block;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 0.75rem;
    margin-bottom: 4px;
    border-left: 3px solid transparent; /* Colore dinamico */
    background-color: #f8f9fa;
    color: #333;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: transform 0.1s;
}
.turno-badge:hover {
    transform: scale(1.02);
    text-decoration: none;
    color: #000;
}

/* --- Timeline Personale (Agenda View) --- */
.timeline-list {
    position: relative;
    padding-left: 20px;
}
.timeline-list::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e9ecef;
}

.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
    padding-left: 1rem;
}

.timeline-dot {
    position: absolute;
    left: -25px;
    top: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--primary-accent);
    z-index: 1;
}

.timeline-date {
    font-size: 0.85rem;
    color: #adb5bd;
    font-weight: 600;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.stat-card-mini {
    background: #fff;
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    border: 1px solid #f0f0f0;
}
.stat-card-mini .stat-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
}
.stat-card-mini .stat-value { font-size: 1.25rem; font-weight: 700; color: #333; line-height: 1; }
.stat-card-mini .stat-label { font-size: 0.75rem; color: #6c757d; text-transform: uppercase; }

/* Colore del percorso (da --colore-percorso, colori.css): bordo del turno, banda e voce del calendario */
.turno-badge.planning-bordo-colore { border-left-color: var(--colore-percorso, var(--primary-accent)); }
.planning-banda-colore { height: 4px; background-color: var(--colore-percorso, var(--primary-accent)); }
.border.planning-voce-mese {
    background-color: #fff;
    border-left: 3px solid var(--colore-percorso, var(--primary-accent)) !important;
    font-size: 0.75rem;
}

/* Icone tonde del Calendario Personale e della Vista Tabellare */
.icon-box.planning-icona-grande { width: 48px; height: 48px; font-size: 1.5rem; }
.icon-box.planning-icona-piccola { width: 28px; height: 28px; font-size: 0.8rem; }

/* Calendario Personale: barra e selettore */
.planning-etichetta-periodo { min-width: 150px; text-align: center; }
select.planning-selettore-persona { max-width: 180px; }

/* Calendario Personale: vista settimana */
.card-custom.planning-contenitore-settimana { overflow: hidden; }
.planning-colonna-giorno-persona { width: 200px; min-width: 200px; display: flex; flex-direction: column; }
.planning-corpo-giorno-persona { min-height: 150px; }
.badge.planning-badge-modello { max-width: 100%; font-size: 0.65rem; }
.planning-spaziatore-coda { min-width: 5px; }

/* Calendario Personale: vista mese */
.planning-griglia-mese-intestazione { grid-template-columns: repeat(7, 1fr); padding: 10px 0; }
.planning-griglia-mese { grid-template-columns: repeat(7, 1fr); min-height: 500px; }
.planning-cella-mese { min-height: 100px; }

/* Vista Tabellare */
.btn.planning-bottone-periodo { min-width: 220px; }
.table-matrix th.planning-colonna-operatore:first-child { min-width: 200px; }

/* ==========================================================================
   GRAFICA 2.0: COMPONENTI CONDIVISI (piattaforma/templates/componenti/) E ACCESSIBILITÀ
   ========================================================================== */

/* --- Collegamento "Vai al contenuto": nascosto finché non riceve il focus --- */
.salta-contenuto {
    position: absolute;
    left: var(--spazio-3);
    top: -100px;
    z-index: 2000;
    padding: var(--spazio-2) var(--spazio-3);
    background-color: var(--colore-superficie);
    color: var(--colore-focus);
    border: 2px solid var(--colore-focus);
    border-radius: var(--raggio-interno);
    font-weight: 600;
}
.salta-contenuto:focus { top: var(--spazio-3); }
#contenuto:focus { outline: none; }

/* --- Piede con l'informativa sui cookie: contrasto di almeno 4,5:1 sullo sfondo e bersaglio di almeno 24px --- */
:root { --altezza-piede: 2.75rem; }
.piede-informativa {
    display: flex;
    align-items: center;
    min-height: var(--altezza-piede);
    padding: 0 var(--spazio-3);
    border-top: 1px solid var(--colore-bordo);
    background-color: var(--colore-sfondo);
    font-size: var(--testo-piccolo);
}
.piede-informativa a {
    display: inline-flex;
    align-items: center;
    min-height: var(--bersaglio-minimo);
    padding: 0 var(--spazio-1);
    color: var(--colore-focus);
    text-decoration: underline;
}
@media (max-width: 576px), (pointer: coarse) {
    :root { --altezza-piede: 3rem; }
    .piede-informativa a { min-height: 44px; }
}
/* Il contenuto delle pagine del setup: le schede restano centrate come fuori da main */
.wizard-contenuto { display: flex; flex-direction: column; align-items: center; width: 100%; }
.wizard-inizio { display: inline-flex; align-items: center; min-height: var(--bersaglio-minimo); font-size: var(--testo-piccolo); color: var(--colore-focus); }
@media (max-width: 576px), (pointer: coarse) { .wizard-inizio { min-height: 44px; } }

/* --- Focus sempre visibile, con un'alternativa dove Bootstrap toglie l'outline --- */
:focus-visible { outline: 3px solid var(--colore-focus); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible {
    outline: 3px solid var(--colore-focus);
    outline-offset: 2px;
}
.sidebar-menu :focus-visible, .menu-pannello :focus-visible, .torna-al-settore:focus-visible { outline: 3px solid #ffffff; outline-offset: -3px; }
/* Bootstrap toglie l'outline a chiusura e paginazione con una regola più specifica; nei toast colorati il focus è bianco */
.btn-close:focus-visible, .page-link:focus-visible { outline: 3px solid var(--colore-focus); outline-offset: 2px; }
.toast .btn-close:focus-visible { outline-color: #ffffff; }
/* La chiusura del menu sta sul fondo scuro: il focus blu scenderebbe a 2,5:1, bianco supera 3:1 */
.menu-pannello .btn-close:focus-visible { outline-color: #ffffff; }
/* La X dei toast si vede (4,5:1): i toast di errore restano finché non si chiudono */
.toast .btn-close { opacity: 1; }
/* I pulsanti outline sullo sfondo grigio della pagina scenderebbero sotto 4,5:1: hanno lo sfondo della superficie */
[class*="btn-outline-"]:not(.btn-outline-light) { --bs-btn-bg: var(--colore-superficie); }
.btn-outline-primary { --bs-btn-color: var(--colore-focus); }

/* --- Intestazione dell'app: il profilo è un pulsante --- */
button.user-profile-widget { border: 0; background: transparent; text-align: inherit; color: inherit; }

/* --- Intestazione di pagina --- */
.pagina-intestazione {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spazio-3);
    margin-bottom: var(--spazio-4);
}
.pagina-intestazione h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0; color: var(--colore-testo); }
.pagina-intestazione .pagina-sottotitolo { color: var(--colore-testo-secondario); margin-bottom: 0; }
.pagina-azioni { display: flex; flex-wrap: wrap; gap: var(--spazio-2); }

/* --- Schede di una pagina: collegamenti veri, a capo su schermi stretti, con la corrente segnata anche da bordo e peso --- */
.pagina-intestazione:has(+ .schede-pagina) { margin-bottom: var(--spazio-3); }
.schede-pagina { margin-bottom: var(--spazio-4); border-bottom: 1px solid var(--colore-bordo); }
.densita-media .schede-pagina { margin-bottom: var(--gap-griglia); }
.schede-elenco { display: flex; flex-wrap: wrap; flex-wrap: balance; gap: var(--spazio-1) var(--spazio-2); margin: 0; padding: 0; list-style: none; }
.scheda-link {
    display: inline-flex; align-items: center; justify-content: center; min-width: var(--bersaglio-minimo); min-height: 40px;
    padding: 0 var(--spazio-3); margin-bottom: -1px; border-bottom: 3px solid transparent; border-radius: var(--raggio-interno) var(--raggio-interno) 0 0;
    color: var(--colore-testo-secondario); font-weight: 500; text-decoration: none; transition: background-color 0.2s, color 0.2s;
}
.scheda-link:hover { background-color: var(--colore-hover); color: var(--colore-testo); }
.scheda-link.attiva { border-bottom-color: var(--colore-focus); color: var(--colore-focus); font-weight: 700; }
.densita-media .scheda-link { min-height: var(--altezza-scheda); }
@media (max-width: 576px), (pointer: coarse) { .scheda-link, .densita-media .scheda-link { min-width: 44px; min-height: 44px; } }

/* --- Card con dash-header / dash-body --- */
.card-dash {
    background-color: var(--colore-superficie);
    border-radius: var(--raggio-card);
    box-shadow: var(--ombra-riposo);
    margin-bottom: var(--spazio-4);
    break-inside: avoid;
    transition: transform 0.2s, box-shadow 0.2s;
}
.card-dash:hover { transform: translateY(-2px); box-shadow: var(--ombra-hover); }
.card-dash .dash-header {
    display: flex;
    align-items: center;
    gap: var(--spazio-2);
    padding: var(--spazio-3) 1.25rem;
    border-bottom: 1px solid var(--colore-bordo);
}
.card-dash .dash-header h2, .card-dash .dash-header h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0; }
.card-dash .dash-header .dash-header-azioni { margin-left: auto; display: flex; gap: var(--spazio-2); }
.card-dash .dash-body { padding: 1.25rem; }
.card-dash .dash-body.p-0 { padding: 0; }

/* --- Tabella --- */
.tabella-dash { margin-bottom: 0; }
.tabella-dash > thead th {
    background-color: var(--colore-hover);
    color: var(--colore-testo);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    border-bottom: 1px solid var(--colore-bordo);
}
.tabella-dash td, .tabella-dash th { vertical-align: middle; }
/* overflow-x di table-responsive rende auto anche l'asse verticale: una tabella più alta di 1 px per gli arrotondamenti mostrava
   una barra verticale. Le righe stanno tutte nel contenitore, che cresce con loro; lo scorrimento orizzontale resta */
.tabella-contenitore { overflow-y: hidden; }
.tabella-contenitore:focus-visible { outline-offset: -3px; }

/* --- Badge di stato: colore più icona più testo --- */
.badge-stato {
    display: inline-flex;
    align-items: center;
    gap: var(--spazio-1);
    padding: 0.25em 0.6em;
    border-radius: var(--raggio-interno);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
}

/* --- Stato vuoto --- */
.stato-vuoto { text-align: center; padding: 2rem var(--spazio-3); color: var(--colore-testo-secondario); }
.stato-vuoto .icon-box { margin: 0 auto var(--spazio-3); width: 48px; height: 48px; font-size: 1.5rem; }
.stato-vuoto p { margin-bottom: var(--spazio-2); }

/* --- Form: campi obbligatori ed errori --- */
.etichetta-obbligatorio { color: var(--theme-red-color); font-weight: 400; font-size: 0.85em; }
.campo-dash .form-control, .campo-dash .form-select, .filtri-dash .form-control, .filtri-dash .form-select {
    border-color: var(--colore-bordo-campo);
}
.campo-dash .form-check { padding-left: 2rem; }
.campo-dash .form-check-input { width: var(--bersaglio-minimo); height: var(--bersaglio-minimo); margin-left: -2rem; margin-top: 0; }
.errore-campo { color: var(--theme-red-color); font-size: 0.875rem; margin-top: var(--spazio-1); }
.errore-campo .bi { margin-right: var(--spazio-1); }
.aiuto-campo { color: var(--colore-testo-secondario); font-size: 0.875rem; margin-top: var(--spazio-1); }

/* --- Filtri: i campi allineati in alto; i pulsanti e le caselle sulla riga dei campi, sotto lo spazio dell'etichetta --- */
:root { --altezza-etichetta-campo: calc(1.5rem + var(--spazio-2)); --altezza-campo: 2.375rem; }
.filtri-dash .row { row-gap: var(--spazio-3); align-items: flex-start; }
.filtri-dash .filtri-azioni { display: flex; gap: var(--spazio-2); align-items: flex-start; padding-top: var(--altezza-etichetta-campo); }
.filtri-dash .campo-dash > .form-check { margin-top: calc(var(--altezza-etichetta-campo) + (var(--altezza-campo) - var(--bersaglio-minimo)) / 2); }

/* --- Bersagli di almeno 24x24 px, 44x44 px su schermi piccoli --- */
.btn, .page-link, .btn-close { min-width: var(--bersaglio-minimo); min-height: var(--bersaglio-minimo); }
/* Casella di scelta di una riga di tabella, senza etichetta visibile accanto: il bersaglio è la casella stessa */
.casella-riga { width: var(--bersaglio-minimo); height: var(--bersaglio-minimo); margin-top: 0; }
@media (max-width: 576px) {
    .card-dash .btn, .pagina-intestazione .btn, .filtri-dash .btn, .paginazione-dash .page-link { min-width: 44px; min-height: 44px; }
    .toast .btn-close, .main-container .btn-sm { min-width: 44px; min-height: 44px; }
    .casella-riga { width: 44px; height: 44px; }
    .consuntivo-riga .form-control-sm, .consuntivo-riga .form-select-sm { min-height: 44px; }
}
/* Con il tocco ogni pulsante ha un'area di almeno 44x44 px */
@media (pointer: coarse) { .btn, .page-link, .btn-close { min-width: 44px; min-height: 44px; } }
/* Moduli che si compilano dal telefono: campi e caselle da 44 px */
@media (max-width: 576px), (pointer: coarse) {
    .modulo-telefono .form-control, .modulo-telefono .form-select, .modulo-telefono .ts-control { min-height: 44px; }
    .modulo-telefono .form-check { min-height: 44px; display: flex; align-items: center; }
}

/* --- Valori lunghi (JSON, testo tecnico): vanno a capo anche con lo zoom al 200% --- */
.valore-blocco {
    background-color: var(--colore-hover);
    border: 1px solid var(--colore-bordo);
    border-radius: var(--raggio-interno);
    padding: var(--spazio-2);
    font-size: 0.875rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin-bottom: 0;
}

/* --- Testo secondario leggibile anche sullo sfondo della pagina --- */
.testo-secondario { color: var(--colore-testo-secondario); }

/* --- Testo con i capoversi scritti nell'attributo (conferme) --- */
.testo-a-capo { white-space: pre-line; }

/* --- Flex che rispetta hidden: d-flex vincerebbe sull'attributo --- */
.flex-se-visibile:not([hidden]) { display: flex; }

/* --- Movimento ridotto: niente sollevamenti né scorrimenti --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
    .card-custom:hover, .card-dash:hover, .dash-item:hover, .sidebar-menu .nav-link:hover i { transform: none; }
    .planning-servizi-card:hover { transform: none; }
    .riga-collegata:hover { transform: none; }
    /* Le sezioni del menu si aprono e si chiudono senza animazione */
    .menu-sezione-corpo, .menu-sezione.chiusa .menu-sezione-corpo, .nav-label-pulsante i { transition: none; }
}

/* ==========================================================================
   CAMPANELLA DELLE NOTIFICHE E PAGINE DELLE NOTIFICHE
   ========================================================================== */

/* --- Pulsante nella barra in alto: bersaglio di 36 px, 44 px su schermi piccoli e con il tocco --- */
.campanella-pulsante {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: var(--bersaglio-minimo);
    min-height: var(--bersaglio-minimo);
    padding: 0;
    border: 1px solid var(--colore-bordo);
    border-radius: var(--raggio-interno);
    background-color: var(--colore-superficie);
    color: var(--colore-testo-secondario);
    transition: background-color 0.2s, color 0.2s;
}
.campanella-pulsante:hover, .campanella-pulsante[aria-expanded="true"] { background-color: var(--colore-hover); color: var(--colore-focus); }
.campanella-pulsante .bi { font-size: 1.25rem; }
/* Dopo la regola di base, così vince: 44 px sugli schermi piccoli e con il tocco a ogni larghezza */
@media (max-width: 576px), (pointer: coarse) { .campanella-pulsante { width: 44px; height: 44px; } }

/* --- Numero dei non letti: decorativo, il testo per esteso è nel nome del pulsante --- */
.campanella-numero {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--spazio-1);
    border-radius: 10px;
    background-color: var(--theme-red-color);
    color: var(--colore-superficie);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* --- Elenco delle ultime: va a capo e scorre, anche con lo zoom al 200% --- */
.campanella-elenco { width: min(22rem, 92vw); max-height: 70vh; overflow-y: auto; }
.campanella-elenco .dropdown-item { white-space: normal; }
/* Il menu scorre: il bordo del focus va dentro la voce, o verrebbe tagliato */
.campanella-elenco .dropdown-item:focus-visible { outline-offset: -3px; }
.campanella-voce { display: flex; flex-direction: column; gap: 2px; padding-top: var(--spazio-2); padding-bottom: var(--spazio-2); }
.campanella-voce-titolo { font-weight: 600; }
.campanella-voce-titolo .badge-stato { margin-right: var(--spazio-1); }
.campanella-voce-testo, .campanella-voce-data { color: var(--colore-testo-secondario); font-size: 0.85rem; overflow-wrap: anywhere; }

/* --- Elenchi delle notifiche, delle preferenze e delle regole --- */
.tabella-dash th.notifica-cella { font-weight: 400; min-width: 12rem; }
.tabella-dash td.notifica-testo-cella { min-width: 16rem; }
.notifica-titolo { display: block; font-weight: 600; }
.notifica-testo { display: block; color: var(--colore-testo-secondario); white-space: pre-line; overflow-wrap: anywhere; }
.notifica-cella .badge-stato { margin-bottom: var(--spazio-1); }
.tabella-dash tr.notifica-nuova > th:first-child { border-left: 3px solid var(--theme-blue-color); }
.elenco-destinatari li + li { margin-top: var(--spazio-1); }
.schede-notifiche .nav-link { min-height: var(--bersaglio-minimo); }
/* Il pulsante che toglie un destinatario scelto con Tom Select: almeno 24 px */
#blocco-destinatari .plugin-remove_button .item .remove { min-width: var(--bersaglio-minimo); min-height: var(--bersaglio-minimo); text-align: center; }

/* ==========================================================================
   CONFIGURAZIONE DEL BASE
   ========================================================================== */

/* --- Collegamento nella prima cella delle tabelle: contrasto pieno anche sulla riga evidenziata --- */
.collegamento-riga { color: var(--colore-focus); font-weight: 600; }
/* Riga che apre il dettaglio: il collegamento della prima cella si allarga a tutta la riga, i pulsanti restano sopra */
.riga-tabella-collegata { position: relative; }
.riga-tabella-collegata .collegamento-riga::after { content: ''; position: absolute; inset: 0; }
.riga-tabella-collegata .btn { position: relative; z-index: 1; }

/* --- Testi lunghi scritti a mano: conservano gli a capo e non escono dalla colonna --- */
.testo-a-capo { white-space: pre-line; overflow-wrap: anywhere; }

/* --- Righe ripetute di un modulo (tratti, voci): una cornice per riga --- */
.riga-modulo {
    border: 1px solid var(--colore-bordo);
    border-radius: var(--raggio-interno);
    padding: var(--spazio-2) var(--spazio-3) var(--spazio-3);
    margin-bottom: var(--spazio-3);
}

/* --- Caselle dei moduli e delle tabelle: il bordo si vede (3:1) come quello degli altri campi --- */
.modulo-configurazione .form-check-input, .campo-dash .form-check-input, .casella-riga { border-color: var(--colore-bordo-campo); }

/* ==========================================================================
   GESTIONE DEI JOB
   ========================================================================== */

/* --- Giorni della settimana e azioni: affiancati, bersagli da 44 px su mobile --- */
.giorni-job { display: flex; flex-wrap: wrap; column-gap: var(--spazio-4); }
.azioni-job { display: flex; flex-wrap: wrap; gap: var(--spazio-3); }
@media (max-width: 767.98px) {
    .azioni-job .btn, #job-pianificazione .btn { min-height: 44px; }
    .giorni-job .campo-dash .form-check { min-height: 44px; display: flex; align-items: center; }
}

/* --- Log di una esecuzione: va a capo, scorre e non allarga la pagina --- */
.cella-log { min-width: 12rem; }
.log-esecuzione {
    max-height: 20rem;
    max-width: 100%;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--theme-gray-bg);
    color: var(--colore-testo);
    border-radius: var(--raggio-interno);
    padding: var(--spazio-2) var(--spazio-3);
    margin: var(--spazio-2) 0 0;
    font-size: 0.85rem;
}

/* --- Elenco di definizione in una card: etichetta e valore affiancati da tablet in su --- */
.elenco-definizioni dt { font-weight: 600; }
.elenco-definizioni dd { margin-bottom: var(--spazio-2); }
@media (min-width: 768px) {
    .elenco-definizioni { display: grid; grid-template-columns: 14rem 1fr; column-gap: var(--spazio-3); }
}

/* --- Verifica in due passaggi: QR, segreto e codici di recupero --- */
.qr-2fa-contenitore { display: block; width: fit-content; max-width: 100%; margin-inline: auto; background: var(--colore-superficie); padding: var(--spazio-2); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-interno); }
.qr-2fa { display: block; width: 14rem; max-width: 100%; height: auto; aspect-ratio: 1; background: var(--colore-superficie); overflow: visible; }
.passi-2fa { padding-left: 0; list-style: none; counter-reset: passo; }
.passi-2fa > li { counter-increment: passo; margin-bottom: var(--spazio-4); }
.passi-2fa > li > h3::before { content: counter(passo) ". "; }
.codici-recupero { list-style: none; padding: var(--spazio-3); margin: 0 0 var(--spazio-3); display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--spazio-2); background: var(--colore-superficie); border: 1px solid var(--colore-bordo-campo); border-radius: var(--raggio-interno); }
.codici-recupero li { font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 1.1rem; letter-spacing: 0.05em; color: var(--colore-testo); }
@media print {
    body:has(.area-stampa) * { visibility: hidden; }
    body:has(.area-stampa) .area-stampa, body:has(.area-stampa) .area-stampa * { visibility: visible; }
    body:has(.area-stampa) .area-stampa { position: absolute; left: 0; top: 0; width: 100%; }
}

/* ===== Indicatore di HTMX: le regole che HTMX inserirebbe in un <style>, con lo stesso effetto ===== */
.htmx-indicator { display: none; opacity: 0; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; opacity: 1; transition: opacity 200ms ease-in; }

/* ===== Planning dei servizi ===== */
.planning-servizi-caricamento { min-height: 1.5rem; margin-bottom: var(--spazio-2); color: var(--colore-testo-secondario); }
.planning-servizi-barra { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--spazio-3); margin-bottom: var(--spazio-3); }
.planning-servizi-gruppo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-2); }
.planning-servizi-riepilogo { margin-bottom: var(--spazio-2); color: var(--colore-testo); }
.planning-servizi-avviso-riepilogo { margin-left: var(--spazio-3); color: var(--theme-warning-color); }
.planning-servizi-avviso-riepilogo .bi, .planning-servizi-segno-avviso .bi { margin-right: var(--spazio-1); }

/* La griglia: sette colonne affiancate con scorrimento orizzontale, una sopra l'altra sugli schermi stretti */
#griglia-planning:focus-visible { outline: 2px solid var(--colore-focus); outline-offset: 2px; }
.planning-servizi-griglia { display: grid; grid-template-columns: 1fr; gap: var(--spazio-3); }
@media (min-width: 1200px) {
    .planning-servizi-griglia { grid-template-columns: repeat(7, minmax(12rem, 1fr)); overflow-x: auto; padding-bottom: var(--spazio-2); }
}
.planning-servizi-giorno { min-width: 0; padding: var(--spazio-2); background: var(--colore-superficie); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-card); }
.planning-servizi-oggi { border-color: var(--colore-focus); border-width: 2px; }
.planning-servizi-giorno-titolo { font-size: 1.05rem; margin: 0 0 var(--spazio-2); color: var(--colore-testo); }
.planning-servizi-data { color: var(--colore-testo-secondario); font-weight: 400; }
.planning-servizi-etichetta-oggi { background: var(--theme-blue-bg); color: var(--theme-blue-color); border-radius: var(--raggio-interno); padding: 0 var(--spazio-2); font-size: 0.8rem; }
.planning-servizi-fascia { font-size: 0.85rem; margin: var(--spazio-2) 0 var(--spazio-1); color: var(--colore-testo-secondario); text-transform: uppercase; letter-spacing: 0.03em; }
.planning-servizi-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spazio-2); }
.planning-servizi-nessuna { color: var(--colore-testo-secondario); margin: 0; }

/* La card */
.planning-servizi-card { display: flex; flex-direction: column; gap: var(--spazio-1); width: 100%; min-height: var(--bersaglio-minimo); text-align: left;
    padding: var(--spazio-2); font: inherit; color: var(--colore-testo); background: var(--colore-superficie);
    border: 1px solid var(--colore-bordo); border-radius: var(--raggio-card); box-shadow: var(--ombra-riposo); cursor: pointer; break-inside: avoid; }
.planning-servizi-card:hover { background: var(--colore-hover); box-shadow: var(--ombra-hover); }
.planning-servizi-card:focus-visible { outline: 3px solid var(--colore-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
    .planning-servizi-card { transition: box-shadow 0.15s ease, transform 0.15s ease; }
    .planning-servizi-card:hover { transform: translateY(-2px); }
}
@media (max-width: 767.98px) { .planning-servizi-card { min-height: 44px; } }
.planning-servizi-card-nome { font-weight: 600; }
.planning-servizi-variante { font-weight: 400; color: var(--colore-testo-secondario); }
.planning-servizi-riga { font-size: 0.875rem; color: var(--colore-testo-secondario); }
.planning-servizi-riga .bi, .planning-servizi-scoperto .bi { margin-right: var(--spazio-1); }
.planning-servizi-turno { font-size: 0.875rem; color: var(--colore-testo); }
.planning-servizi-turno-annullato { text-decoration: line-through; }
.planning-servizi-nota-annullato { text-decoration: none; display: inline-block; color: var(--colore-testo-secondario); }
.planning-servizi-scoperto { color: var(--theme-red-color); }
.planning-servizi-stato { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-1); margin-top: var(--spazio-1); }
.planning-servizi-segno-avviso { font-size: 0.8rem; color: var(--theme-warning-color); }

/* Il modale della squadra */
.planning-servizi-riepilogo-squadra { display: grid; grid-template-columns: max-content 1fr; gap: var(--spazio-1) var(--spazio-3); margin-bottom: var(--spazio-3); }
.planning-servizi-riepilogo-squadra dt { font-weight: 600; }
.planning-servizi-riepilogo-squadra dd { margin: 0; }
.planning-servizi-turni { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spazio-2); }
.planning-servizi-turno-modale { padding: var(--spazio-2); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-interno); }
.planning-servizi-turno-testa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-2); margin-bottom: var(--spazio-2); }

/* Le viste per operatore e tabellare: la scelta della vista, i cantieri a sinistra e le tabelle a destra */
.planning-viste-scelta { list-style: none; margin: 0; padding: 0; }
#vista-planning:focus-visible { outline: 2px solid var(--colore-focus); outline-offset: 2px; }
.planning-operatori { display: grid; grid-template-columns: 1fr; gap: var(--spazio-3); }
@media (min-width: 992px) { .planning-operatori { grid-template-columns: 18rem minmax(0, 1fr); } }
.planning-cantieri { padding: var(--spazio-3); background: var(--colore-superficie); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-card); align-self: start; }
.planning-cantieri-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spazio-1); }
.planning-cantieri-lista a { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--spazio-2); min-height: var(--bersaglio-minimo); padding: var(--spazio-2);
    color: var(--colore-testo); text-decoration: none; border-radius: var(--raggio-interno); border: 1px solid transparent; }
.planning-cantieri-lista a:hover { background: var(--colore-hover); }
.planning-cantieri-lista a[aria-current] { border-color: var(--colore-focus); background: var(--theme-blue-bg); font-weight: 600; }
.planning-cantieri-nome { grid-column: 1; }
.planning-cantieri-cdc { grid-column: 1; font-size: 0.8rem; color: var(--colore-testo-secondario); font-weight: 400; }
.planning-cantieri-ore { grid-column: 2; grid-row: 1; white-space: nowrap; }
.planning-cantieri-tabelle { display: flex; flex-direction: column; gap: var(--spazio-3); min-width: 0; }
.planning-cantiere-dati { display: flex; flex-wrap: wrap; gap: var(--spazio-1) var(--spazio-3); color: var(--colore-testo-secondario); }
.planning-tabella-operatori th, .planning-tabella-operatori td { vertical-align: top; min-width: 7.5rem; }
.planning-tabella-operatori tfoot th, .planning-tabella-operatori tfoot td { border-top: 2px solid var(--colore-bordo-campo); font-weight: 600; }
/* La colonna dell'operatore resta ferma quando la tabella scorre in orizzontale */
.planning-tabella-operatori tbody th, .planning-tabella-operatori tfoot th, .planning-tabella-operatori thead th:first-child {
    position: sticky; inset-inline-start: 0; z-index: 1; background: var(--colore-superficie); }
.planning-colonna-oggi { background: var(--theme-blue-bg); }
.planning-totale { white-space: nowrap; font-weight: 600; }
/* Un turno nella cella: scoperto e in ipotesi hanno anche il testo, non solo il colore */
.planning-voce { display: flex; flex-wrap: wrap; gap: 0 var(--spazio-1); width: 100%; min-height: var(--bersaglio-minimo); margin-bottom: var(--spazio-1);
    padding: var(--spazio-1) var(--spazio-2); font: inherit; font-size: 0.875rem; text-align: left; color: var(--colore-testo);
    background: var(--colore-superficie); border: 1px solid var(--colore-bordo-campo); border-radius: var(--raggio-interno); }
button.planning-voce { cursor: pointer; }
button.planning-voce:hover { background: var(--colore-hover); }
button.planning-voce:focus-visible { outline: 3px solid var(--colore-focus); outline-offset: 2px; }
@media (pointer: coarse) { .planning-voce { min-height: 44px; } }
.planning-voce-ore { color: var(--colore-testo-secondario); }
.planning-voce-segno { font-weight: 600; }
.planning-voce-pausa { flex-basis: 100%; font-size: 0.8125rem; color: var(--colore-testo-secondario); }
.planning-voce-scoperto { border-color: var(--theme-red-color); background: var(--theme-red-bg); }
.planning-voce-scoperto .planning-voce-segno { color: var(--theme-red-color); }
.planning-voce-ipotesi { border-style: dashed; background: var(--theme-gray-bg); }
/* Le ore in ipotesi nella copertura: il segno è a testo */
.segno-ipotesi { font-size: 0.8rem; font-weight: 600; color: var(--colore-testo-secondario); border: 1px dashed var(--colore-bordo-campo); border-radius: var(--raggio-interno); padding: 0 var(--spazio-1); }
/* I contatori in testa al report presenze */
.presenze-contatori { display: flex; flex-wrap: wrap; gap: var(--spazio-3); margin: 0; }
.presenze-contatori > div { padding: var(--spazio-2) var(--spazio-3); background: var(--colore-superficie); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-interno); }
.presenze-contatori dt { font-size: 0.8rem; font-weight: 400; color: var(--colore-testo-secondario); }
.presenze-contatori dd { margin: 0; font-size: 1.2rem; font-weight: 600; }
/* Titoli di colonna che ordinano la tabella */
.tabella-ordina { display: inline-flex; align-items: center; gap: var(--spazio-1); min-height: var(--bersaglio-minimo); color: inherit; white-space: nowrap; }

/* ===== GPS dei rifiuti ===== */
/* Riquadro di stato: una riga per voce, badge e testo; la sintesi sotto, etichetta e valore affiancati da tablet in su */
.riquadro-stato { list-style: none; margin: 0 0 var(--spazio-3); padding: 0; display: flex; flex-direction: column; gap: var(--spazio-2); }
.riquadro-stato > li { display: flex; align-items: flex-start; gap: var(--spazio-3); }
.riquadro-stato > li > .badge-stato { flex: 0 0 6.5rem; justify-content: center; }
.riquadro-stato-sintesi dt { font-weight: 600; }
.riquadro-stato-sintesi dd { margin: 0 0 var(--spazio-2); }
@media (min-width: 768px) {
    .riquadro-stato-sintesi { display: grid; grid-template-columns: 22rem 1fr; column-gap: var(--spazio-3); }
}
/* La tendina di Tom Select appesa al body sta sopra la modale (z-index 1055 di Bootstrap) */
.ts-dropdown { z-index: 1070; }
/* Caselle di selezione delle vie: bersaglio di almeno 24 px, 44 px con il tocco */
.casella-selezione { width: 1.5rem; height: 1.5rem; margin-top: 0; }
@media (pointer: coarse) { .casella-selezione { width: 2.75rem; height: 2.75rem; } }

/* ===== Pagine di consultazione del GPS ===== */
/* Indicatori: un elenco di definizione, etichetta e valore in ogni riquadro */
.gps-indicatori { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--spazio-3); margin: 0; }
.gps-indicatori > div { border: 1px solid var(--colore-bordo); border-radius: var(--raggio-interno); padding: var(--spazio-3); background: var(--colore-superficie); }
.gps-indicatori dt { font-size: 0.85rem; font-weight: 600; color: var(--colore-testo-secondario); }
.gps-indicatori dd { margin: var(--spazio-1) 0 0; font-size: 1.25rem; font-weight: 700; }
.gps-indicatori dd .gps-dettaglio { display: block; font-size: 0.85rem; font-weight: 400; color: var(--colore-testo-secondario); }
/* Intestazioni ordinabili: il link riempie la cella e resta un bersaglio di almeno 24 px */
.gps-ordinabile > thead th a { display: inline-flex; align-items: center; gap: var(--spazio-1); min-height: var(--bersaglio-minimo); color: inherit; text-decoration: none; }
.gps-ordinabile > thead th a:hover { text-decoration: underline; }
/* Coppie etichetta e valore della scheda del servizio */
.gps-coppie { display: grid; grid-template-columns: max-content 1fr; gap: var(--spazio-1) var(--spazio-3); margin: 0 0 var(--spazio-3); }
.gps-coppie dt { font-weight: 600; }
.gps-coppie dd { margin: 0; }
/* Mappa e legenda */
:root { --gps-tracciato: #0a58ca; --gps-sosta: #b45309; --gps-via-servita: #146c43; --gps-via-non-servita: #b02a37; --gps-via-nuova: #6f42c1; }
/* Altezza fissa, non minima: la mappa di OpenLayers occupa il 100% del contenitore, e con la sola min-height resta alta 0 */
.gps-mappa { height: 28rem; border: 1px solid var(--colore-bordo); border-radius: var(--raggio-interno); overflow: hidden; }
/* Il nome della via o della sosta sulla mappa; i comandi di OpenLayers restano quelli della libreria */
.gps-mappa-popup { background: var(--colore-superficie); color: var(--colore-testo); border: 1px solid var(--colore-bordo); border-radius: var(--raggio-interno); box-shadow: var(--ombra-riposo); padding: var(--spazio-1) var(--spazio-2); max-width: 16rem; font-size: 0.875rem; overflow-wrap: anywhere; }
/* I comandi di zoom: bersagli di almeno 24 px, 44 px su schermo a tocco */
.gps-mappa .ol-control button { width: 2rem; height: 2rem; font-size: 1.25rem; }
@media (pointer: coarse) { .gps-mappa .ol-control button { width: 2.75rem; height: 2.75rem; } }
.gps-segnaposto-mappa { border: 1px dashed var(--colore-bordo-campo); border-radius: var(--raggio-interno); padding: var(--spazio-4); background: var(--colore-hover); color: var(--colore-testo-secondario); }
.gps-legenda { list-style: none; margin: var(--spazio-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--spazio-2) var(--spazio-3); }
/* Giorni di un percorso nell'elenco dei servizi */
.gps-giorni summary, .card-dash details > summary { cursor: pointer; min-height: var(--bersaglio-minimo); }
.gps-giorni ul { list-style: none; margin: var(--spazio-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--spazio-2); }
.gps-giorni li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-2) var(--spazio-3); }

/* ===== Settimana del piano delle attività ===== */
.barra-avanzamento { display: block; width: 100%; height: 0.75rem; appearance: none; border: 0; border-radius: var(--raggio-interno); background-color: var(--colore-bordo); overflow: hidden; }
.barra-avanzamento::-webkit-progress-bar { background-color: var(--colore-bordo); border-radius: var(--raggio-interno); }
.barra-avanzamento::-webkit-progress-value { background-color: var(--bs-success, #198754); border-radius: var(--raggio-interno); }
.barra-avanzamento::-moz-progress-bar { background-color: var(--bs-success, #198754); border-radius: var(--raggio-interno); }
.cella-esito { min-width: 9rem; vertical-align: top; }
.cella-esito:focus-visible { outline: 3px solid var(--colore-focus); outline-offset: -3px; }
.cella-esito summary { cursor: pointer; }

/* --- Pagina con la colonna dei filtri a sinistra (filtri_laterali in componenti/filtri.html) --- */
:root { --larghezza-filtri: 242px; }
.pagina-con-filtri { display: grid; gap: var(--spazio-4); }
@media (min-width: 992px) { .pagina-con-filtri { grid-template-columns: var(--larghezza-filtri) minmax(0, 1fr); align-items: start; } }
.filtri-laterali-azioni { display: flex; flex-wrap: wrap; gap: var(--spazio-2); }
.filtri-scelta { display: flex; justify-content: space-between; align-items: center; gap: var(--spazio-2); min-height: var(--bersaglio-minimo); padding: var(--spazio-1) var(--spazio-2); border-radius: var(--raggio-interno); color: var(--colore-testo); text-decoration: none; }
.filtri-scelta:hover { background-color: var(--colore-hover); color: var(--colore-testo); }
.filtri-scelta.attiva { background-color: var(--theme-blue-bg); color: var(--theme-blue-color); font-weight: 600; }
.filtri-conteggio { padding: 0 var(--spazio-2); border-radius: var(--raggio-interno); background-color: var(--theme-gray-bg); color: var(--theme-gray-color); font-size: 0.8rem; font-weight: 600; }
@media (max-width: 576px) { .filtri-scelta { min-height: 44px; } }

/* --- Elenco a righe: tutta la riga porta alla pagina dell'elemento --- */
.elenco-righe { list-style: none; margin: 0; padding: 0; }
.elenco-righe > li + li { border-top: 1px solid var(--colore-bordo); }
.ordine-elenco { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-1) var(--spazio-3); padding: var(--spazio-2) 1rem; border-bottom: 1px solid var(--colore-bordo); font-size: var(--testo-piccolo); }
.ordine-elenco a[aria-current] { font-weight: 600; }
/* Collegamenti dell'ordine: almeno 24 px, 44 px sul telefono e con il tocco */
.ordine-elenco a { display: inline-flex; align-items: center; min-height: 24px; }
@media (max-width: 576px), (pointer: coarse) { .ordine-elenco a { min-height: 44px; min-width: 44px; } }
.elenco-conteggio { margin: 0; padding: var(--spazio-2) 1rem; border-bottom: 1px solid var(--colore-bordo); color: var(--colore-testo-secondario); }
.riga-collegata { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spazio-2) var(--spazio-3); min-height: 44px; padding: 0.75rem 1rem; color: var(--colore-testo); text-decoration: none; }
.riga-collegata:hover { background-color: var(--colore-hover); color: var(--colore-testo); }
.riga-collegata:focus-visible { outline-offset: -3px; }
.riga-collegata-titolo { display: block; font-weight: 600; }
.riga-collegata-sotto { display: block; color: var(--colore-testo-secondario); font-size: 0.875rem; overflow-wrap: anywhere; }
.riga-collegata-badge { display: flex; flex-wrap: wrap; gap: var(--spazio-1); }
@media (prefers-reduced-motion: no-preference) {
    .riga-collegata { transition: background-color 0.15s ease, transform 0.15s ease; }
    .riga-collegata:hover { transform: translateX(4px); }
}

/* ==========================================================================
   GRAFICA 2.0: DENSITÀ MEDIA E COMPONENTI DELLE PAGINE COMPATTE
   (macro in piattaforma/templates/componenti/: percorso, schede_sezione, fascia_numeri, barra_filtri,
   tabella_paginata, dettaglio_due_colonne, pannello_home, modale_form)
   ========================================================================== */

/* --- Testo della densità media sul corpo delle pagine che la usano --- */
body.densita-media { --bs-body-font-size: var(--testo-base); font-size: var(--testo-base); }

/* --- Percorso --- */
.percorso { --bs-breadcrumb-divider: '›'; --bs-breadcrumb-margin-bottom: 0; --bs-breadcrumb-item-padding-x: 0.4rem; font-size: var(--testo-piccolo); line-height: 1.4; }
.percorso a { color: var(--colore-focus); text-decoration: none; }
.percorso a:hover { text-decoration: underline; }
.percorso .breadcrumb-item.active { color: var(--colore-testo-secondario); }

/* --- Testata della pagina: percorso, h1 con la riga di contesto, azioni a destra, su una riga --- */
.testata-pagina { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--spazio-2) var(--spazio-3); margin-bottom: var(--spazio-2); }
.testata-sinistra { min-width: 0; }
.testata-titolo { display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--spazio-1); min-width: 0; }
.testata-titolo h1 { font-size: var(--titolo-pagina); font-weight: 700; margin: 0; line-height: 1.3; color: var(--colore-testo); }
.contesto-pagina { margin: 0; color: var(--colore-testo-secondario); font-size: var(--testo-piccolo); }
.testata-pagina .pagina-azioni { align-items: center; }
.testata-pagina .pagina-azioni .btn { min-height: var(--altezza-controllo); }

/* --- Riquadri dei numeri: una fascia sola divisa in segmenti, ognuno un collegamento --- */
.fascia-numeri {
    display: flex; flex-wrap: wrap; margin: 0 0 var(--gap-griglia); padding: 0; list-style: none;
    background-color: var(--colore-superficie); border-radius: var(--raggio-card); box-shadow: var(--ombra-riposo);
}
.fascia-numeri > li { flex: 1 1 0; min-width: 11rem; }
.fascia-numeri > li + li { border-left: 1px solid var(--colore-bordo-tenue); }
.riquadro-numero {
    display: flex; align-items: center; gap: 0.65rem; height: 100%; padding: 0.5rem var(--spazio-pannello);
    color: var(--colore-testo); text-decoration: none; border-radius: var(--raggio-interno);
}
a.riquadro-numero:hover { background-color: var(--colore-hover); color: var(--colore-testo); }
.numero-valore { font-size: 1.375rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.numero-etichetta { display: block; font-size: var(--testo-piccolo); color: var(--colore-testo-secondario); line-height: 1.25; }
.numero-nota { display: block; font-size: 0.75rem; color: var(--colore-testo-secondario); }
.numero-allerta .numero-valore { color: var(--theme-red-color); }

/* --- Riga degli strumenti di un elenco: numeri e filtri affiancati, uno sotto l'altro sotto i 1600 px --- */
.riga-strumenti { display: flex; align-items: stretch; gap: var(--gap-griglia); margin-bottom: var(--gap-griglia); }
.riga-strumenti > .fascia-numeri { flex: 0 0 auto; margin: 0; flex-wrap: nowrap; }
.riga-strumenti > .fascia-numeri > li { flex: 0 0 auto; min-width: 10.5rem; }
.riga-strumenti > .barra-filtri { flex: 1 1 auto; margin: 0; }
@media (max-width: 1599.98px) { .riga-strumenti { flex-direction: column; } .riga-strumenti > .fascia-numeri { flex-wrap: wrap; } }

/* --- Barra dei filtri compatta: una riga, campi con l'etichetta a sinistra, altri filtri richiudibili --- */
.barra-filtri {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--spazio-2); margin-bottom: var(--gap-griglia);
    padding: 0.375rem var(--spazio-2); background-color: var(--colore-superficie); border-radius: var(--raggio-interno); box-shadow: var(--ombra-riposo);
}
.barra-filtri .input-group { width: auto; flex-wrap: nowrap; }
.barra-filtri .input-group-text { font-size: var(--testo-piccolo); background-color: var(--colore-hover); color: var(--colore-testo); border-color: var(--colore-bordo-campo); }
.barra-filtri .form-control, .barra-filtri .form-select { font-size: var(--testo-piccolo); min-height: var(--altezza-controllo); border-color: var(--colore-bordo-campo); }
.barra-filtri .btn { min-height: var(--altezza-controllo); font-size: var(--testo-piccolo); }
.barra-filtri .campo-ricerca { flex: 1 1 14rem; max-width: 22rem; }
.barra-filtri-campi { display: flex; flex-wrap: wrap; gap: var(--spazio-2); align-items: center; }
.barra-filtri-campi.collapse:not(.show) { display: none; }
.altri-filtri { flex-basis: 100%; }
.conteggio-filtri { font-weight: 700; }

/* --- Tabella densa con la paginazione unita nel piede --- */
.densita-media .card-tabella { margin-bottom: 0; }
.densita-media .card-tabella:hover { transform: none; box-shadow: var(--ombra-riposo); }
.densita-media .tabella-densa { font-size: var(--testo-base); }
.densita-media .tabella-densa > :not(caption) > * > * { padding: 0 0.75rem; height: var(--riga-tabella); }
.densita-media .tabella-densa > thead th { height: calc(var(--riga-tabella) - 2px); text-transform: none; letter-spacing: 0; font-size: var(--testo-piccolo); white-space: nowrap; }
.densita-media .tabella-densa .badge-stato { font-size: 0.75rem; padding: 0.15em 0.5em; }
.densita-media .tabella-densa .collegamento-riga { font-weight: 600; }
/* L'ordinamento è un collegamento (la pagina lo legge dall'indirizzo): la colonna ordinata ha aria-sort sul th */
.densita-media .ordina { display: inline-flex; align-items: center; gap: var(--spazio-1); min-height: var(--bersaglio-minimo); color: inherit; font-weight: 600; text-decoration: none; }
.densita-media .ordina:hover { color: var(--colore-focus); text-decoration: underline; }
.densita-media .ordina .bi { font-size: 0.75rem; color: var(--colore-testo-secondario); }
.densita-media th[aria-sort="ascending"] .ordina .bi, .densita-media th[aria-sort="descending"] .ordina .bi { color: var(--colore-focus); }
.densita-media .tabella-piede {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spazio-3);
    padding: 0.375rem var(--spazio-pannello); border-top: 1px solid var(--colore-bordo); font-size: var(--testo-piccolo);
}
.densita-media .tabella-piede-sinistra { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spazio-3); }
.densita-media .tabella-piede form { display: flex; align-items: center; gap: var(--spazio-2); margin: 0; }
.densita-media .tabella-piede .form-select { width: auto; font-size: var(--testo-piccolo); min-height: var(--altezza-controllo); border-color: var(--colore-bordo-campo); }
.densita-media .tabella-piede .pagination { --bs-pagination-padding-y: 0.2rem; --bs-pagination-padding-x: 0.6rem; --bs-pagination-font-size: var(--testo-piccolo); margin: 0; }
.densita-media .tabella-piede .page-link { min-width: var(--altezza-controllo); min-height: var(--altezza-controllo); display: inline-flex; align-items: center; justify-content: center; }

/* --- Pannelli densi: la card con meno spazio e il collegamento alla pagina completa nell'intestazione --- */
.densita-media .pannello { margin-bottom: 0; display: flex; flex-direction: column; min-width: 0; }
.densita-media .pannello .dash-header { padding: 0.5rem var(--spazio-pannello); min-height: 44px; }
.densita-media .pannello .dash-header h2, .densita-media .pannello .dash-header h3 { font-size: var(--testo-base); }
.densita-media .pannello .dash-body { padding: var(--spazio-pannello); flex: 1 1 auto; }
.densita-media .pannello .dash-body.p-0 { padding: 0; }
.densita-media .pannello .icon-box { width: 28px; height: 28px; font-size: 0.9rem; }
.densita-media .pannello .stato-vuoto { padding: var(--spazio-3); }
/* «Vedi tutto» è un'azione della card: un collegamento piccolo, non un pulsante */
.densita-media .pannello .dash-header-azioni .btn-link { padding: 0 var(--spazio-1); font-size: var(--testo-piccolo); font-weight: 600; color: var(--colore-focus); white-space: nowrap; }

/* --- Dettaglio a due colonne: dati a sinistra, stato e azioni a destra --- */
.dettaglio-colonne { display: grid; grid-template-columns: minmax(0, 1fr) var(--larghezza-colonna-dettaglio); gap: var(--gap-griglia); align-items: start; }
.dettaglio-principale, .dettaglio-laterale { display: grid; gap: var(--gap-griglia); min-width: 0; }
.dettaglio-colonne.senza-laterale { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1199.98px) { .dettaglio-colonne { grid-template-columns: minmax(0, 1fr); } }
/* Coppie etichetta e valore: due coppie per riga, una per riga sotto i 992 px */
.coppie { display: grid; grid-template-columns: var(--larghezza-etichetta-coppia) minmax(0, 1fr) var(--larghezza-etichetta-coppia) minmax(0, 1fr); gap: 0.4rem var(--spazio-3); margin: 0; }
.coppie dt { font-weight: 600; color: var(--colore-testo-secondario); font-size: var(--testo-piccolo); padding-top: 0.1rem; }
.coppie dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* La coppia larga parte sempre dalla prima colonna: dopo un numero dispari di coppie l'etichetta non resta sola */
.coppie .coppia-larga-etichetta { grid-column: 1; }
.coppie .coppia-larga { grid-column: 2 / -1; }
/* Nelle card strette, come la colonna laterale di una scheda, una coppia per riga */
.coppie-strette .coppie { grid-template-columns: var(--larghezza-etichetta-coppia) minmax(0, 1fr); }
.coppie-strette .coppie .coppia-larga, .coppie-strette .coppie .coppia-larga-etichetta { grid-column: auto; }
@media (max-width: 991.98px) {
    .coppie { grid-template-columns: var(--larghezza-etichetta-coppia) minmax(0, 1fr); }
    .coppie .coppia-larga, .coppie .coppia-larga-etichetta { grid-column: auto; }
}
/* Schede dentro una card (non navigazione): pannelli con role tab */
.densita-media .schede-dettaglio { --bs-nav-tabs-border-color: var(--colore-bordo); padding: 0 var(--spazio-pannello); margin-top: 0.25rem; }
.densita-media .schede-dettaglio .nav-link { min-height: var(--altezza-scheda); padding: 0.3rem 0.85rem; font-size: var(--testo-base); color: var(--colore-testo-secondario); }
.densita-media .schede-dettaglio .nav-link.active { color: var(--colore-focus); font-weight: 700; border-bottom: 3px solid var(--colore-focus); }
.badge-conteggio { margin-left: 0.35rem; padding: 0 0.4rem; border-radius: 999px; background-color: var(--theme-gray-bg); color: var(--theme-gray-color); font-size: 0.75rem; font-weight: 700; }
/* Cronologia: eventi in ordine, il più recente in alto */
.cronologia { list-style: none; margin: 0; padding: 0; }
.cronologia li { position: relative; padding: 0 0 0.6rem 1.25rem; font-size: var(--testo-piccolo); }
.cronologia li::before { content: ""; position: absolute; left: 0.3rem; top: 0.45rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: var(--colore-bordo-campo); }
.cronologia li + li::after { content: ""; position: absolute; left: calc(0.55rem - 0.5px); top: -0.6rem; height: 1.05rem; border-left: 1px solid var(--colore-bordo); }
.cronologia time { display: block; color: var(--colore-testo-secondario); }

/* --- Form nel modale: sezioni con un titolo, niente card --- */
.sezione-form + .sezione-form { margin-top: var(--spazio-3); padding-top: var(--spazio-3); border-top: 1px solid var(--colore-bordo-tenue); }
.sezione-form > h3 { font-size: var(--testo-base); font-weight: 700; margin-bottom: var(--spazio-2); }
.modale-form .modal-body { padding: var(--spazio-3) 1.25rem; }
/* Il form avvolge intestazione, corpo e piede: dentro il modale scorrevole scorre solo il corpo, e con lo zoom il piede resta raggiungibile */
.modale-form .modal-content > form { display: flex; flex-direction: column; min-height: 0; max-height: 100%; overflow: hidden; }
.modale-form .form-label, .modale-form legend { font-size: var(--testo-piccolo); font-weight: 600; margin-bottom: 0.2rem; }
.modale-form .form-control, .modale-form .form-select { font-size: var(--testo-base); min-height: var(--altezza-controllo); border-color: var(--colore-bordo-campo); }
.modale-form .is-invalid { border-color: var(--theme-red-color); }
.modale-form .form-check { padding-left: 2rem; min-height: var(--bersaglio-minimo); }
.modale-form .form-check-input { width: var(--bersaglio-minimo); height: var(--bersaglio-minimo); margin-left: -2rem; margin-top: 0; }
.modale-form .form-check-label { line-height: var(--bersaglio-minimo); }
.riepilogo-errori-modale { padding: 0.5rem 0.75rem; font-size: var(--testo-piccolo); }

/* --- Home del settore: fascia dei numeri e pannelli in griglia di 3 colonne --- */
.griglia-home { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-griglia); }
@media (max-width: 1399.98px) { .griglia-home { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .griglia-home { grid-template-columns: minmax(0, 1fr); } }
/* Su uno schermo largo e alto i pannelli si allungano fino al fondo; con lo zoom la pagina scorre come sempre */
@media (min-width: 1400px) and (min-height: 700px) {
    .main-container:has(> .griglia-home) { display: flex; flex-direction: column; }
    .main-container > .griglia-home { flex: 1 1 auto; grid-auto-rows: 1fr; }
}
/* --- Pagina iniziale dell'amministrazione: la mappa delle sezioni in masonry (due terzi) e le ultime operazioni (un terzo) --- */
.home-amministrazione { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap-griglia); align-items: start; }
.home-amministrazione:not(:has(.home-operazioni)) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1199.98px) { .home-amministrazione { grid-template-columns: minmax(0, 1fr); } }
.mappa-sezioni { columns: 2; column-gap: var(--gap-griglia); }
@media (max-width: 767.98px) { .mappa-sezioni { columns: 1; } }
.densita-media .mappa-sezioni .pannello { margin-bottom: var(--gap-griglia); break-inside: avoid; }
.mappa-sezioni .dash-item { margin-bottom: 0; padding: var(--spazio-1) var(--spazio-2); min-height: var(--altezza-voce-compatta); }
@media (pointer: coarse) { .mappa-sezioni .dash-item { min-height: 44px; } }
.voci-su-due-colonne { columns: 2; column-gap: var(--spazio-2); }
.voci-su-due-colonne li { break-inside: avoid; }
.riga-operazione { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-1) var(--spazio-2); }
.densita-media .tabella-pannello { margin: 0; font-size: var(--testo-piccolo); }
.densita-media .tabella-pannello > :not(caption) > * > * { padding: 0.3rem var(--spazio-pannello); }
.densita-media .tabella-pannello > thead th { font-weight: 600; color: var(--colore-testo-secondario); background-color: transparent; border-bottom-color: var(--colore-bordo); white-space: nowrap; }
.densita-media .tabella-pannello .numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Barra di un valore con il numero scritto accanto: il colore non porta da solo l'informazione */
.barra-valore { display: grid; grid-template-columns: minmax(0, 1fr) 3.25rem; align-items: center; gap: var(--spazio-2); }
.barra-valore .progress { height: 0.5rem; background-color: var(--colore-bordo-tenue); }
.barra-valore .progress-bar { background-color: var(--colore-focus); }
.barra-valore.sotto .progress-bar { background-color: var(--theme-red-color); }
.barra-valore > span { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--testo-piccolo); }
/* Larghezza delle barre a passi di 5%, senza stili in linea (la CSP li vieta): il valore esatto è scritto accanto */
.quota-0 { width: 0%; } .quota-5 { width: 5%; } .quota-10 { width: 10%; } .quota-15 { width: 15%; } .quota-20 { width: 20%; } .quota-25 { width: 25%; } .quota-30 { width: 30%; } .quota-35 { width: 35%; } .quota-40 { width: 40%; } .quota-45 { width: 45%; } .quota-50 { width: 50%; } .quota-55 { width: 55%; } .quota-60 { width: 60%; } .quota-65 { width: 65%; } .quota-70 { width: 70%; } .quota-75 { width: 75%; } .quota-80 { width: 80%; } .quota-85 { width: 85%; } .quota-90 { width: 90%; } .quota-95 { width: 95%; } .quota-100 { width: 100%; }
/* Turni per stato: una barra unica divisa per stato, con la legenda numerica */
.barra-stati { display: flex; height: 0.75rem; border-radius: 999px; overflow: hidden; margin-bottom: var(--spazio-3); background-color: var(--colore-bordo-tenue); }
.barra-stati span { display: block; flex: 0 0 auto; height: 100%; }
.legenda-stati { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem var(--spazio-3); margin: 0; font-size: var(--testo-piccolo); }
.legenda-stati dt { font-weight: 400; display: flex; align-items: center; gap: var(--spazio-2); }
.legenda-stati dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.segno-stato { width: 0.75rem; height: 0.75rem; border-radius: 3px; flex: 0 0 auto; }
.stato-confermato { background-color: var(--colore-stato-confermato); }
.stato-pianificato { background-color: var(--colore-stato-pianificato); }
.stato-scoperto { background-color: var(--colore-stato-scoperto); }
.stato-errore { background-color: var(--colore-stato-errore); }
.stato-chiuso { background-color: var(--colore-stato-chiuso); }
/* Numeri in coppia dentro un pannello */
.numeri-pannello { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spazio-2); margin-bottom: var(--spazio-2); }
.numeri-pannello > div { padding: 0.4rem 0.6rem; border-radius: var(--raggio-interno); background-color: var(--colore-hover); }
.numeri-pannello strong { display: block; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.numeri-pannello span { font-size: var(--testo-piccolo); color: var(--colore-testo-secondario); }

/* --- Con il tocco ogni bersaglio delle barre, delle schede e della paginazione arriva a 44 px --- */
@media (pointer: coarse) {
    .densita-media .scheda-link, .densita-media .schede-dettaglio .nav-link, .testata-pagina .pagina-azioni .btn, .barra-filtri .btn,
    .barra-filtri .form-control, .barra-filtri .form-select, .densita-media .tabella-piede .form-select,
    .densita-media .tabella-piede .page-link, .densita-media .ordina { min-height: 44px; }
    .densita-media .tabella-piede .page-link, .densita-media .ordina { min-width: 44px; }
}

/* --- Amministrazione: voci della Configurazione come righe compatte, a due colonne su schermi larghi --- */
.voci-elenco { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr)); gap: var(--spazio-1) var(--gap-griglia); margin: 0; padding: 0; list-style: none; }
.voci-elenco .dash-item { margin-bottom: 0; gap: var(--spazio-3); min-height: 3.5rem; }
.voci-elenco .dash-item .icon-box { flex: 0 0 auto; }
.dash-item .icon-box i { margin-right: 0; color: inherit; }
.voci-elenco .voce-testo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.voci-elenco .voce-nome { font-weight: 600; }
.voci-elenco .voce-spiegazione { color: var(--colore-testo-secondario); font-size: var(--testo-piccolo); }
.voci-elenco .voce-freccia { margin: 0; color: var(--colore-testo-secondario); }

/* --- Amministrazione: pannelli affiancati (due colonne su schermi larghi, una sotto) --- */
.griglia-pannelli { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-griglia); align-items: start; }
.griglia-pannelli > .card-dash { margin-bottom: 0; min-width: 0; }
@media (max-width: 1199.98px) { .griglia-pannelli { grid-template-columns: minmax(0, 1fr); } }
.form-azioni { display: flex; flex-wrap: wrap; gap: var(--spazio-2); justify-content: flex-end; align-items: center; margin-top: var(--spazio-3); }
.colonna-pannelli { display: grid; gap: var(--gap-griglia); min-width: 0; align-content: start; }
.colonna-pannelli > .card-dash { margin-bottom: 0; }
.titolo-blocco { font-size: var(--testo-base); font-weight: 700; margin: 0 0 var(--spazio-2); display: flex; align-items: center; gap: var(--spazio-2); }
.scorri-modale { max-height: 16rem; overflow-y: auto; }
.riga-impronta code { overflow-wrap: anywhere; }
.valore-segreto { display: block; padding: var(--spazio-2) var(--spazio-3); border: 1px solid var(--colore-bordo-campo); border-radius: var(--raggio-interno); background: var(--colore-superficie); color: var(--colore-testo); overflow-wrap: anywhere; user-select: all; }
.toast-container-app { z-index: 1100; }
/* Banner dei cookie (Klaro): bersagli da 44px su mobile */
@media (max-width: 576px), (pointer: coarse) { .klaro .cm-btn, .klaro .cookie-modal .hide { min-height: 44px; min-width: 44px; } }
.pagina-stretta { max-width: 44rem; margin-inline: auto; }
.modulo-stretto { max-width: 46rem; }
.spiegazione-pagina { color: var(--colore-testo-secondario); }
.spiegazione-pagina summary { cursor: pointer; font-weight: 600; color: var(--colore-testo); }
.pagina-larga-testo { max-width: 60rem; }
/* Cartellino: giorni festivi e di fine settimana, subtotali e totale (il colore non è l'unica informazione: c'è anche il testo) */
.tabella-densa tr.riga-festivo > * { background-color: var(--theme-red-bg); }
.tabella-densa tr.riga-weekend > * { background-color: var(--theme-gray-bg); }
.tabella-densa tr.riga-subtotale > * { background-color: var(--colore-hover); font-weight: 600; }
.tabella-densa tr.riga-totale > * { background-color: var(--theme-blue-bg); font-weight: 700; }