/* yourABZ — unico foglio di stile del portale (sopra Bootstrap 5 e, nelle pagine interne, AdminLTE 4).
   Le regole riprese da myABZ (myabz/css/custom.css) sono SOLO quelle che servono qui, riscritte con:
   - le variabili del colore della ditta (--yourabz-*, da inc/tema.php, <style id="temaDitta">)
   - le variabili di Bootstrap al posto dei colori fissi (--bs-body-bg, --bs-border-color, ...), così
     funzionano anche in modalità scura (<html data-bs-theme="dark">)
   Per le pagine delle fasi future (tabelle, select2, paginazione...) le regole si riprendono da myABZ
   quando servono: le due grafiche non si allineano più da sole. */

/* ---------------------------------------------------------------------------------------------
   GLOBALE E FONT (come myABZ: corpo Figtree, titoli Manrope, etichette Kanit)
   --------------------------------------------------------------------------------------------- */
:root {
  --bs-primary: var(--yourabz-primario);
  --bs-primary-rgb: var(--yourabz-primario-rgb);
}
a, a:hover { transition: 200ms ease-in-out; }
body.bg-body-tertiary, body.login-page { font-family: 'Figtree', system-ui, sans-serif; }
body.bg-body-tertiary h1, body.bg-body-tertiary h2, body.bg-body-tertiary h3,
body.bg-body-tertiary h4, body.bg-body-tertiary h5, body.bg-body-tertiary h6,
body.bg-body-tertiary .h1, body.bg-body-tertiary .h2, body.bg-body-tertiary .h3,
body.bg-body-tertiary .h4, body.bg-body-tertiary .h5, body.bg-body-tertiary .h6,
body.bg-body-tertiary .nav-link, body.bg-body-tertiary .dropdown-item,
body.login-page h1, body.login-page h2, body.login-page h3,
body.login-page h4, body.login-page h5, body.login-page h6 { font-family: 'Manrope', system-ui, sans-serif; }
body.bg-body-tertiary label, body.bg-body-tertiary .form-label, body.bg-body-tertiary .form-check-label,
body.bg-body-tertiary th, body.bg-body-tertiary .badge, body.bg-body-tertiary .breadcrumb-item,
body.login-page label, body.login-page .form-label { font-family: 'Kanit', system-ui, sans-serif; }
/* Il titolo nella fascia colorata va in Kanit come il breadcrumb che gli sta accanto */
body.bg-body-tertiary .app-content-header h1 { font-family: 'Kanit', system-ui, sans-serif; }
body.bg-body-tertiary .dropdown-menu { --bs-dropdown-font-size: .95rem; }
body.bg-body-tertiary .nav-link { --bs-nav-link-font-weight: 400; }
body.bg-body-tertiary .nav-link, body.bg-body-tertiary .dropdown-item { letter-spacing: .5px; }
body.bg-body-tertiary .table td { vertical-align: middle; }

/* LINK: colore della ditta (esatto o adattato, vedi inc/tema.php). Escluse le classi che sono
   componenti (bottoni, voci di menu, logo), altrimenti il colore vincerebbe anche lì. */
.app-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.dropdown-toggle),
body.login-page a:not(.btn) { color: var(--yourabz-primario-testo); text-decoration: none; }
.app-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.dropdown-toggle):hover,
.app-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.dropdown-toggle):focus,
body.login-page a:not(.btn):hover, body.login-page a:not(.btn):focus { color: var(--yourabz-primario-testo-hover); }
.text-primary { color: var(--yourabz-primario-testo) !important; }

/* ---------------------------------------------------------------------------------------------
   MARCHIO yourABZ: images/logoYourABZ.svg (dal 2026-10-08, al posto della fascia "your" in CSS accanto al
   logo AB Z). L'altezza del logo è il font-size del contenitore: si ridimensiona cambiando solo quello.
   --------------------------------------------------------------------------------------------- */
.yourabz-marchio { display: inline-flex; align-items: flex-start; font-size: 60px; line-height: 1; text-decoration: none; }
.yourabz-marchio img { display: block; height: 1em; width: auto; }

/* ---------------------------------------------------------------------------------------------
   PAGINE DI ACCESSO (login, attivazione, recupero): pannello a sinistra + immagine, come myABZ.
   Sempre chiare: prima del login non si sa chi è l'utente.
   --------------------------------------------------------------------------------------------- */
