/*
 * CSC Hub - Foglio di stile unico
 *
 * Identita': "sala controllo". Navigazione laterale scura, area di lavoro
 * chiara, angoli piccoli, bordi da 1px invece di ombre, tabelle dense.
 * Un solo tema per tutti: il colore non dipende dal livello dell'utente.
 *
 * I colori sono quelli del marchio CSC Automazioni, presi dal file
 * vettoriale _Materiale/CSC_AUTOMAZIONI_LOGO.pdf - non dal sito, che ne usa
 * una versione leggermente diversa. Blu #024d9b per le azioni, blu vivo
 * #1a6fd4 per gli stati attivi e gli anelli di fuoco: il blu del marchio su
 * fondo scuro sparisce, per questo l'accento vivo e' un token separato e non
 * una schiaritura calcolata del primario.
 *
 * Il marchio porta anche i quattro colori delle linee di attivita' - elettrico,
 * automazione, manutenzione, fotovoltaico - ed e' la tavolozza con cui
 * distinguere le tipologie nel preventivatore.
 *
 * I nomi dei token restano quelli Material 3 usati dal resto del foglio:
 * cambiando i valori qui cambia l'aspetto di tutta l'applicazione.
 */

/* ========================================
   Token di progetto
   ======================================== */

:root {
    /* --- marchio --- */
    --accent: #1a6fd4;
    --accent-strong: #024d9b;
    --accent-deep: #01356c;
    --accent-soft: #d9e6f5;
    /* il vivo, non il profondo: serve agli stati attivi sulla barra scura */
    --accent-rgb: 26, 111, 212;

    /* le quattro linee di attivita', dalla fascia del marchio */
    --csc-elettrico: #024d9b;
    --csc-automazione: #92278f;
    --csc-manutenzione: #f7941d;
    --csc-fotovoltaico: #39b54a;

    /* --- navigazione laterale --- */
    --nav-bg: #082a4f;
    --nav-bg-deep: #051c36;
    --nav-hover: rgba(148, 163, 184, 0.10);
    --nav-active: rgba(var(--accent-rgb), 0.16);
    --nav-text: #93a3b8;
    --nav-text-strong: #e2e8f0;
    --nav-line: rgba(148, 163, 184, 0.14);
    --nav-w: 252px;
    --nav-w-min: 64px;
    --top-h: 56px;

    /* --- area di lavoro --- */
    --page-bg: #f6f8fa;
    --card-bg: #ffffff;
    --line: #e3e8ef;
    --line-soft: #eef2f6;
    --ink: #0f172a;
    --ink-2: #475569;
    --ink-3: #7a8899;

    /*  L'ALTEZZA DI UN CONTROLLO, e vale per tutti: caselle, tendine, date,
        selettori di file e PULSANTI. E' la misura ESTERNA — quella che si vede
        e che allinea una riga — e il numero non e' scelto adesso: e' quello
        che il tema Telerik gia' disegna su novanta controlli su novantatre.
        (Il mantra diceva 34: e' la casella INTERNA, senza i due bordi.)

        Sta qui perche' la stessa misura serve in quattro posti lontani fra
        loro — l'involucro dei controlli Telerik, i pulsanti, gli `input` nudi
        e il selettore di file — e finche' era ricopiata a mano quei quattro
        posti hanno avuto tre numeri diversi.  */
    --h-controllo: 36px;

    /* --- superfici (nomi M3) --- */
    --md-sys-color-surface: #f6f8fa;
    --md-sys-color-surface-dim: #e9eff5;
    --md-sys-color-surface-bright: #ffffff;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #ffffff;
    --md-sys-color-surface-container: #f1f5f9;
    --md-sys-color-surface-container-high: #e9eff5;
    --md-sys-color-surface-container-highest: #e3e8ef;
    --md-sys-color-on-surface: #0f172a;
    --md-sys-color-on-surface-variant: #5b6676;

    --md-ref-palette-neutral0: #000000;
    --md-ref-palette-neutral10: #0f172a;
    --md-ref-palette-neutral20: #1e293b;
    --md-ref-palette-neutral30: #334155;
    --md-ref-palette-neutral40: #475569;
    --md-ref-palette-neutral50: #64748b;
    --md-ref-palette-neutral60: #7a8899;
    --md-ref-palette-neutral70: #94a3b8;
    --md-ref-palette-neutral80: #cbd5e1;
    --md-ref-palette-neutral90: #e3e8ef;
    --md-ref-palette-neutral95: #f1f5f9;
    --md-ref-palette-neutral99: #f6f8fa;
    --md-ref-palette-neutral100: #ffffff;

    --md-sys-color-outline: #94a3b8;
    --md-sys-color-outline-variant: #e3e8ef;
    --md-sys-color-shadow: rgba(15, 23, 42, 0.10);
    --md-sys-color-scrim: rgba(15, 23, 42, 0.45);

    /* --- colori d'azione --- */
    --md-sys-color-primary: #024d9b;
    --md-sys-color-primary-rgb: 2, 77, 155;
    --md-sys-color-primary-hover: #01356c;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #d9e6f5;
    --md-sys-color-on-primary-container: #024d9b;
    --md-sys-color-secondary: #1a6fd4;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #e2edfa;
    --md-sys-color-on-secondary-container: #024d9b;
    --md-sys-color-tertiary: #0284c7;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #dbeafe;
    --md-sys-color-on-tertiary-container: #075985;

    /* --- stati --- */
    --md-sys-color-success: #157f4a;
    --md-sys-color-success-container: #d6f5e3;
    --md-sys-color-warning: #b45309;
    --md-sys-color-warning-container: #fdf0d5;
    --md-sys-color-error: #b42318;
    --md-sys-color-error-container: #fde8e6;
    --md-sys-color-info: #0369a1;
    --md-sys-color-info-container: #dbeafe;

    /* --- bottoni e avatar (nomi usati dal resto del foglio) --- */
    --btn-primary: #024d9b;
    --btn-primary-hover: #01356c;
    --btn-on-primary: #ffffff;
    --avatar-bg: #024d9b;
    --avatar-text: #ffffff;
    --sidebar-bg: var(--nav-bg);
    --sidebar-border: var(--nav-line);

    /* --- tipografia --- */
    --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    --md-sys-typescale-headline-large: 650 1.75rem/2.125rem var(--font-ui);
    --md-sys-typescale-headline-medium: 650 1.5rem/1.875rem var(--font-ui);
    --md-sys-typescale-headline-small: 650 1.25rem/1.625rem var(--font-ui);
    --md-sys-typescale-title-large: 600 1.125rem/1.5rem var(--font-ui);
    --md-sys-typescale-title-medium: 600 0.9375rem/1.375rem var(--font-ui);
    --md-sys-typescale-title-small: 600 0.8125rem/1.25rem var(--font-ui);
    --md-sys-typescale-body-large: 400 0.9375rem/1.5rem var(--font-ui);
    --md-sys-typescale-body-medium: 400 0.875rem/1.375rem var(--font-ui);
    --md-sys-typescale-body-small: 400 0.75rem/1.125rem var(--font-ui);
    --md-sys-typescale-label-large: 550 0.8125rem/1.125rem var(--font-ui);
    --md-sys-typescale-label-medium: 550 0.75rem/1rem var(--font-ui);
    --md-sys-typescale-label-small: 550 0.6875rem/0.9375rem var(--font-ui);

    /* --- forma: angoli piccoli, niente pillole --- */
    --md-sys-shape-corner-none: 0;
    --md-sys-shape-corner-extra-small: 3px;
    --md-sys-shape-corner-small: 4px;
    --md-sys-shape-corner-medium: 6px;
    --md-sys-shape-corner-large: 8px;
    --md-sys-shape-corner-extra-large: 10px;
    /* Volutamente NON 9999px: le pillole appartengono all'aspetto precedente.
       Per i pochi elementi davvero circolari c'e' --shape-pill. */
    --md-sys-shape-corner-full: 6px;
    --shape-pill: 999px;
    --r: 6px;

    /* --- profondita': bordi prima delle ombre --- */
    --md-sys-elevation-level0: none;
    --md-sys-elevation-level1: 0 1px 2px rgba(15, 23, 42, 0.04);
    --md-sys-elevation-level2: 0 1px 3px rgba(15, 23, 42, 0.06);
    --md-sys-elevation-level3: 0 4px 12px rgba(15, 23, 42, 0.08);
    --md-sys-elevation-level4: 0 8px 24px rgba(15, 23, 42, 0.10);
    --md-sys-elevation-level5: 0 16px 40px rgba(15, 23, 42, 0.12);

    /* --- movimento --- */
    --md-sys-motion-duration-short4: 140ms;
    --md-sys-motion-duration-medium2: 220ms;
    --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0.2, 1);
    --md-sys-motion-easing-emphasized: cubic-bezier(0.16, 1, 0.3, 1);

    /* --- alias storici --- */
    --primary: var(--btn-primary);
    --bg: var(--page-bg);
    --card: var(--card-bg);
    --muted: var(--ink-3);
    --success: var(--md-sys-color-success);
    --danger: var(--md-sys-color-error);
}

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

html {
    font-family: var(--font-ui);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--ink);
    line-height: 1.5;
}

a { color: var(--accent-deep); text-decoration: none; }
a:hover { color: var(--accent-strong); }

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

/* Barre di scorrimento sottili: in una pagina densa contano */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--md-ref-palette-neutral80) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--md-ref-palette-neutral80);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--md-ref-palette-neutral70); }

@keyframes spin { to { transform: rotate(360deg); } }

/* ========================================
   Schermata di avvio
   ======================================== */
.boot {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: var(--nav-bg);
    z-index: 9999;
}

.boot-mark {
    width: 104px;
    height: 60px;
    border-radius: var(--r);
    background: #ffffff;
    padding: 8px 12px;
    object-fit: contain;
}

.boot-bar {
    position: relative;
    width: 140px;
    height: 2px;
    background: var(--nav-line);
    overflow: hidden;
}
.boot-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 40%;
    background: var(--accent);
    animation: boot-slide 1.1s var(--md-sys-motion-easing-standard) infinite;
}
@keyframes boot-slide {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(320%); }
}

/* ========================================
   Impianto: navigazione + area di lavoro
   ======================================== */
.shell {
    display: grid;
    grid-template-columns: var(--nav-w) minmax(0, 1fr);
    min-height: 100vh;
    background: var(--page-bg);
    /* La riduzione della sidebar e' istantanea: animare grid-template-columns
       fra una traccia fissa e una in fr da risultati incoerenti fra browser,
       e per un comando che si usa una volta al giorno lo scatto va benissimo. */
}
.shell.nav-collapsed { grid-template-columns: var(--nav-w-min) minmax(0, 1fr); }

.shell-nav {
    display: flex;
    flex-direction: column;
    background: var(--nav-bg);
    border-right: 1px solid var(--nav-bg-deep);
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 40;
}

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

.shell-body {
    flex: 1;
    padding: 20px 24px 40px;
    min-width: 0;
}

/* ---------- marchio ---------- */
.shell-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--top-h);
    padding: 0 10px 0 14px;
    border-bottom: 1px solid var(--nav-line);
    flex: 0 0 auto;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    color: var(--nav-text-strong);
}
.brand:hover { color: #fff; }

.brand-mark {
    flex: 0 0 auto;
    width: 48px;
    height: 28px;
    border-radius: 4px;
    background: #ffffff;
    padding: 3px 5px;
    object-fit: contain;
}

.brand-name {
    font: var(--md-sys-typescale-title-small);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
}

.tx-nav-pin {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--nav-text);
    cursor: pointer;
    font-size: 0.75rem;
}
.tx-nav-pin:hover { background: var(--nav-hover); color: var(--nav-text-strong); }

/* ---------- voci ---------- */
.tx-nav-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tx-nav-link,
.tx-nav-child {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--nav-text);
    font: var(--md-sys-typescale-label-large);
    text-align: left;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}

.tx-nav-link > i:first-child,
.tx-nav-child > i:first-child {
    flex: 0 0 auto;
    width: 18px;
    font-size: 0.9375rem;
    text-align: center;
}

.tx-nav-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tx-nav-link:hover,
.tx-nav-child:hover { background: var(--nav-hover); color: var(--nav-text-strong); }

/* La voce attiva ha una barretta a sinistra: si trova con la coda dell'occhio */
.tx-nav-link.is-active,
.tx-nav-child.is-active {
    background: var(--nav-active);
    color: #fff;
}
.tx-nav-link.is-active::before,
.tx-nav-child.is-active::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--accent);
}
.tx-nav-link.is-active > i:first-child,
.tx-nav-child.is-active > i:first-child { color: var(--accent); }

.tx-nav-quit { margin-top: 6px; color: #f0a3a3; }
.tx-nav-quit:hover { background: rgba(180, 35, 24, 0.18); color: #ffc9c4; }

/* ---------- sezioni con sottomenu ---------- */
/* Contenitore normale, non display:contents: con contents il gruppo non genera
   una scatola, i figli finiscono direttamente nel flex della barra e la voce
   padre poteva restare senza testo. */
.tx-nav-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tx-nav-caret {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    opacity: 0.7;
    transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.tx-nav-group.is-open .tx-nav-caret { transform: rotate(180deg); }

/* Chiuso di default, si apre in altezza. Il tetto di max-height e'
   volutamente generoso: serve solo ad animare, il contenuto reale e' corto. */
.tx-nav-children {
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}
.tx-nav-children-inner {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-bottom: 3px;
}
.tx-nav-group.is-open .tx-nav-children { max-height: 1000px; }

.tx-nav-child {
    padding-left: 34px;
    font: var(--md-sys-typescale-body-small);
    color: #8494a8;
    position: relative;
}
.tx-nav-child > i:first-child {
    position: absolute;
    left: 14px;
    width: 14px;
    font-size: 0.75rem;
    opacity: 0.85;
}
.tx-nav-child.is-active { font-weight: 600; }

/* ---------- stella dei preferiti ---------- */
.fav-star {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    opacity: 0;
    cursor: pointer;
    font-size: 0.75rem;
    transition: opacity var(--md-sys-motion-duration-short4) linear;
}
.tx-nav-link:hover .fav-star,
.tx-nav-child:hover .fav-star,
.tile:hover .fav-star,
.section-links li:hover .fav-star,
.fav-star:focus-visible { opacity: 0.7; }
.fav-star:hover { background: var(--nav-hover); opacity: 1; }
.fav-star.is-on { opacity: 1; color: #fbbf24; }

/* ---------- coda della sidebar ---------- */
.shell-nav-foot {
    flex: 0 0 auto;
    padding: 10px 16px;
    border-top: 1px solid var(--nav-line);
}
.tx-nav-version {
    font: var(--md-sys-typescale-label-small);
    color: #64748b;
    letter-spacing: 0.08em;
}

/* ---------- sidebar ridotta ---------- */
.nav-collapsed .brand-name,
.nav-collapsed .tx-nav-label,
.nav-collapsed .tx-nav-caret,
.nav-collapsed .fav-star,
.nav-collapsed .tx-nav-version { display: none; }

.nav-collapsed .shell-brand { padding: 0 8px; justify-content: center; }
.nav-collapsed .brand { justify-content: center; }
.nav-collapsed .tx-nav-pin { position: absolute; left: 50%; transform: translateX(-50%); top: 58px; }
.nav-collapsed .tx-nav-link,
.nav-collapsed .tx-nav-child { justify-content: center; padding: 9px 0; }
.nav-collapsed .tx-nav-children { max-height: 0; }
.nav-collapsed .tx-nav-child > i:first-child { position: static; }
.nav-collapsed .tx-nav-scroll { padding-top: 34px; }

.tx-nav-scrim { display: none; }

/* ========================================
   Barra superiore
   ======================================== */
.shell-top {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--top-h);
    padding: 0 20px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}

.top-burger {
    display: none;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
    color: var(--ink-2);
    cursor: pointer;
}

.top-where {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}
.where-main {
    font: var(--md-sys-typescale-title-small);
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.where-up {
    font: var(--md-sys-typescale-label-medium);
    color: var(--ink-3);
    white-space: nowrap;
}
.where-sep { font-size: 0.625rem; color: var(--md-ref-palette-neutral80); }

.top-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* ---------- campanella ---------- */
.bell { position: relative; }

.bell-btn {
    position: relative;
    width: 34px;
    height: 34px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    font-size: 1rem;
}
.bell-btn:hover, .bell-btn.is-open {
    background: var(--md-sys-color-surface-container);
    border-color: var(--line);
    color: var(--ink);
}

.bell-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--ink-3);
    color: #fff;
    font: var(--md-sys-typescale-label-small);
    font-size: 0.625rem;
}
.bell-dot.is-unread { background: var(--md-sys-color-error); }

.bell-backdrop, .who-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
}

.bell-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 61;
    width: 380px;
    max-width: calc(100vw - 24px);
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--md-sys-elevation-level4);
    overflow: hidden;
}

.bell-panel-head, .bell-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    font: var(--md-sys-typescale-label-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
}
.bell-panel-head { border-bottom: 1px solid var(--line-soft); }
.bell-panel-foot { border-top: 1px solid var(--line-soft); justify-content: center; }

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

.bell-item {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line-soft);
    border-left: 3px solid transparent;
}
.bell-item:last-child { border-bottom: 0; }
.bell-item.is-unread { background: #fbfdfd; }
.bell-item.sev-warning { border-left-color: var(--md-sys-color-warning); }
.bell-item.sev-critical { border-left-color: var(--md-sys-color-error); }
.bell-item.sev-info { border-left-color: var(--accent); }

.bell-check, .todo-check {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    font-size: 0.9375rem;
}
.bell-check:hover, .todo-check:hover { color: var(--md-sys-color-success); background: var(--md-sys-color-success-container); }

.bell-item-body { flex: 1; min-width: 0; cursor: pointer; display: grid; gap: 2px; }
.bell-item-title { font: var(--md-sys-typescale-label-large); color: var(--ink); }
.bell-item-text { font: var(--md-sys-typescale-body-small); color: var(--ink-2); }
.bell-item-due { font: var(--md-sys-typescale-label-small); color: var(--ink-3); }
.bell-item-due.is-late { color: var(--md-sys-color-error); }

.bell-empty, .todo-empty, .panel-hint {
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 28px 20px;
    color: var(--ink-3);
    text-align: center;
    font: var(--md-sys-typescale-body-small);
}
.bell-empty i, .todo-empty i, .panel-hint i { font-size: 1.5rem; opacity: 0.5; }
.panel-hint p, .todo-empty p { margin: 0; max-width: 42ch; }

/* ---------- menu utente ---------- */
.who { position: relative; }

.who-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font: var(--md-sys-typescale-label-large);
}
.who-btn:hover, .who.is-open .who-btn {
    background: var(--md-sys-color-surface-container);
    border-color: var(--line);
}
.who-btn > i { font-size: 0.6875rem; color: var(--ink-3); }

.who-avatar {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    background: var(--nav-bg);
    color: #fff;
    font: var(--md-sys-typescale-label-small);
    letter-spacing: 0.02em;
}
.who-avatar.lg { width: 36px; height: 36px; font: var(--md-sys-typescale-label-large); }

.who-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.who-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 61;
    width: 262px;
    padding: 6px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--md-sys-elevation-level4);
}

.who-menu-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 12px;
}
.who-menu-head strong { display: block; font: var(--md-sys-typescale-label-large); }
.who-menu-head span { font: var(--md-sys-typescale-body-small); color: var(--ink-3); }

.who-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--ink);
    font: var(--md-sys-typescale-body-medium);
    text-align: left;
    cursor: pointer;
}
.who-item:hover { background: var(--md-sys-color-surface-container); color: var(--ink); }
.who-item > i { width: 16px; color: var(--ink-3); }
.who-item.is-quit { color: var(--md-sys-color-error); }
.who-item.is-quit:hover { background: var(--md-sys-color-error-container); }
.who-item.is-quit > i { color: inherit; }

.who-sep { height: 1px; margin: 6px 4px; background: var(--line-soft); }

.who-langs { display: flex; gap: 4px; padding: 2px 4px; }
.who-lang {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
    color: var(--ink-2);
    cursor: pointer;
    font: var(--md-sys-typescale-label-small);
}
.who-lang img { width: 16px; height: 12px; object-fit: cover; border-radius: 1px; }
.who-lang:hover { border-color: var(--md-ref-palette-neutral80); }
.who-lang.is-active {
    border-color: var(--accent-strong);
    background: var(--accent-soft);
    color: var(--accent-deep);
}

/* ========================================
   Pannelli
   ======================================== */
.panel {
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: var(--r);
    margin-bottom: 16px;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
}
.panel-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font: var(--md-sys-typescale-label-medium);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ink-2);
}
.panel-head h2 > i { color: var(--accent-strong); font-size: 0.875rem; }
.panel-head-actions { display: flex; align-items: center; gap: 4px; }

.link-btn {
    border: 0;
    background: transparent;
    color: var(--accent-deep);
    cursor: pointer;
    padding: 2px 4px;
    font: var(--md-sys-typescale-label-small);
    text-transform: none;
    letter-spacing: 0;
}
.link-btn:hover { text-decoration: underline; }

.icon-btn {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
    color: var(--ink-2);
    cursor: pointer;
}
.icon-btn:hover:not(:disabled) { background: var(--md-sys-color-surface-container); color: var(--ink); }
.icon-btn:disabled { opacity: 0.5; cursor: default; }
.icon-btn .spin { animation: spin 0.8s linear infinite; }

.btn-accent {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--accent-strong);
    border-radius: 5px;
    background: var(--accent-strong);
    color: #fff;
    cursor: pointer;
    font: var(--md-sys-typescale-label-large);
    white-space: nowrap;
}
.btn-accent:hover:not(:disabled) { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-accent:disabled { opacity: 0.45; cursor: default; }

/* ========================================
   Home
   ======================================== */
/* Nessun max-width: su schermi larghi la pagina deve riempire lo spazio,
   non lasciare una fascia vuota a destra. */
.home { width: 100%; }

.home-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 4px 0 18px;
}
.home-hero h1 {
    margin: 2px 0 0;
    font: var(--md-sys-typescale-headline-small);
    color: var(--ink);
}
.home-hero h1 span { color: var(--accent-deep); }
.hero-when {
    margin: 0;
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-3);
}

/* Preferiti e piu' usati affiancati; su schermi stretti uno sotto l'altro. */
.home-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 16px;
    align-items: start;
}
.home-cols > * { min-width: 0; }

.home-loading, .todo-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px;
    color: var(--ink-3);
    font: var(--md-sys-typescale-body-small);
}

/* pallino pulsante: attesa discreta, senza rotelle */
.dot-pulse {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent);
    animation: dot-pulse 1s ease-in-out infinite;
}
@keyframes dot-pulse {
    0%, 100% { opacity: 0.25; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* ---------- tile ---------- */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
    padding: 14px 16px 16px;
}

.tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: #fff;
    color: var(--ink);
    position: relative;
    transition: border-color var(--md-sys-motion-duration-short4) linear,
                box-shadow var(--md-sys-motion-duration-short4) linear;
}
.tile:hover {
    border-color: var(--accent);
    box-shadow: var(--md-sys-elevation-level2);
    color: var(--ink);
}

.tile-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 5px;
    background: var(--md-sys-color-surface-container);
    color: var(--accent-deep);
    font-size: 1rem;
}
.tile:hover .tile-icon { background: var(--accent-soft); }

.tile-text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.tile-text strong {
    font: var(--md-sys-typescale-label-large);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tile-text small {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tile .fav-star { color: var(--ink-3); }
.tile .fav-star:hover { background: var(--md-sys-color-surface-container); }

/* ---------- elenco sezioni ---------- */
.sections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    padding: 14px 16px 16px;
    /* Ogni card alta quanto il suo contenuto, senza stirarsi fino alla piu'
       alta della riga. */
    align-items: start;
}

.section-card {
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    background: #fff;
}

.section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--md-sys-color-surface-container);
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}
.section-head:hover { background: var(--accent-soft); color: var(--accent-deep); }

.section-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background: var(--nav-bg);
    color: var(--accent);
    font-size: 0.875rem;
}
.section-name { display: grid; min-width: 0; }
.section-name strong { font: var(--md-sys-typescale-label-large); }
.section-name small { font: var(--md-sys-typescale-body-small); color: var(--ink-3); }

