/*
 * bi-shadcn.css - tema shadcn/ui della BI (Nexaco BI)
 *
 * Stessi token del gestionale (skill restyling-shadcn) e di cv-pms-admin:
 * base Slate, primario #076FED, carattere Inter, icone Lucide, raggi 6/8/12.
 *
 * Si carica per ultimo e sovrascrive Bootstrap 4.1.3 e assets/css/style.css
 * senza modificarli: per tornare all'aspetto di prima basta togliere il link.
 *  - pagine con il menu: link in cima a navbar.php (incluso da tutte, dopo la head);
 *  - accesso, errori e manutenzione: link in fondo alla head.
 *
 * Regole: solo presentazione. Classi e id esistenti restano, si aggiungono
 * classi sh-*. I colori si scrivono solo qui, come token --sh-*: il prefisso
 * serve perche' Bootstrap 4 usa gia' --primary, --secondary e simili.
 */

/* 1. Carattere: Inter variabile, file locali (stessa build di cvReact) */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Token */

:root {
  /* superfici e testo */
  --sh-background: #F8FAFC;
  --sh-foreground: #020817;
  --sh-card: #FFFFFF;
  --sh-muted: #F1F5F9;
  --sh-muted-foreground: #64748B;
  --sh-subtle: #F8FAFC;
  --sh-border: #E2E8F0;
  --sh-border-subtle: #EEF2F6;
  --sh-border-strong: #CBD5E1;
  --sh-input: #E2E8F0;
  --sh-disabled-bg: #F1F5F9;
  --sh-disabled-fg: #94A3B8;

  /* primario */
  --sh-primary: #076FED;
  --sh-primary-hover: #0561D1;
  --sh-primary-foreground: #FFFFFF;
  --sh-primary-soft: #E6F0FD;
  --sh-primary-soft-border: #C7DEF9;
  --sh-primary-text: #0550B0;
  --sh-ring: rgba(7, 111, 237, .25);
  /* barre nei grafici dentro le tabelle, come nei grafici: interno pastello (colore + 50% di bianco),
     bordo e passaggio del mouse nel colore schiarito del 15% (assets/js/bi-tema-grafici.js) */
  --sh-chart-soft: #A9CBF7;
  --sh-chart-fill: #83B7F6;
  --sh-chart-line: #2C85F0;
  --sh-chart-fill-negative: #EE9393;
  --sh-chart-line-negative: #E14747;

  /* stati: pieno, hover, sfondo tenue, bordo tenue, testo su sfondo tenue */
  --sh-success: #059669;
  --sh-success-hover: #047857;
  --sh-success-soft: #ECFDF5;
  --sh-success-soft-border: #A7F3D0;
  --sh-success-text: #047857;
  --sh-warning: #D97706;
  --sh-warning-hover: #B45309;
  --sh-warning-soft: #FEF5E6;
  --sh-warning-soft-border: #FCD9A8;
  --sh-warning-text: #B45309;
  --sh-destructive: #DC2626;
  --sh-destructive-hover: #B91C1C;
  --sh-destructive-soft: #FDECEC;
  --sh-destructive-soft-border: #F8C4C4;
  --sh-destructive-text: #B91C1C;
  /* riquadri delle icone delle card: un colore per strumento, fuori dagli stati */
  --sh-viola: #7C3AED;
  --sh-viola-soft: #F3EEFE;

  /* carattere */
  --sh-font: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sh-font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* raggi, ombre, movimento */
  --sh-radius-sm: 6px;
  --sh-radius: 8px;
  --sh-radius-lg: 12px;
  --sh-radius-full: 9999px;
  --sh-shadow-xs: 0 1px 2px 0 rgba(2, 8, 23, .05);
  --sh-shadow-sm: 0 1px 3px 0 rgba(2, 8, 23, .08), 0 1px 2px -1px rgba(2, 8, 23, .08);
  --sh-shadow-md: 0 4px 6px -1px rgba(2, 8, 23, .08), 0 2px 4px -2px rgba(2, 8, 23, .06);
  --sh-shadow-lg: 0 10px 15px -3px rgba(2, 8, 23, .10), 0 4px 6px -4px rgba(2, 8, 23, .08);
  --sh-ease: cubic-bezier(.4, 0, .2, 1);

  /* misure della struttura */
  --sh-sidebar: 256px;
  --sh-sidebar-collapsed: 64px;
  --sh-sidebar-duration: 200ms;
}

/* 3. Base */

/* batte body { background: ... !important } scritto in ogni pagina */
html body {
  background: var(--sh-background) !important;
}

body {
  font-family: var(--sh-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--sh-foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p,
.tooltip,
.popover,
.dropdown-menu,
footer.site-footer .footer-inner {
  font-family: var(--sh-font);
}

p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--sh-muted-foreground);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--sh-foreground);
  font-weight: 600;
  letter-spacing: -.01em;
}

b, strong {
  font-weight: 600;
}

a {
  color: var(--sh-primary);
}

a:hover,
a:focus {
  color: var(--sh-primary-hover);
}

hr {
  border: 0;
  border-top: 1px solid var(--sh-border);
}

::selection {
  background: var(--sh-primary-soft);
  color: var(--sh-foreground);
}

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

/* Il template toglie ogni indicazione di focus (outline: none !important):
   la si rimette solo per la navigazione da tastiera. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sh-primary) !important;
  outline-offset: 2px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--sh-border-strong) transparent;
}

/* 4. Icone Lucide e avatar */

.sh-icon {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sh-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--sh-radius-full);
  background: var(--sh-primary-soft);
  color: var(--sh-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

/* 5. Struttura: menu laterale
   Gli stati restano quelli di main.js: body.open (menu stretto sopra i 1024px),
   #left-panel.open-menu (menu aperto sotto i 1024px), slideToggle sotto i 768px.
   Apertura e chiusura sono animate: cambiano la larghezza del menu e il margine del contenuto,
   le icone restano ferme (a 24px dal bordo in tutti e due gli stati) e le scritte sfumano. */

#left-panel {
  width: var(--sh-sidebar);
  max-width: var(--sh-sidebar);
  /* dalla barra alta al fondo della finestra (con height: 100vh del template sbordava di 55px) */
  height: auto;
  background: var(--sh-card);
  border-right: 1px solid var(--sh-border);
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: auto;
  /* menu di navigazione: niente selezione del testo col doppio clic */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    width var(--sh-sidebar-duration) var(--sh-ease),
    max-width var(--sh-sidebar-duration) var(--sh-ease),
    box-shadow var(--sh-sidebar-duration) var(--sh-ease);
}

#left-panel:hover {
  overflow-x: hidden;
}

#left-panel .navbar {
  display: block;
  width: 100%;
  height: auto;
  padding: 12px 0 24px;
  background: transparent;
}

#left-panel .main-menu {
  float: none;
  width: 100%;
  padding: 0;
}

/* nowrap e min-width: 0: con il flex-wrap: wrap di Bootstrap (.nav) le voci prendevano la larghezza
   della nota "Ultimo aggiornamento" e la lista non si stringeva sotto le scritte: nel menu stretto
   le voci restavano larghe */
#left-panel .navbar-nav {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 2px;
  width: 100%;
  min-width: 0;
}

#left-panel .navbar-nav > li {
  width: auto;
  padding: 0 12px;
  background: transparent;
  transition: padding var(--sh-sidebar-duration) var(--sh-ease);
}

/* font-size: batte il font-size: 0 con cui il template nasconde le scritte nel menu stretto,
   cosi' la scritta sfuma (opacity) invece di sparire di colpo */
#left-panel .navbar-nav > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: none;
  min-height: 36px;
  padding: 8px 12px;
  overflow: hidden;
  border-radius: var(--sh-radius-sm);
  color: var(--sh-foreground);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  transition:
    background-color 150ms var(--sh-ease),
    color 150ms var(--sh-ease),
    padding var(--sh-sidebar-duration) var(--sh-ease);
}

#left-panel .sh-nav-label {
  overflow: hidden;
  transition: opacity 150ms var(--sh-ease);
}

