/**
 * userpanel.css — guscio condiviso dell'area utente (Fase 7, lotto base).
 *
 * TUTTE le regole sono prefissate con .ags-area-utente (la classe che il
 * layout UserPanel::layouts.template mette sul <body>): alcune pagine
 * pubbliche (user_search, post, profilo_utente, pagine legali, contattaci)
 * caricano questo stesso file e non devono cambiare aspetto.
 *
 * Ordine di cascata: theme.css (Hyper) → ags-tokens.css → ags-components.css
 * → questo file → CSS di pagina. Il prefisso garantisce anche la vittoria in
 * specificità contro il tema Hyper.
 *
 * Colori: SOLO var(--ags-*). Nessun esadecimale/rgb nuovo.
 */

/* ============================================================
   1. PONTE COLORI — riallinea il tema Hyper ai token del redesign
   ============================================================ */

.ags-area-utente
{
	--bs-primary:                var(--ags-forest);
	--bs-primary-rgb:            31, 81, 56; /* rgb di --ags-forest */
	--bs-link-color:             var(--ags-forest);
	--bs-link-color-rgb:         31, 81, 56;
	--bs-link-hover-color:       var(--ags-green);
	--bs-link-hover-color-rgb:   63, 122, 88;
	--bs-body-font-family:       var(--ags-font);
	--bs-body-color:             var(--ags-ink);
	--bs-body-bg:                var(--ags-cream);
	--bs-border-color:           var(--ags-border);
	--bs-secondary-color:        var(--ags-muted);
	--bs-emphasis-color:         var(--ags-ink);
	--bs-focus-ring-color:       rgba(63, 122, 88, 0.25);
}

/* Il tema compila il primario in forma letterale dentro alcune regole:
   vanno riallineate a mano, le variabili sopra non bastano. */

.ags-area-utente .btn-primary
{
	--bs-btn-bg:                  var(--ags-forest);
	--bs-btn-border-color:        var(--ags-forest);
	--bs-btn-hover-bg:            var(--ags-green);
	--bs-btn-hover-border-color:  var(--ags-green);
	--bs-btn-focus-shadow-rgb:    63, 122, 88;
	--bs-btn-active-bg:           var(--ags-green);
	--bs-btn-active-border-color: var(--ags-green);
	--bs-btn-disabled-bg:         var(--ags-forest);
	--bs-btn-disabled-border-color: var(--ags-forest);
}

.ags-area-utente .btn-outline-primary
{
	--bs-btn-color:               var(--ags-forest);
	--bs-btn-border-color:        var(--ags-forest);
	--bs-btn-hover-bg:            var(--ags-forest);
	--bs-btn-hover-border-color:  var(--ags-forest);
	--bs-btn-focus-shadow-rgb:    63, 122, 88;
	--bs-btn-active-bg:           var(--ags-forest);
	--bs-btn-active-border-color: var(--ags-forest);
	--bs-btn-disabled-color:      var(--ags-forest);
	--bs-btn-disabled-border-color: var(--ags-forest);
}

.ags-area-utente .form-check-input:checked,
.ags-area-utente .form-check-input[type=checkbox]:indeterminate
{
	background-color: var(--ags-forest);
	border-color:     var(--ags-forest);
}

.ags-area-utente .form-range::-webkit-slider-thumb,
.ags-area-utente .form-range::-moz-range-thumb
{
	background-color: var(--ags-forest);
}

.ags-area-utente .nav-pills
{
	--bs-nav-pills-link-active-bg: var(--ags-forest);
}

.ags-area-utente .pagination
{
	--bs-pagination-hover-color:        var(--ags-forest);
	--bs-pagination-focus-color:        var(--ags-forest);
	--bs-pagination-active-bg:          var(--ags-forest);
	--bs-pagination-active-border-color: var(--ags-forest);
}

.ags-area-utente .dropdown-item.active,
.ags-area-utente .dropdown-item:active
{
	background-color: var(--ags-forest);
	color:            var(--ags-white);
}

.ags-area-utente .progress-bar
{
	background-color: var(--ags-forest);
}

.ags-area-utente .list-group
{
	--bs-list-group-active-bg:           var(--ags-forest);
	--bs-list-group-active-border-color: var(--ags-forest);
}

.ags-area-utente .badge-soft-primary
{
	color:            var(--ags-forest);
	background-color: var(--ags-green-soft);
	fill:             rgba(31, 81, 56, 0.1);
}

.ags-area-utente .badge-outline-primary
{
	color:            var(--ags-forest);
	border:           1px solid var(--ags-forest);
	background-color: transparent;
}