.section-links { list-style: none; margin: 0; padding: 4px; display: grid; gap: 1px; }
.section-links li { display: flex; align-items: center; border-radius: 4px; }
.section-links li:hover { background: var(--md-sys-color-surface-container); }
.section-links li > a {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 8px;
    color: var(--ink-2);
    font: var(--md-sys-typescale-body-small);
}
.section-links li > a:hover { color: var(--accent-deep); }
.section-links li > a > i { width: 14px; font-size: 0.75rem; color: var(--ink-3); }
.section-links li > a > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-links .fav-star { color: var(--ink-3); margin-right: 4px; }

/* ========================================
   Todo list
   ======================================== */
.todo-add {
    display: flex;
    gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
    /* Su un monitor largo un campo di testo da 1500px e' sgraziato e difficile
       da leggere: la riga si ferma a una misura da modulo. */
    max-width: 760px;
}
.todo-input, .todo-date {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
    color: var(--ink);
    font: var(--md-sys-typescale-body-medium);
    font-family: var(--font-ui);
}
.todo-input { flex: 1; min-width: 0; }
.todo-date { flex: 0 0 auto; width: 130px; color: var(--ink-2); }
.todo-input:focus, .todo-date:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
}

/* Le voci si dispongono in colonne che si adattano alla larghezza: su un
   monitor grande stanno tre o quattro per riga invece di incolonnarsi in una
   striscia stretta. */
.todo-grid {
    list-style: none;
    margin: 0;
    padding: 12px 16px 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 10px;
}

.todo-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px 11px 10px;
    border: 1px solid var(--line);
    border-left-width: 3px;
    border-left-color: transparent;
    border-radius: var(--r);
    background: #fff;
}
.todo-item:hover { border-color: var(--md-ref-palette-neutral80); border-left-color: var(--accent); }
.todo-item.is-unread { background: #fbfefe; }
.todo-item.sev-info { border-left-color: var(--accent); }
.todo-item.sev-warning { border-left-color: var(--md-sys-color-warning); }
.todo-item.sev-critical { border-left-color: var(--md-sys-color-error); }
.todo-item.is-done { opacity: 0.55; }
.todo-item.is-done .todo-title { text-decoration: line-through; }
.todo-item.is-done .todo-check { color: var(--md-sys-color-success); }

.todo-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.todo-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.todo-icon { font-size: 0.8125rem; color: var(--ink-3); }
.todo-title { font: var(--md-sys-typescale-label-large); color: var(--ink); }
.todo-title.is-link { color: var(--ink); }
.todo-title.is-link:hover { color: var(--accent-deep); text-decoration: underline; }
.todo-text { margin: 0; font: var(--md-sys-typescale-body-small); color: var(--ink-2); }

.todo-tag {
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--md-sys-color-surface-container-highest);
    color: var(--ink-3);
    font: var(--md-sys-typescale-label-small);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.todo-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.todo-due {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: var(--md-sys-typescale-label-small);
    color: var(--ink-3);
}

.todo-tag.is-from {
    background: var(--accent-soft);
    color: var(--accent-deep);
}

.todo-more {
    padding: 0 16px 14px;
    text-align: center;
}
.todo-more a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: var(--md-sys-typescale-label-medium);
    color: var(--accent-deep);
}
.todo-more a:hover { text-decoration: underline; }

.panel-count {
    font: var(--md-sys-typescale-label-small);
    color: var(--ink-3);
    text-transform: none;
    letter-spacing: 0;
    margin-right: 4px;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
    color: var(--ink-2);
    font: var(--md-sys-typescale-label-small);
    white-space: nowrap;
}
.btn-ghost:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-deep);
}
.todo-due.is-today { color: var(--accent-deep); font-weight: 600; }
.todo-due.is-late { color: var(--md-sys-color-error); font-weight: 600; }

.todo-del {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    opacity: 0;
    font-size: 0.75rem;
}
.todo-item:hover .todo-del { opacity: 1; }
.todo-del:hover { background: var(--md-sys-color-error-container); color: var(--md-sys-color-error); }

/* ========================================
   Stati generici (usati anche dalle pagine)
   ======================================== */
.empty-state {
    display: grid;
    place-items: center;
    gap: 10px;
    padding: 40px 20px;
    color: var(--ink-3);
    text-align: center;
}
.empty-state i { font-size: 2rem; opacity: 0.45; }
.empty-state p { margin: 0; font: var(--md-sys-typescale-body-medium); }

.spinner {
    width: 34px;
    height: 34px;
    border: 3px solid var(--md-sys-color-surface-container-highest);
    border-top-color: var(--accent-strong);
    border-radius: 999px;
    animation: spin 0.8s linear infinite;
}

/* ========================================
   Schermi stretti
   ======================================== */
@media (max-width: 900px) {
    .todo-grid { grid-template-columns: minmax(0, 1fr); }
    .home-cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .shell { grid-template-columns: minmax(0, 1fr); }
    .shell.nav-collapsed { grid-template-columns: minmax(0, 1fr); }

    /* La navigazione esce di scena e rientra sopra il contenuto */
    .shell-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: var(--nav-w);
        transform: translateX(-100%);
        transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
        z-index: 70;
    }
    .shell.nav-open .shell-nav { transform: translateX(0); }
    .shell.nav-open .tx-nav-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--md-sys-color-scrim);
        z-index: 65;
    }

    .tx-nav-pin { display: none; }
    .top-burger { display: grid; place-items: center; }
    .shell-body { padding: 16px 14px 32px; }
    .who-name { display: none; }
}

/* ========================================
   Page Headers
   ======================================== */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

/* h3 e' l'intestazione delle sezioni dentro una scheda (i rapportini di una
   commessa, le ore di un rapportino) e prima non era in questo azzeramento:
   si portava dietro il margine predefinito del browser, circa 19px sopra e
   sotto, che nessun'altra testata ha. Il difetto si vedeva come una sezione
   che respira il doppio delle altre senza un motivo. */
.page-header h1,
.page-header h2,
.page-header h3 {
    margin: 0;
}

.page-header h1 {
    font: var(--md-sys-typescale-headline-medium);
    color: var(--md-ref-palette-neutral10);
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-header h1 i {
    color: var(--btn-primary);
    font-size: 1.5rem;
}

/* Il titolo e le sue pastiglie: una scheda ne mostra fino a quattro accanto a
   una ragione sociale lunga, e senza `flex-wrap` non potevano andare a capo -
   uscivano dal riquadro invece di scendere. `min-width: 0` serve perche' un
   figlio flex non scende sotto la larghezza del suo contenuto se non gli si
   dice che puo': senza, il titolo lungo spingeva i comandi fuori pagina.
   Il gap e' asimmetrico di proposito: 16 in orizzontale separa il titolo dalle
   pastiglie, 6 in verticale evita che andando a capo si apra un buco. */
.header-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    min-width: 0;
}

.last-refresh-label {
    font-size: 0.85rem;
    color: var(--md-sys-color-outline);
    white-space: nowrap;
}

.import-running-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--md-sys-color-info, #0284c7);
    background: var(--md-sys-color-info-container, #e0f2fe);
    padding: 6px 14px;
    border-radius: var(--md-sys-shape-corner-full, 9999px);
    white-space: nowrap;
    animation: pulse-opacity 2s ease-in-out infinite;
}

@keyframes pulse-opacity {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.record-count {
    font: var(--md-sys-typescale-label-large);
    color: var(--md-sys-color-outline);
    background: var(--md-sys-color-surface-container-highest);
    padding: 6px 14px;
    border-radius: var(--md-sys-shape-corner-full);
}

/* ========================================
   Panels & Cards
   ======================================== */
.panel,
.card-modern,
.filters-card,
.grid-card {
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-sys-shape-corner-medium);
    box-shadow: var(--md-sys-elevation-level1);
    overflow: hidden;
}

.panel-body {
    padding: 20px;
}

/* ========================================
   Filters
   ======================================== */
.filters-card {
    padding: 20px 24px;
}

.filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.filter-item {
    flex: 1;
    min-width: 160px;
    max-width: 220px;
}

.filter-input {
    width: 100%;
}

.filter-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* ========================================
   Buttons
   ======================================== */
.m3-button,
.btn-primary-modern,
.btn-add,
.btn-save,
.btn-action,
.btn-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    height: auto;
    padding: 12px 28px;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    font: var(--md-sys-typescale-label-large);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    background: var(--btn-primary);
    color: var(--btn-on-primary);
    box-shadow: var(--md-sys-elevation-level1);
    text-decoration: none;
}

.m3-button:hover,
.btn-primary-modern:hover,
.btn-add:hover,
.btn-save:hover,
.btn-action:hover,
.btn-search:hover {
    background: var(--btn-primary-hover);
    box-shadow: var(--md-sys-elevation-level2);
    transform: translateY(-1px);
}

.btn-add {
    height: 44px;
    padding: 0 24px;
}

/* Outlined Button */
.m3-button-outlined,
.btn-outline-modern,
.btn-clear,
.btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    height: auto;
    padding: 12px 28px;
    background: transparent;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-full);
    font: var(--md-sys-typescale-label-large);
    font-size: 0.95rem;
    color: var(--btn-primary);
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.m3-button-outlined:hover,
.btn-outline-modern:hover,
.btn-clear:hover,
.btn-cancel:hover {
    background: var(--md-sys-color-primary-container);
    border-color: var(--btn-primary);
}

.btn-clear {
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--md-sys-color-outline);
}

.btn-clear:hover {
    background: var(--md-sys-color-surface-container-highest);
    border-color: var(--md-ref-palette-neutral10);
    color: var(--md-ref-palette-neutral10);
}

/* Grid Links */
.grid-link {
    color: var(--md-sys-color-primary);
    text-decoration: none;
    cursor: pointer;
}

.grid-link:hover {
    text-decoration: underline;
    color: var(--md-sys-color-primary);
}

/* Icon Buttons */
.btn-icon {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant, #49454f);
}

.btn-icon:hover {
    background: var(--md-sys-color-surface-container-highest);
}

.btn-edit {
    background: var(--md-sys-color-primary-container);
    color: var(--btn-primary);
}

.btn-edit:hover {
    background: var(--md-sys-color-secondary-container);
    color: var(--btn-primary-hover);
}

.btn-delete {
    background: transparent;
    color: var(--md-sys-color-outline);
}

.btn-delete:hover {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-error);
}

/* Priority Cell */
.priority-cell {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.priority-cell .btn-priority {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant, #49454f);
    padding: 0;
    font-size: 0.85rem;
}

.priority-cell .btn-priority:hover:not(:disabled) {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
}

.priority-cell .btn-priority:disabled {
    opacity: 0.3;
    cursor: default;
}

.priority-cell .priority-value {
    min-width: 28px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--md-sys-color-on-surface-variant);
}

.priority-cell .priority-value.priority-high {
    color: var(--md-sys-color-primary);
    font-weight: 700;
}

/* Login Button */
.btn-login {
    width: 100%;
    height: 48px;
    padding: 16px 0;
    border-radius: var(--md-sys-shape-corner-full);
    font: var(--md-sys-typescale-label-large);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--btn-primary);
    color: var(--btn-on-primary);
    border: none;
    cursor: pointer;
    box-shadow: var(--md-sys-elevation-level1);
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.btn-login:hover:not(:disabled) {
    background: var(--btn-primary-hover);
    box-shadow: var(--md-sys-elevation-level2);
    transform: translateY(-2px);
}

.btn-login:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Action buttons for tracking */
.btn-start {
    background: var(--md-sys-color-success) !important;
    color: white !important;
}

.btn-start:hover {
    background: #15803d !important;
}

.btn-stop {
    background: var(--btn-primary) !important;
}

.btn-pause {
    background: var(--md-sys-color-warning) !important;
    color: #1e293b !important;
}

.btn-pause:hover {
    background: #ca8a04 !important;
}

.btn-resume {
    background: var(--md-sys-color-tertiary) !important;
}

/* ========================================
   Inputs & Form Controls
   ======================================== */
/*  UN `input` NUDO ERA ALTO 56 PX, e nel portale un controllo e' alto 36.
    Non e' una differenza che si nota guardando la pagina che ne ha solo di
    quelli — la pagina d'accesso stava benissimo — si nota quando uno di questi
    finisce accanto a un controllo Telerik: venti pixel di scalino. E' la
    trappola scritta in CLAUDE.md, e la si chiude qui, dov'e' dichiarata, non
    caso per caso.  */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"] {
    height: var(--h-controllo);
    padding: 0 12px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-extra-small);
    background: transparent;
    font: var(--md-sys-typescale-body-large);
    color: var(--md-ref-palette-neutral10);
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    outline: none;
}

input:hover {
    border-color: var(--md-ref-palette-neutral10);
}

input:focus {
    border-color: var(--btn-primary);
    border-width: 2px;
}

input::placeholder {
    color: var(--md-sys-color-outline);
}

input[type=checkbox] {
    width: 18px;
    height: 18px;
    accent-color: var(--btn-primary);
}

.form-group {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #475569;
    font-size: 0.875rem;
}

.form-field {
    margin-bottom: 24px;
}

.form-field label {
    display: flex;
    align-items: center;
    gap: 10px;
    font: var(--md-sys-typescale-label-large);
    color: var(--md-ref-palette-neutral30);
    margin-bottom: 10px;
}

.form-field label i {
    color: var(--btn-primary);
    font-size: 1.125rem;
}

/*  UNA CASELLA DI SPUNTA NON E' LARGA COME IL CAMPO, e questa regola la
    riduceva a una scheggia di tre pixel.

    `width: 100%` serve alle caselle di testo, che dentro `.form-field` devono
    riempire la colonna. Ma prendeva anche gli `input[type=checkbox]`: dentro
    `.filter-check`, che e' un flex, la spunta chiedeva tutta la larghezza,
    l'etichetta accanto la comprimeva, e restava una barretta verticale con la
    frase di fianco. In pagina sembrava una spunta che non c'e' — il
    committente l'ha fotografata sulla testata del preventivo, dove la
    condizione «escludi i prezzi vecchi» era diventata invisibile.

    Nelle righe filtri la stessa spunta si vedeva bene, perche' la' non sta
    dentro un `.form-field`: la stessa classe che funziona in un posto e non
    nell'altro, che e' il modo in cui questi difetti restano in piedi.  */
