/* 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;
    --rilascio: #0a7ea4;
    --rilascio-bg: #e3f3f8;

    --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); }

/* Sotto-sezioni di un pannello raggruppato per cliente (es. Oggi): piu piccole
   dell'h2 del pannello, non ripetono la spaziatura di un titolo di pagina. */
.pannello h3 { font-size: .82rem; font-weight: 620; color: var(--testo-tenue); margin: 1.1rem 0 .5rem; }
.pannello h3:first-of-type { margin-top: .3rem; }

/* 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); }

/* ---------- Flusso della home ---------- */

/* Due colonne affiancate finche ci stanno davvero: sotto i 380px per colonna le
   righe del flusso (codice, cliente, quando) andrebbero a capo una per una, e a
   quel punto una colonna sola si legge meglio di due strette. */
.griglia-due {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 1rem; margin-bottom: 1.4rem; align-items: start;
}

/* Il titolo del pannello e il link a dove continua: il flusso e una finestra su
   un elenco piu lungo, e senza la via d'uscita si finisce a cercarla nel menu. */
.testa-pannello { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .35rem; }
.testa-pannello h2 { margin: 0; }
.testa-pannello a { margin-left: auto; font-size: .78rem; white-space: nowrap; }

/* Titolo di sezione fra i pannelli: separa il flusso dai conti aperti senza
   diventare un secondo h1. */
h2.sezione {
    font-size: .8rem; font-weight: 680; text-transform: uppercase; letter-spacing: .07em;
    color: var(--testo-tenue); margin: 1.8rem 0 .8rem;
}

.feed { display: flex; flex-direction: column; }

/* La voce intera e il link, non solo il titolo: il bersaglio da colpire e la
   riga che si sta leggendo. */
