/* ============================= iuready | agenda.css | v36 | 2026-10-30 ==================================================== */
/* v36 2026-10-30  Telefono: contenitore del calendario trasparente; il suo fondo bianco squadrato copriva gli angoli         */
/*                 arrotondati dell'area degli appuntamenti.                                                                  */
/* v35 2026-10-30  Telefono: area degli appuntamenti con angoli arrotondati di 4px come i selettori; tolta la linea sotto     */
/*                 la barra, che tagliava dritti gli angoli superiori.                                                        */
/* v34 2026-10-30  Telefono: niente cornice attorno al calendario (bordi della barra e dell'area degli appuntamenti           */
/*                 tolti, resta la linea sotto la barra); periodo centrato in verticale come la vista (table-cell).           */
/* v33 2026-10-30  Telefono: periodo largo quanto "Nuovo" e scelta della vista larga quanto il selettore della fascia.        */
/* v32 2026-10-30  Telefono: periodo e scelta della vista allineati ai bordi di "Nuovo" e del selettore della fascia          */
/*                 (fila dei controlli della barra allargata di 1px per lato, sopra il bordo della barra).                    */
/* v31 2026-10-30  Telefono: bordi dei campi della scheda e dell'elenco dei partecipanti in grigio scuro                      */
/*                 (--elisa-text-secondary) invece che quasi neri.                                                            */
/* v30 2026-10-30  Spunte dell'elenco dei partecipanti nere (--elisa-text-main) invece che blu.                               */
/* v29 2026-10-30  Scheda sul telefono senza il limite di altezza del tema (.prompt-list max-height 100vh - 120px):           */
/*                 l'altezza a tutto schermo la gestisce agenda.js.                                                           */
/* v28 2026-10-30  Scheda sul telefono: logo a 10px dal bordo superiore, senza spazio sotto, contenuto che parte a 4px        */
/*                 (prima 20px, 4px e 15px).                                                                                  */
/* v27 2026-10-30  Scheda dell'appuntamento: date affiancate senza uscire dallo schermo (min-width 0), elenco dei             */
/*                 partecipanti con il bordo dei campi; sul telefono etichette 14px a 2px dal riquadro, campi con             */
/*                 spazio interno 6px, freccine senza fondo grigio, logo 180px a 20px dal bordo.                              */
/* v26 2026-10-30  Vista Agenda: tolto il nome della risorsa ("undefined:") davanti al tipo dell'appuntamento; orario         */
/*                 e tipo vanno a capo se non stanno su una riga.                                                             */
/* v25 2026-10-29  Partecipanti (.agdTag) con il carattere degli altri campi (16px, peso 500, colore del campo) e             */
/*                 spaziatura delle lettere -0,3px; prima 13px.                                                               */
/* v24 2026-10-29  Celle del calendario sotto il mouse, attive o con il cursore in grigio chiaro (--elisa-bg-hover)           */
/*                 invece che quasi nere.                                                                                     */
/* v23 2026-10-29  Selettore della fascia oraria (.agdFascia, .agdFasciaCella): accanto a Nuovo nella riga sopra il           */
/*                 calendario (Nuovo flex 1 1 0) o in una cella della barra; testo centrato; sul telefono voce non            */
/*                 scelta in grigio scuro.                                                                                    */
/* v22 2026-10-29  Partecipanti come testo semplice .agdTag (13px, separati da virgola) al posto delle etichette con          */
/*                 riquadro e x (tolte le regole di .dx-tag-content e .dx-tag-remove-button).                                 */
/* v21 2026-10-28  "Nuovo impegno" (#agdClienteNuovo) con le regole di "Nuovo appuntamento": testo centrato, tutta la         */
/*                 riga quando resta sopra il calendario, zona centrale della barra quando ci sta.                            */
/* v20 2026-10-28  Telefono: scritte del periodo e della scelta della vista con --elisa-text-secondary (prima                 */
/*                 --elisa-text-on-light del tema, #dfdfdf nel tema chiaro, poco leggibile).                                  */
/* v19 2026-10-28  Testo dei pulsanti della barra con overflow visibile (la g di "Agenda" era tagliata); testo di             */
/*                 "Nuovo appuntamento" (.agdTestoPulsante) centrato sulle lettere con text-box.                              */
/* v18 2026-10-28  Barra del calendario: testo dei pulsanti con text-box trim-both cap alphabetic, centrato sulle             */
/*                 lettere e allineato alle frecce.                                                                           */
/* v17 2026-10-28  Barra del calendario: pulsanti senza i margini diversi sopra/sotto del tema (contenuto centrato dal        */
/*                 flex) e frecce del periodo e della vista disegnate in SVG centrato, al posto del carattere DXIcons.        */
/* v16 2026-10-28  "Nuovo appuntamento" a tutta larghezza ogni volta che resta nella riga sopra il calendario, su             */
/*                 qualunque schermo (prima solo sul telefono, regola in @media max-width 480px).                             */
/* v15 2026-10-28  "Nuovo appuntamento" con testo centrato in orizzontale e in verticale su tutti gli schermi (anche          */
/*                 nella zona centrale della barra del calendario, dove lo porta agenda.js v17).                              */
/* v14 2026-10-27  Pagina team (body.agdTeam): #cntAgenda fino in fondo allo schermo (bottom) invece dell'altezza che         */
/*                 lascia lo spazio alla barra dei menu della PWA, che nella pagina team non c'e'.                            */
/* v13 2026-10-27  Telefono: testo di "Nuovo appuntamento" centrato nel pulsante largo (justify-content: center).             */
/* v12 2026-10-27  Telefono: pulsante "Nuovo appuntamento" (#agdStudioNuova) largo tutta la riga.                             */
/* v11 2026-10-27  (sostituisce la v10, non installata) Pagina team: stile dei tre puntini verticali #agdMenuPunti al         */
/*                 posto del cerchio delle iniziali. Come nella v10: telefono, barra delle agende su una riga; scelta         */
/*                 della vista con freccina e testo centrati in verticale, su tutti gli schermi.                              */
/* v9  2026-10-27  Telefono: barra delle agende senza larghezza minima del periodo e su due righe quando serve; nella         */
/*                 scheda, date con il selettore del telefono senza il riquadro vuoto del pulsante.                           */
/* v8  2026-10-22  Partecipanti del team: etichette centrate in altezza (stesso spazio sopra e sotto).                        */
/* v7  2026-10-22  Partecipanti del team: campo con il fondo degli altri campi ed etichette con bordo, angoli arrotondati     */
/*                 e X per toglierle (struttura di dx.light.css, colori del tema iuready).                                    */
/* v6  2026-10-21  Scheda dell'appuntamento: tendine sopra il modale (.agdDropdown), icona del calendario sul pulsante        */
/*                 delle date, campo attivo con bordo --elisa-border-hard invece del blu --elisa-border-focus.                */
/* v5  2026-10-21  Tolte .agdBtn / .agdBtnPrimario: i pulsanti delle agende usano le classi della PWA (dx-button-default,     */
/*                 dx-button-abort, btn-sessione-azione). Tolte le regole agdTeam... della prima pagina team, non piu' usate. */
/* v4  2026-10-21  .agdBtnPrimario con i colori effettivi dei pulsanti principali iuready (come Invia/Entra del login):       */
/*                 fondo e bordo --elisa-border-hard, testo --elisa-text-inverse. --elisa-accent era il blu di DevExtreme.    */
/* v3  2026-10-21  .agdBtnPrimario come i pulsanti principali della PWA: fondo --elisa-accent, testo --elisa-bg-hover.        */
/* v2  2026-10-20  Pagina team/agenda.html: barra in alto (agdTeamBar), schermata di accesso (agdTeamLogin, agdTeamCard,      */
/*                 campi e messaggi), area dell'agenda a tutta pagina (agdTeamMain); su telefono barra e margini ridotti.     */
/* v1  2026-10-20  Prima versione. Sezione #cntAgenda (agenda dello studio, solo avvocati) posizionata come Utilità/Conto, */
/*                 vista cliente #agdClienteView dentro Utilità, barra pulsanti, modale della call. Classi con prefisso agd, */
/*                 colori dai token del tema (chiaro/scuro).                                                                 */
/* ========================================================================================================================== */

