/* ✍️ ANNOTAZIONI — barra nella scheda, scheda colorata, modulo con linguette.
   Colori con trasparenza: vanno bene sia col tema chiaro sia con quello scuro. */

.ann-vista, .ann-card, .ann-modulo {
    --ann-nota: #3f78c4;     --ann-nota-bg: rgba(63, 120, 196, .11);
    --ann-verde: #3c9a5f;    --ann-verde-bg: rgba(60, 154, 95, .13);
    --ann-giallo: #c99a1c;   --ann-giallo-bg: rgba(201, 154, 28, .17);
    --ann-rosso: #d0533f;    --ann-rosso-bg: rgba(208, 83, 63, .13);
    --ann-avv: #c9302c;      --ann-avv-bg: rgba(201, 48, 44, .13);
    --ann-riga: rgba(127, 127, 127, .2);
    --ann-hover: rgba(127, 127, 127, .09);
}
.ann-c-nota { --ann-k: var(--ann-nota); --ann-kbg: var(--ann-nota-bg); }
.ann-c-verde { --ann-k: var(--ann-verde); --ann-kbg: var(--ann-verde-bg); }
.ann-c-giallo { --ann-k: var(--ann-giallo); --ann-kbg: var(--ann-giallo-bg); }
.ann-c-rosso { --ann-k: var(--ann-rosso); --ann-kbg: var(--ann-rosso-bg); }
.ann-c-avvertenza { --ann-k: var(--ann-avv); --ann-kbg: var(--ann-avv-bg); }

/* barra chiusa */
.ann-barra { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 5px 4px; border-radius: 4px; cursor: pointer; }
.ann-barra:hover { background: var(--ann-hover); }
.ann-tutte { display: flex; align-items: center; gap: 7px; border: 0; background: transparent; color: inherit; font: inherit; padding: 1px 0; cursor: pointer; text-align: left; }
.ann-freccia { display: inline-block; transition: transform .15s; opacity: .6; }
.ann-barra[aria-expanded=true] .ann-freccia { transform: rotate(90deg); }
.ann-conti { display: flex; gap: 5px; flex-wrap: wrap; margin-left: auto; }
.ann-conto { font: inherit; font-size: 12px; font-weight: 600; line-height: 20px; border-radius: 999px; padding: 0 8px; border: 1px solid; color: inherit; cursor: pointer; font-variant-numeric: tabular-nums; }
.ann-conto[data-g=nota] { background: var(--ann-nota-bg); border-color: var(--ann-nota); }
.ann-conto[data-g=valutazione] { background: var(--ann-giallo-bg); border-color: var(--ann-giallo); }
.ann-conto[data-g=avvertenza] { background: var(--ann-avv-bg); border-color: var(--ann-avv); }
.ann-conto[data-zero] { opacity: .45; }
.ann-conto[aria-pressed=true] { box-shadow: 0 0 0 2px currentColor; }
.ann-tutte:focus-visible, .ann-conto:focus-visible, .ann-riga:focus-visible { outline: 2px solid var(--ann-nota); outline-offset: 2px; }

