/*
 * Sistema di stile del gestionale Mendicino.
 * Riferimento: dalla 5n il mockup v5 «Mockup-Nuova-Grafica.html» (fuori da git, approvato il 10/11/2026), prima docs/mockup/mockup-v4.html.
 *
 * Come convive con EasyAdmin: il CSS di EasyAdmin (Bootstrap compreso) e tutto
 * dentro dei "@layer", questo file no. Nella cascata CSS le regole fuori dai
 * layer vincono SEMPRE su quelle dentro, a prescindere dalla specificita. Quindi:
 * - qui non si scrivono regole su elementi nudi (a, button, table...) che
 *   finirebbero per sovrascrivere i componenti di EasyAdmin;
 * - quando si ridisegna una classe che EasyAdmin usa (.btn, .alert, .badge...)
 *   vanno coperte tutte le sue varianti, perche le nostre vincono comunque;
 * - dove basta, si cambiano i "token" di EasyAdmin (variabili --ea-*, --font-*...).
 *
 * Indice:
 *  1. Font
 *  2. Variabili
 *  3. Base
 *  4. Guscio (menu laterale, barra in alto, contenuto)
 *  5. Componenti del mockup
 *  6. Pagine EasyAdmin esistenti
 *  7. Login
 *  8. Responsive
 */

/* ===================== 1. Font (public/fonts, licenza OFL: OFL-Outfit.txt, OFL-Inter.txt) ===================== */

/* 5n: Outfit (titoli e numeri grandi) e Inter (testi), dai pacchetti @fontsource, latin e latin-ext, 400–700. Barlow non lo usa più
   nessuna pagina: tolte le sue @font-face (5n) e i file con la licenza (5n-bis). */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/outfit-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/outfit-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/outfit-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/outfit-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/outfit-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/outfit-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/outfit-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/outfit-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* ===================== 2. Variabili ===================== */

/* 5n: token del mockup v5 (Mockup-Nuova-Grafica.html, approvato il 10/11/2026). I nomi vecchi (--blu, --ciano, --linea, --carta,
   --rosso…) restano come alias dei nuovi: le regole delle pagine scritte prima della 5n si ricolorano da sole. Testi grigi e rossi un
   po' più scuri del mockup per stare sopra 4,5:1 (rapporti nelle note della 5n). */
:root {
	--bg: #F3F4F9;
	--surface: #fff;
	--surface-2: #F8F9FC;
	--line: #E8EAF2;
	--line-2: #D9DCE8;
	--ink: #161A33;
	--ink-2: #565C75;
	--ink-3: #666C85;
	--primary: #4338CA;
	--primary-2: #6366F1;
	--primary-soft: #EEF0FF;
	--primary-ring: #A5B0F7;
	--violet: #7C3AED;
	--violet-soft: #F3EEFF;
	--teal: #0F766E;
	--teal-soft: #E6F6F3;
	--green: #15803D;
	--green-soft: #E8F7EE;
	--amber: #B45309;
	--amber-soft: #FFF4E2;
	--red: #B91C1C;
	--red-soft: #FDEDEA;
	--wa: #0F7A40;
	--wa-soft: #EAF8F0;
	--r-card: 20px;
	--r-in: 14px;
	--pill: 999px;
	--sh: 0 1px 2px rgba(22, 26, 51, .04), 0 8px 28px rgba(22, 26, 51, .05);
	--sh-up: 0 2px 4px rgba(22, 26, 51, .05), 0 16px 40px rgba(22, 26, 51, .10);
	--head: 'Outfit', system-ui, sans-serif;
	--body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--sfondo-pagina: radial-gradient(1200px 600px at 100% -10%, #E9E6FF 0, transparent 60%), radial-gradient(900px 500px at -10% 110%, #E3F1FF 0, transparent 60%), var(--bg);

	/* nomi di prima (fino alla 5m), ora alias dei token v5 */
	--navy: #1B1F4B;
	--navy2: #232870;
	--blu: var(--primary);
	--blu-scuro: #3730A3;
	--ciano: var(--primary-2);
	--ciano-l: var(--primary-soft);
	--ciano-testo: var(--primary);
	--carta: var(--surface);
	--ink2: var(--ink-2);
	--linea: var(--line);
	--linea2: #F0F1F6;
	--rosso: var(--red);
	--rosso-l: var(--red-soft);
	--ambra: var(--amber);
	--ambra-l: var(--amber-soft);
	--verde: var(--green);
	--verde-l: var(--green-soft);
	--r: var(--r-card);
	--r-sm: var(--r-in);
	--font: var(--body);
	--cond: var(--head);
	--side-w: 256px;
	--content-max: none; /* 5l-bis: il contenuto segue la larghezza della finestra */

	/* Token di EasyAdmin: ricolorano i suoi componenti senza riscriverli */
	--font-family-base: var(--body);
	--ea-primary: var(--primary);
	--ea-radius: var(--r-in);
	--body-bg: var(--bg);
	--content-bg: transparent;
	--text-color: var(--ink);
	--text-muted: var(--ink-2);
	--link-color: var(--primary);
	--link-hover-color: #3730A3;
	--form-label-color: var(--ink-2);
	--form-input-border-color: var(--line-2);
	--form-input-hover-border-color: #C5C9D8;
	--switch-checked-bg: var(--primary-2);
	--table-hover-cell-bg: #FAFAFE;
	--table-cell-border-color: #F0F1F6;
	--table-thead-color: var(--ink-3);
	--pagination-active-bg: var(--primary);
	--pagination-active-color: #fff;
	--bs-link-color-rgb: 67, 56, 202;
	--bs-body-font-family: var(--body);
}

/* ===================== 3. Base ===================== */

body.ea,
body.pagina-login {
	margin: 0;
	min-height: 100vh;
	font-family: var(--body);
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--ink);
	background: var(--sfondo-pagina);
	background-attachment: fixed;
	/* cifre tutte della stessa larghezza: i numeri delle tabelle stanno in colonna */
	font-feature-settings: "tnum" 1, "cv11" 1;
}

body.ea *,
body.ea *::before,
body.ea *::after,
.pagina-login *,
.pagina-login *::before,
.pagina-login *::after {
	box-sizing: border-box;
}

/* Le pagine del gestionale si riconoscono dalla classe "ea" che EasyAdmin mette
   sempre sul body (le pagine CRUD sostituiscono il resto delle classi).

   EasyAdmin avvolge tutto in .wrapper, una griglia a due colonne pensata per
   il suo menu: il guscio (.app) ha la sua griglia, quindi .wrapper resta neutro */
body.ea > .wrapper {
	display: block;
	min-height: 100vh;
	background: transparent;
}

/* 5n: focus ben visibile su tutto ciò che si clicca (anello indaco chiaro staccato dal bordo) */
body.ea :focus-visible,
.pagina-login :focus-visible {
	outline: 2.5px solid var(--primary-2);
	outline-offset: 2px;
}