.form-field input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.required { color: #dc2626; }
.text-danger { color: #dc2626; font-size: 0.8rem; display: block; margin-top: 4px; }
.text-required {
    color: #dc2626;
    font-size: 0.8rem;
    display: inline;
    margin-top: 4px;
}
.text-muted { color: #94a3b8; font-size: 0.9rem; font-style: italic; }

/* ========================================
   Alerts
   ======================================== */
.alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: var(--md-sys-shape-corner-small);
    font: var(--md-sys-typescale-body-medium);
    margin-bottom: 24px;
}

.alert-error { background: var(--md-sys-color-error-container); color: var(--md-sys-color-error); border: none; }
.alert-success { background: var(--md-sys-color-success-container); color: var(--md-sys-color-success); }
.alert-warning { background: var(--md-sys-color-warning-container); color: #854d0e; }
.alert-info { background: var(--md-sys-color-info-container); color: var(--md-sys-color-info); }

/* ========================================
   Login Page
   ======================================== */
.login-page {
    min-height: 100vh;
    /* Fondo navy con una velatura teal: la pagina di accesso e' la prima cosa
       che il cliente vede, e deve dire subito di che prodotto si tratta. */
    background:
        radial-gradient(1100px 520px at 15% -10%, rgba(var(--accent-rgb), 0.20), transparent 60%),
        linear-gradient(160deg, var(--nav-bg-deep) 0%, var(--nav-bg) 55%, #16233c 100%);
    display: flex;
    flex-direction: column;
}

.login-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

.login-logo {
    margin-bottom: 40px;
}

.login-logo img {
    height: 120px;
    transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
}

.login-logo:hover img {
    transform: scale(1.05);
}

.login-card {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--md-sys-shape-corner-extra-large);
    box-shadow: var(--md-sys-elevation-level5);
    width: 100%;
    max-width: 420px;
    overflow: hidden;
}

.login-header {
    padding: 34px 40px 26px;
    text-align: center;
    border-bottom: 1px solid var(--line);
}

.login-header h1 {
    font: var(--md-sys-typescale-headline-medium);
    color: var(--md-ref-palette-neutral10);
    margin: 0 0 12px 0;
}

.login-header p {
    color: var(--ink-3);
    margin: 0;
    font: var(--md-sys-typescale-body-medium);
}

.login-form {
    padding: 40px;
}

.login-links {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
}

.login-links a {
    color: var(--btn-primary);
    text-decoration: none;
    font: var(--md-sys-typescale-label-large);
    transition: color var(--md-sys-motion-duration-short4);
}

.login-links a:hover {
    color: var(--btn-primary-hover);
}

.forgot-link {
    display: block;
    text-align: right;
    margin-top: 16px;
    margin-bottom: 24px;
    font: var(--md-sys-typescale-body-medium);
    color: var(--btn-primary);
    text-decoration: none;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.forgot-link:hover {
    color: var(--btn-primary-hover);
    text-decoration: underline;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    font: var(--md-sys-typescale-body-medium);
    color: var(--btn-primary);
    text-decoration: none;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.back-link:hover {
    color: var(--btn-primary-hover);
    text-decoration: underline;
}

.back-link i {
    font-size: 1.1rem;
    transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.back-link:hover i {
    transform: translateX(-4px);
}

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--btn-primary);
    color: var(--btn-on-primary);
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    font: var(--md-sys-typescale-label-large);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
    box-shadow: var(--md-sys-elevation-level1);
}

.btn-back:hover {
    background: var(--btn-primary-hover);
    box-shadow: var(--md-sys-elevation-level2);
    transform: translateY(-1px);
}

.btn-back i {
    font-size: 1.2rem;
    transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.btn-back:hover i {
    transform: translateX(-4px);
}

.login-footer {
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.32);
    backdrop-filter: blur(10px);
    gap: 16px;
}

.login-footer span {
    color: rgba(255,255,255,0.75);
    font: var(--md-sys-typescale-body-small);
    flex: 1;
}

.login-footer img {
    height: 28px;
    max-width: 180px;
    object-fit: contain;
    opacity: 0.8;
    transition: opacity var(--md-sys-motion-duration-short4);
}

.login-footer img:hover {
    opacity: 1;
}

/* ========================================
   Telerik Grid Overrides
   ======================================== */
.k-grid.m3-grid,
.m3-grid {
    border: none !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
    overflow: hidden;
}

.k-grid.m3-grid .k-grid-header,
.m3-grid .k-grid-header {
    background: var(--md-sys-color-surface-container) !important;
    border-bottom: 1px solid var(--md-sys-color-outline-variant) !important;
    width: 100% !important;
}

/*  Niente larghezza forzata: la decide il colgroup, che e' la sola cosa che
    tiene allineate le due tabelle di Telerik. Con `width: 100%` le intestazioni
    che avanzano venivano tagliate invece di scorrere insieme al corpo. */
.k-grid.m3-grid .k-grid-header-wrap,
.m3-grid .k-grid-header-wrap {
    /* la larghezza la porta il colgroup */
}

.k-grid.m3-grid .k-grid-header th,
.m3-grid .k-grid-header th {
    /*  Un'intestazione e' una didascalia, non una riga di dati: piccola, e alta
        quanto il testo che porta. Con `title-small` e 16px di padding era alta
        quanto una riga vera e rubava lo schermo ai dati. */
    font: var(--md-sys-typescale-label-small) !important;
    color: var(--md-sys-color-on-surface-variant, #49454f) !important;
    padding: 6px 10px !important;
    border: none !important;
    background: transparent !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

.k-grid.m3-grid .k-grid-content,
.m3-grid .k-grid-content {
    background: var(--md-sys-color-surface) !important;
}

.k-grid.m3-grid .k-grid-content td,
.m3-grid .k-grid-content td {
    /*  UNA RIGA DI TABELLA E' UNA RIGA.
        Con `padding: 16px` e body-medium la riga veniva alta 89 pixel: sei righe
        per schermo su settecentocinquantadue clienti. E `word-break: break-word`
        mandava a capo su OGNI LETTERA la sola colonna senza larghezza, perche' e'
        quella a cui il browser lascia lo spazio che avanza: «PUNTO_PRESA-072» si
        leggeva «PUNTO_PRES / A-072», e una riga di computo arrivava a 297 pixel.
        Il testo lungo si taglia con i puntini; dove serve vederlo tutto lo si
        dichiara cella per cella con `.cella-lunga`, invece di allentare la
        regola per tutti. */
    font-size: 0.8125rem !important;
    line-height: 1.25rem !important;
    padding: 5px 10px !important;
    border-bottom: 1px solid var(--md-sys-color-surface-container-high) !important;
    color: var(--md-ref-palette-neutral10) !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.k-grid.m3-grid .k-grid-content td.cella-lunga,
.m3-grid .k-grid-content td.cella-lunga {
    white-space: normal !important;
    overflow: visible;
    line-height: 1.15rem !important;
}

.k-grid.m3-grid .k-grid-table,
.m3-grid .k-grid-table,
.k-grid.m3-grid .k-grid-header-table,
.m3-grid .k-grid-header-table {
    /*  IL DIFETTO PEGGIORE DI TUTTA L'INTERFACCIA, e il piu' difficile da vedere.

        Telerik disegna DUE tabelle — una per l'intestazione e una per il corpo —
        tenute in riga solo dai loro `colgroup`. Con `table-layout: auto` ognuna
        risolve le larghezze per conto proprio, guardando il contenuto che ha:
        e siccome i contenuti sono diversi (titoli sopra, numeri sotto) le due
        divergono. Su /Catalogo l'ultima colonna scartava di 646 pixel, e
        «MINUTI» finiva sopra i bottoni di comando: si leggevano colonne di
        numeri senza sapere quale fosse quale.

        `fixed` MA CON `width: 100%`, e questa e' una correzione: qui c'era
        `width: auto` con `min-width: 100%`, scritto per far scorrere le colonne
        invece di schiacciarle. Faceva **meta' del danno che doveva curare**.
        Con `width: auto` il calcolo a larghezza fissa non ha una larghezza di
        riferimento e ogni tabella fa shrink-to-fit per conto suo: misurato su
        /Preventivi, la colonna CLIENTE era 223px nell'intestazione e 389px nel
        corpo, con uno scarto massimo di **165 pixel** — e le intestazioni
        finivano sopra la colonna sbagliata, che e' esattamente il difetto che
        questo blocco dichiara di risolvere. Il commento diceva il contrario del
        vero, e questo e' il modo peggiore in cui un rimedio puo' sbagliare.

        Con `width: 100%` le due tabelle partono dalla stessa larghezza e il
        colgroup, che e' identico, decide tutto: scarto misurato **zero** su
        /Preventivi, /Macro, /Catalogo e /Articoli. E non si schiaccia niente:
        quando la somma delle colonne supera il 100% la specifica dice che vale
        la somma, quindi la tabella diventa piu' larga del contenitore e
        `.k-grid-content` scorre in orizzontale — che era l'intenzione di prima,
        ottenuta adesso davvero. Misurato: /Preventivi 1.550px in un
        contenitore da 1.300, con lo scorrimento.

        Corollario per chi scrive una griglia nuova: **dare una larghezza a ogni
        colonna**. Quelle senza `Width` si prendono lo spazio che resta, e con
        un contenuto largo (una descrizione di listino arriva a 400 caratteri)
        se lo prendono tutto. */
    table-layout: fixed !important;
    width: 100% !important;
}

.k-grid.m3-grid .k-grid-content tr:hover,
.m3-grid .k-grid-content tr:hover {
    background: var(--md-sys-color-surface-container) !important;
}

.k-grid.m3-grid .k-grid-content tr.k-selected,
.k-grid.m3-grid .k-grid-content tr.k-state-selected,
.m3-grid .k-grid-content tr.k-selected,
.m3-grid .k-grid-content tr.k-state-selected {
    background: var(--md-sys-color-primary-container) !important;
}

/* Pagination */
.k-grid.m3-grid .k-pager-wrap,
.m3-grid .k-pager-wrap {
    background: var(--md-sys-color-surface-container-low) !important;
    border-top: 1px solid var(--md-sys-color-outline-variant) !important;
    padding: 12px 16px !important;
}

.k-grid.m3-grid .k-pager-numbers .k-link,
.m3-grid .k-pager-numbers .k-link {
    border-radius: var(--md-sys-shape-corner-full) !important;
    min-width: 40px !important;
    height: 40px !important;
}

.k-grid.m3-grid .k-pager-numbers .k-link:hover,
.m3-grid .k-pager-numbers .k-link:hover {
    background: var(--md-sys-color-surface-container-highest) !important;
}

.k-grid.m3-grid .k-pager-numbers .k-selected,
.m3-grid .k-pager-numbers .k-selected {
    background: var(--btn-primary) !important;
    color: var(--btn-on-primary) !important;
    border-radius: var(--md-sys-shape-corner-full) !important;
}

/* Grid with smaller text */
.grid-small-text .k-grid-header th,
.grid-small-text .k-grid-content td {
    font-size: 0.875rem !important;
    padding: 8px 12px !important;
}

.grid-small-text .k-grid-header th {
    font-weight: 500 !important;
}

/* Row highlighting for import status */
.k-grid .k-grid-content tr.row-new,
.k-grid .k-grid-content tr.row-new td {
    background-color: #d4edda !important; /* Verde chiaro */
}

.k-grid .k-grid-content tr.row-new:hover,
.k-grid .k-grid-content tr.row-new:hover td {
    background-color: #c3e6cb !important;
}

.k-grid .k-grid-content tr.row-modified,
.k-grid .k-grid-content tr.row-modified td {
    background-color: #fff3cd !important; /* Giallo chiaro */
}

.k-grid .k-grid-content tr.row-modified:hover,
.k-grid .k-grid-content tr.row-modified:hover td {
    background-color: #ffeeba !important;
}

/* Row highlighting for orders without active BOM */
.k-grid .k-grid-content tr.row-no-bom,
.k-grid .k-grid-content tr.row-no-bom td {
    background-color: #fce4ec !important; /* Rosa chiaro */
}

.k-grid .k-grid-content tr.row-no-bom:hover,
.k-grid .k-grid-content tr.row-no-bom:hover td {
    background-color: #f8bbd0 !important;
}

/* ========================================
   Telerik Inputs
   ======================================== */
/* Altezza dei controlli Telerik.
   Solo i controlli a UNA riga hanno un'altezza fissa: area di testo e
   multiselezione devono crescere col contenuto. La regola precedente imponeva
   height:44px a tutto, .k-textarea compresa, e schiacciava l'area di testo a
   una riga tagliandone il contenuto. */
.k-textbox,
.k-numerictextbox,
.k-autocomplete,
.k-dropdown,
.k-dropdownlist,
.k-combobox,
.k-datepicker,
.k-timepicker,
.k-datetimepicker,
.k-input:not(.k-textarea):not(.k-multiselect),
.k-picker {
    border-radius: var(--r) !important;
    border-color: var(--line) !important;
    min-height: 36px !important;
    height: 36px !important;
    box-sizing: border-box !important;
}

/* Multiselezione: parte dell'altezza di un campo singolo ma si allunga
   quando i valori scelti vanno a capo. */
.k-multiselect {
    border-radius: var(--r) !important;
    border-color: var(--line) !important;
    min-height: 36px !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/* Area di testo: l'altezza la decidono le righe richieste. */
.k-textarea {
    border-radius: var(--r) !important;
    border-color: var(--line) !important;
    height: auto !important;
    min-height: 0 !important;
}
.k-textarea .k-input-inner {
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 10px !important;
    line-height: 1.5 !important;
    resize: vertical;
}

.user-password {
    height: 36px !important;
}

.k-dropdown-wrap,
.k-picker-wrap,
.k-dropdownlist .k-input-inner,
.k-dropdown .k-input-inner,
.k-combobox .k-input-inner,
.k-datepicker .k-input-inner,
.k-textbox .k-input-inner {
    /*  La casella INTERNA: l'involucro ci aggiunge un bordo per lato, ed e'
        l'involucro quello che si vede e che allinea la riga.  */
    min-height: calc(var(--h-controllo) - 2px) !important;
    height: calc(var(--h-controllo) - 2px) !important;
    box-sizing: border-box !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    font-family: var(--font-ui) !important;
    font-weight: 400 !important;
}

.k-combobox .k-input-button,
.k-combobox .k-clear-value,
.k-dropdownlist .k-input-button,
.k-datepicker .k-input-button {
    min-height: calc(var(--h-controllo) - 2px) !important;
    height: calc(var(--h-controllo) - 2px) !important;
    width: 30px !important;
    padding: 0 !important;
}

.k-combobox .k-input-button .k-icon,
.k-combobox .k-clear-value .k-icon,
.k-dropdownlist .k-input-button .k-icon,
.k-dropdownlist .k-clear-value .k-icon {
    font-size: 1rem !important;
}

.k-input:hover,
.k-textbox:hover,
.k-dropdown:hover,
.k-dropdownlist:hover,
.k-combobox:hover {
    border-color: var(--md-ref-palette-neutral10) !important;
}

.k-input:focus,
.k-input.k-focus,
.k-textbox:focus,
.k-dropdown.k-focus,
.k-dropdownlist.k-focus,
.k-combobox.k-focus {
    border-color: var(--btn-primary) !important;
    box-shadow: none !important;
}

/* Dropdown popup */
.k-popup,
.k-list-container {
    border-radius: var(--md-sys-shape-corner-medium) !important;
    box-shadow: var(--md-sys-elevation-level3) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}

.k-list-item:hover,
.k-list-item.k-hover {
    background: var(--md-sys-color-surface-container-highest) !important;
}

.k-list-item.k-selected {
    background: var(--md-sys-color-primary-container) !important;
    color: var(--md-sys-color-on-primary-container) !important;
}

/* ========================================
   Telerik Buttons
   ======================================== */
.k-button {
    border-radius: var(--md-sys-shape-corner-full) !important;
    font: var(--md-sys-typescale-label-large) !important;
    transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard) !important;
}

.k-button.k-primary,
.k-button.k-button-solid-primary {
    background: var(--btn-primary) !important;
    border-color: var(--btn-primary) !important;
    color: var(--btn-on-primary) !important;
    border-radius: var(--md-sys-shape-corner-full) !important;
}

.k-button.k-primary:hover,
.k-button.k-button-solid-primary:hover {
    background: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-hover) !important;
}

/* ========================================
   Telerik Dialog
   ======================================== */
.k-dialog,
.k-window {
    border-radius: var(--md-sys-shape-corner-extra-large) !important;
    box-shadow: var(--md-sys-elevation-level5) !important;
    background: var(--md-sys-color-surface-container-high) !important;
}

.k-dialog-titlebar,
.k-window-titlebar {
    background: transparent !important;
    border: none !important;
    padding: 24px 24px 16px !important;
    font: var(--md-sys-typescale-headline-small) !important;
}

.k-dialog-content,
.k-window-content {
    padding: 0 24px !important;
}

.k-dialog-buttongroup,
.k-dialog-actions {
    padding: 24px !important;
    border: none !important;
    gap: 8px !important;
}

/* Notification */
.k-notification {
    border-radius: var(--md-sys-shape-corner-medium) !important;
    box-shadow: var(--md-sys-elevation-level3) !important;
}

/* ========================================
   Permissions & Checkbox Lists
   ======================================== */
.permissions-list,
.checkbox-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    background: #f8fafc;
}

.permission-item,
.checkbox-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}

.permission-item:last-child,
.checkbox-item:last-child {
    border-bottom: none;
}

/* Supplier/phase lists for macro level */
.supplier-list, .phase-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 340px;
    overflow: auto;
    padding: 12px;
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.supplier-item, .phase-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--md-sys-shape-corner-small);
    font-size: 0.9rem;
    transition: background 200ms;
}

.supplier-item:hover, .phase-item:hover {
    background: var(--md-sys-color-surface-container-highest);
}

/* ========================================
   Tracking Page
   ======================================== */
.timer-card {
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-sys-shape-corner-extra-large);
    box-shadow: var(--md-sys-elevation-level1);
}

.timer-card.active {
    background: var(--md-sys-color-success-container);
    border: 2px solid var(--md-sys-color-success);
}

.timer-card.paused {
    background: var(--md-sys-color-warning-container);
    border: 2px solid var(--md-sys-color-warning);
}

.timer-value {
    font: var(--md-sys-typescale-headline-large);
    font-size: 3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.input-card,
.product-info-card,
.actions-card {
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-sys-shape-corner-medium);
    box-shadow: var(--md-sys-elevation-level1);
}

/* Delete confirmation dialog */
.delete-confirm-content {
    text-align: center;
    padding: 16px 0;
}

.warning-icon {
    font-size: 4rem;
    color: var(--md-sys-color-warning);
    margin-bottom: 20px;
}

.delete-confirm-content p {
    margin: 0;
    font: var(--md-sys-typescale-body-large);
    color: var(--md-ref-palette-neutral30);
}

.user-to-delete {
    margin-top: 12px !important;
    color: var(--md-ref-palette-neutral10) !important;
}

/* ========================================
   Breadcrumb
   ======================================== */
.breadcrumb {
    height: 48px;
    padding: 0 16px;
    background-color: var(--md-sys-color-surface-container);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    border-radius: var(--md-sys-shape-corner-small);
}

/* ========================================
   Utility Classes
   ======================================== */

.wrap-lines {
    white-space: pre-line;
}

.m3-grid .btn-icon {
    margin: 0 auto;
}
.mb-3 { margin-bottom: 1rem; }
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.text-center { text-align: center; }
.me-1 { margin-right: 0.25rem; }
.ms-2 { margin-left: 0.5rem; }

.m3-surface { background: var(--md-sys-color-surface); }
.m3-surface-container { background: var(--md-sys-color-surface-container); }
.m3-text-primary { color: var(--btn-primary); }
.m3-text-error { color: var(--md-sys-color-error); }
.m3-text-success { color: var(--md-sys-color-success); }

.m3-elevation-1 { box-shadow: var(--md-sys-elevation-level1); }
.m3-elevation-2 { box-shadow: var(--md-sys-elevation-level2); }
.m3-elevation-3 { box-shadow: var(--md-sys-elevation-level3); }

.m3-rounded-small { border-radius: var(--md-sys-shape-corner-small); }
.m3-rounded-medium { border-radius: var(--md-sys-shape-corner-medium); }
.m3-rounded-large { border-radius: var(--md-sys-shape-corner-large); }
.m3-rounded-full { border-radius: var(--md-sys-shape-corner-full); }

/* ========================================
   Scrollbar
   ======================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-outline);
}

/* Selection */
::selection {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

/* ========================================
   Tiles override (ensure not overridden by button styles)
   ======================================== */
.tiles-grid .tile,
.tiles-grid .tile-modern {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    padding: 22px 18px !important;
    background: var(--btn-primary) !important;
    border-radius: 20px !important;
    border: none !important;
    text-decoration: none !important;
    transition: all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized) !important;
    box-shadow: var(--md-sys-elevation-level2) !important;
    min-height: 120px !important;
    text-align: left !important;
}

.tiles-grid .tile:hover,
.tiles-grid .tile-modern:hover {
    background: var(--btn-primary-hover) !important;
    box-shadow: var(--md-sys-elevation-level4) !important;
    transform: translateY(-1px) !important;
}

.tiles-grid .tile .tile-icon,
.tiles-grid .tile-modern .tile-icon,
.tiles-grid .tile .tile-icon-modern,
.tiles-grid .tile-modern .tile-icon-modern {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    color: white !important;
    font-size: 2rem !important;
}

.tiles-grid .tile .tile-content,
.tiles-grid .tile-modern .tile-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
}

.tiles-grid .tile .tile-content h3,
.tiles-grid .tile-modern .tile-content h3 {
    margin: 0 0 4px 0 !important;
    font: 600 1.32rem/1.58rem 'Inter', system-ui, sans-serif !important;
    color: white !important;
    text-align: left !important;
}

.tiles-grid .tile .tile-content p,
.tiles-grid .tile-modern .tile-content p {
    margin: 0 !important;
    font: 400 1.05rem/1.40rem 'Inter', system-ui, sans-serif !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-align: left !important;
}

/* Tile disabilitato (modulo non ancora attivo) */
.tiles-grid .tile-disabled {
    background: #6b7280 !important;
    border-color: #4b5563 !important;
    opacity: 0.65;
    cursor: default;
    pointer-events: none;
    position: relative;
}

.tiles-grid .tile-disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

.tiles-grid .tile-disabled .tile-icon-modern {
    background: rgba(255, 255, 255, 0.15) !important;
}

.tiles-grid .tile-disabled .tile-content h3,
.tiles-grid .tile-disabled .tile-content p {
    color: rgba(255, 255, 255, 0.7) !important;
}

.tile-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #f59e0b;
    color: #1f2937;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 992px) {
    .filter-item {
        min-width: 140px;
        max-width: none;
        flex: 1 1 calc(50% - 16px);
    }

    .filter-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 8px;
    }
}

@media (max-width: 768px) {
    .filters-row {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 576px) {
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .header-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .filter-item {
        flex: 1 1 100%;
        max-width: none;
    }

    .btn-add {
        width: 100%;
        justify-content: center;
    }

    .filters-card {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .login-wrapper {
        padding: 32px 16px;
    }

    .login-logo img {
        height: 44px;
    }

    .login-footer {
        padding: 16px;
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .login-links {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
}

/* ========================================
   Custom Notifications - Snackbar Style
   ======================================== */
.custom-notification .k-notification {
    min-width: 320px;
    max-width: 568px;
    padding: 16px 24px !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
    box-shadow: var(--md-sys-elevation-level4) !important;
    border: none !important;
    font: var(--md-sys-typescale-body-large) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.custom-notification .k-notification-content {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    padding: 0 !important;
}

/* Success notification */
.custom-notification .k-notification-success {
    background: var(--md-sys-color-success) !important;
    color: white !important;
    border-left: 4px solid #15803d !important;
}

.custom-notification .k-notification-success::before {
    content: "\f058";
    font-family: "bootstrap-icons";
    font-size: 1.5rem;
    margin-right: 8px;
}

/* Error notification */
.custom-notification .k-notification-error {
    background: var(--md-sys-color-error) !important;
    color: white !important;
    border-left: 4px solid #991b1b !important;
}

.custom-notification .k-notification-error::before {
    content: "\f057";
    font-family: "bootstrap-icons";
    font-size: 1.5rem;
    margin-right: 8px;
}

/* Warning notification */
.custom-notification .k-notification-warning {
    background: var(--md-sys-color-warning) !important;
    color: #1e293b !important;
    border-left: 4px solid #ca8a04 !important;
}

.custom-notification .k-notification-warning::before {
    content: "\f071";
    font-family: "bootstrap-icons";
    font-size: 1.5rem;
    margin-right: 8px;
}

/* Info notification */
.custom-notification .k-notification-info {
    background: var(--md-sys-color-info) !important;
    color: white !important;
    border-left: 4px solid #0369a1 !important;
}

.custom-notification .k-notification-info::before {
    content: "\f05a";
    font-family: "bootstrap-icons";
    font-size: 1.5rem;
    margin-right: 8px;
}

/* Animation for notification appearance */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.custom-notification .k-notification {
    animation: slideInRight 0.3s var(--md-sys-motion-easing-emphasized) !important;
}

.custom-notification .k-notification.k-notification-hide {
    animation: slideOutRight 0.2s var(--md-sys-motion-easing-standard) !important;
}

/* ========================================
   Tracking Supplier - Station Cards
   ======================================== */
.station-workstation {
    margin-top: 4px;
    line-height: 1.4;
}

.station-workstation .workstation-group {
    font-size: 0.9rem;
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 400;
}

.station-workstation .workstation-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--md-sys-color-primary);
    margin-left: 4px;
}

.station-phases {
    margin-top: 6px;
    color: var(--md-sys-color-outline);
    font-size: 0.85rem;
    line-height: 1.3;
}

/* ========================================
   Info Box (Item -> Work Instructions link)
   ======================================== */
.work-instructions-link-section {
    margin-top: 24px;
}

.info-box {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-large);
    border-left: 4px solid var(--md-sys-color-primary);
    box-shadow: var(--md-sys-elevation-level1);
}

.info-box .info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    min-width: 56px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
    border-radius: var(--md-sys-shape-corner-medium);
    font-size: 1.8rem;
}

.info-box .info-content {
    flex: 1;
}

.info-box .info-content h4 {
    margin: 0 0 4px 0;
    font: var(--md-sys-typescale-title-medium);
    color: var(--md-ref-palette-neutral10);
}

.info-box .info-content p {
    margin: 0;
    font: var(--md-sys-typescale-body-medium);
    color: var(--md-sys-color-outline);
}

.info-box .info-action {
    flex-shrink: 0;
}

/* ========================================
   Main Content - Station Page (detailed)
   ======================================== */
.station-details-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.station-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.station-details-header h1 {
    margin: 0;
    font: var(--md-sys-typescale-headline-medium);
    color: var(--md-ref-palette-neutral10);
}

.station-details-header .record-count {
    font: var(--md-sys-typescale-label-large);
    color: var(--md-sys-color-outline);
    background: var(--md-sys-color-surface-container-highest);
    padding: 6px 14px;
    border-radius: var(--md-sys-shape-corner-full);
}

.station-info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.station-info-card {
    background: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-sys-shape-corner-large);
    padding: 16px;
    box-shadow: var(--md-sys-elevation-level1);
}

.station-info-card h3 {
    margin: 0 0 8px 0;
    font: var(--md-sys-typescale-title-small);
    color: var(--md-ref-palette-neutral10);
}

.station-info-card p {
    margin: 0;
    font: var(--md-sys-typescale-body-medium);
    color: var(--md-sys-color-outline);
}

/* Expandable details section */
.station-details-content {
    background: var(--md-sys-color-surface);
    border-radius: var(--md-sys-shape-corner-medium);
    padding: 16px;
    box-shadow: var(--md-sys-elevation-level1);
    margin-top: 8px;
}

.details-section {
    margin: 0;
    padding: 0;
    list-style: none;
}

.details-section li {
    padding: 8px 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.details-section li:last-child {
    border-bottom: none;
}

/* Toggle button for details */
.details-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 12px 16px;
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-surface-container-low);
    transition: background var(--md-sys-motion-duration-short4);
}

.details-toggle:hover {
    background: var(--md-sys-color-surface-container-highest);
}

.details-toggle i {
    margin-left: 8px;
    transition: transform var(--md-sys-motion-duration-short4);
}

.details-toggle.expanded i {
    transform: rotate(180deg);
}

/* Button Delete BOM - Circolare e pi� largo */
.btn-delete-bom {
    min-width: 45px;
    width: 45px;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-delete-bom i {
        font-size: 18px;
    }

/* ========================================
   BOM ACTIVE BADGE
   ======================================== */
.badge-bom-active {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.78rem;
    background-color: #e8f5e9;
    color: #2e7d32;
    white-space: nowrap;
}

/* ========================================
   ORDER STATUS BADGES
   ======================================== */
.badge-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
}

.badge-status.status-todo {
    background-color: #e3f2fd;
    color: #1565c0;
}

.badge-status.status-inprogress {
    background-color: #ff9800;
    color: #fff;
}

.badge-status.status-completed {
    background-color: #43a047;
    color: #fff;
}

.badge-status.status-forceclosed {
    background-color: #ef6c00;
    color: #fff;
}

/* ========================================
   ORDER VIEW BUTTON (eye icon)
   ======================================== */
.btn-icon.btn-view {
    color: #1976d2;
}

.btn-icon.btn-view:hover {
    color: #0d47a1;
    background-color: #e3f2fd;
}

/* ========================================
   PRODUCTS GRID - Row Colors by Status
   ======================================== */

/* In Lavorazione - Celeste chiaro */
.products-grid tbody tr.row-product-working {
    background-color: #e1f5fe !important;
}

.products-grid tbody tr.row-product-working:hover {
    background-color: #b3e5fc !important;
}

/* Prossima Stazione (completato su una WS, deve andare su un'altra) - Lilla */
.products-grid tbody tr.row-product-next-ws {
    background-color: #ede7f6 !important;
}

.products-grid tbody tr.row-product-next-ws:hover {
    background-color: #d1c4e9 !important;
}

/* In Pausa - Giallo */
.products-grid tbody tr.row-product-paused {
    background-color: #fff9c4 !important;
}

.products-grid tbody tr.row-product-paused:hover {
    background-color: #fff59d !important;
}

/* Errore - Rosso */
.products-grid tbody tr.row-product-error {
    background-color: #ffcdd2 !important;
}

.products-grid tbody tr.row-product-error:hover {
    background-color: #ef9a9a !important;
}

/* Completato - Verde */
.products-grid tbody tr.row-product-completed {
    background-color: #c8e6c9 !important;
}

.products-grid tbody tr.row-product-completed:hover {
    background-color: #a5d6a7 !important;
}

/* ========================================
   PRODUCT STATUS BADGES
   ======================================== */
.badge-product-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.8rem;
    white-space: nowrap;
}

.badge-product-status.badge-todo {
    background-color: #eceff1;
    color: #546e7a;
}

.badge-product-status.badge-working {
    background-color: #039be5;
    color: #fff;
}

.badge-product-status.badge-next-ws {
    background-color: #7e57c2;
    color: #fff;
}

.badge-product-status.badge-paused {
    background-color: #fbc02d;
    color: #333;
}

.badge-product-status.badge-error {
    background-color: #e53935;
    color: #fff;
}

.badge-product-status.badge-completed {
    background-color: #43a047;
    color: #fff;
}

/* ========================================
   SERIAL NUMBER CLICKABLE
   ======================================== */
.serial-clickable {
    cursor: pointer;
    transition: color 0.2s;
}

.serial-clickable:hover {
    color: #1976d2;
    text-decoration: underline;
}

.serial-clickable:hover i {
    opacity: 1 !important;
}

/* ========================================
   SERIAL NUMBER EDIT DIALOG
   ======================================== */
.serial-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 16px;
    padding: 0;
    width: 400px;
    max-width: 90vw;
    z-index: 1001;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
}

.serial-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.serial-dialog-header h5 {
    margin: 0;
    font-weight: 700;
    font-size: 1.1rem;
}

.serial-dialog-body {
    padding: 20px;
}

.serial-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid #e0e0e0;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1000;
    backdrop-filter: blur(2px);
}

/* ========================================
   PRODUCT NOTES EDIT DIALOG
   ======================================== */
.notes-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 16px;
    padding: 0;
    width: 600px;
    max-width: 90vw;
    z-index: 1001;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
}

.notes-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.notes-dialog-header h5 {
    margin: 0;
    font-weight: 700;
    font-size: 1.1rem;
}

.notes-dialog-body {
    padding: 20px;
}

.notes-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid #e0e0e0;
}

/* ========================================
   PRODUCT COMPONENTS DIALOG
   ======================================== */
.components-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 16px;
    padding: 0;
    width: 1000px;
    max-width: 95vw;
    max-height: 90vh;
    z-index: 1001;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
}

.components-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.components-dialog-header h5 {
    margin: 0;
    font-weight: 700;
    font-size: 1.1rem;
}

.components-dialog-close {
    background: transparent;
    border: none;
    color: #6c757d;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 50%;
}

.components-dialog-close:hover {
    background: #f0f0f0;
    color: #333;
}

.components-dialog-body {
    padding: 16px 20px;
    overflow-y: auto;
}

.components-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid #e0e0e0;
}

.components-dialog .cf-control {
    min-height: 56px;
}

/* Annotazioni */
.cf-annotations {
    margin-bottom: 16px;
}

.cf-annotations label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 4px;
}

.cf-annotations-box {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 8px 10px;
    background: #f8f9fa;
    min-height: 38px;
    white-space: pre-wrap;
}

/* Filtri */
.cf-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 16px;
}

.cf-item {
    display: flex;
    flex-direction: column;
    flex: 1 1 220px;
    min-width: 180px;
}

.cf-item-narrow {
    flex: 0 1 160px;
    min-width: 140px;
}

.cf-item label {
    font-size: 0.78rem;
    font-weight: 600;

/* Shipments grid - compact table like Intranet2020 */
.shipments-grid .k-grid-table {
    font-size: 0.78rem;
}
.shipments-grid .k-grid-table th {
    font-size: 0.72rem;
    padding: 4px 6px;
    white-space: nowrap;
}
.shipments-grid .k-grid-table td {
    padding: 2px 6px;
    white-space: nowrap;
}
.shipments-grid .k-checkbox {
    width: 16px !important;
    height: 16px !important;
}
    color: #6c757d;
    margin-bottom: 4px;
}