/* elenco aperto */
.ann-corpo { border-top: 1px solid var(--ann-riga); margin-top: 4px; }
.ann-testa { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; padding: 6px 0; }
.ann-scelta { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 0 8px; }
.ann-scelta button { font: inherit; font-size: 12.5px; font-weight: 600; border-radius: 4px; padding: 3px 8px; border: 1px solid; color: inherit; cursor: pointer; }
.ann-scelta [data-g=nota] { background: var(--ann-nota-bg); border-color: var(--ann-nota); }
.ann-scelta [data-g=valutazione] { background: var(--ann-giallo-bg); border-color: var(--ann-giallo); }
.ann-scelta [data-g=avvertenza] { background: var(--ann-avv-bg); border-color: var(--ann-avv); }
.ann-filtro { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; opacity: .85; padding: 3px 0 5px; border-bottom: 1px solid var(--ann-riga); }
.ann-filtro button { font: inherit; border: 0; background: none; padding: 0; color: var(--ann-nota); cursor: pointer; }
.ann-elenco { display: flex; flex-direction: column; }
.ann-riga { display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: 8px; width: 100%; padding: 6px 6px 6px 0; border: 0; border-bottom: 1px solid var(--ann-riga); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ann-riga:last-child { border-bottom: 0; }
.ann-riga:hover { background: var(--ann-hover); }
.ann-striscia { border-radius: 0 3px 3px 0; background: var(--ann-nota); }
.ann-riga[data-c=verde] .ann-striscia { background: var(--ann-verde); }
.ann-riga[data-c=giallo] .ann-striscia { background: var(--ann-giallo); }
.ann-riga[data-c=rosso] .ann-striscia { background: var(--ann-rosso); }
.ann-riga[data-c=avvertenza] .ann-striscia { background: var(--ann-avv); }
.ann-riga-testo { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ann-riga-tit { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ann-riga-tit b { font-weight: 600; }
.ann-riga[data-c=avvertenza] .ann-riga-tit b { color: var(--ann-avv); }
.ann-riga-meta { font-size: 11.5px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ann-vuoto { font-size: 12px; opacity: .7; padding: 6px 0; }

/* scheda colorata della nota (finestra standard di Espo) */
.ann-card .modal-content, .ann-modulo .modal-content { border-top: 5px solid var(--ann-k); }
.ann-card .modal-header, .ann-card .modal-body { background-image: linear-gradient(var(--ann-kbg), var(--ann-kbg)); }
.ann-card .modal-title { color: var(--ann-k); font-weight: 700; }
.ann-scheda { display: flex; flex-direction: column; gap: 10px; }
.ann-scheda-meta, .ann-scheda-dati { font-size: 12.5px; opacity: .8; font-variant-numeric: tabular-nums; }
.ann-scheda-dati:empty, .ann-scheda-rif:empty { display: none; }
.ann-scheda-testo { font-size: 14.5px; max-width: 70ch; }
.ann-scheda-testo img { max-width: 100%; height: auto; border-radius: 4px; }
.ann-scheda-rif { display: flex; flex-wrap: wrap; gap: 6px; }
.ann-scheda-rif a { font-size: 12.5px; border: 1px solid var(--ann-riga); border-radius: 999px; padding: 2px 10px; text-decoration: none; }

/* modulo: linguette del genere e fondo colorato */
.ann-modulo .modal-body { background-image: linear-gradient(var(--ann-kbg), var(--ann-kbg)); transition: background .15s; }
.ann-tabs { display: flex; flex-wrap: wrap; border-bottom: 2px solid rgba(127, 127, 127, .3); }
.ann-tab { font: inherit; font-weight: 600; background: transparent; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 6px 12px; color: inherit; opacity: .65; cursor: pointer; }
.ann-tab:hover { opacity: 1; }
.ann-tab[aria-pressed=true] { opacity: 1; border-bottom-color: var(--ann-k, #3f78c4); background: var(--ann-kbg, rgba(63, 120, 196, .11)); }
.ann-guida { margin: 8px 0 0; font-size: 12.5px; opacity: .8; }
.ann-pillole { display: flex; gap: 6px; flex-wrap: wrap; }
.ann-pillola { font: inherit; border: 2px solid rgba(127, 127, 127, .35); border-radius: 999px; padding: 3px 12px; background: transparent; color: inherit; cursor: pointer; }
.ann-pillola[aria-pressed=true] { border-color: currentColor; font-weight: 600; }

/* modulo annotazione: niente colonna laterale, tutto lo spazio al modulo */
.ann-modulo .record-grid { display: block; }
.ann-modulo .record-grid > .side { display: none; }
.ann-modulo .record-grid > .left { width: 100%; max-width: none; }
.ann-pillole, .ann-tabs { flex-direction: row !important; }
.ann-pillola, .ann-tab { display: inline-block; width: auto; flex: 0 0 auto; }
.ann-tab { padding: 6px 10px; }

/* barra: contatori un po' più grandi, ⭐ Reputazione a sinistra staccata dai tre contatori */
.ann-conto { font-size: 13px; line-height: 24px; padding: 0 10px; }
.ann-icona { opacity: .8; }
.ann-rep { font: inherit; font-size: 13px; font-weight: 700; line-height: 24px; border-radius: 999px; padding: 0 12px; border: 2px solid; color: inherit; cursor: pointer; margin-left: 14px; background: transparent; }
.ann-rep[data-c=verde] { background: var(--ann-verde-bg); border-color: var(--ann-verde); }
.ann-rep[data-c=giallo] { background: var(--ann-giallo-bg); border-color: var(--ann-giallo); }
.ann-rep[data-c=rosso] { background: var(--ann-rosso-bg); border-color: var(--ann-rosso); }
.ann-rep[data-c=nessuna] { border-color: var(--ann-riga); opacity: .7; }
.ann-rep:focus-visible { outline: 2px solid var(--ann-nota); outline-offset: 2px; }

/* 👤 media delle valutazioni: stessa pillola dei contatori, colore della media, staccata a sinistra */
.ann-rep { font-size: 13px; font-weight: 600; line-height: 24px; padding: 0 10px; border: 1px solid; border-radius: 999px; margin-left: 14px; }
.ann-rep[data-c=verde] { background: var(--ann-verde-bg); border-color: var(--ann-verde); }
.ann-rep[data-c=giallo] { background: var(--ann-giallo-bg); border-color: var(--ann-giallo); }
.ann-rep[data-c=rosso] { background: var(--ann-rosso-bg); border-color: var(--ann-rosso); }
.ann-rep[data-c=nessuna] { background: transparent; border-color: var(--ann-riga); opacity: .6; }
.ann-rep[aria-pressed] { box-shadow: none; }

/* ANN-FASCE-3: le valutazioni hanno tre colori — verde, arancio, rosso */
.ann-vista, .ann-card, .ann-modulo { --ann-giallo: #e07b1a; --ann-giallo-bg: rgba(224, 123, 26, .15); }