/*  TexChain — portale e amministrazione
    ═══════════════════════════════════════════════════════════════════════════════════════════

    IDENTITA': «registro sigillato».

    Non e' una decorazione scelta a caso. Questo prodotto fa una cosa sola: prende una riga di
    venduto e la congela in un documento che non si modifica piu'. Gli strumenti del mestiere sono
    due, e sono i due colori:

      indaco   e' la tintura del tessile — il pigmento con cui si tinge da millenni. E' il marchio.
      ottone   e' il colore del sigillo, del punzone, della matrice metallica. Si usa SOLO per cio'
               che e' provato: firma verificata, digest ancorato, passaporto emesso. Speso in un
               punto solo resta un segnale; speso su tutto diventa un tema.

    I neutri hanno una punta di indaco invece di essere grigi puri: un grigio esatto sembra non
    scelto. Tipografia: Archivo (variabile, ospitata in locale) per l'interfaccia, IBM Plex Mono
    per identificativi, impronte e quantita' — la voce dello strumento che legge un valore.

    ⚠️ PERCHE' I CARATTERI SONO OSPITATI IN LOCALE E NON PRESI DA GOOGLE FONTS. Questo portale
    girera' anche su una macchina in azienda dietro un firewall. Un <link> a fonts.googleapis.com
    non da' errore quando non passa: ripiega in silenzio sul carattere di sistema, e la pagina
    diventa un'altra pagina senza che nessuno sappia perche'. 84 KB in wwwroot/lib/fonts chiudono
    la questione per sempre.

    ───────────────────────────────────────────────────────────────────────────────────────────
    STRUTTURA DEI TEMI, e va rispettata alla lettera.

      :root                                   il tema CHIARO completo. Ogni colore nasce qui.
      @media (prefers-color-scheme: dark)
        :root:not([data-theme="light"])        solo i token, ridefiniti
      :root[data-theme="dark"]                solo i token, ridefiniti

    Nessun colore deve avere la sua UNICA definizione dentro un @media o un [data-theme]: chi
    guarda con l'impostazione «sistema» non ha nessun attributo sulla radice, e un colore definito
    solo la' non si applica mai — si ottiene il testo di un tema sul fondo dell'altro. I componenti
    citano token, mai valori letterali.
*/

/* ══════════════════════════════════════════════════════════════════ caratteri */

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("lib/fonts/archivo-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("lib/fonts/archivo-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                   U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("lib/fonts/plexmono-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("lib/fonts/plexmono-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ══════════════════════════════════════════════════════════════════ token: tema chiaro */

:root {
    color-scheme: light;

    /* ---- indaco: il marchio. E' la tintura, non un accento generico. ---- */
    --indigo-900: #1c2050;
    --indigo-800: #262c68;
    --indigo-700: #333b86;
    --indigo-600: #414aa4;
    --indigo-500: #525cc4;
    --indigo-400: #7d86d8;
    --indigo-300: #9aa2e4;
    --indigo-200: #c2c7ef;
    --indigo-100: #e5e7f8;
    --indigo-050: #f1f2fb;

    /* ---- ottone: il sigillo. Solo su cio' che e' provato. ---- */
    --brass-700: #7a5c1f;
    --brass-600: #96712a;
    --brass-500: #b98f36;
    --brass-200: #ecd9a8;
    --brass-050: #faf3e2;

    /* ---- superfici: il piano di lavoro ---- */
    --ground:       #f4f5f9;
    --surface:      #ffffff;
    --surface-2:    #eceef6;
    --surface-3:    #e0e3f0;
    --surface-sunk: #f8f9fc;

    /* ---- inchiostro ---- */
    --ink:       #161a2e;
    --ink-soft:  #4a5169;
    --ink-faint: #757c96;
    --ink-ghost: #a2a8bd;

    --rule:      #dcdfec;
    --rule-soft: #e8eaf3;
    --rule-hard: #c6cbdd;

    /* ---- ruoli d'azione ---- */
    --accent:       var(--indigo-700);
    --accent-hover: var(--indigo-800);
    --accent-ink:   #ffffff;
    --accent-soft:  var(--indigo-100);
    --accent-line:  var(--indigo-300);

    --seal:      var(--brass-700);
    --seal-ink:  #ffffff;
    --seal-soft: var(--brass-050);
    --seal-line: var(--brass-200);

    /* ---- stati. Distinti dall'ottone: «provato» non e' «andato bene». ---- */
    --ok:        #1f6b46;
    --ok-soft:   #e4f2ea;
    --ok-line:   #a9d6bf;
    --warn:      #8a5a10;
    --warn-soft: #fbf1de;
    --warn-line: #e6cd97;
    --stop:      #9d2f27;
    --stop-soft: #fbeae8;
    --stop-line: #eab8b3;
    --info:      #1b5a86;
    --info-soft: #e4eff7;
    --info-line: #a8cce4;

    /*  ---- barra di navigazione ----

        ⚠️ SEGUE IL TEMA, e prima no: era scura in entrambi, «per dare un'ancora all'impianto». Era
        una decisione mia e l'utente l'ha letta per quello che sembrava — un difetto: «il menu a
        sinistra rimane nero anche su tema chiaro». Aveva ragione: se l'utente chiede il tema chiaro
        e un terzo dello schermo resta nero, il tema chiaro non è stato applicato. Un'eccezione che
        va spiegata a chi guarda non è un'identità, è un'incoerenza.

        Il carattere resta: la barra è comunque la superficie più satura della pagina, e la riga
        attiva porta il filo di ordito in indaco. Cambia il fondo, non la grammatica.             */
    --rail-bg:      #eceef6;
    --rail-bg-deep: #e3e6f1;
    --rail-line:    rgba(51, 59, 134, .13);
    --rail-ink:     #4a5169;
    --rail-ink-str: #161a2e;
    --rail-hover:   rgba(51, 59, 134, .07);
    --rail-active:  rgba(51, 59, 134, .13);

    /* ---- profondita': bordi prima delle ombre ---- */
    --sh-0: none;
    --sh-1: 0 1px 2px rgba(22, 26, 46, .05);
    --sh-2: 0 1px 3px rgba(22, 26, 46, .07), 0 8px 20px -14px rgba(22, 26, 46, .16);
    --sh-3: 0 2px 6px rgba(22, 26, 46, .08), 0 18px 44px -22px rgba(22, 26, 46, .26);

    /* ---- forma: angoli piccoli. Niente pillole tranne dove serve un cerchio. ---- */
    --r-xs:   3px;
    --r:      5px;
    --r-lg:   8px;
    --r-pill: 999px;
    --radius: var(--r);            /* alias storico: le pagine lo citano */

    /* ---- misure ---- */
    --rail-w:     240px;
    --rail-w-min: 62px;
    --top-h:      56px;
    --gap:        16px;

    /* ---- tipografia ---- */
    --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* ---- movimento ---- */
    --t-fast: 130ms cubic-bezier(.2, 0, .2, 1);
    --t-mid:  220ms cubic-bezier(.16, 1, .3, 1);
}

/* ══════════════════════════════════════════════════════════════════ token: tema scuro

   Non e' un'inversione. La barra resta quasi nera, il piano di lavoro diventa un indaco-slate
   profondo, e l'ottone si schiarisce perche' un ottone scuro su fondo scuro non si vede.       */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --indigo-100: #262c68;
        --indigo-050: #1d2148;

        --brass-200: #6a5020;
        --brass-050: #241c0c;

        --ground:       #0f111f;
        --surface:      #171a2b;
        --surface-2:    #1e2235;
        --surface-3:    #272c42;
        --surface-sunk: #131624;

        --ink:       #e8eaf4;
        --ink-soft:  #a8afc6;
        --ink-faint: #7d849c;
        --ink-ghost: #5c6379;

        --rule:      #2a2f45;
        --rule-soft: #22263a;
        --rule-hard: #3a4059;

        /*  L'indaco chiaro su fondo scuro: quello scuro non si leggerebbe. E il testo
            sull'accento torna scuro, perche' su un indaco chiaro il bianco non tiene.  */
        --accent:       #9aa2e4;
        --accent-hover: #b2b8ec;
        --accent-ink:   #12142a;
        --accent-soft:  #232847;
        --accent-line:  #414aa4;

        --seal:      #d9b163;
        --seal-ink:  #241c0c;
        --seal-soft: #251d0d;
        --seal-line: #5e4818;

        --ok:        #74c39a;
        --ok-soft:   #14261d;
        --ok-line:   #2c5641;
        --warn:      #d8b269;
        --warn-soft: #25200f;
        --warn-line: #5a4a1e;
        --stop:      #e58c85;
        --stop-soft: #2a1a19;
        --stop-line: #5f3330;
        --info:      #7cb6dd;
        --info-soft: #12222e;
        --info-line: #2e4d64;

        --rail-bg:      #0d0f1c;
        --rail-bg-deep: #090a15;
        --rail-line:    rgba(154, 162, 228, .14);
        --rail-ink:     #969db8;
        --rail-ink-str: #e7e9f5;
        --rail-hover:   rgba(154, 162, 228, .10);
        --rail-active:  rgba(82, 92, 196, .26);

        --sh-1: 0 1px 2px rgba(0, 0, 0, .40);
        --sh-2: 0 1px 3px rgba(0, 0, 0, .45), 0 8px 20px -14px rgba(0, 0, 0, .70);
        --sh-3: 0 2px 6px rgba(0, 0, 0, .50), 0 18px 44px -22px rgba(0, 0, 0, .80);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --indigo-100: #262c68;
    --indigo-050: #1d2148;

    --brass-200: #6a5020;
    --brass-050: #241c0c;

    --ground:       #0f111f;
    --surface:      #171a2b;
    --surface-2:    #1e2235;
    --surface-3:    #272c42;
    --surface-sunk: #131624;

    --ink:       #e8eaf4;
    --ink-soft:  #a8afc6;
    --ink-faint: #7d849c;
    --ink-ghost: #5c6379;

    --rule:      #2a2f45;
    --rule-soft: #22263a;
    --rule-hard: #3a4059;

    --accent:       #9aa2e4;
    --accent-hover: #b2b8ec;
    --accent-ink:   #12142a;
    --accent-soft:  #232847;
    --accent-line:  #414aa4;

    --seal:      #d9b163;
    --seal-ink:  #241c0c;
    --seal-soft: #251d0d;
    --seal-line: #5e4818;

    --ok:        #74c39a;
    --ok-soft:   #14261d;
    --ok-line:   #2c5641;
    --warn:      #d8b269;
    --warn-soft: #25200f;
    --warn-line: #5a4a1e;
    --stop:      #e58c85;
    --stop-soft: #2a1a19;
    --stop-line: #5f3330;
    --info:      #7cb6dd;
    --info-soft: #12222e;
    --info-line: #2e4d64;

    --rail-bg:      #0d0f1c;
    --rail-bg-deep: #090a15;
    --rail-line:    rgba(154, 162, 228, .14);
    --rail-ink:     #969db8;
    --rail-ink-str: #e7e9f5;
    --rail-hover:   rgba(154, 162, 228, .10);
    --rail-active:  rgba(82, 92, 196, .26);

    --sh-1: 0 1px 2px rgba(0, 0, 0, .40);
    --sh-2: 0 1px 3px rgba(0, 0, 0, .45), 0 8px 20px -14px rgba(0, 0, 0, .70);
    --sh-3: 0 2px 6px rgba(0, 0, 0, .50), 0 18px 44px -22px rgba(0, 0, 0, .80);
}

/* ══════════════════════════════════════════════════════════════════ base */

*, *::before, *::after { box-sizing: border-box; }

html {
    font-family: var(--font);
    /*  Cifre a larghezza fissa in tutta l'applicazione. Qui si leggono quantita', conteggi e
        progressivi in colonna: con le cifre proporzionali le colonne non si allineano e un
        numero che cambia fa ballare la riga.                                                  */
    font-variant-numeric: tabular-nums;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--ground);
    color: var(--ink);
    font-size: 14.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; letter-spacing: -.018em; text-wrap: balance; font-weight: 640; }