/* ---------------- contenitore della sezione avvocati (stesso rettangolo di Utilità) ---------------- */
#cntAgenda {
 display: none;
 position: absolute;
 top: 60px;
 left: 2%;
 width: 96%;
 height: calc(100% - 120px);
 padding: 0;
 overflow: hidden;
 border-radius: 12px;
 background: transparent;
 box-sizing: border-box;
 color: var(--elisa-text-main);
}
html[data-elisa-nav="left"] #cntAgenda {
 left: 0;
 width: calc(100% - 24px);
 height: calc(100% - 84px);
}
@media (max-width: 650px) {
 #cntAgenda { height: calc(100dvh - 104px); }
}
/* Pagina team (body.agdTeam): non c'e' la barra dei menu della PWA in basso, quindi l'agenda arriva fino in fondo allo
   schermo, sopra la zona della barra Home del telefono. */
body.agdTeam #cntAgenda {
 height: auto;
 bottom: calc(12px + env(safe-area-inset-bottom));
}

.agdDash {
 --agdTitleSize: clamp(1.25rem, 0.95rem + 1.3vw, 1.5rem);
 position: relative;
 width: 100%;
 height: 100%;
 min-height: 0;
 box-sizing: border-box;
 display: flex;
 flex-direction: column;
 padding: 16px;
 overflow: hidden;
 background: var(--elisa-bg-panel);
 border-radius: 12px;
 font-family: 'Zen Kaku Gothic Antique', sans-serif;
}
.agdDashHead {
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.agdDash h2.agdDashTitle {
 margin: 0;
 padding: 0;
 border: 0;
 font-family: 'Space Grotesk', sans-serif;
 font-size: var(--agdTitleSize);
 font-weight: 400;
 line-height: 1.2;
 color: var(--elisa-text-main);
 letter-spacing: normal;
 text-transform: none;
}
@media (max-width: 480px) {
 .agdDash { padding: 12px; }
}

/* ---------------- vista cliente dentro Utilità ---------------- */
#agdClienteView:not([hidden]) {
 display: flex;
 flex-direction: column;
 flex: 1 1 auto;
 min-height: 0;
}