.ags-area-utente .bg-soft-primary
{
	background-color: var(--ags-green-soft);
}

/* Focus visibile da tastiera (il tema azzera i ring) */

.ags-area-utente .btn-check:focus-visible + .btn,
.ags-area-utente .btn:focus-visible
{
	box-shadow: 0 0 0 3px rgba(63, 122, 88, 0.2);
}

.ags-area-utente .page-link:focus-visible
{
	box-shadow: 0 0 0 3px rgba(63, 122, 88, 0.2);
}

/* ============================================================
   2. SCHELETRO — contentuto, sidebar, topbar, footer
   ============================================================ */

.ags-area-utente .content-page
{
	background: var(--ags-cream);
	padding:    var(--ags-space-3) var(--ags-space-2) 65px;
}

@media (min-width: 768px)
{
	.ags-area-utente .content-page
	{
		padding: var(--ags-space-4) var(--ags-space-3) 65px;
	}
}

.ags-area-utente .app-sidebar-menu
{
	background:    var(--ags-white);
	border-right:  1px solid var(--ags-border);
	box-shadow:    none;
}

.ags-area-utente .logo-box
{
	background:   var(--ags-white);
	border-right: 1px solid var(--ags-border);
}

/* Il tema riempiva i 70px con line-height sulle voci: qui i pulsanti sono alti 44px,
   quindi senza centratura la riga resta in cima e il badge delle notifiche esce dal bordo.
   Il rientro orizzontale ripete quello di .content-page per incolonnare barra e pagina. */
.ags-area-utente .topbar-custom
{
	align-items:   center;
	background:    var(--ags-white);
	border-bottom: 1px solid var(--ags-border);
	box-shadow:    none;
	display:       flex;
	padding:       0 var(--ags-space-2);
}

@media (min-width: 768px)
{
	.ags-area-utente .topbar-custom
	{
		padding: 0 var(--ags-space-3);
	}
}

/* Footer sobrio: anno e credito su una riga, colore unico leggibile */

.ags-area-utente .footer
{
	background: transparent;
	color:      var(--ags-muted);
	font-size:  0.8125rem;
	padding:    var(--ags-space-2) var(--ags-space-2);
}

.ags-area-utente .up-footer__copy
{
	color: var(--ags-muted);
}

.ags-area-utente .up-footer__credit
{
	color:           inherit;
	text-decoration: none;
}