h1 { font-size: 25px; line-height: 1.2; }
h2 { font-size: 17.5px; line-height: 1.3; }
h3 { font-size: 14.5px; }
h4 { font-size: 13px; }

p { margin: 0 0 .75em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 20px 0; }

code, .mono {
    font-family: var(--font-mono);
    font-size: .885em;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/*  ⚠️ NIENTE ANELLO SU CIO' CHE RICEVE IL FUOCO DA PROGRAMMA.

    <FocusOnNavigate Selector="h1" /> mette il fuoco sul titolo a ogni navigazione — serve a un
    lettore di schermo, che altrimenti dopo un cambio pagina resta dove era. Ma Chromium considera
    quel fuoco «visibile», e il risultato era un rettangolo blu attorno al titolo di OGNI pagina:
    e' il riquadro che si vedeva nelle fotografie del portale e che sembrava un errore di stile.

    Si esclude per tabindex="-1", che e' esattamente il segno «raggiungibile da programma, non con
    il tasto Tab»: chi naviga da tastiera continua a vedere l'anello su tutto il resto.          */
[tabindex="-1"]:focus-visible { outline: none; }

::selection { background: var(--accent-soft); color: var(--ink); }

/*  La barra di scorrimento nel tema scuro: senza questo resta chiara e taglia la pagina in due. */
* { scrollbar-color: var(--rule-hard) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--rule-hard);
    border-radius: var(--r-pill);
    border: 3px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-ghost); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ══════════════════════════════════════════════════════════════════ struttura */

.shell {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    min-height: 100vh;
}

.shell > main { min-width: 0; display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- la barra laterale */

.sidebar {
    background: var(--rail-bg);
    color: var(--rail-ink);
    border-right: 1px solid var(--rail-line);
    display: flex;
    flex-direction: column;
    padding: 0 0 14px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    height: var(--top-h);
    padding: 0 16px;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--rail-line);
    background: var(--rail-bg-deep);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.02em;
    color: var(--rail-ink-str);
    white-space: nowrap;
}

