/*
 * Tema di leisure: SOLO le personalizzazioni, sopra la base di commonui-quarkus.
 *
 * La base e' il tema della famiglia, che arriva da commonui con BluAppLayout: palette (verde,
 * commonui.theme in application.properties), barra, menu laterale, griglie, campi, intestazione
 * delle view (blu-theme.css, blu-menu.css, blu-app-layout-styles.css, blu-grid.css, blu-view.css).
 * Qui non si ridefinisce niente di quello: si aggiusta e si aggiunge. Decisione di Luca del
 * 04/11/2026.
 *
 * NOTA: Fino ad allora queste regole stavano in styles/custom-styles.css, importato da MainUI. Il
 * file e' stato tolto: tutto quello che e' di leisure sta qui.
 *
 * Due parti:
 *   1. aggiustamenti al tema di commonui, che valgono per tutte le view;
 *   2. componenti e classi di leisure.
 */

/*
 * ATTENZIONE: Il preset "compact" di Lumo NON si importa da qui.
 *
 * Qui c'era @import url('@vaadin/vaadin-lumo-styles/presets/compact.css'), e funzionava solo
 * nel pacchetto di produzione: nel dev mode questo file viene iniettato come testo, l'@import
 * resta uno specificatore npm che il browser non risolve, e il foglio risulta caricato e vuoto
 * senza un errore. In locale i font erano quelli di Lumo di serie, sul pod quelli compatti.
 *
 * Adesso il preset arriva da @CssImport su AppShell, che passa dal bundle di Flow e vale in
 * entrambe le modalita'. La spiegazione lunga e le misure stanno li'.
 */

/* =============================================================================================
   1. Aggiustamenti al tema di commonui
   ============================================================================================= */

/* ---------------------------------------------------------------------------------------------
   Intestazione delle view (AbsLeisure.buildViewHeader).

   La resa (titolo a 22px, riga alta quanto un pulsante, tutto a filo della cornice) e' quella di
   commonui, blu-view.css. Qui resta il gruppo dei pulsanti accanto al titolo, che in leisure e' un
   contenitore a se' (un HorizontalLayout, o la ResponsiveButtonBar del dettaglio card), mentre
   commonui mette i pulsanti direttamente nell'intestazione.
   --------------------------------------------------------------------------------------------- */
/* per la regola "stretta" qui sotto: si misura l'intestazione, non la finestra */
vaadin-app-layout > .blu-page > .blu-view-header-top {
	container-type: inline-size;
}

/* Il gruppo dei pulsanti accanto al titolo (un HorizontalLayout, o la ResponsiveButtonBar del
   dettaglio card). L'intestazione di commonui va gia' a capo, ma il gruppo no: a finestra stretta
   i pulsanti uscivano dal bordo. Qui il gruppo va a capo anche lui, resta allineato a destra e,
   quando scende sotto il titolo, si tiene sul lato destro. */
vaadin-app-layout > .blu-page > .blu-view-header-top > :not(.blu-view-title) {
	flex-wrap: wrap;
	justify-content: flex-end;
	margin-inline-start: auto;
	min-width: 0;
	gap: var(--lumo-space-s);
}

/* Intestazione stretta (telefono, o finestra con il menu aperto): niente allineamento a destra. I
   pulsanti scendono sotto il titolo e seguono il flusso normale, da sinistra, come il testo:
   tenuti a destra sotto un titolo a sinistra sembravano staccati da tutto (Luca, 05/11/2026). */
@container (max-width: 600px) {
	vaadin-app-layout > .blu-page > .blu-view-header-top > :not(.blu-view-title) {
		justify-content: flex-start;
		margin-inline-start: 0;
	}
}

/* ---------------------------------------------------------------------------------------------
   Schede dei dettagli (vaadin-tabs): la linea sotto le schede arriva da un bordo all'altro.

   La linea e' un'ombra disegnata sul componente stesso, e il componente era largo quanto le sue
   schede: nel dettaglio card 499px su 915, con la linea che si fermava a meta'. Nella cornice
   della pagina le tab si allargano a tutta la riga.
   --------------------------------------------------------------------------------------------- */
vaadin-app-layout > .blu-page > vaadin-tabs {
	align-self: stretch;
}