.voce-feed {
    display: block; color: var(--testo); padding: .7rem .55rem;
    border-top: 1px solid var(--bordo-tenue); border-left: 3px solid transparent;
    border-radius: var(--raggio-piccolo);
}
.voce-feed:first-child { border-top: 0; }
.voce-feed:hover { background: #f8fafc; text-decoration: none; color: var(--testo); }
.voce-feed:focus-visible { outline: 2px solid var(--accento); outline-offset: -2px; }
/* Il filo a sinistra dice di chi e la palla senza colorare la riga: su un elenco
   di dieci voci il colore pieno le farebbe urlare tutte insieme. */
.voce-feed.attende { border-left-color: var(--p2); }
.voce-feed.interna { border-left-color: var(--attesa); background: #fffdf5; }
.voce-feed.interna:hover { background: #fdf9ed; }

.voce-feed .riga-alta {
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
    font-size: .78rem; color: var(--testo-tenue); margin-bottom: .25rem;
}
.voce-feed .riga-alta .nome { color: var(--testo); font-weight: 620; }
.voce-feed .quando { margin-left: auto; white-space: nowrap; }
.voce-feed .titolo-feed { font-size: .9rem; font-weight: 560; line-height: 1.35; }
.voce-feed:hover .titolo-feed { color: var(--accento); }

/* Le due righe del messaggio, non una: un estratto su riga sola taglia proprio
   dove il cliente dice cosa non funziona. */
.voce-feed .citazione {
    font-size: .86rem; line-height: 1.45; color: var(--testo);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.voce-feed .riga-bassa {
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
    margin-top: .4rem; font-size: .78rem; color: var(--testo-tenue);
}
.voce-feed .riga-bassa .nome-cliente { color: var(--testo); font-weight: 560; }
.voce-feed .riga-bassa .su {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24ch;
}
.voce-feed .avatare-commento { width: 20px; height: 20px; font-size: .62rem; }
.voce-feed.interna .avatare-commento { background: var(--attesa); }

/* ---------- 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-darilasciare { background: var(--rilascio-bg); color: var(--rilascio); }
.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; }
/* Estremi della coda: il pulsante resta al suo posto invece di sparire, o la
   barra si accorcia sotto il dito proprio mentre lo si sta cercando. */
.btn-mini.spento { opacity: .4; cursor: default; }

/* Il ritorno all'elenco a sinistra, la coda a destra: la stessa riga risponde a
   "dove torno" e "quanti me ne restano". */
.navigazione-coda {
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem;
}

/* ---------- 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; }
.filtro-cliente { width: auto; flex: 0 1 14rem; }
/* Nel portale: l'ultima parola e' nostra, c'e' qualcosa da leggere. */
.risposta-arrivata { color: var(--accento); font-weight: 600; font-size: .85rem; white-space: nowrap; }

/* 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; }

/* Titolo, commutatore e "Aggiungi" su una riga: la bacheca deve partire il
   piu in alto possibile, e il sottotitolo di prima costava una riga intera. */
.testata-attivita { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .9rem; }
.testata-attivita h1 { margin: 0; }

.barra-filtri-attivita .form-select { width: auto; max-width: 15rem; }
.barra-filtri-attivita .ricerca { max-width: 17rem; }
.filtro-attivo { display: inline-flex; align-items: center; gap: .35rem; background: var(--accento-chiaro); color: var(--accento); }
.filtro-attivo button { border: 0; background: none; color: inherit; padding: 0; cursor: pointer; }

/* Una colonna per stato, affiancate. Ogni colonna scorre per conto suo e la
   pagina no: la bacheca resta intera a schermo anche con quaranta schede in
   "Da fare", e le intestazioni non escono mai di vista. */
.bacheca {
    display: grid; grid-template-columns: repeat(5, minmax(12.5rem, 1fr));
    gap: .75rem; align-items: start; overflow-x: auto; padding-bottom: .4rem;
}
.bacheca-colonna {
    position: relative; display: flex; flex-direction: column;
    background: #eef1f5; border-radius: var(--raggio); border-top: 3px solid var(--p3);
    max-height: calc(100vh - 12.5rem); min-height: 14rem;
}
.colonna-incorso { border-top-color: var(--accento); }
.colonna-inattesa { border-top-color: var(--attesa); }
.colonna-darilasciare { border-top-color: var(--rilascio); }
.colonna-fatto { border-top-color: var(--ok); }

.bacheca-colonna-titolo {
    display: flex; align-items: center; gap: .45rem; padding: .6rem .7rem .45rem;
    font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--testo-tenue);
}
.bacheca-colonna-titolo .nome { color: var(--testo); }
.bacheca-colonna-titolo .conteggio {
    background: #fff; color: var(--testo-tenue); border-radius: 999px;
    padding: .04rem .45rem; font-size: .72rem; letter-spacing: 0;
}
.bacheca-colonna-titolo .nota { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .72rem; }
.bacheca-colonna-titolo .btn-mini { padding: .1rem .45rem; }

.bacheca-cella {
    flex: 1; overflow-y: auto; min-height: 10rem;
    display: flex; flex-direction: column; gap: .5rem; padding: .15rem .5rem .6rem;
}
.bacheca-vuota {
    position: absolute; left: 0; right: 0; top: 5.5rem; text-align: center;
    color: var(--testo-tenue); font-size: .8rem; pointer-events: none; margin: 0;
}

.scheda {
    background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo);
    padding: .6rem .7rem .5rem; box-shadow: var(--ombra); cursor: grab;
    display: flex; flex-direction: column; gap: .35rem;
}
.scheda:hover { border-color: #c3d3e2; box-shadow: var(--ombra-alta); }
.scheda:active { cursor: grabbing; }
.scheda.scaduta { border-left: 3px solid var(--p1); }
.scheda.chiusa { opacity: .7; }
.scheda.chiusa .scheda-titolo { text-decoration: line-through; text-decoration-color: var(--bordo); }

.scheda-alto { display: flex; align-items: center; gap: .45rem; font-size: .75rem; }
.scheda-alto a.codice { color: var(--testo-tenue); }
.scheda-alto a.codice:hover { color: var(--accento); }
.scheda-data { color: var(--testo-tenue); white-space: nowrap; }
.scheda-data.scaduta { color: var(--p1); font-weight: 600; }

.scheda-titolo { font-size: .9rem; font-weight: 550; line-height: 1.35; color: var(--testo); }
.scheda-titolo:hover { color: var(--accento); text-decoration: none; }

.scheda-riga { font-size: .76rem; color: var(--testo-tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scheda-riga.attesa { color: var(--attesa); }
.scheda-riga .tenue { color: var(--testo-tenue); }

.scheda-basso { display: flex; align-items: center; gap: .4rem; margin-top: .1rem; min-width: 0; }
.scheda-progetto {
    display: inline-flex; align-items: center; gap: .3rem; min-width: 0; flex: 0 1 auto;
    font-size: .72rem; color: var(--testo-tenue); background: var(--p3-bg);
    border-radius: 999px; padding: .08rem .5rem;
}
.scheda-progetto .cliente { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.scheda-progetto .progetto { font-family: var(--bs-font-monospace); opacity: .8; white-space: nowrap; flex-shrink: 0; }
.scheda-progetto:hover { background: var(--accento-chiaro); color: var(--accento); text-decoration: none; }

/* La tendina compare al passaggio, o la scheda diventa una barra di comandi
   con dentro un titolo. Al tocco, dove non c'è passaggio, resta sempre
   visibile: è l'unico modo per spostare una scheda. */
.stato-scheda {
    border: 1px solid var(--bordo); border-radius: 6px; background: #fff;
    font-size: .7rem; color: var(--testo-tenue); padding: .05rem .15rem;
    max-width: 6.5rem; flex-shrink: 0;
}
/* Nascosta e non solo trasparente: invisibile ma presente si prendeva lo
   spazio del cliente, che finiva troncato a tre lettere. */
@media (hover: hover) {
    .stato-scheda { display: none; }
    .scheda:hover .stato-scheda, .scheda:focus-within .stato-scheda { display: inline-block; }
}

/* Classi che Blazorise mette durante il trascinamento. */
.bacheca .drop-zone-drag-target-active { outline: 2px dashed var(--accento); outline-offset: -4px; background: var(--accento-chiaro); border-radius: var(--raggio); }

/* Su schermi stretti una colonna per volta, a scatto: cinque colonne da 15rem
   in un telefono erano una striscia da scorrere senza sapere dove si era. */
@media (max-width: 860px) {
    .bacheca { grid-template-columns: repeat(5, 85vw); scroll-snap-type: x mandatory; }
    .bacheca-colonna { scroll-snap-align: start; max-height: calc(100vh - 16rem); }
    .barra-filtri-attivita .form-select, .barra-filtri-attivita .ricerca { max-width: none; flex: 1 1 10rem; }
}

/* ---------- 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; }

/* ---------- Visore delle immagini ---------- */

/* Le miniature hanno tutte la stessa altezza e non la stessa forma: ritagliare
   al quadrato tagliava proprio il pezzo di schermata che il cliente voleva far
   vedere. */
.miniature { margin-top: .6rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.miniatura {
    padding: 0; border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo);
    background: var(--pannello); cursor: zoom-in; overflow: hidden; line-height: 0;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.miniatura img { height: 6.5rem; width: auto; max-width: 14rem; object-fit: cover; display: block; }
.miniatura:hover { border-color: #bfd3e6; box-shadow: var(--ombra-alta); }
.miniatura:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

.visore {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(19, 26, 34, .88);
    display: flex; align-items: center; justify-content: center;
    cursor: zoom-out;
}
.visore:focus { outline: none; }
.visore-immagine {
    max-width: 92vw; max-height: 82vh; object-fit: contain; cursor: default;
    border-radius: var(--raggio); box-shadow: var(--ombra-alta);
}
.visore-barra {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; align-items: center; gap: .5rem;
    padding: .7rem .9rem; cursor: default;
    background: linear-gradient(rgba(19, 26, 34, .75), transparent);
}
.visore-barra .codice { color: #dbe3ec; }
.visore-freccia {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 2.6rem; height: 2.6rem; border-radius: 999px;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
    color: #fff; font-size: 1rem; cursor: pointer;
}
.visore-freccia:hover { background: rgba(255, 255, 255, .24); }
.visore-freccia:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.visore-freccia.sinistra { left: 1rem; }
.visore-freccia.destra { right: 1rem; }

/* Sul telefono le frecce coprirebbero l'immagine: resta lo scorrimento con le
   miniature, che li sono la cosa piu comoda da toccare. */
@media (max-width: 640px) {
    .visore-freccia { width: 2.1rem; height: 2.1rem; }
    .visore-immagine { max-width: 96vw; }
}

/* 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); }

/* ---------- Fatturazione ---------- */

/* La testa del cliente e quella del progetto sono due gerarchie: la fattura si
   fa al cliente, ma le voci si leggono per progetto. Se avessero lo stesso peso
   visivo, una pagina con quattro clienti diventerebbe un elenco piatto. */
.testa-cliente {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    padding-bottom: .7rem; margin-bottom: .2rem;
    border-bottom: 1px solid var(--bordo-tenue);
}
.testa-cliente .totale-cliente { margin-left: auto; font-size: 1.05rem; }

.testa-progetto {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .75rem .1rem .35rem; font-size: .9rem; color: var(--testo-tenue);
}
.testa-progetto span:not(.codice) { color: var(--testo); font-weight: 550; }

/* Il gesto finale resta a schermo mentre si scorre: con un elenco lungo il
   pulsante finiva sotto il fondo, e si tornava su per premerlo. */
.barra-fattura {
    position: sticky; bottom: .8rem; box-shadow: 0 -2px 12px rgba(0,0,0,.08);
    /* Sta sopra le righe: senza margine negativo il suo spazio le spingerebbe
       giu due volte, una per il flusso e una per la posizione appiccicata. */
    margin-top: -.4rem;
}

/* ---------- Ore lavorate ---------- */

.elenco-ore { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.elenco-ore li {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
    font-size: .88rem; padding-bottom: .4rem; border-bottom: 1px solid var(--bordo-tenue);
}
.elenco-ore li:last-child { border-bottom: 0; }
.elenco-ore .ore { font-weight: 600; min-width: 3.2rem; }
.elenco-ore .nota { color: var(--testo-tenue); flex: 1; }

.elenco-commit { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.elenco-commit li {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
    font-size: .88rem; padding-bottom: .4rem; border-bottom: 1px solid var(--bordo-tenue);
}
.elenco-commit li:last-child { border-bottom: 0; }
.elenco-commit .nota { color: var(--testo-tenue); flex: 1; }