/*  Il marchio e' un componente SVG (<BrandMark />), non una regola di stile.

    Era una `<span>` disegnata con quattro `linear-gradient`. Funzionava, e per questo e' rimasta
    cosi' a lungo — ma un segno disegnato in CSS non si puo' mettere in un favicon, non scala in
    stampa, e chi aggiungeva una pagina nuova non sapeva di dover ricopiare quel blocco. Risultato:
    il marchio c'era nel recupero password e non nell'accesso, cioe' mancava sulla prima pagina che
    chiunque vede.

    Qui resta solo cio' che riguarda la POSIZIONE dell'SVG nel suo contenitore. I colori stanno nel
    componente, e `BrandColourTests` verifica che restino gli stessi del foglio e del favicon.    */
.brand-mark {
    flex: 0 0 auto;
    display: block;
    border-radius: var(--r-xs);
}

.brand small {
    font-weight: 550;
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--indigo-300);
    align-self: center;
    margin-top: 1px;
}

.nav-scroll { flex: 1 1 auto; padding: 10px 10px 0; display: flex; flex-direction: column; gap: 1px; }

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--r);
    color: var(--rail-ink);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    position: relative;
    transition: background var(--t-fast), color var(--t-fast);
}

.nav-link > i { font-size: 15px; width: 18px; text-align: center; flex: 0 0 auto; opacity: .85; }

.nav-link:hover { background: var(--rail-hover); color: var(--rail-ink-str); text-decoration: none; }

/*  ⚠️ Il colore della riga attiva viene da un TOKEN e non da #ffffff. Con la barra chiara, il
    bianco su un indaco al 13% è illeggibile: era il difetto nascosto dentro «la barra è sempre
    scura», e si vede solo il giorno in cui la barra non lo è più.                                */
.nav-link.active { background: var(--rail-active); color: var(--rail-ink-str); font-weight: 600; }
.nav-link.active > i { opacity: 1; }

/*  La riga attiva porta un filo di ordito a sinistra: sta usando la stessa grammatica del
    marchio, non un bordo colorato messo li' per far vedere qualcosa.                          */
.nav-link.active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--indigo-500);
}

.nav-link .nav-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: var(--r-pill);
    background: rgba(154, 162, 228, .16);
    color: var(--indigo-300);
}

.nav-link .nav-count.is-hot { background: var(--brass-500); color: #241c0c; }

/*  Le voci dell'azienda quando un'azienda non e' ancora scelta: si vedono e si premono, ma si
    dice che manca un passaggio. Smorzarle e' meglio che nasconderle - una voce nascosta non
    insegna che esiste, una voce smorzata dice «prima scegli».                                  */
.nav-attesa { opacity: .55; }
.nav-attesa .nav-link:hover { opacity: 1; }

.nav-group {
    padding: 18px 10px 5px;
    font-size: 9.5px;
    font-weight: 650;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-ghost);
}

.sidebar-foot {
    flex: 0 0 auto;
    margin: 12px 10px 0;
    padding-top: 12px;
    border-top: 1px solid var(--rail-line);
    font-size: 11px;
    color: var(--ink-ghost);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* ---------------------------------------------------------------- la barra in alto */

.topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--top-h);
    padding: 0 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 30;
    flex: 0 0 auto;
}

.topbar-spacer { flex: 1 1 auto; }
.topbar-tools { display: flex; align-items: center; gap: 4px; }

/*  Il contesto: quale azienda si sta guardando. Sta a sinistra perche' e' la prima cosa da
    sapere prima di leggere qualunque numero della pagina.                                      */
.ctx { display: flex; align-items: center; gap: 9px; min-width: 0; position: relative; }

/*  Il contesto e' un PULSANTE, sempre. Prima era un testo quando l'azienda era scelta e una
    pastiglia morta quando non lo era: in entrambi i casi non si poteva premere, e la scelta si
    faceva solo dal cruscotto. Da qui si apre l'elenco da qualunque pagina.                      */
.ctx-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 46ch;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: var(--r);
    background: transparent;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
}

.ctx-btn:hover { background: var(--surface-2); border-color: var(--rule); }
.ctx-btn.is-open { background: var(--accent-soft); border-color: var(--accent-line); }
.ctx-freccia { font-size: 11px; color: var(--ink-faint); }

.ctx-name {
    font-weight: 650; font-size: 14.5px; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/*  Senza azienda scelta il contesto e' un invito e non una constatazione: colore dell'accento,
    non grigio. «Nessuna azienda scelta» in grigio descrive un problema; «Scegli l'azienda» in
    indaco dice cosa fare.                                                                       */
.ctx-scegli { color: var(--accent); display: inline-flex; align-items: center; gap: 7px; }
.ctx-code { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }

/* La tendina del contesto si apre a sinistra, sotto il pulsante. */
.pop-ctx { left: 0; right: auto; min-width: 264px; }

/* pulsante icona della barra: campanella, lingua, tema, utente */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    min-width: 32px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--r);
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    position: relative;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.icon-btn > i { font-size: 16px; line-height: 1; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.icon-btn.is-open { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--r-pill);
    background: var(--indigo-700);
    color: #fff;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .02em;
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------- l'area di lavoro */

/*  ⚠️ NESSUN LIMITE DI LARGHEZZA. C'era `max-width: 1560px`, e su uno schermo largo lasciava una
    fascia vuota a destra mentre le griglie del venduto e dei passaporti - che hanno otto o nove
    colonne - dovevano comprimersi. Corretto dall'utente guardando la pagina.

    Non e' un limite che serviva alla leggibilita': il testo lungo ha il proprio limite dove sta,
    `.page-head p` e `.prose` a 78-84 caratteri, che e' il posto giusto per metterlo. Limitare il
    CONTENITORE stringe anche le tabelle, che di spazio ne vogliono tutto.                        */
.content {
    flex: 1 1 auto;
    padding: 22px 24px 72px;
    width: 100%;
    min-width: 0;
}

/* ══════════════════════════════════════════════════════════════════ il piede */

/*  Discreto di proposito: dice chi ha fatto il programma e quale versione, e non deve competere
    con il contenuto. Il colore e' --ink-faint, cioe' leggibile ma chiaramente secondario.        */
.app-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 14px 24px 18px;
    border-top: 1px solid var(--rule-soft);
    font-size: 12.5px;
    color: var(--ink-faint);
}

/*  Dentro il guscio i due lati si allontanano; sotto la scheda di accesso restano al centro,
    perche' la' non c'e' una larghezza da riempire.                                              */
main > .app-foot {
    justify-content: space-between;
}

