/* =====================================================================
   six-theme - Livello tema
   ---------------------------------------------------------------------
   [18/09/2026] #ALE Stessa veste di Zapix (zapix.local, sezione "ZAPIX
   2026 REDESIGN" in fondo al suo general.css): due prodotti della stessa
   casa non possono sembrare due prodotti di due case diverse.

   Da li' arrivano, uguali: la tavolozza blu notte del marchio con la
   sfumatura verde -> verde-acqua -> blu, i caratteri Jura (titoli) e
   Titillium Web (testo), i pulsanti a pillola, le schede ampiamente
   arrotondate e la loro ombra.

   Direzione: chiaro e neutro, il colore solo dove serve. Lo sfondo e le
   superfici restano sobri, la gerarchia la danno peso e spaziatura;
   l'accento resta per azioni e stati, che sono le uniche cose che devono
   catturare l'occhio in un gestionale usato tutto il giorno.

   Questo file viene caricato per ultimo, dopo il tema Limitless e dopo
   general.css, e sovrascrive senza toccarli. Due conseguenze utili:
     - il tema originale resta intatto e aggiornabile;
     - rimappando qui le classi gia' sparse nel progetto (bg-six-*,
       badge-*, table_items...) il restyling raggiunge anche le pagine
       non ancora migrate al componente ListView, senza riscriverle.

   Per cambiare look basta intervenire sui token qui sotto.
   ===================================================================== */

:root {
	/* ---- Superfici e testo ----------------------------------------
	   I grigi non sono neutri ma virati verso il blu notte del marchio:
	   fondo, bordi e testo stanno cosi' nella stessa famiglia invece di
	   sembrare tre progetti diversi messi insieme. */
	--sx-bg:            #eef1f4;   /* sfondo pagina */
	--sx-surface:       #ffffff;   /* card, tabelle, barre */
	--sx-surface-alt:   #f4f7fa;   /* intestazioni tabella, righe alternate */
	--sx-border:        rgba(9, 31, 54, .10);
	--sx-border-strong: rgba(9, 31, 54, .22);

	--sx-text:          #091f36;   /* blu notte: titoli */
	--sx-text-soft:     #22364a;   /* testo corrente */
	--sx-text-muted:    #46586c;   /* etichette */
	--sx-text-faint:    #8d9aa9;   /* dati di servizio */

	/* ---- Accento --------------------------------------------------
	   Il blu del marchio. Verde e verde-acqua sono i due estremi della
	   sfumatura: si usano solo dove il marchio si firma (la riga sotto
	   la voce di menu attiva), mai per colorare dati. */
	--sx-accent:        #2787a6;
	--sx-accent-hover:  #0b3a5e;
	--sx-accent-soft:   rgba(79, 181, 162, .14);
	--sx-accent-soft-strong: rgba(79, 181, 162, .22);  /* il mouse sopra una notifica non letta */
	--sx-teal:          #4fb5a2;
	--sx-green:         #89e8a7;
	--sx-gradient:      linear-gradient(90deg, #89e8a7 0%, #4fb5a2 52%, #2787a6 100%);

	/* [18/09/2026] #ALE La stessa firma, su toni che reggono una scritta
	   bianca sopra. Serve perche' --sx-gradient parte da #89e8a7, che e'
	   giusto per un filo di 3px ma sotto un testo bianco da un contrasto
	   di 1,6:1: illeggibile. Qui gli estremi sono due colori che la
	   tavolozza ha gia', il verde degli stati conclusi e l'accento, e il
	   piu' chiaro dei due sta a 5:1. Si usa sull'unica azione piena
	   dentro l'area delle schede. */
	--sx-gradient-forte: linear-gradient(90deg, #2b7d59 0%, #2787a6 100%);

	/* ---- Modifica --------------------------------------------------
	   [17/09/2026] #ALE Un'azione si riconosce dal colore, non dalla
	   pagina in cui capita: "nuovo" tiene l'accento, "modifica" questo
	   ardesia. Due gesti diversi, due tinte diverse, e nessuna delle due
	   invade il rosso di elimina o l'ocra di duplica.
	   [18/09/2026] #ALE L'ardesia diventa il blu notte del marchio: e' la
	   stessa tinta che in Zapix porta text-six-darkerblue, cioe' la
	   classe con cui "modifica" e' scritta nelle viste. */
	--sx-edit:          #22364a;
	--sx-edit-hover:    #16293e;
	--sx-edit-soft:     rgba(9, 31, 54, .08);

	/* ---- Stati ----------------------------------------------------
	   Le tinte sono quelle di Zapix; il testo delle pastiglie e' preso
	   un paio di gradini piu' scuro della tinta piena, perche' qui la
	   stessa variabile fa sia il fondo del pulsante (testo bianco sopra)
	   sia il testo sulla pastiglia tenue, e nel secondo caso il tono
	   chiaro di Zapix non reggeva la lettura su una lista fitta. */
	--sx-ok:            #2b7d59;
	--sx-ok-soft:       rgba(59, 168, 118, .14);
	--sx-warn:          #9a6f1f;
	--sx-warn-soft:     rgba(217, 161, 59, .16);
	--sx-danger:        #b24444;
	--sx-danger-soft:   rgba(194, 84, 84, .14);
	--sx-info:          #1f6f8b;
	--sx-info-soft:     rgba(39, 135, 166, .12);

	/* ---- Forma -----------------------------------------------------
	   Angoli larghi e ombra a due strati: e' la parte piu' riconoscibile
	   della veste di Zapix, insieme ai pulsanti a pillola. */
	--sx-radius:        10px;
	--sx-radius-sm:     6px;
	--sx-radius-lg:     16px;
	--sx-radius-pill:   999px;
	--sx-shadow:        0 2px 8px rgba(9, 31, 54, .06), 0 12px 32px rgba(9, 31, 54, .08);
	--sx-shadow-pop:    0 4px 16px rgba(9, 31, 54, .12), 0 20px 48px rgba(9, 31, 54, .14);

	/* ---- Tipografia -------------------------------------------------
	   I due caratteri del marchio, caricati da init.php e init_nb.php.
	   Se il collegamento a Google Fonts non risponde si ricade su
	   Poppins, che il tema ha gia' in locale: cambia il disegno, non
	   l'impaginazione. */
	--sx-font-display:  'Jura', 'Titillium Web', 'Poppins', sans-serif;
	--sx-font-body:     'Titillium Web', 'Poppins', sans-serif;

	/* [18/09/2026] #ALE Le misure sono quelle misurate su Zapix, non a
	   occhio: il corpo del testo era gia' uguale (13px), ma qui tutto il
	   contorno - etichette dei campi, briciole, paginazione, seconda riga
	   delle celle - stava un gradino sotto, e il titolo di pagina quattro
	   pixel sotto. Sommati facevano sembrare Zapfix scritto in piccolo.

	   --sx-fs-sm resta, ma solo per le micro-etichette maiuscole
	   (intestazioni di tabella, etichette della scheda): li' il maiuscolo
	   regge il corpo piccolo, nel testo corrente no.

	   [18/09/2026, secondo giro] #ALE Misurati i due gestionali fianco a
	   fianco: il corpo era gia' identico (13px), ma Zapfix comprimeva le
	   righe - imbottitura delle celle 10px contro 12, riga 41px contro 45,
	   interlinea 19,5 contro 20 - e con due righe di testo per cella
	   invece di una l'effetto "scritto in piccolo" si sommava.

	   Quindi: tutta la scala sale di un gradino (13 -> 14px di corpo) e le
	   righe riprendono lo spazio di Zapix. Zapfix risulta cosi' un filo
	   piu' grande di Zapix, ed e' voluto: e' un gestionale che si usa in
	   cantiere, spesso da tablet. Per tornare esatti a Zapix basta
	   rimettere --sx-fs a .8125rem. */
	--sx-fs-sm:         .8125rem;    /* 13px: micro-etichette maiuscole */
	--sx-fs:            .875rem;     /* 14px: testo corrente */
	--sx-fs-lg:         1rem;        /* 16px: titoli di riquadro */
	--sx-fs-title:      1.5rem;      /* 24px: titolo di pagina */

	/* Altezza della barra azioni ancorata in fondo su telefono. */
	--sx-bar-h:         56px;

	/* ---- Barra di navigazione --------------------------------------
	   La barra scura e' il segno con cui Zapix si riconosce: resta.
	   [18/09/2026] #ALE Il blu e' ora esattamente quello di Zapix, e la
	   riga sotto la voce attiva prende la sfumatura del marchio. */
	--sx-nav-bg:        #091f36;
	--sx-nav-text:      rgba(255, 255, 255, .72);
	--sx-nav-text-on:   #ffffff;
	--sx-nav-hover-bg:  rgba(255, 255, 255, .10);
	--sx-nav-active:    #4fb5a2;
}

/* =====================================================================
   Base
   ===================================================================== */

body {
	background: var(--sx-bg);
	color: var(--sx-text);
	font-family: var(--sx-font-body);
	font-size: var(--sx-fs);
	line-height: 1.5385;   /* l'interlinea del tema, come in Zapix */
	-webkit-font-smoothing: antialiased;
}

/* [18/09/2026] #ALE I caratteri del marchio, come in Zapix: Titillium
   Web per il testo e per tutto cio' che si compila, Jura per i titoli.
   I campi non ereditano il carattere del body da soli, vanno nominati.
   Il tema Limitless dichiara Poppins con !important in piu' punti, per
   questo anche qui serve. */
body,
.form-control,
.custom-select,
input,
textarea,
select,
button,
.btn,
.select2-container,
.select2-selection__rendered {
	font-family: var(--sx-font-body) !important;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.modal-title,
.navbar-brand,
.page-title h4,
.sx-testata-titolo h4 {
	font-family: var(--sx-font-display) !important;
	letter-spacing: .01em;
}

a {
	color: var(--sx-accent);
}

a:hover, a:focus {
	color: var(--sx-accent-hover);
}

.text-muted {
	color: var(--sx-text-muted) !important;
}

/* Un anello di focus visibile: senza, chi lavora da tastiera si perde */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--sx-accent);
	outline-offset: 2px;
	box-shadow: none;
}

/* =====================================================================
   Navigazione
   ---------------------------------------------------------------------
   [10/09/2026] #ALE Barra scura, come e' sempre stata.

   L'avevo schiarita per portare l'attenzione sul contenuto. E' il segno
   con cui i clienti riconoscono Zapix, quindi resta scura: sotto,
   contenuto e testate sono chiari e il distacco fra le due zone si legge
   comunque, anzi meglio di prima quando la barra si confondeva con la
   testata bianca.

   Il logo bianco torna bianco: era stato invertito per il fondo chiaro.
   ===================================================================== */

.navbar.navbar-dark,
#navbar-menu {
	background: var(--sx-nav-bg) !important;
	border-bottom: 0;
	box-shadow: 0 1px 15px 1px rgba(69, 65, 78, .08);
}