body.login-page { background: #FFF !important; min-height: 100vh; padding: 0 !important; margin: 0; }
.login-split { display: flex; min-height: 100vh; width: 100%; }
.login-form-panel { background: #FFF; box-shadow: 6px 0 40px rgba(0, 0, 0, .28); display: flex; flex: 0 0 clamp(440px, 25%, 560px); max-width: clamp(440px, 25%, 560px); flex-direction: column; justify-content: center; padding: 30px 60px 60px; position: relative; z-index: 2; }
.login-brand { margin-bottom: 48px; text-align: center; }
.login-brand .yourabz-marchio { font-size: 58px; }
.login-form-inner { width: 100%; }
.login-form-inner .input-group .input-group-text:first-child { background: #E9ECEF; border-radius: .25rem 0 0 .25rem; color: #495057; }
.login-form-inner .input-group .input-group-text:last-child { background: #E9ECEF; border-radius: 0 .25rem .25rem 0; color: #495057; cursor: pointer; }
/* Anche i link a forma di bottone (<a class="btn">, es. "Torna all'accesso"), altrimenti restano più piccoli dei <button> */
.login-form-inner button, .login-form-inner .btn { font-size: 18px; }
.login-box-msg { color: #222; font-family: "Manrope"; font-size: 2rem; font-weight: 400; padding: 0 0 28px; text-align: left; }
.login-box-msg small { display: block; font-size: 1rem; color: #6C757D; margin-top: .5rem; }
.login-panel-footer { color: #999; font-family: "Kanit"; font-size: .8rem; text-align: center; position: absolute; bottom: 24px; left: 0; right: 0; }
body.login-page .login-panel-footer a:not(.btn) { color: #00813E; }   /* link ad abzsol.com: sempre verde AB Z */
.login-panel-footer a:hover, .login-panel-footer a:focus { text-decoration: underline; }
.login-visual-panel { align-items: flex-end; background: linear-gradient(160deg, rgba(0, 129, 62, .4), rgba(0, 90, 43, .55)), url('../images/bg-login.jpg') center/cover no-repeat; display: flex; flex: 1 1 auto; justify-content: flex-start; overflow: hidden; position: relative; }
.visual-copy { color: #FFF; max-width: 560px; padding: 0 60px 30px; pointer-events: none; position: relative; text-align: left; z-index: 2; }
.visual-eyebrow { font-family: "Kanit"; font-size: 1rem; letter-spacing: 2px; margin-bottom: 10px; opacity: .85; text-transform: uppercase; }
.visual-subtitle { font-family: "Manrope"; font-size: 1.9rem; font-weight: 700; line-height: 1.3; }
@media (max-width: 768px) {
  .login-split { flex-direction: column; }
  .login-form-panel { box-shadow: none; flex: 1 1 auto; max-width: 100%; padding: 40px 30px; }
  .login-visual-panel { display: none; }
}
.requisiti-password { list-style: none; padding: 0; margin: 0 0 1rem; font-size: .9rem; }
.requisiti-password li { display: flex; align-items: center; gap: .5rem; color: #B02A37; margin-bottom: .15rem; }
.requisiti-password li i { width: 1rem; text-align: center; }
.requisiti-password li.ok { color: #00813E; }
/* Codici di recupero della 2FA (configura2FA.php): due colonne, carattere a larghezza fissa */
.codici-recupero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: 1rem; background: #F8F9FA; border: 1px dashed #ADB5BD; border-radius: .5rem; }
.codici-recupero code { display: block; text-align: center; font-size: 1.05rem; letter-spacing: .08em; color: #212529; }
/* Stampa dei codici: solo il pannello del form, senza immagine laterale né bottoni */
@media print {
  .login-visual-panel, .login-panel-footer, #stampaCodici, #scaricaCodici, form { display: none !important; }
  .login-form-panel { box-shadow: none; max-width: 100%; flex: 1 1 auto; }
  .codici-recupero { background: #FFF; }
}

/* ---------------------------------------------------------------------------------------------
   BARRA IN ALTO (scura in entrambe le modalità, come myABZ)
   --------------------------------------------------------------------------------------------- */
.app-header { --bs-navbar-color: #FFF; --bs-navbar-hover-color: #FFF; --bs-navbar-active-color: #FFF; --bs-navbar-brand-color: #FFF; --bs-navbar-brand-hover-color: #FFF; border-bottom: 0; }
.app-header .navbar-brand .yourabz-marchio { font-size: 40px; }
.app-header .navbar-toggler-icon { --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.app-header .navbar-toggler { --bs-navbar-toggler-border-color: rgba(255, 255, 255, .1); }
.app-header .navbar-nav { gap: 1rem; }
.app-header .navbar-nav .nav-link { border-radius: .375rem; }
.app-header .navbar-nav .nav-link:hover, .app-header .navbar-nav .nav-link.active { background: #FFF; color: #343A40; }
@media (max-width: 991.98px) {
  .app-header .navbar-nav .nav-item { text-align: center; }
  .app-header .navbar-nav .nav-item:nth-child(n+2) { margin-top: 5px; }
}

/* Menu del referente in alto a destra (ispirato al "user menu" dell'esempio scelto dall'utente):
   cerchio con le iniziali nel colore della ditta, nome e ditta, tendina con aspetto e Logout */
.menu-referente-bottone { display: flex; align-items: center; gap: .65rem; background: transparent; border: 0; border-radius: 999px; padding: .25rem .6rem .25rem .25rem; color: #FFF; transition: background-color .15s ease; }
.menu-referente-bottone:hover, .menu-referente-bottone:focus-visible, .menu-referente.show .menu-referente-bottone { background: rgba(255, 255, 255, .12); }
.menu-referente-avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--yourabz-primario); color: var(--yourabz-testo-su-primario); font-family: "Kanit", sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: .03em; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.menu-referente-testo { flex: 0 0 10.5rem; width: 10.5rem; min-width: 0; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.menu-referente-testo strong, .menu-referente-testo small { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-referente-testo strong { font-weight: 600; font-size: .95rem; }
.menu-referente-testo small { color: rgba(255, 255, 255, .7); font-size: .72rem; }
/* Gruppo di destra sempre largo uguale (campanella o no, nome e ditta lunghi o corti): il menu centrale resta fermo */
.header-destra { display: flex; align-items: center; justify-content: flex-end; }
@media (min-width: 992px) { .header-destra { width: 18.5rem; } }
.menu-referente-freccia { transition: transform .2s ease; }
.menu-referente.show .menu-referente-freccia { transform: rotate(180deg); }
.menu-referente-tendina { min-width: 280px; padding: .5rem; border: 0; border-radius: .75rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); margin-top: .5rem !important; }
.menu-referente-sezione { padding: .5rem .75rem .25rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--yourabz-primario-testo); }   /* titoli della tendina nel colore della ditta */
.menu-referente-email { padding: 0 .75rem .5rem; font-size: .85rem; color: var(--bs-secondary-color); word-break: break-all; }
.menu-referente-tendina .dropdown-item { border-radius: .5rem; padding: .55rem .75rem; color: var(--bs-body-color); }
.menu-referente-tendina .dropdown-item:hover, .menu-referente-tendina .dropdown-item:focus { background: rgba(var(--yourabz-primario-rgb), .12); color: var(--yourabz-primario-testo); }
/* Selettore azienda (solo con più ditte): stesso stile del bottone del referente, la tendina riusa
   .menu-referente-tendina; la ditta corrente è evidenziata nel suo colore con la spunta */
.menu-referente-tendina .dropdown-item.active, .menu-referente-tendina .dropdown-item:active { background: rgba(var(--yourabz-primario-rgb), .12); color: var(--yourabz-primario-testo); font-weight: 600; }

/* Scelta dell'aspetto: tre pulsanti affiancati, quello attivo nel colore della ditta */
.scelta-tema { display: flex; gap: .35rem; padding: 0 .25rem .5rem; }
/* line-height 1 + padding sotto un po' minore: la scritta lascia ~2 px sotto le lettere, così icona e scritta risultano centrate (misurato); mb-1 sotto l'icona per staccarla dalla scritta */
.scelta-tema button { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; padding: .65rem .25rem .55rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: transparent; color: var(--bs-body-color); font-size: .78rem; line-height: 1; transition: background-color .15s ease, border-color .15s ease; }
.scelta-tema button i { font-size: 1rem; line-height: 1; margin-bottom: .25rem; }
.scelta-tema button:hover { border-color: var(--yourabz-primario); }
.scelta-tema button.attivo { background: var(--yourabz-primario); border-color: var(--yourabz-primario); color: var(--yourabz-testo-su-primario); }

/* ---------------------------------------------------------------------------------------------
   FASCIA COLORATA CON TITOLO E BREADCRUMB, CARD, BOTTONI — testo sopra il colore della ditta
   (chiaro = bianco, scuro = grigio quasi nero) come scelto in myABZ
   --------------------------------------------------------------------------------------------- */
.bg-primary, .bg-primary.text-white, .bg-primary .text-white, .text-bg-primary { color: var(--yourabz-testo-su-primario) !important; }
.breadcrumb .breadcrumb-item { font-size: 16px; }
.breadcrumb-item+.breadcrumb-item { padding-left: 10px; }
.app-content-header .breadcrumb-item+.breadcrumb-item::before { color: var(--yourabz-testo-su-primario); padding-right: 10px; }
.app-content-header .breadcrumb .breadcrumb-item a { color: rgba(var(--yourabz-testo-su-primario-rgb), .66) !important; text-decoration: underline !important; }
.app-content-header .breadcrumb .breadcrumb-item,
.app-content-header .breadcrumb .breadcrumb-item a:hover,
.app-content-header .breadcrumb .breadcrumb-item a:focus,
.app-content-header .breadcrumb .breadcrumb-item.active { color: var(--yourabz-testo-su-primario) !important; }

/* Card-header della stessa altezza con o senza bottone (65 px, come myABZ) */
.card-header:has(> h3.card-title:only-child), .card-header:has(> .row), .card-header.d-flex.align-items-center { display: flex; align-items: center; min-height: 65px; }
.card-header:has(> .row) > .row { flex: 1 1 auto; min-width: 0; }
.card-primary, .text-bg-primary {
  --lte-card-variant-bg: var(--yourabz-primario);
  --lte-card-variant-bg-rgb: var(--yourabz-primario-rgb);
  --lte-card-variant-color: var(--yourabz-testo-su-primario);
  --lte-card-variant-color-rgb: var(--yourabz-testo-su-primario-rgb);
}
.btn-success, body.bg-body-tertiary .btn-primary {
  --bs-btn-color: var(--yourabz-testo-su-primario);
  --bs-btn-bg: var(--yourabz-primario);
  --bs-btn-border-color: var(--yourabz-primario);
  --bs-btn-hover-color: var(--yourabz-testo-su-primario);
  --bs-btn-hover-bg: var(--yourabz-primario-scuro);
  --bs-btn-hover-border-color: var(--yourabz-primario-scuro);
  --bs-btn-focus-shadow-rgb: var(--yourabz-primario-rgb);
  --bs-btn-active-color: var(--yourabz-testo-su-primario);
  --bs-btn-active-bg: var(--yourabz-primario-scuro);
  --bs-btn-active-border-color: var(--yourabz-primario-scuro);
  --bs-btn-disabled-color: var(--yourabz-testo-su-primario);
  --bs-btn-disabled-bg: var(--yourabz-primario);
  --bs-btn-disabled-border-color: var(--yourabz-primario);
}
.btn-outline-primary {
  --bs-btn-color: var(--yourabz-primario);
  --bs-btn-border-color: var(--yourabz-primario);
  --bs-btn-hover-color: var(--yourabz-testo-su-primario);
  --bs-btn-hover-bg: var(--yourabz-primario);
  --bs-btn-hover-border-color: var(--yourabz-primario);
  --bs-btn-focus-shadow-rgb: var(--yourabz-primario-rgb);
  --bs-btn-active-color: var(--yourabz-testo-su-primario);
  --bs-btn-active-bg: var(--yourabz-primario-scuro);
  --bs-btn-active-border-color: var(--yourabz-primario-scuro);
  --bs-btn-disabled-color: var(--yourabz-primario);
  --bs-btn-disabled-border-color: var(--yourabz-primario);
}
.btn-light { border-color: var(--bs-border-color); }
.modal-header-flat .modal-title { text-shadow: none; }

/* ---------------------------------------------------------------------------------------------
   CAMPI DEI FORM E SPUNTE (bordo e ombra di selezione nel colore della ditta)
   --------------------------------------------------------------------------------------------- */
.form-check-input { cursor: pointer; width: 1.2em; height: 1.2em; accent-color: var(--yourabz-primario); }
.form-check-input:checked { background-color: var(--yourabz-primario); border-color: var(--yourabz-primario); }
.form-check-input:focus { border-color: var(--yourabz-primario); box-shadow: 0 0 0 .25rem rgba(var(--yourabz-primario-rgb), .25); }
.app-wrapper .form-control[readonly], .app-wrapper .form-select[readonly],
body.login-page .form-control[readonly], body.login-page .form-select[readonly],
.modal-content:has(.modal-header-flat) .form-control[readonly], .modal-content:has(.modal-header-flat) .form-select[readonly] { background-color: var(--bs-secondary-bg); }
.app-wrapper .form-control:focus, .app-wrapper .form-select:focus,
body.login-page .form-control:focus, body.login-page .form-select:focus,
.modal-content:has(.modal-header-flat) .form-control:focus, .modal-content:has(.modal-header-flat) .form-select:focus {
  border-color: color-mix(in srgb, var(--yourabz-primario) 50%, #FFF);
  box-shadow: 0 0 0 .25rem rgba(var(--yourabz-primario-rgb), .25);
}
.app-wrapper .input-group-text, body.login-page .input-group-text,
.modal-content:has(.modal-header-flat) .input-group-text { background-color: rgba(var(--yourabz-primario-rgb), .08); }

/* ---------------------------------------------------------------------------------------------
   PRELOADER (come myABZ, con il marchio yourABZ; scuro in modalità scura)
   --------------------------------------------------------------------------------------------- */
#preloader { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bs-body-bg); transition: opacity .4s ease, visibility .4s ease; }
#preloader.preloader-nascosto { opacity: 0; visibility: hidden; pointer-events: none; }
#preloader .yourabz-marchio { font-size: 88px; margin-bottom: 1.75rem; animation: preloader-pulse 1.4s ease-in-out infinite; }
.preloader-barra { width: 380px; height: 6px; background: var(--bs-secondary-bg); border-radius: 999px; overflow: hidden; }
.preloader-barra-fill { height: 100%; width: 0%; background: var(--bs-primary); border-radius: 999px; transition: width .25s ease-out; }
.preloader-testo { margin-top: .9rem; font-size: .95rem; font-weight: 700; letter-spacing: .15em; color: var(--bs-secondary-color); animation: preloader-testo-pulsa 1.6s ease-in-out infinite; }
#preloaderPercentuale { display: inline-block; margin-left: .4em; letter-spacing: normal; color: var(--yourabz-primario-testo); }
@keyframes preloader-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes preloader-testo-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ---------------------------------------------------------------------------------------------
   PIEDE (chiaro come myABZ, scuro in modalità scura) e contenuti delle pagine
   --------------------------------------------------------------------------------------------- */
.piede-yourabz { padding-top: .75rem; padding-bottom: .75rem; }
.piede-yourabz .logo-footer { height: 44px; width: auto; display: block; }
/* Due versioni del logo: scritta "design by" scura sul chiaro, bianca in modalità scura */
.piede-yourabz .logo-footer-scuro, [data-bs-theme="dark"] .piede-yourabz .logo-footer-chiaro { display: none; }
[data-bs-theme="dark"] .piede-yourabz .logo-footer-scuro { display: block; }
/* Link ad abzsol.com: sempre verde AB Z, unica eccezione al colore della ditta (stessa lista di
   :not() della regola dei link, così vince). In modalità scura un verde più chiaro, leggibile. */
.app-wrapper .piede-yourabz a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.dropdown-toggle) { color: #00813E; }
.app-wrapper .piede-yourabz a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.dropdown-toggle):hover,
.app-wrapper .piede-yourabz a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.dropdown-toggle):focus { color: #006732; text-decoration: underline; }
[data-bs-theme="dark"] .app-wrapper .piede-yourabz a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.dropdown-toggle) { color: #2FBF71; }
[data-bs-theme="dark"] .app-wrapper .piede-yourabz a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.dropdown-toggle):hover { color: #5FD393; }

/* ---------------------------------------------------------------------------------------------
   HOME (index.php): intestazione della ditta, tessere con i numeri chiave, card del riepilogo.
   Etichette (.maiusc) nel colore della ditta in versione leggibile sul fondo (--yourabz-primario-testo).
   --------------------------------------------------------------------------------------------- */
.maiusc { display: block; font-family: 'Kanit', system-ui, sans-serif; font-size: .75rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--yourabz-primario-testo); }
.home-intestazione .card-body { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 1.25rem; }
/* Il clearfix ::after di AdminLTE nel flex diventa un elemento vuoto e aggiunge un gap a destra: via */
.home-intestazione .card-body::after { display: none; }
.home-icona-ditta { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 56px; width: 56px; height: 56px; border-radius: 14px; background: rgba(var(--yourabz-primario-rgb), .14); color: var(--yourabz-primario-testo); font-size: 1.5rem; }
.home-ditta { min-width: 0; }
.home-ditta h2 { margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--bs-emphasis-color); line-height: 1.2; }
.home-ditta span { color: var(--bs-secondary-color); font-size: .9rem; }
/* Saluto a destra: saluto (in base all'ora o benvenuto) e nome, poi l'icona grande come quella della ditta */
.home-saluto { display: flex; align-items: center; gap: 1rem; margin-left: auto; text-align: right; color: var(--bs-secondary-color); font-size: .9rem; }
.home-saluto strong { display: block; font-family: 'Manrope', system-ui, sans-serif; font-size: 1.05rem; color: var(--bs-emphasis-color); }

.home-tessere { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.home-tessere.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-tessera { display: flex; flex-direction: column; gap: .2rem; min-width: 0; padding: .9rem 1rem; background: var(--bs-body-bg); border-radius: .5rem; border-top: 3px solid var(--yourabz-primario); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.home-tessera .grande { display: flex; align-items: center; min-height: 1.84rem; font-family: 'Manrope', system-ui, sans-serif; font-size: 1.6rem; font-weight: 800; line-height: 1.15; color: var(--bs-emphasis-color); font-variant-numeric: tabular-nums; }
.home-tessera .sotto { font-size: .82rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-tessera.spenta { border-top-color: var(--bs-border-color); }
/* "In arrivo" più piccolo ma alto come i numeri (min-height), così le righe sotto restano allineate */
.home-tessera.spenta .grande { font-size: 1.05rem; font-weight: 600; color: var(--bs-secondary-color); }
.home-tessera.basso { border-top-color: var(--bs-warning); }
.home-tessera.basso .grande { color: var(--bs-warning-text-emphasis); }
.home-tessera.negativo { border-top-color: var(--bs-danger); }
.home-tessera.negativo .grande { color: var(--bs-danger-text-emphasis); }
/* Etichetta "Ore residue" dello stesso colore del bordo sopra (giallo / rosso; normale = colore ditta) */
.home-tessera.basso .maiusc { color: var(--bs-warning-text-emphasis); }
.home-tessera.negativo .maiusc { color: var(--bs-danger-text-emphasis); }
@media (max-width: 991.98px) { .home-tessere, .home-tessere.tre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .home-saluto { margin-left: 0; text-align: left; } }

/* Saldo del pacchetto ore */
.home-saldo { display: flex; align-items: baseline; gap: .5rem; margin: .15rem 0 .6rem; }
.home-saldo .numero { font-family: 'Manrope', system-ui, sans-serif; font-size: 2.75rem; font-weight: 800; line-height: 1; color: var(--bs-emphasis-color); font-variant-numeric: tabular-nums; }
.home-saldo .unita { font-weight: 600; color: var(--bs-secondary-color); }
.home-saldo.basso .numero { color: var(--bs-warning-text-emphasis); }
.home-saldo.negativo .numero { color: var(--bs-danger-text-emphasis); }
.home-stato { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .75rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.home-stato.ok { background: rgba(var(--yourabz-primario-rgb), .13); color: var(--yourabz-primario-testo); }
.home-stato.basso { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.home-stato.negativo { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.home-movimenti { list-style: none; margin: .25rem 0 0; padding: 0; }
.home-movimenti li { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .75rem; align-items: center; padding: .55rem 0; border-top: 1px dashed var(--bs-border-color); font-size: .92rem; }
/* Pagina Pacchetto ore: colonne data | voce | bottone Dettagli | ore (la cella del bottone resta vuota sulle altre righe) */
.home-movimenti.elenco-completo li { grid-template-columns: 6.5rem 1fr 1.9rem auto; }
.home-movimenti .azione { display: flex; justify-content: center; }
.btn-icona { --bs-btn-padding-y: 0; --bs-btn-padding-x: 0; --bs-btn-font-size: .8rem; width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.home-movimenti li:has(.btn-icona) { padding: .4rem 0; }
@media (max-width: 575.98px) { .home-movimenti.elenco-completo li { grid-template-columns: 5.5rem 1fr 1.9rem auto; column-gap: .5rem; } }

/* Modal del dettaglio intervento (inc/modalIntervento.php) */
.modal-dettaglio .modal-header { align-items: center; gap: 1rem; }
.modal-dettaglio .dettaglio-icona { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; flex: 0 0 3rem; border-radius: 50%; background: rgba(255, 255, 255, .22); font-size: 1.35rem; }
.modal-dettaglio .dettaglio-sottotitolo { font-size: .9rem; opacity: .9; font-variant-numeric: tabular-nums; }
.dettaglio-label { display: block; font-family: Kanit, system-ui, sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--yourabz-primario-testo); margin-bottom: .35rem; }
.dettaglio-riquadro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.15rem; border-radius: var(--bs-border-radius-lg); background: rgba(var(--yourabz-primario-rgb), .09); border: 1px solid rgba(var(--yourabz-primario-rgb), .25); }
.intervento-dove { background: var(--yourabz-primario); color: var(--yourabz-testo-su-primario); font-size: .9rem; font-weight: 400; padding: .55em .8em; }
.intervento-tecnico { display: flex; align-items: center; gap: .75rem; font-weight: 600; }
.intervento-iniziali { display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--yourabz-primario); color: var(--yourabz-testo-su-primario); font-family: Kanit, sans-serif; font-weight: 600; font-size: .95rem; }
.dettaglio-descrizione { white-space: pre-line; padding: .75rem 1rem; border-left: 4px solid var(--yourabz-primario); background: var(--bs-tertiary-bg); border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0; }
.home-movimenti .data { color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.home-movimenti .ore { font-weight: 700; font-variant-numeric: tabular-nums; }
.home-movimenti .ore.piu { color: var(--yourabz-primario-testo); }

/* Righe di dati con icona tonda (ultimo intervento), separate da un tratteggio */
/* Icona allineata in alto con l'etichetta (DATA, DURATA...), anche quando il testo va su più righe */
.riga-dato { display: flex; align-items: flex-start; gap: .9rem; padding: .7rem 0; border-bottom: 1px dashed var(--bs-border-color); }
.riga-dato:first-child { padding-top: 0; }
.riga-dato:last-child { border-bottom: 0; padding-bottom: 0; }
.riga-dato > div { min-width: 0; }
/* Le lettere dell'etichetta partono 4,2 px sotto il bordo del loro rigo (misurato): l'icona scende di 4 px per allinearsi */
.riga-dato .icona-dato { margin-top: 4px; }
.icona-dato { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; background: rgba(var(--yourabz-primario-rgb), .13); color: var(--yourabz-primario-testo); }
.riga-dato .valore { display: block; font-weight: 600; color: var(--bs-emphasis-color); overflow-wrap: anywhere; }
/* Descrizione: prime 3 righe (il testo completo arriverà con lo storico interventi) */
.riga-dato .testo-descrizione { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: .15rem; overflow-wrap: anywhere; }
.home-vuoto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; height: 100%; min-height: 8rem; text-align: center; color: var(--bs-secondary-color); }
.home-vuoto > i { font-size: 1.8rem; color: var(--yourabz-primario-testo); opacity: .7; }

/* ---------------------------------------------------------------------------------------------
   PAGINA 404 (404.php, ErrorDocument in .htaccess) — stessa bozza "I cubi dormono" di myABZ.
   Tutto nei colori AB Z (sfondo, bottoni, etichetta), anche con il colore della ditta: segue solo la
   modalità chiara/scura del referente collegato.
   Unico bottone outline del portale ("Torna indietro"), chiesto esplicitamente dall'utente.
   --------------------------------------------------------------------------------------------- */
body.pagina-404 { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; padding: 2rem 1rem; text-align: center; position: relative; }
/* Sfondo della 404: sempre verde, anche in yourABZ (non segue il colore della ditta). Base color menta
   in sfumatura verticale, due aloni verdi sfocati che si spostano e "respirano" lentissimi (18 s, in
   tono con i cubi che dormono) e un alone chiaro dietro la fascia. Fermi con "riduci movimento". */
body.pagina-404.bg-body-tertiary { background: linear-gradient(180deg, #F4F7F5 0%, #E6F3EC 100%) fixed !important; overflow-x: hidden; }
body.pagina-404 > * { position: relative; z-index: 1; }
body.pagina-404::before, body.pagina-404::after { content: ""; position: fixed; z-index: 0; border-radius: 50%; filter: blur(60px); pointer-events: none; animation: alone-404 18s ease-in-out infinite; }
body.pagina-404::before { width: 46vw; height: 46vw; left: -12vw; top: -14vw; background: rgba(0, 131, 62, .22); }
body.pagina-404::after { width: 40vw; height: 40vw; right: -10vw; bottom: -14vw; background: rgba(111, 207, 154, .35); animation-delay: -9s; }
@keyframes alone-404 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4vw, 3vw) scale(1.12); } }
.scena-404::before { content: ""; position: absolute; left: 12%; right: 12%; top: 5%; bottom: -10%; z-index: -1; background: radial-gradient(ellipse at center, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 70%); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { body.pagina-404::before, body.pagina-404::after { animation: none; } }
/* Modalità scura (solo yourABZ): verde scurissimo con gli stessi aloni, più tenui */
[data-bs-theme="dark"] body.pagina-404.bg-body-tertiary { background: linear-gradient(180deg, #0E1712 0%, #12211A 100%) fixed !important; }
[data-bs-theme="dark"] body.pagina-404::before { background: rgba(0, 131, 62, .18); }
[data-bs-theme="dark"] body.pagina-404::after { background: rgba(111, 207, 154, .12); }
[data-bs-theme="dark"] .scena-404::before { background: radial-gradient(ellipse at center, rgba(111, 207, 154, .08) 0%, rgba(111, 207, 154, 0) 70%); }
.scena-404 { position: relative; width: min(900px, 100%); aspect-ratio: 900 / 240; }
.scena-404 .fascia-404 { position: absolute; left: 0; right: 0; top: 54.58%; height: 21.25%; background: linear-gradient(90deg, rgba(0, 131, 62, 0) 0%, #00833E 12%, #00833E 88%, rgba(0, 131, 62, 0) 100%); }
.scena-404 .cubo-404 { position: absolute; top: 27.9%; width: 16.67%; animation: cubo-404-fluttua 3.2s ease-in-out infinite; }
.scena-404 .cubo-404 img { display: block; width: 100%; height: auto; }
.scena-404 .cubo-404-a { left: 32.22%; }
.scena-404 .cubo-404-b { left: 47.33%; animation-delay: -1.05s; }
.scena-404 .cubo-404-z { left: 67%; animation-delay: -2.1s; }
@keyframes cubo-404-fluttua { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10.7%) rotate(2deg); } }
.scena-404 .zeta-404 { position: absolute; left: 82.2%; top: 16.7%; font-family: 'Kanit', sans-serif; font-weight: 600; color: #00813E; font-size: clamp(1rem, 2.4vw, 1.9rem); opacity: 0; animation: zeta-404-sale 4.5s ease-in infinite; }
[data-bs-theme="dark"] .scena-404 .zeta-404 { color: #2FBF71; }
/* Le "z" escono da tutti e tre i cubi, sfasate (ritardi nel markup): vicino allo spigolo in alto a destra di ognuno */
.scena-404 .zeta-404-a { left: 46.5%; }
.scena-404 .zeta-404-b { left: 61.5%; }
.scena-404 .zeta-404-2 { margin: .6rem 0 0 .6rem; font-size: clamp(1.2rem, 3vw, 2.4rem); }
.scena-404 .zeta-404-3 { margin: .25rem 0 0 -.4rem; font-size: clamp(.9rem, 2vw, 1.6rem); }
@keyframes zeta-404-sale { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(50px, -110px) scale(1.3); opacity: 0; } }
body.pagina-404 .etichetta-404 { font-family: 'Kanit', sans-serif; font-weight: 600; font-size: .95rem; letter-spacing: .2em; text-transform: uppercase; color: #00813E; }
[data-bs-theme="dark"] body.pagina-404 .etichetta-404 { color: #2FBF71; }
body.pagina-404 h1 { font-family: 'Kanit', sans-serif; font-weight: 600; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.1; margin: .5rem 0 .75rem; color: var(--bs-emphasis-color); }
body.pagina-404 .testo-404 { font-size: 1.1rem; color: var(--bs-secondary-color); max-width: 560px; margin: 0 auto; }
body.pagina-404 .btn-404 { border-width: 2px; font-weight: 700; padding: .7rem 1.5rem; }
/* Bottoni della 404 sempre verdi AB Z, anche con il colore della ditta (scelta dell'utente) */
body.pagina-404 .btn-404.btn-success { --bs-btn-color: #FFF; --bs-btn-bg: #00813E; --bs-btn-border-color: #00813E; --bs-btn-hover-color: #FFF; --bs-btn-hover-bg: #006E35; --bs-btn-hover-border-color: #006E35; --bs-btn-active-color: #FFF; --bs-btn-active-bg: #006E35; --bs-btn-active-border-color: #006E35; --bs-btn-focus-shadow-rgb: 0, 129, 62; }
body.pagina-404 .btn-404-indietro { --bs-btn-color: #00813E; --bs-btn-border-color: #00813E; --bs-btn-hover-color: #FFF; --bs-btn-hover-bg: #00813E; --bs-btn-hover-border-color: #00813E; --bs-btn-active-color: #FFF; --bs-btn-active-bg: #006E35; --bs-btn-active-border-color: #006E35; --bs-btn-focus-shadow-rgb: 0, 129, 62; }
[data-bs-theme="dark"] body.pagina-404 .btn-404-indietro { --bs-btn-color: #2FBF71; --bs-btn-border-color: #2FBF71; }
@media (prefers-reduced-motion: reduce) { .scena-404 .cubo-404 { animation: none; } .scena-404 .zeta-404 { animation: none; opacity: .6; } }

/* ---------------------------------------------------------------------------------------------
   PROFILO DEL REFERENTE (profilo.php)
   --------------------------------------------------------------------------------------------- */
img.menu-referente-avatar { object-fit: cover; padding: 0; }
.avatar-profilo { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; flex: 0 0 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--bs-body-bg), 0 0 0 5px var(--yourabz-primario); }
.avatar-profilo-iniziali { background: var(--yourabz-primario); color: var(--yourabz-testo-su-primario); font-family: "Kanit", sans-serif; font-weight: 600; font-size: 2.1rem; letter-spacing: .03em; }
.requisiti-password-colonne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
[data-bs-theme="dark"] .codici-recupero { background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .codici-recupero code { color: var(--bs-emphasis-color); }
@media (max-width: 575.98px) { .requisiti-password-colonne { grid-template-columns: 1fr; } }
/* Bottoni di salvataggio: sempre verdi AB Z, anche con il colore della ditta (scelta dell'utente) */
.btn-salva { --bs-btn-color: #FFF; --bs-btn-bg: #00813E; --bs-btn-border-color: #00813E; --bs-btn-hover-color: #FFF; --bs-btn-hover-bg: #006E35; --bs-btn-hover-border-color: #006E35; --bs-btn-active-color: #FFF; --bs-btn-active-bg: #006E35; --bs-btn-active-border-color: #006E35; --bs-btn-disabled-color: #FFF; --bs-btn-disabled-bg: #00813E; --bs-btn-disabled-border-color: #00813E; --bs-btn-focus-shadow-rgb: 0, 129, 62; }
/* Icone di bottoni e intestazioni delle card: sempre del colore del testo che le accompagna (con
   qualsiasi colore della ditta e testo chiaro/scuro), mai di un colore proprio */
.btn i[class*="fa-"], .card-header i[class*="fa-"], .app-content-header i[class*="fa-"] { color: inherit; }

/* SweetAlert2 in modalità scura: stessi colori delle card */
[data-bs-theme="dark"] .swal2-popup { background: var(--bs-body-bg); color: var(--bs-body-color); }
[data-bs-theme="dark"] .swal2-title, [data-bs-theme="dark"] .swal2-html-container { color: var(--bs-body-color); }

/* ---------------------------------------------------------------------------------------------
   OFFERTE (offertePacchettoOre.php): quelle ancora da valutare hanno il bordo nel colore della ditta
   --------------------------------------------------------------------------------------------- */
.card-offerta.da-valutare { box-shadow: 0 0 0 2px var(--yourabz-primario), 0 1px 3px rgba(0, 0, 0, .08); }
/* Su schermi stretti il titolo resta intero ("Offerta n. 6") e semmai va a capo il badge */
.card-offerta .card-header { flex-wrap: wrap; gap: .5rem; padding-top: .6rem; padding-bottom: .6rem; }
.card-offerta .card-header .card-title { white-space: nowrap; }
.card-offerta .card-header .badge { font-size: 1rem; font-weight: 400; padding: .6em .75em; }
.card-offerta .card-footer { background: var(--bs-tertiary-bg); }

/* Bottone "Apri il PDF" delle offerte: rosso Acrobat Reader */
.btn-pdf { --bs-btn-color: #FFF; --bs-btn-bg: #EC1C24; --bs-btn-border-color: #EC1C24;
  --bs-btn-hover-color: #FFF; --bs-btn-hover-bg: #C8161D; --bs-btn-hover-border-color: #C8161D;
  --bs-btn-active-color: #FFF; --bs-btn-active-bg: #B01319; --bs-btn-active-border-color: #B01319;
  --bs-btn-focus-shadow-rgb: 236, 28, 36; }

/* Tendina delle voci del menu principale (Pacchetto ore): stessa grafica della tendina del referente,
   larga almeno quanto la voce che la apre e con la voce scelta nel colore della ditta */
.app-header .navbar-nav .menu-nav-tendina { min-width: max(100%, 15rem); margin-top: .5rem !important; }
.app-header .navbar-nav .menu-nav-tendina .dropdown-item { white-space: nowrap; padding: .7rem 1.25rem; font-size: 1rem; }

/* PDF dell'offerta in un modal: loader col marchio finché il PDF non è caricato */
.pdf-attesa { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 75vh; }
.pdf-attesa .yourabz-marchio { font-size: 72px; margin-bottom: 1.5rem; animation: preloader-pulse 1.4s ease-in-out infinite; }
.pdf-attesa .preloader-barra-fill { width: 40%; animation: pdf-attesa-scorri 1.3s ease-in-out infinite; }
@keyframes pdf-attesa-scorri { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.pdf-frame { width: 100%; height: 75vh; border: 0; display: none; }

/* TICKET (ticket.php, nuovoTicket.php, dettaglioTicket.php) */
.tabella-ticket tbody tr.riga-ticket { cursor: pointer; }
.tabella-ticket .descrizione-ticket { min-width: 16rem; overflow-wrap: anywhere; }
/* Scelta dell'argomento: tre riquadri, quello scelto nel colore della ditta */
.scelta-argomento { display: flex; flex-direction: column; align-items: center; gap: .35rem; height: 100%; padding: 1.1rem .9rem; text-align: center; cursor: pointer; background: var(--bs-body-bg); border: 2px solid var(--bs-border-color); border-radius: .6rem; color: var(--bs-body-color); transition: border-color .15s ease, background-color .15s ease; }
.scelta-argomento i { color: var(--yourabz-primario-testo); }
.scelta-argomento small { color: var(--bs-secondary-color); }
.scelta-argomento:hover { border-color: var(--yourabz-primario); }
.btn-check:checked + .scelta-argomento { border-color: var(--yourabz-primario); background: rgba(var(--yourabz-primario-rgb), .1); }
.btn-check:focus-visible + .scelta-argomento { outline: 2px solid var(--yourabz-primario); outline-offset: 2px; }
/* Conversazione: messaggi del cliente a destra, di AB Z a sinistra, eventi di stato al centro */
.conversazione { display: flex; flex-direction: column; gap: .9rem; }
.messaggio { max-width: 85%; padding: .7rem .95rem; border-radius: .7rem; background: var(--bs-secondary-bg); border-left: 4px solid var(--bs-border-color); }
.messaggio.cliente { align-self: flex-end; background: rgba(var(--yourabz-primario-rgb), .1); border-left-color: var(--yourabz-primario); }
.messaggio .intestazione-messaggio { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .3rem; font-size: .85rem; }
.messaggio .intestazione-messaggio span { color: var(--bs-secondary-color); }
.messaggio .testo-messaggio { overflow-wrap: anywhere; }
.evento-stato { text-align: center; }
.evento-stato span { display: inline-block; padding: .15rem .8rem; font-size: .8rem; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: 999px; }
.allegati-messaggio { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.allegato-ticket { display: inline-flex; align-items: center; padding: .25rem .6rem; font-size: .85rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .4rem; text-decoration: none; overflow-wrap: anywhere; }
.allegato-ticket small { margin-left: .35rem; color: var(--bs-secondary-color); }
@media (max-width: 575.98px) { .messaggio { max-width: 100%; } }

/* Badge di stato dei ticket: grandi come quelli delle offerte */
.badge-stato { font-size: 1rem; font-weight: 400; padding: .6em .75em; }
/* Righe degli allegati (js/allegatiMultipli.js) */
.allegati-righe .allegato-riga:last-child { margin-bottom: 0 !important; }

/* Campanella degli aggiornamenti (a fianco del menu del referente) */
.menu-notifiche-bottone { position: relative; display: grid; place-items: center; width: 48px; height: 48px; background: transparent; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; color: #FFF; font-size: 1.15rem; transition: background-color .15s ease; }
.menu-notifiche-bottone:hover, .menu-notifiche-bottone:focus-visible, .menu-notifiche.show .menu-notifiche-bottone { background: rgba(255, 255, 255, .12); }
.menu-notifiche-badge { position: absolute; top: -.35rem; right: -.4rem; font-size: .72rem; box-shadow: 0 0 0 2px #23282e; }
.menu-notifiche-tendina { width: min(24rem, 92vw); padding: 0; overflow: hidden; }
/* Sul telefono la campanella sta a sinistra dell'avatar: la tendina allineata al suo bordo destro uscirebbe dallo schermo. Si ancora
   quindi ai bordi della finestra (sotto la campanella) al posto del posizionamento di Popper, che scrive stili inline (da qui !important) */
@media (max-width: 575.98px) {
  .menu-notifiche-tendina { position: fixed !important; top: auto !important; bottom: auto !important; left: .5rem !important; right: .5rem !important; width: auto; transform: none !important; margin-top: .5rem !important; }
}
.menu-notifiche-testa { display: flex; align-items: center; justify-content: space-between; padding: .65rem .85rem .5rem; border-bottom: 1px solid var(--bs-border-color); }
.notifica-riga { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem .85rem; white-space: normal; border-radius: 0; }
.notifica-riga.nuova { background: rgba(var(--yourabz-primario-rgb), .1); }
.notifica-riga b { display: block; font-size: .88rem; color: var(--bs-emphasis-color); }
.notifica-riga small { color: var(--bs-secondary-color); }
.notifica-icona { flex: 0 0 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--yourabz-primario); color: var(--yourabz-testo-su-primario, #FFF); font-size: .85rem; }
/* Righe non lette dell'elenco ticket */
.pallino-nuovo { display: inline-block; width: .8rem; height: .8rem; margin-right: .75rem; border-radius: 50%; background: var(--bs-danger); box-shadow: 0 0 0 3px rgba(var(--bs-danger-rgb), .28); vertical-align: middle; animation: pallino-pulsa 1.6s ease-in-out infinite; }
@keyframes pallino-pulsa { 0% { box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), .55); } 70% { box-shadow: 0 0 0 .55rem rgba(var(--bs-danger-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0); } }
@media (prefers-reduced-motion: reduce) { .pallino-nuovo { animation: none; } }
/* DataTables allinea a destra le colonne che crede numeriche: nell'elenco ticket tutto a sinistra, prime due colonne strette */
.tabella-ticket th, .tabella-ticket td { text-align: left !important; padding-inline: .5rem; }
.tabella-ticket th:nth-child(1), .tabella-ticket th:nth-child(2) { width: 1%; white-space: nowrap; }
/* Colonna Stato stretta, badge a destra; badge un filo più piccolo che nel dettaglio */
.tabella-ticket th.colonna-stato, .tabella-ticket td.colonna-stato { width: 1%; white-space: nowrap; text-align: right !important; }
.tabella-ticket .badge-stato { font-size: .9rem; padding: .5em .7em; }
/* Righe a zebra neutre (una bianca, una grigia) con hover nel colore della ditta al 15%; le non lette si riconoscono da pallino e numero in grassetto */
.tabella-ticket > tbody > tr > * { background-color: var(--bs-body-bg); box-shadow: none; }
.tabella-ticket > tbody > tr:nth-child(even) > * { background-color: #f4f4f4; }
[data-bs-theme="dark"] .tabella-ticket > tbody > tr:nth-child(even) > * { background-color: var(--bs-tertiary-bg); }
.tabella-ticket > tbody > tr:hover > * { background-color: rgba(var(--yourabz-primario-rgb), .15); }
/* Elenco Interventi AB Z: barra con mese e ricerca, poi gli interventi (uno mese alla volta) su due colonne */
.barra-interventi { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; }
.navigazione-mesi { display: flex; gap: .5rem; align-items: center; }
.navigazione-mesi .form-select { width: auto; font-weight: 600; }
.navigazione-mesi #sceltaMese { min-width: 10rem; }
.ricerca-interventi { width: min(100%, 22rem); }
.nota-interventi { margin-top: .75rem; font-size: .85rem; color: var(--bs-secondary-color); }
.elenco-interventi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; align-items: stretch; }
.elenco-interventi:not(.in-ricerca) .mese-interventi { display: none; }
.elenco-interventi .mese-interventi { grid-column: 1 / -1; }
@media (max-width: 991.98px) { .elenco-interventi { grid-template-columns: minmax(0, 1fr); } .navigazione-mesi { flex: 1 1 100%; min-width: 0; } .navigazione-mesi .form-select { flex: 1 1 auto; min-width: 0 !important; } }
/* Sul telefono i due menu (anno e mese) hanno meno spazio interno, così "Settembre" non si taglia */
@media (max-width: 575.98px) { .navigazione-mesi .form-select { padding-left: .6rem; padding-right: 1.9rem; background-position: right .55rem center; } }
.mese-interventi { font: 600 .8rem "Kanit", system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--bs-secondary-color); margin: .75rem 0 0; }
/* Report annuale (reportAnnuale.php): anno e PDF in cima, una barra per mese, numeri dei ticket, tabelle */
.barra-report { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.periodo-report { color: var(--bs-secondary-color); font-size: .9rem; }
.report-mesi { display: grid; gap: .45rem; }
.report-mese { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 11.5rem; gap: .75rem; align-items: center; font-size: .9rem; }
.report-mese .nome { color: var(--bs-secondary-color); font-weight: 600; }
.report-mese .barra { height: .8rem; border-radius: 999px; background: var(--bs-tertiary-bg); overflow: hidden; }
.report-mese .barra span { display: block; height: 100%; border-radius: 999px; background: var(--yourabz-primario); }
.report-mese .valore { text-align: right; white-space: nowrap; }
.report-mese .valore small { color: var(--bs-secondary-color); }
.report-mese.vuoto .valore { color: var(--bs-secondary-color); }
.report-numeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.report-numeri div { text-align: center; background: var(--bs-tertiary-bg); border-radius: .5rem; padding: .7rem .5rem; }
.report-numeri b { display: block; font-size: 1.5rem; line-height: 1.2; }
.report-numeri span { display: block; font-size: .78rem; color: var(--bs-secondary-color); }
.tabella-report th { font: 600 .72rem "Kanit", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); border-bottom-width: 1px; }
.tabella-report .riga-saldo td { border-top: 2px solid var(--bs-border-color); }
@media (max-width: 575.98px) { .report-mese { grid-template-columns: 2.2rem minmax(0, 1fr) 4.6rem; gap: .5rem; } .report-mese .valore small { display: none; } }
.riga-intervento { display: grid; grid-template-columns: 4rem 1fr auto; gap: 1rem; align-items: center; padding: .75rem 1rem; background: var(--bs-body-bg); border-radius: .5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.giorno-intervento { text-align: center; border-radius: .5rem; background: rgba(var(--yourabz-primario-rgb), .12); padding: .4rem 0; }
.giorno-intervento b { display: block; font: 800 1.35rem/1 "Manrope", system-ui, sans-serif; color: var(--yourabz-primario-testo); }
.giorno-intervento span { font: 500 .68rem "Kanit", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); }
.testo-intervento { min-width: 0; }
.testo-intervento p { margin: .15rem 0 0; color: var(--bs-secondary-color); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.meta-intervento { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .85rem; color: var(--bs-secondary-color); }
.meta-intervento strong { color: var(--bs-emphasis-color); }
.iniziali-intervento { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; flex: none; border-radius: 50%; background: var(--yourabz-primario); color: var(--yourabz-testo-su-primario); font: 600 .7rem "Kanit", sans-serif; }
.destra-intervento { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; }
.ore-intervento { font: 800 1rem "Manrope", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.pillola-pacchetto { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .65rem; min-height: 1.9rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; background: rgba(var(--yourabz-primario-rgb), .14); color: var(--yourabz-primario-testo); }
@media (max-width: 575.98px) {
  .riga-intervento { grid-template-columns: 3.5rem 1fr; gap: .75rem; }
  .destra-intervento { grid-column: 1 / -1; justify-content: space-between; }
}
/* Paginazione (DataTables) nel colore della ditta invece del blu di Bootstrap */
.pagination {
  --bs-pagination-color: var(--yourabz-primario-testo);
  --bs-pagination-hover-color: var(--yourabz-primario-testo);
  --bs-pagination-hover-bg: rgba(var(--yourabz-primario-rgb), .12);
  --bs-pagination-focus-color: var(--yourabz-primario-testo);
  --bs-pagination-focus-bg: rgba(var(--yourabz-primario-rgb), .12);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--yourabz-primario-rgb), .25);
  --bs-pagination-active-color: var(--yourabz-testo-su-primario);
  --bs-pagination-active-bg: var(--yourabz-primario);
  --bs-pagination-active-border-color: var(--yourabz-primario);
}
/* Ombra del badge di stato nel dettaglio del ticket: si stacca dall'intestazione anche col suo stesso colore */
.badge-ombra { box-shadow: 0 5px 14px rgba(0, 0, 0, .3); }
/* Modal "Nuovo ticket" (modal-xl): il contenuto usa tutta la larghezza del modal */
.contenuto-nuovo-ticket { width: 100%; }
/* Argomenti nella pagina Apri un ticket: una riga fino a 6, poi due righe bilanciate (colonne calcolate in nuovoTicket.php) */
.griglia-argomenti { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.argomento-cella { flex: 0 0 calc((100% - (var(--colonne) - 1) * 1rem) / var(--colonne)); min-width: 0; }
@media (max-width: 767.98px) { .argomento-cella { flex-basis: 100%; } }

/* Bottoni di filtro dell'elenco ticket (per stato, come in myABZ) */
.filtri-ticket { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1rem; }
.filtri-ticket .btn-filtro-ticket .conta-filtro { font-variant-numeric: tabular-nums; opacity: .85; }

/* Tessere della Home che portano a una pagina: freccia in alto a destra, niente sottolineatura */
.home-tessera { position: relative; }
a.home-tessera { color: inherit; text-decoration: none; transition: box-shadow .15s; }
a.home-tessera:hover, a.home-tessera:focus-visible { box-shadow: 0 3px 10px rgba(var(--yourabz-primario-rgb), .3); }
.tessera-freccia { position: absolute; top: .9rem; right: 1rem; color: var(--yourabz-primario-testo); }
.icona-scalato { color: var(--yourabz-primario-testo); font-weight: 400; }

/* Pacchetto ore: avviso offerte in cima, barra delle ore rimaste, icona del tipo di movimento in un cerchio */
.avviso-offerte { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1rem; padding: .85rem 1.1rem; border-radius: .5rem; background: rgba(var(--yourabz-primario-rgb), .12); border: 1px solid rgba(var(--yourabz-primario-rgb), .35); }
.avviso-offerte .icona { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%; background: var(--yourabz-primario); color: var(--yourabz-testo-su-primario); }
.avviso-offerte strong { display: block; }
.avviso-offerte span:not(.icona) { color: var(--bs-secondary-color); font-size: .9rem; }
.consumo-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .75rem; }
.consumo-testo { color: var(--bs-secondary-color); }
.consumo-testo strong { color: var(--bs-emphasis-color); }
.consumo-riga { display: flex; align-items: center; gap: 1rem; }
.consumo-riga .consumo-barra { flex: 1 1 auto; }
.consumo-percentuale { flex: none; font: 800 1.15rem "Manrope", system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--yourabz-primario-testo); }
.consumo-percentuale small { font: 500 .8rem "Figtree", system-ui, sans-serif; color: var(--bs-secondary-color); margin-left: .35rem; }
.consumo-percentuale.basso { color: var(--bs-warning-text-emphasis); }
.consumo-percentuale.negativo { color: var(--bs-danger-text-emphasis); }
/* Bottoni in fondo alla card senza che si veda un piede: stesso sfondo della card, niente linea sopra */
.card-footer.piede-senza-bordo { background: transparent; border-top: 0; padding-top: 1rem; }
/* Piede con una frase a sinistra e il pulsante tutto a destra (ms-auto sul pulsante). Il pseudo-elemento di AdminLTE sul
   .card-footer sarebbe un terzo elemento del flex e, con il gap, spingerebbe il pulsante 16 px dentro il bordo destro */
.card-footer.piede-azione { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.card-footer.piede-azione::after { display: none; }
.consumo-barra { height: .9rem; border-radius: 999px; background: var(--bs-tertiary-bg); }
.consumo-barra .progress-bar { background: var(--yourabz-primario); border-radius: 999px; transition: width .4s ease-out; }
.consumo-barra.basso .progress-bar { background: var(--bs-warning); }
.consumo-barra.negativo .progress-bar { background: var(--bs-danger); }
.tipo-movimento { display: flex; align-items: center; gap: .6rem; }
.cerchio-tipo { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; flex: none; border-radius: 50%; background: rgba(var(--yourabz-primario-rgb), .13); color: var(--yourabz-primario-testo); font-size: .85rem; }

/* Forniture AB Z: filtro anni a discesa con caselle sopra la tabella; tabella come i ticket */
.filtro-anni-menu { min-width: 13rem; }
.filtro-anni-menu .elenco-anni { max-height: 15rem; overflow-y: auto; }
.voce-anno { display: flex; align-items: center; cursor: pointer; font-variant-numeric: tabular-nums; }
.voce-anno.tutti { font-weight: 600; }
.voce-anno .form-check-input { margin-top: 0; flex: none; cursor: pointer; }
.voce-anno .form-check-input:checked { background-color: var(--yourabz-primario); border-color: var(--yourabz-primario); }
/* Tabelle compatte di Forniture (consegnato e ordini in corso): colonne strette (shrink) tranne la descrizione, badge di stato piccolo */
.tabella-forniture th, .tabella-forniture td { padding-block: .3rem; line-height: 1.3; width: 1%; white-space: nowrap; }
.tabella-forniture td.descrizione-ticket, .tabella-forniture th.colonna-descrizione { width: auto; white-space: normal; min-width: 16rem; overflow-wrap: anywhere; }
.tabella-forniture .badge-stato { font-size: .78rem; padding: .3em .6em; }
.tabella-forniture > tbody > tr > * { background-color: var(--bs-body-bg); box-shadow: none; }
.tabella-forniture > tbody > tr:nth-child(even) > * { background-color: #f4f4f4; }
[data-bs-theme="dark"] .tabella-forniture > tbody > tr:nth-child(even) > * { background-color: var(--bs-tertiary-bg); }
.tabella-forniture > tbody > tr:hover > * { background-color: rgba(var(--yourabz-primario-rgb), .15); }

/* "Cambia azienda" nel menu del referente: nome della ditta con "Casa madre" in piccolo */
.menu-ditta-voce { display: flex; flex-direction: column; line-height: 1.25; white-space: normal; }
.menu-ditta-voce small { font-size: .75rem; color: var(--bs-secondary-color); }
.dropdown-item.active .menu-ditta-voce small { color: inherit; opacity: .8; }

/* Modal fornitura: coppie di dati su due colonne (una su telefono), importi a destra nel riquadro; se una cella manca l'altra occupa tutta la riga */
.dati-coppia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.dati-coppia > div[hidden] { display: none; }
.dati-coppia:has(> div[hidden]) { grid-template-columns: minmax(0, 1fr); }
.dati-coppia:has(> div[hidden]):has(> div:not([hidden]):nth-child(2)) { grid-template-columns: minmax(0, 1fr); }
.riquadro-importi { display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: flex-end; }
@media (max-width: 575.98px) { .dati-coppia { grid-template-columns: minmax(0, 1fr); } .riquadro-importi { margin-left: 0 !important; justify-content: flex-start; } }
/* Bottone tondo con sola icona (Dettagli): grande nelle liste a card */
.btn-icona-grande { --bs-btn-font-size: .9rem; width: 1.9rem; height: 1.9rem; }
/* Voci del menu con sottovoci: chevron Font Awesome al posto del triangolo di Bootstrap, che si gira quando la tendina è aperta */
.navbar-nav .dropdown-toggle::after { display: none; }
.navbar-nav .nav-chevron { font-size: .7em; transition: transform .2s ease; }
.navbar-nav .dropdown-toggle.show .nav-chevron, .navbar-nav .dropdown-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .navbar-nav .nav-chevron { transition: none; } }
/* Tutte le DataTables: celle sempre allineate a sinistra (anche le colonne numeriche, che DataTables 2 allinea a destra e con l'icona
   dell'ordinamento a sinistra), padding orizzontale px-3; colonna "shrink" per i bottoni (larga quanto il contenuto, non ordinabile) */
table.dataTable > thead > tr > th, table.dataTable > tbody > tr > td, table.dataTable > tfoot > tr > th { text-align: left !important; padding-inline: 1rem; }
table.dataTable > thead > tr > th .dt-column-header { flex-direction: row !important; }
table.dataTable th.col-shrink, table.dataTable td.col-shrink { width: 1%; white-space: nowrap; }
/* Tendine del menu centrate sotto la voce (senza Popper: il toggle ha data-bs-display="static"); quella a due colonne (Assistenza) ha un
   divisore verticale tra le colonne. Sotto i 992 px il menu è quello compatto di Bootstrap: le colonne si impilano. */
@media (min-width: 992px) {
  .app-header .navbar-nav .menu-nav-tendina[data-bs-popper] { left: 50%; right: auto; transform: translateX(-50%); }
  .app-header .navbar-nav .menu-nav-colonne.show { display: flex; gap: 0; }
  .app-header .navbar-nav .menu-nav-colonne .colonna-menu { flex: 1 1 0; min-width: 15rem; }
  .app-header .navbar-nav .menu-nav-colonne .colonna-menu + .colonna-menu { margin-left: .5rem; padding-left: .5rem; border-left: 1px solid var(--bs-border-color); }
}


/* ---------------------------------------------------------------------------------------------
   CHECKLIST (checklist.php elenco a schede, dettaglioChecklist.php sezioni, storico e confronto versioni)
   --------------------------------------------------------------------------------------------- */
/* Avanzamento a linea con pallini e pillola (come in myABZ): --p = percentuale 0-100; la pillola a 0% sta a sinistra, a 100% con il bordo
   destro a filo della linea. Colori: testo della ditta (leggibile anche in tema scuro). */
.avanzamento-linea { position: relative; height: 34px; }
.avanzamento-linea .pallino-inizio, .avanzamento-linea .pallino-fine { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--yourabz-primario-testo); background: var(--bs-body-bg); transform: translateY(-50%); z-index: 1; }
.avanzamento-linea .pallino-inizio { left: 0; }
.avanzamento-linea .pallino-fine { right: 0; background: var(--yourabz-primario-testo); }
.avanzamento-linea .traccia { position: absolute; top: 50%; left: 12px; right: 12px; height: 3px; background: var(--bs-border-color); border-radius: 2px; overflow: hidden; transform: translateY(-50%); }
.avanzamento-linea .riempimento { position: absolute; top: 0; left: 0; height: 100%; width: calc(var(--p) * 1%); background: var(--yourabz-primario-testo); border-radius: 2px; }
.avanzamento-linea .pillola { position: absolute; top: 50%; left: calc(var(--p) * 1%); transform: translate(calc(var(--p) * -1%), -50%); background: var(--bs-body-bg); border: 2px solid var(--yourabz-primario-testo); color: var(--yourabz-primario-testo); font-weight: 700; font-size: .72rem; line-height: 1; padding: .3rem .55rem; border-radius: 999px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); z-index: 2; }

/* Scheda di una checklist (elenco): banner nel colore della ditta, numeri chiave, avanzamento e sezioni con anello di completamento */
.scheda-checklist .card-footer { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.scheda-checklist .card-footer::after { display: none; }   /* il pseudo-elemento di AdminLTE sarebbe un terzo elemento del flex e sposterebbe "Apri" */
.banner-scheda { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; background: linear-gradient(135deg, var(--yourabz-primario), var(--yourabz-primario-scuro)); color: var(--yourabz-testo-su-primario); }
.banner-scheda .icona-scheda { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 52px; width: 52px; height: 52px; border-radius: .85rem; background: rgba(255, 255, 255, .18); font-size: 1.4rem; }
.banner-scheda h2 { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.25; color: inherit; overflow-wrap: anywhere; }
.banner-scheda p { margin: .15rem 0 0; opacity: .85; font-size: .9rem; }
.app-wrapper .banner-scheda a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.dropdown-toggle) { color: inherit; text-decoration: none; }
.app-wrapper .banner-scheda a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.dropdown-toggle):hover { color: inherit; text-decoration: underline; }
.numeri-scheda { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin-bottom: .25rem; }
.numeri-scheda div { display: flex; flex-direction: column; }
.numeri-scheda strong { font-family: 'Manrope', system-ui, sans-serif; font-size: 1.4rem; line-height: 1.1; }
.numeri-scheda span { font-family: Kanit, system-ui, sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--yourabz-primario-testo); }
.elenco-sezioni { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem 1.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--bs-border-color); }
.riga-sezione { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.riga-sezione .nome { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.riga-sezione .nome strong { overflow-wrap: anywhere; font-size: .95rem; }
.riga-sezione .nome small { color: var(--bs-secondary-color); }
.anello-sezione { --p: 0; position: relative; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--yourabz-primario-testo) calc(var(--p) * 1%), var(--bs-border-color) 0); }
.anello-sezione::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--bs-body-bg); }
.anello-sezione span { position: relative; font-size: .68rem; font-weight: 800; color: var(--yourabz-primario-testo); }

/* Dettaglio: righe domanda / risposta e sezioni a due per riga */
.numero-sezione-checklist { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: rgba(255, 255, 255, .22); font-size: .9rem; font-weight: 700; }
.riga-checklist { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem 1.5rem; padding-block: .85rem; }
.domanda-checklist { overflow-wrap: anywhere; }
.risposta-checklist { font-weight: 600; white-space: pre-line; overflow-wrap: anywhere; }
.risposta-checklist.vuota { font-weight: 400; font-style: italic; color: var(--bs-secondary-color); }
@media (max-width: 767.98px) { .riga-checklist { grid-template-columns: 1fr; gap: .15rem; } }
.card-header.intestazione-sezione-checklist::after { display: none; }   /* il pseudo-elemento di AdminLTE sarebbe un terzo elemento del flex e sposterebbe il contatore */
.scheda-sezione-checklist { container-type: inline-size; }
@container (max-width: 459px) { .riga-checklist { grid-template-columns: 1fr; gap: .15rem; } }

/* Dettaglio: intestazione con storico delle versioni come linea del tempo. La linea occupa tutta la larghezza, solo il pallino è
   cliccabile. overflow-x serve solo ai telefoni con molte versioni; il padding in alto e in basso evita di tagliare l'alone del pallino scelto. */
.intestazione-checklist .card-body { display: block; }
.intestazione-checklist .card-body::after { display: none; }
.storico-versioni { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--bs-border-color); }
.storico-testata { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .5rem; }
.storico-testata .dettaglio-label { margin-bottom: 0; }
.storico-testata .azioni-confronto { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.storico-testata .azioni-confronto .suggerimento { color: var(--bs-secondary-color); font-size: .9rem; }
.linea-versioni { overflow-x: auto; padding: 1.4rem 0 .4rem; }
.linea-versioni-corsia { position: relative; display: flex; min-width: 100%; width: max-content; }
.linea-versioni-corsia::before { content: ''; position: absolute; left: 0; right: 0; top: 10.5px; height: 3px; background: var(--yourabz-primario-testo); border-radius: 2px; }   /* il pallino è alto 24px: la linea passa per il suo centro */
.passo-versione { flex: 1 1 0; min-width: 7.5rem; text-align: center; }
.passo-versione .pallino-versione { position: relative; z-index: 1; display: flex; margin-inline: auto; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--yourabz-primario-testo); background: var(--bs-body-bg); color: var(--yourabz-testo-su-primario); font-size: .68rem; font-weight: 800; line-height: 1; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.passo-versione .pallino-versione:hover { transform: scale(1.18); }
.passo-versione.corrente .pallino-versione { background: var(--yourabz-primario-testo); }
.passo-versione.scelto .pallino-versione { transform: scale(1.25); box-shadow: 0 0 0 5px rgba(var(--yourabz-primario-rgb), .25); }
.passo-versione .lettera-confronto { display: none; color: var(--yourabz-testo-su-primario); }   /* colore esplicito: i link prendono quello della ditta */
.passo-versione.scelto-confronto .pallino-versione { background: var(--yourabz-primario-testo); transform: scale(1.25); box-shadow: 0 0 0 5px rgba(var(--yourabz-primario-rgb), .25); }
.passo-versione.scelto-confronto .lettera-confronto { display: inline; }
@media (max-width: 575.98px) { .passo-versione { min-width: 5.2rem; } }   /* sui telefoni 3 versioni stanno nella riga senza scorrere */
.passo-versione .nome-versione { display: block; margin-top: .45rem; font-weight: 700; font-size: .92rem; }
.passo-versione.scelto .nome-versione, .passo-versione.scelto-confronto .nome-versione { color: var(--yourabz-primario-testo); }
.passo-versione .info-versione { display: block; font-size: .78rem; line-height: 1.3; color: var(--bs-secondary-color); }

/* Confronto tra due versioni */
.tabella-confronto th, .tabella-confronto td { padding: .6rem .9rem; vertical-align: middle; }
.tabella-confronto .sezione-confronto td { font-family: Manrope, system-ui, sans-serif; font-weight: 800; background: var(--bs-secondary-bg-subtle); color: var(--bs-secondary-text-emphasis); }   /* come l'alert-secondary */
.tabella-confronto .valore-confronto { font-weight: 600; white-space: pre-line; overflow-wrap: anywhere; }
.tabella-confronto .valore-confronto.vuoto { font-weight: 400; font-style: italic; color: var(--bs-secondary-color); }
.tabella-confronto tr.differente .valore-confronto { background: var(--bs-warning-bg-subtle); }
.solo-differenze .tabella-confronto tr.uguale, .solo-differenze .tabella-confronto tbody.senza-differenze { display: none; }
/* Interruttore "Solo differenze" sulla barra colorata: attivo = traccia bianca e pallino nel colore della ditta; spento = traccia a contorno bianco e pallino bianco. */
.interruttore-testata { display: inline-flex; align-items: center; gap: .6rem; margin: 0; cursor: pointer; color: inherit; font-family: Kanit, system-ui, sans-serif; user-select: none; }
.interruttore-testata input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.interruttore-traccia { position: relative; flex: 0 0 44px; width: 44px; height: 24px; border-radius: 999px; border: 2px solid #fff; background: transparent; transition: background-color .15s ease; }
.interruttore-traccia::before { content: ""; position: absolute; top: 50%; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transform: translateY(-50%); transition: transform .15s ease, background-color .15s ease; }
.interruttore-testata input:checked + .interruttore-traccia { background: #fff; }
.interruttore-testata input:checked + .interruttore-traccia::before { background: var(--yourabz-primario); transform: translate(20px, -50%); }
.interruttore-testata input:focus-visible + .interruttore-traccia { outline: 2px solid #fff; outline-offset: 3px; }

/* Link con freccia che si allunga all'hover (asta che cresce verso destra, punta che la segue). Lo spazio della freccia allungata è
   riservato (senza sfondo non si vede), così il testo non si sposta. Colore e colore all'hover sono quelli dei link della ditta; la freccia
   usa currentColor. Uso: <a class="link-freccia">Apri<span class="freccia" aria-hidden="true"></span></a> */
.link-freccia { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; }
.link-freccia .freccia { --lunghezza: 1em; position: relative; display: block; flex: 0 0 2.1em; width: 2.1em; height: 1em; }
.link-freccia .freccia::before { content: ""; position: absolute; left: 0; top: 50%; width: var(--lunghezza); height: 2px; border-radius: 1px; background: currentColor; transform: translateY(-50%); transition: width .2s ease; }
.link-freccia .freccia::after { content: ""; position: absolute; top: 50%; left: calc(var(--lunghezza) - .6em); width: .5em; height: .5em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); transition: left .2s ease; }
.link-freccia:hover .freccia, .link-freccia:focus-visible .freccia { --lunghezza: 2em; }
@media (prefers-reduced-motion: reduce) { .link-freccia .freccia::before, .link-freccia .freccia::after { transition: none; } }

/* Confronto con cambio versione senza ricaricare: riquadro "Come A / Come B" sotto il pallino, card in caricamento, pulsante Scambia */
.storico-versioni { position: relative; }
.scelta-lato { position: absolute; z-index: 20; width: 13.5rem; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .55rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .65rem; box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .22); }
.scelta-lato[hidden] { display: none; }
.scelta-lato-titolo { font-family: Kanit, system-ui, sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--yourabz-primario-testo); }
.scelta-lato-pulsanti { display: flex; gap: .5rem; }
.scelta-lato-pulsanti .btn { flex: 1 1 0; white-space: nowrap; }
#confrontoVersioni { transition: opacity .15s ease; }
#confrontoVersioni.in-caricamento { opacity: .55; pointer-events: none; }