.app-foot-app,
.app-foot-by {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.app-foot-name {
    font-weight: 600;
    color: var(--ink-soft);
}

.app-foot-ver {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: -0.01em;
}

.app-foot-sep {
    color: var(--ink-ghost);
}

/*  ⚠️ FONDO LETTERALE, E QUI E' UNA DECISIONE E NON UNA DIMENTICANZA.

    Il logo e' un PNG con il lettering CHIARO (#e0e0e0 dominante, accenti #2080e0): e' fatto per
    fondi scuri e su bianco sparisce. Campionato sul file vero, non dedotto. Quindi la targa deve
    essere scura in ENTRAMBI i temi, e un token cambierebbe con il tema portandosi via il logo nel
    tema chiaro. Se un giorno arriva una versione del logo per fondi chiari, questa regola diventa
    due regole a tema e il letterale sparisce.                                                    */
.app-foot-brand {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 6px;
    background: #111629;
    line-height: 0;
    transition: background 120ms ease, box-shadow 120ms ease;
}

.app-foot-brand:hover,
.app-foot-brand:focus-visible {
    background: #1b2242;
    box-shadow: 0 0 0 1px var(--accent-line);
}

.app-foot-brand img {
    display: block;
    height: 20px;
    width: auto;
}

/*  Sotto i 34rem i due lati si impilano: su un telefono la riga unica manderebbe il logo a capo
    da solo, con il testo appiccicato al bordo.                                                   */
@media (max-width: 34rem) {
    main > .app-foot {
        justify-content: center;
    }
}

/*  Intestazione di pagina: sopravvento, titolo, una riga che dice a cosa serve, e le azioni a
    destra. Un archetipo solo per tutte le pagine, cosi' due pagine non divergono.              */
.page-head {
    display: flex;
    align-items: flex-start;
    gap: var(--gap);
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.page-head > .grow { flex: 1 1 340px; min-width: 0; }
.page-head .eyebrow { margin-bottom: 3px; }
.page-head p { color: var(--ink-soft); font-size: 13.5px; max-width: 84ch; margin: 5px 0 0; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* ---------------------------------------------------------------- adattamento */

@media (max-width: 1180px) {
    :root { --rail-w: var(--rail-w-min); }
    .brand small,
    .nav-link span,
    .nav-group,
    .sidebar-foot { display: none; }
    .nav-link { justify-content: center; padding: 9px 0; }
    .nav-link .nav-count {
        position: absolute; top: 1px; right: 3px; margin: 0; padding: 0 4px; font-size: 9px;
    }
    .brand { justify-content: center; padding: 0; }
}

@media (max-width: 820px) {
    .shell { grid-template-columns: minmax(0, 1fr); }
    .sidebar {
        position: static; height: auto; flex-direction: row; align-items: center;
        overflow-x: auto; padding: 0 8px; border-right: 0;
        border-bottom: 1px solid var(--rail-line);
    }
    .brand { border-bottom: 0; background: transparent; }
    .nav-scroll { flex-direction: row; padding: 0 4px; gap: 2px; }
    .nav-link.active::before {
        left: 6px; right: 6px; top: auto; bottom: 0; width: auto; height: 2px;
        border-radius: 2px 2px 0 0;
    }
    .content { padding: 18px 14px 56px; }
    .topbar { padding: 0 14px; }
}

/* ══════════════════════════════════════════════════════════════════ superfici */

.card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r);
    box-shadow: var(--sh-1);
}

.card-pad { padding: 16px 18px; }

.card-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 18px; border-bottom: 1px solid var(--rule-soft);
}
.card-head h2 { flex: 1 1 auto; }
.card-foot { padding: 10px 18px; border-top: 1px solid var(--rule-soft); background: var(--surface-sunk); }

.cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.cards-narrow { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }

.prose { max-width: 78ch; color: var(--ink-soft); font-size: 13.5px; }
.prose strong { color: var(--ink); font-weight: 620; }

/* ---------------------------------------------------------------- metriche */

/*  Le metriche non sono scatole tutte uguali: portano un'etichetta, il numero, e - quando ne
    esiste uno - un segno di stato. Il colore dice che genere di numero e', non che e' importante.
    ⚠️ `.stats` e `.stat` restano i nomi di prima: cambiarli vorrebbe dire toccare ogni pagina.  */
.stats {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--sh-1);
}

.stat {
    background: var(--surface);
    padding: 12px 15px 13px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    position: relative;
}

.stat .k {
    order: 1;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.stat .n {
    order: 2;
    font-size: 24px;
    font-weight: 680;
    line-height: 1.15;
    letter-spacing: -.03em;
    color: var(--ink);
}

.stat .h { order: 3; font-size: 11.5px; color: var(--ink-ghost); }

.stat::after {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: transparent;
}

.stat.ok   .n { color: var(--ok); }    .stat.ok::after   { background: var(--ok-line); }
.stat.warn .n { color: var(--warn); }  .stat.warn::after { background: var(--warn-line); }
.stat.stop .n { color: var(--stop); }  .stat.stop::after { background: var(--stop-line); }
.stat.seal .n { color: var(--seal); }  .stat.seal::after { background: var(--seal-line); }

/* ══════════════════════════════════════════════════════════════════ moduli */

.filters {
    display: grid;
    gap: 11px;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    align-items: end;
}

label.field, .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 550;
    color: var(--ink-soft);
    min-width: 0;
}

/*  PER ESCLUSIONE E NON PER ELENCO.

    La versione precedente elencava i tipi da stilizzare - text, date, password, select - e il
    giorno in cui e' comparso un input[type="email"] quel campo ha preso lo stile predefinito del
    browser: bordo diverso, altezza diversa, larghezza diversa da quello accanto. Un elenco di
    tipi e' una lista che si dimentica di aggiornare, e il difetto si vede solo guardando la
    pagina. Corretto dall'utente, non da un test.

    Si escludono i tipi che NON sono caselle di testo, e tutto il resto - email, tel, number,
    search, url, e qualunque tipo che i browser aggiungeranno - eredita lo stile giusto.        */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="range"]):not([type="color"]),
textarea,
select {
    font: inherit;
    font-size: 13.5px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule-hard);
    border-radius: var(--r);
    padding: 7px 9px;
    min-width: 0;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

textarea { line-height: 1.5; resize: vertical; }

/*  Dentro un'etichetta a colonna il campo occupa tutta la larghezza. Senza questo, un input con
    una larghezza intrinseca propria - email e number ce l'hanno - resta piu' corto di quello
    accanto, ed e' esattamente come si presentava il modulo di accesso.                        */
label.field > input,
label.field > select,
label.field > textarea,
.field > input,
.field > select,
.field > textarea { width: 100%; }

input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
    border-color: var(--ink-ghost);
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

input:disabled, select:disabled, textarea:disabled {
    background: var(--surface-2); color: var(--ink-faint); cursor: not-allowed;
}

input::placeholder, textarea::placeholder { color: var(--ink-ghost); }

/*  LA NOTA CHE SPIEGA IL CAMPO SOPRA.

    ⚠️ ESISTE PERCHE' QUELLE NOTE ERANO SCRITTE A MANO CON UN MARGINE NEGATIVO:
    `style="font-size:12.5px; margin:-6px 0 14px;"`, tarato a occhio contro il foglio di stile
    precedente. Cambiato il foglio, quel -6px ha tirato il testo DENTRO il controllo: sul modulo
    dell'azienda la spiegazione della granularita' passava sotto la tendina e la prima riga si
    leggeva attraverso il bordo. Misurato: sovrapposizione di 6px sul margine, piu' lo scarto fra
    l'altezza disegnata e quella occupata dal componente Telerik.

    Un valore negativo scritto in una pagina e' una taratura contro uno stato del foglio di stile
    che nessuno ha dichiarato. Da classe, la distanza la decide il foglio - e cambiando il foglio
    cambia in tutti i posti insieme.                                                             */
.field-note {
    margin: 6px 0 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-faint);
    max-width: 78ch;
}

.field-note strong { color: var(--ink-soft); font-weight: 620; }