.cf-control {
    height: 38px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.9rem;
    font-family: inherit;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
}

.cf-control:focus {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.15);
}

.cf-clear {
    height: 56px;
    width: 56px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: #fff;
    color: #6c757d;
    cursor: pointer;
}

.cf-clear i {
    font-size: 1.25rem;
}

.cf-clear:hover {
    background: #f0f0f0;
    color: #dc3545;
}

/* =============================================
   SEZIONE TESORERIA
   ============================================= */

/* Tabella Cash Flow */
.cf-table {
    border-collapse: collapse;
    min-width: 1200px;
    width: 100%;
    font-size: 0.85rem;
}
.cf-table th, .cf-table td {
    padding: 6px 10px;
    white-space: nowrap;
    text-align: right;
}
.cf-table th:first-child, .cf-table td:first-child {
    text-align: left;
}
.cf-header-months th {
    background: var(--md-sys-color-primary);
    color: #000000;
    text-align: center;
    font-weight: 600;
}
.cf-header-decades th {
    background: var(--md-sys-color-surface-container-high);
    text-align: center;
    font-size: 0.8rem;
}
.cf-row-total {
    background: var(--md-sys-color-primary-container);
    font-weight: 700;
}
.cf-row-saldo {
    background: var(--md-sys-color-tertiary-container);
    font-weight: 700;
}
.cf-row-group-header {
    background: var(--md-sys-color-surface-container-high);
    font-weight: 600;
}
.cf-row-detail:nth-child(even) {
    background: var(--md-sys-color-surface-container-low);
}

/* Drillable rows (bank breakdown drill-down) */
.cf-row-drillable {
    cursor: pointer;
}
.cf-row-drillable:hover {
    filter: brightness(0.95);
}
.cf-row-drillable .cf-label-col {
    cursor: pointer;
}
/* Bank breakdown sub-rows */
.cf-row-bank-detail {
    background: #F8FAFC;
}
.cf-row-bank-detail:nth-child(even) {
    background: #F1F5F9;
}
.cf-row-bank-detail .cf-label-col {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--md-sys-color-on-surface-variant);
}
.cf-cell-positive {
    color: #1A5C1A;
}
.cf-cell-negative {
    color: #C8102E;
}
.cf-cell-zero {
    color: var(--md-sys-color-outline);
}

/* Filtri tesoreria */
.filter-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    align-items: center;
}
.filter-check {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 0.875rem;
    cursor: pointer;
}
.filter-disabled {
    opacity: 0.38;
}
.filter-date-group {
    display: flex;
    align-items: center;
    gap: 4px;
}
.filter-action {
    justify-self: end;
}
.filter-checks {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Alternating month columns - per row type */
/* Normal rows */
.cf-row-detail .cf-month-even,
.cf-row-group-header .cf-month-even {
    background-color: #FFFFFF;
}
.cf-row-detail .cf-month-odd,
.cf-row-group-header .cf-month-odd {
    background-color: #F1F5F9;
}
/* Total rows */
.cf-row-total .cf-month-even {
    background-color: #DBEAFE;
}
.cf-row-total .cf-month-odd {
    background-color: #BFDBFE;
}
.cf-scroll-container .cf-table .cf-row-total .cf-scaduto-cell {
    background: #DBEAFE;
}
.cf-scroll-container .cf-table .cf-row-total .cf-label-col {
    background: #DBEAFE;
}
/* Saldo rows */
.cf-row-saldo .cf-month-even {
    background-color: #DBEAFE;
}
.cf-row-saldo .cf-month-odd {
    background-color: #BFDBFE;
}
.cf-scroll-container .cf-table .cf-row-saldo .cf-scaduto-cell {
    background: #DBEAFE;
}
.cf-scroll-container .cf-table .cf-row-saldo .cf-label-col {
    background: #DBEAFE;
}
/* Month header cells (alternating) */
.cf-header-months .cf-month-even,
.cf-header-decades .cf-month-even {
    background-color: #E2E8F0;
}
.cf-header-months .cf-month-odd,
.cf-header-decades .cf-month-odd {
    background-color: #CBD5E1;
}
/* Scroll container with sticky header/footer */
.cf-scroll-container {
    max-height: 68vh;
    overflow: auto;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    background: #FFFFFF;
}
.cf-scroll-container .cf-table thead {
    position: sticky;
    top: 0;
    z-index: 3;
}
.cf-scroll-container .cf-table tfoot {
    position: sticky;
    bottom: 0;
    z-index: 3;
}
/* Make sure label column also sticks */
.cf-scroll-container .cf-table .cf-label-col {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #FFFFFF;
}
.cf-scroll-container .cf-table thead .cf-label-col {
    z-index: 4;
}
.cf-scroll-container .cf-table tfoot .cf-label-col {
    z-index: 4;
    font-weight: 700;
}

/* Table section label */
.cf-table-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--md-sys-color-primary);
    padding: 8px 0 4px 0;
    margin-top: 8px;
}
.cf-table thead .cf-month-even,
.cf-table thead .cf-month-odd {
    text-align: center;
}
/* Scaduto and label columns */
.cf-table .cf-scaduto-hdr {
    background: #FFF7ED;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
}
.cf-table .cf-scaduto-cell {
    background: #FFF7ED;
}
.cf-table .cf-total-hdr {
    background: #E0E7FF;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
}
.cf-table .cf-total-cell {
    background: #EEF2FF;
    font-weight: 600;
}
.cf-table .cf-label-col {
    min-width: 260px;
    position: sticky;
    left: 0;
    z-index: 1;
    background: #FFFFFF;
    border-right: 2px solid var(--md-sys-color-outline-variant);
    text-align: left;
    font-weight: 500;
}
.cf-label-indented {
    padding-left: 20px !important;
}
.cf-hdr-label {
    text-align: left;
    font-weight: 600;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
.cf-table .cf-subhdr {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--md-sys-color-on-surface);
}

/* Righe spostate (manovra) */
.row-spostata {
    background-color: #FEF3C7 !important;
}

/* Split layout: Partite Aperte (left) + Ordini Aperti (right) */
.treasury-split {
    display: flex;
    gap: 12px;
    width: 100%;
}
.treasury-split-left,
.treasury-split-right {
    flex: 1;
    min-width: 0;
}
.treasury-split-left .cf-scroll-container,
.treasury-split-right .cf-scroll-container {
    max-height: 56vh;
}
.treasury-split-left .filter-row,
.treasury-split-right .filter-row {
    grid-template-columns: repeat(4, 1fr);
}

/* Treasury tabs: tighter filter card padding */
.treasury-filters {
    padding: 12px 24px !important;
}

/* Tab navigation */
.treasury-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--md-sys-color-outline-variant);
    padding-bottom: 0;
}
.treasury-tab {
    padding: 8px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}
.treasury-tab:hover {
    color: var(--md-sys-color-on-surface);
}
.treasury-tab.active {
    color: var(--md-sys-color-primary);
    border-bottom-color: var(--md-sys-color-primary);
}

/* Manovra panel */
.manovra-panel {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--md-sys-color-surface-container-low);
    border-radius: 8px;
    margin-bottom: 12px;
}
.manovra-actions {
    display: flex;
    gap: 8px;
}

/* Compact button for filter row */
.btn-small-nowrap {
    white-space: nowrap !important;
    flex-shrink: 0;
}

/* Small round icon button (e.g. "latest elaboration" reset) */
.btn-icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--md-sys-color-outline);
    background: var(--md-sys-color-surface);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--md-sys-color-on-surface);
    font-size: 0.85rem;
    transition: background 0.15s;
}
.btn-icon-circle:hover {
    background: var(--md-sys-color-surface-container-highest);
}

/* Drag & Drop move cell highlight */
.cf-cell-moved-from {
    background-color: #DBEAFE !important;
    outline: 2px dashed #3B82F6 !important;
    outline-offset: -2px;
}
.cf-cell-moved-fwd {
    background-color: #DCFCE7 !important;
    outline: 2px dashed #22C55E !important;
    outline-offset: -2px;
}
.cf-cell-moved-bwd {
    background-color: #DBEAFE !important;
    outline: 2px dashed #3B82F6 !important;
    outline-offset: -2px;
}
.cf-cell-moved-to {
    background-color: #DCFCE7 !important;
    outline: 2px dashed #22C55E !important;
    outline-offset: -2px;
}

/* Selected source cell for click-to-move */
.cf-cell-selected {
    outline: 3px solid var(--md-sys-color-primary) !important;
    outline-offset: -3px;
}

/* Today's loaded maneuvers: blue border + light bg */
.cf-cell-maneuver-today {
    box-shadow: inset 0 0 0 2px #1E40AF !important;
    background-color: #EFF6FF !important;
}
.cf-cell-maneuver-from {
    text-decoration: line-through;
    opacity: 0.7;
}

/* Manual Data dialog */
.manual-data-dialog .k-window-content {
    max-height: 70vh;
    overflow-y: auto;
}

/* Cell detail popup */
.cell-detail-dialog .k-window-content {
    max-height: 75vh;
    overflow: hidden;
}
.cell-detail-table {
    min-width: 700px;
    font-size: 0.82rem;
}
.cell-detail-table thead th {
    background: var(--md-sys-color-surface-container-high);
    font-weight: 600;
    font-size: 0.78rem;
    position: sticky;
    top: 0;
    z-index: 1;
}
.cell-detail-table tbody tr:nth-child(even) {
    background: var(--md-sys-color-surface-container-low);
}
.cell-detail-table td {
    padding: 4px 8px;
}


/* ========================================
   Griglie e controlli Telerik: aspetto "sala controllo"
   In fondo al foglio di proposito: queste regole devono vincere su quelle
   piu' vecchie e specifiche scritte per il tema precedente.
   ======================================== */
.k-grid {
    border: 1px solid var(--line) !important;
    border-radius: var(--r) !important;
    background: var(--card-bg) !important;
    font-family: var(--font-ui) !important;
}

.k-grid .k-grid-header,
.k-grid .k-grid-header-wrap,
.k-grid .k-grid-header th {
    background: var(--md-sys-color-surface-container) !important;
    border-color: var(--line) !important;
}

/* Intestazioni in maiuscoletto: si distinguono dai dati senza usare grassetti pesanti */
.k-grid .k-grid-header th,
.k-grid .k-grid-header th .k-link,
.k-grid .k-table-thead .k-table-th {
    font: var(--md-sys-typescale-label-small) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: var(--ink-2) !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

.k-grid td,
.k-grid .k-table-td {
    border-color: var(--line-soft) !important;
    color: var(--ink) !important;
}

.k-grid tbody tr:hover td,
.k-grid .k-table-row:hover > td {
    background: #f2fbfa !important;
}

.k-grid tbody tr.k-selected td,
.k-grid .k-table-row.k-selected > td {
    background: var(--accent-soft) !important;
    color: var(--accent-deep) !important;
}

/* Numeri incolonnati: la lettura di una colonna di importi e' il 90% del lavoro */
.k-grid td.k-table-td[style*="text-align: right"],
.k-grid .text-end,
.k-grid .num {
    font-variant-numeric: tabular-nums;
}

.k-pager,
.k-grid .k-pager-wrap {
    background: var(--md-sys-color-surface-container) !important;
    border-top: 1px solid var(--line) !important;
    color: var(--ink-2) !important;
    font: var(--md-sys-typescale-body-small) !important;
}

/* --- campi e bottoni --- */
.k-input,
.k-picker,
.k-textbox,
.k-combobox,
.k-dropdownlist,
.k-datepicker,
.k-numerictextbox {
    border-radius: var(--r) !important;
    border-color: var(--line) !important;
    font-family: var(--font-ui) !important;
}

.k-input:focus-within,
.k-picker:focus-within,
.k-input.k-focus,
.k-picker.k-focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14) !important;
}

.k-button {
    border-radius: 5px !important;
    font-family: var(--font-ui) !important;
    font-weight: 550 !important;
}

.k-button-solid-base {
    background: #fff !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}
.k-button-solid-base:hover {
    background: var(--md-sys-color-surface-container) !important;
    border-color: var(--md-ref-palette-neutral80) !important;
}

/* --- finestre e menu --- */
.k-window,
.k-dialog,
.k-animation-container .k-popup,
.k-menu-popup {
    border-radius: var(--r) !important;
    border-color: var(--line) !important;
    box-shadow: var(--md-sys-elevation-level4) !important;
}

.k-window-titlebar,
.k-dialog-titlebar {
    background: var(--nav-bg) !important;
    color: #fff !important;
    border-bottom: 0 !important;
    padding: 10px 14px !important;
}
.k-window-title,
.k-dialog-title {
    font: var(--md-sys-typescale-title-small) !important;
}

/* --- barre di sezione delle pagine (Tesoreria, CFO) --- */
.treasury-tabs,

.treasury-tab,
.treasury-tab:hover,
.cfo-tab:hover { background: rgba(255, 255, 255, 0.7); color: var(--ink); }

.treasury-tab.active,
.cfo-tab.active {
    background: var(--card-bg);
    color: var(--accent-deep);
    box-shadow: var(--md-sys-elevation-level1);
}

/* --- intestazione di pagina --- */
.page-header h1 {
    font: var(--md-sys-typescale-headline-small) !important;
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-header h1 > i { color: var(--accent-strong); font-size: 1.125rem; }

/* ========================================
   Pagine di lavoro: gestione notifiche, messaggi
   ======================================== */
.work-page { width: 100%; }

/* Il filtro con la spunta deve stare in linea con i campi accanto */
.filter-item-check { display: flex; align-items: center; }
.filter-item-check label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
    white-space: nowrap;
    cursor: pointer;
}

/* Due righe in una cella: titolo e sottotitolo */
.cell-stack { display: grid; gap: 1px; }
.cell-stack strong { font: var(--md-sys-typescale-label-large); }
.cell-stack small {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-3);
    display: block;
    max-width: 60ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sev-badge {
    display: inline-block;
    white-space: nowrap;
    padding: 2px 8px;
    border-radius: 3px;
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.sev-badge.sev-info { background: var(--accent-soft); color: var(--accent-deep); }
.sev-badge.sev-warning { background: var(--md-sys-color-warning-container); color: var(--md-sys-color-warning); }
.sev-badge.sev-critical { background: var(--md-sys-color-error-container); color: var(--md-sys-color-error); }

.text-late { color: var(--md-sys-color-error); font-weight: 600; }

/* Righe della griglia: completate smorzate, scadute segnalate */
.k-grid tr.row-done td { opacity: 0.55; }
.k-grid tr.row-late td { background: #fff8f7 !important; }

/* --- moduli nei dialog --- */
.form-grid { display: grid; gap: 14px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.form-field { display: grid; gap: 4px; min-width: 0; }
.form-field > label {
    font: var(--md-sys-typescale-label-medium);
    color: var(--ink-2);
}
.field-hint { font: var(--md-sys-typescale-body-small); color: var(--ink-3); }
.form-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 5px;
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-error);
    font: var(--md-sys-typescale-body-small);
}

/* ========================================
   Messaggistica interna
   ======================================== */
/* Tre colonne: cartelle, elenco, lettura. Il riquadro di lettura prende lo
   spazio che resta, cosi' su schermi larghi si legge senza righe strette. */
.mail-layout {
    display: grid;
    grid-template-columns: 220px minmax(300px, 380px) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    min-height: 60vh;
}

.mail-folders {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: var(--r);
    align-self: start;
}

.mail-folder {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    font: var(--md-sys-typescale-label-large);
    text-align: left;
}
.mail-folder:hover { background: var(--md-sys-color-surface-container); color: var(--ink); }
.mail-folder.is-active {
    background: var(--accent-soft);
    color: var(--accent-deep);
}
.mail-folder > span:first-of-type { flex: 1; }

.mail-badge {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--md-sys-color-error);
    color: #fff;
    font: var(--md-sys-typescale-label-small);
    text-align: center;
}

.mail-filter {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft);
}
.mail-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
    cursor: pointer;
}

.mail-list {
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow-y: auto;
    max-height: 72vh;
}

.mail-row {
    display: grid;
    gap: 2px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--line-soft);
    border-left: 3px solid transparent;
    cursor: pointer;
}
.mail-row:last-child { border-bottom: 0; }
.mail-row:hover { background: var(--md-sys-color-surface-container); }
.mail-row.is-selected { border-left-color: var(--accent); background: var(--accent-soft); }
.mail-row.is-unread .mail-subject { font-weight: 700; }
.mail-row.is-unread .mail-who { color: var(--ink); font-weight: 600; }

.mail-row-top { display: flex; justify-content: space-between; gap: 8px; }
.mail-who {
    font: var(--md-sys-typescale-label-medium);
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mail-when { font: var(--md-sys-typescale-label-small); color: var(--ink-3); flex: 0 0 auto; }
.mail-subject {
    font: var(--md-sys-typescale-label-large);
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mail-preview {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-reader {
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: var(--r);
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

.mail-head {
    padding: 16px 18px;
    border-bottom: 1px solid var(--line-soft);
}
.mail-head h2 { margin: 0 0 8px; font: var(--md-sys-typescale-title-medium); }
.mail-head-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
}
.mail-head-meta strong { color: var(--ink-3); font-weight: 550; }
.mail-head-actions { display: flex; gap: 8px; margin-top: 12px; }

/* Il testo arriva da una textarea: gli invii vanno rispettati */
.mail-body {
    flex: 1;
    padding: 18px;
    white-space: pre-wrap;
    font: var(--md-sys-typescale-body-medium);
    color: var(--ink);
    overflow-y: auto;
}

@media (max-width: 1200px) {
    .mail-layout { grid-template-columns: 200px minmax(0, 1fr); }
    .mail-reader { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .mail-layout { grid-template-columns: minmax(0, 1fr); }
    .mail-list { max-height: 45vh; }
}

/* ========================================
   Dialog: intestazione, corpo, pulsanti
   ======================================== */
.k-dialog-titlebar .k-dialog-titlebar-actions .k-button,
.k-window-titlebar .k-window-titlebar-actions .k-button {
    background: transparent !important;
    border-color: transparent !important;
    color: rgba(255, 255, 255, 0.75) !important;
}
.k-dialog-titlebar .k-dialog-titlebar-actions .k-button:hover,
.k-window-titlebar .k-window-titlebar-actions .k-button:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
}

.k-dialog-content,
.k-window-content { padding: 18px 20px !important; }

/* I pulsanti stanno a destra e larghi quanto il testo.
   La classe del piede e' .k-actions (non .k-dialog-buttongroup), e il
   modificatore .k-actions-stretched e' cio' che li allargava a mezza finestra
   ciascuno. */
.k-dialog-actions,
.k-window-actions,
.k-actions.k-actions-stretched {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    margin: 0 !important;
    border-top: 1px solid var(--line-soft) !important;
    background: var(--md-sys-color-surface-container) !important;
}
.k-dialog-actions > .k-button,
.k-window-actions > .k-button,
.k-actions.k-actions-stretched > .k-button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 118px;
    justify-content: center;
}

/*  PULSANTI ALTI QUANTO I CAMPI — e per un anno lo sono stati solo dove una
    regola li nominava uno per uno.

    Questo blocco cominciava con `.k-button-md`, che doveva essere la regola
    GENERALE: Telerik 15 quella classe non la rende. I suoi pulsanti sono
    `k-button k-button-base`, `k-button-primary`, `k-button-flat`, e la misura
    arrivava solo dalle quattro righe che seguivano — testata, riga filtri,
    comandi di un dialogo, griglia di form. Dappertutto altrove un pulsante
    restava a 28 px: e' il caso di «Analizza» dentro il dialogo
    dell'importazione, quello che il committente ha fotografato.

    E' la terza classe morta trovata in questo foglio. Un selettore che non
    aggancia niente non fallisce: TACE, e chi legge il CSS giura il contrario.

    Adesso la regola e' su `.k-button` e le eccezioni sono dichiarate: i
    pulsanti che si vogliono PICCOLI lo dicono con la loro classe di misura, e
    quelli dentro una griglia li dimensiona la riga.  */
.k-button {
    min-height: var(--h-controllo);
    padding-block: 0;
    padding-inline: 14px;
}

/*  I piccoli restano piccoli: i comandi di riga (`Size="sm"`, 26px), il
    paginatore, la crocetta in barra titolo e i pulsantini dentro un campo —
    la freccia di una tendina, la X che svuota.  */
.k-button-sm,
.k-button-xs,
.k-grid .k-button,
.k-pager .k-button,
.k-window-titlebar-actions .k-button,
.k-dialog-titlebar-actions .k-button,
.k-input .k-button,
.k-picker .k-button {
    min-height: 0;
    padding-inline: unset;
}

/* Il normalizzatore qui sopra fissa `min-height`, non `height`: le classi
   ereditate da TexHub - `.btn-add`, e `.btn-import` finche' c'era - dichiarano
   `height: 44px` e quindi gli sopravvivevano. In una testata convivevano un comando da
   44px e i suoi vicini da 34, e la fila sembrava disallineata senza che si
   capisse perche'. Vale solo in testata, dove l'altezza dei comandi e' una
   riga sola: fuori da qui una classe che chiede 44px puo' avere le sue
   ragioni. */
.page-header .k-button { height: auto !important; }
.k-button.k-icon-button { padding-inline: 0 !important; }
/* Il pulsante di chiusura in barra titolo resta piccolo */
.k-window-titlebar-actions .k-button { min-height: 24px !important; }

/* --- multiselezione: un solo riquadro, alto come un campo normale --- */
.k-multiselect .k-input-values {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    padding: 3px 4px !important;
    min-height: 34px;
}
.k-multiselect .k-input-inner {
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 4px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    flex: 1 1 80px;
    min-width: 80px;
}
.k-multiselect .k-chip {
    height: 24px;
    border-radius: 4px;
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-deep);
}
.k-multiselect .k-chip .k-chip-content { padding-inline: 6px; }

/* ========================================
   Messaggistica: rifiniture
   ======================================== */
/* Riquadri della giusta altezza: non due grandi vuoti bianchi */
.mail-list { max-height: 64vh; min-height: 220px; }
.mail-reader { min-height: 220px; }
.mail-layout { min-height: 0; align-items: start; }

.mail-list .empty-state,
.mail-reader .empty-state { padding: 48px 20px; }

/* Riga della posta: iniziali del mittente, come in un client di posta */
.mail-row { grid-template-columns: 34px minmax(0, 1fr); align-items: start; column-gap: 10px; }
.mail-row > .mail-avatar { grid-row: 1 / span 3; }
.mail-avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r);
    background: var(--md-sys-color-surface-container-highest);
    color: var(--ink-2);
    font: var(--md-sys-typescale-label-small);
}
.mail-row.is-unread .mail-avatar { background: var(--accent-soft); color: var(--accent-deep); }
.mail-row.is-selected .mail-avatar { background: #fff; color: var(--accent-deep); }

/* Pallino del non letto accanto all'oggetto */
.mail-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--accent);
    margin-right: 6px;
    vertical-align: middle;
}

.mail-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 13px;
    border-bottom: 1px solid var(--line);
    background: var(--md-sys-color-surface-container);
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-3);
}

/* Il messaggio letto: intestazione compatta, corpo che respira */
.mail-head { padding: 14px 18px; }
.mail-head-top { display: flex; align-items: flex-start; gap: 12px; }
.mail-head-top .mail-avatar { width: 40px; height: 40px; font: var(--md-sys-typescale-label-large); }
.mail-head h2 { margin: 0 0 4px; font: var(--md-sys-typescale-title-small); }

.mail-count {
    text-transform: none;
    letter-spacing: 0;
    font: var(--md-sys-typescale-label-small);
    color: var(--ink-3);
}

/* Corpo del messaggio in colonna leggibile, non righe da 900px */
.mail-body { max-width: 78ch; }

/* Fuoco visibile sulle voci di menu.
   Serve anche a difendersi da fogli di terze parti: Bootstrap definisce una
   .nav-link con :focus a specificita' piu' alta, ed e' il motivo per cui le
   classi della barra sono prefissate tx-. */