/* .navbar nel selettore: deve battere #left-panel .navbar .navbar-nav li > a .menu-icon (sotto i 768px) */
#left-panel .navbar .navbar-nav > li > a .menu-icon {
  float: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  z-index: auto;
  color: var(--sh-muted-foreground);
  transition: color 150ms var(--sh-ease);
}

/* il template mette background: none !important sui link del menu */
#left-panel .navbar-nav > li > a:hover {
  background-color: var(--sh-muted) !important;
  color: var(--sh-foreground);
}

#left-panel .navbar-nav > li > a:hover .menu-icon {
  color: var(--sh-foreground);
}

#left-panel .navbar-nav > li.active > a {
  background-color: var(--sh-primary-soft) !important;
  color: var(--sh-primary);
}

#left-panel .navbar-nav > li.active > a .menu-icon {
  color: var(--sh-primary);
}

/* "Ultimo aggiornamento": nota in fondo al menu, non una voce cliccabile; nel menu stretto
   sfuma e resta nascosta (visibility), senza cambiare l'altezza del menu */
#left-panel .navbar-nav > li.sh-nav-note {
  order: 99;
  margin: 12px 12px 0;
  padding: 12px 12px 0;
  border-top: 1px solid var(--sh-border);
  transition: opacity 150ms var(--sh-ease), visibility 150ms;
}

#left-panel .sh-nav-note-text {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--sh-muted-foreground);
}

/* larghezza fissa, quella del menu aperto: mentre il menu si allarga il testo non va a capo di nuovo */
@media (min-width: 769px) {
  #left-panel .sh-nav-note-text {
    width: calc(var(--sh-sidebar) - 48px);
  }
}

#left-panel .sh-nav-note-text strong {
  font-weight: 500;
}

#left-panel .sh-nav-note-text .sh-icon {
  width: 14px;
  height: 14px;
  margin-top: 1px;
}

#right-panel {
  background: transparent;
  margin-left: var(--sh-sidebar);
  transition: margin-left var(--sh-sidebar-duration) var(--sh-ease);
}

/* menu stretto: solo icone, voci quadrate da 36px al centro della barra (64px, 63 dentro il bordo):
   14px di margine + 10px di padding = l'icona resta a 24px dal bordo, come nel menu aperto */
@media (min-width: 1025px) {
  body.open #left-panel {
    width: var(--sh-sidebar-collapsed);
    max-width: var(--sh-sidebar-collapsed);
  }

  body.open #right-panel {
    margin-left: var(--sh-sidebar-collapsed);
  }

  body.open #left-panel .navbar-nav > li:not(.sh-nav-note) {
    padding: 0 13px 0 14px;
  }

  body.open #left-panel .navbar-nav > li > a {
    padding-left: 10px;
    padding-right: 10px;
  }

  body.open #left-panel .sh-nav-label,
  body.open #left-panel .navbar-nav > li.sh-nav-note {
    opacity: 0;
  }

  body.open #left-panel .navbar-nav > li.sh-nav-note {
    visibility: hidden;
  }
}

/* tablet: menu stretto, si apre sopra il contenuto (come nel template) con .open-menu, oppure con
   body.open tra 1010 e 1024px, dove main.js si comporta gia' come sui computer (es. iPad orizzontale) */
@media (min-width: 769px) and (max-width: 1024px) {
  #left-panel {
    width: var(--sh-sidebar-collapsed);
    max-width: var(--sh-sidebar-collapsed);
  }

  #right-panel {
    margin-left: var(--sh-sidebar-collapsed);
  }

  body:not(.open) #left-panel:not(.open-menu) .navbar-nav > li:not(.sh-nav-note) {
    padding: 0 13px 0 14px;
  }

  body:not(.open) #left-panel:not(.open-menu) .navbar-nav > li > a {
    padding-left: 10px;
    padding-right: 10px;
  }

  body:not(.open) #left-panel:not(.open-menu) .sh-nav-label,
  body:not(.open) #left-panel:not(.open-menu) .navbar-nav > li.sh-nav-note {
    opacity: 0;
  }

  body:not(.open) #left-panel:not(.open-menu) .navbar-nav > li.sh-nav-note {
    visibility: hidden;
  }

  #left-panel.open-menu,
  body.open #left-panel {
    width: var(--sh-sidebar);
    max-width: var(--sh-sidebar);
    box-shadow: var(--sh-shadow-lg);
  }
}

@media (max-width: 768px) {
  #left-panel {
    width: 100%;
    max-width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--sh-border);
  }

  #right-panel {
    margin-left: 0;
  }
}

/* 6. Struttura: barra alta */

/* la barra alta non si seleziona: col doppio clic sul pulsante del menu il browser evidenziava
   il logo; il logo non si trascina */
#header {
  background: var(--sh-card);
  border-bottom: 1px solid var(--sh-border);
  box-shadow: none;
  padding: 0 16px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#header img {
  -webkit-user-drag: none;
}

#header .navbar-header {
  display: flex;
  align-items: center;
  height: 55px;
  padding: 0;
  background: transparent;
}

#header .navbar-brand {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  line-height: 1;
}

#header .navbar-brand img {
  max-height: 32px;
  max-width: 140px;
  width: auto;
}

/* secondo logo del template, pensato per il menu stretto: nella barra alta resta nascosto */
#header .navbar-brand.hidden {
  display: none;
}

#menuToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--sh-radius-sm);
  background: transparent;
  color: var(--sh-muted-foreground) !important;
  line-height: 1;
  text-align: center;
  transition: background-color 150ms var(--sh-ease), color 150ms var(--sh-ease);
}

#menuToggle:hover {
  background: var(--sh-muted);
  color: var(--sh-foreground) !important;
}

#menuToggle .sh-icon {
  width: 18px;
  height: 18px;
}

@media (min-width: 769px) {
  #header .top-left {
    width: auto;
  }

  /* il pulsante del menu si allinea al bordo del menu laterale */
  #header .navbar-brand {
    width: calc(var(--sh-sidebar) - 16px);
  }
}

@media (max-width: 768px) {
  #header .top-left {
    padding: 0 16px;
    background: var(--sh-card);
    border-bottom-color: var(--sh-border);
  }

  #header .top-right {
    padding: 0 16px;
  }

  #header .navbar-header {
    justify-content: space-between;
  }
}

#header .header-menu {
  align-items: center;
}

#header .header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

#header .sh-header-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--sh-foreground);
}

#header .user-area {
  float: none;
  padding-left: 0;
}

#header .user-area .dropdown-toggle {
  padding: 0 2px;
}

/* pallino di stato del template: non indica nulla */
#header .user-area .dropdown-toggle::before {
  display: none;
}

#header .user-area .user-avatar {
  float: none;
  width: 32px;
  height: 32px;
  border-radius: var(--sh-radius-full);
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--sh-border);
}

/* menu dell'utente come DropdownMenu */
#header .user-area .user-menu {
  top: calc(100% + 4px) !important;
  right: 0;
  left: auto !important;
  width: auto;
  min-width: 200px;
  max-width: none;
  padding: 4px;
  background: var(--sh-card);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius);
  box-shadow: var(--sh-shadow-md);
}

#header .user-area .user-menu > span {
  display: block;
  margin: -4px -4px 4px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--sh-border);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  color: var(--sh-foreground);
}

#header .user-area .user-menu .nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--sh-radius-sm);
  font-size: 14px;
  line-height: 20px;
  color: var(--sh-foreground);
}

#header .user-area .user-menu .nav-link:hover {
  background: var(--sh-muted);
  color: var(--sh-foreground);
}

#header .user-area .user-menu .nav-link > i,
#header .user-area .user-menu .nav-link > .sh-icon {
  width: 16px;
  margin-right: 0;
  font-size: 14px;
  text-align: center;
  color: var(--sh-muted-foreground);
}

/* 7. Struttura: contenuto e piede */

/* il piede resta in fondo alla finestra anche quando la pagina e' corta: il pannello di destra e'
   alto almeno quanto la finestra meno la barra alta (i 55px del margin-top del template) e il
   contenuto prende lo spazio che avanza. In index.php il piede sta dentro .content, ma li' la
   pagina e' comunque piu' alta della finestra. */
#right-panel {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 55px);
  min-height: calc(100dvh - 55px);
}

