/* ════════════════════════════════════════════════════════════════════
   Interventi — elementi comuni alle pagine degli interventi (elenco,
   dettaglio e le sotto-pagine che verranno): stati di pagina, pannelli
   laterali, legenda, avvisi, tinte delle icone dell'app.
   Foglio GLOBALE, caricato dopo il tema: le regole valgono in tutte le
   pagine (il CSS isolato di una pagina non si condivide con le altre).
   Colori semantici = quelli di iVulcanoApp; il resto usa le variabili del
   tema, così il tema scuro funziona senza colori fissi.
   ════════════════════════════════════════════════════════════════════ */

.min-w-0 { min-width: 0; }

/* ── Testata della pagina ─────────────────────────────────────────── */
.vi-testata-icona {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 177, 21, .14);
    flex-shrink: 0;
}

.vi-testata-icona img { width: 1.75rem; height: 1.75rem; }

/* ── Stati di pagina (caricamento, vuoto, errore) ─────────────────── */
.vi-stato-pagina,
.custom-card .card-body.vi-stato-pagina {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 16rem;
    padding: 3.5rem 1rem;
}

.vi-gira { display: inline-block; animation: vi-ruota .8s linear infinite; }

@keyframes vi-ruota { to { transform: rotate(360deg); } }

.vi-avanzamento {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 3px;
    overflow: hidden;
    background: rgba(var(--primary-rgb), .12);
}

.vi-avanzamento span {
    display: block;
    width: 35%;
    height: 100%;
    background: rgb(var(--primary-rgb));
    animation: vi-scorri 1.1s ease-in-out infinite;
}

@keyframes vi-scorri {
    from { transform: translateX(-100%); }
    to { transform: translateX(300%); }
}

