/* AMBRA - Custom Styles */

:root {
  --sidebar-width: 250px;
  --header-height: 60px;
  --primary-color: #2c3e50;
  --secondary-color: #34495e;
  --accent-color: #3498db;

  /* Palette Studio27, la stessa dell'area utente: la usano le pagine di
     autenticazione (login, 2FA, passkey, onboarding). Il principale #3A84A0
     sta a 4.2:1 su bianco — identita' e superfici si', testo no: per quello
     c'e' il blu #2D6281 (6.6:1). */
  --s27-blu-notte: #072E41;
  --s27-blu: #2D6281;
  --s27-principale: #3A84A0;
  --auth-primary: #2D6281;
  --auth-primary-dark: #072E41;
  --auth-gradient: linear-gradient(135deg, #2D6281 0%, #072E41 100%);
}

/* Links - stesso colore del testo */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.sidebar-brand) {
  color: inherit;
  text-decoration: underline;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.sidebar-brand):hover {
  color: inherit;
  opacity: 0.8;
}

/* Layout */
.wrapper {
  display: flex;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* `clip`, non `hidden`: con hidden il browser calcola overflow-y ad auto e
     .main-content diventa un contenitore di scorrimento, quindi l'header
     `position: sticky` si aggancia a lui — che non scorre mai — invece che al
     viewport. Risultato: l'header scorreva via con la pagina portandosi dietro
     il banner della chiamata in arrivo, che spariva appena si scendeva.
     `clip` ritaglia l'eccesso orizzontale allo stesso modo senza creare lo
     scroll container. La riga con hidden resta come fallback per i browser che
     non conoscono clip. */
  overflow-x: hidden;
  overflow-x: clip;
}

main {
  flex: 1;
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--primary-color);
  color: #fff;
  z-index: 1000;
  overflow-y: auto;
  transition: transform 0.3s ease;
}

.sidebar-header {
  padding: 1rem;
  background: #f8f9fa;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-brand {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-brand:hover {
  opacity: 0.85;
}

.sidebar-nav {
  padding: 1rem 0;
}

.sidebar-nav .nav-section {
  padding: 0.75rem 1rem 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.05em;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: rgba(255,255,255,0.8);
  transition: all 0.2s;
}

.sidebar-nav .nav-link:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.sidebar-nav .nav-link.active {
  background: var(--accent-color);
  color: #fff;
}

.sidebar-nav .nav-link.disabled {
  color: rgba(255,255,255,0.4);
  pointer-events: none;
}

.sidebar-nav .nav-link i {
  font-size: 1.1rem;
  width: 1.5rem;
  text-align: center;
}

.sidebar-nav .badge {
  margin-left: auto;
  font-size: 0.65rem;
}

/* Header */
.main-header {
  position: sticky;
  top: 0;
  z-index: 999;
}

.main-header .navbar {
  padding: 0.5rem 1rem;
}

.badge-notification {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0.6rem;
  padding: 0.2em 0.4em;
}

/* Footer */
.main-footer {
  padding: 1rem;
  border-top: 1px solid #dee2e6;
  margin-top: auto;
}

/* Cards — header icon-badge style */
.card-header {
  padding: 0.3rem 0.75rem !important;
  font-size: 0.82rem;
  line-height: 1.4;
  border-bottom: 1px solid rgba(0,0,0,0.07) !important;
}

/* Sfondo bianco su header senza classe bg-* esplicita */
.card-header:not([class*="bg-"]) {
  background: #fff;
}

/* Icon badge — cerchietto tenue intorno all'icona */
.card-header .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  background: rgba(52, 152, 219, 0.1);
  border-radius: 50%;
  font-size: 0.72rem;
  flex-shrink: 0;
}

/* Reset badge per icone dentro bottoni e header colorati */
.card-header .btn .bi,
.card-header[class*="bg-"] .bi {
  width: auto; height: auto;
  background: none; border-radius: 0;
  display: inline; font-size: inherit;
}

/* Gestione Contanti — griglia pulsanti banconote/monete */
.gc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.5rem;
}
.gc-grid .btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.25rem;
  position: relative;
}
.gc-grid .btn .bi {
  font-size: 1.2rem;
}
.gc-grid .btn .gc-badge-qty {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 1.3rem;
  height: 1.3rem;
  line-height: 1.3rem;
  border-radius: 50%;
  font-size: 0.7rem;
}
/* Taglio con il tasto per togliere un pezzo (modal incasso contanti) */
.gc-den {
  position: relative;
}
.gc-den > .btn {
  width: 100%;
  height: 100%;
}
.gc-togli {
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: 2;
  width: 1.3rem;
  height: 1.3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bs-danger);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gc-togli:hover {
  filter: brightness(0.9);
}