/* Il caricamento file nell'intestazione (Import Files): Lumo lo disegna come area di
   trascinamento con il suo padding, e l'intestazione era alta 65px invece di 40. Senza padding
   resta il bordo tratteggiato, che dice che li' si puo' trascinare un file, ed e' alto quanto i
   pulsanti accanto. Angoli come gli input. */
vaadin-app-layout > .blu-page > .blu-view-header-top > vaadin-upload {
	padding: 0 var(--lumo-space-s) 0 0;
	border-radius: var(--vaadin-input-field-border-radius, 4px);
	/* la lista dei file sta su una seconda riga, vuota finche' non si carica niente: senza lo
	   spazio fra le righe non aggiunge altezza */
	row-gap: 0;
}

/* il pulsante "Upload File..." ha 3px di margine sopra e sotto: senza, l'area e' alta quanto lui */
vaadin-app-layout > .blu-page > .blu-view-header-top > vaadin-upload > vaadin-button {
	margin-block: 0;
}

/* ---------------------------------------------------------------------------------------------
   Dettagli a tab (AbsTabDetail): le schede costruite a mano, un vaadin-tabs seguito da un
   contenitore blu-tab-page per scheda.

   La resa delle schede (testo e contenuto a filo della cornice, lineetta lunga quanto il testo,
   form come pannello) e' quella di commonui, blu-theme.css. Qui resta l'altezza.
   --------------------------------------------------------------------------------------------- */

/* Nei dettagli a tab la cornice cresce con il contenuto, e scorre la pagina intera: la barra di
   scorrimento sta sul bordo della finestra, fuori dalla cornice, e gli allineamenti non cambiano.
   ATTENZIONE: AbsLeisureView e AbsTabDetail danno a pagina e scheda setSizeFull(), cioe' height
   100%; ma la scheda parte sotto titolo e tab, quindi finiva oltre il fondo della cornice (73px nel
   dettaglio gruppo, dove la seconda griglia usciva). L'altezza e' scritta nello stile
   dell'elemento, e si batte solo con !important.
   AVVERTENZA: provato e scartato lo scorrimento DENTRO la cornice, con titolo e tab fermi: la barra
   (15px con le barre classiche) toglieva spazio al contenuto, che finiva 15px prima dei pulsanti.
   Le griglie da sole (le pagine elenco) restano come sono: alte quanto la cornice, scorrono dentro
   di se'. */
vaadin-app-layout > .blu-page:has(> .blu-tab-page) {
	height: auto !important;
	min-height: 100%;
}

vaadin-app-layout > .blu-page > .blu-tab-page {
	height: auto !important;
	flex: none;
}

/* ---------------------------------------------------------------------------------------------
   Pannello del soggetto nei form delle operazioni (component/SubjectPanel): un divisore fra la
   colonna della card e quella del promocode. Verticale quando stanno affiancate, orizzontale
   quando lo spazio non basta e vanno una sotto l'altra (le colonne sono minimo 260px, piu' lo
   spazio fra le due).
   --------------------------------------------------------------------------------------------- */
/* Il pannello e le sue righe come i campi in sola lettura che ha intorno (blu-theme.css): bordo
   piu' scuro, angoli degli input, etichette e valori con i caratteri dei campi. Prima il bordo era
   il grigio chiaro di Lumo e gli angoli 12px, gli unici chiari del dettaglio operazione. */
.leisure-subject-panel {
	box-sizing: border-box;
	border: 1px solid rgba(27, 51, 79, 0.6);
	border-radius: var(--vaadin-input-field-border-radius, 4px);
}

.leisure-subject-label {
	font-size: var(--lumo-font-size-s);
	font-weight: 500;
	color: #35516d;
}

.leisure-subject-value {
	font-size: var(--lumo-font-size-m);
	font-weight: 500;
	color: #21374f;
}

.leisure-subject-columns {
	container-type: inline-size;
}

.leisure-subject-columns > * + * {
	border-left: 1px solid var(--lumo-contrast-10pct);
	padding-left: var(--lumo-space-m);
}

@container (max-width: 529px) {
	.leisure-subject-columns > * + * {
		border-left: none;
		padding-left: 0;
		border-top: 1px solid var(--lumo-contrast-10pct);
		padding-top: var(--lumo-space-m);
	}
}