/* ---------------- barra pulsanti ---------------- */
.agdToolbar {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin: 14px 0 12px;
}

/* ---------------- scheduler ---------------- */
.agdScheduler {
 flex: 1 1 auto;
 min-height: 0;
 font-family: Inter, 'Segoe UI', Arial, sans-serif;
}

/* ---------------- modale della call / dell'impegno ---------------- */
.agdModaleTitolo {
 margin: 0 0 12px;
 text-align: center;
 font-size: 16px;
 font-weight: 500;
 letter-spacing: 0.5px;
}
.agdModaleAzioni {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-top: 20px;
}
.agdModaleBtn {
 flex: 1 1 0;
 text-align: center;
 justify-content: center;
 letter-spacing: -0.2px;
}
.agdInfo {
 display: flex;
 flex-direction: column;
 gap: 8px;
 font-size: 14px;
}
.agdInfo > div {
 display: flex;
 gap: 12px;
 align-items: baseline;
}
.agdInfoEtichetta {
 min-width: 80px;
 opacity: 0.75;
}
.agdInfo a {
 color: inherit;
 text-decoration: underline;
 word-break: break-all;
}

/* ---------------- scheda dell'appuntamento (modale jBox .agdModale) ---------------- */
/* Tendine e calendario delle date sopra il modale jBox (z-index 10000), come skuDropdown nella PWA. */
.agdDropdown.dx-overlay-wrapper {
 z-index: 10010 !important;
}
/* Icona del calendario sul pulsante delle date: regola di css/dx.light.css (DevExtreme 22.1.6) che elisapwa.css non ha. */
.agdModale .dx-datebox-calendar .dx-dropdowneditor-icon::before {
 content: "\f026";
}
/* Campo attivo senza il bordo blu (--elisa-border-focus di elisapwa.css): stesso bordo del campo non attivo. */
.agdModale .dx-form .dx-texteditor.dx-state-focused.dx-editor-outlined {
 border-color: var(--elisa-border-hard) !important;
}
/* Partecipanti del team (dxTagBox): fondo del campo come gli altri campi, etichette con la struttura di css/dx.light.css
   (DevExtreme 22.1.6, che elisapwa.css non ha) e i colori del tema iuready. */
