/* ──────────────────────────────────────────────────────────────────────────
   Agorà — utility di layout e testo, alias e cornice dei widget.

   Questo file è caricato DOPO tutti gli altri fogli di stile del core: le
   utility applicate esplicitamente vincono sugli stili generici.

   Per chi scrive app (vedi docs/dev/UI-KIT.md):
   - impaginazione:   .stack (colonna con spaziatura), .row (riga che va a capo),
                      .row--between, .spacer, .grid--cards, .form-grid
   - pagina di app:   .app-page > .page-header (.page-header__title, __sub, __actions)
   - testo:           .text-muted, .text-subtle, .text-sm, .text-xs, .mono, .truncate
   - liste:           .list > .list-item (.list-item__title, __meta, __actions)
   - widget:          .card > .card__head (.card__title) + .card__body
   ────────────────────────────────────────────────────────────────────────── */

/* ── Stack: elementi in colonna con spaziatura uniforme ─────────────────── */
.stack { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.stack--xs { gap: var(--space-1); }
.stack--sm { gap: var(--space-2); }
.stack--md { gap: var(--space-4); }
.stack--lg { gap: var(--space-6); }
.stack--xl { gap: var(--space-8); }
.stack > .btn, .stack > a.btn, .stack > .btn-group { align-self: flex-start; }
.stack > * { margin-top: 0; margin-bottom: 0; }

/* ── Row: elementi in riga, vanno a capo quando manca spazio ───────────── */
.row, .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.row--sm { gap: var(--space-1); }
.row--md { gap: var(--space-3); }
.row--lg { gap: var(--space-4); }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.row--center { justify-content: center; }
.row--start { align-items: flex-start; }
.row--baseline { align-items: baseline; }
.row--nowrap { flex-wrap: nowrap; }
.spacer, .grow { flex: 1 1 auto; min-width: 0; }
.shrink-0 { flex-shrink: 0; }

/* ── Testo ──────────────────────────────────────────────────────────────── */
.text-muted, .muted { color: var(--text-muted); }
.text-subtle, .subtle { color: var(--text-subtle); }
.text-xs { font-size: var(--text-xs); }
.text-sm, .small { font-size: var(--text-sm); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-strong, .strong { font-weight: 600; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.mono { font-family: var(--font-mono); font-size: 0.92em; }
.serif { font-family: var(--font-serif); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.m-0 { margin: 0; }
.w-full { width: 100%; }
.hidden { display: none !important; }

/* ── Pagina di un'app ───────────────────────────────────────────────────── */
.app-page { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.page-header {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-3) var(--space-4);
}
.page-header__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.page-header__title, .page-header h1 {
  margin: 0; font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: 600;
  letter-spacing: -0.01em; line-height: var(--leading-tight);
}
.page-header__sub, .page-header p { margin: 0; color: var(--text-muted); max-width: 70ch; }
.page-header__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.toolbar, .filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
}
.toolbar > .input, .toolbar > .select, .filters > .input, .filters > .select { width: auto; min-width: 180px; flex: 0 1 260px; }

/* ── Liste ──────────────────────────────────────────────────────────────── */
.list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.list--plain { border: 0; background: transparent; border-radius: 0; }
.list-item {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border); min-width: 0; color: inherit; text-decoration: none;
}
.list-item:last-child { border-bottom: 0; }
a.list-item:hover, .list-item--link:hover { background: var(--surface-hover); text-decoration: none; }
.list-item__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.list-item__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item__meta { color: var(--text-muted); font-size: var(--text-sm); }
.list-item__actions { display: flex; gap: var(--space-1); flex-shrink: 0; }

/* ── Form ───────────────────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.form-grid > .field--wide, .form-grid > .span-2 { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }

/* ── Divisori e riquadri ────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--border); border: 0; margin: var(--space-4) 0; }
.panel { background: var(--surface-2); border-radius: var(--radius); padding: var(--space-4); }

/* ── Alias dei nomi più comuni (le app non devono rompersi per un trattino) ─ */
.btn.btn-primary { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-border: transparent; box-shadow: var(--shadow-sm); }
.btn.btn-primary:hover { background: var(--accent-hover); border-color: transparent; }
.btn.btn-secondary { --btn-bg: var(--surface); }
.btn.btn-ghost, .btn.btn-link { --btn-bg: transparent; --btn-border: transparent; }
.btn.btn-ghost:hover, .btn.btn-link:hover { background: var(--surface-2); border-color: transparent; }
.btn.btn-danger { --btn-bg: var(--danger); --btn-fg: #fff; --btn-border: transparent; }
.btn.btn-sm, .btn.small { min-height: 32px; padding: 0 var(--space-3); font-size: var(--text-sm); border-radius: var(--radius-sm); }
.btn.btn-xs { min-height: 26px; padding: 0 var(--space-2); font-size: var(--text-xs); border-radius: var(--radius-sm); }
.card-title { font-size: var(--text-md); font-weight: 600; display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.card-body { padding: var(--space-5); }
.card-head, .card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.card-foot, .card-footer { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); }

/* Una .card con contenuto diretto (senza __head/__body) riceve comunque il padding. */
.card:not(:has(> .card__body, > .card__head, > .card__foot, > .card-body, > .card-head, > .card-header, > .table-wrap, > table, > .list, > img, > .card__media)) {
  padding: var(--space-5);
}

/* ── Cornice dei widget (slot home.cards, home.sidebar, admin.overview, …) ─ */
.widget { display: flex; flex-direction: column; min-width: 0; }
.widget > .card { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; margin: 0; }
.widget > .card > .card__head { border-bottom: 0; padding-bottom: 0; }
.widget > .card > .card__head .card__title,
.widget > .card > .card__body > .card__title:first-child { font-size: var(--text-md); }
.widget > .card > .card__body {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0;
}
.widget > .card > .card__body > * { margin-top: 0; margin-bottom: 0; }
.widget > .card > .card__body > .btn,
.widget > .card > .card__body > a.btn,
.widget > .card > .card__body > .btn-group,
.widget > .card > .card__body > .row:last-child { align-self: flex-start; }
.widget > .card > .card__body > :last-child:is(.btn, a.btn, .btn-group, .row, .widget__actions) { margin-top: auto; }
.widget > .card > .card__body > p { color: var(--text-muted); line-height: var(--leading-loose, 1.6); }
.widget .card__title .icon { color: var(--accent); }
.widget__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.widgets-grid { align-items: stretch; }
.home-grid__aside > .widget > .card { flex: 0 0 auto; }
/* Widget con contenuto direttamente nella .card (senza __body): stessa impaginazione. */
.widget > .card:not(:has(> .card__body, > .card__head)) { display: flex; flex-direction: column; gap: var(--space-3); }
.widget > .card:not(:has(> .card__body, > .card__head)) > * { margin-top: 0; margin-bottom: 0; }
.widget > .card:not(:has(> .card__body, > .card__head)) > :is(.btn, a.btn, .btn-group) { align-self: flex-start; }
.widget > .card:not(:has(> .card__body, > .card__head)) > :last-child:is(.btn, a.btn, .btn-group, .row) { margin-top: auto; }

/* ── Kit (ui/kit.js) ───────────────────────────────────────────────────── */
.card__head-text { min-width: 0; }
.card__lead { margin: 0; }
.card__body--flush { padding: 0; }
.list-item__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius); background: var(--surface-2); color: var(--text-muted); flex-shrink: 0; }
button.list-item { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--border); text-align: left; font: inherit; cursor: pointer; }
.app-page > .page-head { margin-bottom: 0; }
.app-page .field { margin-bottom: 0; }
.stack > .field, .form-grid > .field, .card__body.stack > .field { margin-bottom: 0; }