/*  ⚠️ I CONTROLLI TELERIK ALLA STESSA ALTEZZA DEI NOSTRI.

    Misurato sul modulo dell'azienda: i nostri campi 37px, la tendina Telerik 30. In un modulo con
    due colonne quello scarto si vede subito - una riga di campi non e' allineata con quella
    accanto - e sposta in su tutto cio' che segue. Si fissa l'altezza minima invece del padding,
    perche' i componenti Telerik la compongono in modi diversi (una tendina ha un pulsante dentro,
    una casella no) e imporre il padding li deforma.                                             */
.k-input, .k-picker {
    min-height: 37px;
}

.k-input-inner, .k-picker .k-input-inner {
    padding-block: 6px;
}

/*  L'elenco dei requisiti che si spuntano mentre si digita.

    ⚠️ Ogni requisito su una riga sua, e non tutti in una frase. La politica ha cinque regole: un
    messaggio che le elenca insieme costringe chi legge a confrontare la propria password con
    l'elenco a mente, e non dice quali sono gia' soddisfatte. Cinque righe con una spunta lo dicono
    senza doverlo leggere.                                                                       */
.regole {
    list-style: none;
    margin: 6px 0 14px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2px 14px;
    font-size: 12.5px;
}

.regole > li { display: flex; align-items: center; gap: 6px; }
.regole > li > i { font-size: 13px; width: 14px; text-align: center; }
.regole > li.ok { color: var(--ok); }
.regole > li.no { color: var(--ink-faint); }

.hint { font-size: 11.5px; color: var(--ink-faint); font-weight: 400; }
.hint-err { color: var(--stop); }

/* ---------------------------------------------------------------- pulsanti */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    padding: 8px 14px;
    border-radius: var(--r);
    border: 1px solid var(--rule-hard);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.btn > i { font-size: 14px; }
.btn:hover { background: var(--surface-2); border-color: var(--ink-ghost); text-decoration: none; }
.btn:active { background: var(--surface-3); }

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }

.btn-seal { background: var(--seal); border-color: var(--seal); color: var(--seal-ink); }
.btn-seal:hover { filter: brightness(1.08); background: var(--seal); border-color: var(--seal); color: var(--seal-ink); }

.btn-quiet { border-color: transparent; background: transparent; color: var(--ink-soft); }
.btn-quiet:hover { background: var(--surface-2); color: var(--ink); border-color: transparent; }

.btn-danger { color: var(--stop); border-color: var(--stop-line); background: var(--stop-soft); }
.btn-danger:hover { background: var(--stop); color: #fff; border-color: var(--stop); }

.btn-sm { font-size: 12.5px; padding: 5px 10px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/*  ⚠️ UN'ANCORA USATA COME PULSANTE VA DIFESA DAI FOGLI DEI COMPONENTI.

    Il pulsante «Vedi» nell'elenco passaporti aveva fondo indaco e testo indaco: illeggibile.
    Notato dall'utente in una fotografia, e la causa non e' un token sbagliato - `--accent-ink` e'
    bianco nel tema chiaro e scuro in quello scuro, come deve essere. E' la SPECIFICITA': Kendo
    colora i link dentro la griglia con `.k-grid a`, che vale 0,1,1 e batte `.btn-primary`, che
    vale 0,1,0. Il colore del pulsante veniva semplicemente scartato.

    Si risolve dichiarando il colore su `a.btn.<variante>` (0,2,1), che vince su qualunque foglio
    di componente, invece di combattere selettore per selettore: la prossima ancora-pulsante che
    qualcuno mette dentro un componente Telerik nasce giusta senza saperlo.                       */
a.btn, a.btn:hover, a.btn:visited { text-decoration: none; color: var(--ink); }
a.btn.btn-primary, a.btn.btn-primary:hover { color: var(--accent-ink); }
a.btn.btn-seal, a.btn.btn-seal:hover { color: var(--seal-ink); }
a.btn.btn-quiet, a.btn.btn-quiet:hover { color: var(--ink-soft); }
a.btn.btn-danger { color: var(--stop); }
a.btn.btn-danger:hover { color: #ffffff; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.link-btn {
    border: 0; background: none; padding: 0; font: inherit; font-size: inherit;
    color: var(--accent); cursor: pointer; text-decoration: none;
}
.link-btn:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- pastiglie di stato */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: var(--r-xs);
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.3;
}

.pill-ok     { background: var(--ok-soft);     color: var(--ok);     border-color: var(--ok-line); }
.pill-warn   { background: var(--warn-soft);   color: var(--warn);   border-color: var(--warn-line); }
.pill-stop   { background: var(--stop-soft);   color: var(--stop);   border-color: var(--stop-line); }
.pill-info   { background: var(--info-soft);   color: var(--info);   border-color: var(--info-line); }
.pill-mute   { background: var(--surface-2);   color: var(--ink-faint); border-color: var(--rule); }
.pill-seal   { background: var(--seal-soft);   color: var(--seal);   border-color: var(--seal-line); }
.pill-accent { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }

/* ---------------------------------------------------------------- avvisi */

/*  ⚠️ BLOCCO E NON FLEX, e ci si e' arrivati guardando una frase spezzata.

    Con `display: flex`, in un contenitore flex OGNI TRATTO DI TESTO diventa un elemento anonimo a
    se'. Un avviso scritto cosi':

        <div class="alert">Il codice e' <strong>obbligatorio</strong>: sei amministratore.</div>

    produce TRE elementi flex, e il `gap` li allontana: in pagina si leggeva
    «obbligatorio   : sei amministratore», con la punteggiatura staccata dalla parola. Non e' un
    difetto di quella pagina - e' il foglio di stile che impone una struttura (`<i>` + `<div>`) che
    il resto del codice non sa di dover rispettare.

    Da blocco il testo scorre normalmente, qualunque sia il markup, e l'icona iniziale sta a
    sinistra con un `float`. Regge sia `<i>` + `<div>` sia testo nudo.                            */
.alert {
    display: block;
    padding: 11px 13px;
    border-radius: var(--r);
    font-size: 13.5px;
    line-height: 1.5;
    border: 1px solid var(--stop-line);
    border-left-width: 3px;
    background: var(--stop-soft);
    color: var(--ink);
}

.alert::after { content: ""; display: block; clear: both; }

.alert > i:first-child {
    float: left;
    font-size: 16px;
    line-height: 1.35;
    color: var(--stop);
    margin: 1px 9px 0 0;
}
.alert strong { font-weight: 640; }

.alert-info { border-color: var(--info-line); background: var(--info-soft); }
.alert-info > i:first-child { color: var(--info); }
.alert-ok { border-color: var(--ok-line); background: var(--ok-soft); }
.alert-ok > i:first-child { color: var(--ok); }
.alert-warn { border-color: var(--warn-line); background: var(--warn-soft); }
.alert-warn > i:first-child { color: var(--warn); }
.alert-seal { border-color: var(--seal-line); background: var(--seal-soft); }
.alert-seal > i:first-child { color: var(--seal); }

/* ══════════════════════════════════════════════════════════════════ tabelle nostre */

.table-scroll { overflow-x: auto; border-radius: var(--r); }

table.grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }

table.grid th, table.grid td {
    padding: 7px 12px;
    text-align: left;
    border-bottom: 1px solid var(--rule-soft);
    white-space: nowrap;
}