.agdModale .dx-tagbox.dx-editor-outlined {
 background: var(--elisa-bg-main);
}
.agdModale .dx-tagbox .dx-texteditor-input {
 background: transparent;
}
.agdModale .dx-tag {
 max-width: calc(100% - 1px);
 display: inline-block;
 align-self: center;
}
/* Etichette centrate in altezza: stesso spazio sopra e sotto. */
.agdModale .dx-tag-container.dx-texteditor-input-container {
 padding: 0 4px 0 0;
 align-items: center;
}
/* Partecipanti scelti come testo semplice (tagTemplate di agenda.js): "Danilo Q., Federico V.", senza riquadro e senza x
   (si tolgono togliendo la spunta dall'elenco). Stesso carattere degli altri campi (dimensione e colore ereditati dal
   campo, peso 500 come il testo dei campi) con le lettere appena piu' strette. */
.agdModale .agdTag {
 display: inline-block;
 padding: 0;
 font-size: inherit;
 font-weight: 500;
 color: inherit;
 letter-spacing: -0.3px;
 white-space: nowrap;
 cursor: default;
}
.agdModale .dx-tag:first-child .agdTag {
 padding-left: 8px;
}
/* Dal secondo nome in poi: virgola e spazio davanti ("Danilo Q., Federico V."). Le etichette sono elementi flex
   attaccati, senza spazi fra loro, quindi la virgola resta subito dopo il nome precedente. */
.agdModale .dx-tag ~ .dx-tag .agdTag::before {
 content: ", ";
 white-space: pre;
}

/* Celle del calendario sotto il mouse, attive o con il cursore: grigio chiaro del tema (--elisa-bg-hover) al posto del
   colore del testo (--elisa-text-main, quasi nero) che elisapwa.css assegna a questi stati. */
#cntAgenda .dx-scheduler-date-table-cell.dx-state-hover,
#cntAgenda .dx-scheduler-date-table-cell.dx-state-focused,
#cntAgenda .dx-scheduler-date-table-cell.dx-state-active,
#agdClienteView .dx-scheduler-date-table-cell.dx-state-hover,
#agdClienteView .dx-scheduler-date-table-cell.dx-state-focused,
#agdClienteView .dx-scheduler-date-table-cell.dx-state-active {
 background-color: var(--elisa-bg-hover);
}

/* Vista Agenda: sotto l'orario DevExtreme scrive il tipo come "nome risorsa: valore"; il nome non serve (usciva
   "undefined:"), resta solo il valore ("Riunione interna"). Orario e tipo vanno a capo se non stanno sulla stessa riga
   (sul telefono il tipo usciva tagliato). */
#cntAgenda .dx-scheduler-appointment-resource-item > div:not(.dx-scheduler-appointment-resource-item-value),
#agdClienteView .dx-scheduler-appointment-resource-item > div:not(.dx-scheduler-appointment-resource-item-value) {
 display: none;
}
#cntAgenda .dx-scheduler-agenda .dx-scheduler-appointment-content-details,
#agdClienteView .dx-scheduler-agenda .dx-scheduler-appointment-content-details {
 flex-wrap: wrap;
}

/* ---------------- barra delle agende ---------------- */
/* "Nuovo appuntamento": il pulsante e' flex (regola .dx-button del tema), testo centrato in orizzontale e in verticale
   su qualunque schermo, sia nella riga sopra il calendario sia nella zona centrale della barra. */
#agdStudioNuova,
#agdClienteNuovo {
 justify-content: center;
 align-items: center;
}
/* Testo del pulsante centrato sulle lettere (riquadro fra la cima delle maiuscole e la linea di base), come nella barra
   del calendario. */