.ags-area-utente .up-footer__credit:hover
{
	color:           var(--ags-forest);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ags-area-utente .up-footer__credit strong
{
	font-weight: 600;
}

/* ============================================================
   3. CLASSI CONDIVISE — le usano i lotti di pagina, non ridefinirle
   ============================================================ */

/**
 * .up-page-head — intestazione di pagina, una per pagina, in cima al contenuto.
 *
 * <div class="up-page-head">
 *     <div class="up-page-head__text">
 *         <h1 class="up-page-head__title">Titolo</h1>
 *         <p class="up-page-head__lead">Una frase che spiega a cosa serve la sezione.</p>
 *     </div>
 *     <div class="up-page-head__actions"><button class="btn btn-primary">…</button></div>
 * </div>
 *
 * __actions contiene UN SOLO pulsante primario di aggiunta; i popover
 * informativi (es. #info-attrezzi) stanno dentro __title come pulsante icona.
 * Sotto 576px le azioni passano sotto il testo e il pulsante occupa tutta la larghezza.
 */

.ags-area-utente .up-page-head
{
	align-items:     flex-end;
	border-bottom:   1px solid var(--ags-border);
	display:         flex;
	flex-wrap:       wrap;
	gap:             var(--ags-space-2) var(--ags-space-3);
	justify-content: space-between;
	margin-bottom:   var(--ags-space-3);
	padding-bottom:  var(--ags-space-3);
}

.ags-area-utente .up-page-head__text
{
	flex:     1 1 260px;
	min-width: 0;
}

.ags-area-utente .up-page-head__title
{
	align-items:    center;
	display:        flex;
	flex-wrap:      wrap;
	font-size:      clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
	gap:            var(--ags-space-1);
	margin:         0 0 4px;
}

.ags-area-utente .up-page-head__lead
{
	color:     var(--ags-muted);
	font-size: 0.9375rem;
	margin:    0;
	max-width: 65ch;
}

.ags-area-utente .up-page-head__actions
{
	display:     flex;
	flex:        0 0 auto;
	flex-wrap:   wrap;
	gap:         var(--ags-space-2);
}

@media (max-width: 575.98px)
{
	.ags-area-utente .up-page-head
	{
		align-items: stretch;
	}

	.ags-area-utente .up-page-head__actions
	{
		flex-direction: column;
		width:          100%;
	}

	.ags-area-utente .up-page-head__actions .btn
	{
		width: 100%;
	}
}

/**
 * .up-card-title — titolo di card o blocco.
 * Da usare dentro .card-header o in cima al .card-body: <h2 class="up-card-title">.
 */

.ags-area-utente .up-card-title
{
	color:     var(--ags-ink);
	font-size: 1.0625rem;
	font-weight: 700;
	margin:    0;
}

/* ============================================================
   4. COMPONENTI
   ============================================================ */

/** Card Bootstrap (la base è in ags-components.css: qui solo header e corpo) **/

.ags-area-utente .card
{
	--bs-card-cap-bg: var(--ags-white);
}

.ags-area-utente .card-header
{
	background-color: var(--ags-white);
	border-bottom:    1px solid var(--ags-border);
	padding:          var(--ags-space-2) var(--ags-space-3);
}

.ags-area-utente .card-body
{
	color:   var(--ags-ink);
	padding: var(--ags-space-3);
}

.ags-area-utente .card-footer
{
	background-color: var(--ags-white);
	border-top:       1px solid var(--ags-border);
	padding:          var(--ags-space-2) var(--ags-space-3);
}

/** Tab — voce attiva forest, sia underline sia tabs **/

.ags-area-utente .nav-tabs
{
	border-bottom-color: var(--ags-border);
}

.ags-area-utente .nav-tabs .nav-link
{
	color: var(--ags-muted);
}

.ags-area-utente .nav-tabs .nav-link:hover,
.ags-area-utente .nav-tabs .nav-link:focus
{
	border-color: transparent;
	color:        var(--ags-forest);
	isolation:    isolate;
}

.ags-area-utente .nav-tabs .nav-link.active,
.ags-area-utente .nav-tabs .nav-item.show .nav-link
{
	background-color: transparent;
	border-color:     transparent transparent var(--ags-forest);
	color:            var(--ags-forest);
	font-weight:      600;
}

.ags-area-utente .nav-underline .nav-link
{
	color: var(--ags-muted);
}

/* .nav-underline attivo già usa var(--bs-primary): lo risolve il ponte colori */

/** Form — etichette, input, validazione, switch **/

.ags-area-utente .form-label,
.ags-area-utente .col-form-label
{
	color:       var(--ags-ink);
	font-size:   0.875rem;
	font-weight: 600;
	margin-bottom: 6px;
}

.ags-area-utente .form-text
{
	color: var(--ags-muted);
}

.ags-area-utente .input-group-text
{
	background-color: var(--ags-sand);
	border-color:     var(--ags-border);
	color:            var(--ags-ink);
}

/* Bordo danger solo sullo stato invalido effettivo, mai sul solo attributo required */

.ags-area-utente .form-control:user-invalid,
.ags-area-utente .form-select:user-invalid,
.ags-area-utente .form-control.is-invalid,
.ags-area-utente .form-select.is-invalid,
.ags-area-utente .was-validated .form-control:invalid,
.ags-area-utente .was-validated .form-select:invalid
{
	border-color: var(--ags-danger);
}

.ags-area-utente .form-control.is-invalid:focus,
.ags-area-utente .form-select.is-invalid:focus
{
	border-color: var(--ags-danger);
	box-shadow:   0 0 0 3px rgba(180, 35, 24, 0.15);
}

.ags-area-utente .invalid-feedback
{
	color: var(--ags-danger);
}

.ags-area-utente textarea::-moz-placeholder
{
	color: var(--ags-muted);
}

.ags-area-utente textarea::placeholder
{
	color: var(--ags-muted);
}

/* Switch: area toccabile più ampia, pallino sempre visibile nel focus */

.ags-area-utente .form-switch
{
	align-items:  center;
	display:      flex;
	padding-left: 3em;
	min-height:   44px;
}

.ags-area-utente .form-switch .form-check-input
{
	cursor:     pointer;
	height:     1.3em;
	margin-left: -3em;
	/* Nel blocco alto 44px il margine di Bootstrap teneva l'interruttore sopra le etichette */
	margin-top: 0;
	width:      2.6em;
}

/* Checkbox dei consensi: quadrato più grande, comodo da toccare, allineato alla prima riga
   dell'etichetta anche quando va a capo. */
.ags-area-utente .form-check:not(.form-switch) .form-check-input[type="checkbox"]
{
	cursor:     pointer;
	height:     1.25em;
	margin-top: 0.15em;
	width:      1.25em;
}

.ags-area-utente .form-check > input[type=checkbox]
{
	cursor: pointer;
}

.ags-area-utente .form-switch .form-check-input:focus
{
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0, 0, 0, 0.25)'/%3e%3c/svg%3e");
	box-shadow: 0 0 0 3px rgba(63, 122, 88, 0.2);
}