#right-panel > .content {
  flex: 1 0 auto;
}

.right-panel .content {
  padding: 24px;
}

footer.site-footer {
  padding: 0 24px;
}

/* lo sfondo grigio e' scritto in linea in footer.php e nelle sue copie */
footer.site-footer .footer-inner {
  padding: 16px 0;
  background: transparent !important;
  border-top: 1px solid var(--sh-border);
  font-size: 13px;
  color: var(--sh-muted-foreground);
}

footer.site-footer .footer-inner a {
  color: var(--sh-foreground);
  font-weight: 500;
}

/* piede: riga legale a sinistra; "powered by" e "fa parte di" con i loghi a destra, come nel
   portale CloudVillage (loghi in images/, larghezze nello stesso rapporto del portale) */
.sh-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

.sh-footer-legale {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--sh-muted-foreground);
}

.sh-crediti {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 28px;
}

.sh-credito {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sh-credito-etichetta {
  font-size: 11px;
  line-height: 14px;
  color: var(--sh-muted-foreground);
}

.sh-credito a {
  display: block;
  line-height: 0;
}

.sh-credito-logo {
  display: block;
  width: 104px;
  height: auto;
}

.sh-credito-logo--gruppo {
  width: 156px;
}

@media (max-width: 1024px) {
  .right-panel .content {
    padding: 16px;
  }

  footer.site-footer {
    padding: 0 16px;
  }
}

/* 8. Card */

.card {
  margin-bottom: 24px;
  background: var(--sh-card);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  box-shadow: var(--sh-shadow-xs);
  color: var(--sh-foreground);
}

.card > .card-header {
  padding: 20px 20px 0;
  background: transparent;
  border-bottom: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -.01em;
  color: var(--sh-foreground);
}

/* sotto i 1024px style.css manda a capo lo strong dei titoli ("Form" su una riga, il resto sotto) */
.card .card-header strong {
  display: inline;
}

.card > .card-header:first-child {
  border-radius: calc(var(--sh-radius-lg) - 1px) calc(var(--sh-radius-lg) - 1px) 0 0;
}

.card > .card-header h4,
.card > .card-header h5,
.card .box-title,
.card .card-title {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -.01em;
  color: var(--sh-foreground);
}

.card .card-body {
  padding: 20px;
}

.card > .card-header + .card-body {
  padding-top: 16px;
}

.card .card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--sh-subtle);
  border-top: 1px solid var(--sh-border);
  border-bottom: 0;
}

.card > .card-footer:last-child {
  border-radius: 0 0 calc(var(--sh-radius-lg) - 1px) calc(var(--sh-radius-lg) - 1px);
}

/* titolo dentro il card-body seguito dal contenuto (es. la mappa della dashboard, i pivot):
   il tema azzera il margine dei titoli, qui li si stacca dal contenuto */
.card-body > .box-title + .card-content {
  margin-top: 16px;
}

@media (max-width: 1024px) {
  .card {
    margin-bottom: 16px;
  }

  .card .card-body {
    padding: 16px;
  }

  .card > .card-header {
    padding: 16px 16px 0;
  }

  .card .card-footer {
    padding: 12px 16px;
  }
}

/* 9. Pulsanti
   Le regole ripetute con .card .card-footer battono quella del template
   (.card .card-footer button) che toglie sfondo e colore ai pulsanti nei piedi delle card. */

.btn,
.card .card-footer .btn,
.card .card-top .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  font-family: var(--sh-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-transform: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--sh-radius);
  box-shadow: none;
  transition: background-color 150ms var(--sh-ease), border-color 150ms var(--sh-ease),
    color 150ms var(--sh-ease), box-shadow 150ms var(--sh-ease);
}