#navbar-menu .navbar-nav-link,
.navbar-nav-link,
.nav-item.dropdown .dropdown-menu .dropdown-item {
	letter-spacing: .5px;   /* la spaziatura delle voci di menu di Zapix */
}

#navbar-menu .navbar-nav-link {
	color: var(--sx-nav-text) !important;
	font-weight: 500;
	border-radius: var(--sx-radius-sm);
}

#navbar-menu .navbar-nav-link:hover,
#navbar-menu .navbar-nav-link:focus {
	color: var(--sx-nav-text-on) !important;
	background: var(--sx-nav-hover-bg) !important;
}

#navbar-menu .navbar-nav-link.active,
#navbar-menu .navbar-nav-link.home:hover {
	color: var(--sx-nav-text-on) !important;
}

/* [18/09/2026] #ALE La riga sotto la voce attiva e' l'unico punto in cui
   la sfumatura del marchio compare per intero, come in Zapix: piu' corta
   della voce e con le punte arrotondate, cosi' si legge come un segno e
   non come un bordo. */
.navbar-dark .navbar-nav-underline .navbar-nav-link.active:before {
	background: var(--sx-gradient);
	background-color: var(--sx-nav-active);
	height: 3px;
	border-radius: 2px;
	left: 10px;
	right: 10px;
}

.navbar-nav-underline .navbar-nav-link:before {
	left: 10px;
	right: 10px;
}

.dropdown-menu {
	border: 1px solid var(--sx-border);
	border-radius: var(--sx-radius);
	box-shadow: var(--sx-shadow-pop);
	font-size: var(--sx-fs);
}

.dropdown-item:hover,
.dropdown-item:focus {
	background: var(--sx-accent-soft);
	color: var(--sx-accent-hover);
}

/* I menu di sezione della barra: scheda arrotondata staccata dalla barra,
   con le voci che si accendono a pastiglia. Come in Zapix. */
.navbar-nav .dropdown-menu {
	border: 1px solid var(--sx-border);
	border-radius: var(--sx-radius-lg);
	box-shadow: var(--sx-shadow-pop);
	padding: 8px;
	margin-top: 6px;
}

.navbar-nav .dropdown-menu .dropdown-item {
	border-radius: var(--sx-radius-sm);
}

/* La sidebar mobile e' la stessa barra, aperta di lato: stesso colore. */
.sidebar.sidebar-dark {
	background: var(--sx-nav-bg);
}

/* =====================================================================
   Intestazione di pagina
   ===================================================================== */

.page-header,
.page-header.page-header-light {
	background: var(--sx-surface);
	border-bottom: 1px solid var(--sx-border);
	box-shadow: none;
}

/* [21/09/2026] #ALE Sugli elenchi la testata prende lo sfondo della
   pagina e perde la riga sotto; sulle schede resta bianca.

   Sotto un elenco c'e' una tavola bianca a tutta larghezza: due
   fasce bianche attaccate si leggevano come un blocco solo, e la
   riga grigia in mezzo sembrava un graffio piu' che una divisione.
   Col fondo grigio la tavola si stacca da sola e non serve niente
   a separarle.

   Una scheda invece e' fatta di riquadri staccati su fondo grigio:
   li' la testata bianca fa da cappello e la riga la chiude.

   La classe la mette snippet/testata.php quando disegna la testata
   di un ListView. Gli elenchi non ancora migrati al componente
   restano bianchi, come il resto della loro pagina. */
.page-header.sx-testata-elenco {
	background: var(--sx-bg);
	border-bottom: 0;
}

.page-header .breadcrumb-line {
	background: transparent;
	border-bottom: 1px solid var(--sx-border);
}

.page-header .breadcrumb-item,
.page-header .breadcrumb-item a {
	color: var(--sx-text-muted);
	font-size: var(--sx-fs);
}

.page-header .breadcrumb-item.active {
	color: var(--sx-text-faint);
}

.page-title h4 {
	font-size: var(--sx-fs-title);
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--sx-text);
}

/* Il conteggio accanto al titolo e' un'informazione di servizio */
.sl-count,
#tot_list {
	color: var(--sx-text-faint);
	font-size: var(--sx-fs-sm);
	font-weight: 400;
}

/* =====================================================================
   Superfici
   ===================================================================== */

/* [18/09/2026] #ALE Angolo largo e ombra a due strati: e' la scheda di
   Zapix. L'ombra e' quella che stacca la scheda dal fondo, quindi il
   bordo puo' restare appena accennato. */
.card {
	background: var(--sx-surface);
	border: 1px solid var(--sx-border);
	border-radius: var(--sx-radius-lg);
	box-shadow: var(--sx-shadow);
}

.card-header {
	border-bottom: 1px solid var(--sx-border);
}

/* Il titolo del riquadro prende il carattere dei titoli. Il colore solo
   dove l'intestazione e' bianca: una ventina di viste ci mettono ancora
   un fondo pieno (bg-six-blackblue, bg-six-green, bg-six-yellow) e li'
   il testo deve restare quello che e'. */