/** Tabelle e DataTables **/

.ags-area-utente .table
{
	--bs-table-border-color: var(--ags-border);
	--bs-table-striped-bg:    var(--ags-cream);
	--bs-table-hover-bg:      var(--ags-sand);
}

.ags-area-utente .table > tbody > tr > td
{
	color:          var(--ags-ink);
	padding:        0.625rem 0.75rem;
	vertical-align: middle;
}

.ags-area-utente .table thead th
{
	background-color: var(--ags-sand);
	border-bottom:    0;
	color:            var(--ags-muted);
	font-size:        0.75rem;
	font-weight:      600;
	letter-spacing:   0.04em;
	padding:          0.5rem 0.75rem;
	text-transform:   uppercase;
}

.ags-area-utente .table thead th:first-child
{
	border-radius: var(--ags-radius-control) 0 0 var(--ags-radius-control);
}

.ags-area-utente .table thead th:last-child
{
	border-radius: 0 var(--ags-radius-control) var(--ags-radius-control) 0;
}

/* Controlli DataTables 2.x */

.ags-area-utente .dt-length select,
.ags-area-utente .dt-search input
{
	background-color: var(--ags-white);
	border:           1px solid var(--ags-border);
	border-radius:    var(--ags-radius-control);
	color:            var(--ags-ink);
	font-family:      var(--ags-font);
	font-size:        0.875rem;
	min-height:       38px;
	padding:          0.25rem 0.75rem;
}

.ags-area-utente .dt-length label,
.ags-area-utente .dt-search label
{
	color:     var(--ags-muted);
	font-size: 0.875rem;
}

.ags-area-utente .dt-info
{
	color:     var(--ags-muted);
	font-size: 0.8125rem;
}

.ags-area-utente .dt-paging .page-link
{
	border-radius: var(--ags-radius-control);
	color:         var(--ags-ink);
	min-width:     34px;
}

.ags-area-utente .dt-paging .page-item.disabled .page-link
{
	background-color: var(--ags-white);
	color:            var(--ags-muted);
}

/* Messaggio "nessun dato" centrato e leggibile */

.ags-area-utente td.dt-empty,
.ags-area-utente td.dataTables_empty,
.ags-area-utente .dt-empty
{
	color:     var(--ags-muted);
	font-size: 0.9375rem;
	padding:   var(--ags-space-5) var(--ags-space-3);
	text-align: center;
}

/** Modali (componente x-modal: si agisce solo via CSS) **/

.ags-area-utente .modal-content
{
	border:      1px solid var(--ags-border);
	border-radius: var(--ags-radius-container);
}

/* Header neutro: le varianti .bg-* diventano bianche, titolo ink,
   al massimo un filo colorato in alto */

.ags-area-utente .modal-header
{
	align-items:      center;
	background-color: var(--ags-white);
	border-bottom:    1px solid var(--ags-border);
	padding:          var(--ags-space-3) var(--ags-space-4);
}

/* Le utility .bg-* del tema usano !important: serve anche qui (stessa specificità, selettore più alto) */

.ags-area-utente .modal-header.bg-primary,
.ags-area-utente .modal-header.bg-secondary,
.ags-area-utente .modal-header.bg-success,
.ags-area-utente .modal-header.bg-danger,
.ags-area-utente .modal-header.bg-warning,
.ags-area-utente .modal-header.bg-info,
.ags-area-utente .modal-header.bg-dark,
.ags-area-utente .modal-header.bg-light,
.ags-area-utente .modal-header.bg-white
{
	background-color: var(--ags-white) !important;
}

.ags-area-utente .modal-header.bg-primary,
.ags-area-utente .modal-header.bg-success
{
	border-top: 3px solid var(--ags-forest);
}

.ags-area-utente .modal-header.bg-danger
{
	border-top: 3px solid var(--ags-danger);
}

.ags-area-utente .modal-header.bg-warning,
.ags-area-utente .modal-header.bg-info
{
	border-top: 3px solid var(--ags-moss);
}

.ags-area-utente .modal-header.bg-dark,
.ags-area-utente .modal-header.bg-secondary
{
	border-top: 3px solid var(--ags-border);
}

/* L'utility .text-white del tema vince solo con un !important motivato
   (header ora bianco: il titolo deve tornare ink) */