/* ---------------------------------------------------------------------------------------------
   Colonna Azioni compatta. Resta di leisure: in commonui la colonna e' piu' distaccata, come piace
   al team.
   --------------------------------------------------------------------------------------------- */
/* La colonna Azioni: bottoni di sola icona, con l'aria fra uno e l'altro di un HorizontalLayout
   normale (16px) piu' i 16px di padding della cella. Quattro icone occupavano 250px. */
vaadin-grid-cell-content:has(> vaadin-horizontal-layout > vaadin-button) {
	padding-inline: var(--lumo-space-xs);
}

vaadin-grid-cell-content > vaadin-horizontal-layout:has(> vaadin-button) {
	gap: var(--lumo-space-xs);
}

/* Su uno schermo largo le icone piu' distanti (Luca, 06/11/2026). I pixel fra un'icona e l'altra
   erano gli stessi a ogni larghezza, 11, ma a schermo intero, con il resto della pagina piu'
   arioso, sembravano attaccate. La colonna e' ad auto-width: si allarga da sola. */
@media (min-width: 1200px) {
	vaadin-grid-cell-content > vaadin-horizontal-layout:has(> vaadin-button) {
		gap: var(--lumo-space-m);
	}
}

/* AVVERTENZA: non vale per i pulsanti di AbsLeisure.buildGridAction (tertiary-inline), che hanno gia'
   la misura dei comandi di riga di commonui: e' per le griglie non ancora passate di li'. */
vaadin-grid-cell-content > vaadin-horizontal-layout > vaadin-button:not([theme~="tertiary-inline"]) {
	min-width: var(--lumo-size-m);
	padding-inline: 0;
}

/* ---------------------------------------------------------------------------------------------
   Filtro a intervallo di date nella riga dei filtri (component/DateTimeRangeFilter).

   E' un vaadin-button che apre il popup delle date: senza intervallo scelto non ha testo, e col
   tema di commonui restava una pillola grigia stondata a 12px, alta 32px contro i 28,8 degli
   altri filtri. Qui prende la resa di un campo: le misure sono quelle dei campi di filtro
   (blu-grid.css: --lumo-text-field-size 1.8rem, testo 0.85rem) e i colori quelli dei campi di
   blu-theme.css (bordo rgba(34, 62, 92, 0.42), hover --blu-input-hover-bg).
   --------------------------------------------------------------------------------------------- */
vaadin-grid vaadin-button.leisure-range-filter {
	height: 1.8rem;
	min-height: 1.8rem;
	margin: 0;
	/* stesso margine a destra e a sinistra: l'icona sta a 5px dal bordo, come la freccia dei combo */
	padding: 0 var(--lumo-space-s);
	background: #ffffff;
	border-radius: var(--vaadin-input-field-border-radius, 4px);
	box-shadow: inset 0 0 0 1px rgba(34, 62, 92, 0.42);
	color: var(--lumo-body-text-color);
	font-size: 0.85rem;
	font-weight: 400;
}

vaadin-grid vaadin-button.leisure-range-filter:hover {
	background: var(--blu-input-hover-bg);
}

/* il testo dell'intervallo a sinistra, il calendario in fondo a destra come nei date picker */
vaadin-grid vaadin-button.leisure-range-filter::part(label) {
	flex: 1;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
}

vaadin-grid vaadin-button.leisure-range-filter vaadin-icon {
	color: var(--lumo-contrast-60pct);
}

/* AVVERTENZA: senza intervallo scelto il bottone non ha testo, e Flow tratta un bottone senza
   testo come "solo icona": l'icona perde lo slot suffix e finisce nell'etichetta, a sinistra.
   Qui la si riporta a destra; con un intervallo scelto torna nel suffix da sola. */
/* AVVERTENZA: flex e non block: con display block il disegno dell'icona scendeva di 18px sotto
   la sua scatola e l'overflow dell'etichetta lo tagliava a meta' */
vaadin-grid vaadin-button.leisure-range-filter > vaadin-icon:not([slot]) {
	display: flex;
	margin-inline-start: auto;
}