#agdStudioNuova .agdTestoPulsante,
#agdClienteNuovo .agdTestoPulsante {
 line-height: 1;
 text-box: trim-both cap alphabetic;
}
/* Quando resta nella riga sopra il calendario (telefono, iPad in verticale), su qualunque schermo occupa tutta la riga
   (la riga e' flex). Nella barra del calendario invece resta largo quanto il suo testo. */
#cntAgenda .agdToolbar #agdStudioNuova,
#agdClienteView .agdToolbar #agdClienteNuovo {
 flex: 1 1 0;
 min-width: 0;
}
/* Selettore della fascia oraria [ 8-20 | 24 h ]: nella riga sopra il calendario accanto a "Nuovo", largo quanto i suoi
   due pulsanti; su schermo largo agenda.js lo sposta nella barra, in una cella prima delle viste. */
.agdToolbar .agdFascia {
 flex: 0 0 auto;
}
.agdFasciaCella {
 display: table-cell;
 vertical-align: middle;
 padding-right: 8px;
}
/* Pulsanti del selettore come quelli della barra: contenuto centrato dal flex, testo centrato sulle lettere. */
.agdFascia .dx-button {
 padding-bottom: 0;
}
.agdFascia .dx-button .dx-button-content {
 padding-top: 0;
 padding-bottom: 0;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
}
.agdFascia .dx-button-text {
 line-height: 1;
 text-box: trim-both cap alphabetic;
 overflow: visible;
}
/* Zona centrale della barra del calendario quando contiene "Nuovo appuntamento": occupa tutta l'altezza della barra e
   lo spazio fra periodo e vista (left/right misurati da agenda.js), e centra il pulsante in entrambe le direzioni.
   DevExtreme mette su questa zona, in linea, margini e float calcolati quando era vuota (larghezza zero): si annullano
   con !important, l'unico modo di prevalere su uno stile in linea. */
#cntAgenda .dx-scheduler-header .dx-toolbar-center.agdCentroNuovo,
#agdClienteView .dx-scheduler-header .dx-toolbar-center.agdCentroNuovo {
 position: absolute;
 top: 0;
 bottom: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 !important;
 float: none !important;
}
/* Scelta della vista: freccina e testo centrati in verticale. Il tema mette al pulsante un margine solo sotto
   (2px) e al contenuto margini diversi sopra e sotto: li tolgo e il contenuto, gia' flex con align-items center,
   occupa tutta l'altezza del pulsante. */
#cntAgenda .dx-scheduler-view-switcher .dx-button,
#agdClienteView .dx-scheduler-view-switcher .dx-button {
 padding-bottom: 0;
}
#cntAgenda .dx-scheduler-view-switcher .dx-button-content,
#agdClienteView .dx-scheduler-view-switcher .dx-button-content {
 padding-top: 0;
 padding-bottom: 0;
 height: 100%;
}

/* Barra del calendario, frecce del periodo (‹ ›) e della scelta della vista (▾).
   - Pulsanti: il tema mette 2px di margine solo sotto e margini diversi sopra e sotto al contenuto; si tolgono e il
     contenuto occupa tutta l'altezza, centrato dal flex.
   - Frecce: disegnate con un'immagine SVG centrata nel riquadro dell'icona (maschera colorata con currentColor, quindi
     segue il tema), al posto del carattere DXIcons, la cui forma sull'iPhone esce piu' in alto del centro. */
#cntAgenda .dx-scheduler-header .dx-button,
#agdClienteView .dx-scheduler-header .dx-button {
 padding-bottom: 0;
}
#cntAgenda .dx-scheduler-header .dx-button .dx-button-content,
#agdClienteView .dx-scheduler-header .dx-button .dx-button-content {
 padding-top: 0;
 padding-bottom: 0;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
}
/* Testo dei pulsanti (periodo, vista): riquadro del testo ritagliato fra la cima delle maiuscole e la linea di base
   (text-box), cosi' il flex centra le lettere e non lo spazio vuoto sopra e sotto che il carattere riserva; prima le
   lettere stavano piu' in basso del centro e la freccia, centrata davvero, sembrava piu' in alto. */
