/* ============================= iuready | agenda.css | v8 | 2026-10-22 ===================================================== */
/* 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); }
}

.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;
}
.agdModale .dx-tag-content {
 position: relative;
 display: inline-block;
 text-align: center;
 cursor: pointer;
 margin: 3px 0 3px 4px;
 padding: 3px 25px 4px 8px;
 min-width: 40px;
 background-color: var(--elisa-bg-hover);
 border: 1px solid var(--elisa-border-soft);
 border-radius: 6px;
 color: var(--elisa-text-main);
}
.agdModale .dx-tag-remove-button {
 position: absolute;
 top: 0;
 right: 0;
 width: 25px;
 height: 100%;
}
.agdModale .dx-tag-remove-button::after,
.agdModale .dx-tag-remove-button::before {
 position: absolute;
 top: 50%;
 content: "";
 transform: rotate(45deg);
 right: 9px;
 margin-top: -5px;
 width: 2px;
 height: 11px;
 background: var(--elisa-text-main);
}
.agdModale .dx-tag-remove-button::after {
 right: 4px;
 margin-top: -1px;
 width: 11px;
 height: 2px;
}