.tx-nav-link:focus-visible,
.tx-nav-child:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    color: var(--nav-text-strong);
}
.tx-nav-link:focus,
.tx-nav-child:focus { color: var(--nav-text-strong); }
.tx-nav-link.is-active:focus,
.tx-nav-child.is-active:focus { color: #fff; }

/* Anteprima della nota che si sta assegnando */
.assign-preview {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--r);
    background: var(--md-sys-color-surface-container);
}
.assign-preview > i { color: var(--accent-deep); margin-top: 2px; }
.assign-preview strong { display: block; font: var(--md-sys-typescale-label-large); }
.assign-preview small { font: var(--md-sys-typescale-body-small); color: var(--ink-2); }


/* ========================================
   Virtual CFO
   Cinque schermate dense. La gerarchia e' sempre la stessa: verdetto in una riga,
   tessere, il grafico piu' grande, i confronti affiancati, le eccezioni in tabella.
   ======================================== */

.cfo {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

/* --- barra delle sezioni --- */
.cfo-nav {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--line);
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 4px;
    overflow-x: auto;
}

.cfo-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 0;
    background: transparent;
    border-radius: 4px;
    font: var(--md-sys-typescale-label-large);
    color: var(--ink-2);
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, color .12s;
}

.cfo-nav-item:hover { background: var(--md-sys-color-surface-container); color: var(--ink); }
.cfo-nav-item.is-active { background: var(--ink); color: #fff; }
.cfo-nav-item.is-active:hover { background: var(--ink); color: #fff; }
.cfo-nav-item > i { font-size: .95rem; }

/* --- intestazione con data del dato --- */
.cfo-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.cfo-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--ink);
}

.cfo-head .cfo-asof {
    font: var(--md-sys-typescale-label-medium);
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* --- riga del verdetto --- */
.cfo-verdict {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent-strong);
    border-radius: 6px;
    background: var(--card-bg);
    font: var(--md-sys-typescale-body-medium);
    color: var(--ink);
    line-height: 1.5;
}

.cfo-verdict.is-bad { border-left-color: #dc2626; }
.cfo-verdict.is-warning { border-left-color: #d97706; }
.cfo-verdict > i { font-size: 1.05rem; color: var(--accent-deep); margin-top: 1px; }
.cfo-verdict.is-bad > i { color: #dc2626; }
.cfo-verdict.is-warning > i { color: #d97706; }
.cfo-verdict b { font-weight: 650; }

/* --- tessere --- */
.cfo-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.cfo-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 13px 15px 14px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: border-color .12s, box-shadow .12s;
    overflow: hidden;
}

a.cfo-tile:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }

/* La salute e' una barra sottile in alto: non colora tutto il riquadro. */
.cfo-tile::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--line);
}