/* Nella finestra del filtro date i placeholder dicono il valore che si usa a campo vuoto
   ("Nessun limite", "00:00", "23:59"): corsivo e grigio chiaro, perche' non si scambino per valori
   scritti. Il grigio di Lumo da solo era troppo simile a un testo vero.
   AVVERTENZA: Lumo stila il placeholder da dentro il componente, facendolo ereditare dall'input
   (font e colore "inherit") e prendendo il colore da --vaadin-input-field-placeholder-color: una
   regola su ::placeholder da fuori non passa. Si lavora quindi sulla variabile e sull'input mentre
   mostra il placeholder. */
.leisure-range-dialog :is(vaadin-date-picker, vaadin-time-picker) {
	--vaadin-input-field-placeholder-color: var(--lumo-tertiary-text-color);
}

.leisure-range-dialog :is(vaadin-date-picker, vaadin-time-picker) > input:placeholder-shown {
	font-style: italic;
}

/* Il piede della finestra del filtro date a filo dei campi: il bordo di "Svuota" sotto il bordo
   sinistro dei campi, quello di "Applica" sotto il destro (decisione di Luca del 05/11/2026).
   Lumo da' al piede 10px di padding ai lati e al contenuto 20 (--lumo-space-l): si porta il piede
   a 20. */
vaadin-dialog.leisure-range-dialog::part(footer) {
	padding-inline: var(--lumo-space-l);
}

.leisure-range-dialog vaadin-button.leisure-range-clear {
	margin-inline-end: auto;
}

/* ---------------------------------------------------------------------------------------------
   Lavori in background (AbsLeisure.STYLE_TASK_STATUS): il riquadro sotto l'intestazione della
   pagina che li lancia - la scadenza del credito nella griglia Cards, lo scarico dei promocode
   nella griglia Promotion Code. Lo stato si legge qui, nella stessa pagina (Luca, 06/11/2026).
   Il colore lo da' l'attributo theme: running, done, error.
   --------------------------------------------------------------------------------------------- */
.leisure-task-status {
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-self: stretch;
	margin-bottom: var(--lumo-space-s);
	padding: 6px var(--lumo-space-m);
	border: 1px solid rgba(27, 51, 79, 0.18);
	border-left-width: 4px;
	border-radius: var(--vaadin-input-field-border-radius, 4px);
	background: #ffffff;
	color: #21374f;
	font-size: 14px;
}

.leisure-task-status[theme~="running"] {
	border-left-color: var(--blu-primary);
	background: color-mix(in srgb, var(--blu-primary) 6%, #ffffff);
}

.leisure-task-status[theme~="done"] {
	border-left-color: var(--blu-primary-strong);
}

.leisure-task-status[theme~="error"] {
	border-left-color: #c0392b;
	background: #fdf3f2;
}

.leisure-task-status-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--lumo-space-s);
}

/* la X per nascondere una riga finita: in fondo a destra, lontana da "Apri" */
.leisure-task-status-close {
	margin-inline-start: auto;
}

/* il popup della scadenza del credito: un paragrafo per riga, senza i margini del <p> */
.leisure-expire-dialog p {
	margin: 0;
}

/* "Attenzione:" arriva dal bundle come <strong>: stesso peso dei titoli, non il bold pieno */
.leisure-expire-dialog strong {
	font-weight: 600;
}

/* ---------------------------------------------------------------------------------------------
   Scheda "Versioni" dei dettagli (component/VersionHistory): una versione per riquadro, con il
   riquadro dei pannelli dei form (bordo, angoli 4px), e dentro la tabella Campo / Prima / Dopo.
   Il prima in rosso tenue e il dopo nel verde del tema: si legge la modifica senza le frecce.
   --------------------------------------------------------------------------------------------- */
.leisure-versions {
	display: flex;
	flex-direction: column;
	gap: var(--lumo-space-s);
	width: 100%;
	/* le regole "strette" in fondo alla sezione misurano lo storico, non la finestra */
	container-type: inline-size;
}

vaadin-details.leisure-version {
	margin: 0;
	background: #ffffff;
	border: 1px solid rgba(27, 51, 79, 0.18);
	border-radius: var(--vaadin-input-field-border-radius, 4px);
}

/* AVVERTENZA: in Vaadin 25 il titolo non e' una part ma un elemento a se', vaadin-details-summary
   nel DOM della pagina: ::part(summary) non lo prende, e freccia e conteggio restavano attaccati
   al bordo. Ai due lati lo stesso margine della tabella: la freccia comincia dove comincia lei, il
   conteggio finisce dove finisce lei. */