/* ── Ritocchi richiesti dalle app (UI — app-a) ─────────────────────────── */
/* Lista unico contenuto di una card: a filo, allineata all'intestazione. */
.card__body:has(> .list:only-child) { padding: 0; }
.card__body > .list:only-child { border: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: transparent; }
.card__body > .list:only-child > .list-item { padding-left: var(--space-5); padding-right: var(--space-5); }
/* Azioni con etichetta sempre ben visibili (l'opacità ridotta resta per le sole icone). */
.list-item__actions:has(.btn) { opacity: 1; }
@media (max-width: 600px) {
  .card__head { flex-wrap: wrap; }
  .list-item:has(> .list-item__actions .btn) { flex-wrap: wrap; }
  .list-item:has(> .list-item__actions .btn) > .list-item__actions { flex-basis: 100%; flex-wrap: wrap; justify-content: flex-start; }
}
/* Citazioni [n] nel testo: area di tocco più ampia senza cambiare l'impaginazione. */
.cite { position: relative; }
.cite::after { content: ""; position: absolute; inset: -10px -6px; }

/* Un elemento .visually-hidden dentro una tabella non deve allargare la pagina. */
.table-wrap { position: relative; }

/* ── Componenti del core usati ovunque (prima definiti solo nell'admin) ──── */
.alert__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alert__body p { margin: 0; }
.alert__actions { margin-top: var(--space-2); }
.empty__art--icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--space-3); border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent-text); }
.empty__art--icon .icon { width: 26px; height: 26px; }
.chat__head-widgets { display: inline-flex; align-items: center; gap: var(--space-1); }
.chat__head-widgets:empty { display: none; }
/* Link nel markdown: l'icona dei link esterni resta attaccata all'ultima parola. */
.md-link { overflow-wrap: anywhere; }
.md-link__ext { display: inline; width: 0.85em; height: 0.85em; margin-left: 0.2em; vertical-align: -0.08em; opacity: 0.7; }