.btn-sm,
.card .card-footer .btn-sm {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

.btn-lg {
  height: 40px;
  padding: 0 24px;
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn .sh-icon {
  width: 16px;
  height: 16px;
}

.btn .fa {
  font-size: 14px;
}

.btn:disabled,
.btn.disabled {
  opacity: .5;
}

.btn-primary,
.card .card-footer .btn-primary {
  background-color: var(--sh-primary);
  border-color: var(--sh-primary);
  color: var(--sh-primary-foreground);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.card .card-footer .btn-primary:hover {
  background-color: var(--sh-primary-hover);
  border-color: var(--sh-primary-hover);
  color: var(--sh-primary-foreground);
}

/* disabilitato: Bootstrap rimette il suo blu (.btn-primary:disabled) */
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--sh-primary);
  border-color: var(--sh-primary);
  color: var(--sh-primary-foreground);
}

/* pulsanti fatti con <a> senza href: Bootstrap (a:not([href]):not([tabindex])) gli toglie il colore */
a.btn-primary:not([href]):not([tabindex]),
a.btn-success:not([href]):not([tabindex]),
a.btn-danger:not([href]):not([tabindex]),
a.btn-warning:not([href]):not([tabindex]),
a.btn-dark:not([href]):not([tabindex]) {
  color: #FFFFFF;
}

a.btn-secondary:not([href]):not([tabindex]),
a.btn-light:not([href]):not([tabindex]),
a.btn-outline-primary:not([href]):not([tabindex]),
a.btn-outline-secondary:not([href]):not([tabindex]) {
  color: var(--sh-foreground);
}

.btn-secondary,
.card .card-footer .btn-secondary {
  background-color: var(--sh-muted);
  border-color: var(--sh-muted);
  color: var(--sh-foreground);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.card .card-footer .btn-secondary:hover {
  background-color: var(--sh-border);
  border-color: var(--sh-border);
  color: var(--sh-foreground);
}

.btn-success,
.card .card-footer .btn-success {
  background-color: var(--sh-success);
  border-color: var(--sh-success);
  color: #FFFFFF;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active,
.card .card-footer .btn-success:hover {
  background-color: var(--sh-success-hover);
  border-color: var(--sh-success-hover);
  color: #FFFFFF;
}

.btn-danger,
.card .card-footer .btn-danger {
  background-color: var(--sh-destructive);
  border-color: var(--sh-destructive);
  color: #FFFFFF;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active,
.card .card-footer .btn-danger:hover {
  background-color: var(--sh-destructive-hover);
  border-color: var(--sh-destructive-hover);
  color: #FFFFFF;
}

.btn-warning,
.card .card-footer .btn-warning {
  background-color: var(--sh-warning);
  border-color: var(--sh-warning);
  color: #FFFFFF;
}

.btn-warning:hover,
.btn-warning:focus,
.card .card-footer .btn-warning:hover {
  background-color: var(--sh-warning-hover);
  border-color: var(--sh-warning-hover);
  color: #FFFFFF;
}

.btn-info,
.card .card-footer .btn-info {
  background-color: var(--sh-primary-soft);
  border-color: var(--sh-primary-soft);
  color: var(--sh-primary-text);
}

.btn-info:hover,
.btn-info:focus,
.card .card-footer .btn-info:hover {
  background-color: var(--sh-primary-soft-border);
  border-color: var(--sh-primary-soft-border);
  color: var(--sh-primary-text);
}

.btn-light,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-light,
.card .card-footer .btn-light,
.card .card-footer .btn-outline-primary,
.card .card-footer .btn-outline-secondary {
  background-color: var(--sh-card);
  border-color: var(--sh-border);
  color: var(--sh-foreground);
  box-shadow: var(--sh-shadow-xs);
}

.btn-light:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-dark:hover,
.btn-outline-light:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.card .card-footer .btn-light:hover,
.card .card-footer .btn-outline-primary:hover,
.card .card-footer .btn-outline-secondary:hover {
  background-color: var(--sh-muted);
  border-color: var(--sh-border);
  color: var(--sh-foreground);
}

.btn-outline-danger,
.card .card-footer .btn-outline-danger {
  background-color: var(--sh-card);
  border-color: var(--sh-destructive-soft-border);
  color: var(--sh-destructive-text);
  box-shadow: var(--sh-shadow-xs);
}

.btn-outline-danger:hover,
.btn-outline-danger:not(:disabled):not(.disabled):active,
.card .card-footer .btn-outline-danger:hover {
  background-color: var(--sh-destructive-soft);
  border-color: var(--sh-destructive-soft-border);
  color: var(--sh-destructive-text);
}

.btn-dark,
.card .card-footer .btn-dark {
  background-color: var(--sh-foreground);
  border-color: var(--sh-foreground);
  color: #FFFFFF;
}

.btn-link,
.card .card-footer .btn-link {
  padding: 0 8px;
  background: transparent;
  border-color: transparent;
  color: var(--sh-primary);
  text-underline-offset: 4px;
}

.btn-link:hover,
.btn-link:focus,
.card .card-footer .btn-link:hover {
  background: transparent;
  color: var(--sh-primary-hover);
  text-decoration: underline;
}

/* 10. Campi dei form */

.form-control {
  height: 36px;
  padding: 6px 12px;
  font-family: var(--sh-font);
  font-size: 14px;
  line-height: 20px;
  color: var(--sh-foreground);
  background-color: var(--sh-card);
  border: 1px solid var(--sh-input);
  border-radius: var(--sh-radius-sm);
  box-shadow: var(--sh-shadow-xs);
  transition: border-color 150ms var(--sh-ease), box-shadow 150ms var(--sh-ease);
}

.form-control:focus {
  color: var(--sh-foreground);
  background-color: var(--sh-card);
  border-color: var(--sh-primary);
  box-shadow: 0 0 0 3px var(--sh-ring);
  outline: 0;
}

.form-control::placeholder {
  color: var(--sh-muted-foreground);
  opacity: 1;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--sh-disabled-bg);
  color: var(--sh-muted-foreground);
  box-shadow: none;
  cursor: not-allowed;
}

/* select con la freccia di Lucide (chevron-down) */
select.form-control:not([multiple]):not([size]) {
  height: 36px;
  padding-right: 36px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  cursor: pointer;
}

select.form-control[multiple],
select.form-control[size] {
  height: auto;
  padding: 4px;
}

select.form-control[multiple] option,
select.form-control[size] option {
  padding: 6px 8px;
  border-radius: 4px;
}

select.form-control[multiple] option:hover,
select.form-control[size] option:hover {
  background-color: var(--sh-muted);
}

/* voce scelta: lo sfondo passa dal gradiente e il testo da -webkit-text-fill-color perche' Chrome,
   con l'elenco attivo, impone colore e sfondo di sistema con !important: il testo restava bianco
   sull'azzurro chiaro, illeggibile */
select.form-control[multiple] option:checked,
select.form-control[size] option:checked {
  background: var(--sh-primary-soft) linear-gradient(0deg, var(--sh-primary-soft) 0%, var(--sh-primary-soft) 100%);
  color: var(--sh-primary-text);
  -webkit-text-fill-color: var(--sh-primary-text);
  font-weight: 500;
}

/* Tendine come il Select di shadcn/ui. Dove il browser lo permette (appearance: base-select, Chrome
   ed Edge dalla versione 135) l'elenco delle opzioni diventa un pannello come gli altri menu dell'app:
   bordo, ombra, angoli arrotondati, voce evidenziata al passaggio e spunta su quella scelta; sta sopra
   a tutto (top layer), quindi esce anche dalle card che scorrono. Negli altri browser resta l'elenco di
   sistema. Il campo chiuso resta quello di prima (stessa freccia) e le pagine non cambiano: stesse
   option, stessi valori, stessi eventi change. */
@supports (appearance: base-select) {
  select.form-control:not([multiple]):not([size]),
  select.form-control:not([multiple]):not([size])::picker(select),
  .pvtUi select.pvtRenderer,
  .pvtUi select.pvtRenderer::picker(select),
  .pvtUi select.pvtAggregator,
  .pvtUi select.pvtAggregator::picker(select),
  .pvtUi select.pvtAttrDropdown,
  .pvtUi select.pvtAttrDropdown::picker(select) {
    appearance: base-select;
  }

  /* aperta: il campo resta evidenziato come quando ha il focus (il focus passa alle opzioni) */
  select.form-control:not([multiple]):not([size]):open,
  .pvtUi select.pvtRenderer:open,
  .pvtUi select.pvtAggregator:open,
  .pvtUi select.pvtAttrDropdown:open {
    border-color: var(--sh-primary);
    box-shadow: 0 0 0 3px var(--sh-ring);
  }

  /* la voce scelta che non ci sta finisce con i puntini, senza passare sotto la freccia */
  select.form-control:not([multiple]):not([size]),
  .pvtUi select.pvtRenderer,
  .pvtUi select.pvtAggregator,
  .pvtUi select.pvtAttrDropdown {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* questa tendina e' larga quanto la voce scelta (quella di sistema quanto la voce piu' lunga): nel
     pivot l'aggregatore e i campi cambierebbero larghezza a ogni scelta e la tabella si sposterebbe.
     260px = la voce piu' lunga dell'aggregatore ("Numero proporzionale alla colonna"), come prima. */
  .pvtUi select.pvtAggregator {
    min-width: 260px;
  }

  .pvtUi select.pvtAttrDropdown {
    min-width: 120px;
  }

  /* le select del pivot sono alte 32px senza padding verticale: la tendina di sistema centrava da
     sola il testo, questa no (32px - 2px di bordo) */
  .pvtUi select.pvtRenderer,
  .pvtUi select.pvtAggregator,
  .pvtUi select.pvtAttrDropdown {
    line-height: 30px;
  }

  /* la freccia resta quella disegnata come sfondo del campo */
  select.form-control:not([multiple]):not([size])::picker-icon,
  .pvtUi select.pvtRenderer::picker-icon,
  .pvtUi select.pvtAggregator::picker-icon,
  .pvtUi select.pvtAttrDropdown::picker-icon {
    display: none;
  }

  select.form-control:not([multiple]):not([size])::picker(select),
  .pvtUi select.pvtRenderer::picker(select),
  .pvtUi select.pvtAggregator::picker(select),
  .pvtUi select.pvtAttrDropdown::picker(select) {
    box-sizing: border-box;
    max-block-size: min(320px, 60dvh);
    margin: 4px 0;
    padding: 4px;
    overflow-y: auto;
    color: var(--sh-foreground);
    background-color: var(--sh-card);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius);
    box-shadow: var(--sh-shadow-md);
  }

  select.form-control:not([multiple]):not([size]) option,
  .pvtUi select.pvtRenderer option,
  .pvtUi select.pvtAggregator option,
  .pvtUi select.pvtAttrDropdown option {
    display: flex;
    align-items: center;
    min-block-size: 32px;
    padding: 6px 32px 6px 8px;
    border-radius: 4px;
    color: var(--sh-foreground);
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    outline: 0;
  }

  select.form-control:not([multiple]):not([size]) option:is(:hover, :focus-visible),
  .pvtUi select.pvtRenderer option:is(:hover, :focus-visible),
  .pvtUi select.pvtAggregator option:is(:hover, :focus-visible),
  .pvtUi select.pvtAttrDropdown option:is(:hover, :focus-visible) {
    background-color: var(--sh-muted);
  }

  /* spunta di Lucide (check) a destra, come nel Select di shadcn: al posto di quella del browser */
  select.form-control:not([multiple]):not([size]) option::checkmark,
  .pvtUi select.pvtRenderer option::checkmark,
  .pvtUi select.pvtAggregator option::checkmark,
  .pvtUi select.pvtAttrDropdown option::checkmark {
    display: none;
  }

  select.form-control:not([multiple]):not([size]) option:checked,
  .pvtUi select.pvtRenderer option:checked,
  .pvtUi select.pvtAggregator option:checked,
  .pvtUi select.pvtAttrDropdown option:checked {
    font-weight: 500;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23020817' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px 16px;
  }

  select.form-control:not([multiple]):not([size]) option:disabled,
  .pvtUi select.pvtRenderer option:disabled,
  .pvtUi select.pvtAggregator option:disabled,
  .pvtUi select.pvtAttrDropdown option:disabled {
    color: var(--sh-disabled-fg);
    cursor: not-allowed;
  }
}

label,
.form-control-label,
.col-form-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--sh-foreground);
}

.form-check-label {
  font-weight: 400;
}