vaadin-details.leisure-version > vaadin-details-summary {
	padding-inline: var(--lumo-space-m);
}

/* il contenuto del titolo si stringe con il riquadro: senza, su telefono data, autore e causa
   uscivano dal bordo invece di andare a capo */
vaadin-details.leisure-version > vaadin-details-summary::part(content) {
	flex: 1;
	min-width: 0;
}

vaadin-details.leisure-version::part(content) {
	padding: 0 var(--lumo-space-m) var(--lumo-space-m);
}

.leisure-version-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--lumo-space-m);
	row-gap: 2px;
	width: 100%;
	color: #21374f;
	font-size: 14px;
	/* Lumo mette nowrap al titolo dei details: una causa lunga non andava mai a capo */
	white-space: normal;
}

.leisure-version-number {
	padding: 2px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--blu-primary) 12%, #ffffff);
	color: var(--blu-primary-strong);
	font-weight: 600;
	white-space: nowrap;
}

.leisure-version-meta {
	color: #5a6f86;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.leisure-version-description {
	font-weight: 500;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* il numero dei campi in fondo a destra, dove l'occhio arriva scorrendo le versioni chiuse */
.leisure-version-count {
	margin-inline-start: auto;
	color: #5a6f86;
	font-size: 13px;
	white-space: nowrap;
}

/* La tabella: una griglia CSS, non una vaadin-grid. Sono poche righe per versione e decine di
   versioni per oggetto: una vaadin-grid per ognuna sarebbe pesante, e qui non serve ordinare. */
.leisure-version-changes {
	display: grid;
	grid-template-columns: minmax(10rem, 1fr) minmax(0, 2fr) minmax(0, 2fr);
	border: 1px solid rgba(27, 51, 79, 0.12);
	border-radius: var(--vaadin-input-field-border-radius, 4px);
	overflow: hidden;
	font-size: 14px;
}

.leisure-version-changes > * {
	padding: 6px var(--lumo-space-s);
	border-top: 1px solid rgba(27, 51, 79, 0.08);
	/* le note arrivano a 400 caratteri senza spazi lunghi: vanno a capo dentro la cella */
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}

.leisure-version-changes > .leisure-version-head {
	border-top: none;
	background: color-mix(in srgb, var(--blu-primary) 6%, #ffffff);
	color: #35516d;
	font-size: 13px;
	font-weight: 600;
}

.leisure-version-field {
	display: flex;
	flex-direction: column;
	color: #21374f;
	font-weight: 500;
}

/* il nome della proprieta' sotto l'etichetta: per chi cerca nel codice, piccolo e grigio */
.leisure-version-property {
	color: #7a8ca0;
	font-family: var(--lumo-font-family-monospace, monospace);
	font-size: 11px;
	font-weight: 400;
}

.leisure-version-before {
	background: #fdf3f2;
	color: #8a3a33;
}

.leisure-version-after {
	background: color-mix(in srgb, var(--blu-primary) 8%, #ffffff);
	color: var(--blu-primary-strong);
	font-weight: 500;
}

.leisure-version-changes > .leisure-version-empty {
	color: #8a99aa;
	font-style: italic;
	font-weight: 400;
}

/* righe registrate come modifica ma con lo stesso valore prima e dopo: spente */
.leisure-version-changes > .leisure-version-same {
	background: transparent;
	color: #8a99aa;
}

/* Storico stretto (sotto i 600px): niente allineamenti forzati. Il titolo della versione scorre
   da sinistra e va a capo come il testo, con il conteggio in coda e non spinto sul bordo destro;
   nella tabella il campo sopra, prima e dopo affiancati sotto. */
@container (max-width: 600px) {
	.leisure-version-count {
		margin-inline-start: 0;
	}

	.leisure-version-meta {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.leisure-version-changes {
		grid-template-columns: 1fr 1fr;
	}

	.leisure-version-changes > .leisure-version-head:first-child,
	.leisure-version-changes > .leisure-version-field {
		grid-column: 1 / -1;
	}
}

/*
 * Voce del menu utente realizzata con un RouterLink (MainUI.buildUserMenu): serve un
 * <a href> perche' il browser possa aprirla in una nuova scheda, ma deve avere la resa di una
 * normale voce di menu, quindi riempie la riga e non porta ne' colore ne' sottolineatura di link.
 */
.profile-menu-link,
.profile-menu-link:hover,
.profile-menu-link[highlight] {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	color: inherit;
	font-weight: 400;
	text-decoration: none;
}

/* =============================================================================================
   2. Componenti e classi di leisure
   ============================================================================================= */

/*
* {
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 1rem;
}
*/

vaadin-context-menu-overlay#overlay {
	transform: translateY(14px);
}

vaadin-context-menu-overlay#overlay::part(overlay) {
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

/* Border for Select Operation Type in OperationDetailView */

.operation-item {
    padding: 2px 0;
    display: block;
}

.operation-item-group-separator {
    border-bottom: 1px solid var(--lumo-contrast-20pct);
    padding-bottom: 8px;
    margin-bottom: -8px;   
}

vaadin-text-area.monospace-content::part(input-field) {
	font-family: monospace;
	white-space: pre;
}

[theme~="badge"][theme~="large"] {
    font-size: var(--lumo-font-size-l);
}

.banner {
	/*
	display: flex;
	width: 100%;
	*/
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0em;
	padding: var(--lumo-space-s) var(--lumo-space-m);
	box-sizing: border-box;
	background-color: var(--lumo-error-color);
	color: var(--lumo-error-contrast-color);
	border-radius: var(--lumo-border-radius-m);
}

.banner-title {
	font-size: var(--lumo-font-size-xl);
	font-weight: 700;
	margin: 0;
	line-height: var(--lumo-line-height-s);
}

.banner-text {
	font-size: var(--lumo-font-size-l);
	margin: 0;
	line-height: var(--lumo-line-height-m);
}

/*
 * Macro sezioni del popup "Dettaglio Anagrafica" (ProfileSearchView).
 * La banda deve coprire tutta la riga cliccabile, freccia inclusa: la riga e' il
 * part "summary" nello shadow DOM del componente, quindi non e' raggiungibile
 * con gli stili inline lato Java e va colorata da qui con ::part().
 */
/* Le macro sezioni del popup "Dettaglio Anagrafica" (Siap, BTProfile): riquadri come quelli della
   scheda Versioni, con il titolo sul fondo delle intestazioni di griglia. Fino al 05/11/2026 erano
   barre piene, prima blu e poi del colore della barra in alto: troppo pesanti per un titolo, e
   staccate dal resto (Luca: "non mi piacciono i colori").

   AVVERTENZA: in Vaadin 25 il titolo dei details e' l'elemento vaadin-details-summary, non la part
   "summary": con ::part(summary) la regola non prendeva niente. Stesso caso della scheda Versioni. */
vaadin-details.macro-section {
	/* border-box: larga il 100% piu' il bordo, la sezione sforava e il popup scorreva di lato */
	box-sizing: border-box;
	/* ATTENZIONE: il contenitore e' un VerticalLayout (flex in colonna) con un'altezza massima, e
	   da aperte le due sezioni non ci stanno: senza flex-shrink 0 si stringevano invece di far
	   scorrere il popup, e la prima restava tagliata a meta' */
	flex-shrink: 0;
	margin: 0 0 var(--lumo-space-m);
	background: #ffffff;
	border: 1px solid rgba(27, 51, 79, 0.18);
	/* angoli vivi (Luca, 05/11/2026) */
	border-radius: 0;
}

vaadin-details.macro-section:last-child {
	margin-bottom: 0;
}

/* il titolo ha angoli e margini suoi (Lumo): il fondo si vedeva come un bordino stondato dentro il
   riquadro, invece di riempirlo */
vaadin-details.macro-section > vaadin-details-summary {
	margin: 0;
	border-radius: 0;
	padding: 6px var(--lumo-space-m);
	background: color-mix(in srgb, var(--blu-primary) 6%, #ffffff);
	color: #21374f;
	font-size: var(--lumo-font-size-m);
	font-weight: 600;
}

vaadin-details.macro-section[opened] > vaadin-details-summary {
	border-bottom: 1px solid rgba(27, 51, 79, 0.12);
}

vaadin-details.macro-section > vaadin-details-summary::part(toggle) {
	color: var(--blu-primary-strong);
}

/* Lo spazio dentro la sezione: sopra quanto basta a staccare la prima etichetta dal titolo, ai
   lati e sotto quello della scheda Versioni. Prima il contenuto partiva a filo della barra. */
vaadin-details.macro-section::part(content) {
	padding: var(--lumo-space-s) var(--lumo-space-m) var(--lumo-space-m);
}

/* Legenda della colonna Scadenza Consensi: compare passando il mouse sull'icona info.
   Non si puo' usare il title nativo, che accetta solo testo e non le icone colorate. */
.consent-legend-host {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.consent-legend {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 100;
	padding: var(--lumo-space-s);
	background: var(--lumo-base-color);
	border: 1px solid var(--lumo-contrast-20pct);
	border-radius: var(--lumo-border-radius-m);
	box-shadow: var(--lumo-box-shadow-s);
	white-space: nowrap;
	font-weight: normal;
	text-transform: none;
	color: var(--lumo-body-text-color);
}

.consent-legend-host:hover .consent-legend {
	display: block;
}

/* un filo d'aria fra le righe, altrimenti le icone si toccano */
.consent-legend > * + * {
	margin-top: 3px;
}

.consent-legend > *:first-child {
	margin-bottom: 5px;
}

/* la cella dell'intestazione taglia quello che esce dai suoi bordi: senza questa regola la
   legenda resterebbe invisibile anche da aperta */
vaadin-grid-cell-content:has(.consent-legend-host) {
	overflow: visible;
}

/* ---------------------------------------------------------------------------------------------
   Stato delle operazioni (13/11/2026): badge nelle colonne Stato, campo colorato nel dettaglio,
   sfondo appena accennato sulle righe finite in errore. Le classi le mettono
   AbsLeisure.statusBadge, statusRowPart e OperationDetailView; l'esito e' AbsLeisure.statusKind.
   NOTA: un colore per esito, ognuno con la sua tinta chiara di fondo. Il testo resta scuro sul
   chiaro, per leggerlo anche in una griglia compatta.
   --------------------------------------------------------------------------------------------- */
.leisure-status {
	--leisure-status-color: var(--lumo-contrast-70pct);
	--leisure-status-bg: var(--lumo-contrast-10pct);
	display: inline-block;
	padding: 0.1em 0.6em;
	border-radius: var(--lumo-border-radius-l);
	font-size: var(--lumo-font-size-s);
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	color: var(--leisure-status-color);
	background-color: var(--leisure-status-bg);
}

.leisure-status-success {
	--leisure-status-color: var(--lumo-success-text-color);
	--leisure-status-bg: var(--lumo-success-color-10pct);
}

.leisure-status-error {
	--leisure-status-color: var(--lumo-error-text-color);
	--leisure-status-bg: var(--lumo-error-color-10pct);
}

.leisure-status-partial {
	--leisure-status-color: #a24a00;
	--leisure-status-bg: #fff0dc;
}

.leisure-status-ready {
	--leisure-status-color: var(--lumo-primary-text-color);
	--leisure-status-bg: var(--lumo-primary-color-10pct);
}

/* la riga di un'operazione in errore: una tinta che si vede, non un colore pieno.
   NOTA: scritta come dice blu-grid.css di commonui, con --blu-grid-row-hover-shade: sotto il mouse
   il rosa si scurisce su tutta la riga, come le righe normali prendono il loro colore di hover. */
vaadin-grid::part(leisure-status-row-failed) {
	background-color: color-mix(in srgb, color-mix(in srgb, var(--lumo-error-color) 7%, var(--lumo-base-color)), black var(--blu-grid-row-hover-shade, 0%));
}

/* il campo Stato del dettaglio: stessi colori del badge, sul fondo del campo e sul testo */
/* ATTENZIONE: :where() azzera la specificita', cosi' i colori di .leisure-status-<esito> vincono */
:where(vaadin-text-field.leisure-status-field) {
	--leisure-status-color: var(--lumo-contrast-70pct);
	--leisure-status-bg: var(--lumo-contrast-10pct);
}
vaadin-text-field.leisure-status-field::part(input-field) {
	background-color: var(--leisure-status-bg);
}

vaadin-text-field.leisure-status-field > input {
	color: var(--leisure-status-color);
	-webkit-text-fill-color: var(--leisure-status-color);
	font-weight: 600;
}