.card-header:not([class*="bg-six-"]):not(.bg-yellow):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-dark) .card-title,
.card-header:not([class*="bg-six-"]):not(.bg-yellow):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-dark) > div > span {
	font-family: var(--sx-font-display);
	font-size: var(--sx-fs-lg);
	font-weight: 700;
	color: var(--sx-text);
}

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

.content {
	padding: 1rem 1.25rem 2rem;
}

/* =====================================================================
   Tabelle
   ---------------------------------------------------------------------
   Intestazioni piccole e sobrie, righe separate da una linea sottile,
   niente zebratura: con nove colonne la zebratura aggiunge rumore.
   ===================================================================== */

.table {
	color: var(--sx-text);
	font-size: var(--sx-fs);
	margin-bottom: 0;
}

/* [18/09/2026] #ALE La testata come in Zapix: nessuna fascia colorata,
   il bianco della scheda che prosegue e una riga sola, ben visibile, a
   dividerla dai dati. La fascia grigia la faceva sembrare una seconda
   barra di navigazione. Bianco e non trasparente perche' negli elenchi
   l'intestazione e' fissa (position: sticky in six-list.css) e sotto ci
   scorrono le righe. */
.table thead th,
.table_items thead th {
	background: var(--sx-surface);
	border-top: 0;
	/* Il grigio della riga di Zapix (#b7b7b7), scritto come velatura del
	   blu notte per restare nella famiglia del tema. */
	border-bottom: 1px solid rgba(9, 31, 54, .29);
	color: var(--sx-text-muted);
	font-size: var(--sx-fs-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	white-space: nowrap;
	vertical-align: middle;
}

/* [18/09/2026] #ALE L'imbottitura e' quella di Zapix (12px): a .625rem
   le righe stavano in 41px contro i suoi 45, e una tabella piu' fitta si
   legge come una tabella scritta piu' piccola anche quando il corpo del
   testo e' identico. */
.table tbody td {
	border-top: 0;
	border-bottom: 1px solid var(--sx-border);
	vertical-align: middle;
	padding-top: .75rem;
	padding-bottom: .75rem;
}

.table tbody tr:last-child td {
	border-bottom: 0;
}

.table tbody tr:hover {
	background: var(--sx-surface-alt);
}

.table-striped tbody tr:nth-of-type(odd) {
	background: transparent;
}

/* =====================================================================
   Pulsanti
   ---------------------------------------------------------------------
   Una sola azione piena per schermata: il resto in secondo piano.
   ===================================================================== */

.btn {
	border-radius: var(--sx-radius-sm);
	font-size: var(--sx-fs);
	font-weight: 500;
	padding: .4375rem .875rem;
	transition: background-color .12s, border-color .12s, color .12s;
}

/* [18/09/2026] #ALE La pillola di Zapix. Solo per i pulsanti con
   etichetta: su un pulsante quadrato di sola icona l'angolo tondo lo
   trasformerebbe in un cerchio, e le icone di riga sono decine. */
.btn:not(.btn-icon):not(.btn-float):not(.rounded-round) {
	border-radius: var(--sx-radius-pill);
	font-weight: 600;
}

.btn-icon {
	border-radius: var(--sx-radius-sm);
}

/* Un pulsante attaccato a un campo resta squadrato dal lato del campo,
   altrimenti si stacca e i due elementi non sembrano piu' un gruppo. */
.input-group-append .btn,
.input-group-append .btn:not(.btn-icon):not(.btn-float) {
	border-radius: 0 var(--sx-radius) var(--sx-radius) 0;
}

.input-group-prepend .btn,
.input-group-prepend .btn:not(.btn-icon):not(.btn-float) {
	border-radius: var(--sx-radius) 0 0 var(--sx-radius);
}

.btn-sm {
	padding: .3125rem .625rem;
	font-size: var(--sx-fs-sm);
}

.btn-light {
	background: var(--sx-surface);
	border-color: var(--sx-border-strong);
	color: var(--sx-text-soft);
}

.btn-light:hover {
	background: var(--sx-surface-alt);
	border-color: var(--sx-border-strong);
	color: var(--sx-text);
}

/* ---- Rimappatura delle classi gia' presenti nel progetto ------------
   Sono usate in decine di viste: ridefinirle qui e' cio' che porta il
   nuovo aspetto anche dove il markup non e' stato toccato. */

.bg-six-lightblue,
.btn-six-lightblue,
.bg-six-indaco,
.bg-six-darkerblue,
.bg-six-blue {
	background-color: var(--sx-accent) !important;
	color: #fff !important;
}

.border-six-lightblue,
.border-six-indaco,
.border-six-darkerblue {
	border-color: var(--sx-accent) !important;
}

a.bg-six-lightblue:hover,
a.bg-six-indaco:hover,
button.bg-six-lightblue:hover,
button.bg-six-indaco:hover,
.btn.bg-six-lightblue:hover,
.btn.bg-six-indaco:hover {
	background-color: var(--sx-accent-hover) !important;
	border-color: var(--sx-accent-hover) !important;
}

.text-six-lightblue,
.text-six-indaco,
.text-six-blue {
	color: var(--sx-accent) !important;
}

/* [17/09/2026] #ALE text-six-darkerblue e -300 non sono una tinta
   qualsiasi: nel progetto sono la classe "modifica". Stanno su 37
   btnEditRecord e su quasi tutto il resto degli ajaxEdit, ajaxTaskEdit,
   editMetadata, mi-mode-edit. Portandole sull'accento come le altre,
   Nuovo e Modifica finivano identici: da qui in giu' seguono l'ardesia. */

.text-six-blackblue {
	color: var(--sx-text-soft) !important;
}

.bg-six-blackblue {
	background-color: var(--sx-text) !important;
}

/* =====================================================================
   Colore per funzione
   ---------------------------------------------------------------------
   [17/09/2026] #ALE Una regola sola: due pulsanti che fanno la stessa
   cosa hanno lo stesso colore, in tutto il gestionale.

       nuovo / crea   accento petrolio   var(--sx-accent)
       modifica       ardesia            var(--sx-edit)
       elimina        rosso              var(--sx-danger)
       duplica        ocra               var(--sx-warn)
       dettaglio      neutro
       export         secondario, bianco

   Prima non era cosi': "Nuovo" era bg-six-lightblue in 36 viste e
   btn-primary in 31, "Modifica" era text-six-darkerblue-300 in 37 punti
   e btn-info (ciano) in 13. Due funzioni, cinque trattamenti.

   Si rimappa qui invece di rincorrere 184 viste: le classi che i vari
   moduli usano gia' (btnEditRecord, ajaxTaskEdit, btn_create...) fanno
   da aggancio semantico. Per il codice nuovo bastano .sx-nuovo e
   .sx-modifica, che non portano con se' nessuna tinta storica.

   Le icone dentro le righe delle liste restano fuori da qui: a riposo
   sono grigie e prendono il colore della funzione solo al passaggio del
   mouse. Lo decide la sezione "Azioni di riga" piu' sotto, che vince per
   specificita'. Su cinquanta righe quattro colori fissi sono trecento
   macchie: il colore serve quando stai per usarlo.
   ===================================================================== */

/* ---- Nuovo / Crea: un trattamento solo ------------------------------
   [17/09/2026] #ALE Un "Nuovo" si veste in un modo solo, punto: stesso
   pieno petrolio sia che sia l'azione principale della pagina, sia che
   stia nell'intestazione di un riquadro. Il primo tentativo distingueva
   pieno e contornato per gerarchia, ma in una barra di quattro pulsanti
   il contorno non si leggeva come "lo stesso gesto, meno importante": si
   leggeva come un'altra cosa. Niente blu-e-bianco, un colore.

   .btn ripetuto nel selettore serve a battere .sl-action-secondary, che
   ListView appiccica a ogni azione dopo la prima e che dipinge di bianco.

   btn-primary entra qui perche' nel progetto e' il pulsante d'azione
   principale (salva, conferma, nuovo): tenerlo al blu Bootstrap voleva
   dire avere due "primari" di colore diverso nella stessa schermata. */
.btn.sx-nuovo,
.btn.btn-primary,
.btn.btn_create,
.btn.sl-action-primary {
	background-color: var(--sx-accent) !important;
	border-color: var(--sx-accent) !important;
	color: #fff !important;
}

.btn.sx-nuovo:hover,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:not(:disabled):not(.disabled):active,
.btn.btn_create:hover,
.btn.sl-action-primary:hover {
	background-color: var(--sx-accent-hover) !important;
	border-color: var(--sx-accent-hover) !important;
	color: #fff !important;
}

/* ---- Chiudi / Completa ----------------------------------------------
   [17/09/2026] #ALE "Chiudi intervento" portava bg-six-indaco, che la
   rimappatura manda sull'accento: usciva identico a "Nuova filiale".
   Sono due gesti opposti - uno apre un record, l'altro lo conclude - e
   non possono avere lo stesso colore. Prende il verde degli stati
   conclusi, lo stesso che la pastiglia "chiuso" ha in lista. */
.btn.sx-conferma,
.btn.bg-six-indaco.btnChiudiIntervento,
.btn.bg-six-indaco.btnConfermaChiusura {
	background-color: var(--sx-ok) !important;
	border-color: var(--sx-ok) !important;
	color: #fff !important;
}

.btn.sx-conferma:hover,
.btn.bg-six-indaco.btnChiudiIntervento:hover,
.btn.bg-six-indaco.btnConfermaChiusura:hover {
	background-color: #0f4e2f !important;
	border-color: #0f4e2f !important;
	color: #fff !important;
}

/* ---- Modifica: tinta unica ------------------------------------------
   Versione a testo/icona: e' la piu' diffusa, la portano le classi
   storiche text-six-darkerblue*. */
.sx-modifica,
.text-six-darkerblue,
.text-six-darkerblue-300 {
	color: var(--sx-edit) !important;
}

/* Versione piena: erano btn-info (ciano), bg-six-indaco e un
   btn-outline-secondary. Il selettore ripete .btn e la classe di
   funzione per battere in specificita' la rimappatura dei bg-six-*. */
.btn.sx-modifica-piena,
.btn.btn-info.btnEditRecord,
.btn.btn-info.ajaxTaskEdit,
.btn.btn-outline-secondary.btnEditRecord,
.btn.bg-six-indaco.btnEditRecord {
	background-color: var(--sx-edit) !important;
	border-color: var(--sx-edit) !important;
	color: #fff !important;
}

.btn.sx-modifica-piena:hover,
.btn.btn-info.btnEditRecord:hover,
.btn.btn-info.ajaxTaskEdit:hover,
.btn.btn-outline-secondary.btnEditRecord:hover,
.btn.bg-six-indaco.btnEditRecord:hover {
	background-color: var(--sx-edit-hover) !important;
	border-color: var(--sx-edit-hover) !important;
	color: #fff !important;
}

/* ---- Elimina: un rosso solo -----------------------------------------
   [17/09/2026] #ALE Ce n'erano tre: il rosso Bootstrap di btn-danger nel
   modale di conferma, l'arancio di btn-warning su 21 pulsanti "Delete"
   dei moduli budget/crm/fafiles, e il var(--sx-danger) del tema sul
   cestino delle righe. Stessa azione, tre colori. Ora e' uno.
   btn-warning.btn_delete cade qui e non fra gli avvisi: quel pulsante
   cancella un record, non segnala un rischio. */
.btn.btn-danger,
.btn.btn-warning.btn_delete,
.btn.sx-elimina {
	background-color: var(--sx-danger) !important;
	border-color: var(--sx-danger) !important;
	color: #fff !important;
}

.btn.btn-danger:hover,
.btn.btn-warning.btn_delete:hover,
.btn.sx-elimina:hover {
	background-color: #8e221a !important;
	border-color: #8e221a !important;
	color: #fff !important;
}

/* ---- Avvisi e conferme: le tinte del tema, non quelle di Bootstrap --- */
.btn.btn-warning {
	background-color: var(--sx-warn) !important;
	border-color: var(--sx-warn) !important;
	color: #fff !important;
}

.btn.btn-success {
	background-color: var(--sx-ok) !important;
	border-color: var(--sx-ok) !important;
	color: #fff !important;
}

/* I pulsanti export erano verde pieno: diventano secondari, perche'
   non sono l'azione principale della pagina */
.bg-success.exportToCSV,
.bg-success.exportToSAP,
.sl-action-secondary {
	background: var(--sx-surface) !important;
	border-color: var(--sx-border-strong) !important;
	color: var(--sx-text-soft) !important;
}

.bg-success.exportToCSV:hover,
.bg-success.exportToSAP:hover,
.sl-action-secondary:hover {
	background: var(--sx-surface-alt) !important;
	color: var(--sx-text) !important;
}

/* Il pulsante-filtro nelle intestazioni: da pieno colorato a discreto */
.sl-filter-btn,
th .btn.btn-icon.btn-outline.rounded-round {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--sx-text-muted) !important;
	width: 1.5rem;
	height: 1.5rem;
	min-width: 1.5rem;
}