.card-header .btn {
  padding: 0.15rem 0.5rem !important;
  font-size: 0.75rem !important;
  line-height: 1.4;
}

.card-header .btn i { font-size: 0.75rem; }

.card-header-tabs {
  margin-bottom: -0.5rem;
}

/* User card header */
.user-card-header {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: #fff;
  padding: 1.5rem;
}

.user-card-header .badge {
  font-size: 0.8rem;
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #dee2e6;
}

.timeline-item {
  position: relative;
  padding-bottom: 1.5rem;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -1.5rem;
  top: 0.25rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-color);
  border: 2px solid #fff;
}

.timeline-item.importante::before {
  background: #dc3545;
}

.timeline-item.avviso::before {
  background: #ffc107;
}

/* Tables */
.table-actions {
  white-space: nowrap;
}

.table-actions .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* Form styles */
.form-label.required::after {
  content: ' *';
  color: #dc3545;
}

/* Badge qualifiche */
.badge-socio { background-color: #28a745 !important; }
.badge-tutor { background-color: #17a2b8 !important; }
.badge-fornitore { background-color: #ffc107 !important; color: #000 !important; }
.badge-donatore { background-color: #dc3545 !important; }

/* Contatti preferiti */
.contatto-preferito {
  position: relative;
}

.contatto-preferito::after {
  content: '\2605';
  color: #ffc107;
  margin-left: 0.25rem;
}

/* Edit inline */
.editable {
  cursor: pointer;
  border-bottom: 1px dashed #ccc;
}

.editable:hover {
  background: #f8f9fa;
}

/* Responsive */
@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.show {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0;
    padding-bottom: 56px; /* spazio per la tabbar fissa, sotto */
  }

  /* Intestazione di pagina (titolo + pulsante "Indietro"): su schermi stretti
     i due elementi affiancati si schiacciano a vicenda o vanno su due righe
     strette. Va sotto invece che a fianco, titolo un po' più piccolo. */
  .page-header-responsive {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
  .page-header-responsive h1,
  .page-header-responsive h2 {
    font-size: 1.25rem;
  }

  /* Barra azioni dei form (Annulla/Salva in fondo): su un form lungo restava
     raggiungibile solo scorrendo fino in fondo. Appiccicata sopra la tabbar
     di navigazione, resta sempre a un tap di distanza. */
  .form-actions-bar {
    position: sticky;
    bottom: 56px;
    background: #fff;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-top: 1px solid #dee2e6;
    z-index: 900;
  }

  /* Barra azioni di pagina (es. "Entrata/Uscita/Giroconto" sui movimenti,
     "Naviga/Prenota" sugli appuntamenti): su desktop stanno in fila unica,
     su schermi stretti vanno a capo su più righe invece di traboccare fuori
     dallo schermo (il .main-content ha overflow-x:hidden, quindi i bottoni
     in eccesso sarebbero semplicemente irraggiungibili). */
  .page-actions-bar {
    width: 100%;
    flex-wrap: wrap;
  }
  .page-actions-bar .btn-group {
    flex-wrap: wrap;
  }
  .page-actions-bar .btn {
    flex: 0 0 auto;
  }

  /* Header (barra sopra con ricerca, notifiche, timbratura, utente/login):
     Bootstrap mette .navbar-nav in colonna di default e la rimette in riga
     solo da 992px in su (.navbar-expand-lg). Qui non usiamo il collapse di
     Bootstrap (la sidebar ha un drawer proprio), quindi sotto i 992px le
     icone a destra (notifiche/timbratura/utente) restavano impilate una
     sopra l'altra: una barra bianca alta centinaia di pixel invece di una
     riga sottile. Forziamo la riga anche qui, e riduciamo gli spazi tra le
     icone così restano tutte visibili sui telefoni più stretti. */
  .main-header .navbar-nav {
    flex-direction: row;
    align-items: center;
    gap: 0.15rem;
  }
  .main-header .nav-link {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }

  /* I menu a tendina (notifiche, utente) non devono uscire dal viewport:
     su un telefono stretto min-width:300px può sforare il bordo destro. */
  .main-header .dropdown-menu {
    max-width: calc(100vw - 1.5rem);
  }
}

/* Sidebar mobile — sfondo scuro dietro al drawer quando è aperto, per
   segnalare visivamente che il resto della pagina non è interagibile
   (il tap fuori la chiude già via JS, qui aggiungiamo solo il feedback). */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999; /* sotto .sidebar (1000), sopra il resto */
}
.sidebar-backdrop.show {
  display: block;
}

/* Impedisce lo scroll della pagina sotto quando il drawer mobile è aperto */
body.sidebar-open-lock {
  overflow: hidden;
}

/* Tabbar mobile — sostituisce la sidebar sotto i 992px, per l'uso quotidiano
   da smartphone (agenda operatore, prima nota movimenti). Stessa idea della
   tabbar in layouts/mobile.ejs (pagina cattura scontrino), qui adattata ai
   colori dell'app desktop così non stona nel passaggio tra le due. */
.mobile-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #dee2e6;
  display: flex;
  z-index: 990; /* sotto .sidebar (1000): quando la sidebar è aperta la copre, non il contrario */
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}

.mobile-tabbar a {
  flex: 1;
  text-align: center;
  padding: 0.5rem 0 0.4rem;
  color: #6c757d;
  text-decoration: none;
  font-size: 0.72rem;
}

.mobile-tabbar a i {
  display: block;
  font-size: 1.3rem;
  margin-bottom: 0.1rem;
}

.mobile-tabbar a.active {
  color: var(--accent-color);
}

/* Promemoria dell'appuntamento su cui si sta lavorando (views/partials/_appuntamentoPinnato.ejs).
   Sta sopra la tabbar mobile, che occupa gia' il fondo schermo sotto i 992px. */
.appuntamento-pinnato {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1035; /* sopra il contenuto, sotto le modali (1055) */
  max-width: min(20rem, calc(100vw - 2rem));
}

.appuntamento-pinnato-corpo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem 0.6rem 0.7rem;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.15);
  text-decoration: none;
  color: inherit;
}