.form-text,
.form-text.text-muted {
  margin-top: 6px;
  font-size: 12px;
  line-height: 16px;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--sh-primary);
  cursor: pointer;
}

/* etichetta allineata alla prima riga del campo nei form orizzontali */
@media (min-width: 768px) {
  .form-horizontal .form-group.row > [class*="col-md-3"] > .form-control-label {
    padding-top: 8px;
  }
}

/* intervallo di date di bootstrap-datepicker: due campi con il loro raggio */
.input-daterange.input-group > .form-control {
  border-radius: var(--sh-radius-sm);
}

/* 11. Avvisi (Alert di shadcn, con l'icona disegnata dal CSS) */

.alert {
  position: relative;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--sh-foreground);
  background: var(--sh-card);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius);
}

.alert-danger,
.alert-warning,
.alert-success,
.alert-info,
.alert-primary {
  padding-left: 44px;
}

.alert-danger::before,
.alert-warning::before,
.alert-success::before,
.alert-info::before,
.alert-primary::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 16px;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--sh-alert-icon) no-repeat center / 16px 16px;
  mask: var(--sh-alert-icon) no-repeat center / 16px 16px;
}

.alert-danger {
  --sh-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
  background: var(--sh-destructive-soft);
  border-color: var(--sh-destructive-soft-border);
  color: var(--sh-destructive-text);
}

.alert-warning {
  --sh-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  background: var(--sh-warning-soft);
  border-color: var(--sh-warning-soft-border);
  color: var(--sh-warning-text);
}

.alert-success {
  --sh-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  background: var(--sh-success-soft);
  border-color: var(--sh-success-soft-border);
  color: var(--sh-success-text);
}

.alert-info,
.alert-primary {
  --sh-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  background: var(--sh-primary-soft);
  border-color: var(--sh-primary-soft-border);
  color: var(--sh-primary-text);
}

.alert a,
.alert .alert-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 12. Schede (Tabs di shadcn) */

.card .nav-tabs,
.card ul.nav[role="tablist"] {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin-bottom: 16px;
  padding: 4px;
  /* !important per battere .bg-light delle pill della dashboard */
  background: var(--sh-muted) !important;
  border: 0;
  border-radius: var(--sh-radius);
}

.card .nav-tabs .nav-link,
.card ul.nav[role="tablist"] .nav-link {
  display: block;
  margin: 0;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--sh-radius-sm);
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-transform: none;
  color: var(--sh-muted-foreground);
  transition: background-color 150ms var(--sh-ease), color 150ms var(--sh-ease), box-shadow 150ms var(--sh-ease);
}

.card .nav-tabs .nav-link::first-letter {
  text-transform: uppercase;
}

.card .nav-tabs .nav-link:hover,
.card ul.nav[role="tablist"] .nav-link:hover {
  color: var(--sh-foreground);
}

.card .nav-tabs .nav-link.active,
.card ul.nav[role="tablist"] .nav-link.active {
  background: var(--sh-card);
  color: var(--sh-foreground);
  box-shadow: var(--sh-shadow-sm);
}

/* sottolineatura rossa del template */
.custom-tab .nav-tabs > a.active::after {
  display: none;
}

/* 13. Finestre modali e menu a tendina */

.modal-backdrop {
  background-color: var(--sh-foreground);
}

.modal-backdrop.show {
  opacity: .5;
}

.modal-content {
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  box-shadow: var(--sh-shadow-lg);
  color: var(--sh-foreground);
}

.modal-header {
  padding: 20px 24px 8px;
  border-bottom: 0;
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}

.modal-body {
  padding: 8px 24px;
}

.modal-footer {
  gap: 8px;
  padding: 16px 24px 20px;
  border-top: 0;
}

.modal-footer > :not(:first-child),
.modal-footer > :not(:last-child) {
  margin: 0;
}

.close {
  color: var(--sh-muted-foreground);
  text-shadow: none;
  opacity: .8;
}

.dropdown-menu {
  padding: 4px;
  font-size: 14px;
  color: var(--sh-foreground);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius);
  box-shadow: var(--sh-shadow-md);
}

.dropdown-item {
  padding: 6px 8px;
  border-radius: var(--sh-radius-sm);
  color: var(--sh-foreground);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--sh-muted);
  color: var(--sh-foreground);
}

.dropdown-item.active,
.dropdown-item:active {
  background: var(--sh-primary-soft);
  color: var(--sh-primary-text);
}

/* 14. Indicatori della dashboard (widget e barre del template) */

.stat-widget-five {
  position: relative;
  min-height: 0;
}

/* icona in alto a destra in un riquadro tenue, come nelle stat card di shadcn */
.stat-widget-five .stat-icon {
  top: 0;
  right: 0;
  left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--sh-radius);
  background: var(--sh-primary-soft);
  color: var(--sh-primary);
  font-size: 18px;
  line-height: 1;
}

.stat-widget-five .stat-content {
  margin-left: 0;
  padding-right: 40px;
}

/* etichetta sopra e valore sotto: si inverte solo l'ordine visivo */
.stat-widget-five .stat-content > .dib,
.stat-widget-five > .dib {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
}

/* numeri grandi isolati: cifre proporzionali (le tabulari solo nelle colonne) */
.stat-widget-five .stat-text {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -.02em;
  color: var(--sh-foreground);
}

.stat-widget-five .stat-heading {
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: var(--sh-muted-foreground);
}

.progress-box {
  margin-bottom: 24px;
}

.progress-box .por-title {
  padding-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: var(--sh-muted-foreground);
}

.progress-box .por-txt {
  padding-bottom: 8px;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -.02em;
  color: var(--sh-foreground);
}

/* l'altezza di 5px e' scritta in linea */
.progress {
  height: 8px !important;
  background: var(--sh-primary-soft);
  border-radius: var(--sh-radius-full);
}

.progress > .progress-bar,
.progress > .progress-bar[class*="bg-flat-color"] {
  background: var(--sh-primary);
  border-radius: var(--sh-radius-full);
}

.badge {
  padding: 3px 8px;
  border-radius: var(--sh-radius-full);
  font-size: 11px;
  font-weight: 600;
}

/* 15. Tabelle Bootstrap */

.table {
  color: var(--sh-foreground);
  font-size: 14px;
}

.table thead th {
  height: 40px;
  padding: 8px 12px;
  vertical-align: middle;
  background: var(--sh-subtle);
  border-top: 0;
  border-bottom: 1px solid var(--sh-border);
  font-size: 12px;
  font-weight: 500;
  color: var(--sh-muted-foreground);
}

.table td,
.table th {
  padding: 10px 12px;
  border-top: 1px solid var(--sh-border-subtle);
}

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

.table-hover tbody tr:hover {
  background-color: var(--sh-subtle);
}

/* 16. Calendario (bootstrap-datepicker 1.9)
   Il CSS del plugin usa selettori molto specifici e sfumature: qui servono gli !important. */

/* z-index: il plugin lo scrive in linea (z-index dei contenitori + 10, di solito 10): il calendario
   aperto verso l'alto finiva sotto la barra alta e il menu laterale (999). 1060 sta sopra anche
   alle finestre modali (1050) e sotto i tooltip di Bootstrap (1070). */
.datepicker.dropdown-menu {
  z-index: 1060 !important;
  padding: 12px;
  font-family: var(--sh-font);
  font-size: 13px;
  color: var(--sh-foreground);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  box-shadow: var(--sh-shadow-md);
}

.datepicker-dropdown::before,
.datepicker-dropdown::after {
  display: none !important;
}

.datepicker table tr td,
.datepicker table tr th {
  width: 32px;
  height: 32px;
  border-radius: var(--sh-radius-sm);
}

.datepicker table tr th.dow {
  font-size: 12px;
  font-weight: 500;
  color: var(--sh-muted-foreground);
}

.datepicker table tr th.cw,
.datepicker table tr td.cw {
  font-size: 11px;
  color: var(--sh-disabled-fg);
}

.datepicker .datepicker-switch {
  font-weight: 600;
}

.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker table tr td.day:hover,
.datepicker table tr td.focused,
.datepicker table tr td span:hover {
  background: var(--sh-muted) !important;
}