#cntAgenda .dx-scheduler-header .dx-button-text,
#agdClienteView .dx-scheduler-header .dx-button-text {
 line-height: 1;
 text-box: trim-both cap alphabetic;
 overflow: visible;   /* il tema lo taglia: con il riquadro ritagliato tagliava le code delle lettere (la g di Agenda) */
}
#cntAgenda .dx-scheduler-header .dx-icon-chevronprev,
#cntAgenda .dx-scheduler-header .dx-icon-chevronnext,
#cntAgenda .dx-scheduler-header .dx-icon-spindown,
#agdClienteView .dx-scheduler-header .dx-icon-chevronprev,
#agdClienteView .dx-scheduler-header .dx-icon-chevronnext,
#agdClienteView .dx-scheduler-header .dx-icon-spindown {
 background-color: currentColor;
 -webkit-mask-position: center;
 mask-position: center;
 -webkit-mask-repeat: no-repeat;
 mask-repeat: no-repeat;
 -webkit-mask-size: 14px 14px;
 mask-size: 14px 14px;
}
#cntAgenda .dx-scheduler-header .dx-icon-chevronprev::before,
#cntAgenda .dx-scheduler-header .dx-icon-chevronnext::before,
#cntAgenda .dx-scheduler-header .dx-icon-spindown::before,
#agdClienteView .dx-scheduler-header .dx-icon-chevronprev::before,
#agdClienteView .dx-scheduler-header .dx-icon-chevronnext::before,
#agdClienteView .dx-scheduler-header .dx-icon-spindown::before {
 content: none;
}
#cntAgenda .dx-scheduler-header .dx-icon-chevronprev,
#agdClienteView .dx-scheduler-header .dx-icon-chevronprev {
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M8 2L4 6l4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M8 2L4 6l4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#cntAgenda .dx-scheduler-header .dx-icon-chevronnext,
#agdClienteView .dx-scheduler-header .dx-icon-chevronnext {
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#cntAgenda .dx-scheduler-header .dx-icon-spindown,
#agdClienteView .dx-scheduler-header .dx-icon-spindown {
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Scheda dell'appuntamento: Inizio e Fine affiancate in un gruppo a 2 colonne. Le colonne del form sono flex con
   larghezza minima automatica e il campo data ha una larghezza propria: senza min-width 0 le due date uscivano dallo
   schermo invece di dividersi lo spazio. */
.agdModale .dx-box-item-content,
.agdModale .dx-datebox .dx-texteditor-input {
 min-width: 0;
}
/* Spunte dell'elenco dei partecipanti nere (colore del testo) invece che nel colore d'accento del tema (blu). */
.agdModale .agdListaPartecipanti .dx-checkbox-icon::before,
.agdModale .agdListaPartecipanti .dx-checkbox-checked .dx-checkbox-icon::before {
 color: var(--elisa-text-main);
}
/* Partecipanti sul telefono: elenco a scorrimento (dxList) con lo stesso bordo dei campi. */
.agdModale .agdListaPartecipanti {
 border: 1px solid rgb(21, 21, 21);
 border-color: var(--elisa-text-main);
 border-radius: 4px;
 background: var(--elisa-bg-main);
}