.ags-area-utente .modal-header.text-white
{
	color: var(--ags-ink) !important;
}

.ags-area-utente .modal-title
{
	color:     var(--ags-ink);
	font-size: 1.0625rem;
	font-weight: 700;
}

.ags-area-utente .modal-body
{
	padding: var(--ags-space-4);
}

.ags-area-utente .modal-footer
{
	background-color: var(--ags-white);
	border-top:       1px solid var(--ags-border);
	padding:          var(--ags-space-2) var(--ags-space-4);
}

/* Il pulsante "Chiudi" (btn-dark del x-modal) diventa un secondario outline */

.ags-area-utente .modal-footer .btn-dark
{
	--bs-btn-color:               var(--ags-ink);
	--bs-btn-bg:                  transparent;
	--bs-btn-border-color:        var(--ags-border);
	--bs-btn-hover-color:         var(--ags-ink);
	--bs-btn-hover-bg:            var(--ags-sand);
	--bs-btn-hover-border-color:  var(--ags-moss);
	--bs-btn-active-bg:           var(--ags-sand);
	--bs-btn-active-border-color: var(--ags-moss);
	--bs-btn-disabled-color:      var(--ags-muted);
	--bs-btn-disabled-bg:         transparent;
}

/** SweetAlert2 (il popup è figlio di <body>: il prefisso lo copre) **/

.ags-area-utente .swal2-popup,
.ags-area-utente .swal2-toast
{
	border-radius: var(--ags-radius-container);
	color:         var(--ags-ink);
	font-family:   var(--ags-font);
}

.ags-area-utente .swal2-title
{
	color:     var(--ags-ink);
	font-size: 1.25rem;
	font-weight: 700;
}

.ags-area-utente .swal2-html-container
{
	color: var(--ags-muted);
}

.ags-area-utente .swal2-styled.swal2-confirm,
.ags-area-utente .swal2-styled.swal2-cancel,
.ags-area-utente .swal2-styled.swal2-deny
{
	border-radius: var(--ags-radius-control);
	box-shadow:    none;
	font-family:   var(--ags-font);
	font-weight:   600;
	min-height:    44px;
	padding:       0.5rem var(--ags-space-3);
}

.ags-area-utente .swal2-styled.swal2-confirm
{
	background-color: var(--ags-forest);
	color:            var(--ags-white);
}

.ags-area-utente .swal2-styled.swal2-confirm:hover
{
	background-color: var(--ags-green);
}

.ags-area-utente .swal2-styled.swal2-cancel
{
	background-color: var(--ags-white);
	border:           1px solid var(--ags-border);
	color:            var(--ags-ink);
}

.ags-area-utente .swal2-styled.swal2-cancel:hover
{
	background-color: var(--ags-sand);
}

.ags-area-utente .swal2-styled.swal2-deny
{
	background-color: var(--ags-danger);
	color:            var(--ags-white);
}

.ags-area-utente .swal2-styled:focus
{
	box-shadow: 0 0 0 3px rgba(63, 122, 88, 0.25);
}

/** Alert e badge **/

.ags-area-utente .alert
{
	border-radius: var(--ags-radius-control);
}

.ags-area-utente .alert-warning
{
	background-color: var(--ags-sand);
	border-color:     var(--ags-border);
	color:            var(--ags-ink);
}

.ags-area-utente .alert-heading
{
	color:     inherit;
	font-size: 1rem;
	font-weight: 700;
}

.ags-area-utente .badge
{
	font-weight: 600;
}

/** Popover (figlio di <body>) **/

.ags-area-utente .popover
{
	border:      1px solid var(--ags-border);
	border-radius: var(--ags-radius-control);
	box-shadow:  var(--ags-shadow-soft);
	font-family: var(--ags-font);
	max-width:   320px;
}

.ags-area-utente .popover-header
{
	background-color: var(--ags-sand);
	border-bottom:    1px solid var(--ags-border);
	color:            var(--ags-ink);
	font-size:        0.875rem;
	font-weight:      600;
	padding:          10px 14px;
}

.ags-area-utente .popover-body
{
	color:     var(--ags-ink);
	font-size: 0.875rem;
	padding:   12px 14px;
}

/** Dropdown **/

.ags-area-utente .dropdown-menu
{
	border:      1px solid var(--ags-border);
	border-radius: 10px;
	box-shadow:  var(--ags-shadow-soft);
	line-height: 1.5;
}

.ags-area-utente .dropdown-item
{
	border-radius: var(--ags-radius-control);
	color:         var(--ags-ink);
	font-size:     0.875rem;
}