table.grid thead th {
    position: sticky;
    top: 0;
    background: var(--surface-2);
    border-bottom: 1px solid var(--rule);
    font-size: 9.5px;
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    z-index: 1;
}

table.grid tbody tr { transition: background var(--t-fast); }
table.grid tbody tr:hover { background: var(--accent-soft); }
table.grid tbody tr:last-child td { border-bottom: none; }
table.grid td.n { text-align: right; font-family: var(--font-mono); }
table.grid th.n { text-align: right; }
table.grid td.mono { font-family: var(--font-mono); font-size: 12px; }
table.grid td.wrap { white-space: normal; max-width: 280px; }
table.grid td.act { text-align: right; }

.muted { color: var(--ink-faint); }
.faint { color: var(--ink-ghost); }
.nowrap { white-space: nowrap; }

.empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--ink-faint);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.empty > i { font-size: 26px; color: var(--ink-ghost); }

/* ══════════════════════════════════════════════════════════════════ campanella */

/*  Le notifiche. Il pallino conta i NON LETTI: se contasse gli aperti, «segna tutte come lette»
    sembrerebbe non fare niente.                                                                */
.bell { position: relative; }

.bell-dot {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--r-pill);
    background: var(--stop);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--surface);
}

.bell-backdrop { position: fixed; inset: 0; z-index: 40; }

.bell-panel {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 41;
    width: min(384px, calc(100vw - 28px));
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
    overflow: hidden;
    animation: pop var(--t-mid) both;
}

@keyframes pop {
    from { opacity: 0; transform: translateY(-5px) scale(.99); }
    to   { opacity: 1; transform: none; }
}

.bell-panel-head {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid var(--rule-soft);
    background: var(--surface-sunk);
    font-size: 10px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-faint);
}
.bell-panel-head > span:first-child { flex: 1 1 auto; }
.bell-panel-head .link-btn { font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 550; }

.bell-list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }

.bell-item {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 14px;
    border-bottom: 1px solid var(--rule-soft);
    position: relative;
}
.bell-item:last-child { border-bottom: 0; }
.bell-item:hover { background: var(--surface-sunk); }

.bell-item.is-unread::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent);
}

.bell-check {
    flex: 0 0 auto; margin-top: 1px;
    width: 20px; height: 20px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--r-pill); background: transparent;
    color: var(--ink-ghost); cursor: pointer; font-size: 13px;
}
.bell-check:hover { background: var(--ok-soft); color: var(--ok); }

.bell-item-body {
    flex: 1 1 auto; min-width: 0; cursor: pointer;
    display: flex; flex-direction: column; gap: 2px;
}
.bell-item-title { font-size: 13px; font-weight: 600; display: flex; align-items: baseline; gap: 6px; }
.bell-item-title > i { font-size: 13px; flex: 0 0 auto; }
.bell-item-text { font-size: 12.5px; color: var(--ink-soft); }
.bell-item-due { font-size: 11px; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 4px; }
.bell-item-due.is-late { color: var(--stop); font-weight: 600; }

.bell-item.sev-info .bell-item-title > i { color: var(--info); }
.bell-item.sev-warning .bell-item-title > i { color: var(--warn); }
.bell-item.sev-critical .bell-item-title > i { color: var(--stop); }
.bell-item.sev-seal .bell-item-title > i { color: var(--seal); }

.bell-empty {
    padding: 30px 16px; text-align: center; color: var(--ink-faint); font-size: 13px;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.bell-empty > i { font-size: 22px; color: var(--ok); }

.bell-panel-foot {
    padding: 9px 14px; border-top: 1px solid var(--rule-soft); background: var(--surface-sunk);
    font-size: 12.5px;
}

/* ---------------------------------------------------------------- tendina della barra */

.pop {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 41;
    min-width: 194px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
    overflow: hidden;
    animation: pop var(--t-mid) both;
}

.pop-head {
    padding: 8px 13px 6px; font-size: 9.5px; font-weight: 650; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-faint); background: var(--surface-sunk);
    border-bottom: 1px solid var(--rule-soft);
}

.pop-item {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 13px; border: 0; background: none; font: inherit; font-size: 13px;
    color: var(--ink); text-align: left; cursor: pointer;
}
.pop-item:hover { background: var(--surface-2); text-decoration: none; }
.pop-item.is-current { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.pop-item > i { font-size: 15px; width: 17px; text-align: center; color: var(--ink-faint); }
.pop-item.is-current > i { color: var(--accent); }
.pop-sep { height: 1px; background: var(--rule-soft); margin: 3px 0; }
.pop-note { padding: 7px 13px; font-size: 11.5px; color: var(--ink-faint); }

/* ══════════════════════════════════════════════════════════════════ scelta dell'azienda */

/*  Il muro. Un amministratore di piattaforma non entra con un'azienda gia' scelta: prima decide
    con quale sta lavorando, e solo dopo la pagina gli dice dove si trova. Vedere i dati di
    un'azienda perche' era l'unica in elenco e' il modo in cui si guarda il cliente sbagliato.  */
.chooser { max-width: 880px; }

/*  auto-fill con un MASSIMO e non 1fr: con una sola azienda in elenco, `1fr` allargava la
    scheda per tutta la pagina e sembrava un banner invece di una scelta.                      */
.chooser-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 340px)); }

.chooser-card {
    display: flex; align-items: center; gap: 12px;
    width: 100%; text-align: left;
    padding: 14px 15px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r);
    box-shadow: var(--sh-1);
    cursor: pointer;
    font: inherit;
    color: var(--ink);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.chooser-card:hover {
    border-color: var(--accent-line);
    box-shadow: var(--sh-2);
    transform: translateY(-1px);
    text-decoration: none;
}

.chooser-card .mark {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent);
    font-weight: 700; font-size: 13px;
}

.chooser-card .who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chooser-card .who b { font-weight: 640; font-size: 14px; }
.chooser-card .who span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.chooser-card > i.go { margin-left: auto; color: var(--ink-ghost); }

/* ══════════════════════════════════════════════════════════════════ accesso */

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(900px 480px at 18% -10%, var(--accent-soft), transparent 62%),
        var(--ground);
}

.login-card { width: 100%; max-width: 392px; }

.login-brand {
    display: flex; align-items: center; gap: 9px; margin-bottom: 20px;
    font-weight: 700; font-size: 19px; letter-spacing: -.02em;
}

.login-brand small {
    font-weight: 550; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-faint); align-self: center;
}

.login-card .box {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
    padding: 22px 22px 24px;
}

.login-card h1 { font-size: 20px; margin-bottom: 3px; }
.login-card .sub { color: var(--ink-faint); font-size: 13px; margin: 0 0 20px; }
.login-card form { display: flex; flex-direction: column; gap: 13px; }
.login-card .btn { padding: 10px 14px; }
.login-foot { margin-top: 16px; text-align: center; font-size: 12.5px; color: var(--ink-faint); }

/*  Il codice a sei cifre si legge da un telefono e si ridigita: cifre grandi, monospazio,
    spaziate. Un campo di testo normale fa sbagliare la trascrizione.                          */