/* ── Chat su telefono: titolo sempre visibile, azioni su una seconda riga ── */
@media (max-width: 720px) {
  .chat__head { flex-wrap: wrap; row-gap: var(--space-1); }
  .chat__toggle-list { order: 0; }
  .chat__head-text { order: 1; flex: 1 1 0; min-width: 0; }
  .chat__toggle-panel { order: 2; }
  .chat__head-actions { order: 3; flex: 1 1 100%; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-1); }
  .chat__head .icon-btn { min-width: 36px; min-height: 36px; }
}
/* Intestazioni delle tabelle nel markdown: non spezzare le parole (la tabella scorre). */
.md .md-table th { white-space: nowrap; }

/* ── Correzioni trasversali dalla revisione visiva indipendente ─────────── */
/* 1. Avatar tinti in tema scuro: icona e iniziali schiarite, fondo più pieno (contrasto ≥ 3:1). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .avatar:not(.avatar--solid):not(:has(img)) {
    color: color-mix(in oklab, var(--avatar-color) 50%, white);
    background: color-mix(in oklab, var(--avatar-color) 26%, var(--surface));
  }
}
:root[data-theme="dark"] .avatar:not(.avatar--solid):not(:has(img)) {
  color: color-mix(in oklab, var(--avatar-color) 50%, white);
  background: color-mix(in oklab, var(--avatar-color) 26%, var(--surface));
}

/* 2. Righe di lista con divisori: niente angoli arrotondati (i divisori restano dritti). */
.list > .list-item, .list--divided > .list-item { border-radius: 0; }
.card__body > .list:only-child > .list-item:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* 3. Filtri su telefono: i controlli occupano tutta la riga invece di fermarsi a 260px. */
@media (max-width: 600px) {
  .toolbar > .input, .toolbar > .select, .toolbar > .input-group,
  .filters > .input, .filters > .select, .filters > .input-group,
  .page-head__actions > .select, .page-head__actions > .input { flex: 1 1 100%; width: 100%; min-width: 0; max-width: none; }
}

/* 4. Tabella unico contenuto di una card a filo: niente doppio bordo né angoli interni. */
.card__body--flush > .table-wrap,
.card__body:has(> .table-wrap:only-child) > .table-wrap { border: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.card__body:has(> .table-wrap:only-child) { padding: 0; }

/* 5. Riquadri numerici: etichetta, valore e nota allineati riga per riga fra i riquadri
      (subgrid: ogni riquadro occupa tre righe della griglia condivise con i vicini). */
.grid--stats, .kpis { align-items: stretch; }
.grid--stats > .stat, .kpis > .kpi {
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-1); align-content: start;
}
.grid--stats > .stat > *, .kpis > .kpi > * { margin: 0; min-width: 0; }
.grid--stats > .stat > .stat__label, .kpis > .kpi > .kpi__label { align-self: end; }
.grid--stats > .stat > .stat__value, .kpis > .kpi > .kpi__value { align-self: center; }
.grid--stats > .stat > .stat__meta, .kpis > .kpi > .kpi__hint { align-self: start; }
.stat__value { overflow-wrap: anywhere; }