.sl-filter-btn:hover,
th .btn.btn-icon.btn-outline.rounded-round:hover,
.sl-filter-btn[aria-expanded="true"] {
	background: var(--sx-accent-soft) !important;
	color: var(--sx-accent) !important;
}

/* ---- Azioni di riga -------------------------------------------------
   Erano quattro icone di quattro colori diversi (blu, blu scuro, arancio,
   rosso) ripetute su ogni riga: con cinquanta righe diventano trecento
   macchie di colore e non si distingue piu' nulla. Restano grigie finche'
   non le si punta, e solo allora dichiarano cosa fanno. */

.sl-col-actions .btn,
.table_items .btn-group .btn.btn-sm {
	color: var(--sx-text-muted) !important;
	background: transparent;
	border: 0;
	padding: .25rem .375rem !important;
}

.sl-col-actions .btn:hover,
.table_items .btn-group .btn.btn-sm:hover {
	background: var(--sx-surface-alt);
	color: var(--sx-text) !important;
}

/* In general.css l'icona del cestino e' rossa fissa e schiarisce al
   passaggio del mouse: il contrario di quello che serve. Il rosso e' un
   avviso, e un avviso ripetuto su ogni riga smette di essere tale. */
.btnDeleteRecord i,
.btnDeleteTask i,
.ajaxWidgetDelete i {
	color: inherit;
}

.sl-col-actions .btn_delete:hover,
.sl-col-actions .btn_delete:hover i,
.table_items .btn-group .btn_delete:hover,
.btnDeleteRecord:hover i,
.btnDeleteTask:hover i,
.ajaxWidgetDelete:hover i {
	background: transparent;
	color: var(--sx-danger) !important;
}

.sl-col-actions .btn_delete:hover,
.table_items .btn-group .btn_delete:hover {
	background: var(--sx-danger-soft);
}

/* Al passaggio del mouse ogni icona dichiara la sua funzione con lo
   stesso colore che quella funzione ha sui pulsanti con etichetta:
   dettaglio accento, modifica ardesia, duplica ocra, elimina rosso.
   [17/09/2026] #ALE Prima dettaglio e modifica accendevano lo stesso
   accento, quindi due gesti diversi si illuminavano uguali. */

.sl-col-actions .btnInfoRecord:hover,
.table_items .btn-group .btnInfoRecord:hover {
	background: var(--sx-accent-soft);
	color: var(--sx-accent) !important;
}

.sl-col-actions .btnEditRecord:hover,
.table_items .btn-group .btnEditRecord:hover {
	background: var(--sx-edit-soft);
	color: var(--sx-edit) !important;
}

.sl-col-actions .btn_duplicate:hover,
.table_items .btn-group .btn_duplicate:hover {
	background: var(--sx-warn-soft);
	color: var(--sx-warn) !important;
}

/* =====================================================================
   Stati
   ---------------------------------------------------------------------
   Pillole tenui invece di blocchi saturi: in una lista di cinquanta
   righe il colore pieno stanca e smette di segnalare.
   ===================================================================== */

.badge {
	border-radius: var(--sx-radius-pill);
	padding: .25em .625em;
	font-size: var(--sx-fs-sm);
	font-weight: 700;
	letter-spacing: .02em;
}