.appuntamento-pinnato-corpo:hover {
  border-color: var(--accent-color, #6c757d);
  color: inherit;
}

.appuntamento-pinnato-icona {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 110, 253, 0.1);
  color: var(--accent-color, #0d6efd);
}

.appuntamento-pinnato-testi {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.appuntamento-pinnato-titolo {
  font-weight: 600;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appuntamento-pinnato-sottotitolo {
  font-size: 0.72rem;
  color: #6c757d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appuntamento-pinnato-azione {
  font-size: 0.72rem;
  color: var(--accent-color, #0d6efd);
}

.appuntamento-pinnato-chiudi {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  line-height: 1;
  border: 1px solid #dee2e6;
  border-radius: 50%;
  background: #fff;
  color: #6c757d;
  box-shadow: 0 0.125rem 0.35rem rgba(0, 0, 0, 0.15);
}

@media (max-width: 991.98px) {
  .appuntamento-pinnato {
    bottom: 4.5rem;
  }
}

/* DataTables custom */
.dataTables_wrapper .dataTables_length select {
  width: auto;
}

/* Tom Select custom */
.ts-control {
  border-radius: 0.375rem;
}

/* Loading spinner */
.spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Utilities */
.cursor-pointer { cursor: pointer; }
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tooltip con testo multi-riga */
.tooltip-prewrap .tooltip-inner {
  white-space: pre-line;
  text-align: left;
  max-width: 300px;
}

/* Colore viola per stato SOSPESA */
.bg-purple-subtle { background-color: #e9d8fd !important; }
.text-purple { color: #6f42c1 !important; }
.bg-purple { background-color: #6f42c1 !important; color: #fff !important; }
.btn-purple { background-color: #6f42c1; color: #fff; border-color: #6f42c1; }
.btn-purple:hover { background-color: #5a32a3; color: #fff; border-color: #5a32a3; }
.btn-purple:disabled { background-color: #6f42c1; color: #fff; opacity: .65; }

/* ============================================================
   SCHEDA UTENTE — layout sticky, nav sidebar, card header
   ============================================================ */

/* Sticky wrapper: header utente + alerts */
.scheda-user-header-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* Alerts direttamente sotto l'header */
.scheda-alerts-wrap {
  padding: 0.5rem 0;
}

.scheda-alerts-wrap:empty { display: none; }

/* Sidebar nav verticale della scheda */
.scheda-nav-sidebar {
  position: sticky;
  top: calc(var(--scheda-sticky-offset, 180px) + 0.5rem);
  height: calc(100vh - var(--scheda-sticky-offset, 180px) - 1.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.scheda-nav-sidebar .nav-section {
  padding: 0.7rem 0.5rem 0.2rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  color: #6c757d;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.scheda-nav-sidebar .nav-link {
  padding: 0.35rem 0.65rem;
  color: #495057;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.scheda-nav-sidebar .nav-link:hover { background: #f1f3f5; color: #212529; }
.scheda-nav-sidebar .nav-link.active { background: var(--accent-color); color: #fff; }
.scheda-nav-sidebar .nav-link .badge { margin-left: auto; font-size: 0.65rem; }
.scheda-nav-sidebar .nav-link i { font-size: 0.95rem; width: 1.1rem; text-align: center; flex-shrink: 0; }

/* Sidebar Note collassabile */
.scheda-note-sidebar {
  position: sticky;
  top: calc(var(--scheda-sticky-offset, 180px) + 0.5rem);
  height: calc(100vh - var(--scheda-sticky-offset, 180px) - 1.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Card header compatto uniforme */
.scheda-card-header {
  padding: 0.2rem 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.6rem;
}

.scheda-card-header .scheda-card-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #495057;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: 1;
}

.scheda-card-header .scheda-card-title i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem;
  background: rgba(52, 152, 219, 0.1);
  border-radius: 50%;
  font-size: 0.72rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.scheda-card-header .scheda-card-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}

/* Rimozione margin bottom negativo dei nav-tabs nella card (non serve più) */
.scheda-tab-content {
  min-height: 300px;
  position: sticky;
  top: calc(var(--scheda-sticky-offset, 180px) + 0.5rem);
  height: calc(100vh - var(--scheda-sticky-offset, 180px) - 1.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.scheda-tab-content .card-body { font-size: 0.875rem; }

/* Alerts bar autonomo (sticky sotto header) */
.scheda-alerts-bar {
  position: sticky;
  z-index: 99;
  background: #fff;
}
.scheda-alerts-bar > #alerts-panel:empty { display: none; }
.scheda-alerts-bar > #alerts-panel:not(:empty) {
  border-bottom: 1px solid #dee2e6;
  padding: 0.4rem 0.75rem;
}

/* Layout a pannelli fissi (100vh, no scroll body) */
body.page-scheda-utente {
  overflow: hidden;
}
body.page-scheda-utente .main-content {
  height: 100vh;
  overflow: hidden;
}
body.page-scheda-utente main.container-fluid {
  height: calc(100vh - var(--header-height));
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex;
  flex-direction: column;
}
body.page-scheda-utente .scheda-user-header-wrap {
  position: relative;
  flex-shrink: 0;
}
body.page-scheda-utente .scheda-alerts-bar {
  position: static !important;
  top: auto !important;
  flex-shrink: 0;
}
body.page-scheda-utente .scheda-main-row {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  margin-top: 0 !important;
  align-items: stretch !important;
  --bs-gutter-y: 0; /* Rimuovi gutter verticale Bootstrap */
}
body.page-scheda-utente .scheda-main-row > [class*="col-"] {
  height: 100%;
  overflow: hidden;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
}
body.page-scheda-utente .scheda-nav-sidebar,
body.page-scheda-utente .scheda-note-sidebar {
  position: static;
  top: auto;
  height: 100%;
  flex: 1;
  min-height: 0;
}
body.page-scheda-utente .scheda-tab-content {
  position: static;
  top: auto;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
}
body.page-scheda-utente .scheda-nav-sidebar {
  padding-bottom: 0.5rem;
}
body.page-scheda-utente .scheda-azioni-bar {
  flex-shrink: 0;
  padding: 0.5rem 0;
  border-top: 1px solid #dee2e6;
  background: #fff;
  margin-top: 0 !important;
}

/* Header scheda compatto */
body.page-scheda-utente .user-card-header {
  padding: 0.65rem 1.25rem;
}
body.page-scheda-utente .user-card-header h2.h4 {
  font-size: 1.05rem;
  margin-bottom: 0.15rem !important;
}
body.page-scheda-utente .user-card-header p {
  margin-bottom: 0.15rem !important;
  font-size: 0.83rem;
}
body.page-scheda-utente #profile-photo-container,
body.page-scheda-utente #profile-photo-container img,
body.page-scheda-utente #profile-photo-placeholder,
body.page-scheda-utente .profile-photo-overlay {
  width: 64px !important;
  height: 64px !important;
}
body.page-scheda-utente #profile-photo-container {
  margin-right: 0.75rem !important;
}

/* Comunicazioni: occupa tutta l'altezza disponibile nel pannello.
   height:100% da solo non basta: la catena flex/height si interrompeva prima
   (.tab-pane e .comunicazioni-container non hanno un'altezza definita), quindi
   height:100% sulla card equivaleva ad auto e la card cresceva col contenuto
   dei messaggi, spingendo l'intera pagina in scroll invece di scrollare solo
   la chat. flex:1 chiude la catena tenendo conto anche dei banner sopra la
   card (email di benvenuto, notifiche programmate), che height:100% ignorava. */
/* .active, non solo l'ID: senza questo vincolo il display:flex vale SEMPRE, anche
   da tab-pane nascosto da Bootstrap (che userebbe display:none) — la regola sull'ID
   vince per specificità e tiene il pannello Comunicazioni visibile e alto quanto
   il contenitore anche quando non è quello selezionato, spingendo fuori dallo
   schermo tutti i tab-pane successivi nel markup (Chat Interna, Docente, Corsi,
   Utenza, Operatore): li si vedeva solo scrollando. */
body.page-scheda-utente #tab-comunicazioni.active {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.page-scheda-utente .comunicazioni-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.page-scheda-utente .comm-inbox-card {
  flex: 1;
  min-height: 0;
  height: auto !important;
}

/* ------------------------------------------------------------
   SCHEDA UTENTE SU SCHERMO PICCOLO
   Il layout a pannelli (100vh, tre colonne che scrollano per conto
   loro, body in overflow:hidden) e' pensato per il monitor della
   segreteria. Sul telefono lasciava una finestrella di poche righe
   dentro una pagina che non scorre: il contenuto c'era ma non si
   riusciva a leggerlo. Sotto lg si torna al flusso normale della
   pagina — si scorre tutto, come in qualsiasi altra schermata.
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  body.page-scheda-utente { overflow: auto; }
  body.page-scheda-utente .main-content,
  body.page-scheda-utente main.container-fluid {
    height: auto;
    overflow: visible;
  }
  body.page-scheda-utente main.container-fluid {
    display: block;
    padding-bottom: 1rem !important;
  }
  body.page-scheda-utente .scheda-main-row {
    overflow: visible;
    display: block;
  }
  body.page-scheda-utente .scheda-main-row > [class*="col-"] {
    height: auto;
    overflow: visible;
    display: block;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  body.page-scheda-utente .scheda-tab-content,
  body.page-scheda-utente .scheda-note-sidebar {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  /* La chat delle comunicazioni non puo' essere "alta quanto il pannello":
     il pannello non c'e' piu'. Le si da' un'altezza leggibile e scorre lei. */
  body.page-scheda-utente #tab-comunicazioni.active { height: auto; }
  body.page-scheda-utente .comunicazioni-container { height: 70vh; }

  /* L'intestazione con foto e recapiti resta in cima ma non si mangia
     mezzo schermo: sul telefono serve una riga di identificazione, non
     una copertina. */
  .scheda-user-header-wrap { position: static; box-shadow: none; }
  body.page-scheda-utente .user-card-header { padding: 0.6rem 0.75rem; }
  body.page-scheda-utente .user-card-header h2,
  body.page-scheda-utente .user-card-header h2.h3 { font-size: 1.05rem; }
  body.page-scheda-utente #profile-photo-container,
  body.page-scheda-utente #profile-photo-container img,
  body.page-scheda-utente #profile-photo-placeholder,
  body.page-scheda-utente .profile-photo-overlay {
    width: 48px !important;
    height: 48px !important;
  }
  body.page-scheda-utente #profile-photo-placeholder i { font-size: 1.4rem; }

  /* Le tabelle delle sezioni sono larghe: scorrono per conto loro invece
     di allargare la pagina. */
  body.page-scheda-utente .scheda-tab-content .table-responsive { -webkit-overflow-scrolling: touch; }
  body.page-scheda-utente .scheda-tab-content table { font-size: 0.8rem; }
  body.page-scheda-utente .scheda-tab-content .card-body { padding: 0.65rem; }

  /* Barra azioni in fondo: due pulsanti larghi invece di una riga stretta. */
  body.page-scheda-utente .scheda-azioni-bar {
    flex-wrap: wrap;
    gap: 0.5rem;
    position: static;
  }
  body.page-scheda-utente .scheda-azioni-bar > * { flex: 1 1 100%; }
  body.page-scheda-utente .scheda-azioni-bar .d-flex { flex-wrap: wrap; }
}

/* Alert pill compact (icona + titolo + tooltip) */
.alert-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.2rem 0.3rem 0.2rem 0.6rem; border-radius: 999px;
  font-size: 0.78rem; cursor: help; white-space: nowrap;
}
.alert-pill strong { font-weight: 600; }

/* Alert pill action — chip cliccabile dentro la pill */
.alert-pill-action {
  display: inline-flex; align-items: center; gap: 0.25rem;
  margin-left: 0.3rem;
  padding: 0.15rem 0.55rem;
  border: 0;
  border-left: 1px solid var(--pill-action-bd, rgba(0,0,0,0.15));
  background: transparent;
  font-size: 0.72rem; font-weight: 600;
  border-radius: 0 999px 999px 0;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.1s ease;
  line-height: 1;
}
.alert-pill-action:hover {
  background: var(--pill-action-bg, rgba(0,0,0,0.06));
}
.alert-pill-action:active { transform: scale(0.96); }
.alert-pill-action:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}
.alert-pill-action i { font-size: 0.85em; }

/* Azioni note come icone-link */
.nota-actions { display: inline-flex; gap: 0.5rem; flex-shrink: 0; }
.nota-action {
  font-size: 0.875rem;
  line-height: 1;
  text-decoration: none;
  transition: color 0.15s ease;
}
.nota-action:hover { text-decoration: none; }
.nota-edit:hover { color: var(--accent-color, #0d6efd) !important; }
.nota-delete:hover { color: #dc3545 !important; }

/* Note — Feed card style */
.nota-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
  margin-bottom: 0.6rem;
  overflow: hidden;
}
.nota-card:last-child { margin-bottom: 0; }
.nota-card.importante { border-color: rgba(220,53,69,0.35); }
.nota-card.avviso     { border-color: rgba(255,193,7,0.5); }

.nota-card-header {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.35rem 0.55rem;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}
.nota-card.importante .nota-card-header { background: #fff5f5; border-bottom-color: rgba(220,53,69,0.15); }
.nota-card.avviso .nota-card-header     { background: #fffdf0; border-bottom-color: rgba(255,193,7,0.3); }

.nota-card-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 0.58rem; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: #6c757d; letter-spacing: 0;
}
.nota-card.importante .nota-card-avatar { background: #dc3545; }
.nota-card.avviso .nota-card-avatar     { background: #d97706; }

.nota-card-meta {
  flex: 1; min-width: 0;
  display: flex; align-items: baseline; gap: 0.3rem;
  font-size: 0.72rem; overflow: hidden;
}
.nota-card-autore {
  font-weight: 600; color: #495057;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nota-card-data { color: #adb5bd; white-space: nowrap; flex-shrink: 0; }
.nota-card-lock { font-size: 0.65rem; color: #adb5bd; }

.nota-card-body {
  padding: 0.5rem 0.6rem;
  font-size: 0.875rem; color: #212529;
  white-space: pre-wrap; word-break: break-word; line-height: 1.55;
}

.nota-card .nota-actions { opacity: 0; transition: opacity 0.15s; flex-shrink: 0; }
.nota-card:hover .nota-actions { opacity: 1; }

/* Inline edit residenza */
.dati-editable { cursor: pointer; position: relative; }
.dati-editable:not(.editing):hover { background: #f8f9fa; }
.dati-editable.editing { background: #f8f9fa; padding: 0.25rem 0.5rem !important; }
.dati-section-sep {
  font-size: 0.68rem; text-transform: uppercase;
  color: #6c757d; font-weight: 700; letter-spacing: 0.06em;
  background: #f8f9fa; border-top: 1px solid #dee2e6;
  padding-top: 0.4rem !important; padding-bottom: 0.2rem !important;
}

.card-hover { transition: box-shadow 0.15s, transform 0.15s; }
.card-hover:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12) !important; transform: translateY(-2px); }

/* Autocomplete persona (TomSelect) dentro un .input-group, es. select persona +
   pulsante "Nuova lead" negli appuntamenti/ordini. TomSelect sostituisce il
   <select class="form-select"> con un <div class="ts-wrapper"> che NON eredita
   la classe .form-select: senza queste regole perde flex:1 1 auto/min-width:0
   di Bootstrap (.input-group>.form-select), quindi dopo una selezione il
   wrapper può riprendere la sua larghezza "naturale" e spingere/coprire il
   pulsante accanto invece di restare confinato nella sua colonna flex. */
.input-group > .ts-wrapper {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

/* ── Ricerca slot: sezioni per priorità di riempimento ─────────────────────
   Il motore marca gli orari che si attaccano a una lezione già fissata: quelli
   vanno mostrati per primi, sotto la loro intestazione. Vedi
   renderSlotSezioni() in public/js/ambra.js. */
.slot-sezione-titolo {
  font-size: .78rem; font-weight: 600; color: #495057;
  margin: .35rem 0 .4rem; display: flex; align-items: center; flex-wrap: wrap; gap: .25rem;
}
.slot-sezione-titolo:not(:first-child) { margin-top: .9rem; }
.slot-sezione-nota { font-weight: 400; color: #868e96; font-size: .72rem; }
/* Slot che non lascia buchi in agenda: bordo pieno sul lato che si attacca. */
.slot-attaccato { box-shadow: inset 3px 0 0 0 #198754; }

/* ── Orari tenuti da una trattativa aperta ─────────────────────────────────
   Un preventivo o un incontro conoscitivo tiene quell'ora finche' il cliente
   non risponde. Non e' un orario libero (niente verde, niente aria da "clicca
   e prenoti") ma nemmeno un buco: si vede, si legge chi lo tiene, e ci si fa
   avvisare quando si libera. Vedi renderSlotRiservati() in public/js/ambra.js. */
.slot-riservato-card {
  border: 1.5px dashed #b08800;
  background: #fffbea;
  border-radius: .5rem;
  padding: .4rem .6rem;
  min-width: 8.5rem;
  cursor: pointer;
  line-height: 1.2;
  transition: background-color .12s ease, border-color .12s ease;
}
.slot-riservato-card:hover,
.slot-riservato-card:focus-visible { background: #fff4cc; border-color: #8a6a00; outline: none; }
.slot-riservato-card .src-ora { font-weight: 600; font-size: .95rem; color: #6c5200; }
.slot-riservato-card .src-fine { font-size: .72rem; color: #8a6a00; }
.slot-riservato-card .src-aula { font-size: .7rem; color: #8a6a00; }
.slot-riservato-card .src-chi {
  font-size: .7rem; color: #6c5200; margin-top: .2rem;
  max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot-riservato-card .src-fino-al { font-size: .66rem; color: #8a6a00; font-style: italic; }

/* ── "Avvisami quando si libera" ───────────────────────────────────────────
   Sugli orari che la ricerca scarta perche' occupati e su quelli che non
   reggono tutte le settimane. Non e' un orario prenotabile: e' un promemoria
   che si registra, quindi ha l'aria di un'etichetta, non di un pulsante di
   conferma. Vedi renderScartati() e applicaRicorrenza() in modal-cerca-slot.js. */
.cs-scartato {
  display: inline-block;
  border: 1px solid #d0d5dd;
  border-radius: .35rem;
  padding: .05rem .35rem;
  margin: .1rem .15rem 0 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.cs-scartato:hover,
.cs-scartato:focus-visible {
  background: #eef4ff;
  border-color: #3A84A0;
  color: #2c6379;
  outline: none;
}
.cs-ric-avvisami {
  margin-left: .3rem;
  cursor: pointer;
  opacity: .65;
}
.cs-ric-avvisami:hover,
.cs-ric-avvisami:focus-visible { opacity: 1; outline: none; }

/* ── Editor di testo formattato (argomento, compiti, note della lezione) ───
   Quill dichiara height:100% su .ql-container e .ql-editor: dentro le colonne
   flex di Bootstrap quel 100% si risolve sull'altezza della riga e i riquadri
   si sormontano. L'altezza la governa l'editor, non il contenitore. */
.rich-editor-wrap .ql-toolbar.ql-snow {
  border-radius: .375rem .375rem 0 0;
  padding: 6px 8px;
}
.rich-editor-wrap .ql-container.ql-snow {
  height: auto;
  border-radius: 0 0 .375rem .375rem;
  font-family: inherit;
  font-size: inherit;
}
.rich-editor-wrap .ql-editor {
  height: auto;
  min-height: 90px;
  max-height: 40vh;
  overflow-y: auto;
}
.rich-editor-wrap--alto .ql-editor { min-height: 150px; }
.rich-editor-wrap .ql-editor.ql-blank::before { font-style: normal; color: #868e96; }

/* ---- Alfabeto fonetico (IPA) ----
   Il docente scrive trascrizioni IPA nel resoconto e nei compiti, e lo
   studente deve leggerle uguali su qualsiasi telefono: i font di sistema
   hanno quasi tutti i simboli, ma sui dispositivi meno recenti alcuni
   diacritici mancano o finiscono fuori posto. "Ambra IPA" è un sottoinsieme
   di Noto Sans (OFL, vedi /fonts/ipa/OFL.txt) con i soli blocchi IPA: grazie a
   unicode-range il resto del testo resta nel font di sistema, e il file si
   scarica solo se nella pagina compare un simbolo IPA. */
@font-face {
  font-family: "Ambra IPA";
  src: url("/fonts/ipa/ipa-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0250-02FF, U+0300-036F, U+1D00-1DFF, U+2016, U+203F, U+207F, U+25CC, U+2C71, U+A700-A71F;
}
@font-face {
  font-family: "Ambra IPA";
  src: url("/fonts/ipa/ipa-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0250-02FF, U+0300-036F, U+1D00-1DFF, U+2016, U+203F, U+207F, U+25CC, U+2C71, U+A700-A71F;
}
/* ---- Simboli musicali ----
   Figure, pause, chiavi, dinamiche (Unicode U+1D100-1D1FF) mancano su molti
   telefoni: "Ambra Musica" è un sottoinsieme di Noto Music (OFL, vedi
   /fonts/musica/OFL.txt) con i soli simboli musicali, scaricato solo se
   nella pagina ce n'è uno. */
@font-face {
  font-family: "Ambra Musica";
  src: url("/fonts/musica/musica-400.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+1D100-1D1FF, U+2669-266F;
}

/* Solo dove il docente scrive o si legge quello che ha scritto: il resto del
   gestionale non ne ha bisogno. */
.rich-text,
.rich-editor-wrap .ql-container {
  font-family: "Ambra IPA", "Ambra Musica", var(--bs-body-font-family);
}

/* ── Testo scritto con l'editor formattato ─────────────────────────────────
   Il resoconto della lezione (argomento, compiti, note) arriva come HTML da
   Quill: i paragrafi vanno stretti fra loro, altrimenti nelle schede di sola
   lettura si aprono buchi che sembrano campi vuoti. */
.rich-text > p { margin-bottom: .35rem; }
.rich-text > p:last-child { margin-bottom: 0; }
.rich-text ul, .rich-text ol { margin-bottom: .35rem; padding-left: 1.25rem; }

/* Riserve slot: elenco per docente (partial riserve-slot/_elenco) */
.rs-gruppo, .rs-lista { border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-body-bg); margin-bottom: .75rem; }
.rs-gruppo > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; user-select: none; }
.rs-gruppo > summary::-webkit-details-marker { display: none; }
.rs-gruppo > summary:hover { background: var(--bs-tertiary-bg); }
.rs-gruppo[open] > summary { border-bottom: 1px solid var(--bs-border-color); }
.rs-gruppo .rs-freccia { font-size: .8rem; color: var(--bs-secondary-color); transition: transform .15s ease; }
.rs-gruppo[open] .rs-freccia { transform: rotate(90deg); }
.rs-riga { display: flex; align-items: flex-start; gap: .75rem; padding: .6rem .9rem; border-top: 1px solid var(--bs-border-color-translucent); }
.rs-gruppo > summary + .rs-riga, .rs-lista > .rs-riga:first-child { border-top: 0; }
.rs-riga .rs-icona { width: 1.25rem; flex-shrink: 0; text-align: center; color: var(--bs-secondary-color); padding-top: .1rem; }
.rs-riga .rs-corpo { flex: 1; min-width: 0; }
.rs-riga .rs-quando { font-weight: 600; font-variant-numeric: tabular-nums; }
.rs-riga .rs-dove { color: var(--bs-secondary-color); }
.rs-riga .rs-chi { font-size: .875rem; color: var(--bs-secondary-color); margin-top: .15rem; }
.rs-riga .rs-chi a { color: var(--bs-body-color); }
.rs-riga .rs-azioni { flex-shrink: 0; display: flex; align-items: center; gap: .4rem; }
.rs-riga.rs-spenta .rs-corpo { opacity: .75; }

/* ---- Spartiti nei testi (js/spartito-vista.js) ----
   Il disegno di abcjs usa currentColor: segue il colore del testo, quindi
   anche il tema scuro. */
.spartito {
  margin: .5rem 0;
  padding: .25rem .5rem;
  border: 1px solid var(--spartito-bordo, rgba(127, 127, 127, .3));
  border-radius: .375rem;
  color: inherit;
  overflow: hidden;
}
.spartito .spartito-svg { width: 100%; }