.ags-area-utente .dropdown-item:hover,
.ags-area-utente .dropdown-item:focus
{
	background-color: var(--ags-sand);
	color:            var(--ags-ink);
}

.ags-area-utente .dropdown-divider
{
	border-top: 1px solid var(--ags-border);
	opacity:    1;
}

.ags-area-utente .dropdown-header
{
	color:         var(--ags-muted);
	font-size:     0.6875rem;
	font-weight:   600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/** Pulsanti **/

.ags-area-utente .btn
{
	border-radius: var(--ags-radius-control);
	font-family:   var(--ags-font);
	font-weight:   600;
}

.ags-area-utente .btn-outline-secondary
{
	--bs-btn-color:               var(--ags-ink);
	--bs-btn-border-color:        var(--ags-border);
	--bs-btn-hover-color:         var(--ags-ink);
	--bs-btn-hover-bg:            var(--ags-sand);
	--bs-btn-hover-border-color:  var(--ags-moss);
	--bs-btn-active-bg:           var(--ags-sand);
	--bs-btn-active-border-color: var(--ags-moss);
	--bs-btn-disabled-color:      var(--ags-muted);
	--bs-btn-disabled-border-color: var(--ags-border);
}

/* I "Chiudi" outline già presenti nelle pagine seguono il secondario */

.ags-area-utente .btn-outline-dark
{
	--bs-btn-color:               var(--ags-ink);
	--bs-btn-border-color:        var(--ags-border);
	--bs-btn-hover-color:         var(--ags-ink);
	--bs-btn-hover-bg:            var(--ags-sand);
	--bs-btn-hover-border-color:  var(--ags-moss);
	--bs-btn-active-bg:           var(--ags-sand);
	--bs-btn-active-border-color: var(--ags-moss);
	--bs-btn-disabled-color:      var(--ags-muted);
	--bs-btn-disabled-border-color: var(--ags-border);
}

.ags-area-utente .btn-outline-danger
{
	--bs-btn-color:               var(--ags-danger);
	--bs-btn-border-color:        var(--ags-danger);
	--bs-btn-hover-color:         var(--ags-white);
	--bs-btn-hover-bg:            var(--ags-danger);
	--bs-btn-hover-border-color:  var(--ags-danger);
	--bs-btn-active-color:        var(--ags-white);
	--bs-btn-active-bg:           var(--ags-danger);
	--bs-btn-active-border-color: var(--ags-danger);
	--bs-btn-disabled-color:      var(--ags-danger);
	--bs-btn-disabled-border-color: var(--ags-danger);
}

/* ============================================================
   5. TOPBAR — pulsanti icona 44px, badge, dropdown leggibili
   ============================================================ */

.ags-area-utente .up-topbar-welcome
{
	color:       var(--ags-ink);
	font-size:   1rem;
	font-weight: 600;
}

/* Logo mobile nella topbar */

.ags-area-utente .up-topbar-logo img
{
	height: 36px;
	max-width: unset;
	width:    auto;
}

/* Pulsanti icona e toggle menu: area toccabile 44px */

.ags-area-utente .topbar-custom .button-toggle-menu,
.ags-area-utente .topbar-custom .topnav-menu .up-topbar-btn
{
	align-items:     center;
	border-radius:   var(--ags-radius-control);
	color:           var(--ags-ink);
	display:         inline-flex;
	height:          44px;
	justify-content: center;
	line-height:     1;
	max-height:      none;
	padding:         0;
	position:        relative;
	width:           44px;
}

.ags-area-utente .topbar-custom .button-toggle-menu:hover,
.ags-area-utente .topbar-custom .topnav-menu .up-topbar-btn:hover,
.ags-area-utente .topbar-custom .button-toggle-menu:focus,
.ags-area-utente .topbar-custom .topnav-menu .up-topbar-btn:focus
{
	background-color: var(--ags-sand);
	color:            var(--ags-forest);
}

.ags-area-utente .topbar-custom .button-toggle-menu svg
{
	height: 22px;
	width:  22px;
}

.ags-area-utente .topbar-custom .topnav-menu .up-topbar-btn svg
{
	height: 20px;
	width:  20px;
}

/* Niente caret Bootstrap sui pulsanti solo-icona */

.ags-area-utente .up-topbar-btn.dropdown-toggle::after,
.ags-area-utente .up-topbar-user.dropdown-toggle::after
{
	display: none;
}

/* Badge contatore */

.ags-area-utente .topbar-custom .noti-icon-badge
{
	background-color: var(--ags-danger);
	border:           2px solid var(--ags-white);
	color:            var(--ags-white);
	display:          inline-block;
	font-size:        11px;
	font-weight:      600;
	height:           18px;
	line-height:      14px;
	min-width:        18px;
	padding:          0 3px;
	position:         absolute;
	right:            0;
	top:              0;
}

/* Avatar del menu profilo */

.ags-area-utente .up-topbar-avatar
{
	border:      1px solid var(--ags-border);
	border-radius: 50%;
	display:    inline-block;
	height:     44px;
	width:      44px;
}

/* Iniziali al posto della foto generica quando l'utente non ne ha caricata una. */
.ags-area-utente .up-topbar-avatar--iniziali
{
	align-items:     center;
	background:      var(--ags-sand);
	color:           var(--ags-forest);
	display:         flex;
	font-size:       0.9375rem;
	font-weight:     700;
	justify-content: center;
	letter-spacing:  0.02em;
	-webkit-user-select:     none;
	   -moz-user-select:     none;
	        user-select:     none;
}

/* Titoli e voci dei dropdown della topbar */

.ags-area-utente #topbar h6
{
	color:     var(--ags-ink);
	font-size: 1rem;
	font-weight: 700;
}

.ags-area-utente .topbar-custom .dropdown-lg
{
	padding: 6px;
}

.ags-area-utente .topbar-custom .profile-dropdown
{
	padding: 6px;
}

.ags-area-utente .topbar-custom .noti-title
{
	padding: 10px 12px;
}

.ags-area-utente .topbar-custom .notification-list .notify-item
{
	padding: 10px 12px;
}

.ags-area-utente .topbar-custom .notification-list .notify-item .notify-icon
{
	border-radius: 50%;
	float:         none;
	height:        40px;
	margin-right:  10px;
	width:         40px;
}

.ags-area-utente .topbar-custom .notification-list .notify-item .notify-details
{
	color:     var(--ags-ink);
	font-size: 0.875rem;
	font-weight: 600;
}

.ags-area-utente .topbar-custom .notification-list .notify-item .user-msg
{
	color: var(--ags-muted);
}

.ags-area-utente .topbar-custom .notify-all
{
	font-weight: 600;
}

.ags-area-utente .up-dropdown-empty
{
	color:         var(--ags-muted);
	font-size:     0.875rem;
	padding:       var(--ags-space-4) var(--ags-space-3);
	text-align:    center;
}

.ags-area-utente .profile-dropdown .notify-item
{
	padding: 8px 12px;
}

/* Dropdown a tutta larghezza sugli schermi molto stretti */

@media (max-width: 370px)
{
	.ags-area-utente .topbar-custom .dropdown-lg
	{
		min-width: 98%;
	}
}

/* ============================================================
   6. SIDEBAR — voce attiva evidente, icone coerenti, sobrietà
   ============================================================ */

.ags-area-utente #sidebar-menu
{
	padding: var(--ags-space-2) 10px;
}

.ags-area-utente #sidebar-menu > ul > li > a
{
	border-radius: var(--ags-radius-control);
	color:         var(--ags-ink);
	font-size:     0.9375rem;
	font-weight:   500;
	margin:        1px 0;
	padding:       9px 12px;
}

.ags-area-utente #sidebar-menu > ul > li > a:hover,
.ags-area-utente #sidebar-menu > ul > li > a:focus,
.ags-area-utente #sidebar-menu > ul > li > a:active
{
	background-color: var(--ags-sand);
	color:            var(--ags-forest);
	text-decoration:  none;
}

/* Telefono e tablet: il menu occupa tutta l'altezza del pannello e "Torna al sito" scende
   in fondo, dove arriva il pollice, lontano da Privacy e Dati. Se le voci sono tante resta
   semplicemente dopo l'ultima, e il pannello scorre. */
@media (max-width: 991.98px)
{
	.ags-area-utente .app-sidebar-menu .simplebar-content
	{
		display:        flex;
		flex-direction: column;
		min-height:     100%;
	}

	.ags-area-utente #sidebar-menu,
	.ags-area-utente #side-menu
	{
		display:        flex;
		flex:           1;
		flex-direction: column;
	}

	.ags-area-utente #side-menu > .up-sidebar-fondo
	{
		margin-top: auto;
	}
}

/* Icone feather: dimensione e margine fissi (niente style inline nel markup) */

.ags-area-utente #sidebar-menu > ul > li > a > i,
.ags-area-utente #sidebar-menu > ul > li > a > svg
{
	flex-shrink: 0;
	height:      18px;
	margin:      0 10px 0 3px;
	width:       18px;
}

.ags-area-utente #sidebar-menu hr
{
	border:      0;
	border-top:  1px solid var(--ags-border);
	margin:      var(--ags-space-2) var(--ags-space-1);
	opacity:     1;
}

/* Voce attiva: fondo tenue, testo forest 600 e barra laterale forest */

.ags-area-utente #sidebar-menu .menuitem-active > a,
.ags-area-utente #sidebar-menu a.active,
.ags-area-utente #sidebar-menu .menuitem-active .active
{
	background-color: var(--ags-green-soft);
	color:            var(--ags-forest);
	font-weight:      600;
}

.ags-area-utente #sidebar-menu .menuitem-active > a:hover,
.ags-area-utente #sidebar-menu a.active:hover
{
	background-color: var(--ags-green-soft);
	color:            var(--ags-forest);
}

.ags-area-utente #sidebar-menu .menuitem-active > a::before,
.ags-area-utente #sidebar-menu a.active::before
{
	background:     var(--ags-forest);
	border-radius:  2px;
	bottom:         6px;
	content:        "";
	left:           -10px;
	position:       absolute;
	top:            6px;
	width:          3px;
}

/* Voci di secondo livello (nav-second-level, usate da eventuali sottomenu) */

.ags-area-utente .nav-second-level li a
{
	color: var(--ags-muted);
}

.ags-area-utente .nav-second-level li a:hover,
.ags-area-utente .nav-second-level li a:focus,
.ags-area-utente .nav-second-level li.active > a
{
	color: var(--ags-forest);
}

.ags-area-utente .nav-second-level li .tp-link.active
{
	background-color: var(--ags-green-soft);
	border-radius:    var(--ags-radius-control);
	color:            var(--ags-forest);
}

/* Marker "da completare": pallino discreto, testo riservato agli screen reader */

.ags-area-utente .alert-sidebar
{
	line-height: 1;
	margin-left: 6px;
}

.ags-area-utente .up-sidebar-dot
{
	background:     var(--ags-moss);
	border-radius:  50%;
	display:        inline-block;
	height:         8px;
	vertical-align: middle;
	width:          8px;
}

/* ============================================================
   8. MOBILE — aree toccabili e page head
   ============================================================ */

@media (max-width: 575.98px)
{
	.ags-area-utente .topbar-custom .dropdown-item.notify-item
	{
		min-height: 44px;
	}

	.ags-area-utente .dt-search input,
	.ags-area-utente .dt-length select
	{
		min-height: 44px;
		width:      100%;
	}
}

/* Pulsante menu della topbar: area toccabile piena anche in larghezza */
.ags-area-utente .topbar-custom .button-toggle-menu
{
	min-width: 44px;
	min-height: 44px;
}


/**
 * COMPATIBILITÀ PAGINE PUBBLICHE
 *
 * 12 pagine del sito pubblico caricano questo foglio. Prima del redesign le regole
 * qui sotto valevano ovunque (interruttori, dropdown; Select2 ora vive in ags-components.css): le manteniamo solo
 * fuori dall'area utente. :where() non aggiunge specificità, così la cascata di
 * quelle pagine resta identica a prima. Non riportati di proposito: il verde del
 * tema forzato sui pulsanti, la rimozione del focus e il bordo rosso fisso sui
 * campi obbligatori. Colori legacy riportati sui token.
 */

:where(body:not(.ags-area-utente)) .form-switch .form-check-input:focus
{
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0, 0, 0, 0.25)'/%3e%3c/svg%3e");
	box-shadow: none !important;
}

:where(body:not(.ags-area-utente)) .form-switch .form-check-input:checked
{
	background-position: right center;
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

:where(body:not(.ags-area-utente)) .form-check > input[type=checkbox]
{
	cursor: pointer !important;
}

:where(body:not(.ags-area-utente)) .form-switch
{
	padding-left: 10px;
}

:where(body:not(.ags-area-utente)) .form-switch .form-check-input
{
	width:       30px;
	margin-left: -10px;
}

:where(body:not(.ags-area-utente)) .table thead th:last-child
{
	border-radius: 0 !important;
}

:where(body:not(.ags-area-utente)) .badge-soft-primary .bg-soft-primary
{
	background-color: var(--ags-green-soft) !important;
}

:where(body:not(.ags-area-utente)) textarea::-moz-placeholder
{
	color: var(--ags-muted) !important;
}

:where(body:not(.ags-area-utente)) textarea::placeholder
{
	color: var(--ags-muted) !important;
}

:where(body:not(.ags-area-utente)) .dropdown-menu
{
	line-height: normal !important;
}