.badge-success, .badge-teal, .bg-success.badge {
	background: var(--sx-ok-soft) !important;
	color: var(--sx-ok) !important;
}

.badge-danger, .bg-danger.badge {
	background: var(--sx-danger-soft) !important;
	color: var(--sx-danger) !important;
}

.badge-warning, .bg-warning.badge {
	background: var(--sx-warn-soft) !important;
	color: var(--sx-warn) !important;
}

.badge-info, .badge-lightblue, .badge-indaco,
.badge-blue, .badge-darkerblue, .badge-blackblue {
	background: var(--sx-info-soft) !important;
	color: var(--sx-info) !important;
}

/* =====================================================================
   Tab
   ===================================================================== */

.nav-tabs {
	border-bottom: 1px solid var(--sx-border);
}

.nav-tabs .nav-link {
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: var(--sx-text-muted);
	font-weight: 500;
	padding: .625rem 1rem;
	background: transparent;
}

.nav-tabs .nav-link:hover {
	color: var(--sx-text);
	border-bottom-color: var(--sx-border-strong);
	background: transparent;
}

/* [18/09/2026] #ALE Come in Zapix: la linguetta attiva la dice il testo
   scuro in grassetto, il colore resta sulla riga sotto. */
.nav-tabs .nav-link.active {
	color: var(--sx-text);
	background: transparent;
	font-weight: 700;
	border-bottom: 3px solid var(--sx-accent);
}

/* ---- Interruttore Aperto / Chiuso -----------------------------------
   [18/09/2026] #ALE Lo stesso controllo a segmenti di Zapix (li' e'
   "Aperto / Archiviati"). Non sono linguette: non aprono una sezione
   diversa della pagina, scelgono quali record vede l'elenco sotto. Da
   linguette si legge male proprio per quello, e la riga sotto la
   linguetta attiva finiva incollata al bordo della scheda.

   Il markup e' gia' quello giusto - ul.nav-tabs.list-status, generato da
   components/list/shell.php - quindi qui basta il foglio di stile e
   l'interruttore compare in tutti gli elenchi migrati a ListView. */

.nav-tabs.list-status {
	display: flex;
	width: max-content;
	max-width: 100%;
	flex-wrap: nowrap;
	gap: 3px;
	padding: 3px;
	/* !important: i fogli di pagina azzerano il bordo di .nav-tabs con
	   "border-bottom: 0 !important" e vincerebbero sullo shorthand */
	border: 1px solid var(--sx-border) !important;
	border-radius: var(--sx-radius);
	background: rgba(9, 31, 54, .05);
	margin-bottom: 12px !important;
}

.nav-tabs.list-status .nav-item {
	margin-bottom: 0 !important;
}

.nav-tabs.list-status .nav-link {
	border: 0 !important;
	/* bootstrap mette -1px alle .nav-tabs .nav-link: sporgeva sotto il
	   contenitore coprendone il bordo */
	margin-bottom: 0 !important;
	border-radius: var(--sx-radius-sm) !important;
	background: transparent !important;
	color: var(--sx-text-muted) !important;
	font-size: var(--sx-fs);
	font-weight: 600;
	padding: 6px 15px !important;
}

.nav-tabs.list-status .nav-link:hover:not(.active) {
	color: var(--sx-text) !important;
}

.nav-tabs.list-status .nav-link.active {
	background: var(--sx-surface) !important;
	color: var(--sx-accent) !important;
	/* un'ombra corta: quella delle schede, su una pastiglia alta 30px,
	   sbaverebbe invece di sollevarla */
	box-shadow: 0 1px 2px rgba(9, 31, 54, .10), 0 2px 6px rgba(9, 31, 54, .06);
}

/* =====================================================================
   Campi
   ===================================================================== */

.form-control,
.custom-select,
.select2-selection,
.tokenfield.form-control {
	border: 1px solid var(--sx-border-strong);
	border-radius: var(--sx-radius);
	color: var(--sx-text);
	font-size: var(--sx-fs);
}

.form-control:focus,
.select2-container--focus .select2-selection {
	border-color: var(--sx-accent);
	box-shadow: 0 0 0 3px var(--sx-accent-soft);
}

.form-control::placeholder {
	color: var(--sx-text-muted);
}

label {
	color: var(--sx-text-soft);
	font-size: var(--sx-fs);
	font-weight: 500;
}

.input-group-text {
	background: var(--sx-surface-alt);
	border-color: var(--sx-border-strong);
	color: var(--sx-text-muted);
}

/* =====================================================================
   Paginazione
   ===================================================================== */

.pagination .page-link {
	border: 1px solid var(--sx-border);
	border-radius: var(--sx-radius-sm);
	margin-left: .25rem;
	color: var(--sx-text-soft);
	font-size: var(--sx-fs);
	font-weight: 600;
}

.pagination .page-link:hover {
	background: var(--sx-surface-alt);
	color: var(--sx-text);
}

.pagination .page-item.active .page-link {
	background: var(--sx-accent);
	border-color: var(--sx-accent);
	color: #fff;
}

/* =====================================================================
   Modali
   ===================================================================== */

.modal-content {
	border: 0;
	border-radius: var(--sx-radius-lg);
	overflow: hidden;   /* senza, l'intestazione colorata sborda dall'angolo */
	box-shadow: var(--sx-shadow-pop);
}

.modal-header {
	border-bottom: 1px solid var(--sx-border);
	padding: 1rem 1.25rem;
}

/* [18/09/2026] #ALE L'intestazione dei modali torna colorata, come in
   Zapix: le quarantacinque finestre che portano bg-primary prendono
   l'accento del marchio invece del bianco. E' il punto in cui le due
   applicazioni si somigliavano di meno. */
.modal-header.bg-primary {
	background: var(--sx-accent) !important;
	border-bottom: 0;
	color: #fff !important;
}

.modal-header.bg-primary .modal-title,
.modal-header.bg-primary .modal-title h5,
.modal-header.bg-primary .close {
	color: #fff !important;
}

.modal-header .modal-title,
.modal-header .modal-title h5 {
	font-size: 1.0625rem;   /* 17px, come il titolo dei modali di Zapix */
	font-weight: 700;
	margin-bottom: 0;
}

.modal-header .close {
	color: var(--sx-text-muted);
	text-shadow: none;
	opacity: .85;
}

.modal-header .close:hover {
	opacity: 1;
}

.modal-footer {
	border-top: 1px solid var(--sx-border);
	padding: .875rem 1.25rem;
}

/* =====================================================================
   Dettaglio record
   ---------------------------------------------------------------------
   Le schede show mettono etichetta e valore uno sopra l'altro: qui
   l'etichetta diventa piccola e sbiadita e il valore prende peso, cosi'
   si scorre la scheda leggendo solo i valori.
   ===================================================================== */

.details .text-muted {
	display: block;
	font-size: var(--sx-fs-sm);
	text-transform: uppercase;
	letter-spacing: .03em;
	margin-bottom: .125rem;
}

.details .text-show {
	display: block;
	font-size: var(--sx-fs-lg);
	color: var(--sx-text);
}

/* =====================================================================
   Bersagli tocco
   ===================================================================== */

@media (hover: none) and (pointer: coarse) {

	.btn,
	.nav-tabs .nav-link,
	.dropdown-item {
		min-height: 2.5rem;
		display: inline-flex;
		align-items: center;
	}

	.dropdown-item {
		display: flex;
	}
}

/* =====================================================================
   Intestazione di pagina e barra azioni
   ---------------------------------------------------------------------
   Stavano in six-list.css, ma non sono specifiche degli elenchi: le usa
   anche la home "Oggi", che non carica quel foglio. Qui valgono ovunque.
   ===================================================================== */

.sl-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .5rem;
	flex-wrap: wrap;
}