.datepicker table tr td.old,
.datepicker table tr td.new {
  color: var(--sh-disabled-fg);
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover {
  background: var(--sh-muted) !important;
  color: var(--sh-foreground) !important;
  font-weight: 600;
}

.datepicker table tr td.range,
.datepicker table tr td.range:hover {
  background: var(--sh-primary-soft) !important;
  color: var(--sh-primary-text) !important;
  border-radius: 0;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.highlighted,
.datepicker table tr td.selected,
.datepicker table tr td.range-start,
.datepicker table tr td.range-end,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
  background: var(--sh-primary) !important;
  color: var(--sh-primary-foreground) !important;
  border-color: transparent !important;
  text-shadow: none !important;
  border-radius: var(--sh-radius-sm);
}

.datepicker table tr td span {
  border-radius: var(--sh-radius-sm);
}

/* 17. Mappa (jqvmap): etichetta e pulsanti di zoom */

.jqvmap-label {
  padding: 4px 8px;
  background: var(--sh-foreground);
  color: #FFFFFF;
  border-radius: var(--sh-radius-sm);
  font-family: var(--sh-font);
  font-size: 12px;
  line-height: 16px;
}

.jqvmap-zoomin,
.jqvmap-zoomout {
  width: 16px;
  height: 16px;
  padding: 3px;
  line-height: 16px;
  background: var(--sh-card);
  color: var(--sh-foreground);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-sm);
  box-shadow: var(--sh-shadow-xs);
}

.jqvmap-zoomout {
  top: 36px;
}

/* 18. Grafici: tooltip e menu di ApexCharts, barre della tabella pivot
   Colori, carattere e griglie dei grafici stanno in assets/js/bi-tema-grafici.js. */

.apexcharts-tooltip.apexcharts-theme-light {
  background: var(--sh-card);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius);
  box-shadow: var(--sh-shadow-md);
  color: var(--sh-foreground);
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  margin-bottom: 4px;
  padding: 6px 10px;
  background: var(--sh-subtle);
  border-bottom: 1px solid var(--sh-border);
  font-weight: 600;
  color: var(--sh-foreground);
}

.apexcharts-tooltip-text-y-value,
.apexcharts-tooltip-text-goals-value {
  font-weight: 600;
  color: var(--sh-foreground);
}

.apexcharts-xaxistooltip {
  background: var(--sh-card);
  border-color: var(--sh-border);
  border-radius: var(--sh-radius-sm);
  color: var(--sh-foreground);
  font-family: var(--sh-font);
}

.apexcharts-xaxistooltip-bottom::before {
  border-bottom-color: var(--sh-border);
}

.apexcharts-xaxistooltip-bottom::after {
  border-bottom-color: var(--sh-card);
}

.apexcharts-menu {
  min-width: 150px;
  padding: 4px;
  background: var(--sh-card);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius);
  box-shadow: var(--sh-shadow-md);
}

.apexcharts-menu-item {
  padding: 6px 8px;
  border-radius: var(--sh-radius-sm);
  font-size: 13px;
  color: var(--sh-foreground);
}

.apexcharts-menu-item:hover {
  background: var(--sh-muted);
}

.apexcharts-toolbar svg {
  fill: var(--sh-muted-foreground);
}

.apexcharts-toolbar .apexcharts-selected svg,
.apexcharts-toolbar div:hover svg {
  fill: var(--sh-primary);
}

/* renderer "tabella con grafico" del pivot: il colore delle barre e' scritto in linea
   (grigio per i positivi, rosso scuro per i negativi); i negativi restano rossi */
/* jQuery scrive il colore come rgb(): grigio = rgb(128, 128, 128), rosso scuro = rgb(139, 0, 0) */
.pvtTable td > div > div[style*="background-color: gray"],
.pvtTable td > div > div[style*="background-color: rgb(128, 128, 128)"] {
  background-color: var(--sh-chart-fill) !important;
  border: 2px solid var(--sh-chart-line);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}

.pvtTable td:hover > div > div[style*="background-color: gray"],
.pvtTable td:hover > div > div[style*="background-color: rgb(128, 128, 128)"] {
  background-color: var(--sh-chart-line) !important;
}

.pvtTable td > div > div[style*="background-color: darkred"],
.pvtTable td > div > div[style*="background-color: rgb(139, 0, 0)"] {
  background-color: var(--sh-chart-fill-negative) !important;
  border: 2px solid var(--sh-chart-line-negative);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}

.pvtTable td:hover > div > div[style*="background-color: darkred"],
.pvtTable td:hover > div > div[style*="background-color: rgb(139, 0, 0)"] {
  background-color: var(--sh-chart-line-negative) !important;
}

/* 19. Pagine di accesso, errore e manutenzione (body.sh-auth) */

html body.sh-auth {
  background: var(--sh-background) !important;
  color: var(--sh-foreground);
}

.sh-auth .sufee-login {
  min-height: 100vh;
  padding: 32px 0;
  align-items: center;
}

.sh-auth .login-content {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.sh-auth .login-logo {
  margin-bottom: 24px;
  text-align: center;
}

.sh-auth .login-logo img {
  max-height: 48px;
  width: auto;
}

.sh-auth .login-form {
  padding: 24px;
  background: var(--sh-card);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  box-shadow: var(--sh-shadow-sm);
}

.sh-auth .login-form form {
  margin-bottom: 0;
}

.sh-auth .login-form .form-group {
  margin-bottom: 16px;
}

.sh-auth .login-form label {
  margin-bottom: 6px;
  text-transform: none;
  color: var(--sh-foreground);
}

.sh-auth .login-form .btn {
  width: 100%;
  height: 40px;
  margin: 8px 0 0;
  padding: 0 16px;
  font-size: 14px;
  text-transform: none;
  background-color: var(--sh-primary);
  border: 1px solid var(--sh-primary);
  color: var(--sh-primary-foreground);
}

.sh-auth .login-form .btn:hover,
.sh-auth .login-form .btn:focus,
.sh-auth .login-form .btn:not(:disabled):not(.disabled):active {
  background-color: var(--sh-primary-hover);
  border-color: var(--sh-primary-hover);
  color: var(--sh-primary-foreground);
}

.sh-auth .alert {
  margin-bottom: 16px;
}

/* crediti sotto la card di accesso o di errore */
.sh-auth .sh-crediti {
  justify-content: center;
  margin-top: 32px;
}

.sh-auth .error-template {
  padding: 32px 24px;
  text-align: center;
  background: var(--sh-card);
  color: var(--sh-foreground);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  box-shadow: var(--sh-shadow-sm);
}

.sh-auth .error-template > span:not(.sh-auth-icon) {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sh-muted-foreground);
}

.sh-auth .error-template a {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sh-auth .sh-auth-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: var(--sh-radius-full);
  background: var(--sh-primary-soft);
  color: var(--sh-primary);
}

.sh-auth .sh-auth-icon--warning {
  background: var(--sh-warning-soft);
  color: var(--sh-warning-text);
}

.sh-auth .sh-auth-icon .sh-icon {
  width: 24px;
  height: 24px;
}

/* 20. Componenti condivisi delle pagine (fase 4)
   Classi da aggiungere al markup esistente, accanto a quelle che ci sono gia'.
   Le regole valide per una pagina sola stanno nella pagina, non qui. */

/* intestazione di pagina: titolo, sottotitolo e azioni a destra (testi esistenti) */
.sh-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 24px;
}

.sh-page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -.025em;
  color: var(--sh-foreground);
}

.sh-page-subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--sh-muted-foreground);
}

.sh-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* sottotitolo grigio sotto il titolo di una card */
.sh-card-description {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--sh-muted-foreground);
}

/* form dei filtri: etichetta sopra il campo, campi su una griglia che si adatta alla larghezza.
   Si aggiunge sh-form al <form class="form-horizontal"> (righe .row.form-group con label in col-md-3). */
.sh-form {
  display: grid;
  /* min(...,100%): sotto i ~314px di spazio una colonna sola, senza sbordare */
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 20px 24px;
}

.sh-form > .row.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  min-width: 0;
}