.code-input {
    font-family: var(--font-mono) !important;
    font-size: 24px !important;
    letter-spacing: .3em;
    text-align: center;
    padding: 11px 9px !important;
}

/*  Il QR dell'attivazione sta su fondo BIANCO in entrambi i temi: un lettore di codici cerca
    moduli scuri su fondo chiaro, e invertirlo lo rende illeggibile su molti telefoni.          */
.qr-box {
    display: inline-flex; padding: 11px; background: #ffffff;
    border: 1px solid var(--rule-hard); border-radius: var(--r);
}
.qr-box svg { display: block; width: 190px; height: 190px; }

.secret-strip {
    font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em;
    background: var(--surface-2); border: 1px solid var(--rule);
    border-radius: var(--r); padding: 8px 10px; word-break: break-all;
}

/* ══════════════════════════════════════════════════════════════════ passi numerati */

/*  Numerati perche' sono davvero una sequenza: senza il primo, il secondo non si puo' fare.
    Se un giorno diventassero indipendenti, i numeri vanno via.                                */
.steps {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 14px; counter-reset: s;
}
.steps > li { display: flex; gap: 12px; counter-increment: s; }
.steps > li::before {
    content: counter(s);
    flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
    border-radius: var(--r-pill);
    background: var(--accent-soft); color: var(--accent);
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════ Telerik: i token del tema

   ⚠️ QUESTO BLOCCO E' LA CORREZIONE CHE CONTA, e ci si e' arrivati guardando una fotografia.

   Il tema kendo-theme-default ha `--kendo-color-primary: #ff6358` — un salmone. Ogni pulsante
   primario, ogni riga selezionata, ogni pagina attiva del paginatore usciva di quel colore, in un
   portale il cui marchio e' indaco. Nella prima versione si combatteva classe per classe
   (`.k-button-solid-primary`, `.k-pager .k-selected`, …) e non bastava mai: il caso disabilitato
   ha un altro selettore, e da li' il salmone tornava fuori.

   Le versioni recenti del tema espongono i propri colori come proprieta' personalizzate. Si
   ridefiniscono QUI, una volta, e ogni componente Telerik — anche quelli che non abbiamo ancora
   usato — nasce del colore giusto. Le regole per classe piu' sotto restano solo per cio' che i
   token non coprono (densita', bordi, tipografia).                                              */

:root {
    /* --- il marchio --- */
    --kendo-color-primary: var(--accent);
    --kendo-color-primary-hover: var(--accent-hover);
    --kendo-color-primary-active: var(--accent-hover);
    --kendo-color-primary-emphasis: var(--accent-line);
    --kendo-color-primary-subtle: var(--accent-soft);
    --kendo-color-primary-subtle-hover: var(--accent-soft);
    --kendo-color-primary-subtle-active: var(--accent-soft);
    --kendo-color-primary-on-subtle: var(--accent);
    --kendo-color-primary-on-surface: var(--accent);
    --kendo-color-on-primary: var(--accent-ink);

    /*  Il secondario e il terziario puntano allo stesso indaco e all'ottone: lasciarli ai valori
        del tema vorrebbe dire che un componente che li usa introduce un colore che il resto della
        pagina non ha.                                                                           */
    --kendo-color-secondary: var(--indigo-600);
    --kendo-color-secondary-hover: var(--indigo-700);
    --kendo-color-on-secondary: #ffffff;
    --kendo-color-tertiary: var(--seal);
    --kendo-color-tertiary-hover: var(--brass-600);
    --kendo-color-on-tertiary: var(--seal-ink);

    /* --- superfici e inchiostro --- */
    --kendo-color-app-surface: var(--surface);
    --kendo-color-on-app-surface: var(--ink);
    --kendo-color-surface: var(--surface-2);
    --kendo-color-surface-alt: var(--surface);
    --kendo-color-base: var(--surface);
    --kendo-color-base-hover: var(--surface-2);
    --kendo-color-base-active: var(--surface-3);
    --kendo-color-base-subtle: var(--surface-2);
    --kendo-color-base-subtle-hover: var(--surface-3);
    --kendo-color-base-subtle-active: var(--surface-3);
    --kendo-color-base-emphasis: var(--rule-hard);
    --kendo-color-base-on-subtle: var(--ink);
    --kendo-color-base-on-surface: var(--ink);
    --kendo-color-on-base: var(--ink);
    --kendo-color-subtle: var(--ink-faint);
    --kendo-color-border: var(--rule);
    --kendo-color-border-alt: var(--rule-hard);

    /* --- stati: gli stessi del resto della pagina --- */
    --kendo-color-success: var(--ok);
    --kendo-color-success-subtle: var(--ok-soft);
    --kendo-color-success-on-subtle: var(--ok);
    --kendo-color-on-success: #ffffff;
    --kendo-color-warning: var(--warn);
    --kendo-color-warning-subtle: var(--warn-soft);
    --kendo-color-warning-on-subtle: var(--warn);
    --kendo-color-error: var(--stop);
    --kendo-color-error-subtle: var(--stop-soft);
    --kendo-color-error-on-subtle: var(--stop);
    --kendo-color-on-error: #ffffff;
    --kendo-color-info: var(--info);
    --kendo-color-info-subtle: var(--info-soft);
    --kendo-color-info-on-subtle: var(--info);
    --kendo-color-on-info: #ffffff;

    /* --- tipografia e forma --- */
    --kendo-font-family: var(--font);
    --kendo-font-family-sans: var(--font);
    --kendo-font-family-sans-serif: var(--font);
    --kendo-font-family-monospace: var(--font-mono);

    --kendo-border-radius-sm: var(--r-xs);
    --kendo-border-radius-md: var(--r);
    --kendo-border-radius-lg: var(--r-lg);
}

/* ══════════════════════════════════════════════════════════════════ Telerik

   I componenti Telerik portano il tema kendo-theme-default, che non conosce i nostri token e non
   sa niente del tema scuro. Si riallineano qui, e GLOBALMENTE e non per classe: una griglia nuova
   deve nascere giusta senza che nessuno si ricordi di aggiungerle una classe.

   ⚠️ Il fondo bianco dei grafici era il difetto piu' visibile nel tema scuro: due riquadri
   bianchi dentro due schede scure, fotografati e visti. I grafici disegnano un <rect> di fondo e
   si toglie solo dichiarandolo trasparente.                                                    */

.k-widget, .k-grid, .k-chart, .k-input, .k-picker, .k-button { font-family: var(--font); }

/* --- griglia --- */
.k-grid {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--rule);
    border-radius: var(--r);
    font-size: 13px;
}

.k-grid .k-grid-header,
.k-grid .k-grid-header-wrap,
.k-grid .k-table-thead {
    background: var(--surface-2);
    color: var(--ink-faint);
    border-color: var(--rule);
}

.k-grid .k-table-th, .k-grid th.k-header {
    background: transparent;
    color: var(--ink-faint);
    border-color: var(--rule);
    font-size: 9.5px;
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 8px 10px;
}

.k-grid .k-table-td, .k-grid td {
    border-color: var(--rule-soft);
    color: var(--ink);
    padding: 6px 10px;
}

.k-grid .k-table-row:hover,
.k-grid .k-table-row.k-hover { background: var(--accent-soft); }
.k-grid .k-table-row.k-selected,
.k-grid .k-selected > td { background: var(--accent-soft); color: var(--ink); }
.k-grid .k-table-alt-row { background: var(--surface); }

.k-grid .k-grid-content { background: var(--surface); }
.k-grid-norecords { color: var(--ink-faint); background: var(--surface); }

/* --- paginatore --- */
.k-pager, .k-grid .k-pager-wrap {
    background: var(--surface-sunk);
    color: var(--ink-soft);
    border-color: var(--rule);
    font-size: 12.5px;
}
.k-pager .k-button, .k-pager .k-link { color: var(--ink-soft); border-radius: var(--r-xs); }
.k-pager .k-button:hover, .k-pager .k-link:hover { background: var(--surface-2); color: var(--ink); }
/* ⚠️ La pagina corrente NON si puo' riempire di colore: il tema mette
   `.k-button.k-button-flat { background: none !important; box-shadow: none !important;
   border-color: transparent !important }`, e le voci del paginatore sono pulsanti piatti. La prima
   versione di questa regola abbinava fondo indaco e testo bianco: il fondo veniva buttato via
   dall'!important e restava il testo bianco su fondo chiaro, cioe' la pagina 1 invisibile. Il
   sintomo non era un errore ma uno spazio vuoto fra ««  ‹» e «2», e si e' visto solo guardando lo
   screenshot dell'elenco dei passaporti. Si dichiara la selezione con cio' che resta libero:
   colore, peso e un contorno — `outline` non e' fra le proprieta' che il tema blocca. */
.k-pager .k-selected, .k-pager .k-button.k-selected {
    color: var(--accent);
    font-weight: 700;
    outline: 1px solid var(--accent-line);
    outline-offset: -1px;
}

/* --- campi Telerik: stessa altezza e stesso bordo dei nostri --- */
.k-input, .k-picker {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--rule-hard);
    border-radius: var(--r);
    font-size: 13.5px;
}
.k-input:hover, .k-picker:hover { border-color: var(--ink-ghost); }
.k-input:focus-within, .k-picker:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.k-input-inner, .k-input-value-text { color: var(--ink); }
.k-input-button, .k-picker .k-button { color: var(--ink-faint); background: transparent; border: 0; }