.sl-actions .btn {
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Ricerca degli elenchi

   [10/09/2026] #ALE Era `flex: 1 1 220px` senza tetto: si prendeva tutto
   lo spazio libero della testata e su uno schermo largo diventava un
   campo da 830px per scriverci "verona". Ora ha una misura sua e lo
   spazio che avanza resta vuoto, che e' il suo mestiere.

   La lente sta dentro il campo, a sinistra: prima era un riquadro
   grigio attaccato a destra, che sembrava un pulsante ma non lo era -
   la ricerca parte da sola mentre si scrive.
   --------------------------------------------------------------------- */

.sl-search {
	position: relative;
	flex: 0 1 320px;
	min-width: 200px;
	max-width: 320px;
}

.sl-search-lente {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
	line-height: 1;
	color: var(--sx-text-muted);
	pointer-events: none;   /* non e' un pulsante: il clic passa al campo */
}

/* [18/09/2026] #ALE A pillola, come le ricerche di Zapix. */
.sl-search-campo {
	width: 100%;
	height: 36px;
	padding: 0 .875rem 0 2.125rem;
	border: 1px solid var(--sx-border);
	border-radius: var(--sx-radius-pill);
	background: var(--sx-surface);
	box-shadow: 0 1px 2px rgba(9, 31, 54, .06);
	color: var(--sx-text);
	font-size: var(--sx-fs);
}

.sl-search-campo::placeholder {
	color: var(--sx-text-muted);
	opacity: 1;             /* Firefox lo sbiadisce di suo */
}

.sl-search-campo:focus {
	border-color: var(--sx-accent);
	background: var(--sx-surface);
	box-shadow: 0 0 0 3px var(--sx-accent-soft);
}

/* La crocetta nativa di type="search" resta: svuotando il campo scatta
   l'evento input e l'elenco torna completo da solo. */
.sl-search-campo::-webkit-search-cancel-button {
	cursor: pointer;
}

/* ---------------------------------------------------------------------
   Ricerca degli elenchi non migrati

   [18/09/2026] #ALE Gli elenchi passati a ListView hanno la .sl-search
   qui sopra. Gli altri sedici - parti, edifici, documenti, task,
   commesse... - usano ancora il markup storico #form_text: campo
   squadrato piu' un riquadro grigio con la lente attaccato a destra, che
   sembra un pulsante ma non lo e' (si cerca a invio).

   Qui diventa la stessa pillola, cosi' "cerca" e' la stessa cosa in
   tutto il gestionale senza toccare sedici viste. La lente resta a
   destra, dove il markup la mette: spostarla dentro il campo a sinistra
   vorrebbe dire riscriverle una per una.

   Gli !important servono contro i fogli di pagina: trentasei
   custom_pages/<modulo>/index.css dichiarano l'imbottitura di
   .form-control1 con !important.
   --------------------------------------------------------------------- */

#form_text .input-group {
	flex-wrap: nowrap;
	background: var(--sx-surface);
	border: 1px solid var(--sx-border);
	border-radius: var(--sx-radius-pill);
	box-shadow: 0 1px 2px rgba(9, 31, 54, .06);
	overflow: hidden;
}

#form_text .input-group:focus-within {
	border-color: var(--sx-accent);
	box-shadow: 0 0 0 3px var(--sx-accent-soft);
}

/* Il contenitore del campo si prende lo spazio che avanza: alcuni fogli
   di pagina gli danno una larghezza fissa in percentuale. */
#form_text .select2-search--dropdown {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

#form_text .form-control1 {
	width: 100%;
	height: 36px;
	padding: 0 .25rem 0 1rem !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--sx-text);
	font-size: var(--sx-fs);
}

#form_text .form-control1::placeholder {
	color: var(--sx-text-muted);
	opacity: 1;
}

#form_text .input-group-append .input-group-text {
	border: 0 !important;
	background: transparent !important;
	padding-left: .375rem;
	padding-right: .875rem;
	color: var(--sx-text-faint);
}

#form_text .input-group-append .input-group-text i {
	font-size: 18px;
}

@media (max-width: 767.98px) {

	/* [10/09/2026] #ALE La barra ancorata in fondo e' su richiesta, non piu'
	   automatica per ogni .sl-actions.

	   Ha senso dove c'e' una azione principale sola e ovvia ("Nuovo
	   intervento" in cima a un elenco): resta sotto il pollice mentre si
	   scorre. Non ha senso sulla scheda di un record, dove le azioni sono
	   quattro e pari fra loro: li' inchiodava in fondo allo schermo una
	   fila di pulsanti che copriva il contenuto.

	   I colori arrivano dai token --sx-*, definiti in questo stesso file.
	   Prima erano --sl-*, che li definisce six-list.css: sulle pagine che
	   non lo caricano (la home "Oggi", la scheda intervento) la barra
	   restava trasparente e senza bordo, sovrapposta al testo. */
	.sl-actions-fissa {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1030;
		margin: 0;
		padding: .5rem .75rem;
		background: var(--sx-surface);
		border-top: 1px solid var(--sx-border);
		box-shadow: 0 -2px 8px rgba(9, 31, 54, .08);
		justify-content: space-between;
		min-height: var(--sx-bar-h);
	}

	/* Le azioni non ancorate (schede) partono da sinistra: allineate a
	   destra, andando a capo lasciavano un vuoto in mezzo alla riga. */
	.sl-actions:not(.sl-actions-fissa) {
		justify-content: flex-start;
		margin-top: .5rem;
	}

	/* L'azione principale prende lo spazio che avanza */
	.sl-actions .sl-action-primary {
		flex: 1 1 auto;
		text-align: center;
	}

	/* Le azioni secondarie si stringono, ma tengono l'etichetta e perdono
	   l'icona: "CSV" dice cosa fa il pulsante, un glifo di download no. */
	.sl-actions .sl-action-secondary {
		flex: 0 0 auto;
		padding-left: .625rem;
		padding-right: .625rem;
	}

	.sl-actions .sl-action-secondary i {
		display: none;
	}

	/* Spazio in fondo alla pagina, altrimenti la barra copre l'ultima scheda.
	   Sul contenitore e non sui figli: la home "Oggi" porta .sl-has-actions
	   ma non ha ne' .sl-list ne' .sl-pagination, quindi restava scoperta. */
	.content.sl-has-actions {
		padding-bottom: calc(var(--sx-bar-h) + 1rem);
	}
}



.sl-count {
	color: var(--sx-text-faint);
	font-size: var(--sx-fs);
	font-weight: 400;
}

/* =====================================================================
   Celle a due livelli e stati operativi
   ---------------------------------------------------------------------
   Nelle liste una cella porta spesso due informazioni: il dato che
   identifica la riga e il suo contorno. Prima erano due span identici e
   il colpo d'occhio non distingueva l'uno dall'altro.
   ===================================================================== */

.sl-riga-titolo {
	display: block;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sx-text);
}

/* [17/09/2026] #ALE La classe la portano ora anche gli elenchi non
   migrati al componente: in tutte le liste il titolo della riga e' il
   collegamento alla scheda dell'elemento, non piu' solo l'icona in fondo
   alla riga. La sottolineatura al passaggio serve proprio li': dentro una
   tabella fitta il solo colore non basta a dire che il testo si clicca. */
a.sl-riga-titolo {
	color: var(--sx-accent);
	text-decoration: none;
}

a.sl-riga-titolo:hover,
a.sl-riga-titolo:focus {
	color: var(--sx-accent-hover);
	text-decoration: underline;
}

/* [18/09/2026] #ALE La seconda riga della cella porta contenuto vero
   (l'impianto, l'indirizzo), non un'etichetta: torna al corpo del testo e
   si distingue dal titolo per colore e peso, non per dimensione. */
.sl-riga-sotto {
	display: block;
	margin-top: .0625rem;
	color: var(--sx-text-soft);
	font-size: var(--sx-fs);
}

/* [18/09/2026] #ALE Quando anche la seconda riga di una cella e' un
   collegamento, prende l'accento gia' a riposo, come il titolo della
   riga: in questo gestionale il testo che si clicca e' colorato, e un
   link che si scopre solo passandoci sopra non lo trova nessuno. La
   sottolineatura resta per il passaggio del mouse. */