.cfo-tile.h-good::before { background: #16a34a; }
.cfo-tile.h-warning::before { background: #d97706; }
.cfo-tile.h-bad::before { background: #dc2626; }

.cfo-tile-label {
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cfo-tile-value {
    font-size: 1.4rem;
    font-weight: 650;
    letter-spacing: -.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.cfo-tile-value.is-negative { color: #dc2626; }

.cfo-tile-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    font: var(--md-sys-typescale-label-small);
    color: var(--ink-3);
    min-height: 16px;
}

.cfo-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.cfo-delta.is-up { color: #16a34a; }
.cfo-delta.is-down { color: #dc2626; }

/* --- pannelli --- */
.cfo-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px 16px 16px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    min-width: 0;
}

.cfo-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cfo-panel-title {
    margin: 0;
    font: var(--md-sys-typescale-title-small);
    font-weight: 650;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.cfo-panel-title > i { color: var(--accent-deep); }
.cfo-panel-note { font: var(--md-sys-typescale-label-small); color: var(--ink-3); }

/* Due pannelli affiancati, in colonna sotto i 1100px. */
.cfo-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
    gap: 12px;
    align-items: start;
}

.cfo-split-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    align-items: start;
}

@media (max-width: 1100px) {
    .cfo-split-2-1 { grid-template-columns: 1fr; }
}

/* --- legenda --- */
.cfo-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font: var(--md-sys-typescale-label-small);
    color: var(--ink-2);
}

.cfo-legend span { display: inline-flex; align-items: center; gap: 6px; }

.cfo-legend i {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

/* --- eccezioni --- */
.cfo-alerts { display: flex; flex-direction: column; gap: 8px; }

.cfo-alert {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--md-sys-color-surface-container-lowest);
    text-decoration: none;
    color: inherit;
    transition: border-color .12s;
}

.cfo-alert:hover { border-color: var(--accent); }
.cfo-alert > i { font-size: 1rem; margin-top: 1px; }
.cfo-alert.sev-bad > i { color: #dc2626; }
.cfo-alert.sev-warning > i { color: #d97706; }
.cfo-alert.sev-good > i { color: #16a34a; }
.cfo-alert-body { min-width: 0; }

.cfo-alert-body strong {
    display: block;
    font: var(--md-sys-typescale-label-large);
    color: var(--ink);
}

.cfo-alert-body span {
    display: block;
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
    margin-top: 1px;
}

.cfo-empty {
    padding: 22px;
    text-align: center;
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-3);
}

/* --- barra dei filtri --- */
.cfo-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cfo-controls label {
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-3);
}

/* --- segmenti (orizzonte 3/6/12 mesi) --- */
.cfo-seg {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 5px;
    overflow: hidden;
}

.cfo-seg button {
    border: 0;
    background: var(--card-bg);
    padding: 6px 13px;
    font: var(--md-sys-typescale-label-medium);
    color: var(--ink-2);
    cursor: pointer;
    border-right: 1px solid var(--line);
}

.cfo-seg button:last-child { border-right: 0; }
.cfo-seg button:hover { background: var(--md-sys-color-surface-container); }
.cfo-seg button.is-active { background: var(--ink); color: #fff; }

/* --- misure secondarie in riga --- */
.cfo-stats {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    padding: 2px 0;
}

.cfo-stat { display: flex; flex-direction: column; gap: 2px; min-width: 96px; }

.cfo-stat dt {
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-3);
}

.cfo-stat dd {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 650;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.cfo-stat dd.is-negative { color: #dc2626; }
.cfo-stat dd small { font-weight: 500; font-size: .72rem; color: var(--ink-3); }

/* --- anzianita' crediti come barra unica --- */
.cfo-aging { display: flex; flex-direction: column; gap: 9px; }

.cfo-aging-bar {
    display: flex;
    height: 26px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--line-soft);
}

.cfo-aging-bar > span {
    display: block;
    min-width: 2px;
    transition: filter .12s;
}

.cfo-aging-bar > span:hover { filter: brightness(1.12); }
.cfo-aging-rows { display: flex; flex-direction: column; gap: 1px; }

.cfo-aging-row {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    align-items: center;
    gap: 9px;
    padding: 5px 2px;
    font: var(--md-sys-typescale-body-small);
    border-bottom: 1px solid var(--line-soft);
}

.cfo-aging-row:last-child { border-bottom: 0; }
.cfo-aging-row i { width: 10px; height: 10px; border-radius: 2px; }
.cfo-aging-row .cfo-aging-name { color: var(--ink-2); }

.cfo-aging-row .cfo-aging-amount {
    font-weight: 650;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.cfo-aging-row .cfo-aging-share {
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    min-width: 46px;
    text-align: right;
}

/* --- profilo di stagionalita' --- */
.cfo-season {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
    align-items: end;
    height: 108px;
}

.cfo-season-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
    justify-content: flex-end;
}

.cfo-season-bar {
    width: 100%;
    background: var(--accent-strong);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
}

.cfo-season-bar.is-low { background: #d97706; }
.cfo-season-col span { font-size: .62rem; color: var(--ink-3); }
.cfo-season-col b { font-size: .64rem; color: var(--ink-2); font-weight: 600; }

/* --- avviso sui dati dimostrativi --- */
.cfo-demo {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border: 1px dashed #d97706;
    border-radius: 6px;
    background: #fffbeb;
    font: var(--md-sys-typescale-body-small);
    color: #78350f;
}

.cfo-demo > i { color: #d97706; margin-top: 1px; }
.cfo-demo strong { display: block; margin-bottom: 1px; }

/* --- griglia finanziaria periodo per periodo --- */
.cfo-matrix-wrap { overflow-x: auto; }

.cfo-matrix {
    border-collapse: collapse;
    width: 100%;
    min-width: 720px;
    font: var(--md-sys-typescale-body-small);
    font-variant-numeric: tabular-nums;
}

.cfo-matrix th,
.cfo-matrix td {
    padding: 6px 10px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid var(--line-soft);
}

.cfo-matrix thead th {
    position: sticky;
    top: 0;
    background: var(--md-sys-color-surface-container);
    color: var(--ink-2);
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 1px solid var(--line);
    z-index: 2;
}

/* La prima colonna resta visibile scorrendo i mesi. */
.cfo-matrix th:first-child,
.cfo-matrix td:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    background: var(--card-bg);
    z-index: 1;
    font-weight: 500;
    color: var(--ink-2);
}

.cfo-matrix thead th:first-child { background: var(--md-sys-color-surface-container); z-index: 3; }
.cfo-matrix tbody tr:hover td { background: var(--md-sys-color-surface-container-lowest); }
.cfo-matrix tbody tr:hover td:first-child { background: var(--md-sys-color-surface-container); }

.cfo-matrix tr.is-total td {
    font-weight: 650;
    color: var(--ink);
    background: var(--md-sys-color-surface-container);
    border-top: 1px solid var(--line);
}

.cfo-matrix tr.is-total td:first-child { background: var(--md-sys-color-surface-container); color: var(--ink); }
.cfo-matrix td.is-negative { color: #dc2626; }
.cfo-matrix td.is-min { background: #fef2f2 !important; font-weight: 650; }
.cfo-matrix .cfo-group-row td {
    background: var(--md-sys-color-surface-container-high);
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-2);
}

/* --- simulatore: leve --- */
.cfo-levers { display: flex; flex-direction: column; gap: 2px; }

.cfo-lever {
    display: grid;
    /* La prima colonna tiene il codice del mastro piu' la descrizione: con i nomi
       veri del piano dei conti sotto i 210px va a capo tre volte. */
    grid-template-columns: 210px 1fr 62px 108px;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line-soft);
}

.cfo-lever:last-child { border-bottom: 0; }

.cfo-lever-name {
    font: var(--md-sys-typescale-body-medium);
    color: var(--ink);
    font-weight: 500;
}

.cfo-lever-delta {
    text-align: right;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    font-size: .84rem;
}

.cfo-lever-delta.is-up { color: #16a34a; }
.cfo-lever-delta.is-down { color: #dc2626; }

.cfo-lever-base {
    text-align: right;
    font: var(--md-sys-typescale-label-small);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .cfo-lever { grid-template-columns: 1fr 56px; grid-template-areas: "name delta" "slider slider" "base base"; }
    .cfo-lever-name { grid-area: name; }
    .cfo-lever-delta { grid-area: delta; }
    .cfo-lever-base { grid-area: base; text-align: left; }
}

/* --- esiti del simulatore --- */
.cfo-outcomes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
    gap: 8px;
}

.cfo-outcome {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--md-sys-color-surface-container-lowest);
}

.cfo-outcome dt {
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-3);
    margin-bottom: 3px;
}

.cfo-outcome dd {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.cfo-outcome dd.is-negative { color: #dc2626; }

.cfo-outcome-delta {
    display: block;
    font-size: .72rem;
    font-weight: 650;
    margin-top: 2px;
}

.cfo-outcome-delta.is-up { color: #16a34a; }
.cfo-outcome-delta.is-down { color: #dc2626; }

/* --- carte degli scenari del goalseek --- */
.cfo-scenarios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.cfo-scenario {
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--card-bg);
    cursor: pointer;
    text-align: left;
    transition: border-color .12s, box-shadow .12s;
}

.cfo-scenario:hover { border-color: var(--accent); }

.cfo-scenario.is-best {
    border-color: var(--accent-strong);
    box-shadow: 0 0 0 1px var(--accent-soft);
}

.cfo-scenario-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
}

.cfo-scenario-head strong { font: var(--md-sys-typescale-label-large); color: var(--ink); }

.cfo-badge {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 2px 7px;
    border-radius: 9px;
    background: var(--accent-strong);
    color: #fff;
}

.cfo-scenario-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
}

.cfo-scenario-row b { font-variant-numeric: tabular-nums; }
.cfo-scenario-row b.is-up { color: #16a34a; }
.cfo-scenario-row b.is-down { color: #dc2626; }

/* Il grafico Telerik non deve sfondare la colonna della griglia. */
.cfo-panel .k-chart { max-width: 100%; }

/* Codice del mastro accanto al nome della leva: distingue ricavi da costi
   senza aggiungere una colonna. */
.cfo-badge-sec {
    display: inline-block;
    min-width: 26px;
    text-align: center;
    padding: 1px 5px;
    margin-right: 7px;
    border-radius: 3px;
    font-size: .68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cfo-badge-sec.is-ric { background: var(--accent-soft); color: var(--accent-deep); }
.cfo-badge-sec.is-cos { background: #fee2e2; color: #b91c1c; }

/* --- tooltip dei grafici: i numeri con i separatori delle migliaia --- */
.cfo-tip { min-width: 190px; font: var(--md-sys-typescale-body-small); }

.cfo-tip-cat {
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .75;
    margin-bottom: 5px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.cfo-tip-row {
    display: grid;
    grid-template-columns: 9px 1fr auto;
    align-items: center;
    gap: 7px;
    padding: 1px 0;
}

.cfo-tip-dot { width: 9px; height: 9px; border-radius: 2px; }
.cfo-tip-name { opacity: .88; }

.cfo-tip-val {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- conto economico a scalare --- */
.cfo-scalare {
    border-collapse: collapse;
    width: 100%;
    min-width: 340px;
    font: var(--md-sys-typescale-body-small);
    font-variant-numeric: tabular-nums;
}

.cfo-scalare th,
.cfo-scalare td {
    padding: 5px 10px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid var(--line-soft);
}

.cfo-scalare thead th {
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line);
}

.cfo-scalare th:first-child,
.cfo-scalare td:first-child { text-align: left; color: var(--ink-2); }

.cfo-scalare tr.is-total td {
    font-weight: 650;
    color: var(--ink);
    background: var(--md-sys-color-surface-container);
    border-top: 1px solid var(--line);
}

.cfo-scalare tr.is-total td:first-child { text-transform: uppercase; letter-spacing: .03em; }
.cfo-scalare tr.is-total small { margin-left: 6px; font-weight: 500; color: var(--ink-3); }
.cfo-scalare td.is-negative { color: #dc2626; }
.cfo-scalare td.is-up { color: #16a34a; }
.cfo-scalare td.is-down { color: #dc2626; }

/* --- leve raggruppate per classe --- */
.cfo-levers-head {
    margin: 12px 0 2px;
    padding-bottom: 3px;
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-3);
    border-bottom: 1px solid var(--line);
}

.cfo-levers-head:first-child { margin-top: 0; }

/* --- classificazione del piano dei conti --- */
.cfo-matrix.cfo-config td { padding: 4px 10px; }
.cfo-matrix.cfo-config td:nth-child(2) { text-align: left; white-space: normal; }
.cfo-matrix.cfo-config td:last-child,
.cfo-matrix.cfo-config thead th:last-child { text-align: left; }

/* La proposta dell'euristica: un colpo per accettarla, nessuno per ignorarla. */
.cfo-chip-suggest {
    margin-left: 7px;
    padding: 2px 8px;
    border: 1px dashed var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink-3);
    font: var(--md-sys-typescale-label-small);
    cursor: pointer;
}

.cfo-chip-suggest:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }

/* Un mese ancora da chiudere: il numero e' una previsione, non un consuntivo. */
.cfo-matrix tr.is-forecast td { color: var(--ink-3); font-style: italic; }

/* L'etichetta accanto al mese: previsione, oppure mese in corso. */
.cfo-matrix td:first-child small {
    margin-left: 6px;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .64rem;
    opacity: .8;
}

/* Tabella dentro un pannello a mezza larghezza: senza min-width l'ultima
   colonna finiva tagliata invece di far scorrere. */
.cfo-matrix.cfo-compact { min-width: 0; }
.cfo-matrix.cfo-compact th,
.cfo-matrix.cfo-compact td { padding: 6px 8px; }

/* --- flag "usa come leva" nella configurazione --- */
.cfo-check-leva {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    font: var(--md-sys-typescale-label-small);
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-2);
    cursor: pointer;
}

/* Un mastro fuori dalle leve: resta leggibile ma si vede che non si tocca. */
.cfo-lever.is-fissa { opacity: .68; }

.cfo-lever-fissa {
    font: var(--md-sys-typescale-label-small);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-3);
    border: 1px dashed var(--line);
    border-radius: 999px;
    padding: 2px 9px;
    justify-self: start;
}

/* --- consultazione dei saldi banche --- */
/* Divisa e nome banca si leggono da sinistra: solo gli importi vanno a destra. */
.cfo-matrix.cfo-banche td:nth-child(2),
.cfo-matrix.cfo-banche th:nth-child(2) { text-align: left; }

.cfo-matrix.cfo-banche td:nth-child(2) small { margin-left: 8px; color: var(--ink-3); }

.cfo-link-banca {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--accent-deep);
    cursor: pointer;
    text-align: left;
}

.cfo-link-banca:hover { text-decoration: underline; }

.cfo-banca-affid td { border-bottom: 0; color: var(--ink-3); }
.cfo-banca-saldo td { font-weight: 500; }
.cfo-banca-saldo.is-rettificata td,
.cfo-banca-affid.is-rettificata td { background: var(--md-sys-color-surface-container-lowest); }

.cfo-rettifica {
    display: block;
    font: var(--md-sys-typescale-label-small);
    font-weight: 500;
    color: var(--ink-3);
    text-transform: none;
    letter-spacing: 0;
}

/* Dettaglio dei conti di una banca: la descrizione puo' andare a capo, le date no. */
.k-window .cfo-matrix.cfo-compact td:nth-child(2) { white-space: normal; text-align: left; }
.k-window .cfo-matrix.cfo-compact td:last-child,
.k-window .cfo-matrix.cfo-compact th:last-child { white-space: nowrap; min-width: 96px; }

/* --- legami fra le leve --- */
.cfo-lever-indotto {
    display: block;
    font: var(--md-sys-typescale-label-small);
    font-weight: 500;
    color: var(--ink-3);
    white-space: nowrap;
}

.cfo-lever-base small {
    display: block;
    font-size: .64rem;
    color: var(--ink-3);
    opacity: .85;
}

.cfo-matrix.cfo-compact td .k-dropdownlist,
.cfo-matrix.cfo-compact td .k-numerictextbox { vertical-align: middle; }

/* Un legame che non potra' essere salvato: si vede prima, non dopo. */
.cfo-matrix tr.is-invalido td { background: #fef2f2; }
.cfo-matrix tr.is-invalido td small { display: block; }


/* ---------- riconciliazione: avvisi sull'estrazione e righe rifiutate ---------- */
/* Un avviso qui non e' decorazione: dice che il documento potrebbe essere stato
   letto male, e va visto prima che l'utente prema Salva. Colori dai token, cosi'
   ogni installazione resta con la propria grafica. */
.recon-avvisi {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: var(--md-sys-shape-corner-small);
    font: var(--md-sys-typescale-body-medium);
}

.recon-avvisi > i {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 1.05rem;
}

.recon-avvisi > div { min-width: 0; }
.recon-avvisi > div > div + div { margin-top: 4px; }
.recon-avvisi strong { display: block; margin-bottom: 4px; }

.recon-avvisi-nota {
    margin-top: 8px;
    font: var(--md-sys-typescale-body-small);
    opacity: .85;
}


/* ---------- configurazione dei motori AI ---------- */
/* Tutto dai token: la pagina prende i colori del tema per ruolo come le altre. */
.ai-ruoli {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.ai-ruolo { padding: 16px 20px; }
.ai-ruolo-vuoto { opacity: .72; }

.ai-ruolo-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.ai-ruolo-motore { font: var(--md-sys-typescale-body-large); }

.ai-ruolo-endpoint {
    font: var(--md-sys-typescale-body-small);
    color: var(--md-ref-palette-neutral40);
    word-break: break-all;
}

.ai-ruolo-flag {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    font: var(--md-sys-typescale-label-medium);
    color: var(--md-ref-palette-neutral40);
}

.ai-chiave { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.ai-chiave-assente { color: var(--md-sys-color-error); font-weight: 600; }
.ai-attivo { color: var(--md-sys-color-success); font-size: 1.1rem; }

.ai-suggerito {
    margin-left: 8px;
    color: var(--btn-primary);
    text-decoration: none;
    border-bottom: 1px dotted var(--btn-primary);
}
.ai-suggerito:hover { color: var(--btn-primary-hover); }

.ai-esito {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: var(--md-sys-shape-corner-small);
    font: var(--md-sys-typescale-body-medium);
}
.ai-esito > div + div { margin-top: 4px; }
.ai-esito-errore { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; word-break: break-word; }

.ai-consumi { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: .85rem; }
.ai-consumi th,
.ai-consumi td { padding: 6px 10px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.ai-consumi th { text-align: left; font-weight: 600; }
.ai-consumi .num { text-align: right; font-variant-numeric: tabular-nums; }
.ai-consumi .ai-errori { color: var(--md-sys-color-error); font-weight: 600; }

/* =========================================================================
   Revisione righe di fattura spedizioniere
   -------------------------------------------------------------------------
   Un blocco solo, identico nei due progetti, scritto sui token e mai su un
   colore letterale: cosi' segue il tema per ruolo del fork e la tavolozza
   unica del prodotto senza doverlo scrivere due volte.

   La scelta grafica che conta e' una: i tre stati - non agganciate, da
   guardare, agganciate - hanno colori diversi e stanno sempre nello stesso
   ordine, quello del lavoro che resta da fare. Chi apre la pagina deve
   capire in un secondo quanto manca, e quali righe sono sue.
   ========================================================================= */

.rev-page .rev-numero {
    font: var(--md-sys-typescale-title-medium);
    color: var(--ink-2);
    margin-left: 8px;
}

/* --- barra degli stati e avanzamento ------------------------------------ */

.rev-stato {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.rev-gruppi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rev-gruppo {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.rev-gruppo:hover:not(:disabled) { background: var(--md-sys-color-surface-container-low); }

.rev-gruppo:disabled,
.rev-gruppo.is-vuoto {
    opacity: .4;
    cursor: default;
}

.rev-gruppo-n {
    font: var(--md-sys-typescale-title-medium);
    font-weight: 700;
}

.rev-gruppo-t {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
}

/* Il colore lo porta il pallino del conteggio, non tutto il bottone: una
   fila di bottoni pieni si legge peggio, e qui il conteggio e' il dato. */
.rev-gruppo.rev-bad  .rev-gruppo-n { color: var(--md-sys-color-error); }
.rev-gruppo.rev-warn .rev-gruppo-n { color: #b45309; }
.rev-gruppo.rev-ok   .rev-gruppo-n { color: var(--md-sys-color-success); }
.rev-gruppo.rev-off  .rev-gruppo-n { color: var(--ink-3); }

.rev-gruppo.is-active {
    border-color: var(--btn-primary);
    background: var(--md-sys-color-surface-container-low);
    box-shadow: inset 0 0 0 1px var(--btn-primary);
}

.rev-gruppo.rev-tutte { border-style: dashed; }

.rev-avanzamento {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 260px;
    flex: 1;
    max-width: 420px;
}

.rev-barra {
    height: 8px;
    border-radius: 999px;
    background: var(--line-soft);
    overflow: hidden;
}

.rev-barra-riempita {
    height: 100%;
    background: var(--btn-primary);
    transition: width .25s;
}

.rev-avanzamento-testo {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
}

.rev-impedimenti ul {
    margin: 4px 0 0;
    padding-left: 18px;
}

/* --- griglia: fattura a sinistra, sistema a destra ---------------------- */

.rev-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font: var(--md-sys-typescale-label-small);
    font-weight: 600;
    white-space: nowrap;
}

.rev-pill.rev-bad  { background: var(--md-sys-color-error-container);   color: var(--md-sys-color-error); }
.rev-pill.rev-warn { background: var(--md-sys-color-warning-container); color: #854d0e; }
.rev-pill.rev-ok   { background: var(--md-sys-color-success-container); color: var(--md-sys-color-success); }
.rev-pill.rev-off  { background: var(--line-soft);                      color: var(--ink-3); }

.rev-mano {
    margin-left: 6px;
    color: var(--btn-primary);
}

.rev-lato {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.rev-rif, .rev-ddt {
    font-weight: 600;
    color: var(--ink);
}

.rev-piu {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--line-soft);
    font: var(--md-sys-typescale-label-small);
    color: var(--ink-2);
}

.rev-sub {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
}

/* Il destinatario di fattura e quello di bolla non si somigliano. Non e' un
   errore di per se' - il conto terzi funziona cosi' - ma e' la prima cosa da
   guardare quando si dubita di un aggancio, quindi si vede. */
.rev-sub.rev-diverso {
    color: #b45309;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.rev-nessuno {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-3);
    font-style: italic;
}

.rev-importo {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.3;
}

.rev-importo .is-negative { color: var(--md-sys-color-error); }

.rev-delta {
    font: var(--md-sys-typescale-label-small);
    font-weight: 600;
}

.rev-delta.is-piu  { color: var(--md-sys-color-error); }
.rev-delta.is-meno { color: #0369a1; }

.rev-residuo {
    font: var(--md-sys-typescale-label-small);
    color: var(--md-sys-color-error);
}

.rev-azioni {
    display: flex;
    gap: 2px;
    justify-content: center;
}

.rev-azioni .btn-icon {
    width: 32px;
    height: 32px;
}

.rev-az-ok:hover        { color: var(--md-sys-color-success); }
.rev-az-riassegna:hover { color: var(--btn-primary); }
.rev-az-spezza:hover    { color: var(--btn-primary); }
.rev-az-scarta:hover    { color: var(--md-sys-color-error); }
.rev-az-riapri:hover    { color: var(--ink-2); }

/* --- dettaglio della riga ----------------------------------------------- */

.rev-dettaglio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    padding: 16px 18px;
    background: var(--md-sys-color-surface-container-low);
}

.rev-dettaglio > div > strong {
    display: block;
    margin-bottom: 8px;
    font: var(--md-sys-typescale-label-large);
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rev-dettaglio-motivo p {
    margin: 0 0 8px;
    color: var(--ink);
}

.rev-chiave {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: var(--r, 10px);
    font: var(--md-sys-typescale-label-small);
    color: var(--ink-2);
}

.rev-dettaglio-dati dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    margin: 0;
}

.rev-dettaglio-dati dt {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-3);
}

.rev-dettaglio-dati dd {
    margin: 0;
    font: var(--md-sys-typescale-body-small);
    color: var(--ink);
}

.rev-dettaglio-dati dd small { color: var(--ink-3); }

.rev-grezzo { margin-top: 10px; }

.rev-grezzo summary {
    cursor: pointer;
    font: var(--md-sys-typescale-body-small);
    color: var(--btn-primary);
}

.rev-grezzo pre {
    margin: 6px 0 0;
    padding: 8px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: .75rem;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 160px;
    overflow: auto;
}

.rev-alloc-table {
    width: 100%;
    border-collapse: collapse;
    font: var(--md-sys-typescale-body-small);
}

.rev-alloc-table td {
    padding: 4px 8px 4px 0;
    border-bottom: 1px solid var(--line-soft);
}

.rev-alloc-table tr.is-spenta {
    opacity: .45;
    text-decoration: line-through;
}

.rev-alloc-quota { text-align: right; font-weight: 600; }

.rev-origine {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--line-soft);
    font: var(--md-sys-typescale-label-small);
    color: var(--ink-2);
}

.rev-storia {
    margin: 0;
    padding: 0;
    list-style: none;
    font: var(--md-sys-typescale-body-small);
}

.rev-storia li {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px solid var(--line-soft);
}

.rev-storia-quando { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rev-storia-cosa   { font-weight: 600; }
.rev-storia-chi    { color: var(--ink-2); }
.rev-storia-perche { color: var(--ink-3); flex-basis: 100%; }

/* --- divisione su piu' bolle -------------------------------------------- */

.rev-spezza-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}

.rev-spezza-table th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 2px solid var(--line);
    font: var(--md-sys-typescale-label-medium);
    color: var(--ink-2);
}

.rev-spezza-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--line-soft);
}

.rev-spezza-table .rev-num { text-align: right; }

.rev-spezza-totale {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--r, 10px);
    background: var(--md-sys-color-surface-container-low);
}

.rev-spezza-totale.is-ok strong { color: var(--md-sys-color-success); }
.rev-spezza-totale.is-ko strong { color: var(--md-sys-color-error); }

.rev-spezza-azioni {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* --- selettore di spedizioni -------------------------------------------- */

.rev-picker-filtri {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 12px;
}

.rev-picker-filtri .filter-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
}

.rev-picker-filtri label {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
}

.rev-picker-testo { flex: 1; min-width: 240px; }

.rev-picker-vettore { align-self: center; }

.rev-picker-avviso { margin-bottom: 12px; }

.rev-picker-elenco {
    max-height: 46vh;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--r, 10px);
}

/* Una riga sola per spedizione, a colonne fisse: chi cerca scorre con gli
   occhi lungo una colonna, e colonne che ballano da riga a riga rendono lo
   scorrimento inutile. */
.rev-picker-riga {
    display: grid;
    grid-template-columns: 92px 92px 1fr 150px 130px 110px;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.rev-picker-riga:hover { background: var(--md-sys-color-surface-container-low); }
.rev-picker-riga:last-child { border-bottom: 0; }

.rev-picker-ddt { font-weight: 700; color: var(--ink); }

.rev-picker-data,
.rev-picker-vett,
.rev-picker-misure {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
}

.rev-picker-dest {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.rev-picker-dest strong,
.rev-picker-vett {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rev-picker-dest small { color: var(--ink-3); }

.rev-picker-importo { text-align: right; }

.rev-picker-gia {
    font: var(--md-sys-typescale-label-small);
    font-weight: 600;
    color: #b45309;
}

.rev-picker-riga.is-presa { background: var(--md-sys-color-warning-container); }
.rev-picker-riga.is-presa:hover { filter: brightness(.97); }

.rev-picker-troppi {
    margin: 8px 0 0;
    font: var(--md-sys-typescale-body-small);
}

@media (max-width: 900px) {
    .rev-picker-riga {
        grid-template-columns: 1fr 1fr;
        row-gap: 2px;
    }
    .rev-stato { flex-direction: column; align-items: stretch; }
    .rev-avanzamento { max-width: none; }
}

/* --- elenco documenti e caricamento ------------------------------------- */

.rec-carica .filters-row { align-items: flex-end; }

.rec-carica .filter-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rec-carica label {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
}

.rec-file { flex: 1; min-width: 280px; }

/* Il campo file nudo del browser e' alto e sgraziato accanto ai controlli
   Telerik: qui si allinea alla loro altezza e prende il bordo del tema. */
.rec-input-file {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r, 10px);
    background: var(--card-bg);
    font: var(--md-sys-typescale-body-small);
    line-height: 1.6;
}

.rec-input-file::file-selector-button {
    margin-right: 10px;
    padding: 4px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--btn-primary);
    color: var(--btn-on-primary);
    cursor: pointer;
}

.rec-lavoro {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
}

.rec-nota {
    margin: 10px 0 0;
    font: var(--md-sys-typescale-body-small);
}

.rec-gia {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.rec-avanzamento {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* --- qualita' della riconciliazione ------------------------------------- */

.qual-tiles { margin-bottom: 12px; }

.qual-tiles .cfo-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.qual-tile-t {
    font: var(--md-sys-typescale-label-medium);
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.qual-tile-n {
    font: var(--md-sys-typescale-headline-medium);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
}

.qual-tile-s {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-3);
}

.qual-barra-riga {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qual-barra-riga .rev-barra { flex: 1; }

/* Le soglie non sono decorative: sotto la meta' il vettore chiede lavoro a
   mano su piu' di una riga su due, ed e' il segnale da vedere per primo. */
.rev-barra-riempita.is-buona  { background: var(--md-sys-color-success); }
.rev-barra-riempita.is-media  { background: #d97706; }
.rev-barra-riempita.is-scarsa { background: var(--md-sys-color-error); }

.qual-tolleranza {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    font: var(--md-sys-typescale-body-small);
    color: var(--ink);
    cursor: pointer;
}

.qual-tolleranza:hover { border-color: var(--btn-primary); }
.qual-tolleranza small { color: var(--ink-3); }

.qual-proposte { margin-top: 12px; }

.qual-proposte h2 {
    font: var(--md-sys-typescale-title-large);
    margin: 0 0 4px;
}

.qual-proposte h2 i { color: var(--btn-primary); margin-right: 8px; }

.qual-proposta {
    padding: 12px 14px;
    margin-top: 10px;
    border-left: 3px solid var(--btn-primary);
    border-radius: 0 var(--r, 10px) var(--r, 10px) 0;
    background: var(--md-sys-color-surface-container-low);
}

.qual-proposta-testa {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

.qual-proposta-cosa {
    margin: 6px 0 0;
    color: var(--ink);
}

.qual-esempi {
    margin: 6px 0 0;
    padding-left: 18px;
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
}

.qual-tolleranze-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 14px 0;
}

.qual-tolleranze-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.qual-tolleranze-form label {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-2);
}

.qual-tolleranze-form small { color: var(--ink-3); }

.qual-esempio-banda { margin-top: 6px; }

/* ===========================================================================
   Finestre di dialogo: i bottoni devono restare raggiungibili
   ---------------------------------------------------------------------------
   Una TelerikWindow si dimensiona sul contenuto e non ha un tetto: il form dei
   motori AI, con dieci campi, cresceva oltre l'altezza dello schermo e il pie'
   di pagina con Salva e Annulla finiva fuori, senza modo di arrivarci - la
   finestra e' modale, quindi non si puo' nemmeno scorrere la pagina sotto.

   La regola vale per tutte le finestre e non solo per quella: e' un limite del
   componente, non un difetto di una pagina. Il titolo e il pie' restano fermi,
   scorre solo il corpo.
   =========================================================================== */
.k-window {
    max-height: 92vh;
    max-width: 96vw;
    display: flex;
    flex-direction: column;
}

.k-window > .k-window-content {
    overflow: auto;
    /* senza questo il contenuto in flex non si lascia rimpicciolire e il
       tetto di 92vh non ha effetto */
    min-height: 0;
}

.k-window > .k-window-titlebar,
.k-window > .k-window-actions,
.k-window > .k-actions {
    flex: 0 0 auto;
}

/* Il pie' di pagina raccoglie i bottoni a destra, con Salva per ultimo. */
.k-window > .k-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
}

/* In una riga di filtri l'etichetta di una casella non deve andare a capo, ma
   dentro un dialog stretto quel nowrap sfonda la larghezza e fa comparire la
   barra di scorrimento orizzontale: "Supporta output JSON con schema" non ci
   sta in un terzo di 720px. */
.k-window .filter-check {
    white-space: normal;
    align-items: flex-start;
}

.k-window .filter-check label { line-height: 1.25; }

/* ===========================================================================
   Bilancio gestionale
   ---------------------------------------------------------------------------
   Riusa la matrice del CFO (.cfo-matrix): stessa densita', stessa prima colonna
   che resta ferma scorrendo. Qui si aggiunge solo cio' che il foglio Excel non
   sapeva dire, cioe' DA DOVE VIENE un numero.
   =========================================================================== */

/* La colonna del residuo e quella del totale si staccano dalle altre: la prima
   perche' cio' che ci finisce dentro e' da attribuire, la seconda perche' e' il
   numero che si legge per primo. */
.bal-matrix th.bal-col-residuo { color: var(--md-sys-color-error); }
.bal-matrix td.bal-col-residuo,
.bal-matrix th.bal-col-totale,
.bal-matrix td.bal-col-totale {
    border-left: 1px solid var(--line);
    font-weight: 600;
    color: var(--ink);
}

/* Una cella scritta a mano si vede, senza gridare: sfondo appena caldo e una
   matita. Serve a distinguere a colpo d'occhio il consuntivo dalla stima. */
.bal-matrix td.bal-cella-manuale { background: var(--md-sys-color-tertiary-container); }
.bal-manuale { font-size: .62rem; margin-left: 4px; opacity: .55; vertical-align: super; }

/* Quando lo scritto si allontana di oltre un quinto dal proposto, la cella si
   sottolinea: non e' per forza un errore - gli ammortamenti mensili sono una
   quota e la contabilita' li registra a fine anno - ma non deve passare
   inosservato. */
.bal-matrix td.bal-scostata { box-shadow: inset 0 -2px 0 var(--md-sys-color-error); }

.bal-matrix td.bal-vuota { color: var(--ink-3); }
.bal-matrix tr.bal-risultato td { border-top: 2px solid var(--line); }

.bal-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 8px 4px 0;
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-3);
}

.bal-legenda-auto::before {
    content: "";
    display: inline-block;
    width: 12px; height: 12px;
    margin-right: 6px;
    vertical-align: -2px;
    border: 1px solid var(--line);
    background: var(--card-bg);
}

/* I reparti industriali stanno affiancati finche' ci stanno: sono prospetti
   corti e uno sotto l'altro sprecherebbero mezzo schermo. */
.bal-reparti {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.bal-reparto h4 {
    font: var(--md-sys-typescale-label-large);
    color: var(--ink-2);
    margin: 0 0 6px;
}

.bal-matrix-stretta { min-width: 0; }
.bal-nota { font: var(--md-sys-typescale-body-small); color: var(--ink-2); margin: 0 4px 8px; }
.bal-descr { text-align: left !important; white-space: normal; max-width: 420px; }

.bal-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font: var(--md-sys-typescale-label-small);
}

.bal-chip-chiuso {
    background: var(--md-sys-color-surface-container-high);
    color: var(--ink-2);
    border: 1px solid var(--line);
}

/* --- bilancio: le celle che si possono scrivere --- */
/* Un prospetto in cui alcune celle si aprono e altre no deve dirlo prima del
   clic: il puntatore cambia e il fondo si accende passandoci sopra. Sui
   subtotali non succede niente, ed e' giusto: sono la somma delle loro parti. */
.bal-cella-clic { cursor: pointer; }
.bal-cella-clic:hover { outline: 2px solid var(--btn-primary); outline-offset: -2px; }

.bal-modifica .bal-proposto { padding: 8px 0; font: var(--md-sys-typescale-body-medium); }
.bal-modifica .bal-quote { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }
.bal-modifica .bal-quote-testa { display: flex; justify-content: space-between; align-items: baseline; }
.bal-quote-errore { color: var(--md-sys-color-error); font-weight: 600; }

/* -------------------------------------------------------------------------
   Bilancio gestionale: la scheda di configurazione

   Le tre viste - voci, regole, business unit - condividono una testata con il
   selettore a segmenti e la ricerca. Il resto e' segnaletica: una voce spenta,
   una riga dichiarata fuori dal prospetto e un codice sotto la descrizione
   devono distinguersi senza colore da solo, perche' il colore da solo non si
   legge in stampa e non si legge a tutti.
   ------------------------------------------------------------------------- */
.bal-schema-testa { display: flex; justify-content: space-between; align-items: center;
                    gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.bal-schema-azioni { margin-bottom: 12px; }

/* Il codice sotto la descrizione: si legge quando serve, non ruba la riga. */
.bal-codice { font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant);
              font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

/* Spenta e fuori dal prospetto sono due cose diverse: la prima e' sbiadita,
   la seconda ha una barra a sinistra. Il testo dice comunque quale delle due. */
.bal-riga-spenta   { opacity: .5; }
.bal-riga-esclusa td:first-child { border-left: 3px solid var(--md-sys-color-outline); padding-left: 9px; }

.bal-schema .text-right { text-align: right; }
.bal-schema code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
                   background: var(--md-sys-color-surface-variant); padding: 2px 6px; border-radius: 4px; }

/* La fonte di una voce, a colpo d'occhio. Le automatiche hanno un fondo pieno,
   le altre no: e' la distinzione che conta quando un numero non torna. */
.bal-chip-contabilita   { background: var(--md-sys-color-info-container);    color: var(--md-sys-color-info); }
.bal-chip-analitica     { background: var(--md-sys-color-info-container);    color: var(--md-sys-color-info); }
.bal-chip-venduto       { background: var(--md-sys-color-info-container);    color: var(--md-sys-color-info); }
.bal-chip-manuale       { background: var(--md-sys-color-warning-container); color: #854d0e; }
.bal-chip-calcolata     { background: transparent; color: var(--md-sys-color-on-surface-variant);
                          border: 1px solid var(--line); }
.bal-chip-ribaltamento  { background: transparent; color: var(--md-sys-color-on-surface-variant);
                          border: 1px solid var(--line); }
.bal-chip-totale_sezione{ background: transparent; color: var(--md-sys-color-on-surface-variant);
                          border: 1px solid var(--line); }

/* La testata della configurazione, e le tabelle che non devono allungare la
   pagina: 183 voci e 165 regole una sotto l'altra fanno undicimila pixel, e a
   quel punto per confrontare due righe si scorre avanti e indietro. Corpo che
   scorre da solo, intestazione appiccicata in cima. */
.bal-schema-cerca { display: flex; align-items: center; gap: 8px; }
.bal-schema .cfo-matrix-wrap { max-height: 62vh; overflow-y: auto; }
.bal-schema .cfo-matrix thead th { position: sticky; top: 0; z-index: 4; }

/* Qui le colonne sono quasi tutte testo: l'allineamento a destra della matrice
   dei numeri le renderebbe illeggibili. Si torna a sinistra, e solo le due
   colonne di conteggio restano a destra. */
.bal-schema .cfo-matrix th,
.bal-schema .cfo-matrix td { text-align: left; white-space: normal; }
.bal-schema .cfo-matrix th.text-right,
.bal-schema .cfo-matrix td.text-right { text-align: right; }
.bal-schema .cfo-matrix td:first-child { position: static; }


/* =========================================================================
   PREVENTIVATORE
   Nessun colore letterale: gli stati riusano i contenitori del tema, e
   l'accento passa da --accent-strong. Le sole misure scritte a mano sono
   quelle delle piastrelle, che devono restare leggibili accanto a una
   griglia densa.
   ========================================================================= */

/* --- schede dentro la pagina: <button> veri, non un TabStrip --- */
.tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--line);
}
.tabs button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: 500;
    color: var(--ink-2);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .2s, border-color .2s;
}
.tabs button:hover { color: var(--ink); }
.tabs button.active {
    color: var(--accent-strong);
    border-bottom-color: var(--accent-strong);
}
.tabs.tabs-inner { margin-bottom: 12px; }

/* --- il riepilogo economico: una fascia di piastrelle sopra la griglia --- */
.prev-riepilogo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.prev-voce {
    display: grid;
    gap: 2px;
    min-width: 150px;
    padding: 10px 14px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.prev-voce > span { font: var(--md-sys-typescale-body-small); color: var(--ink-3); }
.prev-voce > strong { font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.prev-voce > small { font: var(--md-sys-typescale-body-small); color: var(--ink-3); }
.prev-voce-forte {
    border-color: var(--accent-strong);
    background: var(--md-sys-color-primary-container);
}
.prev-voce-forte > strong { color: var(--accent-strong); }
.prev-voce-tenue { background: var(--line-soft); border-color: transparent; }

/* --- stato del preventivo --- */
.prev-stato {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font: var(--md-sys-typescale-label-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.prev-stato-bozza {
    background: var(--md-sys-color-warning-container);
    color: #854d0e;
}
.prev-stato-definitivo {
    background: var(--md-sys-color-success-container);
    color: var(--md-sys-color-success);
}
.prev-stato-storicizzato { background: var(--line-soft); color: var(--ink-3); }
.prev-stato-annullato {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-error);
}

.prev-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--line-soft);
    color: var(--ink-2);
    font: var(--md-sys-typescale-body-small);
}
.prev-importo { font-variant-numeric: tabular-nums; font-weight: 600; }
.prev-su { color: var(--md-sys-color-error); font-variant-numeric: tabular-nums; }
.prev-giu { color: var(--md-sys-color-success); font-variant-numeric: tabular-nums; }

/* --- l'elenco a scelta singola del configuratore ---
   Scorre: 200 voci di catalogo non stanno in una finestra di dialogo, e
   paginarle costringerebbe a uscire dal flusso per cercarne una. */
.prev-elenco {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--line-soft);
}
.prev-scelta {
    display: grid;
    gap: 2px;
    text-align: left;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card-bg);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.prev-scelta:hover { border-color: var(--accent-strong); }
.prev-scelta.is-on {
    border-color: var(--accent-strong);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .25);
}
.prev-scelta > strong { color: var(--ink); }
.prev-scelta > span { font: var(--md-sys-typescale-body-small); color: var(--ink-2); }
.prev-scelta > small { font: var(--md-sys-typescale-body-small); color: var(--ink-3); }

/* --- le tipologie del catalogo, con i loro parametri sotto --- */
.prev-tipologie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.prev-tipologia {
    display: grid;
    gap: 2px;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card-bg);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.prev-tipologia:hover { border-color: var(--accent-strong); }
.prev-tipologia.is-on {
    border-color: var(--accent-strong);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .25);
}
.prev-tipologia > i { font-size: 1.2rem; color: var(--accent-strong); }
.prev-tipologia > strong { color: var(--ink); }
.prev-tipologia > span { font: var(--md-sys-typescale-body-small); color: var(--ink-2); }
.prev-tipologia > small { font: var(--md-sys-typescale-body-small); color: var(--ink-3); }

/* --- testata e parametri fotografati --- */
.prev-testata { display: grid; gap: 14px; padding: 16px; }
.prev-testata fieldset { border: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.prev-testata h3 {
    margin: 6px 0 0;
    font: var(--md-sys-typescale-title-small);
    color: var(--ink-2);
    border-bottom: 1px solid var(--line);
    padding-bottom: 6px;
}
.prev-parametri { padding: 16px; }
.prev-parametri ul { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.prev-parametri li {
    display: flex;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--line-soft);
}
.prev-parametri li > strong { color: var(--ink-2); }
.prev-parametri li > span { color: var(--ink); }

/* =========================================================================
   Celle di griglia: il testo secondario non allarga la colonna

   La regola che stava qui — word-break sulle celle — e' stata tolta: perdeva
   per specificita' contro il blocco «Telerik Grid Overrides» e non e' mai
   entrata in vigore. Un rimedio che non si applica e' peggio di nessun
   rimedio, perche' fa credere che il difetto sia risolto. Adesso il valore
   giusto sta dove viene dichiarato.
   ========================================================================= */

/* Il testo secondario dentro una cella non deve allargare la colonna. */
.m3-grid .k-table-td .field-hint {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================================================
   La testata di pagina: un contenitore dei comandi che esiste davvero

   MISURATO PRIMA DI SCRIVERE QUESTA REGOLA. `.page-header` e'
   `justify-content: space-between`, quindi si aspetta due figli: il titolo a
   sinistra, i comandi a destra. Le pagine ne dichiaravano quattro forme
   diverse:

     - `.header-buttons`  in dieci pagine, e una regola sua ce l'aveva;
     - `.header-right`    in undici pagine, e NON AVEVA NESSUNA REGOLA;
     - il pulsante appeso direttamente a `.page-header`, senza contenitore
       (era il caso di `Users.razor`);
     - `<h2>` nudo senza `.header-left` (`/MyProfile`, `/ChangePassword`).

   Un `<div>` senza regole non fallisce e non lo dice: dispone i suoi figli
   come testo in linea, senza spazio fra loro, allineati alla linea di base
   invece che al centro, e senza andare a capo. Su una scheda con quattro
   comandi - Indietro, Elimina, Salva, piu' un menu - si leggeva una fila di
   pillole attaccate che sullo schermo stretto usciva dal riquadro. Sulla
   pagina accanto, che usava l'altro nome, gli stessi comandi stavano bene:
   ed e' il motivo per cui l'incoerenza non e' mai stata attribuita al CSS.

   IL NOME CANONICO E' `.header-actions`. `.header-right` e `.header-buttons`
   restano come alias della stessa regola: le pagine si convertono una alla
   volta - `Pages/Preventivatore/` e' in riscrittura e non e' stata toccata -
   e nel frattempo nessuna deve peggiorare. Il gap e' 8px e non i 12 che aveva
   `.header-buttons`: 8 e' il passo che il resto del foglio usa fra pulsanti
   affiancati (`.k-actions`, `.filter-actions`), e i 12 erano l'eccezione.

   L'ORDINE DENTRO IL CONTENITORE E' UNA CONVENZIONE, NON UNA REGOLA CSS:
   ritorno/navigazione per primo, poi le azioni neutre, UNA SOLA azione
   primaria e ULTIMA - la piu' a destra, perche' e' il punto in cui l'occhio
   arriva e dove il pollice cade su un portatile con touch.
   ========================================================================= */

.page-header > .header-actions,
.page-header > .header-right,
.page-header > .header-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    /* Serve quando la testata ha i comandi come unico figlio: `space-between`
       da solo li lascerebbe a sinistra, sotto il titolo che non c'e'. */
    margin-left: auto;
}

/* Rete di sicurezza per la forma sbagliata: un comando appeso direttamente
   alla testata. Le pagine sono state convertite, ma la regola resta perche'
   quel difetto era muto e la prossima pagina scritta di fretta lo rifara'.
   Il gap fra i comandi lo da' `.page-header` stesso, che e' anche flex. */
.page-header > .k-button,
.page-header > .btn {
    margin-left: auto;
}

/* Intestazione di sezione dentro una scheda: un gradino sotto il titolo di
   pagina, perche' la sezione non compete con la scheda che la contiene. */
.page-header h3 {
    font: var(--md-sys-typescale-title-large);
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-header h3 > i {
    color: var(--accent-strong);
    font-size: 1rem;
}

/* --- gerarchia: primaria, neutra, distruttiva ---

   Primaria e neutra le da' gia' Telerik con `ThemeColor` Primary e Base, e il
   foglio le colora piu' sopra. Manca la terza. L'AZIONE DISTRUTTIVA STA FRA
   LE NEUTRE E NON E' ROSSA A RIPOSO: un rosso acceso a un centimetro da Salva
   e' un click sbagliato che aspetta di succedere, e il pericolo va dichiarato
   dalla finestra di conferma, non dal colore di un bottone che si sfiora per
   caso. Il colore arriva quando il puntatore ci si posa, cioe' quando c'e'
   ancora tempo per non premere.

   LA REGOLA ERA CHIUSA DENTRO `.header-actions`, E TACEVA DAPPERTUTTO ALTROVE.
   `btn-distruttivo` sta su sedici bottoni del portale e dodici di quelli sono
   CESTINI DI RIGA, dentro `.riga-azioni`: per tutti quei dodici la classe era
   scritta, si leggeva nel markup, e non produceva NIENTE — nessun rosso, nessun
   fuoco, un bottone neutro indistinguibile dalla matita che gli sta accanto.
   E' il difetto contro cui il mantra mette in guardia alla regola 12 — un
   rimedio che non entra in vigore non fallisce, tace, e fa credere che il
   problema sia risolto — con l'aggravante che qui non era una questione di
   specificita': la regola non arrivava affatto, e chiunque leggesse il markup
   avrebbe giurato il contrario.
   LA CLASSE E' LA DICHIARAZIONE, quindi il selettore non la scopa piu': si
   scrive `btn-distruttivo` solo dove si intende, e vale dove e' scritta —
   testata, riga di griglia, testata del lettore dei messaggi, elenco dei badge. */
.btn-distruttivo:hover:not(:disabled),
.btn-distruttivo:focus-visible:not(:disabled) {
    background: var(--md-sys-color-error-container) !important;
    border-color: var(--md-sys-color-error) !important;
    color: var(--md-sys-color-error) !important;
}

/* --- schermo stretto ---

   Il caso che rompeva: una scheda con titolo lungo - la ragione sociale di un
   cliente, «C-2026-0014 — Rifacimento quadri stabilimento nord» - e cinque
   comandi accanto. Con `space-between` i due gruppi si contendono la riga e
   perde il titolo, che si spezza in una colonna di due parole. Sotto i 768px
   i comandi prendono una riga loro e il titolo si legge intero. */
@media (max-width: 768px) {
    .page-header > .header-actions,
    .page-header > .header-right,
    .page-header > .header-buttons {
        flex: 1 1 100%;
    }
}

/* Sotto i 576px `.page-header` e' gia' in colonna (vedi «Responsive» piu'
   sopra). Qui i comandi crescono per riempire la riga: due per riga invece di
   uno, che su cinque comandi e' la differenza fra una testata e una tastiera.
   Il minimo di 132px e' quanto serve a «Nuovo rapportino» per non spezzarsi. */
@media (max-width: 576px) {
    .page-header > .header-actions > *,
    .page-header > .header-right > *,
    .page-header > .header-buttons > * {
        flex: 1 1 auto;
        min-width: 132px;
    }
}

/* =========================================================================
   La riga dei filtri: lo stesso difetto, nello stesso foglio

   `.filters-card` porta fondo, angoli e imbottitura, e niente altro. Quattordici
   riquadri su diciassette ci mettono dentro i controlli come figli diretti - una
   casella di ricerca, due tendine, una spunta con la sua etichetta - e senza
   `display: flex` quelli si dispongono come testo: nessuno spazio fra loro,
   allineati alla linea di base, e l'etichetta di una spunta che scivola sotto
   la casella. I tre che invece usano `.filters-row` stavano bene, ed e' la
   stessa coppia di sintomi della testata: la forma che aveva una regola
   funzionava, quella che non ce l'aveva no, e nessuno lo attribuiva al CSS.

   `.filters-row` resta come e' - riga sua a piena larghezza dentro la carta -
   cosi' le pagine che ce l'hanno non cambiano di un pixel.
   ========================================================================= */
.filters-card {
    display: flex;
    /*  IN BASSO, NON AL CENTRO. Un campo porta l'etichetta sopra la casella,
        un pulsante no: centrandoli, il pulsante finisce a meta' strada fra
        l'etichetta e la casella — ed e' esattamente cio' che si vedeva nella
        fotografia del dialogo dell'importazione, con «Analizza» piu' in basso
        di tutto il resto. Allineando i fondi, i controlli stanno sulla stessa
        riga e i pulsanti pure.  */
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.filters-card > .filters-row {
    flex: 1 1 100%;
}

/* Un campo con etichetta usato come filtro non si porta dietro i 24px di
   margine che ha dentro un modulo: qui li darebbe alla riga, non al campo. */
.filters-card > .form-field {
    margin-bottom: 0;
}

/* =========================================================================
   PREVENTIVATORE — MACRO, VALORIZZAZIONE DEL COMPUTO, SELETTORE ARTICOLI

   Il preventivatore ha smesso di essere un elenco da guardare ed e' diventato
   un posto in cui si lavora: si importa un computo di settecento righe e lo si
   valorizza una riga alla volta. Da quel cambio nascono tre esigenze che il
   foglio non aveva.

   QUANTO MANCA DEVE VEDERSI SENZA CONTARE. `.prev-avanzamento` mette una
   barra accanto al rapporto valorizzate/totali: su un elenco di offerte e' la
   differenza fra «venti righe» - che non dice niente - e «diciassette su
   venti, tre da valorizzare».

   LA RIGA SENZA PREZZO DEVE SALTARE ALL'OCCHIO. `.prev-da-fare` e' un
   pallino, non un colore di fondo: su cinquanta righe per schermata un fondo
   colorato diventa una parete e non si legge piu' niente, un pallino invece si
   conta a vista.

   L'ARTICOLO IN UNA CELLA DI GRIGLIA. `.macro-articolo` impila codice,
   descrizione e comando in una cella alta come le altre. Il comando e' un
   `button` di testo e non un pulsante Telerik perche' dentro una cella un
   pulsante vero alza la riga di dieci pixel, e con cinquanta righe la griglia
   diventa il doppio.

   Tutti i colori passano dai token. Le due tinte di stato che servivano e non
   c'erano - il verde del «completo» e il rosso del «da fare» - sono i token di
   successo e di errore che il foglio ha gia'.
   ========================================================================= */

/* ---------- la barra di avanzamento della valorizzazione ---------- */

.prev-avanzamento {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.prev-avanzamento-barra {
    height: 6px;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--line);
    overflow: hidden;
}

.prev-avanzamento-barra > span {
    display: block;
    height: 100%;
    background: var(--accent-strong);
    border-radius: inherit;
    /* La transizione serve: dopo un salvataggio la barra si muove, e vederla
       muoversi e' la conferma che il ricalcolo e' avvenuto. */
    transition: width 240ms ease;
}

.prev-avanzamento > small {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-3);
    white-space: nowrap;
}

.prev-mancanti {
    margin-left: 6px;
    color: var(--md-sys-color-error);
    font-weight: 600;
}

/* ---------- le piastrelle di riepilogo: due stati che mancavano ---------- */

.prev-voce-allarme {
    background: var(--md-sys-color-error-container);
    border-color: transparent;
}
.prev-voce-allarme > strong { color: var(--md-sys-color-error); }

.prev-voce-ok {
    background: var(--md-sys-color-success-container);
    border-color: transparent;
}
.prev-voce-ok > strong { color: var(--md-sys-color-success); }

/* ---------- la riga di computo ancora senza prezzo ---------- */

/* Un pallino e non un fondo colorato: cinquanta righe con il fondo giallo
   sono una parete, cinquanta pallini si contano a vista. */
.prev-da-fare {
    color: var(--md-sys-color-error);
    font-size: 0.6rem;
    vertical-align: middle;
    margin-right: 6px;
}

/* Il contatore sulla linguetta: dice quante righe restano senza aprire la
   scheda. */
.tab-allarme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-error);
    color: var(--card-bg);
    font: var(--md-sys-typescale-label-small);
    font-weight: 700;
}

/* ---------- l'articolo dentro una cella di griglia ---------- */

.macro-articolo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.macro-articolo > small {
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-3);
    /* La descrizione di listino arriva a 400 caratteri: senza questo la
       colonna si allarga e trascina fuori schermo tutte le altre. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Un button di testo e non un pulsante Telerik: dentro una cella un pulsante
   vero alza la riga di dieci pixel, e su cinquanta righe la griglia diventa
   il doppio. */
.macro-cambia,
.macro-rami {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font: var(--md-sys-typescale-body-small);
    cursor: pointer;
}

.macro-cambia:hover,
.macro-rami:hover { color: var(--accent-strong); text-decoration: underline; }

.macro-rami { color: var(--ink-3); }

/* ---------- il selettore di articoli ---------- */

/* Il segno di «gia' in anagrafica» accanto al codice: dice che l'articolo e'
   gia' stato adottato da qualcuno, e in un elenco di ottocentomila righe e' il
   segnale che quello e' materiale che l'azienda usa davvero. */
.sel-adottato {
    margin-left: 6px;
    color: var(--md-sys-color-success);
    font-size: 0.75rem;
}

.sel-articolo-filtri { margin-bottom: 12px; }

/* ---------- la lente dell'editor delle macro ---------- */

/* Data e parametri non sono dati della macro: sono il modo di guardarla.
   Il bordo a sinistra lo dice senza scriverlo. */
.macro-lente { border-left: 3px solid var(--accent); }

/* ---------- lo stato vuoto, quando dice cosa fare ---------- */

/* Un computo vuoto non e' un errore: e' un preventivo appena nato, e la cosa
   utile da mostrare non e' «nessun dato» ma il comando che serve adesso. */
.prev-vuoto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 36px 24px;
    text-align: center;
    color: var(--ink-3);
}

.prev-vuoto > i {
    font-size: 2.25rem;
    color: var(--md-sys-color-outline);
}

.prev-vuoto > strong {
    font: var(--md-sys-typescale-title-medium);
    color: var(--ink);
}

.prev-vuoto > p {
    margin: 0;
    max-width: 52ch;
    font: var(--md-sys-typescale-body-medium);
}

/* ---------- i comandi di riga ---------- */

/* Tutti insieme e allineati: sparsi si attraversa la riga e si preme quello
   sbagliato.

   NON C'E' PIU' NESSUN SEGNAPOSTO, e qui c'era: `.riga-azione-vuota` era una
   casella larga 32px con un lucchetto dentro, disegnata al posto di un comando
   che su quella riga non si poteva usare. Teneva ferma la colonna — che era il
   suo scopo, e resta un requisito — ma non diceva QUALE comando mancasse: chi
   cerca il cestino non riconosce un lucchetto come «il cestino, spento», e su
   /Articoli un solo lucchetto sostituiva DUE bottoni, cioe' accorciava la fila
   proprio come se non ci fosse stato. Adesso il comando si disegna sempre e si
   SPEGNE, col motivo nel `Title`: la colonna sta ferma da se', perche' i
   bottoni sono sempre gli stessi e sempre tanti. */
.riga-azioni {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ---------- l'importazione del computo ---------- */

/*  LA ZONA DI TRASCINAMENTO. Niente piu' percorso sul server: chi importa un
    computo lo ha sul proprio PC, e questa e' l'unica strada. E' un `<label>`
    che avvolge un `InputFile` nascosto (`.import-dropzone-input`): cliccare
    ovunque nel riquadro apre la finestra di sistema senza una riga di
    JavaScript, e il tratteggio dice «lascialo cadere qui» prima ancora di
    leggere il testo. `.is-trascinando` la accende mentre un file ci passa
    sopra — la aggiunge `trascinafile.js`, non un `:hover` — perche' deve
    restare accesa per tutta la durata del trascinamento, non solo al passaggio
    del puntatore.  */
.import-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 32px 24px;
    margin-bottom: 12px;
    border: 2px dashed var(--line);
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-surface-container);
    text-align: center;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}

.import-dropzone:hover,
.import-dropzone.is-trascinando {
    border-color: var(--accent);
    background: var(--md-sys-color-surface-container-high);
}

.import-dropzone:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.import-dropzone > i {
    font-size: 2rem;
    color: var(--md-sys-color-outline);
}

.import-dropzone > strong {
    font: var(--md-sys-typescale-title-medium);
    color: var(--ink);
}

/*  Stessa tecnica di `.foto-input`: nascosto ma non `display: none`, cosi'
    resta nel flusso della tastiera e apre il dialogo di sistema col Tab e
    Invio, non solo col clic.  */
.import-dropzone-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/*  IL SELETTORE DI FILE non si puo' sostituire con un controllo Telerik: il
    dialogo di sistema lo apre solo un `input[type=file]` vero. Quello che si
    puo' fare e' vestirlo della misura del portale — era 42 px in mezzo a
    caselle da 36, e l'occhio se ne accorge prima di capire perche'.

    `display: flex` con `align-items: center` tiene il pulsante «Scegli il
    file» del browser in mezzo all'altezza: senza, il testo si appoggia in alto
    e la casella sembra piu' alta di quanto e'.  */
.import-input-file {
    display: flex;
    align-items: center;
    height: var(--h-controllo);
    box-sizing: border-box;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: var(--md-sys-shape-corner-small);
    background: var(--card-bg);
    font: var(--md-sys-typescale-body-medium);
    max-width: 320px;
}

.import-opzioni {
    align-items: center;
    gap: 24px;
    margin: 12px 0;
}

/* ---------- la categoria senza parametri, nell'elenco a piastrelle ---------- */

/* Una categoria senza parametri non e' rotta - il fotovoltaico e' cosi' - ma
   va distinta da una che li ha: altrimenti sembra che l'elenco sia incompleto. */
.prev-tipologia-vuota { color: var(--md-sys-color-outline); font-style: italic; }

/* --- Prezzi: il numero che spiega, e quello spiegato ---

   Nelle griglie dei prezzi ci sono tre numeri sulla stessa riga — listino del
   produttore, prezzo del fornitore, netto — e vanno letti in quest'ordine di
   importanza. Il primo e' contesto: si mostra piu' tenue, altrimenti tre numeri
   dello stesso peso obbligano a leggere l'intestazione ogni volta per sapere
   quale conta. Il netto resta in grassetto, che e' quello che finisce nel
   preventivo. */
.prev-tenue {
    color: var(--md-sys-color-on-surface-variant);
}

/* --- L'eta' di un prezzo ---

   L'icona della clessidra accanto a un prezzo piu' vecchio della soglia (90
   giorni, in `Configs.Prezzi_GiorniValidita`). Non e' rossa: un prezzo di sei
   mesi e' spesso ancora quello giusto, e un allarme che suona su duemila righe
   e' un allarme che si impara a ignorare. E' ambra, come un avviso. */
.prezzo-vecchio {
    margin-left: 6px;
    color: var(--csc-manutenzione);
    font-size: 0.85rem;
    vertical-align: baseline;
}

/* =============================================================================
   LE PIASTRELLE DEI FORNITORI SI PREMONO
   =============================================================================
   Su /Listini i riquadri della copertura — «Sonepar 763.028 prezzi vigenti» —
   sono diventati dei <button>: premerne uno filtra l'elenco su quel fornitore,
   che e' la cosa che uno prova a fare appena li vede.

   UN BOTTONE NON SOMIGLIA A UN RIQUADRO, e va riportato indietro: il browser
   gli mette un fondo suo, un bordo, il testo centrato e la sua famiglia di
   caratteri. Senza questo blocco le piastrelle premibili diventavano grigie e
   col testo in mezzo, cioe' un'altra cosa da quelle che le stanno accanto.

   `text-align: left` e `font: inherit` sono le due che contano: il resto lo da'
   gia' `.prev-voce`, e ripeterlo qui vorrebbe dire due posti da tenere
   allineati. */
.prev-voce-premibile {
    font: inherit;
    text-align: left;
    cursor: pointer;
    /*  La transizione sta sul bordo e sull'ombra e NON sul fondo: `.prev-voce`
        e `.prev-voce-tenue` cambiano fondo fra loro, e animarlo farebbe
        lampeggiare la piastrella scelta a ogni ridisegno della griglia. */
    transition: border-color .15s ease, box-shadow .15s ease;
}

.prev-voce-premibile:hover {
    border-color: var(--accent);
}

.prev-voce-premibile:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/*  QUELLA SCELTA SI VEDE, altrimenti dopo il click non si sa piu' su cosa si
    sta guardando — e il filtro resta acceso mentre si sfoglia. Si usa il blu
    dell'accento vivo e non quello di marca: su questo fondo tenue il blu del
    marchio non stacca abbastanza (vedi la nota sui token in CLAUDE.md). */
.prev-voce-scelta {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.prev-voce-scelta > strong {
    color: var(--accent-strong);
}

/* =============================================================================
   I CAMPI DI UNA RIGA DI FORM SI ALLINEANO IN ALTO
   =============================================================================
   Nel dialogo «Nuovo articolo» la tendina dell'unita' di misura stava molto piu'
   in basso della casella del codice che le sta accanto, e non era un margine
   sbagliato: era lo STIRAMENTO.

   `.form-row` e' una grid e `.form-field` anche. Un campo, come elemento della
   riga, si stira all'altezza della riga; dentro, le sue righe implicite —
   etichetta, controllo, eventuale aiuto — sono `auto` e con `align-content`
   normale si stirano a riempire lo spazio in piu'. Il campo del codice ha TRE
   figli (etichetta, casella, «il codice non si cambia piu'») e quello della U.M.
   ne ha due: la riga e' alta come il primo, e nel secondo i due figli si
   distribuiscono l'altezza — la tendina scende a meta'.

   `align-content: start` impacchetta le righe in alto invece di distribuirle, e
   i controlli tornano sulla stessa linea. Non serve toccare le altezze: il
   difetto non era una misura, era una distribuzione. */
.form-field {
    align-content: start;
}

/* =============================================================================
   UNA SEZIONE DENTRO UN FORM
   =============================================================================
   Serve al blocco del prezzo iniziale nel dialogo del nuovo articolo: e' un
   gruppo di campi che riguardano un'altra cosa — un PREZZO, non l'articolo — e
   senza uno stacco sembrano campi dell'articolo. Uno stacco leggero, non una
   scheda: dentro un dialogo una cornice dentro la cornice fa rumore. */
.form-sezione {
    margin-top: 4px;
    padding: 12px 14px;
    background: var(--line-soft);
    border-radius: 10px;
    display: grid;
    gap: 10px;
}

.form-sezione > h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font: var(--md-sys-typescale-label-large);
    color: var(--ink-2);
}

.form-sezione > h4 > i {
    color: var(--accent-strong);
}

/* =============================================================================
   UN ERRORE ACCANTO AL CAMPO CHE LO CAUSA
   =============================================================================
   Serve al codice articolo gia' occupato. Il messaggio esisteva ma stava in
   fondo al form, dentro `.form-error`: si premeva «Salva», il dialogo restava
   li' e sembrava che il bottone non facesse niente, perche' il motivo era
   scritto fuori dalla vista. Un messaggio che bisogna andare a cercare non c'e'.

   Rosso e piccolo, sotto il campo: prende il posto dell'aiuto che c'era prima e
   non fa saltare la riga. Il colore e' quello degli avvisi, non un letterale. */
.campo-errore {
    display: flex;
    align-items: center;
    gap: 6px;
    font: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-error);
}

/* =============================================================================
   UNA FILA DI COMANDI DENTRO UN BLOCCO DI FORM
   =============================================================================
   Il prezzo a mano nel dialogo dei prezzi di un articolo: un bottone e un
   aiuto sulla stessa riga quando e' chiuso, «Annulla» e «Salva» quando e'
   aperto. Le regole del mantra valgono anche qui dentro — le neutre prima, la
   primaria ultima — e questa classe serve solo a tenerle in fila senza
   inventare un'altra testata. */
.prev-riga-comandi {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.prev-riga-comandi > small {
    flex: 1 1 240px;
}

/* =============================================================================
   UN FORM D'INSERIMENTO NON SI SCORRE
   =============================================================================
   Il dialogo «Nuovo articolo» cresceva oltre il monitor: compariva la barra di
   scorrimento e «Salva» finiva fuori dalla vista. E' lo stesso difetto per cui
   l'errore e' stato portato in cima al form — un comando o un messaggio che
   bisogna andare a cercare, in pratica non c'e' — e su un form d'inserimento
   costa il doppio, perche' si perde di vista sia cio' che si e' scritto sia il
   bottone per confermarlo.

   Tre rimedi insieme, e nessuno dei tre e' un'altezza fissa:

   1. i campi si dispongono su TRE colonne dove il loro contenuto lo permette
      (e' markup, sta nella pagina);
   2. le descrizioni sotto i campi sono uscite da tutto il portale — erano una
      riga di testo per campo, e in un form di dieci campi sono dieci righe;
   3. i vuoti fra le righe si stringono qui: 14px erano tarati su un form di
      tre campi, e su otto diventano cento pixel di aria.

   Non si toccano le altezze dei controlli: 34px e' la misura con cui sono
   allineati bottoni, tendine e caselle in tutto il portale, e stringere quella
   vorrebbe dire scoprire il disallineamento altrove. */
.form-grid { gap: 10px; }
.form-row { gap: 10px 14px; }

/* Un titolo di sezione dentro un form costa una riga sua, e la sezione del
   prezzo iniziale ne ha una sola: l'icona passa sull'etichetta del primo campo
   e il titolo esce. Lo stacco lo fa gia' il fondo della sezione. */
.form-sezione { padding: 10px 12px; gap: 8px; }

/* =============================================================================
   I COMANDI DI RIGA HANNO UNA FORMA SOLA, ANCHE QUANDO LI DISEGNA TELERIK
   =============================================================================
   Nel portale i comandi di riga stanno in `.riga-azioni` — un `inline-flex` con
   `gap: 4px` — e sono bottoni con la sola icona. Ma due griglie li fanno
   disegnare a Telerik con una `GridCommandColumn`, perche' hanno la modifica in
   cella e i comandi Save/Cancel devono essere i suoi: /Categorie e il computo di
   /Preventivo. Quella colonna rende una `.k-command-cell`, che ha una
   spaziatura sua.

   Il risultato erano DUE FILE DI COMANDI DIVERSE nella stessa applicazione, e
   su /Preventivo perfino nella stessa pagina: la griglia del computo con la
   fila di Telerik e quella delle macro con la nostra, a due schede di distanza.
   Non si nota confrontandole a memoria, si nota passando dall'una all'altra.

   Le si allinea qui, in un posto solo, invece di rifare a mano l'editing in
   cella di due griglie per il gusto di avere lo stesso `div`. */
.m3-grid .k-command-cell {
    display: table-cell;
    white-space: nowrap;
}

.m3-grid .k-command-cell > .k-button + .k-button {
    margin-inline-start: 4px;
}

/* =============================================================================
   LA FOTOGRAFIA DI PROFILO
   =============================================================================
   La colonna `Users.ImageProfile` c'era dal primo giorno e nessuno la scriveva;
   `UserService` riempiva `ProfileImageFile` a ogni accesso e nessuno lo
   leggeva. Adesso la fotografia si carica da /MyImage e si vede in tre posti:
   la pastiglia in alto a destra, la testa del menu del proprio nome e l'elenco
   degli utenti.

   LA FOTO SOSTITUISCE LE INIZIALI, non ci si aggiunge: `.who-avatar` resta la
   stessa scatola — stessa misura, stesso raggio — e cambia solo cio' che ci sta
   dentro. Cosi' la barra in alto non si muove di un pixel quando qualcuno
   carica la sua faccia, e chi non ce l'ha non lascia un buco. */
.who-avatar { overflow: hidden; }

.who-avatar img,
.who-avatar.lg img {
    width: 100%;
    height: 100%;
    /* `cover` e non `contain`: la scatola e' quadrata e l'immagine arriva gia'
       quadrata dal ridimensionamento nel browser, ma se un giorno arrivasse
       storta e' meglio un ritaglio che due bande vuote. */
    object-fit: cover;
    display: block;
}

/* --- la faccia accanto al nome, nell'elenco degli utenti ---

   Centoventi righe di nomi si scorrono con l'occhio, centoventi facce si
   riconoscono: e' li' che la fotografia serve piu' che altrove. */
.utente-riga { display: flex; align-items: center; gap: 10px; }

.utente-foto {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--nav-bg);
    color: #fff;
    font: var(--md-sys-typescale-label-small);
}

.utente-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- la pagina /MyImage --- */
.foto-profilo {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    flex-wrap: wrap;
}

.foto-riquadro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Il riquadro dell'anteprima prima che si scelga una foto: c'e', tiene il
   posto, e si vede che e' spento. Nasconderlo farebbe saltare la fila quando
   compare, e comparire e' proprio il momento in cui si sta guardando. */
.foto-spenta { opacity: 0.35; }

.foto-etichetta {
    font: var(--md-sys-typescale-label-small);
    color: var(--md-sys-color-outline);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.foto-tonda {
    display: grid;
    place-items: center;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--line);
}

.foto-iniziali {
    background: var(--nav-bg);
    color: #fff;
    font-size: 2.6rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-color: transparent;
}

.foto-peso { font: var(--md-sys-typescale-label-small); color: var(--md-sys-color-outline); }

.foto-comandi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    max-width: 380px;
}

/* L'input di sistema non si vede ma DEVE restare nel flusso: con
   `display:none` il browser non apre piu' la finestra di scelta quando si
   preme l'etichetta collegata. Si toglie dalla vista, non dal documento. */
.foto-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* L'etichetta si veste da bottone neutro: e' un `label`, non un `button`, e
   allora l'altezza e il contorno se li deve dichiarare qui — 34px e' la misura
   con cui sono allineati bottoni, tendine e caselle in tutto il portale. */
.foto-scegli {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm, 6px);
    background: var(--card-bg);
    color: var(--ink);
    font: var(--md-sys-typescale-label-large);
    cursor: pointer;
    user-select: none;
}

.foto-scegli:hover { background: var(--md-sys-color-surface-container); }

.foto-input:focus-visible + .foto-scegli,
.foto-scegli:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.foto-vuoto,
.foto-dove {
    margin: 0;
    font: var(--md-sys-typescale-body-small);
    color: var(--md-sys-color-outline);
}

.foto-dove { display: flex; align-items: flex-start; gap: 6px; }

/* ===========================================================================
   Le caselle di spunta si devono VEDERE
   ---------------------------------------------------------------------------
   Il committente, in una riga: «in tutto il sito le caselle sono sempre
   barrette». Ed era vero, in tutte le pagine che ne hanno una.

   NON ERA UNA QUESTIONE DI MISURA, e cercarla li' ha fatto perdere un giro: le
   caselle sono 18x18 px dappertutto, misurate. Il difetto e' il COLORE del
   bordo, che il tema Telerik mette a `oklch(0 0 0 / 0.08)` — nero all'otto per
   cento. Su `--card-bg`, che e' bianco, una linea del genere non si vede: resta
   il filo di contrasto che si intuisce di lato, e in pagina sembra una
   barretta. La spunta ACCESA invece si vedeva benissimo (fondo #024d9b, il blu
   del marchio, che il tema prende da se'), quindi il difetto e' solo dello
   stato vuoto — ed e' lo stato in cui una casella passa la vita.

   IL BORDO E' QUELLO DELLE ALTRE CASELLE: `--md-sys-color-outline`, lo stesso
   con cui sono disegnati gli `input` di testo. Una spunta che sta accanto a una
   casella di testo e ha un bordo piu' tenue sembra disabilitata.

   PERCHE' `input.k-checkbox` E NON `.k-checkbox`. In `_Layout.cshtml` il foglio
   dell'applicazione e' alla riga 29 e il tema Telerik alla 35: a pari
   specificita' vince il tema, che viene dopo. Una regola `.k-checkbox` qui
   dentro non fallirebbe — TACEREBBE, ed e' la trappola del rimedio che perde
   per specificita', pagata piu' di una volta su questo foglio. Con
   `input.k-checkbox` (elemento piu' classe) l'ordine di caricamento non conta
   piu'.

   Lo stato acceso e quello indeterminato si escludono dal selettore invece di
   riscriverli: quelli il tema li fa bene, e sovrascriverli vorrebbe dire
   tenere allineato a mano un colore che gia' e' giusto.
   =========================================================================== */
input.k-checkbox:not(:checked):not(:indeterminate) {
    border-color: var(--md-sys-color-outline);
}

input.k-checkbox:not(:checked):not(:indeterminate):hover {
    border-color: var(--accent);
}

/*  Una spunta spenta deve sembrare spenta: col bordo pieno di sopra, una
    casella disabilitata era indistinguibile da una che si puo' premere.  */
input.k-checkbox:disabled:not(:checked):not(:indeterminate) {
    border-color: var(--line);
}

/* ===========================================================================
   Un comando di riga SPENTO si deve leggere come spento
   ---------------------------------------------------------------------------
   Dall'8 settembre 2026 il cestino sta su OGNI riga e, dove non si puo'
   cancellare, e' disabilitato invece di essere sostituito da un lucchetto — lo
   ha chiesto il committente per tutto il portale. Il che sposta il peso su una
   domanda che prima non contava: un bottone spento si vede che e' spento?

   MISURATO: il tema Telerik gli mette `opacity: .6` e un filo di grayscale, e
   accanto a una matita accesa la differenza quasi non si legge — su
   cinquanta righe di clienti di Pegaso i due bottoni sembravano entrambi
   premibili. Ed era peggio di cosi': il cursore restava `pointer`, cioe' la
   pagina invitava a premere una cosa che non risponde, che e' esattamente il
   difetto del «si preme salva e non fa niente» in un'altra forma.

   Tre cose, e nessuna e' un colore nuovo:
     · l'opacita' scende a .45, che e' la soglia oltre la quale il bottone
       si legge come ghost anche accanto a uno acceso;
     · il cursore diventa `not-allowed`: lo dice prima del click;
     · `pointer-events` resta ATTIVO. Serve al `title`, che e' dove sta scritto
       PERCHE' non si puo' cancellare: spegnendo gli eventi il tooltip non
       comparirebbe piu' e il motivo diventerebbe irraggiungibile — il divieto
       tornerebbe muto, che e' il difetto da cui e' partito tutto. Il click non
       passa comunque, perche' l'attributo `disabled` lo blocca da se'.

   Il rosso di `btn-distruttivo` e' stato escluso dai bottoni spenti nel blocco
   omonimo: un cestino che si accende di rosso al passaggio del puntatore
   dichiara di essere armato, e questo non lo e'.
   =========================================================================== */
.riga-azioni .k-button:disabled,
.riga-azioni .k-button.k-disabled {
    /*  IL TELAIO RESTA, SBIADISCE L'ICONA. La prima versione di questo blocco
        portava tutto il bottone a `opacity: .45`, e accanto a un comando acceso
        funzionava: la differenza si leggeva subito. Ma sulle sedi di un cliente
        di Pegaso i comandi sono spenti TUTTI E DUE, e senza un vicino acceso da
        cui distinguersi due bottoni al 45% diventano due icone appoggiate sul
        bianco — il bordo del tema e' un filo di nero all'8%, che sbiadito
        dall'opacita' non si vede affatto. La fila perdeva la forma, che e' la
        ragione per cui i comandi si disegnano invece di essere nascosti.
        Adesso il bottone resta un bottone, coi colori dei token, e a spegnersi
        e' il segno dentro.  */
    opacity: 1;
    background: var(--line-soft);
    border-color: var(--line);
    color: var(--md-sys-color-outline);
    cursor: not-allowed;
    pointer-events: auto;
}


/* ===========================================================================
   IL COMPUTO PRENDE SOLO MACRO: la riga esclusa e il tempo ereditato

   Due segni, e dicono due cose che prima non si potevano leggere in griglia.

   ·  la riga che DICHIARA di non valorizzarsi. Non e' un errore e non e' un
      lavoro che manca: e' una riga finita, e per questo esce dalla pastiglia
      rossa. Ma non e' nemmeno una riga con un prezzo, quindi non puo' portare
      la pastiglia neutra delle altre: e' tenue e barrata, come una voce che
      resta nel documento senza contare.

   ·  il tempo che ARRIVA DALLA MACRO. Con il solo numero, «65 minuti perche'
      li dice la macro» e «65 minuti perche' li ho battuti io su questa riga»
      sono indistinguibili — e chi corregge la macro non capisce perche' la
      riga non si muove. L'icona e' la stessa delle macro, in piccolo.
   =========================================================================== */
.prev-badge-esclusa {
    background: transparent;
    border: 1px dashed var(--line);
    color: var(--ink-3);
}

.prev-eredita {
    margin-left: 5px;
    font-size: .78em;
    color: var(--md-sys-color-outline);
    vertical-align: baseline;
}


/* ===========================================================================
   COME IL LETTORE HA CAPITO IL COMPUTO

   La piastrella che dichiara la FORMA del file dentro il dialogo
   d'importazione. Sta fuori da `.prev-riepilogo` — non e' un numero fra i
   numeri, e' una frase sul file — quindi le serve una regola sua: una
   `.prev-voce` da sola e' una grid che si prende tutta la larghezza, e nel
   dialogo diventerebbe una fascia da un bordo all'altro.
   =========================================================================== */
.prev-forma {
    display: inline-grid;
    margin-bottom: 12px;
    max-width: 100%;
}


/* ===========================================================================
   LA CELLA DELLA MACRO, NEL COMPUTO

   Due cose nello stesso spazio: il nome della macro agganciata e il comando per
   cambiarla. In fila non ci stanno — il nome di una macro e' lungo quanto vuole
   — e il tema Telerik tiene le celle a `white-space: nowrap`, quindi il comando
   finiva 173 pixel fuori dalla cella, che ha `overflow: hidden`: invisibile e
   impremibile su OGNI riga valorizzata. Misurato con
   `Tools/VerificaPagine/misura-cambia.js`.

   Si impilano, e il nome va a capo invece di essere tagliato: su settecento
   righe sapere QUALE macro c'e' agganciata conta piu' di due righe di altezza.
   =========================================================================== */
.prev-cella-macro {
    display: grid;
    gap: 3px;
    justify-items: start;
    white-space: normal;
    min-width: 0;
}

.prev-cella-macro > .prev-badge {
    max-width: 100%;
    text-align: left;
}


/* ===========================================================================
   UNA NOTA SULL'ETICHETTA, non sotto il campo

   Le descrizioni sotto i campi sono uscite da tutto il portale (mantra, regola
   15) e non tornano. Ma qualcosa va detto lo stesso — quali formati accetta un
   selettore di file, per esempio — e il posto e' l'etichetta: sulla stessa
   riga, in tono minore.

   Non e' un cavillo: sotto il campo quella riga faceva anche un danno di
   forma. Un campo con etichetta + controllo + aiuto e' alto tre righe, quello
   accanto due, e in una riga di filtri non esiste allineamento che vada bene a
   tutt'e due.
   =========================================================================== */
.etichetta-nota {
    margin-left: 6px;
    font: var(--md-sys-typescale-body-small);
    color: var(--ink-3);
    font-weight: 400;
}


/* ===========================================================================
   UN ELENCO CHE SI APRE E' LARGO QUANTO LE SUE VOCI

   Telerik da' alla tendina aperta la larghezza della CASELLA che la apre. Su
   una casella larga va bene; dentro una cella di griglia no, e il committente
   l'ha fotografato: nella colonna U.M. del computo, larga cento pixel, la voce
   «n — Numero (pezzi)» andava a capo TRE volte e si leggeva «n —», «Nu...»,
   «(pe...». Tre frammenti, e per sapere che unita' si stava scegliendo
   bisognava indovinare.

   Non e' solo la griglia: misurato con `campi.js`, andavano a capo anche
   «solo prezzi buoni (entro 90 giorni)» nei filtri di /Articoli e /Listini e i
   nomi lunghi dei fornitori. Una voce su due righe si legge ancora, una su tre
   no — ma sono lo stesso difetto a due stadi, e si chiude una volta sola.

   ALLARGARE LA COLONNA non era una strada: la U.M. e' larga cento pixel perche'
   accanto ci sono descrizione, quantita' e sei colonne di numeri, e portarla a
   260 per far leggere una tendina vorrebbe dire toglierli a loro.

   `max-content` fa larga la scatola quanto la voce piu' lunga; il tetto serve
   ai nomi dei fornitori, che arrivano a quaranta caratteri. Vale per le
   tendine e per le liste a discesa in genere (`k-list-container`), non per i
   menu dei filtri di griglia, che hanno una scatola loro.
   =========================================================================== */
.k-animation-container:has(> .k-child-animation-container > .k-list-container) {
    width: max-content !important;
    min-width: 180px;
    max-width: 480px;
}

.k-list-container .k-list-item {
    white-space: nowrap;
}


/* ===========================================================================
   VALORIZZARE UNA RIGA: UNA SCHERMATA SOLA

   La domanda e' una — «con che cosa si fa questa riga?» — e le risposte
   arrivano da tre archivi in un elenco solo. Perche' quell'elenco si legga,
   ogni riga deve dire DA DOVE VIENE prima di dire cosa e': il colore della
   pastiglia e' l'unica cosa che si vede senza leggere, e distingue una macro
   che l'offerta ha gia' (si aggancia e basta) da una di catalogo (va importata,
   coi suoi parametri) da un articolo di listino (nasce una macro nuova).

   Le proposte scorrono IN COLONNA e non a piastrelle come il configuratore: una
   descrizione di listino arriva a 400 caratteri, e in una piastrella da 230
   pixel si legge il primo terzo di ognuna.
   =========================================================================== */
.prev-riga-intestazione { margin-bottom: 14px; }
.prev-riga-intestazione .prev-voce { min-width: 120px; }
.prev-riga-intestazione .prev-voce:first-child { flex: 1 1 340px; }

/*  L'ELENCO SI STRINGE QUANDO SERVE POSTO, e il dialogo non si scorre mai.
    Mantra, regola 16. Misurato su una finestra da portatile (820 px): con un
    tetto fisso di 330 px, appena si sceglie qualcosa il blocco di cio' che si e'
    scelto portava il dialogo a sforare di 139 px — cioe' «Valorizza la riga»
    finiva sotto il bordo, e un comando che bisogna andare a cercare in pratica
    non c'e'. L'elenco e' la parte elastica: scorre gia' per mestiere, e togliere
    due righe alla vista non toglie niente a chi cerca.  */
.prev-elenco-proposte {
    grid-template-columns: 1fr;
    max-height: min(330px, 34vh);
}
.k-dialog-content:has(.prev-scelto) .prev-elenco-proposte {
    max-height: min(260px, 27vh);
}

/*  I QUATTRO CAMPI DELLA VOCE A CORPO SU UNA RIGA SOLA: descrizione larga, poi
    prezzo, minuti e il conto. Su due righe costavano settanta pixel d'altezza,
    e a pagarli era l'elenco delle proposte, che si stringeva a due voci e mezza
    con la barra di scorrimento.  */
.prev-riga-battuto { grid-template-columns: 2.2fr 1fr 1fr auto; }
/*  Su una finestra stretta il dialogo si restringe con lei, e quattro colonne
    diventano quattro colonne da settanta pixel: sotto i 760 si torna a due.  */
@media (max-width: 760px) {
    .prev-riga-battuto { grid-template-columns: 1fr 1fr; }
}

/*  UNA MACRO CHE COSTA ZERO LO DEVE DIRE, e dirlo in modo che si veda: e' quasi
    sempre il segno di un prezzo mai battuto, cioe' di una riga che sembra
    finita e vale niente.  */
.prev-costo-zero { color: var(--md-sys-color-error); }

.prev-elenco-proposte .prev-scelta {
    grid-template-columns: auto 1fr;
    grid-template-areas: "origine nome" "origine dettaglio" "origine conto";
    align-items: start;
    column-gap: 10px;
}
.prev-elenco-proposte .prev-scelta > .prev-badge { grid-area: origine; align-self: center; }
.prev-elenco-proposte .prev-scelta > strong { grid-area: nome; }
.prev-elenco-proposte .prev-scelta > span { grid-area: dettaglio; }
.prev-elenco-proposte .prev-scelta > small { grid-area: conto; }

/*  IL PREZZO BATTUTO STA IN CIMA, ed e' la risposta piu' frequente di tutte:
    misurato sui sei preventivi veri del workbook MP11, 564 righe su 942 — il
    59,9% — sono un costo battuto a mano piu' i minuti. Si distingue dalle altre
    perche' non viene da nessun archivio: e' quello che si sta per scrivere.  */
.prev-scelta-battuto {
    border-style: dashed;
    background: var(--line-soft);
}
.prev-scelta-battuto:hover { background: var(--card-bg); }

.prev-badge-macro      { background: rgba(var(--accent-rgb), .16); color: var(--accent-strong); }
.prev-badge-catalogo   { background: rgba(146, 39, 143, .14); color: #92278f; }
.prev-badge-articolo   { background: rgba(57, 181, 74, .16); color: #2b8c39; }
.prev-badge-battuto    { background: rgba(247, 148, 29, .18); color: #a8620a; }

/*  «NON C'E' NIENTE» DEVE DIRE COSA HA CERCATO E COME USCIRNE. Prima era una
    riga di testo tenue — «Nessun articolo con questi criteri.» — che non
    nomina i criteri, su una ricerca precompilata da noi: chi la leggeva non
    sapeva nemmeno cosa fosse stato cercato, e l'unica strada era chiudere.  */
.prev-vuoto-ricerca {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 26px 20px;
    text-align: center;
    color: var(--ink-2);
}
.prev-vuoto-ricerca > i { font-size: 1.8rem; color: var(--ink-3); }
.prev-vuoto-ricerca > strong { color: var(--ink); }
.prev-vuoto-ricerca > p { margin: 0; max-width: 46ch; font: var(--md-sys-typescale-body-small); }

/*  COSA SI E' SCELTO, e i minuti — che stanno SEMPRE qui, per tutte le strade.
    Prima erano due campi diversi secondo la linguetta piu' la colonna della
    riga: tre posti per lo stesso fatto.  */
.prev-scelto {
    margin-top: 14px;
    padding: 12px 14px 4px;
    border: 1px solid var(--accent-strong);
    border-radius: 10px;
    background: var(--card-bg);
}
.prev-scelto-testa {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--ink);
}
.prev-scelto-testa > i { color: var(--accent-strong); }
.prev-conto { align-self: end; }
.prev-conto > strong {
    display: block;
    padding: 0 2px;
    font-size: 1.15rem;
    line-height: var(--h-controllo);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
.prev-parametri { margin-top: 12px; }

/*  LE DUE RISPOSTE CHE NON SONO UNA RICERCA, in fondo: il segno «non si
    valorizza» (65 righe su 1.627 nei computi veri) e lo sgancio. Stanno sotto
    perche' sono rare; stanno DENTRO il dialogo perche' sono risposte alla
    stessa domanda.  */
.prev-altre-strade {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

/*  La rotellina accanto all'etichetta mentre la ricerca gira. Nessun testo in
    piu' quando non serve: compare e sparisce.  */
.prev-sto-cercando { color: var(--accent-strong); }
.prev-sto-cercando > i {
    display: inline-block;
    animation: prev-gira 1s linear infinite;
}
@keyframes prev-gira { to { transform: rotate(360deg); } }


/* ===========================================================================
   DENTRO UNA GRIGLIA, UN NUMERO HA BISOGNO DI SPAZIO, NON DI FRECCE

   Il committente l'ha fotografato: «tutte queste quantita' sono troppo
   strette... con la virgola non si capisce cosa si sta scrivendo». Misurato
   mettendo una riga di computo in modifica, colonna QTA da 95 pixel:

       cella                          95 px
       − margini della cella   10+10 = 20      resta l'involucro, 74
       − frecce su e giu'              28      resta la casella,  44
       − margini della casella  8+8 = 16      resta IL NUMERO,   28

   Ventotto pixel a corpo 14 sono TRE CIFRE. Su sconto e ricarico, colonne da
   85, ne restavano diciotto: due. Chi batte «12.345,67» vede scorrere la coda
   e non sa piu' cosa ha scritto — e non e' un difetto di quella colonna, e'
   l'aritmetica di ogni campo numerico dentro ogni griglia del portale.

   LE FRECCE SONO LA VOCE PIU' GROSSA E LA PIU' INUTILE. Servono a incrementare
   di uno: su una quantita' di cinque cifre, su una percentuale di sconto, su un
   prezzo a quattro decimali non le tocca nessuno. Fuori dalle griglie restano —
   in un dialogo lo spazio c'e', e su un campo «numero di giorni» sono comode.

   E I MARGINI DELLA CELLA IN MODIFICA SCENDONO A SEI: il controllo ha gia' il
   suo bordo e i suoi margini interni, e i dieci pixel per lato servivano al
   testo di una cella a riposo, non a una casella che riempie la cella.

   Insieme fanno 36 pixel di numero in piu' in ogni cella numerica, che sono
   quattro cifre.
   =========================================================================== */
.k-grid .k-numerictextbox .k-input-spinner,
.k-grid .k-numerictextbox .k-spinner-increase,
.k-grid .k-numerictextbox .k-spinner-decrease {
    display: none !important;
}

.k-grid .k-grid-edit-cell,
.k-grid td.k-table-td.k-grid-edit-cell {
    padding-inline: 6px;
}

/*  I NUMERI SI LEGGONO INCOLONNATI, anche mentre si scrivono: le cifre a
    larghezza fissa allineano la virgola fra una riga e l'altra, ed e' cosi' che
    ci si accorge di aver battuto uno zero di troppo.  */
.k-grid .k-numerictextbox .k-input-inner {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/*  Una nota che avverte, accanto all'etichetta: non e' una descrizione sotto il
    campo (mantra, regola 15) — compare solo quando il gesto tocca piu' di una
    riga, e sparisce quando non e' cosi'.  */
.prev-nota-attenzione { color: var(--csc-manutenzione, #a8620a); }

/* ===========================================================================
   UNA RIGA DI CAMPI CORTI NON SI ALLARGA A RIEMPIRE LO SCHERMO

   `.form-row` normale va bene per un form con dieci campi: `auto-fit` su `1fr`
   li fa stare in tre colonne senza scorrere, ed e' la regola 16 del mantra.
   Su TRE campi soli — /ChangePassword, tre caselle di password — la stessa
   regola stira ogni casella a riempire cio' che avanza: su un monitor largo
   una casella che altrove e' 220px ne diventava 500, con l'etichetta lontana
   dal campo e la riga che sembrava fluttuare sulla pagina. Il committente
   l'ha fotografata: «la pagina di modifica password e' graficamente orrenda».

   Un tetto per colonna tiene le caselle alla larghezza che serve. Sotto quel
   tetto la riga torna a comportarsi come `.form-row` normale — si stringe
   ancora su uno schermo stretto — sopra non si allarga oltre.  */
.form-row-corta { grid-template-columns: repeat(auto-fit, minmax(180px, 260px)); }