/* --- tendine e finestre --- */
.k-popup, .k-list-container {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--rule);
    border-radius: var(--r);
    box-shadow: var(--sh-3);
}
.k-list-item { color: var(--ink); font-size: 13.5px; }
.k-list-item:hover, .k-list-item.k-hover { background: var(--surface-2); }
.k-list-item.k-selected { background: var(--accent); color: var(--accent-ink); }

.k-window, .k-dialog {
    background: var(--surface); color: var(--ink);
    border-color: var(--rule); border-radius: var(--r-lg); box-shadow: var(--sh-3);
}
.k-window-titlebar, .k-dialog-titlebar {
    background: var(--surface-sunk); color: var(--ink);
    border-color: var(--rule-soft); font-weight: 640; font-size: 14px;
}
.k-overlay { background: rgba(22, 26, 46, .5); }

/* --- pulsanti Telerik --- */
.k-button-solid-primary {
    background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.k-button-solid-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.k-button-solid-base {
    background: var(--surface); border-color: var(--rule-hard); color: var(--ink);
}
.k-button-solid-base:hover { background: var(--surface-2); }

/* --- spunte --- */
.k-checkbox { border-color: var(--rule-hard); background: var(--surface); }
.k-checkbox:checked, .k-checkbox.k-checked {
    background-color: var(--accent); border-color: var(--accent);
}
.k-checkbox:focus { box-shadow: 0 0 0 3px var(--accent-soft); }

/* --- grafici: fondo trasparente e testo leggibile in entrambi i temi --- */
.k-chart, .k-chart-surface { background: transparent; }
.k-chart text { fill: var(--ink-soft); font-family: var(--font); }

.k-tooltip, .k-chart-tooltip {
    background: var(--rail-bg);
    color: #f2f3fa;
    border-radius: var(--r-xs);
    font-size: 12.5px;
    border: 0;
}

/* --- caricamento --- */
.k-loader-segment { background: var(--accent); }

/* ══════════════════════════════════════════════════════════════════ minuzie utili */

.stack { display: flex; flex-direction: column; gap: var(--gap); }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-tight { display: flex; align-items: center; gap: 6px; }
.grow { flex: 1 1 auto; min-width: 0; }
.right { margin-left: auto; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════════════ anteprima del passaporto

   Si apre dalla colonna della filiera del venduto e mostra cosa dira' il passaporto PRIMA di
   emetterlo. Non e' il viewer pubblico in miniatura: quello ha il proprio foglio e il proprio
   tono - qui siamo dentro il portale, quindi si usano i token del portale e le tabelle dense che
   chi lavora sul venduto sta gia' guardando.

   ⚠️ La finestra NON puo' crescere quanto il suo contenuto. Una filiera lunga la faceva diventare
   piu' alta dello schermo, e siccome Kendo la centra verticalmente l'intestazione con la X finiva
   sopra il bordo della pagina: l'anteprima si apriva e non si poteva piu' chiudere. Segnalato
   dall'utente su una riga vera. Si limita il CONTENUTO e non la finestra, cosi' intestazione e
   pulsanti restano sempre visibili e a scorrere e' solo cio' che si legge.

   Si nominano due selettori perche' il contenuto del dialogo Kendo porta `k-dialog-content` e in
   altre versioni del tema `k-window-content`: scriverne uno solo funzionerebbe finche' non si
   aggiorna il pacchetto, e allora il difetto tornerebbe senza che nessuno abbia toccato niente. */

.prev-dialog .k-dialog-content,
.prev-dialog .k-window-content {
    max-height: min(68vh, 720px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/*  Le due tabelle sono larghe: se non stanno, scorrono DENTRO il proprio riquadro. Senza questo
    la finestra si allargherebbe oltre i 900px e comparirebbe una barra orizzontale sulla pagina. */
.prev-dialog .k-dialog-content table,
.prev-dialog .k-window-content table { min-width: 100%; }

.prev-tbl-wrap { overflow-x: auto; }

.prev h4 {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 20px 0 8px;
}

.prev-head { padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.prev-head h3 { margin: 2px 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }

.prev-ids { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.prev-ids .mono { font-size: 12px; color: var(--ink-soft); }

/* Le coppie etichetta/valore: a griglia che si adatta, cosi' su un dialogo largo stanno in fila
   e su uno schermo piccolo scendono senza spezzare le parole.                                   */
.prev-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px 18px;
    margin: 14px 0 0;
}

.prev-facts dt {
    font-size: 10.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 2px;
}

.prev-facts dd { margin: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }

.prev-fibres { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }

.prev-fibres > li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    padding: 4px 0;
    border-bottom: 1px solid var(--rule);
}

.prev-fibres > li > .mono { font-size: 11px; color: var(--ink-faint); }
.prev-fibres > li > b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* La tabella dentro il dialogo scorre da sola: le lavorazioni hanno nomi di fornitori lunghi, e
   un dialogo che allarga la pagina sotto e' peggio di una tabella che scorre.                   */
.prev-grid { width: 100%; }
.prev { overflow-x: auto; }