/* Service House — palette 2 (richiesta dell'utente): più vicina alla grafica storica.
   Fascia in alto ciano #00BCD4 con il vecchio logo bianco (come prima), menu laterale chiaro come il vecchio,
   accenti ciano, verde acqua #2BD09A per «fatto», grigio antracite per i testi. Un solo font (Manrope) ovunque.
   Caricato dopo gli altri fogli: le regole qui sostituiscono quelle della palette 1. */

body.sh-ui {
	--primary: #0097A7; --primary-hover: #00838F; --primary-dark: #006A75; --primary-light: #B2EBF2;
	--sh-ciano: #00BCD4; --sh-ciano-chiaro: #E0F7FA; --sh-testo: #2B3437; --sh-grigio: #5F6B70; --sh-linea: #E1E7EA; --sh-fondo: #F3F6F7;
	--nav-headbg: #00BCD4; --headerbg: #00BCD4; --sidebar-bg: #FFFFFF;
	color: var(--sh-testo); background: var(--sh-fondo);
}

/* Un solo font in tutto il programma (come nel menu), cifre tutte della stessa larghezza per orari e date */
body.sh-ui, body.sh-ui *:not(.sh-ico):not(.sh-ico *):not([class^="fa"]):not([class*=" fa-"]):not(.dashicons):not([class^="ui-icon"]):not([class*=" ui-icon"]) {
	font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
body.sh-ui { font-variant-numeric: tabular-nums; }

/* --- Fascia in alto ciano con il vecchio logo --- */
body.sh-ui .nav-header, body.sh-ui .header { background: #00BCD4; border-bottom: 0; }
body.sh-ui .nav-header { padding: 0 .75rem 0 1rem; }
body.sh-ui .nav-header .brand-logo { display: flex; align-items: center; }
body.sh-ui .sh-logo { height: 2.9rem; width: auto; display: block; }
body.sh-ui .nav-control.sh-toggle { color: #FFFFFF; }
body.sh-ui .nav-control.sh-toggle:hover { background: rgba(255,255,255,.18); color: #FFFFFF; }
body.sh-ui .header .dashboard_bar { color: #FFFFFF; font-weight: 800; text-shadow: 0 1px 1px rgba(0,80,90,.25); }
body.sh-ui .search-area .form-control, body.sh-ui .search-area .input-group-text { background: #FFFFFF; border-color: transparent; }
body.sh-ui .search-area .form-control:focus { box-shadow: 0 0 0 3px rgba(255,255,255,.45); }
body.sh-ui .header .btn-primary.sh-azione { background: #0F4F57; border-color: #0F4F57; color: #FFFFFF; }
body.sh-ui .header .btn-primary.sh-azione:hover { background: #0B3D43; border-color: #0B3D43; color: #FFFFFF; }
body.sh-ui .header .btn-outline-primary.sh-azione { background: rgba(255,255,255,.9); border-color: transparent; color: #006A75; }
body.sh-ui .header .btn-outline-primary.sh-azione:hover { background: #FFFFFF; color: #004F57; }
body.sh-ui .sh-utente { border-left-color: rgba(255,255,255,.45); }
body.sh-ui .sh-utente-nome { color: #FFFFFF; }
body.sh-ui .sh-esci { color: #FFFFFF; }
body.sh-ui .sh-esci:hover { background: rgba(255,255,255,.2); color: #FFFFFF; }
body.sh-ui .sh-avatar { background: #FFFFFF; color: #0097A7; }

/* --- Menu laterale chiaro (come il vecchio), voce attiva in ciano --- */
body.sh-ui .dlabnav { background: #FFFFFF; border-right: 1px solid var(--sh-linea); box-shadow: none; }
body.sh-ui .dlabnav .metismenu > li > a { color: #3A4549; }
body.sh-ui .dlabnav .metismenu > li > a .sh-ico { color: #0097A7; }
body.sh-ui .dlabnav .metismenu > li > a:hover { background: #F0FBFC; color: #1F2A2D; }
body.sh-ui .dlabnav .metismenu > li.mm-active > a { background: #E0F7FA; color: #005F68; font-weight: 800; }
body.sh-ui .dlabnav .metismenu > li.mm-active > a .sh-ico { color: #00ACC1; }
body.sh-ui .dlabnav .metismenu .sh-sep { background: var(--sh-linea); }
body.sh-ui .sh-widget { background: #F3F6F7; border: 1px solid var(--sh-linea); }

/* --- Contenuto --- */
body.sh-ui .content-body { background: var(--sh-fondo); }
body.sh-ui a { color: #00838F; }
body.sh-ui .btn-primary, body.sh-ui input[type="submit"], body.sh-ui .sh-primario, body.sh-ui .acf-button { background: #00838F; border-color: #00838F; }
body.sh-ui .btn-primary:hover, body.sh-ui input[type="submit"]:hover, body.sh-ui .sh-primario:hover, body.sh-ui .acf-button:hover { background: #006A75; border-color: #006A75; }
body.sh-ui .letterSearch .letters .letter a:hover, body.sh-ui .letterSearch .letters .letter.active a { background: #00838F; border-color: #00838F; color: #FFFFFF; }
body.sh-ui .fc .ui-state-active, body.sh-ui .fc-toolbar .ui-state-active { background: #00838F !important; border-color: #00838F !important; color: #FFFFFF !important; }
body.sh-ui .fc td.fc-today, body.sh-ui .fc .ui-widget-content.fc-today { background: #E0F7FA !important; }
body.sh-ui #eventi_oggi .ora_evento { font-weight: 800; }

/* --- Calendario: barra mese/anno (creata da sh-ui.js) --- */
.sh-cal-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1rem; padding: .75rem; background: #F3F6F7; border: 1px solid var(--sh-linea); border-radius: .85rem; }
.sh-cal-nav select { min-height: 2.6rem; border: 1px solid var(--sh-linea); border-radius: .65rem; padding: 0 .75rem; background: #FFFFFF; font-weight: 800; font-size: .95rem; color: var(--sh-testo); cursor: pointer; }
.sh-cal-nav .sh-cal-mese { min-width: 9.5rem; }
.sh-cal-nav button { min-height: 2.6rem; border: 1px solid #B2EBF2; border-radius: .65rem; padding: 0 .85rem; background: #FFFFFF; color: #00838F; font-weight: 800; font-size: .9rem; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; }
.sh-cal-nav button:hover { background: #E0F7FA; }
.sh-cal-nav .sh-cal-oggi { background: #00838F; border-color: #00838F; color: #FFFFFF; }
.sh-cal-nav .sh-cal-oggi:hover { background: #006A75; }
.sh-cal-nav .sh-cal-sep { flex-grow: 1; }
.sh-cal-nav .sh-cal-viste { display: inline-flex; background: #FFFFFF; border: 1px solid var(--sh-linea); border-radius: .7rem; padding: .2rem; gap: .2rem; }
.sh-cal-nav .sh-cal-viste button { border: 0; min-height: 2.2rem; }
.sh-cal-nav .sh-cal-viste button.on { background: #00838F; color: #FFFFFF; }
/* i pulsanti originali di FullCalendar restano (stessa funzione), ma la barra nuova li rende superflui a schermo largo */
@media (min-width: 768px) { body.sh-ui .sh-cal-pronto .fc-toolbar .fc-left, body.sh-ui .sh-cal-pronto .fc-toolbar .fc-right { display: none; } }

@media (max-width: 767px) {
	body.sh-ui .header .dashboard_bar { font-size: 1rem; max-width: 40vw; }
	body.sh-ui .header .btn-outline-primary.sh-azione, body.sh-ui .header .btn-primary.sh-azione { padding: 0 .6rem; }
	body.sh-ui .nav-header .brand-logo { display: none; }
}
@media print { body.sh-ui .sh-cal-nav { display: none; } }

/* Scheda cliente: eventi 4 per riga, come prima (richiesta dell'utente) */
body.sh-ui .eventi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; align-items: start; }
body.sh-ui .eventi > h2.head { grid-column: 1 / -1; margin-bottom: 0; }
body.sh-ui .eventi .evento.single { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .75rem; margin: 0; padding: .85rem 1rem; height: 100%; box-sizing: border-box; }
body.sh-ui .eventi .evento.single h3.head { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden !important; font-size: .8rem; padding: .35rem .6rem; }
body.sh-ui .eventi .evento.single .field h4 { font-size: .65rem; }
body.sh-ui .eventi .evento.single .field h5 { font-size: .85rem !important; }
@media (max-width: 1199px) { body.sh-ui .eventi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { body.sh-ui .eventi { grid-template-columns: 1fr; } }

/* Il margine in linea da 100px serviva con la vecchia testata fissa: nella nuova grafica non serve */
body.sh-ui #calendar { margin-top: 0 !important; }

/* Le vecchie regole nascondevano voci del menu categorie per numero (#ui-id-N) lasciando righe vuote.
   Nella nuova grafica le voci non pertinenti sono tolte da sh-ui.js: queste regole vanno annullate. */
body.sh-ui.page-id-177219 .ui-menu #ui-id-1, body.sh-ui.page-id-177219 .ui-menu #ui-id-2, body.sh-ui.page-id-177219 .ui-menu #ui-id-3, body.sh-ui.page-id-177219 .ui-menu #ui-id-4, body.sh-ui.page-id-177219 .ui-menu #ui-id-5, body.sh-ui.page-id-177219 .ui-menu #ui-id-6, body.sh-ui.page-id-177219 .ui-menu #ui-id-7, body.sh-ui.page-id-177219 .ui-menu #ui-id-8, body.sh-ui.page-id-177219 .ui-menu #ui-id-9,
body.sh-ui.page-id-177217 .ui-menu #ui-id-1, body.sh-ui.page-id-177217 .ui-menu #ui-id-2, body.sh-ui.page-id-177217 .ui-menu #ui-id-3, body.sh-ui.page-id-177217 .ui-menu #ui-id-4, body.sh-ui.page-id-177217 .ui-menu #ui-id-5, body.sh-ui.page-id-177217 .ui-menu #ui-id-6, body.sh-ui.page-id-177217 .ui-menu #ui-id-7, body.sh-ui.page-id-177217 .ui-menu #ui-id-8, body.sh-ui.page-id-177217 .ui-menu #ui-id-9 { display: block !important; }
body.sh-ui .ui-menu .ui-menu-item { padding: 0; }
body.sh-ui .ui-menu .ui-menu-item-wrapper, body.sh-ui .ui-menu .ui-menu-item > div { padding: .5rem .75rem; border-radius: .5rem; }

body.sh-ui .eventi > h2.head { text-align: left; }
body.sh-ui .eventi .evento.single h3.head { max-height: 4.1rem; }
body.sh-ui .eventi .evento.single .field h4 { white-space: nowrap; }

/* Scheda evento: il nome del cliente è un link riconoscibile (colore di link, sottolineato, freccia) */
body.sh-ui #single_cliente .cliente.single > h3 a, body.sh-ui.single-event #single_cliente .cliente.single > h3 a {
	color: #00838F !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; text-decoration-color: #80DEEA;
	display: inline-flex; align-items: center; gap: .5rem;
}
body.sh-ui #single_cliente .cliente.single > h3 a::after { content: "Apri scheda cliente →"; font-size: .8rem; font-weight: 800; text-decoration: none; display: inline-block; padding: .3rem .7rem; border-radius: 99px; background: #E0F7FA; color: #005F68; }
body.sh-ui #single_cliente .cliente.single > h3 a:hover { color: #005F68 !important; text-decoration-color: #00838F; }
body.sh-ui #single_cliente .cliente.single > h3 a:focus-visible { outline: 3px solid #00BCD4; outline-offset: 3px; border-radius: .3rem; }
body.sh-ui #single_cliente .cliente.single > h3 a { background: none !important; padding: 0 !important; }

/* Elenco clienti: il nome (anche su più righe) non tocca le icone */
body.sh-ui #clienti .cliente.single .nome_cognome { margin: 0 9.25rem .75rem 0 !important; line-height: 1.35; min-height: 2.25rem; }
body.sh-ui #clienti .cliente.single div.icon { top: 1rem; right: 1rem; gap: .45rem; }
body.sh-ui #clienti .cliente.single .nome_cognome, body.sh-ui #clienti .cliente.single a.link { height: auto !important; max-height: none !important; overflow: visible !important; white-space: normal !important; display: block; }

/* Scheda cliente: la sezione eventi (legenda + appuntamenti + scadenze) come riquadro con gli stessi margini della scheda */
body.sh-ui #eventi_cliente { display: block; background: #FFFFFF; border: 1px solid #DCE3E6; border-radius: 1rem; padding: 1.5rem 1.75rem; margin: 0 0 1.5rem; box-sizing: border-box; }

/* Scheda cliente: titolo dell'evento sempre intero (niente taglio a 3 righe) */
body.sh-ui .eventi .evento.single h3.head { display: block; -webkit-line-clamp: unset; max-height: none; overflow: visible !important; }

/* Legenda compatta: appuntamenti e scadenze su un'unica riga di etichette */
body.sh-ui #legenda { display: flex !important; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; padding: 0 !important; margin: 0 0 1rem !important; width: auto !important; float: none !important; }
body.sh-ui #legenda h3 { margin: 0 .25rem 0 0 !important; padding: 0 !important; font-size: .8rem !important; float: none !important; width: auto !important; }
body.sh-ui #legenda #legenda_appuntamenti, body.sh-ui #legenda #legenda_scadenze, body.sh-ui #legenda ul { display: contents !important; }
body.sh-ui #legenda li { gap: 1rem !important; padding: .25rem .65rem !important; margin: 0 !important; float: none !important; width: auto !important; font-size: .75rem !important; line-height: 1.3; }

/* La mappa (Leaflet usa z-index fino a 1000) resta sotto la testata e il menu fissi */
body.sh-ui .acf-map, body.sh-ui .leaflet-container { position: relative; z-index: 0; isolation: isolate; }
body.sh-ui .header { z-index: 1010; }
body.sh-ui .nav-header { z-index: 1011; }
body.sh-ui .dlabnav { z-index: 1005; }

/* Ricerca: il titolo è già nella barra in alto; la vecchia fascia scura (testo scuro su scuro) non serve */
body.sh-ui.search .page-header { display: none; }

/* Ricerca: ogni risultato storico contiene una propria sezione #clienti con una sola scheda.
   I wrapper diventano trasparenti al layout, così tutte le schede partecipano alla stessa griglia. */
body.sh-ui.search #main.site-main {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
	gap: 1rem;
	align-items: stretch;
}
body.sh-ui.search #main.site-main > article,
body.sh-ui.search #main.site-main > article > .entry-content,
body.sh-ui.search #main.site-main > article > .entry-content > #clienti { display: contents; }
body.sh-ui.search #main.site-main .cliente.single { height: 100%; box-sizing: border-box; }
body.sh-ui.search #main.site-main > .navigation { grid-column: 1 / -1; }

@media (max-width: 575px) {
	body.sh-ui.search #main.site-main { grid-template-columns: minmax(0, 1fr); }
}

body.sh-ui.search #main.site-main > .sh-ricerca-anagrafica, body.sh-ui.search #main.site-main > .sh-ricerca-titolo { grid-column: 1 / -1; } /* SH-013: caldaie e indirizzi sopra la griglia dei clienti */
/* descrizione delle icone anche al passaggio con la tastiera */
body.sh-ui .cliente.single div.icon div a:focus-visible { outline: 3px solid #00BCD4; outline-offset: 2px; }
/* «Il mio account»: il nome in alto a destra porta alla pagina del proprio account */
body.sh-ui .sh-account-link { display: inline-flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; border: 0; border-radius: 99px; padding: 2px 8px 2px 2px; }
body.sh-ui .sh-account-link:hover, body.sh-ui .sh-account-link:focus-visible { background: rgba(255, 255, 255, .18); }
/* campi password come gli altri campi del gestionale («Il mio account») */
body.sh-ui input[type="password"] { height: 2.75rem; border: 1px solid #DCE3E6; border-radius: .65rem; background: #F9FBFB; padding: 0 .9rem; font-family: inherit; font-size: .95rem; color: #1F2A30; }
body.sh-ui input[type="password"]:focus { outline: none; border-color: #00BCD4; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(0, 188, 212, .18); }