a.sl-riga-sotto {
	color: var(--sx-accent);
	text-decoration: none;
	/* .sl-riga-sotto e' un blocco: senza questo il collegamento occupa
	   tutta la larghezza della cella e si clicca anche nel vuoto a destra
	   del nome */
	width: fit-content;
	max-width: 100%;
}

a.sl-riga-sotto:hover,
a.sl-riga-sotto:focus {
	color: var(--sx-accent-hover);
	text-decoration: underline;
}

/* Una scadenza gia' passata si vede senza doverla cercare */
.sl-data-ritardo {
	color: var(--sx-danger) !important;
}

/* ---- Stato operativo -------------------------------------------------
   Non "aperto/chiuso" ma quello che serve a chi lavora. Pillole tenui:
   in una lista di cinquanta righe il colore pieno smette di segnalare. */

.sl-stato {
	display: inline-block;
	padding: .125rem .5625rem;
	border-radius: var(--sx-radius-pill);
	font-size: var(--sx-fs-sm);
	font-weight: 600;
	white-space: nowrap;
}

.sl-stato-ritardo  { background: var(--sx-danger-soft); color: var(--sx-danger); }
.sl-stato-scadenza { background: var(--sx-warn-soft);   color: var(--sx-warn); }
.sl-stato-carico   { background: var(--sx-info-soft);   color: var(--sx-info); }
.sl-stato-chiuso   { background: var(--sx-ok-soft);     color: var(--sx-ok); }
/* "Aperto" ha lo stesso grigio dello sfondo pagina: sulle righe bianche
   della lista si legge come pastiglia, ma nella testata della scheda, che
   e' gia' grigia, spariva e sembrava testo semplice. Il bordo la tiene
   riconoscibile su qualunque fondo senza aggiungere colore. */
.sl-stato-aperto   { background: var(--sx-bg);          color: var(--sx-text-soft); box-shadow: inset 0 0 0 1px var(--sx-border); }

/* Un dato mancante che blocca un automatismo va segnalato, non lasciato
   in bianco: cdc_pref vuoto fa nascere gli interventi senza centro di costo */
.sl-manca {
	color: var(--sx-warn);
	font-size: var(--sx-fs);
}


/* =====================================================================
   Testata di pagina, versione compatta
   ---------------------------------------------------------------------
   [10/09/2026] #ALE Prima erano due fasce sovrapposte: una per le
   briciole di pane (alta 40px, che su un elenco conteneva "Home / Lista
   Interventi" e nient'altro) e una per il titolo, che diceva di nuovo
   "Lista Interventi". Ora e' una barra sola, e le briciole compaiono
   soltanto dove indicano davvero un percorso.

   Il markup lo genera utils/main/snippet/testata.php, unico per le 184
   viste classiche e per il componente ListView.
   ===================================================================== */

.sx-testata {
	padding: 10px 1.25rem 12px;
}

/* ---- Briciole di pane ---- */

.sx-briciole {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 5px;
	font-size: var(--sx-fs);
	line-height: 1.4;
}

.sx-briciola {
	color: var(--sx-text-muted);
	text-decoration: none;
}

a.sx-briciola:hover {
	color: var(--sx-accent);
	text-decoration: underline;
}

.sx-briciola.sx-qui { color: var(--sx-text-soft); }

.sx-briciola i {
	font-size: 14px;
	vertical-align: -2px;
}

.sx-briciola-sep { color: var(--sx-border-strong); }

/* ---- Riga del titolo ---- */

.sx-testata-riga {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .75rem;
}

.sx-testata-titolo {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .625rem;
	flex: 1 1 auto;
	min-width: 0;
}

.sx-testata-titolo h4 {
	margin: 0;
	font-size: var(--sx-fs-title);
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--sx-text);
	min-width: 0;
}

/* ---- Riga con un blocco al centro ----

   [21/09/2026] #ALE Negli elenchi il blocco centrale e' la ricerca, e
   fino a ieri non stava al centro di niente: il titolo cresceva a
   riempire la riga e la spingeva a ridosso dei pulsanti, dove sembrava
   una quarta azione invece del campo con cui si inizia a lavorare.

   Qui titolo e azioni prendono due fette uguali dello spazio che avanza
   (stessa base 0, stesso grow), quindi la ricerca cade esattamente a
   meta' testata, sopra il centro della tabella.

   Quando la riga si stringe la simmetria e' la prima cosa che si
   perde, non il contenuto: titolo e azioni non scendono sotto il
   proprio max-content, quindi a cedere e' la ricerca, che si accorcia
   fino a 200px, e il campo scivola di qualche decina di pixel. Senza
   quel freno erano i tre pulsanti degli Interventi ad andare a capo
   gia' sotto i 1040px di contenuto, cioe' su un portatile con la barra
   laterale aperta: una riga alta il doppio per tenere un campo al
   centro e' un cattivo affare.

   Solo da tablet in su: sotto i 768px la ricerca prende la riga intera
   e le azioni sono nella barra ancorata in fondo, fuori da questa riga. */

/* Riempie il posto delle azioni quando non ce ne sono: senza, il
   blocco centrale sarebbe l'ultimo della riga e finirebbe a destra.
   Sotto i 768px non c'e' niente da bilanciare e lascerebbe solo un
   vuoto di 12px in fondo alla riga. */
.sx-testata-contrappeso { display: none; }

@media (min-width: 768px) {

	.sx-testata-centro > .sx-testata-contrappeso { display: block; }

	.sx-testata-centro > .sx-testata-titolo,
	.sx-testata-centro > .sl-actions,
	.sx-testata-centro > .sx-testata-contrappeso {
		flex: 1 1 0;
	}

	/* Nessuno dei due scende sotto il proprio contenuto: e' questo che
	   decide chi cede per primo quando la riga si stringe. */
	.sx-testata-centro > .sx-testata-titolo,
	.sx-testata-centro > .sl-actions {
		min-width: max-content;
	}
}

.sx-indietro {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-left: -6px;
	border-radius: var(--sx-radius-sm);
	color: var(--sx-text-soft);
	flex-shrink: 0;
}

.sx-indietro:hover {
	background: var(--sx-surface-alt);
	color: var(--sx-accent);
}

.sx-indietro i { font-size: 18px; }

/* Sottotitolo dentro il titolo: va a capo da solo. */
.sx-sottotitolo {
	display: block;
	font-size: var(--sx-fs);
	font-weight: 400;
	color: var(--sx-text-muted);
}

@media (max-width: 767.98px) {

	.sx-testata { padding: 8px .875rem 10px; }

	.sx-testata-titolo h4 { font-size: 1.25rem; }

	/* La ricerca prende tutta la riga: su telefono e' la prima cosa che
	   si usa in un elenco lungo.

	   Serve anche togliere il max-width, altrimenti il tetto di 320px del
	   desktop vince sul flex-basis e il campo resta stretto in mezzo allo
	   schermo. */
	.sx-testata-riga .sl-search {
		flex: 1 1 100%;
		min-width: 0;
		max-width: none;
	}

	/* Bersaglio comodo col pollice. */
	.sl-search-campo { height: 40px; }
}

/* =====================================================================
   Notifiche
   ---------------------------------------------------------------------
   [18/09/2026] #ALE Il pannello delle notifiche era rimasto alla vecchia
   tavolozza (grafite #282a3c in testa, blu #12569a nei pallini, grigio
   caldo nelle righe) ed era l'ultimo pezzo dell'applicazione a non
   somigliare a Zapix. Qui prende la stessa veste: blu notte in testa,
   verde-acqua per il non letto, grigi virati al blu notte per il resto.

   Tre difetti di impaginazione, non solo di colore:
     - i menu della barra hanno 8px di imbottitura (sezione Navigazione),
       e l'intestazione scura ci galleggiava dentro con un bordo bianco
       tutto intorno e gli angoli vivi;
     - la lista era larga 400px fissi dentro un pannello di 418, quindi
       le righe sfondavano il pannello a destra;
     - la data era in float dentro al titolo: se il titolo andava a capo
       finiva in mezzo alle parole ("...Apri 3 giorni fa"). Ora e' una
       colonna sua, in alto a destra, e non puo' piu' incrociare il testo.

   Queste regole arrivano dopo general.css e ne sostituiscono le quattro
   di .menu-notify: general.css non si tocca, e' lo stesso file di Zapix.
   Il markup lo genera utils/main/snippet/notify_list.php.
   ===================================================================== */