/* ── Tinta delle icone dell'app (DXImage.TintColor) ────────────────── */
.vi-tinta {
    display: inline-block;
    background-color: var(--vi-tinta, #FF4500);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ── Pannelli laterali ─────────────────────────────────────────────── */
.vi-velo {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(15, 23, 42, .45);
    animation: vi-dissolvenza .2s ease-out;
}

.vi-pannello {
    --bs-offcanvas-width: min(26rem, 100vw);
    z-index: 10002;
    visibility: visible;
    display: flex;
    flex-direction: column;
    animation: vi-scivola .25s ease-out;
}

@keyframes vi-dissolvenza {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes vi-scivola {
    from { transform: translateX(100%); }
    to { transform: none; }
}

.vi-pannello-corpo {
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Il tema toglie il contorno a link e pulsanti con !important: qui serve per la tastiera */
.vi-pannello .btn:focus-visible,
.vi-chip:focus-visible {
    outline: 2px solid rgb(var(--primary-rgb)) !important;
    outline-offset: 2px;
}

.vi-sezione {
    padding: 1rem 1.25rem;
    border-bottom: 1px dashed var(--default-border);
}

.vi-sezione:last-child { border-bottom: 0; }

.vi-sezione-titolo {
    margin-bottom: .75rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}

.vi-interruttori {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    font-size: .8125rem;
}

.vi-interruttori .form-check { margin-bottom: 0; }

.vi-chip {
    padding: .15rem .6rem;
    border: 1px solid var(--default-border);
    border-radius: 2rem;
    background: transparent;
    color: var(--default-text-color);
    font-size: .72rem;
}

.vi-chip:hover { border-color: rgb(var(--primary-rgb)); }
.vi-chip:focus-visible { border-color: rgb(var(--primary-rgb)); }

.vi-chip.attiva {
    background: rgb(var(--primary-rgb));
    border-color: rgb(var(--primary-rgb));
    color: #fff;
}

/* ── Legenda ───────────────────────────────────────────────────────── */
.vi-legenda {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.vi-legenda li {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .8125rem;
    line-height: 1.35;
}

.vi-legenda img, .vi-legenda .vi-tinta, .vi-legenda-vuoto { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
[data-theme-mode=dark] .vi-legenda img { background: rgba(255, 255, 255, .88); border-radius: .3rem; }

.vi-campione {
    width: 1.75rem;
    height: 1rem;
    flex-shrink: 0;
    border: 1px solid var(--default-border);
    border-radius: .25rem;
    background-color: var(--custom-white);
}

/* Sfondo per stato (ultima azione del tecnico): IA/RA, SA, FA */
.vi-campione.vi-stato-lavorazione { background-color: #FFD9DA; }
.vi-campione.vi-stato-sospeso { background-color: #FFF2D1; }
.vi-campione.vi-stato-terminato { background-color: #EAFAEA; }
[data-theme-mode=dark] .vi-campione.vi-stato-lavorazione { background-color: rgba(255, 99, 110, .17); }
[data-theme-mode=dark] .vi-campione.vi-stato-sospeso { background-color: rgba(255, 196, 51, .15); }
[data-theme-mode=dark] .vi-campione.vi-stato-terminato { background-color: rgba(52, 199, 89, .15); }

.vi-barretta {
    width: .45rem;
    height: 1.5rem;
    margin: 0 .4rem;
    flex-shrink: 0;
    border-radius: .2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vi-barretta.vuota { border: 1px dashed var(--default-border); background: transparent !important; }
.vi-barretta i { font-size: .95rem; line-height: 1; }

.vi-legenda-testo { width: 3rem; flex-shrink: 0; font-size: .7rem; color: rgb(var(--primary-rgb)); }
[data-theme-mode=dark] .vi-legenda-testo { color: color-mix(in srgb, rgb(var(--primary-rgb)) 40%, #ffffff); }

/* ── Colonna dei filtri dell'elenco ────────────────────────────────── */
/* Qui e non nel CSS isolato della pagina: i gruppi con i numeri sono un
   componente (Pages/Vulcano/Elenco/GruppoFaccetta.razor) e le sezioni
   che ricaricano l'elenco, scritte nella pagina, hanno lo stesso aspetto. */
.vi-gruppo {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--default-border);
}

.vi-gruppo:last-child { border-bottom: 0; }

.vi-gruppo-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .55rem;
}

.vi-gruppo-testa:last-child { margin-bottom: 0; }

.vi-gruppo-titolo {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--default-text-color);
}

.vi-gruppo-titolo:has(.vi-gruppo-apri) { flex: 1 1 auto; }

.vi-gruppo-titolo > i,
.vi-gruppo-apri > i:first-child { flex-shrink: 0; font-size: .95rem; color: rgb(var(--primary-rgb)); }

[data-theme-mode=dark] .vi-gruppo-titolo > i,
[data-theme-mode=dark] .vi-gruppo-apri > i:first-child { color: color-mix(in srgb, rgb(var(--primary-rgb)) 40%, #ffffff); }

.vi-gruppo-azzera {
    flex-shrink: 0;
    padding: .05rem .3rem;
    border: 0;
    border-radius: .25rem;
    background: transparent;
    color: rgb(var(--danger-rgb));
    font-size: .6875rem;
}

.vi-gruppo-azzera:hover { background: rgba(var(--danger-rgb), .08); }

.vi-gruppo-vuoto { margin: 0; font-size: .75rem; color: var(--text-muted); }

/* Una voce: casella, segno, etichetta e numero in flex (in Spark il numero era float e scendeva) */
.vi-opzioni { display: flex; flex-direction: column; gap: .4rem; }

.vi-opzione {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .8125rem;
}

.vi-opzione .form-check-input { float: none; flex-shrink: 0; margin: .15rem 0 0; cursor: pointer; }

.vi-opzione-etichetta {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
}

.vi-opzione-testo { min-width: 0; overflow-wrap: anywhere; }

.vi-opzione-segno {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
}

.vi-opzione-numero {
    flex-shrink: 0;
    min-width: 1.75rem;
    margin-left: auto;
    background: rgb(var(--light-rgb));
    color: var(--default-text-color);
    font-size: .6875rem;
    font-weight: 500;
}

.vi-opzione.zero { opacity: .55; }

.vi-gruppo-altri { margin-top: .55rem; border: 0; font-size: .6875rem; }

.vi-segno-icona { width: 1.1rem; height: 1.1rem; }
[data-theme-mode=dark] img.vi-segno-icona { background: rgba(255, 255, 255, .88); border-radius: .25rem; }

/* "Aperto": nella riga non ha segno; qui un cerchio vuoto accanto al "fatto" del chiuso */
.vi-segno-aperto { width: .8rem; height: .8rem; border: 2px solid var(--text-muted); border-radius: 50%; }
.vi-segno-vuoto { width: 1.1rem; height: 1.1rem; }
.vi-barretta.vi-segno-barretta { width: .4rem; height: 1.05rem; margin: 0; }

/* Sezioni che ricaricano l'elenco: periodo, chiusi, servizi previsti */
.vi-scelte { display: flex; flex-direction: column; gap: .35rem; font-size: .8125rem; }
.vi-scelte .form-check { min-height: 0; margin: 0; }

.vi-giorni-rapidi { display: flex; flex-wrap: wrap; gap: .3rem; margin: .65rem 0 .6rem; }

.vi-campo-etichetta { display: block; margin-bottom: .25rem; font-size: .75rem; color: var(--text-muted); }

.vi-nota { margin: .4rem 0 0; font-size: .6875rem; line-height: 1.4; color: var(--text-muted); }
.vi-nota-errore { color: rgb(var(--danger-rgb)); font-weight: 500; }

.vi-interruttore { min-height: 0; margin: .6rem 0 0; font-size: .8125rem; }
.vi-servizi .vi-interruttore { margin-top: .45rem; }

.vi-date { display: grid; grid-template-columns: 1fr; gap: .45rem; margin-top: .65rem; }

.vi-gruppo-apri {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
}

.vi-gruppo-conta { font-size: .625rem; font-weight: 600; }
.vi-gruppo-freccia { margin-left: auto; color: var(--text-muted); transition: transform .15s ease; }
.vi-gruppo-apri[aria-expanded=true] .vi-gruppo-freccia { transform: rotate(180deg); }

/* Il tema toglie contorno e anello di fuoco (anche a campi e tendine, che restano
   senza segno): per la tastiera servono */
.vi-gruppo-azzera:focus-visible,
.vi-gruppo-altri:focus-visible,
.vi-gruppo-apri:focus-visible,
.vi-gruppo .form-check-input:focus-visible,
.vi-gruppo .form-control:focus-visible,
.vi-gruppo .form-select:focus-visible {
    outline: 2px solid rgb(var(--primary-rgb)) !important;
    outline-offset: 2px;
}

.vi-gruppo .form-control:focus-visible,
.vi-gruppo .form-select:focus-visible { outline-offset: 1px; }

[data-theme-mode=dark] .vi-gruppo-azzera:focus-visible,
[data-theme-mode=dark] .vi-gruppo-altri:focus-visible,
[data-theme-mode=dark] .vi-gruppo-apri:focus-visible,
[data-theme-mode=dark] .vi-gruppo .form-check-input:focus-visible,
[data-theme-mode=dark] .vi-gruppo .form-control:focus-visible,
[data-theme-mode=dark] .vi-gruppo .form-select:focus-visible { outline-color: color-mix(in srgb, rgb(var(--primary-rgb)) 40%, #ffffff) !important; }

@media (prefers-reduced-motion: reduce) {
    .vi-gruppo-freccia { transition: none; }
}

/* ── Avviso (notifica breve) ───────────────────────────────────────── */
/* Il contenitore è la regione annunciata dai lettori di schermo e resta sempre nella pagina:
   vuoto non ha altezza e i clic lo attraversano; li riceve solo l'avviso. */
.vi-avviso-contenitore {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 10003;
    width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}

.vi-avviso {
    pointer-events: auto;
    animation: vi-entra .25s ease-out;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .8rem .9rem;
    border: 1px solid var(--default-border);
    border-radius: .75rem;
    background: var(--custom-white);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12);
}

.vi-avviso-icona { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
[data-theme-mode=dark] .vi-avviso-icona { background: rgba(255, 255, 255, .88); border-radius: .3rem; padding: .1rem; }
.vi-avviso-ri { font-size: 1.4rem; line-height: 1; color: rgb(var(--primary-rgb)); flex-shrink: 0; }
.vi-avviso.successo .vi-avviso-ri { color: rgb(var(--success-rgb)); }
.vi-avviso.errore { border-color: rgba(var(--danger-rgb), .45); }
.vi-avviso.errore .vi-avviso-ri { color: rgb(var(--danger-rgb)); }

@keyframes vi-entra {
    from { transform: translateY(1rem); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* ── Finestra di messaggio o conferma (DisplayAlert dell'app) ──────── */
.vi-dialogo-velo {
    position: fixed;
    inset: 0;
    z-index: 10004;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .45);
    animation: vi-dissolvenza .15s ease-out;
}

.vi-dialogo {
    width: min(30rem, 100%);
    border: 1px solid var(--default-border);
    border-radius: .9rem;
    background: var(--custom-white);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .2);
    animation: vi-comparsa .22s cubic-bezier(.34, 1.56, .64, 1);
    overflow: hidden;
}

.vi-dialogo:focus { outline: none; }

.vi-dialogo-corpo {
    display: flex;
    gap: .9rem;
    padding: 1.25rem 1.25rem 1rem;
}

.vi-dialogo-icona {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.3rem;
    background: rgba(var(--warning-rgb), .15);
    color: rgb(var(--warning-rgb));
}

.vi-dialogo.errore .vi-dialogo-icona { background: rgba(var(--danger-rgb), .12); color: rgb(var(--danger-rgb)); }
.vi-dialogo.info .vi-dialogo-icona { background: rgba(var(--primary-rgb), .12); color: rgb(var(--primary-rgb)); }

.vi-dialogo-titolo { font-weight: 600; font-size: .95rem; margin-bottom: .25rem; }
.vi-dialogo-testo { font-size: .8125rem; color: var(--text-muted); white-space: pre-line; }

.vi-dialogo-piede {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    padding: .75rem 1.25rem 1rem;
    border-top: 1px solid var(--default-border);
}

.vi-dialogo-piede .btn:focus-visible {
    outline: 2px solid rgb(var(--primary-rgb)) !important;
    outline-offset: 2px;
}

/* Telefono: pulsanti uno sotto l'altro, il principale in fondo a portata di pollice */
@media (max-width: 479.98px) {
    .vi-dialogo-piede { flex-direction: column; align-items: stretch; }
}

@keyframes vi-comparsa {
    from { transform: scale(.94); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* ── Pagina con barra di salvataggio in basso ──────────────────────── */
/* Il pulsante "torna su" del tema e gli avvisi (in basso a destra) vanno sopra la barra,
   anche a fine pagina, quando la barra si appoggia sul piè di pagina. */
body:has(.vd-barra) .scrollToTop,
body:has(.vs-barra) .scrollToTop { bottom: 8rem; }
body:has(.vd-barra) .vi-avviso-contenitore,
body:has(.vs-barra) .vi-avviso-contenitore { bottom: 8rem; }

/* ════════════════════════════════════════════════════════════════════
   Sotto-pagine del dettaglio intervento (componente SottoPagina e
   mattoni comuni). Prefisso vs-: le sotto-pagine usano queste classi
   per restare coerenti tra loro; il resto nel CSS isolato di ognuna.
   ════════════════════════════════════════════════════════════════════ */

:root {
    --vs-accento: #e0620b;              /* AccentColor dell'app per i sottotitoli */
    --vs-selezione: #FFEFD0;            /* riga selezionata nelle liste dell'app */
}

[data-theme-mode=dark] {
    --vs-accento: #ffa45c;
    --vs-selezione: rgba(255, 196, 51, .14);
}

.vs-sottotitolo {
    margin-top: .2rem;
    font-size: .78rem;
    line-height: 1.35;
    color: var(--vs-accento);
}

/* ── Pannelli ──────────────────────────────────────────────────────── */
.vi-pannello.vs-pannello-largo { --bs-offcanvas-width: min(56rem, 100vw); }

.vs-pannello-testa { align-items: flex-start; gap: .75rem; }
.vs-pannello-testa .btn-close { margin-top: .1rem; flex-shrink: 0; }
.vs-azioni-testa { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }

.vs-pannello-piede {
    display: flex;
    gap: .5rem;
    padding: .85rem 1rem;
    border-top: 1px solid var(--default-border);
    background: var(--custom-white);
}

/* ── Vista a tutta pagina ──────────────────────────────────────────── */
.vs-pagina { padding-bottom: 0; }

.vs-pagina-testa {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 1.5rem 0 1.25rem;
}

.vs-indietro { flex-shrink: 0; }

.vs-icona {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.35rem;
    background: rgba(var(--primary-rgb), .1);
    color: rgb(var(--primary-rgb));
}

[data-theme-mode=dark] .vs-icona { background: rgba(var(--primary-rgb), .3); color: color-mix(in srgb, rgb(var(--primary-rgb)) 40%, #ffffff); }

.vs-contesto {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.vs-titolo:focus { outline: none; }

.vs-pagina-corpo { min-height: 12rem; }

.vs-pagina-corpo > .card.custom-card:last-child { margin-block-end: 0; }

/* Barra dei pulsanti in fondo alla vista (come la barra di salvataggio del dettaglio) */
.vs-barra {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.5rem;
    padding: .75rem 1rem;
    border: 1px solid var(--default-border);
    border-bottom: 0;
    border-radius: .85rem .85rem 0 0;
    background: var(--custom-white);
    box-shadow: 0 -.4rem 1.2rem rgba(0, 0, 0, .07);
}

.vs-barra .btn { white-space: nowrap; }
.vs-barra .vs-barra-stato { margin-right: auto; font-size: .78rem; color: var(--text-muted); }

.vs-indietro:focus-visible,
.vs-barra .btn:focus-visible,
.vs-pannello-piede .btn:focus-visible,
.vs-azioni-testa .btn:focus-visible,
.vs-riga:focus-visible {
    outline: 2px solid rgb(var(--primary-rgb)) !important;
    outline-offset: 2px;
}

/* ── Mattoni comuni ────────────────────────────────────────────────── */

/* Stato vuoto / caricamento / errore dentro una sotto-pagina */
.vs-vuoto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 9rem;
    padding: 2rem 1rem;
    text-align: center;
    font-size: .8125rem;
    color: var(--text-muted);
}

.vs-vuoto > i { font-size: 1.6rem; opacity: .7; }

/* Riga di elenco cliccabile (contatti, documenti, segnalazioni...) */
.vs-elenco { list-style: none; margin: 0; padding: 0; }

.vs-riga {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem 1.25rem;
    border: 0;
    border-bottom: 1px solid var(--default-border);
    background: transparent;
    color: var(--default-text-color);
    text-align: left;
    text-decoration: none;
    font-size: .8125rem;
}

.vs-elenco > li:last-child > .vs-riga { border-bottom: 0; }
a.vs-riga, button.vs-riga { cursor: pointer; }
a.vs-riga:hover, button.vs-riga:hover { background: rgba(var(--primary-rgb), .05); color: var(--default-text-color); }
.vs-riga.selezionata { background: var(--vs-selezione); }
.vs-riga-testo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.vs-riga-titolo { font-weight: 600; overflow-wrap: anywhere; }
.vs-riga-sotto { font-size: .75rem; color: var(--text-muted); overflow-wrap: anywhere; }
.vs-riga-freccia { margin-left: auto; font-size: 1.2rem; color: var(--text-muted); flex-shrink: 0; }

/* Intestazione di gruppo nelle liste (maiuscolo come nell'app) */
.vs-gruppo {
    padding: .55rem 1.25rem .35rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: rgb(var(--light-rgb));
    border-bottom: 1px solid var(--default-border);
}

/* Contatore dei caratteri sotto un campo di testo */
.vs-contatore {
    margin-top: .3rem;
    text-align: right;
    font-size: .68rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.vs-contatore.quasi { color: rgb(var(--warning-rgb)); font-weight: 600; }
.vs-contatore.oltre { color: rgb(var(--danger-rgb)); font-weight: 600; }

/* Annotazioni */
.vs-annotazioni { display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem 1.25rem 1.25rem; }
.vs-nota { min-height: 8.5rem !important; max-height: 16rem; resize: vertical; }
@supports (field-sizing: content) {
    .vs-nota { field-sizing: content; }
}

/* Etichetta "in arrivo" per le voci non ancora disponibili dentro le sotto-pagine */
.vs-in-arrivo {
    padding: .12rem .5rem;
    border-radius: 2rem;
    background: rgba(var(--secondary-rgb), .12);
    color: var(--text-muted);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Note del servizio + Servizio eseguito e terminato (ServizioNoteEseguito) */
.vs-note-eseguito { display: flex; flex-direction: column; gap: .35rem; }
.vs-nota-servizio { min-height: calc(var(--vs-righe, 10) * 1.5em + 1.6rem) !important; max-height: 32rem; }

.vs-eseguito-riga {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: .6rem 0 0;
    padding: .8rem 1rem;
    border: 1px solid var(--default-border);
    border-radius: .65rem;
    background: var(--custom-white);
    font-size: .8125rem;
    cursor: pointer;
}

.vs-eseguito-riga:has(input:focus-visible) { outline: 2px solid rgb(var(--primary-rgb)); outline-offset: 2px; }

/* Interruttore "Eseguito": arancio da fare, verde eseguito (come la riga del dettaglio) */
.vs-switch-eseguito.form-switch { padding-left: 0; margin: 0; min-height: 0; flex-shrink: 0; }

.vs-switch-eseguito.form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FF8C00'/%3e%3c/svg%3e");
    width: 2.6rem;
    height: 1.4rem;
    margin: 0;
    float: none;
    cursor: pointer;
    background-color: #FFF1E0;
    border-color: #FFB366;
}

.vs-switch-eseguito.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-color: #32A852;
    border-color: #32A852;
}

[data-theme-mode=dark] .vs-switch-eseguito.form-switch .form-check-input:not(:checked) { background-color: rgba(255, 140, 0, .15); border-color: rgba(255, 140, 0, .5); }

@media (max-width: 575.98px) {
    .vs-pagina-testa { margin: 1rem 0 1rem; gap: .65rem; }
    .vs-icona { display: none; }
    .vs-barra { margin-inline: -.75rem; border-radius: 0; border-inline: 0; padding: .65rem .75rem; }
    .vs-riga { padding: .7rem 1rem; }
    .vs-annotazioni { padding: 1rem; }
}