/* ---------------- telefono ---------------- */
@media (max-width: 480px) {
 /* Niente cornice attorno al calendario: tolti i bordi della barra e i bordi laterali e inferiore dell'area degli
    appuntamenti (anche la linea sotto la barra, che tagliava dritto gli angoli arrotondati dell'area). Senza il bordo
    laterale della barra, periodo e scelta della vista sono allineati ai bordi di "Nuovo" e del selettore 8-20 / 24 h. */
 #cntAgenda .dx-scheduler-header,
 #agdClienteView .dx-scheduler-header {
  border: 0;
 }
 #cntAgenda .dx-scheduler-work-space,
 #agdClienteView .dx-scheduler-work-space {
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  /* Angoli arrotondati come i selettori (4px); l'area ha gia' overflow hidden, il contenuto segue gli angoli. */
  border-radius: 4px;
 }
 /* Il contenitore del calendario ha anche lui il fondo bianco, squadrato, che riempiva gli angoli arrotondati
    dell'area: trasparente, cosi' negli angoli si vede il grigio del pannello. */
 #cntAgenda .dx-scheduler-container,
 #agdClienteView .dx-scheduler-container {
  background-color: transparent;
 }
 /* Periodo largo quanto "Nuovo" (la scritta del periodo prende lo spazio fra le frecce) e scelta della vista larga
    quanto il selettore 8-20 / 24 h: larghezze misurate da agenda.js (posizionaNuovo). */
 /* La voce resta una cella di tabella centrata in verticale come la scelta della vista (con display flex saliva di
    2px); dentro, i contenitori flex portano i pulsanti alla larghezza della voce. */
 #cntAgenda .dx-scheduler-navigator,
 #agdClienteView .dx-scheduler-navigator {
  display: table-cell;
  vertical-align: middle;
  width: var(--agdLargNuovo, auto);
 }
 #cntAgenda .dx-scheduler-navigator .dx-toolbar-item-content,
 #cntAgenda .dx-scheduler-navigator .dx-buttongroup,
 #cntAgenda .dx-scheduler-navigator .dx-buttongroup-wrapper,
 #agdClienteView .dx-scheduler-navigator .dx-toolbar-item-content,
 #agdClienteView .dx-scheduler-navigator .dx-buttongroup,
 #agdClienteView .dx-scheduler-navigator .dx-buttongroup-wrapper {
  display: flex;
  width: 100%;
 }
 #cntAgenda .dx-scheduler-navigator .dx-scheduler-navigator-caption,
 #agdClienteView .dx-scheduler-navigator .dx-scheduler-navigator-caption {
  flex: 1 1 auto;
 }
 #cntAgenda .dx-scheduler-view-switcher .dx-dropdownbutton,
 #cntAgenda .dx-scheduler-view-switcher .dx-buttongroup,
 #cntAgenda .dx-scheduler-view-switcher .dx-dropdownbutton .dx-button,
 #agdClienteView .dx-scheduler-view-switcher .dx-dropdownbutton,
 #agdClienteView .dx-scheduler-view-switcher .dx-buttongroup,
 #agdClienteView .dx-scheduler-view-switcher .dx-dropdownbutton .dx-button {
  width: var(--agdLargFascia, auto);
 }
 /* Scheda dell'appuntamento sul telefono: etichette 14px piu' vicine al riquadro, campi con meno spazio interno,
    freccine delle tendine senza fondo grigio in ogni stato, logo piu' grande e piu' staccato dal bordo. */
 .agdModale .dx-field-item-label-text {
  font-size: 14px;
 }
 .agdModale .dx-field-item-label.dx-field-item-label-location-top {
  margin-bottom: 2px;
 }
 /* Il tema (elisapwa.css) impone lo spazio interno dei campi con !important (8px 7px): per ridurlo serve !important.
    L'altezza fissa del tema (39px) diventa automatica, cosi' il riquadro si accorcia con lo spazio interno. */
 .agdModale .dx-texteditor.dx-editor-outlined {
  height: auto;
 }
 /* Bordi dei campi e dell'elenco dei partecipanti in grigio scuro (--elisa-text-secondary). Il tema li colora con
    --elisa-border-hard e !important, anche al passaggio del mouse e con il cursore: per cambiarli serve !important. */
 .agdModale .dx-form .dx-texteditor.dx-editor-outlined,
 .agdModale .dx-form .dx-texteditor.dx-state-hover.dx-editor-outlined,
 .agdModale .dx-form .dx-texteditor.dx-state-focused.dx-editor-outlined,
 .agdModale .dx-form .dx-texteditor.dx-state-active.dx-editor-outlined,
 .agdModale .agdListaPartecipanti {
  border-color: var(--elisa-text-secondary) !important;
 }
 .agdModale .dx-texteditor.dx-editor-outlined .dx-texteditor-input,
 .agdModale .dx-texteditor.dx-editor-outlined .dx-placeholder::before {
  padding: 6px !important;
 }
 /* Il grigio dietro la freccina e' il fondo della tendina stessa (il tema le da' --elisa-bg-hover), che si vede dove non
    c'e' il campo di testo: fondo trasparente, cosi' resta il bianco della scheda. */
 .agdModale .dx-dropdowneditor.dx-editor-outlined,
 .agdModale .dx-dropdowneditor-button,
 .agdModale .dx-dropdowneditor-button .dx-button-content,
 .agdModale .dx-dropdowneditor.dx-state-hover .dx-dropdowneditor-button,
 .agdModale .dx-dropdowneditor.dx-state-focused .dx-dropdowneditor-button,
 .agdModale .dx-dropdowneditor.dx-dropdowneditor-active .dx-dropdowneditor-button,
 .agdModale .dx-dropdowneditor-button.dx-state-hover,
 .agdModale .dx-dropdowneditor-button.dx-state-active {
  background-color: transparent;
 }
 /* Logo piu' vicino al bordo superiore e al primo campo: meno spazio sopra e sotto il logo, meno spazio in cima al
    contenuto della scheda (padding scritto nell'elemento, quindi !important). */
 .jBox-container:has(.agdModale) .jbox-legal-title {
  padding-top: 10px;
  padding-bottom: 0;
 }
 .jBox-container .agdModale.prompt-list {
  padding-top: 4px !important;
  /* Il tema limita il contenuto dei modali a 100vh - 120px con scorrimento interno: sul telefono l'altezza della scheda
     la gestisce agenda.js (adattaModale), quindi niente limite qui. */
  max-height: none;
  overflow-y: visible;
 }
 .jBox-container:has(.agdModale) .jboxLegalLogo {
  width: 180px;
 }
 /* Fascia oraria: voce non scelta con il grigio scuro del testo secondario (il tema la darebbe quasi bianca). */
 .agdFascia .dx-button:not(.dx-item-selected) .dx-button-text {
  color: var(--elisa-text-secondary);
 }
 /* Scritte del periodo e della scelta della vista: il tema da' ai pulsanti --elisa-text-on-light (#dfdfdf nel tema
    chiaro, quasi bianco su bianco); qui il grigio scuro del testo secondario del tema. */
 #cntAgenda .dx-scheduler-navigator-caption .dx-button-text,
 #cntAgenda .dx-scheduler-view-switcher .dx-button-text,
 #agdClienteView .dx-scheduler-navigator-caption .dx-button-text,
 #agdClienteView .dx-scheduler-view-switcher .dx-button-text {
  color: var(--elisa-text-secondary);
 }
 /* Barra delle agende su una riga: periodo largo quanto il suo testo (DevExtreme lo fissa a 180px per il computer),
    niente margini laterali attorno ai due gruppi, testi a 13px e pulsanti con il testo meno larghi. */
 #cntAgenda .dx-scheduler-navigator-caption,
 #agdClienteView .dx-scheduler-navigator-caption {
  min-width: 0;
 }
 #cntAgenda .dx-scheduler-header .dx-toolbar-before,
 #agdClienteView .dx-scheduler-header .dx-toolbar-before {
  padding-right: 0;
 }
 #cntAgenda .dx-scheduler-header .dx-toolbar-after,
 #agdClienteView .dx-scheduler-header .dx-toolbar-after {
  padding-left: 0;
 }
 #cntAgenda .dx-scheduler-header .dx-toolbar-item-content,
 #agdClienteView .dx-scheduler-header .dx-toolbar-item-content {
  padding-left: 0;
  padding-right: 0;
 }
 #cntAgenda .dx-scheduler-header .dx-button,
 #agdClienteView .dx-scheduler-header .dx-button {
  font-size: 13px;
 }
 #cntAgenda .dx-scheduler-header .dx-button-has-text .dx-button-content,
 #agdClienteView .dx-scheduler-header .dx-button-has-text .dx-button-content {
  padding-left: 8px;
  padding-right: 8px;
 }
}
/* Date con il selettore del telefono (dx-datebox-native): niente riquadro del pulsante, che li' resta vuoto. */
.agdModale .dx-datebox-native .dx-texteditor-buttons-container {
 display: none;
}

/* ---------------- pagina team: tre puntini verticali al posto del cerchio delle iniziali ---------------- */
#agdMenuPunti {
 width: 30px;
 height: 30px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--elisa-text-main);
 font-size: 18px;
 cursor: pointer;
 user-select: none;
}