/* Il pannello. L'imbottitura va a zero e il contenuto viene ritagliato
   dagli angoli, cosi' l'intestazione scura arriva davvero al bordo. */
.navbar-nav .dropdown-menu.menu-notify {
	width: 400px;
	max-width: calc(100vw - 24px);   /* sotto i 768px Bootstrap rende il menu statico dentro la barra chiusa: la larghezza fissa sborderebbe */
	padding: 0 !important;
	overflow: hidden;
	border-radius: var(--sx-radius-lg);
}

.menu-notify > .dropdown-content-header {
	background: var(--sx-nav-bg);
	color: var(--sx-nav-text-on);
	align-items: center;
	gap: .75rem;
	padding: .875rem 1rem;
	border-radius: 0;
	font-family: var(--sx-font-display);
	letter-spacing: .5px;
}

.menu-notify > .dropdown-content-header > span:first-child {
	font-size: var(--sx-fs-lg);
	font-weight: 600;
}

/* "Segna come lette" e' un comando, non un'etichetta: il verde-acqua del
   marchio lo dice senza aggiungere un pulsante su una barra scura. */
.menu-notify > .dropdown-content-header #markAllRead {
	color: var(--sx-nav-active);
	font-weight: 600;
	font-size: var(--sx-fs-sm);
	cursor: pointer;
}

.menu-notify > .dropdown-content-header #markAllRead:hover {
	color: var(--sx-nav-text-on);
}

.menu-notify .dropdown-content-body {
	padding: 0;
}

.menu-notify .dropdown-scrollable {
	max-height: 420px;
	scrollbar-width: thin;
	scrollbar-color: var(--sx-border-strong) transparent;
}

.menu-notify .dropdown-scrollable::-webkit-scrollbar { width: 6px; }
.menu-notify .dropdown-scrollable::-webkit-scrollbar-track { background: transparent; }
.menu-notify .dropdown-scrollable::-webkit-scrollbar-thumb {
	background: var(--sx-border-strong);
	border-radius: var(--sx-radius-pill);
}

.menu-notify .media-list {
	width: auto;
	margin: 0;
	font-size: var(--sx-fs);
}

/* La riga: pallino, testo, quando. Tre colonne, niente float. */
.menu-notify .media {
	display: flex;
	align-items: flex-start;
	gap: .625rem;
	padding: 12px 16px;
	margin-top: 0 !important;
	border-bottom: 1px solid var(--sx-border);
	border-radius: 0;
	cursor: pointer;
	transition: background-color .15s ease;
}

.menu-notify .media:last-child { border-bottom: 0; }

.menu-notify .media:hover { background: var(--sx-surface-alt); }

/* Non letta: fondo tenue col verde-acqua e titolo pieno. Letta: fondo
   bianco, titolo di un tono piu' leggero. La differenza si vede da
   lontano senza contare i pallini. */
.menu-notify .media.notif-unread { background: var(--sx-accent-soft); }

.menu-notify .media.notif-unread:hover { background: var(--sx-accent-soft-strong); }

.menu-notify .notify-stato {
	flex: 0 0 auto;
	margin-top: 4px;
	line-height: 1;
}

.menu-notify .icon-notify {
	font-size: 11px;
	color: var(--sx-text-faint);
}

.menu-notify .media.notif-unread .icon-notify { color: var(--sx-teal); }

.menu-notify .media-body { min-width: 0; }

.menu-notify .media-title {
	margin: 0;
	line-height: 1.35;
}

.menu-notify .media-title a {
	color: var(--sx-text-soft);
	font-weight: 500;
}

.menu-notify .media.notif-unread .media-title a {
	color: var(--sx-text);
	font-weight: 600;
}

.menu-notify .notify-testo {
	display: block;
	margin-top: 2px;
	color: var(--sx-text-muted);
	font-size: var(--sx-fs-sm);
	line-height: 1.4;
}

.menu-notify .notify-quando {
	flex: 0 0 auto;
	margin-top: 1px;
	color: var(--sx-text-faint);
	font-size: var(--sx-fs-sm);
	white-space: nowrap;
}

.menu-notify .notify-vuoto {
	display: block;
	padding: 28px 16px;
	text-align: center;
	color: var(--sx-text-faint);
	cursor: default;
}

.menu-notify .notify-vuoto:hover { background: transparent; }

/* Il contatore sulla campanella: piccolo, con l'anello del colore della
   barra che lo stacca dall'icona invece di appoggiarglisi sopra. */
.navbar-nav-link > .badge.tot_notifiche {
	top: 6px;
	right: 10px;
	min-width: 18px;
	padding: .15em .4em;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.25;
	box-shadow: 0 0 0 2px var(--sx-nav-bg);
}

/* La stessa notifica quando arriva da sola, nel riquadro che compare in
   alto a destra: Noty stampa il messaggio senza imbottitura (p-0), quindi
   la mette la notifica. */
.notifica-notify {
	padding: .75rem 1rem;
	cursor: pointer;
}

.notifica-notify .media-title {
	margin: 0;
	line-height: 1.35;
}

.notifica-notify .media-title a {
	color: var(--sx-text);
	font-weight: 600;
}

.notifica-notify .notify-testo {
	display: block;
	margin-top: 2px;
	color: var(--sx-text-muted);
	font-size: var(--sx-fs-sm);
	line-height: 1.4;
}

.notifica-notify .notify-quando {
	display: block;
	margin-top: 4px;
	color: var(--sx-text-faint);
	font-size: var(--sx-fs-sm);
}

/* =====================================================================
   Pastiglie dei giorni
   ---------------------------------------------------------------------
   [22/09/2026] #ALE Stanno sotto i due campi in giorni delle scadenze
   (ricorrenza e anticipo) e ci scrivono dentro il numero corrispondente
   a "6 mesi" o "1 anno". Il foglio sta qui e non in custom_pages/mpscadenze
   perche' lo stesso frammento serve la pagina e la finestra, e la finestra
   si apre anche da altri moduli: six-theme.css e' l'unico foglio che c'e'
   sempre (lo carica init.php).
   ===================================================================== */

.sx-giorni {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin-top: .4rem;
}

.sx-giorni-voce {
	padding: .2rem .6rem;
	border: 1px solid var(--sx-border-strong);
	border-radius: var(--sx-radius-pill);
	background: transparent;
	color: var(--sx-text-muted);
	font-size: var(--sx-fs-sm);
	line-height: 1.5;
	cursor: pointer;
}

.sx-giorni-voce:hover {
	border-color: var(--sx-accent);
	color: var(--sx-accent);
}

.sx-giorni-voce-scelta,
.sx-giorni-voce-scelta:hover {
	background: var(--sx-accent);
	border-color: var(--sx-accent);
	color: #fff;
}

/* =====================================================================
   Fogli delle singole pagine
   ---------------------------------------------------------------------
   [18/09/2026] #ALE Trentaquattro fogli custom_pages/<modulo>/index.css
   dipingono la pagina attiva della paginazione con il vecchio petrolio e
   un !important, e una cinquantina tingono la riga delle briciole di pane
   con un grigio-azzurro loro. Finche' i colori erano quasi gli stessi non
   si notava; con la tavolozza di Zapix si nota.

   Si azzerano qui, in un posto solo. Ripulire i fogli di pagina resta da
   fare, ma e' un lavoro da fare con calma e senza tenere in ostaggio il
   resto del tema.
   ===================================================================== */

.pagination .page-item.active .page-link {
	background: var(--sx-accent) !important;
	border-color: var(--sx-accent) !important;
	color: #fff !important;
}

.breadcrumb-line,
.page-header .breadcrumb-line {
	background-color: var(--sx-surface) !important;
	border-color: var(--sx-border) !important;
}