.sh-form > .row.form-group > [class*="col"] {
  flex: none;
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.sh-form .form-group.row > [class*="col"] > .form-control-label {
  margin: 0;
  padding-top: 0;
}

/* etichette in alto, campi in basso: i campi di una stessa riga restano allineati tra loro anche
   quando un gruppo ha etichette in piu' (es. l'intervallo di date con "Dal"/"Al") */
.sh-form > .row.form-group > :last-child {
  margin-top: auto;
}

/* casella di spunta singola (Checkbox di shadcn): spunta e testo affiancati, in una fascia
   alta quanto gli altri campi */
.sh-form .form-check:not(.sh-segmented) {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin: 0;
  padding-left: 0;
}

.sh-form .form-check:not(.sh-segmented) > .form-check-input {
  position: static;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
}

.sh-form .form-check:not(.sh-segmented) > .form-check-label {
  margin: 0;
  line-height: 20px;
}

/* riga che occupa tutta la larghezza del form (es. gruppi radio lunghi, select multiple) */
.sh-form > .sh-form-wide {
  grid-column: 1 / -1;
}

/* intervallo di date (bootstrap-datepicker): due campi affiancati, ciascuno con la sua etichetta.
   Si aggiunge sh-daterange a .input-daterange.input-group */
.input-daterange.sh-daterange {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  gap: 4px 12px;
  width: 100%;
}

.input-daterange.sh-daterange > [class*="col"] {
  flex: none;
  width: auto;
  max-width: none;
  padding: 0;
}

.input-daterange.sh-daterange > [class*="col"] > .form-control-label {
  margin: 0;
  padding-top: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--sh-muted-foreground);
}

.input-daterange.sh-daterange > .form-control {
  width: 100%;
  padding-right: 34px;
  text-align: left;
  border-radius: var(--sh-radius-sm);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}

/* scelta a segmenti (ToggleGroup di shadcn) sui radio nativi, che restano nel DOM e funzionano come prima.
   Si aggiunge sh-segmented al .form-check che contiene .radio > label.form-check-label > input */
/* alta 36px come i campi (padding 3px + segmenti da 30px), cosi' si allinea a input e select */
.form-check.sh-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 3px;
  background: var(--sh-muted);
  border-radius: var(--sh-radius);
}

.sh-segmented > .radio {
  position: relative;
  margin: 0;
}

.sh-segmented .form-check-label {
  display: inline-block;
  margin: 0;
  padding: 5px 12px;
  border-radius: var(--sh-radius-sm);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--sh-muted-foreground);
  cursor: pointer;
  transition: background-color 150ms var(--sh-ease), color 150ms var(--sh-ease), box-shadow 150ms var(--sh-ease);
}

.sh-segmented .form-check-label::first-letter {
  text-transform: uppercase;
}

.sh-segmented .form-check-label:hover {
  color: var(--sh-foreground);
}

/* il radio vero resta raggiungibile da tastiera: e' solo invisibile */
.sh-segmented .form-check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.sh-segmented .form-check-label:has(.form-check-input:checked) {
  background: var(--sh-card);
  color: var(--sh-foreground);
  box-shadow: var(--sh-shadow-sm);
}

.sh-segmented .form-check-label:has(.form-check-input:focus-visible) {
  outline: 2px solid var(--sh-primary);
  outline-offset: 2px;
}

.sh-segmented .form-check-label:has(.form-check-input:disabled) {
  opacity: .5;
  cursor: not-allowed;
}

/* barra sopra un grafico o una tabella: select dei filtri e azioni */
.sh-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.sh-toolbar .form-control {
  width: auto;
  min-width: 240px;
}

/* sul telefono la select occupa la riga: larga quanto l'opzione piu' lunga allargherebbe tutta la
   pagina (style.css mette body { display: table }) */
@media (max-width: 575.98px) {
  .sh-toolbar .form-control {
    width: 100%;
    min-width: 0;
  }
}

/* tabella shadcn (si aggiunge sh-table a una <table> di dati, sh-table-wrap al suo contenitore) */
/* contain: style.css mette body { display: table }, che si allargherebbe fino alla larghezza
   minima della tabella: cosi' su mobile scorre la tabella, non tutta la pagina */
.sh-table-wrap {
  overflow: auto;
  contain: inline-size;
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
}

.sh-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  color: var(--sh-foreground);
}

.sh-table thead th {
  height: 40px;
  padding: 8px 12px;
  vertical-align: bottom;
  background: var(--sh-subtle);
  border-bottom: 1px solid var(--sh-border);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-align: left;
  color: var(--sh-muted-foreground);
}

.sh-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--sh-border-subtle);
}

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

.sh-table tbody tr:hover td {
  background: var(--sh-subtle);
}

/* numeri in colonna: allineati a destra, cifre tabulari */
.sh-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sh-table thead th.sh-num {
  text-align: right;
}

/* stato vuoto e testi di aiuto (solo per testi gia' presenti) */
.sh-empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--sh-muted-foreground);
}

.sh-help {
  margin-top: 6px;
  font-size: 12px;
  line-height: 16px;
  color: var(--sh-muted-foreground);
}

/* (i) con scheda informativa (HoverCard di shadcn): si apre al passaggio del mouse, al focus da
   tastiera e al tocco. Markup:
   <div class="sh-hint">
     <button type="button" class="sh-hint-trigger" aria-label="..." aria-describedby="ID">
       <svg class="sh-icon" aria-hidden="true"><use href="assets/icons/lucide.svg#info"></use></svg>
     </button>
     <div class="sh-hint-content" id="ID" role="tooltip"> ... </div>
   </div> */
.sh-hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.sh-hint-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0 0 0 4px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--sh-radius-full);
  color: var(--sh-muted-foreground);
  cursor: help;
  transition: background-color 150ms var(--sh-ease), color 150ms var(--sh-ease);
}

.sh-hint:hover .sh-hint-trigger,
.sh-hint:focus-within .sh-hint-trigger {
  background: var(--sh-primary-soft);
  color: var(--sh-primary);
}

.sh-hint-trigger .sh-icon {
  width: 16px;
  height: 16px;
}

/* la scheda si allarga quanto il testo fino a 360px; assets/js/bi-componenti.js la sposta in
   orizzontale (--sh-hint-x, con margin-left: un transform su mobile allargava lo scorrimento della
   pagina) e la apre verso l'alto (data-sh-sopra) se sotto non c'e' spazio */
.sh-hint-content {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: -8px;
  z-index: 1050;
  width: max-content;
  max-width: min(360px, calc(100vw - 32px));
  max-height: min(60vh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-left: var(--sh-hint-x, 0px);
  padding: 12px 14px;
  background: var(--sh-card);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  box-shadow: var(--sh-shadow-md);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  color: var(--sh-foreground);
}

/* ponte invisibile tra l'icona e la scheda, cosi' il mouse ci arriva senza che si chiuda.
   Sta sul contenitore: un ::before della scheda verrebbe tagliato dal suo overflow. */
.sh-hint:hover::after,
.sh-hint:focus-within::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -40px;
  right: -40px;
  /* sopra le colonne di Bootstrap (position: relative), che altrimenti lo coprirebbero */
  z-index: 1050;
  height: 12px;
}

/* scheda aperta verso l'alto */
.sh-hint[data-sh-sopra] > .sh-hint-content {
  top: auto;
  bottom: calc(100% + 8px);
}

.sh-hint[data-sh-sopra]:hover::after,
.sh-hint[data-sh-sopra]:focus-within::after {
  top: auto;
  bottom: 100%;
}

.sh-hint:hover > .sh-hint-content,
.sh-hint:focus-within > .sh-hint-content {
  display: block;
}

/* sezioni della scheda: titolo piccolo e testo grigio */
.sh-hint-section + .sh-hint-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--sh-border-subtle);
}

.sh-hint-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  color: var(--sh-foreground);
}

.sh-hint-text {
  margin: 0;
  color: var(--sh-muted-foreground);
}

.sh-hint-text + .sh-hint-text {
  margin-top: 6px;
}

/* Card con icona nell'intestazione (form_pivot.php): un riquadro colorato per strumento, cosi' le card
   si riconoscono a colpo d'occhio (usato anche in confronto.php). Markup:
   <div class="card-header sh-card-header-icona">
     <span class="sh-card-icona sh-card-icona--ricavi" aria-hidden="true"><svg class="sh-icon">...</svg></span>
     <span><strong>Form</strong> pivot ricavi</span>
   </div> */
