/* Tema di ADesk. Le variabili qui sotto sono la sola sorgente dei colori: i
   componenti Blazorise vengono ridipinti mappando le variabili di Bootstrap
   sulle nostre, invece di sovrascrivere regola per regola. */

:root {
    --sfondo: #f4f6f9;
    --pannello: #ffffff;
    --bordo: #e5e9ef;
    --bordo-tenue: #eef1f5;
    --testo: #131a22;
    --testo-tenue: #667585;
    --accento: #2f5d8a;
    --accento-scuro: #26496c;
    --accento-chiaro: #eaf1f8;

    --p1: #b3261e;
    --p1-bg: #fdeceb;
    --p2: #8a5a00;
    --p2-bg: #fdf3e0;
    --p3: #4a5560;
    --p3-bg: #eef0f2;
    --ok: #1e6b45;
    --ok-bg: #e7f4ed;
    --attesa: #6a4a9c;
    --attesa-bg: #f0ebfa;

    --barra: #16202b;
    --barra-testo: #c3cede;
    --barra-attiva: #24313f;

    --raggio: 10px;
    --raggio-piccolo: 7px;
    --ombra: 0 1px 2px rgba(19, 26, 34, .04), 0 1px 3px rgba(19, 26, 34, .06);
    --ombra-alta: 0 4px 12px rgba(19, 26, 34, .09);

    /* Bootstrap 5 legge queste: cambiando qui cambiano insieme i componenti
       Blazorise (Button, Badge, Alert, Table) senza una riga di override. */
    --bs-primary: var(--accento);
    --bs-primary-rgb: 47, 93, 138;
    --bs-body-color: var(--testo);
    --bs-body-bg: var(--sfondo);
    --bs-border-color: var(--bordo);
    --bs-border-radius: var(--raggio-piccolo);
    --bs-link-color: var(--accento);
    --bs-link-hover-color: var(--accento-scuro);
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

html, body {
    font-family: var(--bs-font-sans-serif);
    background: var(--sfondo);
    color: var(--testo);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

h1 { font-size: 1.6rem; font-weight: 660; margin: 0 0 .2rem; letter-spacing: -.022em; }
h2 { font-size: 1rem; font-weight: 640; margin: 0 0 .85rem; letter-spacing: -.01em; }
.sottotitolo { color: var(--testo-tenue); margin-bottom: 1.6rem; font-size: .9rem; max-width: 62ch; }

a { color: var(--accento); text-decoration: none; }
a:hover { color: var(--accento-scuro); text-decoration: underline; }

/* ---------- Impianto ---------- */

.page { display: flex; min-height: 100vh; }

.sidebar {
    width: 236px;
    flex-shrink: 0;
    background: var(--barra);
    color: var(--barra-testo);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

main { flex: 1; min-width: 0; }
.content { padding: 2.25rem 2.5rem 4rem; max-width: 1240px; }

.brand { padding: 1.4rem 1.15rem 1rem; display: flex; gap: .65rem; align-items: center; }
.brand-logo {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 9px;
    background: linear-gradient(135deg, #4d84bd, var(--accento));
    color: #fff; font-weight: 700; font-size: .95rem;
    display: flex; align-items: center; justify-content: center;
}
.brand a { color: #fff; font-weight: 680; font-size: 1.08rem; letter-spacing: -.02em; line-height: 1.1; display: block; }
.brand a:hover { text-decoration: none; color: #fff; }
.brand-sub { display: block; font-size: .68rem; color: #7d8da0; margin-top: .1rem; letter-spacing: .01em; }

.nav-scrollable { flex: 1; overflow-y: auto; padding-top: .35rem; }

/* La ricerca sta in cima alla barra, non in una pagina da raggiungere: è il
   punto da cui si riparte quando si ha in mano un codice e basta. */
.nav-ricerca { position: relative; padding: .1rem .7rem .35rem; }
.nav-ricerca > i {
    position: absolute; left: 1.35rem; top: 50%; transform: translateY(-60%);
    font-size: .75rem; color: #6b7c90; pointer-events: none;
}
.nav-ricerca input {
    width: 100%; background: var(--barra-attiva); border: 1px solid transparent;
    border-radius: var(--raggio-piccolo); color: #dbe4ef;
    padding: .4rem .6rem .4rem 1.85rem; font-size: .85rem;
}
.nav-ricerca input::placeholder { color: #7d8da0; }
.nav-ricerca input:focus { outline: none; border-color: var(--accento); background: #1c2733; }
.nav-sezione {
    font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #5f7085; padding: .9rem 1.35rem .35rem;
}
.nav-item { padding: 0 .7rem; }
.nav-link {
    display: flex; align-items: center; gap: .65rem;
    padding: .52rem .7rem; border-radius: var(--raggio-piccolo);
    color: var(--barra-testo); font-size: .91rem; font-weight: 500;
    background: none; border: 0; width: 100%; text-align: left;
    transition: background .12s ease, color .12s ease;
}
.nav-link .icona { width: 1.05rem; text-align: center; opacity: .72; font-size: .85rem; flex-shrink: 0; }
.nav-link:hover { background: var(--barra-attiva); color: #fff; text-decoration: none; }
.nav-link:hover .icona { opacity: 1; }
.nav-link.active { background: var(--accento); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.nav-link.active .icona { opacity: 1; }

.nav-piede { border-top: 1px solid #24313f; padding: .6rem 0 .8rem; margin-top: auto; }
.nav-utente, .nav-logout { font-size: .84rem; color: #93a2b3; }
.nav-utente .avatare {
    width: 22px; height: 22px; border-radius: 50%; background: var(--accento);
    color: #fff; font-size: .68rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.navbar-toggler { display: none; }

/* ---------- Pannelli e tessere ---------- */

.pannello {
    background: var(--pannello);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 1.25rem 1.35rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--ombra);
}
/* Un pannello che contiene solo una tabella: le righe arrivano al bordo, cosi
   l'intestazione della tabella fa da intestazione del riquadro. */
.pannello-tabella { padding: .35rem .5rem; }
.pannello.critico { border-left: 3px solid var(--p1); }
.pannello.attenzione { border-left: 3px solid var(--p2); }

/* 185px e non 210: con la quinta tessera (P1 aperte) il vecchio minimo mandava
   l'ultima a capo da sola, e una riga con un riquadro solo sembra un errore. */
.griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }

.tessera {
    background: var(--pannello); border: 1px solid var(--bordo);
    border-radius: var(--raggio); padding: 1.1rem 1.2rem;
    box-shadow: var(--ombra); position: relative; overflow: hidden;
}
/* Filo di colore sul bordo alto: distingue le tessere in allarme senza
   colorare tutto il riquadro, che a colpo d'occhio urlerebbe troppo. */
.tessera::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: transparent; }
.tessera .numero { font-size: 2rem; font-weight: 660; line-height: 1.05; letter-spacing: -.03em; }
.tessera .etichetta { color: var(--testo-tenue); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; margin-top: .3rem; font-weight: 600; }
/* Le tessere sono link, ma non devono sembrare testo cliccabile: nessuna
   sottolineatura, solo il rilievo al passaggio. */
a.tessera { display: block; color: inherit; }
a.tessera:hover { text-decoration: none; color: inherit; box-shadow: var(--ombra-alta); border-color: #d4dae1; }
.tessera.critico::before { background: var(--p1); }
.tessera.critico .numero { color: var(--p1); }
.tessera.attenzione::before { background: var(--p2); }
.tessera.attenzione .numero { color: var(--p2); }

/* ---------- Tabelle ---------- */

table.elenco { width: 100%; border-collapse: collapse; font-size: .9rem; margin-bottom: 0; }
table.elenco th {
    text-align: left; font-weight: 650; font-size: .72rem; text-transform: uppercase;
    letter-spacing: .06em; color: var(--testo-tenue);
    padding: .45rem .65rem; border-bottom: 1px solid var(--bordo);
    background: none;
}
table.elenco td {
    padding: .6rem .65rem; border-bottom: 1px solid var(--bordo-tenue);
    vertical-align: middle; color: var(--testo);
}
table.elenco tr:last-child td { border-bottom: 0; }
table.elenco tbody tr { transition: background .1s ease; }
table.elenco tbody tr:hover td { background: #f8fafc; }

.codice { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .79rem; color: var(--testo-tenue); white-space: nowrap; }
.scaduta { color: var(--p1); font-weight: 640; }
/* Quel che una data assoluta non dice: "dom 17/08 · domani". Tenue, perché
   affianca l'informazione principale e non deve rubarle il posto. */
.relativa { color: var(--testo-tenue); font-size: .74rem; }

/* Il pulsante di copia compare all'avvicinarsi del puntatore: sempre visibile
   sarebbe un'icona in più su ogni riga di ogni tabella. Con la tastiera resta
   raggiungibile perché :focus-within lo tiene acceso. */
.gruppo-codice { display: inline-flex; align-items: center; gap: .2rem; }
.copia-codice {
    border: 0; background: none; padding: 0 .1rem; cursor: pointer; line-height: 1;
    color: var(--testo-tenue); opacity: 0; transition: opacity .12s ease, color .12s ease;
    font-size: .72rem;
}
.gruppo-codice:hover .copia-codice,
.gruppo-codice:focus-within .copia-codice { opacity: .75; }
.copia-codice:hover { color: var(--accento); opacity: 1; }

/* ---------- Etichette ---------- */

.tag {
    display: inline-flex; align-items: center; padding: .16rem .5rem; border-radius: 999px;
    font-size: .71rem; font-weight: 650; white-space: nowrap; letter-spacing: .01em;
    line-height: 1.35;
}
.tag-p1 { background: var(--p1-bg); color: var(--p1); }
.tag-p2 { background: var(--p2-bg); color: var(--p2); }
.tag-p3 { background: var(--p3-bg); color: var(--p3); }
.tag-todo { background: var(--p3-bg); color: var(--p3); }
.tag-incorso { background: var(--accento-chiaro); color: var(--accento); }
.tag-inattesa { background: var(--attesa-bg); color: var(--attesa); }
.tag-fatto { background: var(--ok-bg); color: var(--ok); }
.tag-annullato { background: #f1f3f5; color: #98a1aa; }
.tag-proposta { background: #fff8e1; color: #8a6d00; border: 1px dashed #d9c58a; }

/* ---------- Form e bottoni ---------- */

.form-control, .form-select, textarea.form-control {
    border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo);
    padding: .45rem .65rem; font-size: .9rem;
    background: #fff; color: var(--testo); width: 100%;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control:focus, .form-select:focus, textarea.form-control:focus {
    outline: none; border-color: var(--accento); box-shadow: 0 0 0 3px var(--accento-chiaro);
}
.form-control::placeholder { color: #a8b2bd; }
label.campo, .campo {
    display: block; font-size: .77rem; font-weight: 650; color: var(--testo-tenue);
    margin-bottom: .3rem; letter-spacing: .01em;
}
.riga-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .85rem; margin-bottom: .9rem; }

/* La riga di testo sotto un campo che ne spiega l'effetto: serve dove il campo
   fa qualcosa in più che scrivere un valore (es. "In attesa da" cambia lo stato). */
.aiuto-campo { display: block; font-size: .74rem; color: var(--testo-tenue); margin-top: .25rem; }

.scorciatoie-data { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .3rem; }
.scorciatoia {
    background: none; border: 1px solid var(--bordo); border-radius: 999px;
    padding: .08rem .5rem; font-size: .72rem; color: var(--testo-tenue); cursor: pointer;
}
.scorciatoia:hover { background: var(--accento-chiaro); color: var(--accento); border-color: #bfd3e6; }
.scorciatoia:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }

.elenco-collegamenti { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; font-size: .89rem; }
.elenco-collegamenti li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.elenco-collegamenti > li > i:first-child { color: var(--testo-tenue); width: 1rem; text-align: center; }

.btn-primario {
    background: var(--accento); color: #fff; border: 1px solid var(--accento); border-radius: var(--raggio-piccolo);
    padding: .47rem .95rem; font-size: .88rem; font-weight: 570; cursor: pointer;
    transition: background .12s ease, box-shadow .12s ease;
    display: inline-flex; align-items: center; gap: .45rem;
}
.btn-primario:hover:not(:disabled) { background: var(--accento-scuro); border-color: var(--accento-scuro); color: #fff; box-shadow: var(--ombra); }
.btn-primario:disabled { opacity: .5; cursor: not-allowed; }
.btn-secondario {
    background: #fff; color: var(--testo); border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo);
    padding: .47rem .95rem; font-size: .88rem; font-weight: 540; cursor: pointer;
    display: inline-flex; align-items: center; gap: .45rem;
}
.btn-secondario:hover:not(:disabled) { background: #f6f8fa; border-color: #d4dae1; color: var(--testo); }
.btn-secondario:disabled { opacity: .5; cursor: not-allowed; }
.btn-mini {
    background: #fff; border: 1px solid var(--bordo); border-radius: 6px;
    padding: .17rem .5rem; font-size: .76rem; font-weight: 540; cursor: pointer; color: var(--testo-tenue);
    display: inline-flex; align-items: center; gap: .3rem;
    transition: all .12s ease;
}
.btn-mini:hover { background: var(--accento-chiaro); color: var(--accento); border-color: #bfd3e6; }
.btn-mini + .btn-mini { margin-left: .3rem; }
/* I pulsanti minuti non avevano nessun segno di fuoco: chi naviga con il tab
   perdeva il punto in cui si trovava dentro una tabella di azioni. */
.btn-mini:focus-visible, .copia-codice:focus-visible, .commuta-vista button:focus-visible {
    outline: 2px solid var(--accento); outline-offset: 1px;
}
.btn-mini.pericolo:hover { background: var(--p1-bg); color: var(--p1); border-color: #e8b4b0; }

/* ---------- Barra degli avvisi ---------- */

/* In basso al centro: è dove l'occhio non sta lavorando, quindi non copre quello
   che si sta guardando, ma resta nel campo visivo. */
.barra-avvisi {
    position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
    z-index: 1050; max-width: min(38rem, calc(100vw - 2rem));
}
.avviso-galleggiante {
    display: flex; align-items: center; gap: .6rem;
    background: var(--barra); color: #eef2f7;
    border-radius: var(--raggio); padding: .6rem .75rem .6rem .9rem;
    box-shadow: var(--ombra-alta); font-size: .88rem;
    animation: avviso-entra .16s ease-out;
}
.avviso-galleggiante > i { opacity: .85; }
.avviso-galleggiante.successo > i { color: #6ddaa0; }
.avviso-galleggiante.errore > i { color: #ff9b93; }
.avviso-galleggiante .testo { flex: 1; min-width: 0; }
.avviso-galleggiante .azione {
    background: rgba(255, 255, 255, .12); border: 0; color: #fff;
    border-radius: var(--raggio-piccolo); padding: .25rem .6rem;
    font-size: .82rem; font-weight: 600; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; gap: .35rem;
}
.avviso-galleggiante .azione:hover { background: rgba(255, 255, 255, .22); }
.avviso-galleggiante .chiudi {
    background: none; border: 0; color: #8c9aab; cursor: pointer; padding: .1rem .2rem; font-size: .8rem;
}
.avviso-galleggiante .chiudi:hover { color: #fff; }
.avviso-galleggiante .azione:focus-visible, .avviso-galleggiante .chiudi:focus-visible {
    outline: 2px solid #fff; outline-offset: 1px;
}

@keyframes avviso-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .avviso-galleggiante { animation: none; } }

/* Scelta dell'urgenza a schede invece che a tendina: il cliente vede tutte e
   tre le opzioni con la loro spiegazione, senza aprire nulla. */
.scelta-urgenza { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.urgenza {
    display: flex; flex-direction: column; gap: .12rem; text-align: left;
    padding: .7rem .85rem; border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo);
    background: #fff; cursor: pointer; transition: all .12s ease;
}
.urgenza:hover { border-color: #c3d3e2; background: #fbfcfe; }
.urgenza > i { color: var(--testo-tenue); font-size: .95rem; margin-bottom: .25rem; }
.urgenza .titolo { font-weight: 640; font-size: .9rem; color: var(--testo); }
.urgenza .spiegazione { font-size: .77rem; color: var(--testo-tenue); }
.urgenza.scelta { border-color: var(--accento); background: var(--accento-chiaro); box-shadow: 0 0 0 2px var(--accento-chiaro); }
.urgenza.scelta > i, .urgenza.scelta .titolo { color: var(--accento); }

.vuoto { color: var(--testo-tenue); padding: 1.5rem .25rem; font-size: .9rem; text-align: center; }
.vuoto .icona-vuoto { display: block; font-size: 1.5rem; opacity: .3; margin-bottom: .5rem; }
.barra-azioni { display: flex; gap: .6rem; align-items: center; margin-bottom: 1.1rem; flex-wrap: wrap; }
/* La seconda riga di filtri si apre solo quando serve: sempre visibile
   riempirebbe di comandi una pagina che si apre per leggere un elenco. */
.barra-filtri { margin-top: -.6rem; padding-bottom: .2rem; }
.ricerca { width: auto; min-width: 15rem; flex: 0 1 22rem; }

/* Il titolo in tabella porta al dettaglio ma non deve sembrare un link fra
   altri link: prende il colore del testo e si sottolinea solo al passaggio. */
.titolo-riga { color: var(--testo); }
.titolo-riga:hover { color: var(--accento); }

.ordina {
    background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit;
    text-transform: inherit; letter-spacing: inherit;
}
.ordina:hover { color: var(--accento); }
.ordina.attivo { color: var(--accento); }
.ordina:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

/* ---------- Bacheca ---------- */

/* Commutatore Elenco | Bacheca: due pulsanti attaccati, quello scelto in rilievo. */
.commuta-vista { display: inline-flex; border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo); overflow: hidden; background: #fff; }
.commuta-vista button {
    border: 0; background: none; padding: .42rem .8rem; font-size: .85rem; font-weight: 550;
    color: var(--testo-tenue); cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
}
.commuta-vista button + button { border-left: 1px solid var(--bordo); }
.commuta-vista button:hover { background: #f6f8fa; color: var(--testo); }
.commuta-vista button.scelta { background: var(--accento); color: #fff; }

/* La griglia e la stessa per intestazione e corsie, cosi le colonne restano
   allineate: prima l'etichetta del cliente, poi una colonna per stato. */
.bacheca { overflow-x: auto; padding-bottom: .5rem; }
.bacheca-intestazione,
.bacheca-corsia {
    display: grid;
    grid-template-columns: 11rem repeat(4, minmax(210px, 1fr));
    gap: .7rem;
    min-width: 62rem;
}

.bacheca-intestazione { margin-bottom: .5rem; position: sticky; top: 0; z-index: 2; background: var(--sfondo); padding: .35rem 0; }
.bacheca-colonna-titolo {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--testo-tenue); display: flex; align-items: center; gap: .4rem; padding: 0 .2rem;
}
.bacheca-colonna-titolo .conteggio {
    background: var(--p3-bg); color: var(--p3); border-radius: 999px;
    padding: .04rem .38rem; font-size: .7rem; letter-spacing: 0;
}

.bacheca-corsia { margin-bottom: .7rem; align-items: stretch; }
.bacheca-etichetta-corsia {
    display: flex; flex-direction: column; justify-content: center; gap: .1rem;
    padding: .7rem .4rem .7rem .2rem; border-right: 2px solid var(--bordo);
}
.bacheca-etichetta-corsia .nome { font-weight: 640; font-size: .88rem; letter-spacing: -.01em; }

.bacheca-cella {
    background: #eef1f5; border-radius: var(--raggio); padding: .45rem;
    min-height: 4.5rem; display: flex; flex-direction: column; gap: .45rem;
}

.scheda {
    background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo);
    padding: .55rem .65rem; box-shadow: var(--ombra); cursor: grab;
}
.scheda:active { cursor: grabbing; }
.scheda.scaduta { border-left: 3px solid var(--p1); }
.scheda-alto { display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; }

/* Tendina e link compaiono al passaggio, o la scheda diventa una barra di
   comandi con dentro un titolo. Al tocco, dove non c'è passaggio, restano
   sempre visibili: è lì che sono l'unico modo per spostare una scheda. */
.stato-scheda {
    border: 1px solid var(--bordo); border-radius: 6px; background: #fff;
    font-size: .68rem; color: var(--testo-tenue); padding: .05rem .15rem;
    opacity: 0; transition: opacity .12s ease;
}
.apri-scheda { color: var(--testo-tenue); font-size: .72rem; opacity: 0; transition: opacity .12s ease; }
.scheda:hover .stato-scheda, .scheda:hover .apri-scheda,
.scheda:focus-within .stato-scheda, .scheda:focus-within .apri-scheda { opacity: 1; }
.apri-scheda:hover { color: var(--accento); }

@media (hover: none) {
    .stato-scheda, .apri-scheda { opacity: 1; }
}
.scheda-titolo { font-size: .86rem; line-height: 1.35; margin-bottom: .35rem; }
.scheda-basso { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .74rem; }

/* Classi che Blazorise mette durante il trascinamento. */
.bacheca .drop-zone-drag-target-active { outline: 2px dashed var(--accento); outline-offset: -2px; background: var(--accento-chiaro); }
.bacheca [draggable="true"]:hover { border-color: #c3d3e2; }

@media (max-width: 860px) {
    .bacheca-intestazione, .bacheca-corsia { grid-template-columns: 7rem repeat(4, minmax(160px, 1fr)); min-width: 46rem; }
}

/* ---------- Agenda ---------- */

/* Le scadenze non stanno in tabella: sono un elenco per giorno, e la riga a
   sinistra del gruppo tiene insieme visivamente le voci della stessa data. */
.giorno-agenda { border-left: 2px solid var(--bordo); padding-left: 1rem; margin-bottom: 1.35rem; }
.giorno-agenda:last-child { margin-bottom: 0; }
.giorno-agenda.oggi { border-left-color: var(--accento); }
.giorno-agenda h2 { margin-bottom: .5rem; text-transform: capitalize; }

.voce-agenda {
    display: flex; align-items: center; gap: .75rem;
    padding: .5rem .1rem; border-bottom: 1px solid var(--bordo-tenue); font-size: .9rem;
}
.voce-agenda:last-child { border-bottom: 0; }
.voce-agenda .ora { width: 5.5rem; flex-shrink: 0; }
.voce-agenda .titolo { flex: 1; min-width: 0; }

/* ---------- Commenti ---------- */

.commento {
    border: 1px solid var(--bordo); border-radius: var(--raggio);
    padding: .85rem 1rem; margin-bottom: .7rem; background: #fff;
}
.commento.interno { background: #fffdf5; border-color: #ecdfb8; }
/* I messaggi del cliente si distinguono da quelli dello staff senza spostarli a
   destra: la conversazione resta leggibile come un thread, non come una chat. */
.commento.mio { background: var(--accento-chiaro); border-color: #d3e2f0; }
.commento .intestazione { font-size: .78rem; color: var(--testo-tenue); margin-bottom: .4rem; display: flex; gap: .55rem; align-items: center; }
.commento .testo { white-space: pre-wrap; font-size: .91rem; line-height: 1.55; }
.avatare-commento {
    width: 24px; height: 24px; border-radius: 50%; background: var(--accento); color: #fff;
    font-size: .7rem; font-weight: 700; display: inline-flex; align-items: center;
    justify-content: center; flex-shrink: 0;
}
.commento.interno .avatare-commento { background: var(--p2); }
.avviso-chiusa { background: #f5f7f9; border: 1px solid var(--bordo); color: var(--testo-tenue); font-size: .87rem; margin: 1rem 0 0; }

.fila-allegati { margin-top: .6rem; display: flex; gap: .4rem; flex-wrap: wrap; }

/* Il testo originale di un intake: si legge, non si scorre all'infinito. */
.testo-grezzo {
    white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .78rem; line-height: 1.5; color: var(--testo-tenue);
    max-height: 22rem; overflow: auto;
}

/* Il numero accanto a una voce di menu o a un filtro: dice se vale la pena
   entrare, senza costringere ad aprire per scoprirlo. */
.pallino {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; margin-left: .35rem;
    border-radius: 999px; background: var(--p1); color: #fff;
    font-size: .68rem; font-weight: 700; line-height: 1;
}
.commuta-vista button.scelta .pallino { background: rgba(255, 255, 255, .25); }

/* La prima riga della richiesta sotto al titolo: il titolo scritto dal cliente
   spesso non basta a decidere se aprire. */
.anteprima {
    color: var(--testo-tenue); font-size: .8rem; margin-top: .15rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch;
}

.avviso { background: var(--p1-bg); color: var(--p1); border-radius: var(--raggio-piccolo); padding: .65rem .85rem; font-size: .87rem; margin-bottom: 1rem; }
.successo { background: var(--ok-bg); color: var(--ok); border-radius: var(--raggio-piccolo); padding: .65rem .85rem; font-size: .87rem; margin-bottom: 1rem; }

/* ---------- Blazorise ---------- */

/* Blazorise disegna le tabelle con le classi di Bootstrap: le riportiamo
   all'aspetto di table.elenco cosi le due convivono senza stridere. */
.table > :not(caption) > * > * { box-shadow: none; }
.table thead th {
    font-weight: 650; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--testo-tenue); border-bottom: 1px solid var(--bordo);
}
.table tbody td { border-bottom: 1px solid var(--bordo-tenue); vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background-color: #f8fafc; }

.card { border-color: var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); }
.card-header { background: #fff; border-bottom: 1px solid var(--bordo-tenue); font-weight: 640; }
/* Un Card con class="pannello" prende la spaziatura da .pannello: il CardBody
   interno deve restare a zero, altrimenti i due padding si sommano. */
.pannello.card > .card-body { padding: 0; }

.btn { border-radius: var(--raggio-piccolo); font-weight: 540; }
.btn-primary { background-color: var(--accento); border-color: var(--accento); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--accento-scuro); border-color: var(--accento-scuro); }
.form-control:focus, .form-select:focus { border-color: var(--accento); box-shadow: 0 0 0 3px var(--accento-chiaro); }
.modal-content { border-radius: var(--raggio); border-color: var(--bordo); }

/* ---------- Mobile ---------- */

@media (max-width: 860px) {
    .page { flex-direction: column; }
    .sidebar { width: 100%; position: static; height: auto; }
    .content { padding: 1.25rem; }
    .nav-scrollable { display: none; }
    .navbar-toggler { display: block; position: absolute; top: 1.4rem; right: 1.1rem; }
    .navbar-toggler:checked ~ .nav-scrollable { display: block; padding-bottom: .75rem; }
    .griglia { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* Su schermo stretto le colonne accessorie spariscono invece di far scorrere la
   tabella in orizzontale: con sette colonne lo scorrimento porta fuori vista
   proprio il codice, che è la colonna da cui si riconosce la riga. */
@media (max-width: 700px) {
    .solo-largo { display: none !important; }
    .barra-azioni { gap: .45rem; }
    .riga-form { grid-template-columns: 1fr; }
    .riga-form > div[style*="span 2"] { grid-column: auto !important; }
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none; left: 0; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* ---------- Repository ---------- */

/* La riga dei repository si apre sotto il progetto: e la mappa di dove sta il
   codice, e sta accanto al progetto a cui appartiene, non in una pagina a parte. */
.riga-repo { background: #fbfcfe; border-top: 1px solid var(--bordo-tenue); }
.riga-repo h3 { margin: 0 0 .6rem; }
.elenco-repo { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.elenco-repo li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .88rem; }
.elenco-repo a { font-weight: 570; }
.elenco-repo .codice { color: var(--testo-tenue); }