.side :focus-visible { outline-color: #fff; }

.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.small { font-size: 13px; }
.xs { font-size: 12px; }
.cond, .head { font-family: var(--head); }

@media (prefers-reduced-motion: reduce) {
	body.ea *,
	body.ea *::before,
	body.ea *::after,
	.pagina-login * {
		transition: none !important;
		animation: none !important;
	}
}

/* 6a: server di prova (APP_AMBIENTE=prova): fascia sottile in cima a ogni pagina, a righe rosse, testo bianco (contrasto 6,5:1) */
.fascia-prova {
	position: relative;
	z-index: 50;
	padding: 5px 16px;
	font: 600 13px/1.4 var(--body);
	text-align: center;
	color: #fff;
	background: repeating-linear-gradient(135deg, var(--red) 0 18px, #A11818 18px 36px);
	letter-spacing: .01em;
}

/* ===================== 4. Guscio ===================== */

/* 5n: menu staccato dai bordi (raggio 24), contenuto accanto con 16 px di aria */
.app {
	display: grid;
	grid-template-columns: var(--side-w) minmax(0, 1fr);
	gap: 16px;
	padding: 16px;
	min-height: 100vh;
}

/* --- menu laterale scuro --- */
.side {
	position: sticky;
	top: 16px;
	height: calc(100vh - 32px);
	overflow: auto;
	padding: 18px 14px;
	border: 1px solid #171A47;
	border-radius: 24px;
	background: linear-gradient(180deg, #232870 0%, #171A47 100%);
	box-shadow: 0 10px 30px rgba(23, 26, 71, .25);
	color: #F4F5FF;
	display: flex;
	flex-direction: column;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .2) transparent;
}

.side::-webkit-scrollbar { width: 6px; }
.side::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 6px; }

.brand {
	display: flex;
	gap: 11px;
	align-items: center;
	padding: 4px 8px 12px;
	color: #fff;
	text-decoration: none;
}

.brand:hover { color: #fff; }

.brand .ico {
	width: 38px;
	height: 38px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: linear-gradient(135deg, #818CF8, #A78BFA);
	color: #fff;
}

.brand b {
	display: block;
	font-family: var(--head);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.1;
}

.brand small {
	display: block;
	color: #C2C6F0;
	font-size: 12px;
}

/* .nav e anche una classe di Bootstrap (flex in riga): qui e una colonna */
.side .nav {
	display: block;
	padding: 0;
}

/* gruppi: titolo maiuscolo grigio-lavanda, linea sottile e più aria fra un gruppo e l'altro */
.nav-g {
	margin-top: 14px;
	padding-top: 6px;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.nav-g > span {
	display: block;
	padding: 12px 12px 8px;
	color: #B3B8E8;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.nav a,
.nav summary {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 12px;
	border-radius: 12px;
	color: #F4F5FF;
	text-decoration: none;
	font-weight: 500;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.nav a + a { margin-top: 2px; }

.nav a svg,
.nav summary svg {
	width: 18px;
	height: 18px;
	flex: none;
	color: #fff;
}

.nav a:hover,
.nav summary:hover {
	background: rgba(255, 255, 255, .10);
	color: #fff;
}

/* voce aperta: pillola bianca con testo e icona indaco */
.nav a.on {
	background: #fff;
	color: #2E2A8F;
	font-weight: 600;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.nav a.on svg { color: var(--primary); }

/* contatori a pillola viola; «presto» per le sezioni in arrivo */
.nav a .cnt {
	margin-left: auto;
	padding: 1px 8px;
	border-radius: var(--pill);
	background: var(--violet);
	color: #fff;
	font-size: 11.5px;
	font-weight: 600;
}

.nav a.on .cnt { background: var(--primary); }

.nav a .testo {
	display: contents;
}

.nav a .arrivo {
	margin-left: auto;
	padding: 1px 8px;
	border-radius: var(--pill);
	background: rgba(255, 255, 255, .16);
	color: #fff;
	font-size: 11.5px;
	font-style: normal;
	font-weight: 600;
	white-space: nowrap;
}

.nav a.on .arrivo { background: var(--primary-soft); color: var(--primary); }

/* voce figlia senza icona */
.nav a.voce-figlia {
	padding: 6px 10px;
	font-size: 13.5px;
}

/* 4e: voce con la tendina (Dipendenti, Automezzi, Rimorchi): link + freccia separata, figlie rientrate con una linea a sinistra */
.nav-riga {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-top: 2px;
}

.nav-riga a { flex: 1; min-width: 0; }

.nav-riga a.dentro { background: rgba(255, 255, 255, .10); color: #fff; }

.nav-freccia {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 38px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.nav-freccia:hover,
.nav-freccia:focus-visible { background: rgba(255, 255, 255, .10); color: #fff; }

.nav-freccia svg {
	pointer-events: none; /* 5a: il clic è sempre del pulsante */
	width: 16px;
	height: 16px;
	opacity: .85;
	transition: transform .2s;
}

.nav-freccia[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-figlie {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 2px 0 6px 21px;
	padding-left: 12px;
	border-left: 1.5px solid rgba(255, 255, 255, .2);
}

.nav-figlie[hidden] { display: none; }

.nav .nav-figlie a {
	padding: 6px 10px;
	margin: 0;
	color: #DCDEFA;
	font-size: 13.5px;
}

.nav .nav-figlie a.on { color: #2E2A8F; }

.nav-figlie .n {
	margin-left: auto;
	color: #A9AEDB;
	font-size: 12px;
}

.nav-figlie a.on .n { color: var(--primary); }

/* sottomenu (Tabelle di base) */
.nav-sub summary { list-style: none; }
.nav-sub summary::-webkit-details-marker { display: none; }

.nav-sub summary .freccia {
	margin-left: auto;
	width: 16px;
	height: 16px;
	transition: transform .2s;
}

.nav-sub[open] summary .freccia { transform: rotate(180deg); }
.nav-sub summary.dentro { color: #fff; }

.nav-sub a {
	padding: 6px 10px 6px 38px;
	font-size: 13.5px;
}

.side .nav { margin-bottom: 12px; }

/* --- area principale --- */
.main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* barra in alto: riga piccola (sezione o data), titolo grande in Outfit, azioni e pillola dell'utente a destra */
.top {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 6px 4px 0;
}

.top-titolo { flex: 1 1 260px; min-width: 0; }

.top h1 {
	margin: 0;
	overflow: hidden;
	font-family: var(--head);
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.15;
	color: var(--ink);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.top .crumb {
	color: var(--ink-3);
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.top .crumb a {
	color: var(--primary);
	text-decoration: none;
}

.top .crumb a:hover { text-decoration: underline; }

.top .acts {
	margin-left: auto;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	min-width: 0;
}

.top .apri-menu { display: none; }

/* pillola dell'utente con il menu «La mia password» · «Esci» */
.utente-menu {
	position: relative;
	flex: none;
}

.utente-menu > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 14px 4px 4px;
	border: 1px solid var(--line);
	border-radius: var(--pill);
	background: var(--surface);
	box-shadow: var(--sh);
	cursor: pointer;
	list-style: none;
}

.utente-menu > summary::-webkit-details-marker { display: none; }
.utente-menu > summary:hover { border-color: var(--line-2); }

.utente-menu .av {
	width: 34px;
	height: 34px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: linear-gradient(135deg, #C7D2FE, #E9D5FF);
	color: var(--primary);
	font-size: 13px;
	font-weight: 700;
}

.utente-menu .chi b {
	display: block;
	max-width: 160px;
	overflow: hidden;
	font-size: 13.5px;
	line-height: 1.15;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.utente-menu .chi span { display: block; color: var(--ink-3); font-size: 11.5px; line-height: 1.3; }

.utente-menu > summary > svg { width: 14px; height: 14px; color: var(--ink-3); transition: transform .2s; }
.utente-menu[open] > summary > svg { transform: rotate(180deg); }

.utente-menu .tendina-utente {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	min-width: 210px;
	padding: 6px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--sh-up);
}

.utente-menu .tendina-utente a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 12px;
	border-radius: 10px;
	color: var(--ink);
	font-weight: 500;
	text-decoration: none;
}

.utente-menu .tendina-utente a:hover { background: var(--surface-2); }
.utente-menu .tendina-utente a svg { width: 16px; height: 16px; color: var(--ink-3); }
.utente-menu .tendina-utente .esci { color: var(--red); }
.utente-menu .tendina-utente .esci svg { color: var(--red); }

.content {
	width: 100%;
	max-width: var(--content-max);
	padding: 0 0 48px;
}

.veil {
	position: fixed;
	inset: 0;
	z-index: 39;
	display: none;
	background: rgba(22, 26, 51, .25);
	backdrop-filter: blur(2px);
}

.veil.open { display: block; }


/* ===================== 5. Componenti del mockup ===================== */

/* --- pulsanti a pillola: solo bordo e testo colorato, fondo bianco o trasparente (valgono anche per i .btn di EasyAdmin) ---
   neutro (bordo grigio) · .pri / .btn-primary indaco · .ok / .verde / .btn-success verde · .ko / .rosso / .btn-danger rosso ·
   .wa verde WhatsApp · .vi viola (i soldi del controllo fatturato) · .ghost / .btn-link senza bordo. Taglie .sm 32 px, 40 px, .lg 46 px */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 17px;
	border: 1.5px solid var(--line-2);
	border-radius: var(--pill);
	background: transparent;
	color: var(--ink);
	font-family: var(--body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	touch-action: manipulation;
	transition: background .15s, border-color .15s, color .15s, transform .1s;
}

.btn:hover {
	border-color: #C5C9D8;
	background: var(--surface-2);
	color: var(--ink);
}

.btn:active { transform: scale(.97); }

.btn svg,
.btn .icon svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.btn .icon,
.btn .btn-icon {
	display: inline-flex;
	align-items: center;
}

.btn.pri,
.btn-primary {
	border-color: var(--primary);
	background: #fff;
	color: var(--primary);
}

.btn.pri:hover,
.btn-primary:hover,
.btn-primary:focus {
	border-color: var(--primary);
	background: var(--primary-soft);
	color: var(--primary);
}

.btn-secondary {
	border-color: var(--line-2);
	background: #fff;
	color: var(--ink);
}

.btn-secondary:hover { border-color: #C5C9D8; background: var(--surface-2); color: var(--ink); }

.btn.ghost,
.btn-link,
.btn-invisible {
	border-color: transparent;
	background: transparent;
	color: var(--ink-2);
}

.btn.ghost:hover,
.btn-link:hover,
.btn-invisible:hover {
	border-color: transparent;
	background: var(--surface-2);
	color: var(--ink);
}

.btn.sm,
.btn-sm {
	min-height: 32px;
	padding: 0 13px;
	font-size: 13px;
}

.btn.lg,
.btn-lg {
	min-height: 46px;
	padding: 0 22px;
	font-size: 15px;
}

.btn-block {
	display: flex;
	width: 100%;
}

.btn.wa {
	border-color: #86CFA6;
	background: #fff;
	color: var(--wa);
}

.btn.wa:hover { border-color: #86CFA6; background: var(--wa-soft); color: var(--wa); }

.btn.ok,
.btn.verde,
.btn-success {
	border-color: #7CC79A;
	background: #fff;
	color: var(--green);
}

.btn.ok:hover,
.btn.verde:hover,
.btn-success:hover { border-color: #7CC79A; background: var(--green-soft); color: var(--green); }

.btn.ko,
.btn.rosso,
.btn-danger {
	border-color: #F0A99A;
	background: #fff;
	color: var(--red);
}

.btn.ko:hover,
.btn.rosso:hover,
.btn-danger:hover { border-color: #F0A99A; background: var(--red-soft); color: var(--red); }

.btn.vi {
	border-color: #B9A3F5;
	background: #fff;
	color: var(--violet);
}

.btn.vi:hover { border-color: #B9A3F5; background: var(--violet-soft); color: var(--violet); }

.btn-warning {
	border-color: #F3C77A;
	background: #fff;
	color: var(--amber);
}

.btn-warning:hover { border-color: #F3C77A; background: var(--amber-soft); color: var(--amber); }

.btn.disabled,
.btn:disabled,
.btn[disabled] {
	opacity: .45;
	cursor: not-allowed;
	pointer-events: none;
}

/* --- card (riquadri): bianche, bordo leggero, raggio 20, ombra leggera; testa con titolo Outfit 17 px e icona grigia --- */
.box {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	box-shadow: var(--sh);
}

.box-h {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	min-height: 52px;
	padding: 16px 20px 4px;
}

.box-h h2 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: var(--head);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.01em;
}

.box-h h2 > svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); }

.box-h .r { margin-left: auto; }

.box-b { padding: 16px 20px 20px; }

.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-side { grid-template-columns: minmax(0, 1fr) 340px; }

/* --- KPI: card con l'etichetta in alto e il numero grande in Outfit --- */
.kpi {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--surface);
	box-shadow: var(--sh);
}

.kpi .n {
	font-family: var(--head);
	font-size: 34px;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}

.kpi .l {
	color: var(--ink-2);
	font-size: 13.5px;
	font-weight: 500;
}

.kpi a {
	margin-top: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--primary);
}

.kpi.r .n { color: var(--red); }
.kpi.a .n { color: var(--amber); }
.kpi.v .n { color: var(--green); }
.kpi.b .n { color: var(--primary); }

.prog {
	display: flex;
	gap: 2px;
	height: 8px;
	overflow: hidden;
	border-radius: var(--pill);
	background: #EEF0F6;
}

.prog i {
	display: block;
	height: 100%;
	border-radius: var(--pill);
	background: #4CB673;
}

/* --- targa: resta «a targa» con la banda blu, più leggibile (14,5 px, grassetto); non va mai a capo e non si stringe --- */
.targa {
	display: inline-flex;
	flex: none;
	align-items: stretch;
	overflow: hidden;
	vertical-align: middle;
	border: 1.5px solid #2B3550;
	border-radius: 6px;
	background: #fff;
	color: #1B2238;
	font-family: var(--head);
	font-weight: 700;
	font-size: 14.5px;
	letter-spacing: .08em;
	line-height: 1;
	white-space: nowrap;
}

.targa::before {
	content: "I";
	display: flex;
	align-items: flex-end;
	padding: 0 4px 3px;
	background: #2547A8;
	color: #fff;
	font-size: 8px;
	letter-spacing: 0;
}

.targa span { padding: 5px 8px 4px; }

.targa.sm { font-size: 13px; }
.targa.sm span { padding: 4px 6px 3px; }

.targa.big {
	font-size: 22px;
	border-width: 2px;
}

.targa.big::before {
	padding: 0 6px 5px;
	font-size: 11px;
}

.targa.big span { padding: 7px 12px 6px; }

/* --- etichette di stato a pillola con il pallino (.pill e .tag): verde, ambra, rosso, indaco (b), viola (p), teal (t), grigio (g),
   contorno (o); .nd senza pallino --- */
.pill,
.tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border: 1px solid transparent;
	border-radius: var(--pill);
	background: #F1F2F7;
	color: var(--ink-2);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.pill::before,
.tag::before {
	content: "";
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 50%;
	background: currentColor;
}

.pill.nd::before,
.tag.nd::before,
a.pill::before,
.pill:empty::before { display: none; }

.pill.v, .tag.v { background: var(--green-soft); color: var(--green); }
.pill.a, .tag.a { background: var(--amber-soft); color: var(--amber); }
.pill.r, .tag.r { background: var(--red-soft); color: var(--red); }
.pill.b, .tag.b { background: var(--primary-soft); color: var(--primary); }
.pill.p, .tag.p { background: var(--violet-soft); color: var(--violet); }
.pill.t, .tag.t { background: var(--teal-soft); color: var(--teal); }
.pill.g, .tag.g { background: #F1F2F7; color: var(--ink-2); }
.pill.o, .tag.o { background: #fff; border-color: var(--line-2); color: var(--ink-2); }
.pill.wa { background: var(--wa-soft); color: var(--wa); }

.dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.dot.r { background: var(--red); }
.dot.a { background: var(--amber); }
.dot.v { background: var(--green); }

/* --- sigle presenza della giornaliera: pillole colorate più grandi --- */
.flags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.fl {
	display: inline-grid;
	place-items: center;
	min-width: 30px;
	height: 24px;
	padding: 0 8px;
	border: 1px solid transparent;
	border-radius: var(--pill);
	font-family: var(--head);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
}

.fl.N { background: #ECEBFF; color: var(--primary); }
.fl.S { background: #F1F2F7; color: var(--ink-2); }
.fl.PS { background: var(--red-soft); color: var(--red); }
.fl.F { background: var(--green-soft); color: var(--green); }
.fl.M { background: var(--amber-soft); color: var(--amber); }
.fl.I { background: #FDE9DC; color: #9A3412; }
.fl.XF { background: var(--teal-soft); color: var(--teal); }
/* assenze di giornata intera del 3f-septies: legge 104 e congedo parentale */
.fl.L104 { background: var(--violet-soft); color: var(--violet); }
.fl.CP { background: #FCE7F3; color: #9D174D; }

/* --- persona: tondo con le iniziali e nome (Disponibilità, Dashboard) --- */
.avatar {
	width: 32px;
	height: 32px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #E0E7FF;
	color: #3730A3;
	font-size: 12px;
	font-weight: 600;
}

.person {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.person b { display: block; font-weight: 600; line-height: 1.2; }
.person span { color: var(--ink-3); font-size: 12.5px; }

/* --- riquadro «suggerimento» con la stellina viola, per gli avvisi utili --- */
.ai {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 11px 14px;
	border: 1px solid #E4E0FB;
	border-radius: 14px;
	background: linear-gradient(135deg, #F5F3FF, #F0F6FF);
	color: #3B3672;
	font-size: 13.5px;
}

.ai > svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--violet); }

/* --- interruttore on/off (.sw-on dei nuovi, .interruttore degli Utenti: sezione 5a) --- */
.sw-on {
	position: relative;
	width: 38px;
	height: 22px;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: var(--pill);
	background: #C9CDDA;
	cursor: pointer;
	transition: background .15s;
}

.sw-on::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px #0003;
	transition: left .15s;
}

.sw-on.on,
.sw-on[aria-pressed="true"] { background: var(--primary-2); }
.sw-on.on::after,
.sw-on[aria-pressed="true"]::after { left: 19px; }

/* --- tabelle: intestazione maiuscola piccola grigia, righe alte (15 px), testo 14,5 px, hover leggero --- */
/* position: relative tiene dentro il riquadro anche gli elementi posizionati
   (es. le etichette .visually-hidden), che altrimenti allargherebbero la pagina */
.tbl-wrap {
	position: relative;
	overflow-x: auto;
}

table.t {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14.5px;
}

.t th {
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
	background: transparent;
	color: var(--ink-3);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.t td {
	padding: 15px 14px;
	border-bottom: 1px solid #F0F1F6;
	vertical-align: middle;
}

.t tbody tr:last-child td { border-bottom: 0; }
.t tbody tr { transition: background .12s; }
.t tbody tr:hover td { background: #FAFAFE; }
.t td b { font-weight: 600; }
.t td:has(> .targa) { white-space: nowrap; }

/* 5j: EasyAdmin dà a tutte le celle «overflow-wrap: anywhere» (selettore :where, peso zero): con tante colonne il browser le stringe
   fino a una lettera per riga («GF301 / XX», «Disp / onib / ile»). In tutte le tabelle del gestionale una parola si spezza solo se da
   sola non sta nella colonna; chi vuole il testo spezzato ovunque (note, percorsi) lo chiede con la sua regola */
.t th, .t td { overflow-wrap: break-word; }
.t .nowrap { white-space: nowrap; }
/* un testo troncato («…», testo intero nel tooltip) da solo in una cella prende lo spazio che resta invece di allargare la tabella
   (programma dei Viaggi, «Cosa è successo» dei Sinistri, viaggio della Giornaliera…) */
.t td:has(> .trunc:only-child) { min-width: 140px; }
.t td > .trunc:only-child { width: 0; min-width: 100%; max-width: none; }
/* stato di WhatsApp nei Viaggi e stato degli Automezzi: le etichette lunghe («Autista non collegato», «Non disponibile») vanno a capo fra le
   parole invece di allargare la tabella */
.tabella-viaggi .colonna-whatsapp .pill, .tabella-automezzi .cella-stato .pill { white-space: normal; }
/* fino a 1500 px (MacBook) celle un po' più strette ai lati: le tabelle con tante colonne stanno senza scorrere */
@media (max-width: 1500px) {
	.t th, .t td { padding-left: 9px; padding-right: 9px; }
	/* le intestazioni lunghe («Autista abituale», «Nel pannello») vanno a capo fra le parole invece di allargare la colonna */
	.t th { white-space: normal; vertical-align: bottom; }
	.t th:first-child, .t td:first-child { padding-left: 16px; }
	.t th:last-child, .t td:last-child { padding-right: 16px; }
	/* Tabelle di base: la tabella divide la riga con il form, ancora più stretta */
	.tabelle-base .t th, .tabelle-base .t td { padding-left: 7px; padding-right: 7px; }
	.tabelle-base .t th:first-child, .tabelle-base .t td:first-child { padding-left: 16px; }
}

.t td.num,
.t th.num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* azioni di riga: compaiono al passaggio del mouse */
.t .rowact {
	opacity: 0;
	transition: opacity .1s;
}

.t tr:hover .rowact,
.t .rowact:focus-visible,
.t .rowact:focus-within { opacity: 1; }

@media (hover: none) { .t .rowact { opacity: 1; } }

.t tr.del td { color: #9A9FB4; }

.trunc {
	max-width: 280px;
	overflow: hidden;
	color: var(--ink-2);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* lista compatta dentro i riquadri */
.ls {
	margin: 0;
	padding: 4px 20px;
	list-style: none;
}

.ls li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid #F0F1F6;
}

.ls li:last-child { border-bottom: 0; }
.ls .r { margin-left: auto; }

.view-dl {
	display: grid;
	grid-template-columns: 180px 1fr;
	margin: 0;
	font-size: 14.5px;
}

.view-dl dt {
	padding: 11px 20px;
	border-bottom: 1px solid #F0F1F6;
	color: var(--ink-2);
	font-size: 13px;
	font-weight: 600;
}

.view-dl dd {
	margin: 0;
	padding: 10px 20px;
	border-bottom: 1px solid #F0F1F6;
}

/* --- campi: input e select a pillola (select con la freccia SVG), textarea con raggio 16; etichetta sopra --- */
.form { display: grid; gap: 16px; }
/* 6b: le griglie dei campi si adattano alla larghezza del LORO riquadro (non della finestra): al massimo 2, 3 o 4 campi per riga,
   meno quando un campo scenderebbe sotto 170 px (4 → 3 → 2 → 1). Nessun campo più largo della sua colonna. */
.f2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(170px, calc((100% - 16px) / 2))), 1fr)); gap: 16px; }
.f3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(170px, calc((100% - 32px) / 3))), 1fr)); gap: 16px; }
.f4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(170px, calc((100% - 48px) / 4))), 1fr)); gap: 16px; }
.f2 > *, .f3 > *, .f4 > *, .fld { min-width: 0; }
.fld .inp, .fld .form-control, .fld .form-select, .fld textarea, .fld .ts-wrapper { max-width: 100%; }

.fld label {
	display: block;
	margin: 0 0 6px 4px;
	color: var(--ink-2);
	font-size: 12.5px;
	font-weight: 600;
}

.inp {
	width: 100%;
	min-height: 40px;
	padding: 8px 15px;
	border: 1.5px solid var(--line);
	border-radius: var(--pill);
	background: #fff;
	color: var(--ink);
	font: inherit;
	transition: border-color .15s;
}

.inp:hover { border-color: var(--line-2); }

.inp:focus {
	outline: none;
	border-color: var(--primary-2);
	box-shadow: 0 0 0 3px #6366F126;
}

textarea.inp {
	border-radius: 16px;
	padding: 12px 15px;
	line-height: 1.5;
}

select.inp {
	appearance: none;
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666C85' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
}

select.inp[multiple] { border-radius: 16px; background-image: none; padding-right: 15px; }

.inp.eur {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.hint {
	margin: 5px 4px 0;
	color: var(--ink-3);
	font-size: 12.5px;
}

.sec-t {
	margin: 6px 0 0;
	padding-top: 14px;
	border-top: 1px solid #F0F1F6;
	font-family: var(--head);
	font-size: 16px;
	font-weight: 600;
}

.formbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	padding: 14px 20px;
	border-top: 1px solid var(--line);
	border-radius: 0 0 var(--r-card) var(--r-card);
	background: transparent;
}

.formbar .l { margin-right: auto; }

/* chip selezionabili (sigle nel form): pillole da accendere e spegnere */
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 6px 14px;
	border: 1.5px solid var(--line-2);
	border-radius: var(--pill);
	background: #fff;
	color: var(--ink);
	font-weight: 500;
	font-size: 13px;
	cursor: pointer;
	user-select: none;
	transition: background .15s, border-color .15s;
}

.chip:hover { border-color: #C5C9D8; }

.chip input[type=checkbox] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.chip:has(input:focus-visible) { outline: 2.5px solid var(--primary-2); outline-offset: 2px; }

.chip .k {
	min-width: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--ink);
	font-family: var(--head);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}

.chip.on {
	border-color: var(--primary);
	background: var(--primary-soft);
	color: var(--primary);
}

.chip.on .k { background: none; color: var(--primary); }
.chip .k + span { color: var(--ink-3); font-weight: 500; }
.chip.on .k + span { color: var(--primary); }
/* 5n: ore del permesso XF accanto alla sua pillola */
.chip-ore { display: inline-flex; align-items: center; gap: 6px; }
.chip-ore .inp, .content .chip-ore .form-control { width: 70px; min-height: 40px; padding: 6px 12px; text-align: center; }

/* --- barra filtri --- */
.filters {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 10px;
	margin-bottom: 16px;
}

.filters .fld { min-width: 170px; }

.search {
	position: relative;
	flex: 1;
	min-width: 220px;
}

.search svg {
	position: absolute;
	top: 11px;
	left: 14px;
	width: 18px;
	height: 18px;
	color: var(--ink-3);
}

.search .inp { padding-left: 40px; }

/* controlli segmentati: fondo grigio chiaro, voce accesa bianca con testo indaco */
.seg {
	display: inline-flex;
	max-width: 100%;
	gap: 2px;
	padding: 3px;
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--pill);
	background: var(--surface-2);
	scrollbar-width: none;
}

.seg button,
.seg a {
	padding: 6px 14px;
	border: 0;
	border-radius: var(--pill);
	background: transparent;
	color: var(--ink-2);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.seg button:hover,
.seg a:hover { color: var(--ink); }

.seg button.on,
.seg a.on {
	background: #fff;
	color: var(--primary);
	box-shadow: 0 1px 3px rgba(22, 26, 51, .1);
}

.rtype {
	display: inline-flex;
	gap: 2px;
	padding: 2px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--pill);
	background: var(--surface-2);
	font-size: 12px;
}

.rtype span {
	padding: 3px 9px;
	border-radius: var(--pill);
	color: var(--ink-2);
	cursor: pointer;
}

.rtype span.on {
	background: #fff;
	color: var(--primary);
	box-shadow: 0 1px 3px rgba(22, 26, 51, .1);
}

/* --- avvisi, note e stati vuoti --- */
.alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1px solid #DDE0FA;
	border-radius: 16px;
	background: var(--primary-soft);
	color: #312E81;
	font-size: 14px;
}

.alert > svg { flex: none; }

.alert.a,
.alert-warning { border-color: #F6DFB5; background: var(--amber-soft); color: #7A4A06; }

.alert.b,
.alert-info { border-color: #DDE0FA; background: var(--primary-soft); color: #312E81; }

.alert.r,
.alert-danger { border-color: #F6C9C0; background: var(--red-soft); color: #8A1C1C; }

.alert.v,
.alert-success { border-color: #BFE5CD; background: var(--green-soft); color: #14532D; }

.alert a { color: inherit; font-weight: 600; }

.alert .btn-close {
	margin-left: auto;
	padding: 2px 6px;
	color: inherit;
}

.empty {
	padding: 40px 20px;
	color: var(--ink-2);
	text-align: center;
}

.empty h2 {
	margin: 8px 0 6px;
	color: var(--ink);
	font-family: var(--head);
	font-size: 22px;
	font-weight: 600;
}

.empty p { margin: 0 auto 12px; max-width: 52ch; }

.empty .empty-ico {
	width: 40px;
	height: 40px;
	color: var(--primary-2);
}

.note {
	margin-top: 18px;
	padding: 12px 14px;
	border: 1.5px dashed var(--primary-ring);
	border-radius: 14px;
	background: #F7F7FF;
	color: #312E81;
	font-size: 13.5px;
}

.note b { color: var(--ink); }

/* --- pannello laterale (drawer) --- */
.drawer {
	position: fixed;
	top: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 40;
	display: flex;
	flex-direction: column;
	width: 440px;
	max-width: calc(100% - 32px);
	height: auto;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--sh-up);
	transform: translateX(calc(100% + 32px));
	transition: transform .25s cubic-bezier(.2, 0, 0, 1);
}

.drawer.open { transform: none; }
.drawer .box-h { padding: 18px 20px; }

.drawer .body {
	flex: 1;
	overflow: auto;
	padding: 0 0 20px;
}

/* --- passi (stepper) --- */
.steps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
}

.steps span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border: 1.5px solid var(--line);
	border-radius: var(--pill);
	background: #fff;
	color: var(--ink-2);
	font-size: 13.5px;
	font-weight: 600;
}

.steps span b {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #F0F1F6;
	font-size: 12px;
}

.steps span.on { border-color: var(--primary); color: var(--primary); }
.steps span.on b { background: var(--primary); color: #fff; }
.steps span.ok b { background: var(--green); color: #fff; }

.steps i {
	width: 18px;
	height: 2px;
	background: var(--line);
}


/* ===================== 6. Pagine EasyAdmin esistenti ===================== */
/* Indice, nuovo, modifica, dettaglio, filtri, paginazione, azioni e messaggi
   flash di EasyAdmin, con i componenti qui sopra (5n: campi a pillola, card bianche, tabelle ariose). */

/* --- azioni in alto (barra .top) --- */
.page-actions .global-actions,
.page-actions .datagrid-filters,
.page-actions .batch-actions,
.page-actions .btn-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.page-actions .btn i,
.page-actions .btn .icon { font-size: 14px; }

/* --- ricerca (solo negli elenchi) --- */
.barra-ricerca .form-action-search {
	flex: 1;
	max-width: 460px;
}

.barra-ricerca .form-group { margin: 0; }

.barra-ricerca .form-widget { position: relative; }

.barra-ricerca .content-search-icon {
	position: absolute;
	top: 12px;
	left: 15px;
	z-index: 1;
	width: 16px;
	height: 16px;
	color: var(--ink-3);
}

.barra-ricerca .content-search-label {
	display: block;
	margin: 0;
}

.barra-ricerca input[type=search] {
	padding-left: 40px;
	padding-right: 36px;
}

.barra-ricerca .content-search-reset {
	position: absolute;
	top: 50%;
	right: 12px;
	color: var(--ink-3);
	transform: translateY(-50%);
}

/* --- campi dei form: a pillola, select con la freccia SVG, textarea con raggio 16 --- */
.content .form-control,
.content .form-select,
.modal .form-control,
.modal .form-select {
	width: 100%;
	min-height: 40px;
	padding: 8px 15px;
	border: 1.5px solid var(--line);
	border-radius: var(--pill);
	background-color: #fff;
	color: var(--ink);
	font-family: var(--body);
	font-size: 14.5px;
	box-shadow: none;
	transition: border-color .15s;
}

.content .form-control:hover,
.content .form-select:hover { border-color: var(--line-2); }

.content .form-control:focus,
.content .form-select:focus,
.modal .form-control:focus,
.modal .form-select:focus {
	outline: none;
	border-color: var(--primary-2);
	box-shadow: 0 0 0 3px #6366F126;
}

.content .form-select,
.modal .form-select,
.content select.form-control {
	appearance: none;
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666C85' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
}

.content .form-control:disabled,
.content .form-control[readonly] {
	background-color: var(--surface-2);
	color: var(--ink-2);
}

.content textarea.form-control,
.modal textarea.form-control {
	min-height: 90px;
	border-radius: 16px;
	padding: 12px 15px;
	line-height: 1.5;
}

/* TomSelect (tendine con ricerca di EasyAdmin e dei CRUD): EasyAdmin disegna
   il bordo sul contenitore .ts-wrapper.form-select (con !important sul
   .ts-control interno), quindi il campo si stila sul contenitore */
.content .ts-wrapper.form-select,
.modal .ts-wrapper.form-select {
	padding: 0 8px;
	background-image: none;
}

.content .ts-wrapper.multi.form-select,
.modal .ts-wrapper.multi.form-select { border-radius: 20px; }

.content .ts-wrapper .ts-control,
.modal .ts-wrapper .ts-control {
	min-height: 37px;
	background: transparent;
	font-family: var(--body);
	font-size: 14.5px;
}

.content .ts-wrapper.focus,
.modal .ts-wrapper.focus {
	border-color: var(--primary-2);
	box-shadow: 0 0 0 3px #6366F126;
}

.ts-dropdown {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: var(--sh-up);
	font-family: var(--body);
}

.ts-dropdown .active {
	background: var(--primary-soft);
	color: var(--ink);
}

.content .form-control-label,
.content .form-label,
.modal .form-control-label {
	display: block;
	margin: 0 0 6px 4px;
	color: var(--ink-2);
	font-size: 12.5px;
	font-weight: 600;
}

.content .form-group {
	margin: 0 0 16px;
	padding-bottom: 0;
}

.content .form-text,
.content .form-help {
	margin: 5px 4px 0;
	color: var(--ink-3);
	font-size: 12.5px;
}

.content .invalid-feedback,
.content .form-error-message {
	color: var(--red);
	font-size: 13px;
}

.content .is-invalid,
.content .form-control.is-invalid {
	border-color: var(--red);
}

.content .form-check-label {
	color: var(--ink);
	font-weight: 600;
}

.content .form-check-input:checked {
	background-color: var(--primary-2);
	border-color: var(--primary-2);
}

.content .form-check-input:focus-visible { box-shadow: 0 0 0 3px #6366F140; }

/* i form di nuovo/modifica stanno in una card bianca */
.content-body > form.ea-new-form,
.content-body > form.ea-edit-form,
.content-body > .form-fieldset,
.content-body > .form-tabs,
.content-body > form[name] > .form-fieldset:only-child {
	padding: 22px 22px 6px;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--surface);
	box-shadow: var(--sh);
}

.content-body > form .form-fieldset,
.content-body > form .form-fieldset fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.content .form-fieldset-title,
.content .form-fieldset legend {
	padding-top: 14px;
	border-top: 1px solid #F0F1F6;
	font-family: var(--head);
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
}

/* righe ripetute (dettagli DDT e manutenzione) */
.content .field-collection-item,
.content .accordion-item {
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--surface-2);
}

.content .field-collection-add-button,
.content .field-collection-delete-button {
	font-size: 13px;
}

/* --- pagina di dettaglio: etichetta a sinistra, valore a destra --- */
.content-body > .form-fieldset .field-group {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	margin: 0;
	border-bottom: 1px solid #F0F1F6;
}

.content-body > .form-fieldset .field-group:last-child { border-bottom: 0; }

.content-body > .form-fieldset .field-label {
	padding: 12px 0;
	color: var(--ink-2);
	font-size: 13px;
	font-weight: 600;
}

.content-body > .form-fieldset .field-value { padding: 11px 0; }

/* EasyAdmin allinea a destra le etichette e sposta i campi Si/No: tutto a sinistra */
.content-body > .form-fieldset .field-group > .field-label,
.content-body > .form-fieldset .field-group > .field-value {
	margin: 0;
	padding-left: 0;
	padding-right: 12px;
	justify-content: flex-start;
	text-align: left;
}

/* --- badge di EasyAdmin (Si/No, Null...) come pillole --- */
.content .badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border: 0;
	border-radius: var(--pill);
	background: #F1F2F7;
	color: var(--ink-2);
	font-size: 12px;
	font-weight: 600;
}

.content .badge-boolean-true,
.content .badge-success { background: var(--green-soft); color: var(--green); }

.content .badge-danger { background: var(--red-soft); color: var(--red); }

.content .badge-warning { background: var(--amber-soft); color: var(--amber); }

.content .badge-info,
.content .badge-primary { background: var(--primary-soft); color: var(--primary); }

/* "Null" nelle celle vuote: si legge come un trattino grigio */
.content .badge-outline {
	padding: 0;
	border: 0;
	box-shadow: none;
	background: none;
	color: #9A9FB4;
	font-weight: 500;
}

/* --- elenchi (datagrid) e tabelle Bootstrap delle pagine custom: card bianca, intestazione maiuscola, righe alte --- */
@media (min-width: 768px) {
	/* le tabelle larghe scorrono dentro il contenuto, non la pagina */
	.content-body { overflow-x: auto; }

	table.datagrid,
	.content-body > table.table,
	.content .card table.table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 0;
		border: 1px solid var(--line);
		border-radius: var(--r-card);
		background: var(--surface);
		box-shadow: var(--sh);
		font-size: 14.5px;
	}

	table.datagrid th,
	.content-body > table.table th {
		padding: 12px 14px 10px;
		border-bottom: 1px solid var(--line);
		background: transparent;
		color: var(--ink-3);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .04em;
		text-align: left;
		text-transform: uppercase;
		white-space: nowrap;
	}

	table.datagrid thead tr:first-child th:first-child,
	.content-body > table.table thead tr:first-child th:first-child { border-top-left-radius: var(--r-card); padding-left: 20px; }

	table.datagrid thead tr:first-child th:last-child,
	.content-body > table.table thead tr:first-child th:last-child { border-top-right-radius: var(--r-card); }

	table.datagrid td,
	.content-body > table.table td {
		padding: 15px 14px;
		border-top: 0;
		border-bottom: 1px solid #F0F1F6;
		background: transparent;
		vertical-align: middle;
	}

	table.datagrid td:first-child,
	.content-body > table.table td:first-child { padding-left: 20px; }

	table.datagrid tbody tr:last-child td,
	.content-body > table.table tbody tr:last-child td { border-bottom: 0; }

	table.datagrid tbody tr:hover td,
	.content-body > table.table tbody tr:hover td { background: #FAFAFE; }

	/* azioni di riga (il menu "...") visibili al passaggio del mouse */
	table.datagrid td.actions .dropdown-toggle {
		opacity: 0;
		transition: opacity .1s;
	}

	table.datagrid tr:hover td.actions .dropdown-toggle,
	table.datagrid td.actions .dropdown-toggle:focus-visible,
	table.datagrid td.actions .dropdown-toggle.show { opacity: 1; }
}

/* sui dispositivi senza mouse le azioni restano sempre visibili */
@media (hover: none) {
	table.datagrid td.actions .dropdown-toggle { opacity: 1; }
}

table.datagrid th a {
	color: var(--ink-3);
	text-decoration: none;
}

table.datagrid th a:hover { color: var(--ink); }

table.datagrid th.sorted,
table.datagrid th.sorted a { color: var(--primary); }

table.datagrid td a { color: var(--primary); }

table.datagrid td.actions .dropdown-toggle {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1.5px solid var(--line-2);
	border-radius: 50%;
	background: #fff;
	color: var(--ink-2);
}

.datagrid-empty td,
.no-results {
	color: var(--ink-2);
}

/* menu a tendina (azioni di riga, ecc.) */
.dropdown-menu {
	padding: 6px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--sh-up);
	font-family: var(--body);
	font-size: 14px;
}

.dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 10px;
	color: var(--ink);
	font-weight: 500;
}

.dropdown-item:hover,
.dropdown-item:focus {
	background: var(--surface-2);
	color: var(--ink);
}

.dropdown-item-variant-danger,
.dropdown-item.action-delete { color: var(--red); }

.dropdown-item-variant-danger:hover,
.dropdown-item.action-delete:hover { background: var(--red-soft); color: var(--red); }

/* --- paginazione: pillole --- */
.content-panel-footer { margin-top: 14px; }

.list-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: var(--ink-3);
	font-size: 13px;
}

.list-pagination .pagination {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.list-pagination .page-link {
	display: inline-flex;
	align-items: center;
	min-width: 34px;
	height: 34px;
	justify-content: center;
	padding: 0 12px;
	border: 1.5px solid var(--line-2);
	border-radius: var(--pill);
	background: #fff;
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

.list-pagination .page-link:hover { border-color: #C5C9D8; background: var(--surface-2); }

.list-pagination .page-item.active .page-link {
	border-color: var(--primary);
	background: var(--primary-soft);
	color: var(--primary);
}

.list-pagination .page-item.disabled .page-link {
	opacity: .45;
	pointer-events: none;
}

/* --- finestre modali (filtri, conferme, giacenze) --- */
.modal-content {
	border: 1px solid var(--line);
	border-radius: 24px;
	font-family: var(--body);
	box-shadow: var(--sh-up);
}

.modal-header {
	padding: 16px 20px;
	border-bottom: 1px solid #F0F1F6;
}

.modal-title {
	font-family: var(--head);
	font-size: 18px;
	font-weight: 600;
}

.modal-footer {
	gap: 8px;
	padding: 14px 20px;
	border-top: 1px solid #F0F1F6;
	border-radius: 0 0 24px 24px;
	background: transparent;
}

/* --- card di Bootstrap (dashboard) come i riquadri .box --- */
.content .card {
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--surface);
	box-shadow: var(--sh);
}

.content .card-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 20px 12px;
	border-bottom: 1px solid #F0F1F6;
	background: transparent;
}

.content .card-title {
	margin: 0;
	font-family: var(--head);
	font-size: 17px;
	font-weight: 600;
}

.content .card-body { padding: 16px 20px; }

.content .card-footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 14px 20px;
	border-top: 1px solid var(--line);
	border-radius: 0 0 var(--r-card) var(--r-card);
	background: transparent;
}

/* --- messaggi flash --- */
#flash-messages .alert { box-shadow: none; }


/* ===================== 6b. Pagine del gestionale ===================== */
/* Panoramica, Paghe e Giornaliera (Fase 2a): solo quello che i componenti
   della sezione 5 non coprono gia. */

/* due griglie di riquadri una sotto l'altra */
.grid + .grid { margin-top: 18px; }

/* intestazione dei riquadri: la pill va a destra, il link "Tutte" la segue */
.box-h > .pill { margin-left: auto; }
.box-h > .pill ~ .r { margin-left: 0; }

/* lista compatta: il pallino "r" (rosso) non deve prendere il margin-left
   automatico di .r, e le targhe non si stringono */
.ls .dot,
.ls .targa { flex: none; }

.ls .dot { margin-left: 0; }

.ls-titolo {
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

a.ls-titolo:hover { color: var(--blu); text-decoration: underline; }

.ls-sotto { margin-top: 3px; }

.ls .scaduta {
	color: var(--rosso);
	font-weight: 600;
}

/* --- Paghe --- */
.paghe-periodo { margin-bottom: 18px; }
.paghe-periodo .filters { margin: 0; }
.paghe-nota { align-self: center; }
.paghe-testo { margin: 0; }
.ico-blu { flex: none; color: var(--blu); }
.ico-verde { flex: none; color: var(--verde); }
.box-excel { border-color: #9FD3C0; }

/* --- Giornaliera: elenco --- */
.filtri-giornaliera .fld { min-width: 0; }
.filtri-giornaliera .search { min-width: 200px; }
.filtri-giornaliera .seg { align-self: end; }

.data-frecce {
	display: flex;
	align-items: center;
	gap: 6px;
}

.data-frecce .inp { width: 160px; }

.data-frecce .btn.sm {
	align-self: stretch;
	padding: 0 9px;
}

.elenco-giornaliera .nowrap { white-space: nowrap; }
.elenco-giornaliera .dip-nome { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.elenco-giornaliera .dip-nome b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elenco-giornaliera .dip-nome .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elenco-giornaliera .piu-targhe { margin: 0 2px; }
/* 5n: camion e rimorchio affiancati, mai a capo; sotto, piccolo, «Motrice» o la tipologia del rimorchio */
.mzc { display: flex; gap: 10px; align-items: flex-start; flex-wrap: nowrap; }
.mzc > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.mzc small { padding-left: 2px; color: var(--ink-3); font-size: 12px; font-weight: 500; white-space: nowrap; }
.elenco-giornaliera .viaggio-testo { color: var(--ink); font-weight: 500; }
/* 5l: colonne ridistribuite (da 761 px; sotto la tabella scorre nel suo riquadro come prima). Data, Mezzo, Presenza e Dettaglio larghe
   quanto il contenuto (5l-bis: rimorchio accanto al camion con il «+», mansione sotto il nome); Dipendente quanto serve ai nomi lunghi
   (oltre 260 px «…» e tooltip), 40–48 px dalla targa; Viaggio prende il resto,
   al massimo due righe con «…» (testo intero nel tooltip). */
@media (min-width: 761px) {
	.elenco-giornaliera .col-stretta { width: 1%; white-space: nowrap; }
	.elenco-giornaliera td.col-dipendente { width: 1%; padding-right: 35px; }
	.elenco-giornaliera .dip-nome { max-width: 260px; }
	.elenco-giornaliera .col-viaggio { width: auto; }
	.elenco-giornaliera .viaggio-testo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: break-word; line-height: 1.35; min-width: 160px; }
	.elenco-giornaliera td.col-viaggio { white-space: normal; }
}
@media (max-width: 760px) {
	.elenco-giornaliera .dip-nome { white-space: nowrap; }
	.elenco-giornaliera .viaggio-testo { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.elenco-giornaliera td { vertical-align: middle; }

/* 5l-bis: tabelle a tutta finestra. Su schermo largo (da 1700 px) le colonne corte restano larghe quanto il contenuto e lo spazio in
   più va a una colonna sola, `col-testo` nel template (Viaggio, Programma, Marca e modello, Interventi, Articolo, Descrizione, Fornitore,
   Documento, «Cosa è successo», il lavoro del Controllo fatturato, l'esempio delle Associazioni; dove non c'è testo lungo il nome:
   Dipendente, «Chi / quale mezzo», la prima colonna delle Tabelle di base); gestionale.js la segna in ogni riga (senza, l'ultima).
   Sotto i 1700 px le tabelle sono come prima. */
/* 6b: solo per le tabelle a tutta finestra: in una scheda con la colonna di destra (.g-side: Tabelle di base, schede) la tabella è
   più stretta e le colonne senza «a capo» la facevano scorrere (Numeri utili a 1720 px) */
@media (min-width: 1700px) {
	.t.t-elastica:not(.g-side .t) th:not(.col-testo),
	.t.t-elastica:not(.g-side .t) td:not(.col-testo):not([colspan]) { width: 1%; white-space: nowrap; }
	.t.t-elastica:not(.g-side .t) th.col-testo, .t.t-elastica:not(.g-side .t) td.col-testo { width: 100%; }
	.t.t-elastica:not(.g-side .t) td.col-testo { max-width: none !important; }
	.t.t-elastica:not(.g-side .t) th.col-testo:last-child, .t.t-elastica:not(.g-side .t) td.col-testo:last-child { text-align: right; }
}

/* riga di intestazione della mansione (elenco di un giorno solo) */
.t tr.grp td,
.t tr.grp:hover td {
	padding: 8px 14px;
	background: #F3F6F9;
	color: var(--navy);
	font-family: var(--cond);
	font-weight: 700;
}

.t tr[data-href] { cursor: pointer; }

.t td.azioni {
	width: 1%;
	text-align: right;
	white-space: nowrap;
}

.t .empty h2 {
	margin: 0 0 6px;
	font-family: var(--cond);
	font-size: 20px;
}

.paginazione { justify-content: space-between; align-items: center; flex-wrap: wrap; }

.paginazione-pulsanti {
	display: flex;
	gap: 6px;
}

/* ore del permesso XF accanto alla sigla, nome per esteso nel dettaglio */
.fl-ore {
	align-self: center;
	color: var(--ciano-testo);
	font-size: 12px;
	font-weight: 600;
}

.fl-nome {
	align-self: center;
	margin-right: 10px;
	color: var(--ink2);
	font-size: 13.5px;
}

/* --- Giornaliera: dettaglio --- */
.dettaglio-giornaliera { max-width: 900px; }

.viaggio-txt {
	padding: 12px 14px;
	border: 1px solid var(--linea2);
	border-radius: 6px;
	background: var(--surface-2);
	font-size: 15px;
	line-height: 1.6;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.link-mese { margin-left: 8px; }

.elimina-giornaliera {
	display: flex;
	justify-content: flex-end;
	margin-top: 12px;
}

.btn.elimina { color: var(--rosso); }
.btn.elimina:hover { background: var(--rosso-l); color: var(--rosso); }

span.btn.disabled { pointer-events: none; }

/* --- Giornaliera: nuova e modifica --- */
.contenuto-form { max-width: 900px; }

/* i campi di EasyAdmin dentro il layout del mockup */
.form-giornaliera .fld .form-control,
.form-giornaliera .fld .form-select { width: 100%; }

.form-giornaliera textarea.form-control { min-height: 140px; }

.form-giornaliera .eur { text-align: right; }

.form-giornaliera .chip { position: relative; }
/* 5n: «.fld label» (blocco) non deve toccare le pillole delle sigle; le ore XF restano strette */
.fld .chips .chip { display: inline-flex; margin: 0; color: var(--ink); font-size: 13px; font-weight: 500; }
.fld .chips .chip.on { color: var(--primary); }
.form-giornaliera .fld .chip-ore .form-control { width: 76px; }

.form-giornaliera .chip:has(input:focus-visible) {
	outline: 2.5px solid var(--primary-2);
	outline-offset: 2px;
}

.form-giornaliera .alert { margin: 0; }

/* gli errori del form sono mostrati dentro il riquadro (_form.html.twig):
   la riga che EasyAdmin aggiunge sopra il form sarebbe un doppione */
.contenuto-form > .global-invalid-feedback { display: none !important; }

.form-giornaliera .con-errore .form-control { border-color: var(--rosso); }

/* --- Giornaliera: mese dipendente --- */
.fld-dipendente { flex: 1 1 320px; max-width: 520px; }

.form-in-barra { display: contents; }

.cal {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
}

.cal .h {
	padding-bottom: 2px;
	color: var(--ink2);
	font-size: 12.5px;
	font-weight: 600;
	text-align: center;
}

.cal .d {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	min-height: 96px;
	padding: 6px 7px;
	border: 1px solid var(--linea);
	border-radius: 6px;
	background: #fff;
	color: var(--ink);
	font-size: 12.5px;
	text-decoration: none;
}

.cal a.d:hover {
	border-color: var(--ciano);
	box-shadow: 0 2px 10px rgba(22,26,51,.08);
}

.cal .d .n {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 3px;
	font-family: var(--cond);
	font-size: 14px;
	font-weight: 700;
}

.cal .d .n .fl {
	min-width: 0;
	padding: 1px 4px;
	font-size: 11px;
}

.cal .d .flags { gap: 2px; }

.cal .d .mezzo {
	font-weight: 600;
	white-space: nowrap;
}

.cal .d .tr {
	display: -webkit-box;
	overflow: hidden;
	color: var(--ink2);
	font-size: 11.5px;
	line-height: 1.3;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow-wrap: anywhere;
}

.cal .d.x {
	border-style: dashed;
	border-color: var(--linea2);
	background: transparent;
}

.cal .d.we { background: #F3F5F8; }
.cal .d.fest .n { color: var(--rosso); }

.conteggio { align-self: start; }
.conteggio .t td { padding: 9px 18px; }
.conteggio .totale td { border-bottom: 0; background: var(--surface-2); }

/* --- Fase 2b: elenchi e schede di persone e mezzi, scadenze --- */
.t td.scaduta {
	color: var(--rosso);
	font-weight: 600;
}

.box-h .r { white-space: nowrap; }

/* sui dispositivi senza mouse le azioni di riga restano visibili */
@media (hover: none) {
	.t .rowact { opacity: 1; }
}

.kpi-scadenze { margin-bottom: 18px; }

/* colonne delle schede: i riquadri non si allungano; la colonna di destra
   non prende il margine di ".grid + .grid" */
.colonna-scheda,
.colonna-principale { align-content: start; grid-template-columns: minmax(0, 1fr); }
.g-side > .grid + .grid { margin-top: 0; }
.g-side > * { min-width: 0; }
/* 5l-bis: schede di mezzi, dipendenti e sinistri su schermo largo: i riquadri della colonna principale (form, documenti, storico…) si
   affiancano in colonne invece di allungarsi (2 da 1820 px [6b], 3 da 2300 px se i riquadri sono almeno 3), ognuno resta intero; la colonna di destra (340 px) non cambia */
/* 6b: soglie misurate (la scheda è larga quanto la finestra meno 319 px col menu aperto; colonna di destra 340 + 18): la colonna
   principale si divide in due solo da 1820 px, così ogni metà resta di almeno 560 px (prima da 1600: a 1720, metà di un 34", erano
   520 px e i campi uscivano dal riquadro); sotto 1240 px tutto in una colonna (colonna principale sotto i 560 px). */
@media (min-width: 1820px) {
	.g-side > .colonna-scheda:first-child,
	.g-side > .colonna-principale { display: block; column-count: 2; column-gap: 18px; }
	.g-side > .colonna-scheda:first-child > *,
	.g-side > .colonna-principale > * { break-inside: avoid; margin: 0 0 18px; }
	.g-side > .colonna-scheda:first-child > form > .box,
	.g-side > .colonna-principale > form > .box { break-inside: avoid; }
}
@media (min-width: 2300px) {
	/* da 2300 px una griglia: ogni riquadro nella sua colonna, in fila (form | documenti | storico), colonne di almeno 600 px; la
	   divisione automatica in colonne lasciava vuota la terza quando il form è molto più alto degli altri */
	.g-side > .colonna-scheda:first-child:has(> :nth-child(3)),
	.g-side > .colonna-principale:has(> :nth-child(3)) { display: grid; column-count: auto; grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); align-items: start; gap: 18px; }
	.g-side > .colonna-scheda:first-child:has(> :nth-child(3)) > *,
	.g-side > .colonna-principale:has(> :nth-child(3)) > * { margin: 0; }
	/* con due riquadri soli (form e documenti del dipendente) due colonne, ma non più larghe di ~950 px l'una */
	.g-side:has(> .colonna-principale):not(:has(> .colonna-principale > :nth-child(3))),
	.g-side:has(> .colonna-scheda:first-child):not(:has(> .colonna-scheda:first-child > :nth-child(3))) { grid-template-columns: minmax(0, 1900px) 340px; }
}

.form-scheda .sec-t {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 6px 0 0;
}

.form-scheda .sec-t.primo {
	margin: 0;
	padding: 0;
	border: 0;
}

.form-scheda .sec-t .pill {
	font-family: var(--font);
	font-weight: 600;
}

/* importi e numeri allineati a destra */
.content input.eur,
.importi .form-control { text-align: right; font-variant-numeric: tabular-nums; }

.form-scheda .fld .form-control,
.form-scheda .fld .form-select { width: 100%; }

.form-scheda .con-errore .form-control { border-color: var(--rosso); }

/* interruttore "Disponibile" nella scheda automezzo */
.campo-stato .etichetta-campo {
	display: block;
	margin-bottom: 5px;
	color: var(--ink2);
	font-size: 13px;
	font-weight: 600;
}

.campo-stato .form-check { min-height: 40px; display: flex; align-items: center; gap: 8px; }

/* titolo della scheda mezzo: targa grande + marca e modello */
.titolo-mezzo {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.ultimi-giorni li { display: block; }
.ultimi-giorni .trunc { max-width: none; margin-top: 2px; }

/* schede degli automezzi e dei rimorchi (vista "Schede"). 5n: card del mockup v5: foto in alto con lo stato a pillola, targa e tipo,
   marca e modello, scadenza a pillola, due pulsanti; il titolo copre tutta la card (link), i pulsanti stanno sopra */
.mgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: 16px;
}

.mcard {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--surface);
	box-shadow: var(--sh);
	color: var(--ink);
	transition: box-shadow .15s;
}

.mcard:hover { box-shadow: var(--sh-up); }

.mcard .sil {
	position: relative;
	display: grid;
	place-items: center;
	height: 128px;
	background: linear-gradient(135deg, #EEF0FA, #F7F2FF);
	color: #B6BCD8;
}

.mcard .sil .foto-mezzo { position: relative; z-index: 2; width: 100%; height: 128px; object-fit: cover; }
.mcard-stato { position: absolute; top: 12px; left: 12px; z-index: 3; }
.mcard .corpo { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }

.mcard .hd {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mcard-tipo { margin-left: auto; text-align: right; }
.mcard-titolo { color: var(--ink); font-weight: 600; text-decoration: none; }
.mcard-titolo::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-card); }
.mcard-titolo:focus-visible { outline: none; }
.mcard-titolo:focus-visible::after { outline: 2.5px solid var(--primary-2); outline-offset: -3px; }
.mcard-targa { flex: none; }
.mcard-autista { font-weight: 600; }
.mcard .azioni { position: relative; z-index: 2; display: flex; gap: 8px; margin-top: auto; }
.mcard .azioni .btn { flex: 1; }

.mcard .drv {
	display: flex;
	align-items: center;
	gap: 10px;
}

.av {
	display: grid;
	flex: none;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #E0E7FF;
	color: #3730A3;
	font-size: 12px;
	font-weight: 600;
}

.mcard-scadenze { display: flex; flex-wrap: wrap; gap: 6px; }
.mcard-scadenza { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.mcard .ft {
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

/* --- Fase 2c: manutenzioni, magazzino, DDT, tabelle di base --- */
.etichetta-campo {
	display: block;
	margin-bottom: 5px;
	color: var(--ink2);
	font-size: 13px;
	font-weight: 600;
}

/* seg fatto di radio veri (Mezzo: Automezzo | Rimorchio) */
.seg label {
	margin: 0;
	padding: 8px 14px;
	color: var(--ink2);
	font-weight: 600;
	cursor: pointer;
}

.seg label input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.seg label.on {
	background: #fff;
	color: var(--primary);
	box-shadow: 0 1px 3px rgba(22, 26, 51, .1);
}

.seg label:focus-within { box-shadow: inset 0 0 0 2px var(--ciano); }

.seg-pieno {
	display: flex;
	width: 100%;
	min-height: 40px;
}

.seg-pieno label {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.contenuto-form.form-manutenzione { max-width: 1000px; }
.contenuto-form.form-ddt { max-width: 1100px; }
.campo-interventi { grid-column: span 3; }

/* righe "Ricambi e lavorazioni" e righe del DDT */
.righe-manutenzione td,
.righe-ddt td { vertical-align: top; }

.righe-manutenzione .col-tipo { width: 150px; }
.righe-manutenzione .col-qta,
.righe-ddt .col-qta { width: 110px; }
.righe-manutenzione .col-um { width: 100px; }
.righe-ddt .col-um { width: 90px; }
.righe-ddt .col-articolo { width: 44%; }
/* i testi accanto ai campi stanno alla stessa altezza del campo (40px) */
.righe-manutenzione [data-mostra],
.righe-manutenzione td.num > .muted,
.righe-ddt [data-mostra] {
	display: inline-block;
	line-height: 40px;
}

.righe-manutenzione .rtype { margin-top: 8px; }
.cella-articolo { min-width: 240px; }
.azioni-riga { width: 1%; }
.azioni-riga .btn { margin-top: 4px; }
.rtype span:focus-visible { outline: 2px solid var(--ciano); outline-offset: -2px; }

.riga-dettaglio [data-solo="libera"],
.riga-dettaglio.libera [data-solo="magazzino"],
.riga-ddt [data-solo="nuovo"],
.riga-ddt.nuovo [data-solo="esistente"] { display: none !important; }

.riga-dettaglio.libera [data-solo="libera"],
.riga-ddt.nuovo [data-solo="nuovo"] { display: block; }

.riga-ddt.nuovo { background: #F2FAFC; }
.campi-nuovo { display: grid; gap: 6px; }
.campi-nuovo .hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.azioni-righe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sec-t-nota { font-family: var(--font); font-weight: 500; }

.link-riga {
	margin-top: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--blu);
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}

.link-riga:hover { text-decoration: underline; }

.cella-articolo .invalid-feedback,
.righe-manutenzione .invalid-feedback,
.righe-ddt .invalid-feedback { display: block; }

/* tendine con ricerca (TomSelect) dentro le righe: larghe come la cella */
.righe-manutenzione .ts-wrapper,
.righe-ddt .ts-wrapper { min-width: 220px; }

.dettaglio-manutenzione { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 1000px; }
.dettaglio-manutenzione > .box { margin: 0; }

/* magazzino: filtro "Solo esauriti" e pannello laterale */
.casella-filtro {
	display: flex;
	align-self: center;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	margin: 0;
	cursor: pointer;
}

.tabella-giacenze tbody tr { cursor: pointer; }

.drawer-articolo .pannello {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}

.giacenza-pannello {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 18px;
}

.giacenza-grande {
	font-family: var(--cond);
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
}

.giacenza-grande span { font-size: 18px; }
.giacenza-grande.esaurita { color: var(--rosso); }

.rettifica {
	display: flex;
	align-items: end;
	gap: 6px;
	margin-left: auto;
}

.rettifica .inp { width: 100px; }
.hint-pannello { padding-top: 0; }
.drawer .t { margin: 0; }

/* tabelle di base */
.seg-tabelle { flex-wrap: wrap; }
.tabelle-base { align-items: start; }
.tabelle-base .t tr.scelta { background: var(--primary-soft); }
.tabelle-base .t tr.scelta td:first-child a { font-weight: 700; }
.form-tabella .form { gap: 14px; }

.lucchetto {
	width: 15px;
	height: 15px;
	margin-left: 4px;
	color: var(--ambra);
	vertical-align: -2px;
}

.pill .lucchetto { width: 12px; height: 12px; margin: 0 4px 0 0; color: inherit; }
.alert .lucchetto { margin: 0; }

/* --- Fase 3a: documenti di automezzi e rimorchi --- */
.drop {
	display: block;
	padding: 18px;
	border: 2px dashed #C3D0DC;
	border-radius: 10px;
	background: #FAFCFD;
	color: var(--ink2);
	text-align: center;
	cursor: pointer;
}

.drop b { color: var(--blu); }
.drop svg { vertical-align: -4px; }
.drop.sopra { border-color: var(--ciano); background: var(--ciano-l); }
input[data-scegli-file]:focus-visible + .righe-documenti,
.carica-documenti:focus-within .drop { border-color: var(--ciano); }

.documenti-mezzo .box-h label.btn { margin: 0; }
.carica-documenti { margin-bottom: 14px; }
.righe-documenti { display: grid; gap: 10px; margin-top: 12px; }

.riga-documento {
	display: grid;
	grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) auto;
	gap: 8px 14px;
	align-items: start;
	padding: 12px;
	border: 1px solid var(--linea);
	border-radius: 8px;
	background: #fff;
}

.riga-documento.con-errore { border-color: #E9B4AE; background: #FDF6F5; }
.riga-documento.caricata { border-color: #A9D3B8; background: #F4FAF6; }
.riga-documento-nome { display: grid; gap: 2px; min-width: 0; padding-top: 6px; }
.riga-documento-nome b { display: block; }
.riga-documento-campi { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.riga-documento-campi .fld { min-width: 170px; }
.blocco-scadenza { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: end; }
.casella-scadenza { display: flex; gap: 6px; align-items: center; min-height: 40px; margin: 0; font-size: 13px; cursor: pointer; }
.avviso-data { flex-basis: 100%; color: var(--ambra); font-size: 12.5px; font-weight: 600; }
.riga-documento > [data-togli] { grid-column: 3; grid-row: 1; }
.riga-documento-esito { grid-column: 1 / -1; font-size: 13px; }
.riga-documento-esito:empty { display: none; }
.riga-documento.con-errore .riga-documento-esito { color: var(--rosso); font-weight: 600; }
.riga-documento.caricata .riga-documento-esito { color: var(--verde); font-weight: 600; }
.azioni-documenti { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 12px; }
.azioni-documenti [data-esito-documenti] { margin-right: auto; }
.nessun-documento { margin: 0 0 12px; }

.docs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 12px;
}

.doc {
	position: relative;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	min-width: 0;
	padding: 10px;
	border: 1px solid var(--linea);
	border-radius: 8px;
	background: #fff;
}

.doc:hover { border-color: #B9C7D4; box-shadow: 0 2px 10px rgba(22,26,51,.08); }
.doc.in-scadenza { border-color: #EBC57A; }
.doc.scaduto { border-color: #E9B4AE; }

/* tutta la card apre il file; le azioni stanno sopra */
.doc-apri { position: absolute; inset: 0; z-index: 1; border-radius: 8px; }
.doc-apri:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }

.doc .th {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 50px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 700;
}

.doc .th.pdf { background: #FBE9E7; color: var(--rosso); }
.doc .th.img { background: var(--ciano-l); color: #0d6d80; }
.doc-testo { min-width: 0; }
.doc-testo b { display: block; font-size: 14px; }
.doc-testo small { display: block; color: var(--ink2); font-size: 12px; }
.doc-testo .trunc { max-width: 100%; }
.doc-stato.v { color: var(--verde) !important; }
.doc-stato.a { color: var(--ambra) !important; font-weight: 600; }
.doc-stato.r { color: var(--rosso) !important; font-weight: 600; }

.doc-azioni {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	display: flex;
	gap: 4px;
	opacity: 0;
	transition: opacity .15s;
}

.doc-azioni form { margin: 0; }
.doc-azioni .btn { background: #fff; }
.doc:hover .doc-azioni,
.doc:focus-within .doc-azioni { opacity: 1; }

@media (hover: none) {
	.doc-azioni { position: static; opacity: 1; margin-left: auto; flex-direction: column; }
}

.doc-precedenti { margin-top: 12px; }
.doc-precedenti summary { color: var(--blu); font-size: 13px; font-weight: 600; cursor: pointer; }
.doc-precedenti .docs { margin-top: 10px; opacity: .85; }

/* 5f, compatto dalla 5h: documenti divisi per tipo (schede di mezzi e dipendenti, admin/_documenti_per_tipo.html.twig): sezioni
   affiancate in colonne strette, ogni documento una riga di una o due linee; il dettaglio e le azioni si aprono con un clic */
.doc .th img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.doc .th:has(img) { width: 56px; height: 56px; padding: 0; overflow: hidden; }
.sez-doc-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px 12px; align-items: start; }
.sez-doc { min-width: 0; padding: 8px 10px; border: 1px solid var(--linea2); border-radius: 8px; background: #FBFCFD; }
.sez-doc-t { display: flex; align-items: baseline; gap: 6px; margin: 0; color: var(--navy); font-family: var(--cond); font-size: 15px; font-weight: 700; line-height: 1.2; }
.sez-doc-n { margin-left: auto; color: var(--ink2); font-family: var(--font); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.sez-doc-data { color: var(--verde); font-size: 12px; font-weight: 600; line-height: 1.3; }
.sez-doc-data.r { color: var(--rosso); }
.dcs { display: grid; gap: 4px; margin-top: 6px; }
.dc { min-width: 0; }
.dc-d > summary { list-style: none; }
.dc-d > summary::-webkit-details-marker { display: none; }
.dc-r { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 4px 5px; border-radius: 6px; cursor: pointer; }
.dc-r:hover, .dc-d[open] > .dc-r { background: var(--primary-soft); }
.dc-r:focus-visible { outline: 2px solid var(--ciano); outline-offset: 1px; }
.dc-ico { display: grid; flex: none; place-items: center; width: 24px; height: 30px; overflow: hidden; border-radius: 4px; font-size: 8.5px; font-weight: 700; }
.dc-ico.pdf { background: #FBE9E7; color: var(--rosso); }
.dc-ico.img { background: var(--ciano-l); color: #0d6d80; }
.dc-ico img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dc-t { display: grid; min-width: 0; line-height: 1.25; }
.dc-t b { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dc-t small { color: var(--ink2); font-size: 11.5px; }
.dc-t small.a { color: var(--ambra); font-weight: 600; }
.dc-t small.r { color: var(--rosso); font-weight: 600; }
.dc.precedente .dc-r { opacity: .75; }
.dc-dett { margin: 4px 0 6px; padding: 8px; border: 1px solid var(--linea); border-radius: 6px; background: #fff; font-size: 13px; overflow-wrap: anywhere; }
.dc-dett p { margin: 0 0 6px; }
.dc-azioni { display: flex; flex-wrap: wrap; gap: 4px; }
.dc-azioni form { margin: 0; }
.dc-altri { margin-top: 4px; }
.dc-altri > summary { padding: 2px 5px; color: var(--blu); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.dc.da-classificare .dc-r { background: #FFF6E0; }
.tipo-rapido { display: block; margin: 3px 0 0 !important; }
.tipo-rapido .inp { min-height: 30px; padding: 3px 6px; font-size: 12.5px; }
.doc-esito { display: block; color: var(--verde) !important; font-size: 12px; font-weight: 600; }
.doc-esito.r { color: var(--rosso) !important; }
.documenti-mezzo .sez-doc-griglia, .documenti-dipendente .sez-doc-griglia { margin-top: 4px; }
/* 5k: spostare un documento in un'altra sezione (trascinando o con «Sposta in…», js/documenti-sposta.js) */
.dc[draggable="true"] > .dc-d > .dc-r { cursor: grab; }
.dc.trascinato { opacity: .45; }
.dc.in-spostamento { opacity: .6; pointer-events: none; }
.sez-doc-griglia.trascinando .sez-doc { transition: background-color .12s, border-color .12s, box-shadow .12s; }
.sez-doc-griglia.trascinando .sez-doc:not(.meta-sposta):not(:has(.meta-sposta)) { opacity: .55; }
.sez-doc-griglia.trascinando .origine-sposta { opacity: 1 !important; border-style: dashed; }
.sez-doc.meta-sposta, .meta-tipo { border: 2px dashed var(--ciano); background: #E8F7FA; }
.sez-doc.meta-sposta.sopra, .meta-tipo.sopra { border-style: solid; border-color: var(--blu); background: #D3EEF4; box-shadow: 0 0 0 3px #1FA9C433; }
.sez-doc-vuota { min-height: 64px; }
.mete-sposta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.meta-tipo { display: inline-block; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--navy); }
.sposta-in { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.sposta-in .inp { flex: 1 1 auto; min-width: 0; height: 32px; padding: 4px 8px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .sez-doc-griglia.trascinando .sez-doc { transition: none; } }
.carica-documento-dipendente { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--linea2); }
.carica-documento-dipendente .fld { flex: 1 1 200px; margin: 0; }
.documenti-mezzo .hint { margin-top: 12px; }

/* foto del mezzo: al posto della sagoma nelle schede e nel titolo della scheda */
.foto-titolo img { display: block; width: 56px; height: 42px; border-radius: 6px; object-fit: cover; border: 1px solid var(--linea); }
/* 4d-1: a 1000 px il testo si stringeva fino a spezzare le parole («Certificat / o ATP»): ora non scende sotto la parola più
   lunga e, se non c'è posto, la pillola va sotto a destra */
.documenti-da-aggiornare li { flex-wrap: wrap; row-gap: 4px; }
.documenti-da-aggiornare li > a:first-child { flex: none; }
.documenti-da-aggiornare .ls-testo { flex: 1 1 0; min-width: min-content; overflow-wrap: normal; word-break: normal; color: inherit; text-decoration: none; }
.documenti-da-aggiornare .pill { flex: none; white-space: nowrap; }
.documenti-da-aggiornare .ls-testo:hover { text-decoration: underline; }

[hidden] { display: none !important; }

/* --- Fase 3b: sinistri --- */
/* tipo di sinistro come etichetta colorata (mockup "Sinistri", .ty) */
.ty { display: inline-block; padding: 2px 7px; border-radius: 4px; background: var(--linea2); color: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ty.att { background: #E3F4F8; color: #0D6D80; }
.ty.pas { background: #FBE9E7; color: var(--rosso); }
.ty.kas { background: #EEE7F7; color: #5D3B8F; }
.ty.inc { background: #FDE8DC; color: #A3401C; }
.ty.fur { background: #F3E8DA; color: #7A5222; }
.ty.cri { background: #E6ECF7; color: #2B4C8C; }
.ty.eve { background: #E2F0F6; color: #255E7A; }
.ty.tra { background: var(--ambra-l); color: var(--ambra); }
.ty.mer { background: #E9F2E3; color: #3F6B2A; }
.ty.dis { background: var(--linea2); color: var(--ink2); }

.pill-mini { padding: 1px 6px; font-size: 11px; vertical-align: 1px; }
.seg .conta { font-weight: 500; opacity: .75; }
.seg-tipi { flex-wrap: wrap; }
.kpi-sinistri { margin-bottom: 18px; }
.kpi-sinistri .kpi .n { font-size: 30px; }
.tabella-sinistri .cosa { max-width: 220px; }
.mezzi-sinistro > div + div { margin-top: 4px; }
.mezzi-sinistro .trunc { max-width: 150px; }
.promemoria { font-size: 13px; font-weight: 600; }
.promemoria.r { color: var(--rosso); }
.promemoria.a { color: var(--ambra); }
.promemoria.g { color: var(--ink2); font-weight: 500; }
.paginazione .l { margin-right: auto; }
.numeri-utili li { align-items: flex-start; }
.numeri-recapiti { display: grid; justify-items: end; gap: 2px; text-align: right; }

/* nuovo sinistro: scelta del tipo e foto */
.nuovo-sinistro { display: grid; gap: 18px; max-width: 1000px; }
.tipi { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.tipo { display: block; padding: 12px; border: 1.5px solid var(--linea); border-radius: 10px; background: #fff; cursor: pointer; }
.tipo b { display: block; font-size: 14.5px; }
.tipo small { display: block; margin-top: 3px; color: var(--ink2); font-size: 12px; line-height: 1.3; }
.tipo.on,
.tipo:has(input:checked) { border-color: var(--blu); background: var(--primary-soft); }
.tipo:has(input:focus-visible) { outline: 2px solid var(--ciano); outline-offset: 2px; }
.tipi.con-errore .tipo { border-color: #E9B4AE; }
.errore-campo { margin-top: 4px; color: var(--rosso); font-size: 13px; font-weight: 600; }
.fld.con-errore .inp { border-color: var(--rosso); }
.proposta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; color: var(--verde); font-size: 12.5px; font-weight: 600; }
.proposta-voce { min-height: 0; padding: 2px 8px; }
.foto-scelte { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.foto-scelte li { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border: 1px solid var(--linea); border-radius: 6px; background: #fff; }
.foto-scelte li .trunc { flex: 1; min-width: 0; }
.foto-scelte li.con-errore { border-color: #E9B4AE; background: #FDF6F5; }
.errore-foto { color: var(--rosso); font-weight: 600; }

/* scheda */
.titolo-sinistro { display: inline-flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.titolo-sinistro .ty,
.titolo-sinistro .pill { font-family: var(--font); font-size: 13px; }
.banner-verifica { align-items: center; }
.banner-verifica form { margin: 0 0 0 auto; }
.scheda-sinistro { align-items: start; }
.scheda-sinistro .colonna-scheda { align-content: start; }
.casella { display: flex !important; gap: 6px; align-items: center; margin: 8px 0 0 !important; color: var(--ink) !important; font-weight: 500 !important; cursor: pointer; }
.seg-radio { flex-wrap: wrap; }
.seg-radio label { margin: 0 !important; padding: 6px 14px; border-radius: var(--pill); color: var(--ink2) !important; font-weight: 600; font-size: 13px; cursor: pointer; }
.seg-radio label.on { background: #fff; color: var(--primary) !important; box-shadow: 0 1px 3px rgba(22, 26, 51, .1); }
.seg-radio label:has(input:focus-visible) { outline: 2px solid var(--ciano); outline-offset: -2px; }
.riga-modifica > td { padding: 14px; background: #FAFAFE; }
.riga-modifica .form-riga { display: grid; gap: 12px; }
.azioni-riga { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: end; }
.azioni-riga .elimina { margin-right: auto; }
.t .riga-totale td { background: var(--surface-2); }
.t td.incasso { color: var(--verde); }
.da-incassare { color: var(--rosso); }
.aggiungi-voce { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 10px; }
.filtri-documenti { margin-bottom: 12px; }
.filtri-documenti .seg { flex-wrap: wrap; }
.photos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; }
.ph { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 8px; background: var(--linea2); }
.ph > a { display: block; width: 100%; height: 100%; }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-etichetta { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); overflow: hidden; padding: 2px 6px; border-radius: 4px; background: #0E2A47CC; color: #fff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.ph:hover .doc-azioni,
.ph:focus-within .doc-azioni { opacity: 1; }
.ph.more { display: grid; place-items: center; border: 0; color: var(--ink2); font: inherit; font-weight: 600; cursor: pointer; }
.box-promemoria { border-color: #EBC57A; }
.box-promemoria.r { border-color: #E9B4AE; }
.quando-promemoria { font-family: var(--cond); font-size: 22px; font-weight: 700; color: var(--ink); }
.box-promemoria.a .quando-promemoria { color: var(--ambra); }
.box-promemoria.r .quando-promemoria { color: var(--rosso); }
.testo-promemoria { margin: 6px 0 12px; }
.azioni-promemoria { display: flex; flex-wrap: wrap; gap: 6px; }
.azioni-promemoria form { margin: 0; }
.nuova-nota { display: grid; gap: 6px; margin-bottom: 14px; }
.riga-nota { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.riga-nota label { margin: 0; }
.riga-nota .inp { width: auto; min-height: 34px; padding: 5px 8px; }
.riga-nota .btn { margin-left: auto; }
.tl { margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--linea); list-style: none; }
.tl li { position: relative; padding: 0 0 14px 10px; font-size: 14px; }
.tl li::before { content: ""; position: absolute; left: -21px; top: 5px; width: 10px; height: 10px; border: 2px solid var(--ciano); border-radius: 50%; background: #fff; }
.tl li.da-fare::before { border-color: var(--ambra); }
.tl li b { display: block; color: var(--navy); font-size: 13px; }
.tl li small { display: block; color: var(--ink2); font-size: 12px; }
.testo-nota { overflow-wrap: anywhere; }

@media (hover: none) {
	.ph .doc-azioni { position: absolute; flex-direction: row; margin: 0; }
}

/* 5n: Dashboard (ex Panoramica): 6 riquadri in una griglia auto-fill di colonne da almeno 400 px (2 per riga a 1280–1440 px, 3 sugli
   schermi larghi, 1 al telefono); righe dei riquadri come l'elenco .list del mockup, al massimo 6, poi «e altri N →» */
.dash {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
}

.dash > .box { min-width: 0; }
.dash .box-b { padding-top: 6px; }

.lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lista li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid #F0F1F6;
}

.lista li:last-child { border-bottom: 0; }
.lista li > .testo { flex: 1; min-width: 0; }
.lista li > .rr { flex: none; margin-left: auto; text-align: right; }
.lista .nome { display: block; overflow: hidden; color: var(--ink); font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.lista a.nome:hover { color: var(--primary); text-decoration: underline; }
.lista .testo > b { display: block; font-weight: 600; }
.lista .targa { flex: none; }
.lista > li > a:first-child { flex: none; text-decoration: none; }

.vuoto { margin: 6px 0 2px; color: var(--ink-3); font-size: 14px; }

.altri {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 4px 0;
	color: var(--primary);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.altri:hover { text-decoration: underline; }
.altri svg { width: 14px; height: 14px; }

/* Flotta frigo domani: ciambella e legenda */
.flotta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.flotta .legenda { flex: 1; min-width: 150px; }
.flotta .legenda li { padding: 9px 0; font-size: 13.5px; }
.ciambella { flex: none; }
.ciambella-n { fill: var(--ink); font-family: var(--head); font-size: 26px; font-weight: 600; }
.ciambella-s { fill: var(--ink-3); font-family: var(--body); font-size: 10px; }
.leg { width: 10px; height: 10px; flex: none; border-radius: 50%; }
.riquadro-flotta .ai { margin-top: 14px; }
.riquadro-flotta .inviata { margin: 12px 0 0; }

/* Panoramica: "Sinistri da sollecitare" */
.sinistri-da-sollecitare li { flex-wrap: nowrap; }
.sinistri-da-sollecitare li > a:first-child { flex: none; }
.sinistri-da-sollecitare .ls-testo { flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; }
.sinistri-da-sollecitare .ls-testo:hover { text-decoration: underline; }
.sinistri-da-sollecitare .promemoria { flex: none; white-space: nowrap; }

.elimina-pratica { display: flex; justify-content: flex-end; margin: 0; }
.elimina-pratica .elimina { color: var(--rosso); }

/* riquadro "Sinistri" della scheda mezzo */
.sinistri-mezzo li { gap: 8px; }

/* --- Fase 3c: viaggi --- */
.src { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .2px; }
.src.f { background: #E3F4F8; color: #0D6D80; }
.src.c { background: #EEE7F7; color: #5D3B8F; }
.src.a { background: var(--linea2); color: var(--ink2); }
.pill.lk { background: #FFF1C2; color: #7A5A00; border: 1px dashed #D9A400; }
.pill.lk .lucchetto { width: 12px; height: 12px; margin: 0 4px 0 0; color: inherit; vertical-align: -1px; }
.t tr.upd td { background: #FFFBEA; }
.t tr.upd td:first-child { box-shadow: inset 3px 0 0 #E0B000; }
.t tr.warn td { background: #FFF5F3; }
.filtri-viaggi .data-frecce { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filtri-viaggi .data-frecce .inp { width: 160px; }
.filtri-viaggi .btn.attivo { border-color: var(--blu); color: var(--blu); }
.tabella-viaggi .programma { max-width: 280px; }
.targa-testo { font-weight: 600; letter-spacing: .3px; }
.giorno-import { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.giorno-import .riga-giorno { display: flex; gap: 6px; }
.giorno-import .riga-giorno .inp { width: 170px; }
.fogli-trovati { display: flex; flex-direction: column; gap: 6px; }
.form-import { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.kpi-import { margin: 0; }
.box-avvisi { border-color: #F0B8B0; }
.avvisi-import li { flex-wrap: wrap; gap: 8px; }
.avvisi-import li > span:nth-child(2) { flex: 1 1 260px; min-width: 0; }
.avvisi-import .scelta { width: 260px; max-width: 100%; min-width: 0; min-height: 34px; padding-top: 5px; padding-bottom: 5px; }
.casella-ignora { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.tabella-anteprima .programma-anteprima { max-width: 420px; }
.avviso-segno { color: var(--rosso); }
.diff { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.diff .col { padding: 10px 12px; border: 1px solid var(--linea); border-radius: 8px; background: #fff; font-size: 13.5px; line-height: 1.6; }
.diff .col h4 { margin: 0 0 6px; color: var(--ink2); font-size: 12.5px; }
.diff del { background: #FBE9E7; color: var(--rosso); text-decoration: line-through; }
.diff ins { background: #E4F3EA; color: var(--verde); font-weight: 600; text-decoration: none; }
.lista-diff li { align-items: flex-start; }
.voce-diff { flex: 1; min-width: 0; }
.box-cambiato { border-color: #F0B8B0; }
.box-cambiato p { margin: 0 0 10px; }
.scelta-cambiato { margin-top: 12px; }
.barra-import { border: 1px solid var(--linea); border-radius: var(--r); background: var(--carta); }
.form-viaggio { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); align-items: start; }
.form-viaggio fieldset { margin: 0; border: 0; min-width: 0; }
.form-viaggio .facoltativo { font-weight: 400; }
.form-viaggio .dal-foglio { margin: 0; }
.tel-autista { display: flex; gap: 5px; align-items: center; }
.tel-autista svg { color: #1F9D55; }
.anteprima-immagine { position: sticky; top: 96px; }
.sfondo-foglio { display: grid; place-items: center; background: #EEF1F4; }
.righe-programma { display: grid; gap: 6px; }
.vrow { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.vrow .n { color: var(--ink2); font-size: 12px; text-align: right; }
.sw { display: flex; gap: 3px; }
.pallino { display: block; margin: 0; cursor: pointer; }
.pallino span { display: block; width: 20px; height: 20px; border: 1px solid #C3CCD5; border-radius: 4px; background: #fff; }
.pallino.giallo span { background: #FFFF00; }
.pallino.grigio span { background: #D9D9D9; }
.pallino.azzurro span { background: #C9DAF8; }
.pallino.verde span { background: #00FF00; }
.pallino.ciano span { background: #00FFFF; }
.pallino.rosso span { background: #FF0000; }
.pallino.nessuno span { background: linear-gradient(135deg, #fff 45%, var(--red) 47%, var(--red) 53%, #fff 55%); }
.pallino input:checked + span { outline: 2px solid var(--blu); outline-offset: 1px; }
.pallino input:focus-visible + span { outline: 2px solid var(--ciano); outline-offset: 1px; }
.azioni-riga-viaggio { display: flex; gap: 2px; }
.azioni-riga-viaggio .btn { padding: 4px 8px; }
.aggiungi-riga { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chips-presenza { flex-wrap: nowrap; align-items: center; }
.chips-presenza .ore-permesso { width: 70px; min-height: 32px; padding: 4px 6px; }
.tabella-crea .descrizione-giornaliera { max-width: 420px; }
.riga-presente td, .riga-saltata td { color: var(--ink2); }
.sezione-verifica { border-top: 1px solid var(--linea); }

/* Viaggi · invii (Fase 3d): coda WhatsApp, colonna WhatsApp, mail del riepilogo */
.btn.wa[aria-disabled="true"], .btn.wa:disabled { opacity: .5; cursor: not-allowed; }
.btn.wa.grande { min-height: 48px; padding: 12px 20px; font-size: 16px; width: 100%; justify-content: center; }
.barra-coda { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.barra-coda .progresso { flex: 1; height: 8px; border-radius: 4px; background: var(--linea2); overflow: hidden; }
.barra-coda .progresso span { display: block; height: 100%; background: #1F9D55; }
.invio-coda { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
.immagine-coda { text-align: center; }
.immagine-coda img { display: block; max-width: 100%; height: auto; margin: 0 auto; background: #fff; }
.dl-invio { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0 0 16px; }
.dl-invio dt { color: var(--ink2); font-size: 13px; }
.dl-invio dd { margin: 0; overflow-wrap: anywhere; }
.invio-whatsapp { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.invio-whatsapp .hint, .invio-whatsapp .esito-invio { flex-basis: 100%; margin: 0; }
.invio-whatsapp .esito-invio:empty { display: none; }
.anteprima-immagine .formbar .invio-whatsapp { flex: 0 1 auto; }
.anteprima-immagine .formbar .invio-whatsapp .hint, .anteprima-immagine .formbar .invio-whatsapp .esito-invio { text-align: right; }
.stato-whatsapp { border-top: 1px solid var(--linea2); }
.fine-coda .centrato { display: flex; justify-content: center; margin: 0 0 12px; }
.riepilogo-mail { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.riepilogo-mail .form-in-barra { flex-wrap: wrap; }
.colonna-whatsapp .pill + .pill { margin-left: 4px; }
.nota-invii { margin-top: 16px; }
@media (max-width: 900px) {
	.invio-coda { grid-template-columns: minmax(0, 1fr); }
}
.sezione-verifica .seleziona-tutte { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.form-in-barra { display: flex; gap: 6px; align-items: center; margin: 0; }
.form-in-barra .inp { width: 160px; min-height: 36px; }
.avviso-viaggi { margin-bottom: 16px; }
.riquadro-viaggi .conteggio-viaggi { padding-bottom: 0; }
.riquadro-viaggi { min-width: 0; }
.riquadro-viaggi .viaggio-ls { flex: 1; min-width: 0; }
.riquadro-viaggi .viaggio-ls .trunc { max-width: 100%; }
.riquadro-viaggi .pill.lk { margin-left: 4px; }

/* ===================== 7. Login ===================== */

/* 5n: card bianca al centro dello sfondo sfumato, logo, campi e pulsante a pillola */
.login {
	display: grid;
	place-items: center;
	min-height: 100vh;
	padding: 24px 16px;
}

.login-card {
	width: 100%;
	max-width: 420px;
	padding: 32px 32px 26px;
	border: 1px solid var(--line);
	border-radius: 24px;
	background: var(--surface);
	box-shadow: var(--sh-up);
}

.login .brand { padding: 0 0 22px; color: var(--ink); }
.login .brand:hover { color: var(--ink); }
.login .brand small { color: var(--ink-3); }

.login h1 {
	margin: 0 0 4px;
	font-family: var(--head);
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -.02em;
}

.login .btn.pri { width: 100%; }
.login .alert { margin: 0; }
.login-piede { display: block; margin-top: 18px; color: var(--ink-3); font-size: 12px; text-align: center; }

/* ===================== 8. Responsive ===================== */

@media (max-width: 1100px) {
	.g4 { grid-template-columns: 1fr 1fr; }
	.form-viaggio { grid-template-columns: minmax(0, 1fr); }
	.anteprima-immagine { position: static; }
	.tipi { grid-template-columns: repeat(3, 1fr); }
	.g3 { grid-template-columns: 1fr 1fr; }
	.g-side { grid-template-columns: 1fr; }
}

/* 5n: sotto 900 px il menu si apre con il pulsante ☰ (pannello da sinistra) e si chiude cliccando fuori (velo) o con Esc */
@media (max-width: 900px) {
	.app { grid-template-columns: minmax(0, 1fr); padding: 12px; }

	.side {
		position: fixed;
		top: 12px;
		bottom: 12px;
		left: 12px;
		z-index: 45;
		width: min(270px, calc(100vw - 48px));
		height: auto;
		transform: translateX(calc(-100% - 24px));
		transition: transform .25s cubic-bezier(.2, 0, 0, 1);
	}

	body.menu-aperto .side { transform: none; }
	body.menu-aperto .veil[data-chiudi-menu] { display: block; z-index: 44; }

	.top .apri-menu {
		display: inline-grid;
		place-items: center;
		width: 42px;
		height: 42px;
		min-height: 42px;
		padding: 0;
		border: 1px solid var(--line);
		border-radius: 50%;
		background: var(--surface);
		box-shadow: var(--sh);
	}

	.top .apri-menu svg { width: 20px; height: 20px; }
	.utente-menu .chi, .utente-menu > summary > svg { display: none; }
	.utente-menu > summary { padding: 4px; }
}

@media (max-width: 760px) {
	.top {
		gap: 10px;
		padding: 2px 0 0;
	}

	.top-titolo { flex: 1 1 0; }

	.top h1 { font-size: 23px; }

	.top .acts {
		order: 5;
		width: 100%;
		justify-content: flex-start;
	}

	.content { padding: 0 0 32px; }

	.g2, .g3, .g4, .f2, .f3, .f4 { grid-template-columns: 1fr; }

	.filters .fld,
	.search { min-width: 0; flex: 1 1 100%; }

	.view-dl,
	.content-body > .form-fieldset .field-group { grid-template-columns: 1fr; }

	.view-dl dt,
	.content-body > .form-fieldset .field-label { padding-bottom: 0; border-bottom: 0; }

	.drawer { width: 100%; }

	/* giornaliera: filtri impilati, calendario compatto */
	.data-frecce .inp { width: auto; flex: 1; }
	.filtri-giornaliera .seg { width: 100%; }
	.filtri-giornaliera .seg a { flex: 1; padding: 8px 6px; text-align: center; }
	.top .acts .seg { width: 100%; }
	.top .acts .seg a { flex: 1; text-align: center; }
	.cal { gap: 3px; }
	.cal .h { font-size: 11px; }
	.cal .d { min-height: 64px; padding: 4px; font-size: 11px; }
	.cal .d .mezzo,
	.cal .d .tr { display: none; }
	.cal .d .n { font-size: 13px; }

	/* documenti dei mezzi */
	.riga-documento { grid-template-columns: minmax(0, 1fr) auto; }
	.riga-documento-campi { grid-column: 1 / -1; }
	.riga-documento > [data-togli] { grid-column: 2; }
	.riga-documento-campi .fld { min-width: 0; flex: 1 1 100%; }

	/* manutenzione, magazzino, tabelle di base */
	.campo-interventi { grid-column: auto; }
	.rettifica { margin-left: 0; width: 100%; }
	.rettifica .fld { flex: 1; }
	.rettifica .inp { width: 100%; }
	.seg-tabelle { width: 100%; }
	.seg-tabelle a { flex: 1 1 auto; text-align: center; }
	.casella-filtro { flex: 1 1 100%; }

	/* viaggi */
	.form-viaggio { grid-template-columns: minmax(0, 1fr); }
	.anteprima-immagine { position: static; }
	.vrow { grid-template-columns: 20px minmax(0, 1fr); }
	.vrow .sw, .vrow .azioni-riga-viaggio { grid-column: 2; }
	.diff { grid-template-columns: 1fr; }
	.filtri-viaggi .seg { width: 100%; }
	.filtri-viaggi .seg a { flex: 1; padding: 8px 6px; text-align: center; }
	.giorno-import .riga-giorno .inp { width: auto; flex: 1; }
	.avvisi-import .scelta { width: 100%; }
	.form-in-barra { width: 100%; }
	.form-in-barra .inp { flex: 1; width: auto; }

	/* sinistri */
	.tipi { grid-template-columns: 1fr 1fr; }
	.photos { grid-template-columns: repeat(3, 1fr); }
	.kpi-sinistri .kpi .n { font-size: 24px; }
	.seg-tipi { width: 100%; }
	.seg-tipi a { flex: 1 1 auto; padding: 7px 10px; text-align: center; }
	.banner-verifica { flex-wrap: wrap; }
	.banner-verifica form { margin: 0; }
	.riga-nota .inp { flex: 1; }

	/* titolo della scheda mezzo e tabelle dello storico */
	.titolo-mezzo .targa.big { font-size: 18px; }
	.mgrid { grid-template-columns: 1fr; }

	/* le colonne Bootstrap senza breakpoint dei form custom (es. col-4 in dashboard) si impilano */
	.content .card .row > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* EasyAdmin trasforma l'elenco in schede: le rendiamo bianche */
	table.datagrid:not(.datagrid-empty) tbody tr {
		margin-bottom: 10px;
		border: 1px solid var(--linea);
		border-radius: var(--r);
		background: var(--carta);
	}

	.login-card { padding: 24px 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.drawer,
	.side,
	.nav-sub summary .freccia { transition: none; }
	.nav-freccia svg { transition: none; }
}

/* Avviso "+" del form della giornaliera (Blocco 3f) */
.avviso-piu { margin: -6px 0 14px; padding: 10px 12px; border: 1px solid #F1D9A6; border-left: 3px solid var(--ambra); border-radius: 8px; background: var(--ambra-l); }
.avviso-piu-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.avviso-piu-testo { color: var(--ambra); font-weight: 600; font-size: 13px; }
.avviso-piu-riga .btn { margin-left: auto; }
.avviso-piu-proposta { margin-top: 10px; }
.proposta-testo { margin: 4px 0 8px; padding: 8px 10px; background: #fff; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; white-space: pre-wrap; word-break: break-word; }
.avviso-piu-azioni { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== Controllo fatturato (Blocco 3f) ===== */
.pill.vl { background: #EEF7E9; color: #4D7A2E; }
.pill.p { background: #F0E8F8; color: #6A3E9A; }
.kpi.p { border-left-color: #8A5BC4; }
.testo-rosso { color: var(--rosso); }
.testo-ambra { color: var(--ambra); }
.testo-verde { color: var(--verde); }

.nuovo-controllo { margin-bottom: 18px; }
.nuovo-controllo-b { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
.drop { display: block; border: 2px dashed #C3D0DC; border-radius: 10px; padding: 14px 18px; text-align: center; color: var(--ink2); background: #FAFCFD; cursor: pointer; }
.drop b { color: var(--blu); }
.drop svg { width: 18px; height: 18px; vertical-align: -4px; margin-right: 4px; }
.drop.sopra, .drop:focus-within { border-color: var(--ciano); background: var(--ciano-l); }
.drop.con-file { border-style: solid; border-color: var(--verde); }
.lavorando { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--linea); background: var(--ciano-l); }
.lavorando[hidden] { display: none; }
.lavorando-mini { display: inline-flex; padding: 4px 10px; border: 0; border-radius: 20px; font-size: 13px; }
.giro { width: 18px; height: 18px; flex: none; border: 3px solid var(--linea); border-top-color: var(--blu); border-radius: 50%; animation: giro 0.8s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
.stack { display: flex; height: 12px; overflow: hidden; border-radius: 6px; background: var(--linea2); }
.stack i { display: block; height: 100%; }
.file-originale { display: inline-block; max-width: 170px; vertical-align: bottom; }
.tabella-controlli td { vertical-align: top; }
/* 5i: pagine del Controllo fatturato. EasyAdmin dà a tutte le celle «overflow-wrap: anywhere» (le colonne si stringono fino a una
   lettera: «Ago / sto», «1.18 / 8.90»): qui le parole si spezzano solo se proprio non stanno, `nowrap` vale davvero e i testi lunghi
   (lavoro, percorso, esempio) vanno a capo dentro la loro colonna */
.controllo-fatturato-pagina .t th, .controllo-fatturato-pagina .t td { overflow-wrap: break-word; }
.controllo-fatturato-pagina .t .nowrap, .controllo-fatturato-pagina .t td.num, .controllo-fatturato-pagina .t .cella-data { white-space: nowrap; }
.controllo-fatturato-pagina .t td.num, .controllo-fatturato-pagina .t th.num { font-variant-numeric: tabular-nums; }
.controllo-fatturato-pagina .testo-lavoro, .controllo-fatturato-pagina .guida-esempio, .controllo-fatturato-pagina .t .trunc,
.controllo-fatturato-pagina .t .cella-lavoro, .controllo-fatturato-pagina .t .cella-bolla, .controllo-fatturato-pagina .t .esempio { overflow-wrap: anywhere; }
/* i testi troncati («…») prendono la larghezza della colonna invece di allargarla; etichette e intestazioni vanno a capo fra le
   parole; le colonne dei lavori un po' più strette, così a 1280 px nessuna tabella scorre */
.controllo-fatturato-pagina .t td .trunc { width: 0; min-width: 100%; max-width: none; }
.controllo-fatturato-pagina .t th { white-space: normal; vertical-align: bottom; }
.controllo-fatturato-pagina .t td:not(.nowrap) > .pill, .controllo-fatturato-pagina .cella-esito .pill { white-space: normal; }
.controllo-fatturato-pagina .tabella-lavori .cella-lavoro { min-width: 200px; max-width: 360px; }
.controllo-fatturato-pagina .tabella-lavori .cella-bolla { min-width: 150px; max-width: 230px; }
.controllo-fatturato-pagina .tabella-lavori .cella-esito { min-width: 130px; max-width: 220px; }
.controllo-fatturato-pagina .tabella-associazioni td.origine-associazione > .pill { white-space: nowrap; }
.controllo-fatturato-pagina .tabella-associazioni td:has(> .esempio-associazione) { min-width: 170px; width: 24%; }
.controllo-fatturato-pagina .tabella-associazioni th, .controllo-fatturato-pagina .tabella-associazioni td { padding-left: 10px; padding-right: 10px; }
.tabella-associazioni .origine-associazione .pill-mini { display: table; margin-top: 3px; }
/* 5i: elenco «Controlli fatti» compatto: numeri e date mai spezzati, cifre tabellari a destra, righe basse, riga cliccabile */
.tabella-controlli th, .tabella-controlli td { word-break: normal; overflow-wrap: normal; hyphens: none; }
.tabella-controlli { font-size: 13.5px; }
.tabella-controlli th { padding: 9px 10px; line-height: 1.25; white-space: normal; vertical-align: bottom; }
.tabella-controlli td { padding: 9px 10px; line-height: 1.35; }
.tabella-controlli td.num, .tabella-controlli th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabella-controlli td.num, .tabella-controlli .cf-mese, .tabella-controlli .cf-importi small, .tabella-controlli .cf-lavori small { white-space: nowrap; }
.tabella-controlli td small { display: block; color: var(--ink2); font-size: 12.5px; }
.tabella-controlli .cf-mese a { color: inherit; text-decoration: none; }
.tabella-controlli .cf-mese a:hover { text-decoration: underline; }
.tabella-controlli .cf-importi b { font-size: 14px; }
.tabella-controlli .cf-file { white-space: nowrap; }
.tabella-controlli .cf-file .pill { margin-right: 4px; font-size: 12px; text-decoration: none; }
.tabella-controlli .cf-lavori { min-width: 160px; width: 22%; }
.tabella-controlli .cf-lavori .stack { margin: 3px 0 4px; }
.tabella-controlli tr[data-href] { cursor: pointer; }
.tabella-controlli .pill { white-space: nowrap; }
@media (max-width: 760px) {
	.tabella-controlli, .tabella-controlli tbody { display: block; }
	.tabella-controlli thead { display: none; }
	.tabella-controlli tr[data-href] { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 12px 14px; border-bottom: 1px solid var(--linea); }
	.tabella-controlli tr[data-href] > td { display: block; padding: 0; border: 0; }
	.tabella-controlli tr[data-href] > td.cf-mese { grid-column: 1; }
	.tabella-controlli tr[data-href] > td[data-l="Stato"] { grid-column: 2; grid-row: 1; text-align: right; }
	.tabella-controlli tr[data-href] > td[data-l]:not([data-l="Stato"]) { grid-column: 1 / -1; text-align: right; }
	.tabella-controlli tr[data-href] > td[data-l]:not([data-l="Stato"])::before { content: attr(data-l); float: left; margin-right: 10px; color: var(--ink2); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
	.tabella-controlli .cf-file .pill { margin: 0 0 0 4px; }
	.tabella-controlli .cf-lavori { width: auto; min-width: 0; }
	.tabella-controlli .cf-lavori .stack { clear: both; width: 100%; margin-top: 2px; }
}
.form-inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; }

.sottotitolo-report { margin: 0 0 14px; overflow-wrap: anywhere; }
.kpi-controllo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 1250px) { .kpi-controllo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kpi-controllo .kpi { color: inherit; text-decoration: none; transition: box-shadow 0.15s; }
.kpi-controllo .kpi:hover { box-shadow: 0 2px 10px rgba(14, 42, 71, 0.12); }
.kpi-controllo .kpi .n { font-size: 28px; }
.kpi-controllo .kpi .l { font-size: 14px; line-height: 1.25; }
.kpi .sotto { font-size: 12.5px; color: var(--ink2); }
.seg-schede { flex-wrap: wrap; margin-bottom: 14px; }
.seg-schede .conta, .seg-mesi .conta { margin-left: 4px; font-size: 12px; opacity: 0.75; }
.filtri-controllo .fld { min-width: 150px; }
.filtri-controllo select.inp { max-width: 240px; }

.tabella-lavori td { vertical-align: top; }
.tabella-lavori .cella-lavoro { min-width: 220px; max-width: 380px; }
.tabella-lavori .cella-lavoro .trunc { display: block; }
.tabella-lavori .cella-bolla { min-width: 170px; max-width: 250px; }
.tabella-lavori .cella-esito { max-width: 260px; }
.cella-esito .perche { margin-top: 4px; }
.tabella-lavori .cella-esito { min-width: 150px; }
.tabella-lavori .trunc { max-width: 100%; }
.testo-lavoro { font-weight: 500; }
.riga-lavoro.da-guardare > td:first-child { box-shadow: inset 3px 0 0 var(--ambra); }
.riga-lavoro.appena-decisa, .riga-gruppo.appena-decisa { animation: decisa 1.6s ease-out; }
@keyframes decisa { from { background: var(--verde-l); } to { background: transparent; } }
.riga-sezione th { padding: 14px 12px 6px; background: var(--bg); color: var(--navy); font-family: var(--cond); font-size: 15px; text-align: left; text-transform: none; letter-spacing: 0; }
.bolla-proposta + .bolla-proposta { margin-top: 6px; }
.bolla-proposta .importo { float: right; font-weight: 600; }
.stima { color: var(--ambra); }
.perche summary, .decidi summary { cursor: pointer; list-style: none; }
.perche summary::-webkit-details-marker, .decidi summary::-webkit-details-marker { display: none; }
.perche summary { color: var(--blu); font-size: 13px; font-weight: 600; }
.perche ul { margin: 6px 0 0; padding: 0; list-style: none; font-size: 12.5px; min-width: 240px; max-width: 420px; }
.perche li { padding: 2px 0; }
.perche li.nota { color: var(--ink2); font-style: italic; }
.punti { display: inline-block; min-width: 34px; color: var(--verde); font-weight: 700; }
.punti.meno { color: var(--rosso); }
/* conferma in blocco dei da verificare di una targa (3f-bis) */
.riga-targa-dentro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.riga-targa-testo { display: flex; align-items: center; gap: 10px; }
.riga-targa .small { font-family: var(--font, inherit); font-weight: 400; }
.conferma-blocco { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.conferma-blocco form { margin: 0; }
.conferma-blocco form.inline { display: inline; margin-left: 6px; }
.box-conferma-blocco { padding: 12px 16px; display: flex; justify-content: flex-end; }
.decisa { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.decisa form { margin: 0; }
.nota-decisione { flex-basis: 100%; color: var(--ink2); }
.cella-azioni { width: 1%; white-space: nowrap; }
.decidi[open] > summary { background: var(--blu); color: #fff; }
.pannello-decidi { position: absolute; right: 12px; z-index: 5; width: min(460px, calc(100vw - 32px)); margin-top: 6px; padding: 12px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--carta); box-shadow: 0 8px 24px rgba(14, 42, 71, 0.16); white-space: normal; }
.cella-azioni { position: relative; }
.pannello-decidi .inp { width: 100%; margin-bottom: 8px; }
.bottoni-decidi { display: flex; flex-wrap: wrap; gap: 6px; }
.altra-bolla { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linea); }
.altra-bolla[hidden] { display: none; }
.bolle-del-giorno { max-height: 260px; overflow: auto; margin: 6px 0; }
.bolle-del-giorno li { padding: 6px 0; }
.bolle-del-giorno label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.bolle-del-giorno .trunc { display: block; max-width: 360px; }
.riga-numero { display: flex; gap: 8px; }
.riga-numero .inp { margin: 0; }

.riga-gruppo > td { padding: 10px 12px; }
.riga-gruppo.da-guardare > td { box-shadow: inset 3px 0 0 var(--ambra); }
.gruppo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 18px; }
.gruppo-testo { flex: 1 1 380px; }
.gruppo-testo .pill { margin-right: 6px; }
.gruppo-azioni { flex: 0 1 auto; }
.form-gruppo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; margin: 0; }
.form-gruppo .inp[name=nota] { width: 190px; }
.form-gruppo select.inp { width: auto; }

.avviso-azione { position: fixed; right: 20px; bottom: 20px; z-index: 50; max-width: 420px; padding: 12px 16px; border-radius: var(--r); background: var(--navy); color: #fff; font-weight: 600; box-shadow: 0 8px 24px rgba(14, 42, 71, 0.25); }
.avviso-azione.errore { background: var(--rosso); }
.avviso-azione[hidden] { display: none; }

.senza-giornaliere td { background: #FFFBF1; }
.fonti-foglio { display: flex; flex-wrap: wrap; gap: 6px; }
.fonte-giorno { display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; border: 1px solid var(--linea); border-radius: 6px; font-size: 12px; }
.fonte { padding: 0 4px; border-radius: 4px; background: var(--linea2); font-weight: 600; }
.fonte.gestionale { background: var(--verde-l); color: var(--verde); }
.fonte.cache { background: var(--ciano-l); color: var(--ciano-testo); }
.fonte.drive { background: #E6ECF7; color: #2B4C8C; }
.fonte.mancante { background: var(--rosso-l); color: var(--rosso); }

.titolo-mese { margin-left: 10px; font-size: 0.7em; color: var(--ink2); font-weight: 600; }
.kpi-targa { margin-bottom: 14px; }
.seg-mesi { flex-wrap: wrap; margin-bottom: 14px; }
.giorno-dossier { margin-bottom: 14px; }
.giorno-dossier.con-da-guardare { border-left: 3px solid var(--ambra); }
.giorno-dossier .box-h h2 { font-size: 16px; }
.dossier { display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.dossier-lavori { border-right: 1px solid var(--linea); min-width: 0; overflow-x: auto; }
.dossier-bolle { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.giornaliera-dossier { padding: 10px 12px 0; }
.vuoto-dossier { padding: 12px; }
.vista-targa { margin: 0; }
.bolla-dossier { padding: 8px 10px; border: 1px solid var(--linea); border-radius: var(--r-sm); background: var(--carta); }
.bolla-dossier .importo { float: right; font-weight: 600; }
.bolla-dossier.stato-senza_lavoro_in_giornaliera { border-color: #F1D9A6; background: #FFFBF1; }

@media (max-width: 900px) {
	.dossier { grid-template-columns: 1fr; }
	.dossier-lavori { border-right: 0; border-bottom: 1px solid var(--linea); }
}

@media (max-width: 760px) {
	.nuovo-controllo-b { grid-template-columns: 1fr; }
	.kpi-controllo { grid-template-columns: 1fr 1fr; gap: 10px; }
	.kpi-controllo .kpi { padding: 12px; }
	.kpi-controllo .kpi .n { font-size: 24px; }
	.filtri-controllo .fld, .filtri-controllo .search { min-width: 0; flex: 1 1 100%; }
	.filtri-controllo select.inp { max-width: none; }
	/* la tabella dei lavori diventa una pila di schede */
	.tabella-lavori thead { display: none; }
	.tabella-lavori, .tabella-lavori tbody, .tabella-lavori tr, .tabella-lavori td { display: block; width: 100%; }
	.tabella-lavori tr { padding: 10px 12px; border-bottom: 1px solid var(--linea); }
	.tabella-lavori td { padding: 3px 0; border: 0; max-width: none !important; min-width: 0 !important; }
	.tabella-lavori .cella-data, .tabella-lavori .cella-data + td { display: inline-block; width: auto; margin-right: 10px; }
	.tabella-lavori .cella-azioni { white-space: normal; }
	.riga-lavoro.da-guardare { box-shadow: inset 3px 0 0 var(--ambra); }
	.riga-lavoro.da-guardare > td:first-child { box-shadow: none; }
	.pannello-decidi { position: static; width: auto; box-shadow: none; }
	.riga-sezione th { display: block; }
	.form-gruppo { justify-content: flex-start; }
	.form-gruppo .inp[name=nota] { width: 100%; }
	.avviso-azione { left: 16px; right: 16px; bottom: 16px; }
}
.esempio-associazione { max-width: 340px; }
.modifica-associazione { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linea); }
.modifica-associazione label { display: grid; gap: 2px; }
.tabella-associazioni td { vertical-align: top; }
.numeri-controllo { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 12px; }
.numeri-controllo .numero { font-family: var(--cond); font-size: 26px; font-weight: 700; line-height: 1.1; }
.fatturato-mezzo li { gap: 8px; }
.indice-sezioni { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.indice-sezioni .chip { text-decoration: none; }
.indice-sezioni .chip b { margin-left: 4px; }

/* coda di lavoro del controllo fatturato (3f-ter) */
.gruppi-coda { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.gruppo-coda { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; color: inherit; text-decoration: none; border: 1px solid var(--linea); border-left: 4px solid var(--ambra); }
.gruppo-coda:hover { border-color: var(--ciano); }
.gruppo-coda.on { border-color: var(--primary); border-left-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.gruppo-coda.finito { border-left-color: var(--verde); }
.gruppo-coda .domanda { font-family: var(--cond); font-weight: 600; line-height: 1.25; color: var(--navy); }
.gruppo-coda .n-gruppo { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px; margin-right: 4px; }
.gruppo-coda .conta-coda b { font-size: 20px; }
.gruppo-coda .barra { display: block; height: 6px; border-radius: 3px; background: var(--linea2); overflow: hidden; }
.gruppo-coda .barra span { display: block; height: 100%; background: var(--verde); transition: width .3s; }
.barra-coda { flex-wrap: wrap; gap: 6px 12px; }
.barra-coda .spazio { flex: 1; }
.seg-piccolo a { padding: 4px 10px; font-size: 13px; }
.aiuto-tasti kbd, .scheda-coda kbd { display: inline-block; min-width: 18px; padding: 0 4px; border: 1px solid var(--linea); border-radius: 3px; background: var(--bg); font: 11px/16px var(--mono, monospace); text-align: center; color: var(--navy); }
.schede-coda { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.scheda-coda { background: #fff; border: 1px solid var(--linea); border-left: 4px solid var(--ambra); border-radius: 6px; outline: none; }
.scheda-coda.aperta { border-color: var(--navy); border-left-color: var(--ciano); box-shadow: 0 2px 10px rgba(14, 42, 71, .12); }
.scheda-coda.fatta { border-left-color: var(--verde); opacity: .6; }
.scheda-coda.saltata { border-left-color: var(--linea); }
.scheda-testa { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.scheda-testa .testo-lavoro { font-weight: 600; }
.scheda-testa .esito-fatto { color: var(--verde); }
.scheda-coda.saltata .esito-fatto { color: var(--muted, #6B7A89); }
.scheda-corpo { padding: 0 12px 12px; }
.scheda-frase { margin: 0 0 10px; padding: 8px 10px; background: var(--ciano-l); border-radius: 4px; color: var(--navy); font-weight: 500; }
.scheda-due { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 10px; }
.scheda-giornaliera .pezzi { margin: 4px 0; padding-left: 20px; }
.scheda-giornaliera .pezzi li { color: var(--muted, #6B7A89); }
.scheda-giornaliera .pezzi li.corrente { color: var(--navy); font-weight: 700; background: #FFF4D6; border-radius: 3px; padding: 0 4px; }
.scheda-bolla { padding: 8px 10px; border: 1px solid var(--linea2); border-radius: 4px; }
.scheda-bolla .importo { float: right; font-weight: 700; }
.scheda-bolla .fermate { margin-top: 4px; }
.scheda-bolla .fermate b { color: var(--navy); background: #E6F4EC; padding: 0 3px; border-radius: 3px; }
.scheda-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.scheda-azioni .nota-coda { flex: 1 1 180px; min-width: 140px; }
.pannello-scelte { margin-top: 8px; padding: 8px; border: 1px dashed var(--linea); border-radius: 4px; }
.scelte-coda { margin: 0; }
.scelte-coda .scelta { display: block; width: 100%; padding: 6px 8px; text-align: left; background: none; border: 1px solid var(--linea2); border-radius: 4px; cursor: pointer; font: inherit; color: inherit; margin-bottom: 4px; }
.scelte-coda .scelta:hover, .scelte-coda .scelta:focus { border-color: var(--ciano); background: var(--ciano-l); }
.scelte-coda .riga-numero { display: flex; gap: 6px; margin-top: 4px; }
.annulla-ultima { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--navy); color: #fff; border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); }
.annulla-ultima .btn { background: #fff; }
.fermate-coperte summary { cursor: pointer; padding: 10px 12px; }
.fermate-coperte ul { padding: 0 12px 12px; }
@media (max-width: 1100px) { .gruppi-coda { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
	.gruppi-coda { grid-template-columns: minmax(0, 1fr); }
	.scheda-due { grid-template-columns: minmax(0, 1fr); }
	.scheda-testa { grid-template-columns: auto minmax(0, 1fr) auto; }
	.scheda-testa > :nth-child(2) { display: none; }
	.aiuto-tasti { display: none; }
	.scheda-azioni .btn { flex: 1 1 100%; justify-content: flex-start; }
	.annulla-ultima { left: 16px; right: 16px; transform: none; }
}
.perche-scheda { margin: -4px 0 10px; }
/* "Come si usa" del controllo fatturato (3f-quater) */
.guida { max-width: 980px; }
.guida-intro, .guida-passi, .guida-tasti { padding: 14px 18px; margin-bottom: 12px; }
.guida-passi { padding-left: 38px; }
.guida-passi li { margin: 6px 0; line-height: 1.45; }
.guida-titolo { font-family: var(--cond); color: var(--navy); margin: 18px 0 8px; }
.guida-esempi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.guida-esempio { padding: 14px 16px; }
.guida-esempio h3 { margin: 8px 0 4px; font-size: 16px; }
.guida-esempio p { margin: 6px 0; line-height: 1.4; }
@media (max-width: 900px) { .guida-esempi { grid-template-columns: minmax(0, 1fr); } }

/* --- anagrafica mezzi (4a): possesso, uscita dal parco, popup, Transcoop --- */
.riga-possesso { align-items: end; }
.seg label.scelta-vuota { font-weight: 500; color: var(--muted, #6B7A8C); }
.seg label.scelta-vuota.on { color: #fff; }
.riquadro-uscita { border-left: 4px solid var(--ciano); }
.riquadro-uscita.rottamato { border-left-color: var(--rosso); }
.riquadro-uscita .note-uscita { display: block; white-space: normal; }
.riquadro-uscita ul + .box-b { padding-top: 0; }
.riquadro-transcoop .box-b > div + .small { margin-top: 10px; }
.riquadro-transcoop .nome-transcoop { font-size: 15px; }
.riquadro-transcoop details { margin-top: 10px; }
.riquadro-transcoop summary { cursor: pointer; color: var(--blu, var(--primary)); }
.form-nuovo-codice { display: grid; gap: 8px; margin-top: 8px; }
.form-nuovo-codice .btn { justify-self: start; }
dialog.popup { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--linea); border-radius: var(--r); box-shadow: 0 12px 40px rgba(22,26,51,.19); background: var(--carta, #fff); color: inherit; }
dialog.popup::backdrop { background: rgba(14, 42, 71, 0.45); }
dialog.popup form { display: flex; flex-direction: column; max-height: calc(100vh - 34px); }
.popup-h { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--linea2); }
.popup-h h2 { flex: 1; margin: 0; font-family: var(--cond); font-size: 18px; font-weight: 700; }
.popup-b { display: grid; gap: 12px; padding: 16px 18px; overflow-y: auto; }
.popup-b textarea { width: 100%; resize: vertical; }
.popup-f { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--linea2); background: var(--surface-2); }
.elenco-usciti td.note-uscita { max-width: 340px; white-space: normal; }
.mcard .sil img.foto-mezzo { object-fit: cover; }
.titolo-mezzo .foto-titolo img { object-fit: cover; }
@media (max-width: 700px) {
	.popup-f .btn { flex: 1 1 auto; justify-content: center; }
	.elenco-usciti td.note-uscita { max-width: none; min-width: 180px; }
}
.doc-uscita { display: inline-flex; align-items: center; gap: 4px; }
.doc-uscita svg { flex: none; }
.mcard .sil img.foto-mezzo { cursor: zoom-in; }
.azioni-uscita { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.azioni-uscita form { margin: 0; }

/* --- Disponibilità mezzi (4b, mockup-transcoop-v2 «Disponibilità mezzi») --- */
.alert.g { background: #F3F5F8; color: #3F4A55; }
.kpi.u { border-left-color: var(--blu); }
.disponibilita { display: flex; flex-direction: column; gap: 16px; }
.giorni-disponibilita { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.giorni-disponibilita .inp[type=date] { width: 160px; }
.giorni-disponibilita .btn.sm { align-self: stretch; padding: 0 9px; }
.giorni-disponibilita .storico-nota { flex-basis: 100%; }
.giorni { display: flex; flex-wrap: wrap; gap: 8px; }
.giorno { display: block; border: 1.5px solid var(--linea); background: #fff; border-radius: 8px; padding: 6px 12px; line-height: 1.25; color: var(--ink); text-decoration: none; }
.giorno:hover { border-color: #C5C9D8; }
.giorno b { display: block; font-size: 14px; text-transform: capitalize; }
.giorno small { font-size: 12px; color: var(--ink2); }
.giorno.on { border-color: var(--blu); background: var(--primary-soft); }
.copia-fine-settimana { display: flex; flex-wrap: wrap; gap: 8px; }
.copia-fine-settimana form { margin: 0; }
.filtri-disponibilita { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filtri-disponibilita .cerca-disponibilita { flex: 1 1 220px; max-width: 420px; }
.filtri-disponibilita .doppioni { font-size: 13px; padding: 4px 10px; }
.salvataggio { margin-left: auto; }
.salvataggio.errore { color: var(--rosso); font-weight: 600; }
/* 5h: tabella compatta, tutta in una schermata a 1280 px: ogni campo alto 34 px sulla stessa linea, il tipo del mezzo piccolo sotto
   il N° (non sposta la tendina), le note prendono lo spazio che resta e vanno a capo */
.t-disponibilita { font-size: 13.5px; }
.t-disponibilita td { padding: 8px 4px; background: var(--riga-sfondo, transparent); color: var(--riga-testo, inherit); }
.t-disponibilita th { padding: 8px 4px; font-size: 13px; white-space: nowrap; }
.t-disponibilita td:first-child, .t-disponibilita th:first-child { padding-left: 8px; }
.t-disponibilita td:last-child, .t-disponibilita th:last-child { padding-right: 10px; }
.t-disponibilita th.c { text-align: center; }
.t-disponibilita tr:hover td { background: var(--riga-sfondo, #FAFAFE); filter: brightness(.98); }
.t-disponibilita tr.ass td { background: #FDF0EE; color: inherit; }
.t-disponibilita tr.cam td:first-child { box-shadow: inset 4px 0 0 #E0B000; }
.t-disponibilita tr.dup td { box-shadow: inset 0 2px 0 #B91C1C33, inset 0 -2px 0 #B91C1C33; }
.t-disponibilita tr.dup.cam td:first-child { box-shadow: inset 4px 0 0 #E0B000, inset 0 2px 0 #B91C1C33, inset 0 -2px 0 #B91C1C33; }
.t-disponibilita tr.trascinata { opacity: .45; }
/* righe non spuntate «Transcoop»: restano nella lista di Saini ma non si inviano (attenuate, ancora leggibili e modificabili) */
.t-disponibilita tr.non-inviata td:not(.c):not(.maniglia) > * { opacity: .62; }
.t-disponibilita tr.non-inviata:hover td > *,
.t-disponibilita tr.non-inviata td > *:focus,
.t-disponibilita tr.non-inviata td > *:focus-within { opacity: 1; }
.t-disponibilita td.c { text-align: center; }
.t-disponibilita td.n { min-width: 46px; line-height: 1.15; }
.t-disponibilita td.n b { display: block; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink2); }
.t-disponibilita td.tel { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 13px; }
.t-disponibilita .ck { width: 20px; height: 20px; accent-color: var(--blu); cursor: pointer; vertical-align: middle; }
.t-disponibilita .tipo-mezzo { display: block; max-width: 66px; overflow-wrap: normal; font-size: 10.5px; font-weight: 600; color: var(--ink2); text-transform: uppercase; letter-spacing: .2px; line-height: 1.1; }
.t-disponibilita td { line-height: 1.2; }
.t-disponibilita td > select,
.t-disponibilita td > .inp { display: block; height: 34px; min-height: 34px; margin: 0; }
.t-disponibilita .plate { border: 1.5px solid #2B3A48; border-radius: 4px; background: #fff; font-family: var(--cond); font-weight: 700; font-size: 14px; letter-spacing: .8px; padding: 3px 4px; width: 104px; color: var(--ink); cursor: pointer; }
.t-disponibilita .plate.dup,
.t-disponibilita .inp.dup { border-color: var(--rosso); box-shadow: 0 0 0 3px #B91C1C33; }
.t-disponibilita .inp { padding: 5px 7px; font-size: 13.5px; }
.t-disponibilita .autista { width: 150px; }
.t-disponibilita .cant { border: 0; border-radius: 6px; padding: 5px 6px; font-size: 12.5px; font-weight: 700; width: 104px; cursor: pointer; background: #F3F5F8; color: var(--ink-2); }
.t-disponibilita .cant-ro { display: inline-block; border-radius: 6px; padding: 4px 8px; font-size: 13px; font-weight: 700; }
.t-disponibilita .stato { width: 106px; font-weight: 600; }
.t-disponibilita .stato.ok { color: var(--verde); }
.t-disponibilita .stato.no { color: var(--rosso); }
.t-disponibilita b.verde { color: var(--verde); }
.t-disponibilita b.rosso { color: var(--rosso); }
.t-disponibilita .cella-stato { white-space: nowrap; }
.t-disponibilita .sigla-tolto { display: block; width: max-content; max-width: 170px; margin-top: 3px; font-size: 11px; white-space: normal; line-height: 1.2; }
.t-disponibilita .sigla-tolto[hidden] { display: none; }
.t-disponibilita .da-giornaliera { display: block; max-width: 106px; margin-top: 2px; font-size: 11px; white-space: normal; line-height: 1.2; }
.t-disponibilita .col-note { width: 100%; min-width: 120px; }
.t-disponibilita td.col-note { white-space: normal; overflow-wrap: anywhere; }
.t-disponibilita textarea.note { display: block; width: 100%; height: 34px; resize: none; overflow: hidden; line-height: 1.3; font-family: inherit; }
.t-disponibilita .maniglia { width: 18px; padding-right: 0; }
.t-disponibilita .sposta { min-height: 0; height: 30px; border: 0; background: transparent; color: var(--ink2); cursor: grab; font-size: 15px; line-height: 1; padding: 4px 2px; border-radius: 4px; letter-spacing: -2px; }
.t-disponibilita .sposta:focus-visible { outline: 2px solid var(--ciano); }
/* 5j: sola lettura (giorno in corso, giorni passati, «vede») con le stesse larghezze e altezze dei campi della vista modificabile:
   targa, rimorchio, autista, cantiere e stato su una riga sola, nomi lunghi con «…» (il nome intero nel tooltip) */
.t-disponibilita .ro { display: block; box-sizing: border-box; height: 34px; line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.t-disponibilita .plate.ro { line-height: 25px; padding: 3px 6px; }
.t-disponibilita .inp.ro { padding: 3px 7px; background: #FFFFFFB3; border-color: #D5DEE7; }
.t-disponibilita .cant.ro { line-height: 24px; padding: 5px 6px; }
.t-disponibilita .ro.vuoto { color: var(--ink2); font-weight: 400; letter-spacing: 0; }
.t-disponibilita .plate.ro.vuoto { border-color: #C9D3DD; font-family: inherit; font-size: 13px; }
.t-disponibilita .ro.dup { border-color: var(--rosso); box-shadow: 0 0 0 3px #B91C1C33; }
/* stessa altezza di riga delle due viste (52 px; con «MOTRICE 3 ASSI» sotto il N° un po' di più) */
/* 5n: Disponibilità nello stile v5 (mockup «Disponibilità»): righe bianche, interruttore «Transcoop», targhe con la banda blu, autista con
   le iniziali nel tondo, cantiere e stato a pillola, note in un campo a pillola. Il colore del cantiere resta sulla sua pillola. */
.t-disponibilita td { background: transparent; color: inherit; }
.t-disponibilita tr:hover td { background: #FAFAFE; filter: none; }
.t-disponibilita tr.ass td { background: #FFF9F7; }
.t-disponibilita .ck {
	appearance: none;
	position: relative;
	width: 38px;
	height: 22px;
	margin: 0;
	border: 0;
	border-radius: var(--pill);
	background: #C9CDDA;
	cursor: pointer;
	transition: background .15s;
}
.t-disponibilita .ck::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; transition: left .15s; }
.t-disponibilita .ck:checked { background: var(--primary-2); }
.t-disponibilita .ck:checked::after { left: 19px; }
.t-disponibilita .ck:focus-visible { outline: 2.5px solid var(--primary-2); outline-offset: 2px; }
.t-disponibilita .plate {
	appearance: none;
	border: 1.5px solid #2B3550;
	border-radius: 6px;
	width: 116px;
	padding: 3px 14px 3px 16px;
	background: #fff linear-gradient(90deg, #2547A8 0 9px, transparent 9px) no-repeat;
	color: #1B2238;
	font-family: var(--head);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .06em;
}
select.plate { background-image: linear-gradient(90deg, #2547A8 0 9px, transparent 9px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666C85' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0 0, right 3px center; }
.t-disponibilita .plate.ro.vuoto { background: #fff; padding-left: 8px; }
.t-disponibilita .con-avatar { display: flex; align-items: center; gap: 8px; }
.t-disponibilita .con-avatar .avatar { width: 30px; height: 30px; font-size: 11.5px; }
.t-disponibilita .con-avatar .avatar.vuoto { background: #F1F2F7; }
.t-disponibilita .con-avatar > select, .t-disponibilita .con-avatar > .inp { height: 34px; min-height: 34px; }
.t-disponibilita .inp { border-radius: var(--pill); padding: 5px 12px; }
.t-disponibilita select.inp { padding-right: 28px; background-position: right 9px center; }
.t-disponibilita .cant { appearance: none; border-radius: var(--pill); padding: 5px 12px; text-align: left; }
.t-disponibilita .stato { border: 0; width: 124px; }
.t-disponibilita .con-avatar .autista { width: 132px; }
.t-disponibilita .stato.ok { background-color: var(--green-soft); color: var(--green); }
.t-disponibilita .stato.no { background-color: var(--red-soft); color: var(--red); }
.t-disponibilita textarea.note { border-radius: var(--pill); padding: 7px 14px; }
.t-disponibilita textarea.note:focus { border-radius: 16px; }
.t-disponibilita .inp.ro { background: #fff; border-color: var(--line); }
.t-disponibilita .tipo-mezzo { color: var(--ink-3); font-weight: 600; }
.giorno { border-radius: 14px; border-color: var(--line); }
.giorno.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.giorno small { color: var(--ink-3); }
.giorni-disponibilita .btn.sm[aria-label] { width: 40px; min-height: 40px; padding: 0; border-radius: 50%; align-self: center; }
.giorni-disponibilita .btn.sm:not([aria-label]) { align-self: center; }
.top h1 .pill { margin-left: 6px; font-family: var(--body); letter-spacing: 0; vertical-align: middle; }
@media (min-width: 761px) { .t-disponibilita tbody tr[data-id] { height: 52px; } }
.t-disponibilita .note-ro { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.3; }
.conta-invio { align-self: center; font-size: 14px; white-space: nowrap; }
@media (min-width: 1400px) {
	.t-disponibilita .autista { width: 172px; }
}
/* sul 34" di Saini: più aria */
@media (min-width: 1800px) {
	.t-disponibilita { font-size: 15px; }
	.t-disponibilita td { padding: 6px 8px; }
	.t-disponibilita .plate { width: 124px; font-size: 15px; }
	.t-disponibilita .autista, .t-disponibilita .con-avatar .autista { width: 244px; }
	.t-disponibilita .cant { width: 150px; font-size: 13px; }
	.t-disponibilita .stato { width: 124px; }
}
/* telefono: ogni mezzo è una scheda, niente scorrimento orizzontale */
@media (max-width: 760px) {
	.tabella-disponibilita { overflow: visible; }
	.t-disponibilita, .t-disponibilita tbody { display: block; }
	.t-disponibilita thead { display: none; }
	.t-disponibilita tr[data-id] { display: grid; grid-template-columns: auto auto 1fr; gap: 6px 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--linea); background: var(--riga-sfondo, #fff); }
	.t-disponibilita tr.ass[data-id] { background: #FDF0EE; }
	.t-disponibilita tr[data-id] > td { display: block; padding: 0; border: 0; background: transparent; }
	.t-disponibilita tr[data-id] > td[data-l]:not(.c):not(.n) { grid-column: 1 / -1; display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 8px; }
	.t-disponibilita tr[data-id] > td[data-l]:not(.c):not(.n)::before { content: attr(data-l); color: var(--ink2); font-size: 13px; font-weight: 600; }
	.t-disponibilita td.n { display: flex !important; align-items: baseline; gap: 8px; }
	.t-disponibilita .tipo-mezzo { max-width: none; font-size: 12px; }
	.t-disponibilita .plate, .t-disponibilita .autista, .t-disponibilita .cant, .t-disponibilita .stato { width: 100%; }
	.t-disponibilita .da-giornaliera { max-width: none; }
	.conta-invio { white-space: normal; }
}
.form-invia { margin: 0; }
.registro-invii td { white-space: normal; }
@media (max-width: 760px) {
	.giorni-disponibilita .giorni { order: 3; flex-basis: 100%; }
	.giorno { padding: 5px 9px; }
	.salvataggio { margin-left: 0; flex-basis: 100%; }
	.filtri-disponibilita .seg { flex-wrap: wrap; }
}
.cant-ro { display: inline-block; border-radius: 6px; padding: 2px 8px; font-weight: 700; font-size: 13px; }
.colori-cantiere input[type=color] { min-height: 38px; padding: 2px 4px; width: 100%; }
@media (max-width: 760px) {
	.kpi-disponibilita.g4 { grid-template-columns: 1fr 1fr; gap: 10px; }
	.kpi-disponibilita .kpi { padding: 10px 12px; }
	.kpi-disponibilita .kpi .n { font-size: 26px; }
}

/* ===== Pianificazione del giorno (4c, mockup-transcoop-v2 «Pianificazione») ===== */
/* pagina larga: tutta la larghezza dello schermo (schermo 34" di Saini) */
.content:has(.pianificazione) { max-width: none; }
.pianificazione { display: flex; flex-direction: column; gap: 14px; }
.filtri-pianificazione { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filtri-pianificazione .cerca-pianificazione { flex: 1 1 220px; max-width: 420px; }
.filtri-pianificazione .salvataggio { margin-left: auto; }
.filtri-pianificazione .salvataggio.errore { color: var(--rosso); font-weight: 600; }
.aiuto-pianificazione { margin: -6px 0 0; }
.pannello-variazioni { border: 2px solid var(--blu); }
.pannello-variazioni .avviso-operativi { margin: 12px 18px 0; }
.t-variazioni .id { font-weight: 600; white-space: nowrap; }
.t-variazioni .da { text-decoration: line-through; color: var(--ink2); }
.t-variazioni .aa { font-weight: 700; }
.t-variazioni tr.fatta td { opacity: .65; }
.t-variazioni .vuoto-variazioni { padding: 16px; }
.azioni-variazioni { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--linea2); background: var(--surface-2); border-radius: 0 0 8px 8px; }
.azioni-variazioni .muted { margin-right: auto; }

/* 5n: riquadri come il foglio Drive di Saini, più grandi e «ariosi»: testa col colore chiaro del cantiere, corpo a righe «da quaderno»
   (una linea leggera ogni 48 px), viaggi sopra le righe, «+ scrivi una riga» in fondo, altezza minima 380 px. Le misure seguono --fs
   (S · M · L · XL, js/pianificazione.js). Fermi e ferie: riquadro azzurro con la pillola dello stato. */
.board, .fascia-b { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 360px)), 1fr)); gap: 20px; align-items: stretch; font-size: var(--fs, 15px); }
.fascia-sistemare { border: 2px dashed #F0A99A; border-radius: 22px; background: #FFF8F6; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; font-size: var(--fs, 15px); }
.fascia-sistemare .fascia-h { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: #8A1C1C; }
.fascia-sistemare .fascia-b { min-height: 40px; align-items: start; }
.fascia-sistemare .fascia-b.over { box-shadow: 0 0 0 4px var(--primary-ring); border-radius: 16px; }
.fascia-sistemare .tv { border: 1px solid var(--line); border-radius: 16px; }
.nessun-riquadro { padding: 20px 4px; }

.riq {
	--hd: #F3F4F8;
	--hn: #2B3048;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 380px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 22px;
	background: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, #EFF1F6 47px, #EFF1F6 48px), #fff;
	box-shadow: var(--sh);
	color: var(--ink);
}
.riq.over { box-shadow: 0 0 0 4px var(--primary-ring), var(--sh); }
.riq.in-fondo .add { box-shadow: inset 0 3px 0 var(--primary-2); }
.riq .prima, .fascia-b .prima { box-shadow: inset 0 3px 0 var(--primary-2); }
.riq.off { background: #EEF2FB; }
.riq.off .rh { background: #DCE4F7; }

.rh { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; padding: 18px 20px 16px; background: var(--hd); border-bottom: 1px solid rgba(0, 0, 0, .05); }
.rh .a { min-width: 0; }
.rh .a b { display: block; color: var(--hn); font-size: 1.1em; font-weight: 700; letter-spacing: .01em; line-height: 1.25; text-transform: uppercase; overflow-wrap: break-word; }
.rh .a .tel { display: block; margin-top: 4px; color: var(--ink); font-size: 1.033em; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rh .a .cant { display: block; margin-top: 6px; color: var(--ink-2); font-size: .8em; font-weight: 500; }
.rh .b { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rh .b .nn { font-family: var(--head); font-size: .95em; font-weight: 700; color: var(--ink-2); line-height: 1; }
.rh .b .targa { font-size: .97em; }
.rh .b .targa.sm { font-size: .87em; }
.rh .b .motrice { color: var(--ink-3); font-size: .8em; }
.riq > .st { align-self: flex-start; margin: 16px 20px 4px; padding: 3px 14px; border: 1.5px solid #B8C6EC; border-radius: var(--pill); background: #fff; color: #3A4B85; font-size: .87em; font-weight: 700; text-transform: uppercase; }
.rh .diff { grid-column: 1 / -1; margin-top: 10px; padding: 6px 12px; border-radius: 12px; background: var(--amber-soft); color: #7A4A06; font: 600 12.5px var(--body); }
.rh .diff.leggero { background: rgba(255, 255, 255, .7); color: var(--ink-2); font-weight: 500; }
.rh .qui { grid-column: 1 / -1; margin-top: 10px; min-height: 36px; border: 1.5px solid var(--primary); border-radius: var(--pill); background: #fff; color: var(--primary); font: 600 13px var(--body); cursor: pointer; }
.rh .qui:hover { background: var(--primary-soft); }

/* righe scritte a mano: stesse altezze delle righe del quaderno, colori di Saini */
.rg { padding: 2px 20px; font-weight: 700; text-transform: uppercase; min-height: 1.7em; line-height: 1.5; overflow-wrap: break-word; }
.riq > .rg.lib, .fascia-b > .rg.lib { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 8px 20px; background: #fff; border-bottom: 1px solid #EFF1F6; cursor: pointer; }
.rg.lib .tx { flex: 1; min-width: 0; }
.rg.lib .x { border: 0; background: transparent; color: var(--ink); opacity: 0; cursor: pointer; font: 700 1.2em var(--body); line-height: 1; padding: 0 4px; }
.rg.lib:hover .x, .rg.lib .x:focus-visible { opacity: .6; }
.rg.lib .x:hover { opacity: 1; color: var(--red); }
.rg.lib .correggi { width: 100%; padding: 2px 8px; border: 1.5px solid var(--primary-2); border-radius: 10px; font: inherit; text-transform: uppercase; }
.riq > .rg.y, .rg.y { background: #FFFF4D; }
.riq > .rg.g, .rg.g { background: #C9C9C9; }
.riq > .rg.c, .rg.c { background: #00FFFF; }
.riq > .rg.v, .rg.v { background: #00FF00; }
.riq > .rg.az, .rg.az { background: #C9D9F2; }
.riq > .rg.rr, .rg.rr { background: #D92D20; color: #fff; } /* 5n-bis: più scuro del rosso del foglio (#FF3B30, contrasto 3,55) per il testo bianco */
.rg.rr .x { color: #fff; }

/* viaggi Transcoop: blocchi bianchi sopra le righe, pillola «ORE 05,00», ID piccolo a destra, testo 15 px in grassetto */
.tv { position: relative; padding: 12px 0 10px; background: #fff; border-bottom: 1px solid #EFF1F6; box-shadow: inset 4px 0 0 var(--primary-2); }
.tv[draggable] { cursor: grab; }
.tv.mod { box-shadow: inset 4px 0 0 #E0A100; }
.tv.warn { box-shadow: inset 4px 0 0 var(--red); }
.tv.ann { background: #F6F7FA; box-shadow: inset 4px 0 0 #A3A8BC; }
.tv.ann .rg:not(.bd) { text-decoration: line-through; color: var(--ink-3); }
.tv.sel { outline: 3px solid var(--primary-ring); outline-offset: -3px; }
.tv.drag, .rg.drag { opacity: .4; }
.tv .rg { padding: 0 20px; font-size: 1em; font-weight: 600; line-height: 1.45; text-transform: none; }
.tv .r1 { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tv .r1 .ore { display: inline-flex; align-items: center; gap: 2px; padding: 2px 11px; border-radius: var(--pill); background: var(--primary-soft); color: var(--primary); font-size: .87em; font-weight: 700; white-space: nowrap; }
.tv .idv { margin-left: auto; color: var(--ink-3); font: 500 11.5px var(--body); text-align: right; white-space: normal; }
.tv .nota { margin-top: 4px; color: var(--ink-2); font-weight: 400; font-size: .87em; line-height: 1.35; }
.tv .bd { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; padding: 0 20px; font-family: var(--body); text-transform: none; }
.tv .bd .pill { white-space: normal; }
.tv .bd.conflitto { display: block; margin: 8px 16px 0; padding: 6px 10px; border-radius: 12px; background: var(--amber-soft); color: #7A4A06; font-size: 12.5px; }
.tv .stato-bacheca { font-size: 11.5px; color: var(--ink-3); }
.ora { width: 3.6em; padding: 0 2px; border: 0; border-bottom: 1px dashed var(--primary-2); border-radius: 0; background: transparent; color: var(--primary); font: 700 1em var(--body); text-align: center; }
.ora:focus { outline: none; border-bottom: 2px solid var(--primary); background: #fff; }
.ora-fissa { font-weight: 700; }
.pianificazione .link { border: 0; background: transparent; color: var(--primary); font: 600 12px var(--body); cursor: pointer; padding: 0 2px; text-decoration: underline; text-transform: none; }
.riq .add { width: 100%; margin-top: auto; padding: 14px 20px; border: 0; border-top: 1px dashed #E3E6EF; background: #fff; color: var(--ink); font: inherit; font-size: .9em; text-transform: uppercase; }
.riq .add::placeholder { color: var(--ink-3); text-transform: none; }
.riq .add:focus { outline: none; box-shadow: inset 0 0 0 2px var(--primary-2); }
.riq > .vuoto, .fascia-b .vuoto { padding: 14px 20px; color: var(--ink-3); font-size: .87em; }
.rilascia-file { position: fixed; inset: 0; z-index: 60; background: rgba(22, 26, 51, .55); display: flex; align-items: center; justify-content: center; }
.rilascia-file[hidden] { display: none; }
.rilascia-file div { background: #fff; border: 3px dashed var(--primary-2); border-radius: 24px; padding: 40px 48px; font: 600 20px var(--head); color: var(--primary); }
@media (max-width: 700px) {
	.filtri-pianificazione .salvataggio { margin-left: 0; flex-basis: 100%; }
	.azioni-variazioni .muted { flex-basis: 100%; }
	.riq .rg.lib .x { opacity: .6; }
}
.filtri-pianificazione [data-sposta-msg] { white-space: normal; max-width: 100%; }
.t-variazioni .da, .t-variazioni .aa { white-space: nowrap; }

/* Allarme Transcoop (4c v2): fascia rossa in cima a tutte le pagine */
.fascia-allarme { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 28px; background: var(--rosso); color: #fff; font-size: 15px; position: sticky; top: 0; z-index: 6; }
.fascia-allarme a { color: #fff; font-weight: 700; text-decoration: underline; margin-left: auto; }
.fascia-allarme + .top { top: 44px; }
.allarme-pianificazione { border: 2px solid var(--rosso); }
.allarme-pianificazione .btn.rosso { margin-left: auto; }
@keyframes lampeggia-allarme { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px var(--rosso); } }
.tv.in-allarme { outline: 3px solid var(--rosso); outline-offset: -3px; }
.tv.lampeggia { animation: lampeggia-allarme .8s ease-in-out 5; }
.tv .bd .pill.allarme { background: var(--rosso); color: #fff; }
.riquadro-pianificazione-allarme { border: 2px solid var(--rosso); background: var(--rosso-l); }
@media (max-width: 700px) { .fascia-allarme { padding: 10px 16px; position: static; } .fascia-allarme + .top { top: 0; } }
/* ID viaggio Transcoop nella giornaliera (4c v2): piccoli e grigi */
.id-transcoop { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-top: 4px; font-size: 12px; color: var(--ink2); }
.id-transcoop .modifica-id summary { cursor: pointer; color: var(--blu); text-decoration: underline; list-style: none; }
.id-transcoop .modifica-id form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.id-transcoop .modifica-id .inp { min-width: 220px; min-height: 30px; font-size: 13px; }
span.id-transcoop { display: block; font-size: 10.5px; margin-top: 2px; }

/* Controllo fatturato 3f-octies: bolle su targa sbagliata */
.riquadro-targa-sbagliata > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.riquadro-targa-sbagliata > summary::-webkit-details-marker { display: none; }
.riquadro-targa-sbagliata > summary h2::before { content: '▸ '; color: var(--ink2); }
.riquadro-targa-sbagliata[open] > summary h2::before { content: '▾ '; }
.tabella-targa-sbagliata { max-height: 460px; overflow-y: auto; }
.tabella-targa-sbagliata .trunc { max-width: 260px; }

/* 4e: giornaliere appena create da «Importa da Viaggi» */
.t tr.nuova-import td { background: #E6F6EA; }
.t tr.nuova-import td:first-child { box-shadow: inset 4px 0 0 var(--verde, var(--green)); }

/* 4e: vista a schede dei rimorchi, i dati al posto dell'autista abituale */
.mcard-dati { display: grid; gap: 4px; margin: 0; font-size: 13.5px; }
.mcard-dati > div { display: flex; justify-content: space-between; gap: 10px; }
.mcard-dati dt { color: var(--muted, #5B6B7C); font-weight: 500; }
.mcard-dati dd { margin: 0; text-align: right; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

/* 4e: «Importa da Viaggi» della Giornaliera */
.fonte-import { margin-top: 14px; }
.fonte-import .box-h h2 { display: flex; align-items: center; gap: 8px; }
.fonte-import .alert { margin: 0 18px 12px; }
.formbar-importa { margin-top: 14px; flex-wrap: wrap; align-items: center; }
.formbar-importa .l { flex: 1 1 320px; }
.formbar-importa .btn { flex: none; white-space: nowrap; }

/* 5a: pagina «Permesso negato» (403) nella grafica del login */
.login .negato { display: grid; gap: 18px; max-width: 420px; }
.login .negato h1 { display: flex; align-items: center; gap: 10px; }

/* 5a: Utenti e permessi (mockup v4 «ute») */
.pc { display: inline-grid; place-items: center; min-width: 64px; height: 28px; padding: 0 6px; border-radius: 6px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; user-select: none; border: 1px solid transparent; }
.pc.m { background: var(--verde-l); color: var(--verde); }
.pc.v { background: var(--ciano-l); color: var(--ciano-testo); }
.pc.n { background: #F3F5F8; color: #A8B4C0; border-color: #E4E9EF; }
.pc.lock { cursor: default; opacity: .9; }
.pc.cambiata { outline: 2px solid var(--ambra); outline-offset: 1px; }
.legenda-permessi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.legenda-permessi .pc { cursor: default; }
.t.perm th, .t.perm td { text-align: center; padding: 6px 4px; }
.t.perm th:first-child, .t.perm td:first-child { text-align: left; position: sticky; left: 0; background: var(--carta); z-index: 1; padding-left: 14px; }
.t.perm .perm-th { display: inline-block; max-width: 84px; white-space: normal; line-height: 1.15; font-size: 12px; }
.t.perm tr.disattivato td { opacity: .55; }
.t.perm tr.scelto td { background: var(--ciano-l); }
.utenti-sotto { margin-top: 18px; }
.dati-utente { display: grid; gap: 6px; margin: 0 0 14px; }
.dati-utente > div { display: flex; justify-content: space-between; gap: 12px; }
.dati-utente dt { color: #5B6B7C; font-weight: 500; }
.dati-utente dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.azioni-utente { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.azioni-utente details { width: 100%; }
.azioni-utente details summary { list-style: none; display: inline-flex; }
.azioni-utente details summary::-webkit-details-marker { display: none; }
.mini-form { display: grid; gap: 10px; margin-top: 10px; max-width: 360px; }
.testo-rosso { color: var(--rosso) !important; }
.registro-permessi .ls li { align-items: flex-start; }
.fascia-impersona { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 9px 16px; background: var(--ambra); color: #fff; font-weight: 600; }
.fascia-impersona a { color: #fff; text-decoration: underline; font-weight: 700; }
.side .user .mia-password { display: inline-block; margin-top: 4px; color: #C9D6E3; font-size: 12.5px; }

/* 5a: sola lettura */
.avviso-sola-lettura { margin-bottom: 14px; }
.sola-lettura form.spento .formbar .btn,
.sola-lettura form.spento button[type=submit] { display: none; }

/* 5b: interruttore on/off degli utenti (verde = può entrare) e «Mostra disattivati» */
.interruttore { position: relative; display: inline-block; flex: none; width: 38px; height: 22px; padding: 0; border: 0; border-radius: 11px; background: #C3CDD8; cursor: pointer; vertical-align: middle; transition: background .15s; }
.interruttore i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.interruttore.on { background: var(--verde); }
.interruttore.on i { transform: translateX(16px); }
.interruttore:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }
.interruttore:disabled { opacity: .6; cursor: wait; }
.interruttore-posto { display: inline-block; width: 38px; }
.cella-utente { display: flex; align-items: center; gap: 10px; }
.interruttore-filtro { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-weight: 600; }
.legenda-permessi .separa { width: 1px; height: 22px; background: var(--linea); margin: 0 6px; }
.avviso-interruttore { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; background: var(--navy); color: #fff; font-weight: 600; box-shadow: 0 6px 20px rgba(14,42,71,.3); max-width: calc(100vw - 32px); }
.avviso-interruttore .btn { background: #fff; }
@media (prefers-reduced-motion: reduce) { .interruttore, .interruttore i { transition: none; } }

/* 5b: campo mostrato in sola lettura (es. nome del dipendente senza il permesso Paghe) */
.inp-sola-lettura { display: flex; align-items: center; background: #F3F5F8; color: var(--ink); cursor: default; }

/* 4d-1: popup della mail della Disponibilità (Da, A, Oggetto, Allegato, testo da cambiare) e anteprima di «Invia a Transcoop» */
dialog.popup.popup-mail { width: min(720px, calc(100vw - 32px)); }
.mail-campi { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 13.5px; }
.mail-campi dt { color: var(--muted, #5B6B7C); font-weight: 600; }
.mail-campi dd { margin: 0; overflow-wrap: anywhere; }
.mail-campi .ic-s { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.mail-testo { display: grid; gap: 4px; }
.mail-testo textarea { font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.4; min-height: 240px; }
@media (max-width: 560px) {
	.mail-campi { grid-template-columns: minmax(0, 1fr); }
	.mail-campi dd { margin-bottom: 4px; }
}
/* 4d-2: anteprima di «Invia a Transcoop»: il cambio prima → dopo evidenziato, controlli ed esito per viaggio */
.t-invio .da { text-decoration: line-through; color: var(--ink-3); }
.t-invio .aa { font-weight: 700; color: var(--ink); }
.t-invio td.id { white-space: nowrap; font-variant-numeric: tabular-nums; }
.t-invio tr.stato-gia_inviata td, .t-invio tr.stato-solo_ora td { color: var(--ink-3); }
.t-invio .pill { margin: 0 4px 2px 0; white-space: normal; max-width: 100%; }
.pannello-variazioni .box-h h2 { display: block; }
.t-invio .avviso-invio { color: #8A5A00; margin-top: 2px; }
.t-invio .blocco-invio { color: var(--red); font-weight: 600; margin-top: 2px; }
.t-invio .scelta-mezzo { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.t-invio .scelta-mezzo select { height: 32px; max-width: 260px; }
.azioni-variazioni .nota-invio { flex: 1 1 260px; min-width: 0; margin: 0; }
.variazioni-a-mano { margin-top: 12px; border-top: 1px solid var(--linea2, #E3E8EE); padding-top: 10px; }
.variazioni-a-mano summary { cursor: pointer; color: var(--blu, var(--primary)); font-size: 13.5px; }
.conta-pulsante { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: #FFFFFF33; font-size: 12px; text-align: center; }
@media (max-width: 600px) {
	/* 4d-1/4d-2: al telefono ogni viaggio dell'anteprima è una scheda (niente tabella che scorre) */
	.t-invio thead, .t-variazioni thead { display: none; }
	.t-invio, .t-invio tbody, .t-invio tr, .t-invio td,
	.t-variazioni, .t-variazioni tbody, .t-variazioni tr, .t-variazioni td { display: block; width: auto !important; max-width: none !important; white-space: normal !important; }
	.t-invio tr, .t-variazioni tr { padding: 8px 12px; border-bottom: 1px solid var(--linea2, #E3E8EE); }
	.t-invio td, .t-invio td.id, .t-variazioni td, .t-variazioni td.id { padding: 2px 0 !important; border: 0; }
	.t-invio td[data-l]::before, .t-variazioni td[data-l]::before { content: attr(data-l) ' '; color: var(--ink2, #5B6B7C); font-size: 12.5px; font-weight: 600; }
}
/* 4d-1: Tabelle di base → Testi delle mail: il testo intero si vede (la firma è di 10 righe); la descrizione delle voci fisse va a
   capo dentro il riquadro */
.tabelle-base textarea[name="voce[testo]"] { min-height: 260px; font-family: Arial, Helvetica, sans-serif; line-height: 1.4; }
.tabelle-base .formbar { flex-wrap: wrap; }
.tabelle-base .formbar span.l { flex: 1 1 100%; min-width: 0; }

/* ===================== 5m: Controllo fatturato semplice (mockup «Controllo fatturato semplice») ===================== */
.controllo-fatturato-pagina { --viola: var(--violet); --viola-l: var(--violet-soft); }
/* menu «Scarica il report ▾» e «Altro ▾» */
.menu-azioni { position: relative; }
.menu-azioni > summary { list-style: none; }
.menu-azioni > summary::-webkit-details-marker { display: none; }
.menu-azioni-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 260px; display: grid; padding: 6px; background: var(--carta); border: 1px solid var(--linea); border-radius: 10px; box-shadow: 0 10px 30px rgba(22,26,51,.15); }
.menu-azioni-lista > a, .menu-azioni-lista button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; }
.menu-azioni-lista > a:hover, .menu-azioni-lista button:hover { background: #F4F7FA; }
.menu-azioni-lista svg { width: 16px; height: 16px; flex: none; }
.menu-azioni-lista form { margin: 0; }
.menu-azioni-lista .lavorando { padding: 2px 12px 6px; }
.menu-azioni-nota { padding: 8px 12px 4px; border-top: 1px solid var(--linea2); margin-top: 4px; font-size: 12.5px; color: var(--ink2); white-space: normal; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* pagina del mese */
.mese-controllo { display: grid; gap: 0; }
.mese-controllo .avviso-riga { margin-bottom: 10px; }
.mese-controllo .avviso-riga > div { min-width: 0; }
.riepilogo-mese { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; }
.frasi-mese { padding: 22px 26px; }
.frasi-mese p { margin: 0 0 10px; font-size: 18px; line-height: 1.5; }
.frasi-mese p:last-child { margin: 0; }
.avanzamento-mese { padding: 22px 26px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.avanzamento-mese .etichetta-forte { font-weight: 600; }
.avanzamento-mese .grande { font-family: var(--cond); font-size: 44px; line-height: 1; font-weight: 700; }
.avanzamento-mese .grande small { font-size: 22px; color: var(--ink2); font-weight: 600; }
.barra-tre { height: 12px; border-radius: 8px; background: var(--linea2); overflow: hidden; display: flex; }
.barra-tre i { display: block; height: 100%; }
.barra-tre .v, .legenda-barra i.v { background: #58B07D; }
.barra-tre .a, .legenda-barra i.a { background: #E3B04A; }
.legenda-barra { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink2); }
.legenda-barra i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.legenda-barra i.g { background: var(--linea2); border: 1px solid var(--linea); }
.soldi-mese { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.soldi-mese .soldo { padding: 18px 22px; display: flex; gap: 16px; align-items: center; }
/* 5n: icona tonda colorata al posto del bordo sinistro (mockup v5) */
.soldi-mese .soldo::before { content: ""; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23B91C1C' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20z'/%3E%3Cpath d='M12 10v4M12 17.5v.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center; }
.soldi-mese .soldo.p::before { background: var(--violet-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17h2l1-5h9l3 5h3'/%3E%3Ccircle cx='7.5' cy='17.5' r='1.6'/%3E%3Ccircle cx='17.5' cy='17.5' r='1.6'/%3E%3C/svg%3E") no-repeat center; }
.soldi-mese .soldo > div { min-width: 0; }
.soldi-mese .n { font-family: var(--cond); font-size: 30px; font-weight: 700; line-height: 1.05; }
.soldi-mese .soldo.r .n { color: var(--rosso); }
.soldi-mese .soldo.p .n { color: var(--viola); }
.soldi-mese .t { font-weight: 600; }
.soldi-mese .s { font-size: 13.5px; color: var(--ink2); }
.soldi-mese .soldo .btn { margin-left: auto; flex: none; }
.sez-mese { font-family: var(--cond); font-size: 21px; margin: 30px 0 12px; }
.sez-mese small { font-family: var(--font); font-weight: 500; font-size: 14px; color: var(--ink2); margin-left: 8px; }
.passi-mese { display: grid; gap: 12px; }
.passo-mese { display: grid; grid-template-columns: 54px minmax(0, 1fr) 170px 200px; gap: 18px; align-items: center; padding: 18px 22px; background: var(--carta); border: 1px solid var(--linea); border-radius: 12px; }
.passo-mese .num { width: 44px; height: 44px; border-radius: 50%; background: var(--ciano-l); color: var(--ciano-testo); display: grid; place-items: center; font-family: var(--cond); font-weight: 700; font-size: 22px; }
.passo-mese.primo { border: 2px solid var(--blu); box-shadow: 0 4px 18px var(--primary)1A; }
.passo-mese.primo .num { background: var(--blu); color: #fff; }
.passo-mese.fatto .num { background: var(--verde-l); color: var(--verde); }
.passo-mese h3 { margin: 0; font-size: 18px; }
.passo-mese .cosa p { margin: 3px 0 0; color: var(--ink2); font-size: 14.5px; }
.passo-mese .quanti { text-align: right; }
.passo-mese .quanti b { font-family: var(--cond); font-size: 28px; display: block; line-height: 1; }
.passo-mese .quanti span { font-size: 13px; color: var(--ink2); }
.passo-mese .quanti .niente { font-size: 14px; color: var(--verde); font-weight: 600; }
.passo-mese .prog-passo { display: grid; gap: 6px; }
.passo-mese .prog-passo .btn { justify-content: center; }
.barra-passo { display: block; height: 8px; border-radius: 8px; background: var(--linea2); overflow: hidden; }
.barra-passo i { display: block; height: 100%; background: #58B07D; }
.barra-passo.larga { width: 220px; height: 10px; }
.tag-passo { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 20px; padding: 1px 9px; margin-left: 6px; vertical-align: 2px; white-space: nowrap; }
.tag-passo.r { background: var(--rosso-l); color: var(--rosso); }
.tag-passo.g { background: var(--linea2); color: var(--ink2); }
.consulta-mese { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.consulta-mese a { display: flex; justify-content: space-between; gap: 10px; align-items: center; background: var(--carta); border: 1px solid var(--linea); border-radius: 10px; padding: 12px 16px; text-decoration: none; color: var(--ink); }
.consulta-mese a:hover { border-color: var(--ciano); }
.consulta-mese a > div { min-width: 0; }
.consulta-mese a span { font-size: 13px; color: var(--ink2); display: block; }
.consulta-mese a b.n { font-family: var(--cond); font-size: 20px; }
.camion-mese { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.sotto-titolo-elenco { margin: 0 0 12px; }

/* un passo alla volta */
.testa-passo { display: flex; align-items: center; gap: 14px; }
.conta-passo { font-weight: 600; white-space: nowrap; }
.lav-passo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
[data-scheda-aperta].in-arrivo { opacity: .55; transition: opacity .15s; }
.scheda-passo { padding: 0; overflow: hidden; }
.scheda-passo:focus { outline: none; }
.scheda-passo .chi { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 18px 24px; border-bottom: 1px solid var(--linea2); background: #FAFCFD; }
.scheda-passo .chi .data { font-family: var(--cond); font-size: 22px; font-weight: 700; }
.scheda-passo .chi .valore { margin-left: auto; }
.scheda-passo .chi .valore b { color: var(--ink); }
.due-colonne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.due-colonne > div { padding: 20px 24px; min-width: 0; }
.due-colonne > div + div { border-left: 1px solid var(--linea2); }
.due-colonne.una { grid-template-columns: minmax(0, 1fr); }
.etichetta-sez { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); margin-bottom: 10px; }
.pezzo-grande { font-size: 21px; font-weight: 700; line-height: 1.3; background: var(--ambra-l); border-radius: 8px; padding: 10px 14px; display: inline-block; overflow-wrap: break-word; max-width: 100%; }
.scheda-passo .intera { margin-top: 12px; color: var(--ink2); font-size: 14px; overflow-wrap: break-word; }
.scheda-passo .intera b { color: var(--ink); }
.bolla-passo { border: 1px solid var(--linea); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; }
.bolla-passo .riga1 { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.bolla-passo .eur { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bolla-passo .perc { font-size: 14px; color: var(--ink2); margin-top: 3px; overflow-wrap: break-word; }
.bolla-passo .perc b { color: var(--ink); }
.bolla-passo.gia { background: var(--surface-2); color: var(--ink2); }
.bolla-passo .nota-bolla { font-size: 13px; margin-top: 4px; }
.bolla-passo.prop { border: 2px solid var(--blu); background: #F4F8FC; }
.vuoto-bolla { border: 1.5px dashed var(--linea); border-radius: 10px; padding: 16px; color: var(--ink2); text-align: center; }
.scheda-passo .stima { margin-top: 8px; }
.perche-passo { margin: 0; padding: 14px 24px; background: var(--ciano-l); color: #0B4F5E; font-size: 15.5px; border-top: 1px solid #CFE9F0; }
.giorni-gruppo { padding: 10px 24px 0; }
.dettagli-passo { padding: 6px 24px 0; font-size: 13.5px; color: var(--ink2); }
.dettagli-passo summary { cursor: pointer; width: max-content; }
.dettagli-passo ul { margin: 6px 0; padding-left: 18px; }
.dettagli-passo .punti { display: inline-block; min-width: 34px; font-weight: 700; color: var(--verde); }
.dettagli-passo .punti.meno { color: var(--rosso); }
.domanda-passo { padding: 22px 24px 24px; border-top: 1px solid var(--linea2); }
.domanda-passo h3 { margin: 0 0 14px; font-size: 20px; font-family: var(--cond); }
.scelte-passo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.scelte-passo.quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scelte-passo.una { grid-template-columns: minmax(0, 420px); }
.scelta-grande { display: block; border: 1.5px solid var(--line-2); background: #fff; border-radius: 16px; padding: 14px 16px; text-align: left; cursor: pointer; color: var(--ink); text-decoration: none; font: inherit; transition: background .15s, transform .1s; }
.scelta-grande b { display: block; font-size: 16px; font-weight: 600; }
.scelta-grande span { font-size: 13px; color: var(--ink-3); }
.scelta-grande.si { border-color: #86CFA6; }
.scelta-grande.si b { color: var(--green); }
.scelta-grande.si:hover { background: var(--green-soft); }
.scelta-grande.no { border-color: #F0A99A; }
.scelta-grande.no b { color: var(--red); }
.scelta-grande.no:hover { background: var(--red-soft); }
.scelta-grande:hover { background: var(--surface-2); }
.scelta-grande:active { transform: scale(.98); }
.scelta-grande[disabled] { opacity: .5; cursor: default; transform: none; box-shadow: none; }
.btn.lnk { border: 0; background: none; color: var(--blu); padding: 4px 6px; font-weight: 600; }
.altra-bolla { margin-top: 8px; }
.sotto-risposte { display: flex; gap: 12px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.sotto-risposte .inp { flex: 1; min-width: 220px; }
.scheda-passo .pannello-scelte { margin: 0 24px 22px; }
.scheda-passo .pannello-scelte .scelta { text-align: left; }
.passo-finito { padding: 34px 28px; text-align: center; }
.passo-finito .spunta { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; background: var(--verde-l); color: var(--verde); display: grid; place-items: center; font-size: 28px; font-weight: 700; }
.passo-finito h2 { margin: 0 0 6px; font-family: var(--cond); font-size: 24px; }
.azioni-finito { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.lista-passo { position: sticky; top: 16px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; }
.lista-testa { padding: 12px 16px; border-bottom: 1px solid var(--linea2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lista-testa b { font-family: var(--cond); font-size: 17px; }
.lista-testa .inp-mini { margin-left: auto; min-height: 32px; padding: 3px 8px; font-size: 13.5px; width: auto; }
.lista-filtri { display: flex; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--linea2); }
.lista-filtri .inp { min-height: 34px; padding: 5px 9px; font-size: 14px; flex: 1; min-width: 0; }
.elenco-passo { list-style: none; margin: 0; padding: 6px; overflow: auto; }
.elenco-passo li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.elenco-passo li:hover { background: #F4F7FA; }
.elenco-passo li.on { background: #EAF2FA; outline: 1.5px solid #B9D0E6; }
.elenco-passo li.fatto { color: #97A4B0; }
.elenco-passo li.fatto .targa { opacity: .55; }
.elenco-passo li.saltato .g-data::after { content: ' ·'; color: var(--ambra); }
.elenco-passo li[hidden] { display: none; }
.elenco-passo .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elenco-passo .t .targa { font-size: 12px; vertical-align: 1px; }
.elenco-passo .t .targa span { padding: 2px 5px 1px; }
.elenco-passo .e { font-variant-numeric: tabular-nums; color: var(--ink2); font-size: 13px; white-space: nowrap; }
.elenco-passo .ok { color: var(--verde); font-weight: 700; }
@media (max-width: 1100px) {
	.riepilogo-mese { grid-template-columns: minmax(0, 1fr); }
	.passo-mese { grid-template-columns: 44px minmax(0, 1fr); }
	.passo-mese .quanti { text-align: left; }
	.passo-mese .prog-passo { grid-column: 1 / -1; }
	.lav-passo { grid-template-columns: minmax(0, 1fr); }
	.lista-passo { position: static; max-height: 460px; }
	.consulta-mese { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.scelte-passo.quattro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.soldi-mese { grid-template-columns: minmax(0, 1fr); }
	.soldi-mese .soldo { flex-wrap: wrap; }
	.soldi-mese .soldo .btn { margin-left: 0; }
	.due-colonne { grid-template-columns: minmax(0, 1fr); }
	.due-colonne > div + div { border-left: 0; border-top: 1px solid var(--linea2); }
	.scelte-passo, .scelte-passo.quattro { grid-template-columns: minmax(0, 1fr); }
	.consulta-mese { grid-template-columns: minmax(0, 1fr); }
	.frasi-mese p { font-size: 16.5px; }
	.avanzamento-mese .grande { font-size: 36px; }
	.testa-passo { width: 100%; }
	.barra-passo.larga { flex: 1; width: auto; }
	.scheda-passo .chi .valore { margin-left: 0; }
	.menu-azioni-lista { right: auto; left: 0; }
	.sez-mese small { display: block; margin: 2px 0 0; }
}
.elenco-passo .g-data { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink2); font-size: 13px; }
@media (min-width: 761px) and (max-width: 1100px) {
	/* 5m: a 1000 px l'elenco dei mesi e gli elenchi dei viaggi stanno nel riquadro (prima scorrevano di 60–160 px) */
	.tabella-controlli th:nth-child(2), .tabella-controlli td.cf-file { display: none; }
	.tabella-controlli .cf-lavori { min-width: 120px; }
	.tabella-controlli th, .tabella-controlli td { padding-left: 7px; padding-right: 7px; }
	.controllo-fatturato-pagina .tabella-lavori .cella-lavoro { min-width: 150px; }
	.controllo-fatturato-pagina .tabella-lavori .cella-bolla { min-width: 120px; }
	.controllo-fatturato-pagina .tabella-lavori .cella-esito { min-width: 110px; }
	.controllo-fatturato-pagina .tabella-lavori th, .controllo-fatturato-pagina .tabella-lavori td { padding-left: 7px; padding-right: 7px; }
	/* le parole lunghe vanno a capo solo dopo «/» e «.» (<wbr> nel template), mai fra due lettere */
	.controllo-fatturato-pagina .t .cella-lavoro, .controllo-fatturato-pagina .t .cella-lavoro .testo-lavoro { overflow-wrap: normal; word-break: normal; }
	.tabella-controlli td[data-l="Forse non pagati"] .muted { display: none; }
}
@media (max-width: 1100px) {
	/* 5m: sotto 1100 px un passo è: numero + titolo, poi «206 da controllare» e la barra con il pulsante su una riga */
	.passo-mese .quanti { grid-column: 1 / -1; display: flex; gap: 6px; align-items: baseline; text-align: left; }
	.passo-mese .quanti b { display: inline; font-size: 24px; }
	.passo-mese .prog-passo { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
	.passo-mese .prog-passo .btn { min-width: 110px; }
}

/* 5n: editor delle note (Trix di EasyAdmin) con il raggio dei campi grandi, non a pillola */
.content trix-editor.form-control, .content trix-editor { border-radius: 16px; min-height: 100px; }
.content trix-toolbar .trix-button-group { border-radius: 12px; overflow: hidden; }
.seg-tabelle { border-radius: 20px; }
/* 5n: pulsante «Scegli file» dei campi file come un pulsante a pillola */
.content input[type=file]::file-selector-button { margin-right: 10px; padding: 6px 14px; border: 1.5px solid var(--line-2); border-radius: var(--pill); background: #fff; color: var(--ink); font: 600 13px var(--body); cursor: pointer; }
.content input[type=file]::file-selector-button:hover { background: var(--surface-2); }

/* 5n: fino a 1500 px (MacBook) un po' più di spazio per le tabelle: menu e margini più stretti, targhe e pillole delle tabelle più
   compatte (senza pallino), intestazioni senza spaziatura fra le lettere. Nessuna tabella scorre a 1280 px (regola della 5j). */
@media (max-width: 1500px) {
	:root { --side-w: 236px; }
	.app { gap: 12px; padding: 12px; }
	.side { top: 12px; height: calc(100vh - 24px); }
	.t th { letter-spacing: .02em; }
	.t .targa { font-size: 13px; letter-spacing: .05em; }
	.t .targa span { padding: 4px 6px 3px; }
	.t .pill::before { display: none; }
	.t .pill { padding: 2px 8px; }
	.t .btn.sm { padding: 0 11px; }
	.t-disponibilita th { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
	.t-disponibilita .plate { width: 104px; padding-left: 14px; padding-right: 12px; font-size: 13px; }
	/* 5n-bis: il nome dell'autista intero («KACBUFI DASHAMIR»); le note si stringono per fargli posto */
	.t-disponibilita .con-avatar .autista { width: 212px; }
	.t-disponibilita select.autista { padding-left: 10px; padding-right: 22px; background-position: right 7px center; }
	.t-disponibilita .stato { width: 104px; }
	.t-disponibilita .cant { width: 96px; }
	.t-disponibilita .col-note { min-width: 64px; }
	.t-disponibilita th.col-note { white-space: normal; }
	.t-disponibilita td:last-child, .t-disponibilita th:last-child { padding-right: 8px; }
}
@media (max-width: 1400px) {
	.t-disponibilita .con-avatar .avatar { display: none; }
}
@media (min-width: 1401px) and (max-width: 1500px) {
	.t-disponibilita .con-avatar .autista { width: 232px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
	:root { --side-w: 220px; }
}
/* 5n: griglia dei permessi: le intestazioni (nomi delle sezioni) restano parole intere, in minuscolo come prima */
.perm th { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
@media (min-width: 1101px) and (max-width: 1500px) {
	.grid.g-side.tabelle-base { grid-template-columns: minmax(0, 1fr) 310px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
	.t th, .t td { padding-left: 7px; padding-right: 7px; }
}

/* ===================== 5n-bis: «Chiedi al gestionale» (anteprima, mockup v5) ===================== */
/* riquadro in fondo al menu: tondo sfumato con la stellina e la frase d'esempio */
.side-fondo { margin-top: auto; padding-top: 14px; }
.assist {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 16px;
	background: rgba(255, 255, 255, .09);
	color: #fff;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background .15s;
}
.assist:hover { background: rgba(255, 255, 255, .15); }
.assist-testo b { display: block; font-size: 13.5px; }
.assist-testo span { display: block; color: #C8CBF2; font-size: 12px; }
.assist-tondo {
	display: grid;
	flex: none;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: conic-gradient(from 200deg, #4338CA, #7C3AED, #22D3EE, #4338CA);
}
.assist-tondo svg { width: 15px; height: 15px; color: #fff; }

/* pannello a destra */
.ombra-assistente { position: fixed; inset: 0; z-index: 60; background: rgba(22, 26, 51, .25); backdrop-filter: blur(2px); }
.ombra-assistente[hidden] { display: none; }
.pann {
	position: fixed;
	top: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 61;
	display: flex;
	flex-direction: column;
	width: 420px;
	max-width: calc(100vw - 32px);
	border: 1px solid var(--line);
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--sh-up);
	transform: translateX(calc(100% + 32px));
	visibility: hidden;
	transition: transform .25s cubic-bezier(.2, 0, 0, 1), visibility 0s .25s;
}
.pann.on { transform: none; visibility: visible; transition: transform .25s cubic-bezier(.2, 0, 0, 1); }
.pann header { display: flex; align-items: flex-start; gap: 10px; padding: 16px 14px 14px 18px; border-bottom: 1px solid var(--line); }
.pann-titolo { flex: 1; min-width: 0; }
.pann-titolo b { display: block; font-family: var(--head); font-size: 17px; font-weight: 600; line-height: 1.2; }
.pann-titolo .etichetta-anteprima { margin-top: 4px; }
.pann-titolo small { display: block; margin-top: 4px; color: var(--ink-3); font-size: 12px; }
.pann .chiudi-pann { width: 36px; min-height: 36px; padding: 0; }
.pann-corpo { display: flex; flex: 1; flex-direction: column; gap: 12px; min-height: 0; overflow: auto; padding: 16px 18px; }
.sugg-blocco { display: grid; gap: 6px; }
.sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.sugg button {
	padding: 5px 11px;
	border: 1.5px solid #D8D2FA;
	border-radius: 16px;
	background: #fff;
	color: var(--violet);
	font: 600 12.5px var(--body);
	text-align: left;
	cursor: pointer;
}
.sugg button:hover { background: var(--violet-soft); }
.msg { max-width: 92%; padding: 10px 13px; border-radius: 16px; font-size: 14px; line-height: 1.45; overflow-wrap: break-word; }
.msg.io { align-self: flex-end; border-bottom-right-radius: 5px; background: var(--primary-soft); color: #2E2A7A; }
.msg.bot { align-self: flex-start; width: 92%; border: 1px solid #E4E0FB; border-bottom-left-radius: 5px; background: linear-gradient(135deg, #F5F3FF, #F0F6FF); color: var(--ink); }
.msg.attesa { width: auto; color: var(--ink-3); font-style: italic; }
.msg .frase { margin: 0 0 6px; }
.msg .lista li { flex-wrap: wrap; gap: 6px 8px; padding: 7px 0; border-bottom-color: #E4E0FB; }
.msg .lista li > .testo { flex: 1 1 150px; min-width: 150px; }
.msg .lista .testo b { overflow-wrap: break-word; }
.msg .lista .pill { white-space: nowrap; }
.msg .btn { margin-top: 8px; }
.msg .sugg { margin-top: 8px; }
.altri-assistente { margin-top: 4px; }
.pann-piede { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--line); }
.pann-piede .inp { flex: 1; min-width: 0; }
.pann-piede .btn { width: 42px; padding: 0; }
@media (max-width: 640px) {
	.pann { top: 8px; right: 8px; bottom: 8px; max-width: calc(100vw - 16px); }
}
@media (max-height: 700px) {
	.assist-testo span { display: none; }
}

/* 5o: passo 2 filtrato su un camion: «Conferma le N proposte di {targa}» sopra la scheda, e «Annulla» per 10 secondi */
.conferma-camion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; padding: 14px 18px; }
.conferma-camion[hidden] { display: none; }
.conferma-camion .btn { margin-left: auto; }
.conferma-camion-fatta { align-items: center; }
.conferma-camion-fatta form { margin: 0 0 0 auto; }

/* ==========================================================================================================================
   5p-1: ricerca generale, chat dell'ufficio, barra in alto (da destra: utente, posto della campanella, chat, ricerca)
   ========================================================================================================================== */
.top-strumenti { display: flex; align-items: center; gap: 10px; margin-left: auto; min-width: 0; }
.top .acts + .top-strumenti { margin-left: 0; }
.posto-campanella[hidden] { display: none; }

/* bottone tondo con icona (chat, campanella, ricerca al telefono, «+» della chat) */
.btn-tondo {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--surface);
	box-shadow: var(--sh);
	color: var(--ink-2);
	cursor: pointer;
}
.btn-tondo:hover { border-color: var(--line-2); color: var(--ink); }
.btn-tondo:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-tondo svg { width: 20px; height: 20px; }
.btn-tondo.sm { width: 38px; height: 38px; box-shadow: none; }
.btn-tondo.sm svg { width: 18px; height: 18px; }
.pallino-chat { position: absolute; top: 8px; right: 9px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: var(--violet); }
.pallino-chat[hidden] { display: none; }

/* campo della ricerca nella barra */
.ricerca-g { position: relative; min-width: 0; }
.ricerca-g .apri-ricerca { display: none; }
.ricerca-g .search {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	width: 300px;
	min-width: 0;
	height: 42px;
	padding: 0 8px 0 14px;
	border: 1px solid var(--line);
	border-radius: var(--pill);
	background: var(--surface);
	box-shadow: var(--sh);
	color: var(--ink-3);
}
.ricerca-g .search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.ricerca-g .search svg { position: static; flex: none; width: 18px; height: 18px; }
.ricerca-g .search input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--ink);
	font: 14px var(--body);
}
.ricerca-g .search input::-webkit-search-cancel-button { display: none; }
.kbd { flex: none; padding: 1px 6px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-3); font-size: 11px; font-weight: 600; white-space: nowrap; }

.ricerca-pannello {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 70;
	width: min(560px, calc(100vw - 32px));
	max-height: min(70vh, 640px);
	overflow: auto;
	padding: 8px;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--sh-up);
}
.ricerca-pannello[hidden] { display: none; }
.ricerca-gruppo + .ricerca-gruppo { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.ricerca-gruppo-t { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px 4px; }
.ricerca-gruppo-t b { color: var(--ink-3); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ricerca-gruppo-t a { margin-left: auto; color: var(--primary); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.ricerca-gruppo-t a:hover { text-decoration: underline; }
.ricerca-voce {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 12px;
	color: var(--ink);
	text-decoration: none;
}
.ricerca-voce.on, .ricerca-voce:hover { background: var(--surface-2); }
.ricerca-testo { flex: 1; min-width: 0; }
.ricerca-testo > b, .ricerca-testo > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ricerca-testo > b { font-size: 14px; font-weight: 600; }
.ricerca-testo > span { color: var(--ink-3); font-size: 12.5px; }
.ricerca-testo > b .targa { vertical-align: middle; }
.ricerca-voce .pill { flex: none; }
.ricerca-voce mark, .ricerca-t mark { padding: 0 1px; border-radius: 3px; background: #FDE68A; color: inherit; }
.ricerca-tutti { display: block; margin-top: 6px; padding: 10px; border-top: 1px solid var(--line); color: var(--primary); font-size: 13.5px; font-weight: 600; text-align: center; text-decoration: none; border-radius: 0 0 12px 12px; }
.ricerca-tutti.on, .ricerca-tutti:hover { background: var(--primary-soft); }
.ricerca-vuota { margin: 0; padding: 14px 10px; color: var(--ink-3); font-size: 13.5px; }

/* pagina «Tutti i risultati» */
.ricerca-tutti-form .fld { flex: 1 1 320px; max-width: 560px; }
.ricerca-tutti-form .btn { align-self: end; }
.seg-ricerca { flex-wrap: wrap; margin-bottom: 16px; }
.seg-ricerca .faint { margin-left: 4px; font-weight: 500; }
.ricerca-tutti-gruppi { display: grid; gap: 16px; }
.ricerca-t td { vertical-align: middle; }
.ricerca-link { color: var(--ink); text-decoration: none; }
.ricerca-link:hover b { color: var(--primary); text-decoration: underline; }

/* pannello della chat (560 px; al telefono tutta la larghezza) */
.pann-chat { width: 560px; }
.pann-chat header { align-items: center; }
.icona-chat { width: 22px; height: 22px; flex: none; color: var(--violet); }
.chat-sola-lettura { padding: 8px 18px; border-bottom: 1px solid var(--line); background: var(--amber-soft); color: #7A4B00; font-size: 12.5px; }
.chat-g { display: grid; grid-template-columns: 200px minmax(0, 1fr); flex: 1; min-height: 0; }
.chat-l { overflow: auto; padding: 10px; border-right: 1px solid var(--line); }
.chat-sez { margin: 8px 8px 4px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.persone { display: flex; flex-direction: column; gap: 2px; }
.persone button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--ink);
	text-align: left;
	cursor: pointer;
}
.persone button:hover, .persone button.on { background: var(--surface-2); }
.persone button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.persone .avatar { position: relative; }
.persone .avatar-gruppo { background: var(--violet-soft); color: #6D28D9; }
.persone .avatar i { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #B8BDCD; }
.persone .avatar i.online { background: #22C55E; }
.persone .avatar i.via { background: #F59E0B; }
.voce-testo { flex: 1; min-width: 0; }
.voce-testo b, .voce-testo span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voce-testo b { font-size: 13.5px; line-height: 1.2; }
.voce-testo span { color: var(--ink-3); font-size: 12px; }
.persone .nl { flex: none; padding: 0 7px; border-radius: var(--pill); background: var(--violet); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; }

.chat-c { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-testa { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.chat-testa[hidden] { display: none; }
.chat-testa b { display: block; font-size: 14.5px; }
.chat-testa .xs { display: block; }
.chat-indietro { display: none; }
.chat-msgs { display: flex; flex: 1; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; padding: 16px 18px; }
.chat-vuota { margin: auto; text-align: center; }
.chat-nuovi { display: flex; align-items: center; gap: 10px; color: var(--red); font-size: 11.5px; font-weight: 700; }
.chat-nuovi::before, .chat-nuovi::after { content: ''; flex: 1; height: 1px; background: #F4B4AC; }
.chat-inizio { align-self: center; padding: 4px 0 2px; color: var(--ink-3); font-size: 11.5px; }
.chat-carico { align-self: center; }
.chat-giorno { align-self: center; padding: 2px 10px; border-radius: var(--pill); background: var(--surface-2); color: var(--ink-3); font-size: 11.5px; font-weight: 600; }
.msg.lui { align-self: flex-start; border-bottom-left-radius: 5px; background: #F4F5F9; color: var(--ink); }
.msg .chi { margin-bottom: 2px; color: var(--ink-3); font-size: 11.5px; font-weight: 600; }
.msg.io .chi { color: #5B57A8; }
.testo-msg { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.cancellato .testo-msg { color: var(--ink-3); font-style: italic; }
.msg-piede { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 8px; margin-top: 3px; color: var(--ink-3); font-size: 11px; }
.msg.io .msg-piede { color: #5B57A8; }
.msg-azioni { display: inline-flex; gap: 8px; }
.msg-azioni button { padding: 0; border: 0; background: none; color: var(--primary); font: 600 11.5px var(--body); text-decoration: underline; cursor: pointer; }
.rif {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	margin: 6px 6px 0 0;
	padding: 4px 8px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	color: var(--ink);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	vertical-align: middle;
}
a.rif { color: var(--primary); }
a.rif:hover { border-color: var(--primary); }
.rif > span:not(.targa) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-errore { align-self: center; margin: 0; padding: 6px 12px; border-radius: 10px; background: var(--red-soft); color: var(--red); font-size: 12.5px; }

.chat-allegati { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 14px 0; border-top: 1px solid var(--line); }
.chat-allegati[hidden] { display: none; }
.allegato button { padding: 0 2px; border: 0; background: none; color: var(--ink-3); font-size: 16px; line-height: 1; cursor: pointer; }
.chat-cerca { padding: 8px 14px 0; border-top: 1px solid var(--line); }
.chat-cerca[hidden] { display: none; }
.chat-cerca .inp { width: 100%; }
.chat-cerca-ris { max-height: 210px; overflow: auto; margin-top: 4px; }
.chat-cerca-voce { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.chat-cerca-voce:hover, .chat-cerca-voce:focus-visible { background: var(--surface-2); }
.chat-cerca-voce b { flex: none; max-width: 55%; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.chat-cerca-voce span:not(.targa):last-child { min-width: 0; overflow: hidden; color: var(--ink-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.chat-nota-modifica { display: flex; align-items: center; gap: 8px; padding: 6px 14px 0; border-top: 1px solid var(--line); color: var(--primary); font-size: 12.5px; font-weight: 600; }
.chat-nota-modifica .btn { margin-left: auto; }
.chat-piede { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.chat-nota-modifica + .chat-piede, .chat-allegati:not([hidden]) + .chat-cerca[hidden] + .chat-piede { border-top: 0; }
.chat-piede[hidden] { display: none; }
.chat-piede textarea { flex: 1; min-width: 0; min-height: 42px; max-height: 140px; padding: 10px 14px; border-radius: 21px; line-height: 1.4; resize: none; }
.chat-piede .btn { width: 42px; padding: 0; }

/* «Le mie notifiche» e gruppi della chat */
.form-mie-notifiche, .gruppi-chat { max-width: 760px; }
.riga-interruttore { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.riga-interruttore input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--primary); }
.gruppo-chat-voce { padding: 10px 0; border-top: 1px solid var(--line); }
.gruppo-chat-voce > summary { cursor: pointer; }
.gruppo-chat-voce .box { margin-top: 10px; box-shadow: none; }
.persone-gruppo { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; margin: 12px 0 0; padding: 0; border: 0; }
.persone-gruppo legend { margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.casella-persona { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.casella-persona input { accent-color: var(--primary); }
.h-sezione { margin: 22px 0 10px; font-family: var(--head); font-size: 17px; font-weight: 600; }

@media (max-width: 2000px) {
	.ricerca-g .search { width: 250px; }
}

@media (max-width: 1100px) {
	.ricerca-g .search { width: 200px; }
	.ricerca-g .kbd { display: none; }
}

/* telefono e finestre strette: la ricerca è un'icona che apre un campo a tutta larghezza */
@media (max-width: 760px) {
	.ricerca-g { position: static; }
	.ricerca-g .apri-ricerca { display: grid; }
	.ricerca-g .search { display: none; }
	body.ricerca-aperta .ricerca-g .search {
		position: fixed;
		top: 10px;
		right: 10px;
		left: 10px;
		z-index: 71;
		display: flex;
		width: auto;
	}
	.ricerca-pannello { position: fixed; top: 60px; right: 10px; left: 10px; width: auto; max-height: calc(100vh - 80px); }
	.top-strumenti { gap: 8px; }
	.btn-tondo { width: 40px; height: 40px; }
}

@media (max-width: 640px) {
	.pann-chat { top: 0; right: 0; bottom: 0; width: 100vw; max-width: 100vw; border-radius: 0; }
	.chat-g { grid-template-columns: minmax(0, 1fr); }
	.chat-g .chat-c { display: none; }
	.chat-g.in-conversazione .chat-l { display: none; }
	.chat-g.in-conversazione .chat-c { display: flex; }
	.chat-indietro { display: inline-flex; }
	.chat-l { border-right: 0; }
}

/* 5p-1: barra in alto a griglia (da 761 px): titolo e strumenti (ricerca, chat, utente) sulla prima riga, i pulsanti della pagina
   sotto a destra; tutto su una riga se il titolo ci sta (.una-riga). Al telefono resta la barra di prima (flex, pulsanti sotto). */
@media (min-width: 761px) {
	.top {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "menu titolo strumenti" "acts acts acts";
		align-items: center;
		column-gap: 0;
		row-gap: 0;
	}
	.top .apri-menu { grid-area: menu; margin-right: 12px; }
	.top-titolo { grid-area: titolo; min-width: 0; }
	.top .acts { grid-area: acts; margin-left: 0; }
	.top .acts:has(*) { margin-top: 12px; }
	.top-strumenti { grid-area: strumenti; margin-left: 16px; }
}
/* una riga sola quando il titolo ci sta intero (gestionale.js prova e mette .una-riga, la toglie se il titolo verrebbe troncato) */
@media (min-width: 761px) {
	.top.una-riga {
		grid-template-columns: auto minmax(0, 1fr) auto auto;
		grid-template-areas: "menu titolo acts strumenti";
	}
	.top.una-riga .acts:has(*) { margin: 0 0 0 16px; }
}

/* ==========================================================================================================================
   5p-2: campanella delle notifiche e piano ferie (mockup Piano ferie: struttura; stile v5)
   ========================================================================================================================== */

/* campanella: bottone tondo con il numero dei non letti, pannello a tendina con le più recenti */
.campanella { position: relative; flex: none; }
.numero-campanella {
	position: absolute;
	top: 3px;
	right: 1px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border: 2px solid #fff;
	border-radius: var(--pill);
	background: var(--red);
	color: #fff;
	font: 700 10.5px/15px var(--body);
	text-align: center;
}
.numero-campanella[hidden] { display: none; }
.campanella-pannello {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 70;
	display: flex;
	flex-direction: column;
	width: min(400px, calc(100vw - 24px));
	max-height: min(70vh, 560px);
	border: 1px solid var(--line);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--sh-up);
}
.campanella-pannello[hidden] { display: none; }
.campanella-testa { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px 18px; border-bottom: 1px solid var(--line); }
.campanella-testa b { flex: 1; font-family: var(--head); font-size: 16px; font-weight: 600; }
.campanella-elenco { flex: 1; min-height: 0; overflow: auto; padding: 6px; }
.campanella-vuota { margin: 0; padding: 18px 12px; color: var(--ink-3); font-size: 13.5px; text-align: center; }
.campanella-lista { margin: 0; padding: 0; list-style: none; }
.campanella-voce {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 14px;
	color: var(--ink-2);
	text-decoration: none;
}
.campanella-voce:hover, .campanella-voce:focus-visible { background: var(--surface-2); }
.campanella-voce.nuova { color: var(--ink); }
.campanella-voce.nuova .campanella-testo > span { font-weight: 600; }
.campanella-icona { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--ink-3); }
.campanella-voce.nuova .campanella-icona { background: var(--primary-soft); color: var(--primary); }
.campanella-icona svg { width: 16px; height: 16px; }
.campanella-testo { flex: 1; min-width: 0; }
.campanella-testo > span { display: block; font-size: 13.5px; line-height: 1.35; overflow-wrap: break-word; }
.campanella-testo > small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 12px; }
.campanella-punto { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--primary); }
.campanella-tutte { padding: 11px; border-top: 1px solid var(--line); border-radius: 0 0 20px 20px; color: var(--primary); font-size: 13.5px; font-weight: 600; text-align: center; text-decoration: none; }
.campanella-tutte:hover { background: var(--primary-soft); }
.seg-notifiche { margin-bottom: 16px; }
.seg-notifiche .faint { margin-left: 4px; font-weight: 500; }
.elenco-notifiche { max-width: 900px; }
.elenco-notifiche .campanella-lista { padding: 8px; }
.elenco-notifiche .campanella-lista li + li { border-top: 1px solid var(--line); }
.elenco-notifiche .campanella-voce { border-radius: 12px; }
.page-actions form.inline, td form.inline { display: inline; margin: 0; }

/* barra del piano ferie: mese, Mese/Anno, filtri, legenda */
.barra-ferie { margin-bottom: 16px; }
.barra-ferie .box-b { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.mese-nav { display: flex; align-items: center; gap: 8px; }
.mese-nome { min-width: 150px; font-family: var(--head); font-size: 19px; font-weight: 600; text-align: center; }
.filtri-ferie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filtri-ferie .inp { width: auto; height: 40px; }
.filtri-ferie select.inp { min-width: 160px; }
.filtri-ferie .cerca-ferie { width: 200px; }
.legenda-ferie { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-left: auto; color: var(--ink-2); }
.legenda-ferie > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ev-l { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 5px; border-radius: 7px; font: 600 11px var(--head); white-space: nowrap; }
.ev-l.F, .ev.F, .cg.F, .striscia-ferie i.F { background: #DDF3E5; color: #15633A; }
.ev-l.X, .ev.X, .cg.X, .striscia-ferie i.X { background: var(--teal-soft); color: #0F6B66; }
.ev-l.L, .ev.L, .cg.L, .striscia-ferie i.L { background: var(--violet-soft); color: #5B21B6; }
.ev-l.P, .ev.P, .cg.P, .striscia-ferie i.P { background: repeating-linear-gradient(135deg, #DDF3E5 0 4px, #fff 4px 8px); color: #15633A; border: 1.5px dashed #6FBF8A; }
.ev-l.X.P, .ev.X.P, .cg.X.P, .striscia-ferie i.X.P { background: repeating-linear-gradient(135deg, var(--teal-soft) 0 4px, #fff 4px 8px); color: #0F6B66; border-color: #5EC4BC; }
.ev-l.L.P, .ev.L.P, .cg.L.P, .striscia-ferie i.L.P { background: repeating-linear-gradient(135deg, var(--violet-soft) 0 4px, #fff 4px 8px); color: #5B21B6; border-color: #B49CF0; }

/* griglia del mese (righe alte come nel mockup v5) */
.cal-wrap { overflow-x: auto; }
.cal-ferie { width: 100%; min-width: 1000px; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.cal-ferie th, .cal-ferie td { height: 44px; padding: 0; border-bottom: 1px solid #F0F1F6; text-align: center; }
.cal-ferie thead th { height: 46px; color: var(--ink-3); font-size: 11.5px; font-weight: 600; }
.cal-ferie thead th small { display: block; font-weight: 500; }
.cal-ferie thead th.oggi { border-radius: 10px 10px 0 0; background: var(--primary); color: #fff; }
.cal-ferie thead th.oggi small { color: #E0E7FF; }
.cal-ferie .nm {
	position: sticky;
	left: 0;
	z-index: 2;
	min-width: 165px;
	max-width: 220px;
	padding: 0 12px;
	border-right: 1px solid var(--line);
	background: #fff;
	text-align: left;
	font-size: 13.5px;
	font-weight: 600;
}
.cal-ferie th.nm a { color: var(--ink); text-decoration: none; }
.cal-ferie th.nm a:hover { color: var(--primary); text-decoration: underline; }
.cal-ferie th.nm small { display: block; overflow: hidden; color: var(--ink-3); font-size: 11.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.cal-ferie .we { background: #F6F7FB; }
.cal-ferie td.g { position: relative; min-width: 27px; width: 27px; }
.cal-ferie.cliccabile td.g:not(:has(.ev)) { cursor: pointer; }
.cal-ferie.cliccabile td.g:not(:has(.ev)):hover { box-shadow: inset 0 0 0 2px var(--primary-soft); }
.cal-ferie .ev {
	position: absolute;
	inset: 8px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	font: 600 11px var(--head);
	text-decoration: none;
	cursor: pointer;
}
.cal-ferie span.ev { cursor: default; }
.cal-ferie .ev.P { border-width: 1.5px 0; }
.cal-ferie .ev.s { margin-left: 3px; border-top-left-radius: 9px; border-bottom-left-radius: 9px; }
.cal-ferie .ev.P.s { border-left-width: 1.5px; }
.cal-ferie .ev.e { margin-right: 3px; border-top-right-radius: 9px; border-bottom-right-radius: 9px; }
.cal-ferie .ev.P.e { border-right-width: 1.5px; }
.cal-ferie .ev.X { inset: 8px 2px; border-radius: 8px; font-size: 10.5px; }
.cal-ferie .ev:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; z-index: 1; }
.cal-ferie .tot-mese { min-width: 88px; padding: 0 8px; border-left: 1px solid var(--line); color: var(--ink-2); font-size: 12px; text-align: left; white-space: nowrap; }
.cal-ferie tfoot td, .cal-ferie tfoot th { height: 52px; background: var(--surface-2); vertical-align: middle; }
.cal-ferie tfoot th.nm { background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; }
.cal-ferie tfoot .tot-mese { white-space: normal; line-height: 1.25; }
.dotn { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: var(--pill); background: #ECEDF3; color: var(--ink-2); font-size: 11.5px; font-weight: 700; }
.dotn.m { background: var(--amber-soft); color: #92400E; }
.dotn.h { background: var(--red); color: #fff; }
.cal-ferie tfoot .piu, .mese-ferie .piu { display: block; margin-top: 1px; color: #92400E; font-size: 10.5px; font-weight: 600; }

/* vista dell'anno */
.t-anno-ferie th, .t-anno-ferie td { padding-right: 6px; padding-left: 6px; }
.t-anno-ferie td.mese-ferie { min-width: 34px; text-align: center; }
.t-periodi-ferie td.azioni-periodo { min-width: 150px; max-width: 190px; white-space: normal; }
.t-periodi-ferie td.tipo-periodo { min-width: 120px; }
.t-periodi-ferie td.tipo-periodo .ev-l { margin-right: 4px; }
.t-periodi-ferie td.azioni-periodo form, .t-periodi-ferie td.azioni-periodo .btn { margin: 2px 0; }
.t-periodi-ferie th, .t-periodi-ferie td { padding-right: 8px; padding-left: 8px; }
.q-ferie {
	display: inline-grid;
	place-items: center;
	min-width: 26px;
	height: 22px;
	padding: 0 5px;
	border-radius: 7px;
	background: color-mix(in srgb, #8ACB9F calc(var(--q, 1) * 6% + 10%), #fff);
	color: #15633A;
	font: 600 12px var(--head);
}

/* pannello «Nuove ferie / Nuovo permesso» */
.pann-ferie { width: 470px; }
.icona-ferie { width: 22px; height: 22px; flex: none; color: var(--amber); }
.ferie-form { display: flex; flex-direction: column; gap: 14px; }
.ferie-form > * { flex: none; }
.ferie-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ferie-form legend { margin-bottom: 6px; padding: 0; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.ferie-form .seg { flex-wrap: wrap; overflow: visible; border-radius: 18px; }
.ferie-form .seg label { position: relative; }
.ferie-form .seg input { position: absolute; opacity: 0; pointer-events: none; }
.ferie-form .seg span { display: block; padding: 6px 12px; border-radius: var(--pill); color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ferie-form .seg input:checked + span { background: #fff; color: var(--primary); box-shadow: 0 1px 3px rgba(22, 26, 51, .1); }
.ferie-form .seg input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 1px; }
.ferie-form .seg input:disabled + span { cursor: default; opacity: .6; }
.ferie-form [hidden] { display: none !important; }
.dipendente-scelto { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 6px 6px 14px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface-2); }
.dipendente-scelto b { font-size: 14px; }
.dipendente-scelto .btn { margin-left: auto; }
.cerca-dipendente { position: relative; }
.cerca-dipendente .inp { width: 100%; }
.cerca-dipendente-ris { position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 3; max-height: 240px; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--sh-up); }
.cerca-dipendente-voce { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.cerca-dipendente-voce:hover, .cerca-dipendente-voce:focus-visible { background: var(--surface-2); }
.calcolo-ferie { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); font-size: 14px; }
.giorni-ferie { display: flex; flex-wrap: wrap; gap: 4px; }
.giorno-ferie { padding: 2px 7px; border-radius: 7px; background: #DDF3E5; color: #15633A; font-size: 12px; font-weight: 600; white-space: nowrap; }
.giorno-ferie.barrato { background: #fff; color: var(--ink-3); text-decoration: line-through; box-shadow: inset 0 0 0 1px var(--line); }
.avvisi-ferie { display: grid; gap: 8px; }
.avvisi-ferie:empty { display: none; }
.avvisi-ferie .alert { margin: 0; padding: 9px 12px; font-size: 13.5px; }
.errori-ferie { display: grid; margin: 0; }
.info-periodo { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--line); }
.piede-ferie { flex-wrap: wrap; justify-content: flex-end; }
.piede-ferie .spazio { flex: 1; }
.piede-ferie .btn { width: auto; padding: 0 16px; }

/* riquadro «Ferie, permessi e assenze» (scheda e dettaglio del dipendente) */
.riquadro-ferie .box-h { flex-wrap: wrap; row-gap: 10px; }
.riquadro-ferie .azioni-ferie { display: flex; flex-wrap: wrap; gap: 8px; }
.stat-ferie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stat-ferie > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.stat-ferie b { display: block; font-family: var(--head); font-size: 22px; font-weight: 600; line-height: 1.15; }
.stat-ferie b.ambra { color: #B45309; }
.stat-ferie span { color: var(--ink-2); font-size: 12.5px; }
.striscia-ferie { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.striscia-ferie .m { padding: 6px; border: 1px solid var(--line); border-radius: 10px; }
.striscia-ferie .m b { display: block; margin-bottom: 4px; color: var(--ink-3); font-size: 11.5px; font-weight: 600; }
.striscia-ferie .gg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.striscia-ferie i { height: 8px; border-radius: 2px; background: #EEF0F5; }
.striscia-ferie i.P { border: 0; background: repeating-linear-gradient(135deg, #8ACB9F 0 2px, #fff 2px 4px); }
.striscia-ferie i.X.P { background: repeating-linear-gradient(135deg, #5EC4BC 0 2px, #fff 2px 4px); }
.striscia-ferie i.L.P { background: repeating-linear-gradient(135deg, #B49CF0 0 2px, #fff 2px 4px); }
.striscia-ferie i.fe { background: #DCDFE8; }
.ai.ai-ambra { margin-top: 14px; border-color: #F6DFB5; background: var(--amber-soft); color: #7A4A06; align-items: center; flex-wrap: wrap; }
.ai.ai-ambra > svg { color: var(--amber); }
.richiesta-ferie .testo-richiesta { flex: 1 1 240px; }
.richiesta-ferie form { margin: 0; }
.h-ferie { margin: 18px 0 6px; font-family: var(--head); font-size: 15px; font-weight: 600; }
.periodi-ferie li { gap: 10px; }
.periodi-ferie .ev-l { flex: none; }
.sotto-ferie { margin: -4px 0 14px; }
.ambra-testo { color: #92400E; }

/* calendario grande dell'anno (dettaglio) */
.calendario-anno { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px 22px; }
.cal-mese > b { display: block; margin-bottom: 6px; font-family: var(--head); font-size: 15px; font-weight: 600; }
.cal-sett, .cal-giorni { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-sett span { color: var(--ink-3); font-size: 10.5px; font-weight: 600; text-align: center; }
.cal-giorni .cg { display: grid; place-items: center; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 500 12px var(--body); }
.cal-giorni .cg.fe { color: #B91C1C; }
.cal-giorni .cg.F, .cal-giorni .cg.X, .cal-giorni .cg.L { font-weight: 700; }
.cal-giorni .cg.F { background: #DDF3E5; color: #15633A; }
.cal-giorni .cg.X { background: var(--teal-soft); color: #0F6B66; }
.cal-giorni .cg.L { background: var(--violet-soft); color: #5B21B6; }
.cal-giorni .cg.P { background: repeating-linear-gradient(135deg, #DDF3E5 0 4px, #fff 4px 8px); border: 1.5px dashed #6FBF8A; }
.cal-giorni .cg.X.P { background: repeating-linear-gradient(135deg, var(--teal-soft) 0 4px, #fff 4px 8px); border-color: #5EC4BC; }
.cal-giorni .cg.oggi { box-shadow: inset 0 0 0 2px var(--primary); }
.cal-giorni button.cg { cursor: pointer; }
.cal-giorni button.cg:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.t-periodi-ferie tr.scelta td { background: var(--amber-soft); }

@media (max-width: 1500px) {
	.stat-ferie b { font-size: 20px; }
}
@media (max-width: 1100px) {
	.legenda-ferie { margin-left: 0; }
	.stat-ferie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.striscia-ferie { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.campanella-pannello { position: fixed; top: 62px; right: 10px; left: 10px; width: auto; }
	.filtri-ferie, .filtri-ferie .inp, .filtri-ferie .cerca-ferie { width: 100%; }
	.mese-nav { width: 100%; justify-content: space-between; }
	.striscia-ferie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cal-ferie .nm { min-width: 130px; max-width: 150px; padding: 0 8px; font-size: 12.5px; }
	.pann-ferie { width: 100vw; }
}
@media (max-width: 640px) {
	.pann-ferie { top: 0; right: 0; bottom: 0; max-width: 100vw; border-radius: 0; }
	.stat-ferie b { font-size: 18px; }
}

/* ==========================================================================================================================
   5s: richieste dell'ufficio (nuovo cantiere al volo, destinatari della mail, righe a mano trascinabili, messaggi vocali)
   ========================================================================================================================== */
dialog.popup.popup-cantiere { width: min(460px, calc(100vw - 32px)); }
.popup-cantiere fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.popup-cantiere legend { margin-bottom: 6px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.colori { display: flex; flex-wrap: wrap; gap: 8px; }
.colore { position: relative; cursor: pointer; }
.colore > input { position: absolute; opacity: 0; pointer-events: none; }
.colore > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 50%; }
.colore > input:checked + span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary); }
.colore > input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 3px; }
.colore.altro > span { overflow: hidden; background: conic-gradient(#FBE3D7, #DDEBFF, #DFF5E3, #FFF4C2, #EDE3FB, #FBE3D7); }
.colore.altro input[type="color"] { width: 44px; height: 44px; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.anteprima-cantiere .cant-ro { display: inline-block; padding: 2px 10px; border-radius: var(--pill); font-weight: 600; }
.cantiere-esiste { margin: 0; }
.cantiere-esiste .btn { margin-left: 6px; }
/* Pianificazione: il cantiere del riquadro si sceglie dalla tendina (con «modifica») */
.riq .rh select.cant-sel { max-width: 100%; height: 24px; padding: 0 22px 0 6px; border: 1px solid transparent; border-radius: 8px; background-color: rgba(255, 255, 255, .55); color: inherit; font: 600 11.5px var(--body); cursor: pointer; }
.riq .rh select.cant-sel:hover, .riq .rh select.cant-sel:focus { border-color: var(--line-2); }
/* Disponibilità: destinatari della mail a pillole */
.destinatari-pillole { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pillole-dest { display: contents; }
.pill-dest { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 4px 3px 10px; border: 1px solid #DDE0FA; border-radius: var(--pill); background: var(--primary-soft); color: #312E81; font-size: 13px; overflow-wrap: anywhere; }
.pill-dest button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.pill-dest button:hover, .pill-dest button:focus-visible { background: #fff; }
.aggiungi-dest { flex: 1 1 200px; min-width: 160px; height: 34px; }
.dest-errore { margin-top: 4px; color: var(--red); }
.dest-avviso { margin-top: 4px; color: #92400E; }
.ricorda-dest { display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; color: var(--ink-2); }
/* Pianificazione: trascinamento col tocco (tenere premuto) e fuoco da tastiera */
.fantasma-tocco { position: fixed; top: 0; left: 0; z-index: 90; max-width: 320px; opacity: .9; pointer-events: none; box-shadow: var(--sh-up); border-radius: 10px; background: #fff; }
.riq > .tv:focus-visible, .riq > .rg.lib:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.riq > .tv[draggable], .riq > .rg.lib[draggable] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* Chat: messaggi vocali */
.chat-piede { position: relative; flex-wrap: wrap; }
.chat-piede .microfono.attivo { border-color: var(--red); background: var(--red-soft); color: var(--red); }
.chat-piede .microfono[hidden] { display: none; }
.registrazione { display: flex; flex: 1 1 100%; box-sizing: border-box; min-width: 0; max-width: 100%; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #F4B4AC; border-radius: 14px; background: #FFF7F6; }
.registrazione[hidden] { display: none; }
.punto-rec { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--red); animation: lampeggia-rec 1s infinite; }
@keyframes lampeggia-rec { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .punto-rec { animation: none; } }
.tempo-rec { min-width: 38px; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--red); }
.onda-rec { flex: 1 1 0; width: 0; min-width: 0; max-width: 220px; height: 34px; }
.registrazione .small { white-space: nowrap; }
.registrazione .btn { width: auto; padding: 0 12px; }
.vocale { display: flex; align-items: center; gap: 8px; min-width: 220px; }
.vocale-play { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--primary); color: #fff; cursor: pointer; }
.vocale-play svg { width: 16px; height: 16px; }
.vocale-play:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.vocale-barra { flex: 1; min-width: 90px; accent-color: var(--primary); }
.vocale-tempo { flex: none; color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .onda-rec { display: none; } .vocale { min-width: 180px; } }
/* 5u: Fatture fornitori (pagina e riquadro della Dashboard) */
.carica-fatture > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.carica-fatture > summary::-webkit-details-marker, .termini-fornitori > summary::-webkit-details-marker, .indica-scadenza > summary::-webkit-details-marker { display: none; }
.carica-fatture > summary h2, .termini-fornitori > summary h2 { margin: 0; }
.carica-fatture:not([open]) > summary, .termini-fornitori:not([open]) > summary { padding-bottom: 18px; }
.carica-fatture-b { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.carica-fatture-b .drop { flex: 1 1 320px; }
.carica-fatture-b .errore-carica { flex: 1 1 100%; margin: 0; }
.carica-fatture-b .errore-carica[hidden] { display: none; }
.termini-fornitori > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.kpi-fatture .kpi .l a { color: inherit; text-decoration: underline; }
.barra-selezione { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 12px; padding: 10px 16px; border: 1px solid var(--primary-soft); border-radius: var(--r-in); background: #F5F5FF; }
.barra-selezione[hidden] { display: none; }
.fld-in-linea { display: flex; align-items: center; gap: 8px; margin: 0; }
.fld-in-linea label { margin: 0; white-space: nowrap; }
.fld-in-linea .inp { width: auto; min-width: 0; }
.tabella-fatture th.sel, .tabella-fatture td.sel { width: 36px; padding-right: 0; }
.tabella-fatture input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primary); }
.tabella-fatture .cella-scadenza { min-width: 150px; }
.tabella-fatture .cella-scadenza > b { display: block; }
.tabella-fatture .cella-scadenza .pill { margin-top: 2px; }
.tabella-fatture tr.scaduta td:first-child, .tabella-fatture tr.senza_data td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.tabella-fatture .fornitore { display: block; min-width: 140px; overflow-wrap: break-word; }
.tabella-fatture code { font: 600 12.5px var(--body); font-feature-settings: 'tnum'; color: var(--ink); }
.tabella-fatture .copia { height: 26px; margin-left: 4px; padding: 0 10px; font-size: 12px; }
.tabella-fatture .cella-iban .trunc { max-width: 150px; }
.tabella-fatture .cella-pagata form { margin-top: 4px; }
.indica-scadenza { margin-top: 6px; }
.indica-scadenza > summary { display: inline; border: 0; background: none; color: var(--primary); font-weight: 600; cursor: pointer; text-decoration: underline; list-style: none; }
.indica-scadenza .mini-form { max-width: 300px; }
.indica-scadenza .regola { display: flex; flex-wrap: wrap; gap: 6px; }
.indica-scadenza .regola[hidden] { display: none; }
.indica-scadenza .regola select { flex: 1 1 100%; min-width: 0; }
.inp.giorni { width: 84px; flex: none; }
.form-termini { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.form-termini select { width: auto; min-width: 190px; }
.riquadro-fatture .lista li > .pill { flex: none; min-width: 92px; justify-content: center; }
.riquadro-fatture .lista li > form.rr { margin: 0; }
@media (max-width: 1500px) {
	.tabella-fatture .cella-scadenza { min-width: 130px; }
	.tabella-fatture .copia { margin: 2px 0 0; display: block; }
}
@media (max-width: 760px) {
	/* al telefono ogni rata è una scheda, con l'etichetta della colonna a sinistra */
	.tabella-fatture, .tabella-fatture tbody, .tabella-termini, .tabella-termini tbody { display: block; }
	.tabella-fatture thead, .tabella-termini thead { display: none; }
	.tabella-fatture tr, .tabella-termini tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--line); }
	.tabella-fatture tr > td, .tabella-termini tr > td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: right; }
	.tabella-fatture tr > td::before, .tabella-termini tr > td::before { content: attr(data-l); flex: none; color: var(--ink-3); font-size: 12.5px; font-weight: 600; text-align: left; }
	.tabella-fatture tr > td > *, .tabella-termini tr > td > * { min-width: 0; }
	.tabella-fatture td.cella-scadenza, .tabella-fatture td.cella-fornitore, .tabella-fatture td.cella-pagata { flex-wrap: wrap; }
	.tabella-fatture .cella-scadenza { min-width: 0; }
	.tabella-fatture .fornitore { min-width: 0; text-align: right; }
	.tabella-fatture td.sel { width: auto; }
	.tabella-fatture tr > td:has(.empty)::before { display: none; }
	.tabella-fatture tr > td:has(.empty) { display: block; text-align: center; }
	.indica-scadenza { width: 100%; text-align: left; }
	.form-termini { justify-content: flex-end; }
	.barra-selezione { padding: 10px 12px; }
	.fld-in-linea { flex: 1 1 100%; }
	.fld-in-linea .inp { flex: 1; }
	.form-termini select { min-width: 0; flex: 1 1 100%; }
}
/* 4d-2: Transcoop (pagine dei codici, schede di dipendente e mezzo, registro) */
.transcoop-pagina .box { margin-bottom: 16px; }
.abbina-autista { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.abbina-autista select { height: 32px; max-width: 260px; }
.form-transcoop { display: grid; gap: 8px; margin-top: 8px; }
.form-transcoop .fld { margin: 0; }
.riquadro-transcoop-api .richieste-t, .riquadro-transcoop-mezzo .richieste-t { margin-top: 10px; }
.riquadro-transcoop-api .nota-qualita, .riquadro-transcoop-mezzo .nota-qualita { flex-basis: 100%; color: var(--red); font-size: 12.5px; }
.riquadro-transcoop-api .ls li, .riquadro-transcoop-mezzo .ls li { flex-wrap: wrap; }
.invia-autista-transcoop, .chiedi-inserimento-transcoop { margin-top: 10px; }
.invia-autista-transcoop > summary, .chiedi-inserimento-transcoop > summary { list-style: none; display: inline-flex; }
.invia-autista-transcoop > summary::-webkit-details-marker, .chiedi-inserimento-transcoop > summary::-webkit-details-marker { display: none; }
.anteprima-autista b { font-weight: 600; }
.riquadro-transcoop-api .avviso-invio { color: #8A5A00; }
.t-registro-transcoop pre.json-registro { width: min(560px, calc(100vw - 96px)); max-height: 320px; overflow: auto; white-space: pre; font-size: 12px; background: var(--bg); padding: 8px; border-radius: 8px; margin: 4px 0; }
@media (max-width: 760px) {
	/* 4d-2: al telefono ogni riga delle tabelle Transcoop è una scheda (niente tabella che scorre) */
	.t-telefono thead { display: none; }
	.t-telefono, .t-telefono tbody, .t-telefono tr, .t-telefono td { display: block; width: auto !important; max-width: none !important; }
	.t-telefono tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
	.t-telefono td { padding: 2px 0 !important; border: 0 !important; }
	.t-telefono td[data-l]::before { content: attr(data-l) ' '; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
}
.t-registro-transcoop details summary { cursor: pointer; color: var(--primary); }
.transcoop-pagina form.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.transcoop-pagina form.filters select { width: auto; min-width: 200px; max-width: 100%; }

/* ===================== 6b: schede a metà di uno schermo 34" (finestra di ~1720 px) ===================== */
@media (max-width: 1240px) {
	.g-side { grid-template-columns: minmax(0, 1fr); }
}
/* «Possesso»: le voci non vanno a capo dentro la pillola */
.seg label, .seg a, .seg button { white-space: nowrap; }
/* Documenti di mezzi e dipendenti: sezioni di almeno 200 px (erano 168: «Assicurazione · valido fino al 28/01/2027» e «Polizza 55682…»
   schiacciati); la data intera su una riga */
.sez-doc-griglia { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.sez-doc-data { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Fatturato Transcoop della scheda del mezzo: il mese sopra, sotto i dati, il totale a destra allineato alla riga */
.fatturato-mezzo li { align-items: center; gap: 12px; }
.fatturato-mezzo .mese-fatturato { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.fatturato-mezzo .dati-fatturato { overflow-wrap: normal; }
.fatturato-mezzo .totale-fatturato { flex: none; align-self: center; text-align: right; }
/* Ferie del dipendente: i numeri non vanno a capo male (2 per riga se il riquadro è stretto), i mesi su due righe da 6 invece di
   spezzare «Gen» in «Ge / n» */
.stat-ferie { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(130px, calc((100% - 30px) / 4))), 1fr)); }
.stat-ferie b { white-space: nowrap; }
.striscia-ferie { grid-template-columns: repeat(auto-fill, minmax(max(50px, calc((100% - 66px) / 12)), 1fr)); }
.striscia-ferie .m b { white-space: nowrap; overflow: hidden; text-overflow: clip; }
/* «Possesso» al telefono: le quattro voci intere vanno su due righe invece di uscire dal riquadro */
.seg.seg-pieno { flex-wrap: wrap; overflow: visible; }
.seg.seg-pieno:has(> label:nth-child(4)) { border-radius: 20px; }