.card > .card-header.sh-card-header-icona {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sh-card-icona {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--sh-radius);
}

.sh-card-icona .sh-icon {
  width: 20px;
  height: 20px;
}

.sh-card-icona--ricavi {
  background: var(--sh-success-soft);
  color: var(--sh-success);
}

.sh-card-icona--presenze {
  background: var(--sh-primary-soft);
  color: var(--sh-primary);
}

.sh-card-icona--vendite {
  background: var(--sh-viola-soft);
  color: var(--sh-viola);
}

/* funzione non ancora attiva (es. confronto eventi): grigio */
.sh-card-icona--neutra {
  background: var(--sh-muted);
  color: var(--sh-muted-foreground);
}

/* Attesa dopo l'invio di un form (assets/js/bi-invio.js, form con data-bi-attesa): il pulsante resta del
   suo colore, con la rotellina e «Elaborazione in corso…»; dopo 3 secondi un avviso in fondo al piede */
.btn.sh-in-attesa:disabled {
  opacity: 1;
  cursor: progress;
}

.sh-attesa-giro {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sh-giro 0.8s linear infinite;
}

@keyframes sh-giro {
  to {
    transform: rotate(360deg);
  }
}

.sh-attesa-avviso {
  flex-basis: 100%;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--sh-muted-foreground);
}

/* Ondata 3 - dashboard */

/* grafici Chart.js ad altezza fissa (dynamic_chart.js, opzione altezza; dashboard e Occupazioni):
   il canvas riempie un contenitore largo quanto la card e alto quanto scritto nello stile */
.bi-grafico {
  position: relative;
  width: 100%;
}

/* una sola voce (es. un solo gruppo presente oggi): il numero al posto della ciambella */
.bi-valore-unico {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 160px;
  text-align: center;
}

.bi-valore-unico-numero {
  font-size: 30px;
  line-height: 36px;
  font-weight: 600;
  color: var(--sh-foreground);
  font-variant-numeric: tabular-nums;
}

.bi-valore-unico-voce {
  font-size: 13px;
  line-height: 18px;
  color: var(--sh-muted-foreground);
}

/* nessun dato: una riga di testo al posto del grafico */
.bi-grafico-vuoto {
  margin: 0;
  padding: 48px 0;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  color: var(--sh-muted-foreground);
}

/* mappa: pulsanti di zoom veri da 32px (BI_TEMA.mappaAccessibile in bi-tema-grafici.js) */
button.bi-mappa-zoom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

button.jqvmap-zoomout.bi-mappa-zoom {
  top: 50px;
}

button.bi-mappa-zoom:hover {
  background: var(--sh-muted);
}

button.bi-mappa-zoom:focus-visible,
.bi-dati-mappa > summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sh-ring);
}

/* elenco delle nazioni sotto la mappa, chiuso finche' non lo si apre */
.bi-dati-mappa {
  margin-top: 12px;
  font-size: 13px;
  line-height: 18px;
}

.bi-dati-mappa > summary {
  width: max-content;
  border-radius: var(--sh-radius-sm);
  font-weight: 500;
  color: var(--sh-primary-text);
  cursor: pointer;
}

.bi-dati-mappa-tabella {
  max-width: 420px;
  margin: 8px 0 0;
}

.bi-dati-mappa-tabella td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bi-dati-mappa-tabella tbody th {
  font-weight: 400;
}

/* Ondata 3 - risultati KPI e Confronto */

/* tabella dei dati sotto il grafico (KPI_risultato.php e confronto_risultato.php, riempita da
   assets/js/KPI_apex.js): chiusa finche' non la si apre, col clic o da tastiera. Gli stessi valori
   del grafico, per chi non usa il mouse o usa un lettore di schermo */
.bi-dati-grafico {
  margin-top: 12px;
  font-size: 13px;
  line-height: 18px;
}

.bi-dati-grafico > summary {
  width: max-content;
  max-width: 100%;
  border-radius: var(--sh-radius-sm);
  font-weight: 500;
  color: var(--sh-primary-text);
  cursor: pointer;
}

.bi-dati-grafico > summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sh-ring);
}

.bi-dati-grafico-scorri {
  max-height: 360px;
  margin-top: 8px;
  overflow: auto;
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius);
}

.bi-dati-grafico-scorri .table {
  margin: 0;
  font-size: 13px;
}

.bi-dati-grafico-scorri .table td,
.bi-dati-grafico-scorri .table th {
  padding: 6px 12px;
  white-space: nowrap;
}

.bi-dati-grafico-scorri .table td {
  font-variant-numeric: tabular-nums;
}

/* l'intestazione resta ferma mentre si scorrono le righe */
.bi-dati-grafico-scorri thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.bi-dati-grafico-scorri tbody th {
  font-weight: 500;
}

/* Ondata 3 - form e flussi */

/* form dei filtri (assets/js/init/bi-form-filtri.js): messaggio d'errore sopra le date (sotto avrebbe
   spinto in basso i campi accanto, allineati in fondo alla riga), campo sbagliato bordato di rosso;
   avviso (non bloccante) per i periodi lunghi del pivot, su una riga sua nel piede della card, sotto Invia */
.sh-campo-errore,
.sh-campo-avviso {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 18px;
}

.sh-campo-errore {
  font-weight: 500;
  color: var(--sh-destructive-text);
}

.sh-campo-avviso {
  padding: 8px 10px;
  background: var(--sh-warning-soft);
  border: 1px solid var(--sh-warning-soft-border);
  border-radius: var(--sh-radius-sm);
  color: var(--sh-warning-text);
}

.card-footer > .sh-campo-avviso {
  flex-basis: 100%;
  margin: 4px 0 0;
}

.form-control[aria-invalid="true"],
.form-control[aria-invalid="true"]:focus {
  border-color: var(--sh-destructive);
}

.form-control[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--sh-destructive-soft);
}

/* pagine di errore (errore_timeout, errore_abbonamento, pagina_in_manutenzione): titolo, frase e pulsante */
.sh-auth .sh-auth-titolo {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: var(--sh-foreground);
}

.sh-auth .sh-auth-testo {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sh-muted-foreground);
}

.sh-auth .sh-auth-azioni {
  margin-top: 24px;
}

.sh-auth .error-template a.btn {
  font-weight: 500;
  text-decoration: none;
}

/* telefono e tablet stretto: la barra alta su una riga sola. Il template mette nome e avatar in una seconda
   riga sotto quella fissa del logo (il contenuto partiva a 117px): qui salgono nella riga del logo, a sinistra
   del pulsante del menu, e la seconda riga sparisce. Sotto i 576px resta solo l'avatar (il nome e' nel suo menu) */
@media (max-width: 768px) {
  #header.header {
    height: 0;
    padding: 0;
    border-bottom: 0;
  }

  #header.header .top-right {
    position: fixed;
    top: 0;
    right: 60px;
    z-index: 1000;
    width: auto;
    height: 55px;
    padding: 0;
    background: transparent;
  }

  #header.header .header-menu {
    height: 55px;
  }
}

@media (max-width: 575.98px) {
  #header .sh-header-name {
    display: none;
  }
}

/* 21. Accessibilita' e stampa (fase 5) */

/* chi ha chiesto al sistema di ridurre le animazioni non vede transizioni ne' dissolvenze
   (le animazioni dei grafici le spegne assets/js/bi-tema-grafici.js) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* stampa: solo il contenuto, senza menu, barra alta e ombre */
@media print {
  #left-panel,
  #header,
  #menuToggle {
    display: none !important;
  }

  #right-panel {
    display: block;
    min-height: 0;
    margin: 0 !important;
  }

  .right-panel .content {
    padding: 0;
  }

  .card {
    box-shadow: none;
  }

  /* un grafico non si spezza tra due pagine; le tabelle lunghe invece possono continuare */
  .card:has(canvas),
  .card:has(.apexcharts-canvas),
  .card:has(.js-plotly-plot) {
    break-inside: avoid;
  }
}