/* 6. Bottoni «danger» pieni in tema scuro: rosso più profondo, testo bianco leggibile (≥ 4.5:1). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn--danger, :root:not([data-theme="light"]) .btn.btn-danger { --btn-bg: color-mix(in oklab, var(--danger) 58%, black); --btn-fg: #fff; }
  :root:not([data-theme="light"]) .btn--danger:hover, :root:not([data-theme="light"]) .btn.btn-danger:hover { background: color-mix(in oklab, var(--danger) 50%, black); }
}
:root[data-theme="dark"] .btn--danger, :root[data-theme="dark"] .btn.btn-danger { --btn-bg: color-mix(in oklab, var(--danger) 58%, black); --btn-fg: #fff; }
:root[data-theme="dark"] .btn--danger:hover, :root[data-theme="dark"] .btn.btn-danger:hover { background: color-mix(in oklab, var(--danger) 50%, black); }

/* Le icone dei bottoni dentro una dropzone hanno la misura standard (la regola .dropzone .icon è per l'icona grande).
 */
.dropzone .btn .icon { width: 1.1em; height: 1.1em; }

/* 7. Barre di filtri dentro contenitori con spaziatura: niente margine extra sotto. */
.stack > .toolbar, .app-page > .toolbar, .card__body > .toolbar, .admin-main__panel > .toolbar { margin-bottom: 0; }

/* 8. Riquadri numerici dentro una card: due per riga anche su telefono. */
@media (max-width: 600px) {
  .card .grid--stats, .card .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 9. Tabelle scorrevoli: ombra ai bordi quando c'è altro contenuto da scorrere. */
.table-wrap {
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.16), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.16), transparent) right center / 12px 100% no-repeat scroll,
    var(--surface);
}
.table-wrap > table { background: transparent; }

/* 10. Widget nella colonna laterale della chat: testo in scala con la colonna. */
.chat-panel__widgets .widget { font-size: var(--text-sm); }
.chat-panel__widgets .card__body { padding: var(--space-4); }
.chat-panel__widgets .card__head { padding: var(--space-3) var(--space-4) 0; }

/* 11. Contatori delle notifiche: stesso rosso pieno ovunque, leggibile anche in tema scuro. */
:root { --danger-solid: #b4281e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --danger-solid: #c4362b; } }
:root[data-theme="dark"] { --danger-solid: #c4362b; }
.dot-badge, .nav__badge, .bottombar__badge { background: var(--danger-solid); color: #fff; }

/* 12. Campi con testo tecnico (chiavi, id): carattere monospazio ma della misura dei campi. */
.input.mono, input.mono, textarea.mono, .textarea.mono, .input--mono { font-size: var(--text-sm); }

/* 13. Intestazione di pagina: le azioni restano in alto a destra finché il testo ha almeno
       320px; sotto, vanno a capo tutte insieme allineate a sinistra. */
.page-head > :first-child:not(.page-head__actions) { flex: 1 1 320px; min-width: 0; }
.page-head > .page-head__actions { flex: 0 1 auto; margin-left: auto; justify-content: flex-end; align-self: flex-start; }
@media (max-width: 600px) {
  .page-head > .page-head__actions { margin-left: 0; justify-content: flex-start; }
}

/* 14. Titoli dei widget alla stessa altezza in una riga, con o senza badge a destra. */
.widget > .card > .card__head { min-height: calc(var(--space-4) + 24px); }
/* 15. Intestazioni di sezione: link «Vedi tutti» centrato sul titolo (che inizia con un'icona). */
.section__head { align-items: center; }
/* 16. A capo più eleganti: niente parola orfana nei sottotitoli, titoli bilanciati. */
.page-head__sub, .card__lead, .section__sub, .empty__text, .widget > .card > .card__body > p { text-wrap: pretty; }
.page-head__title, .card__title, .empty__title { text-wrap: balance; }