/* ============================================================
   CMC UI — stile condiviso dei portali (direzione "Grafite")

   Sorgente unica: design-system/cmc-ui.css. Le copie dentro i
   portali vengono generate da design-system/sync.mjs — non
   modificarle a mano.

   Uso:
     <html data-portal="commerciale|operativo|interventi|hub" data-theme="light|dark">
     <script src="cmc-tema.js"></script>   (imposta data-theme prima del render)
     <link rel="stylesheet" href="cmc-ui.css">
     <link rel="stylesheet" href="style.css"> (solo regole specifiche del portale)

   I componenti usano SOLO i token qui sotto (mai colori diretti).
   ============================================================ */

/* ---------- Font (self-hosted, licenza OFL in fonts/) ----------
   Un solo carattere ovunque, anche per codici e importi: l'allineamento
   in colonna lo danno le cifre tabellari (font-variant-numeric). */
@font-face {
    font-family: 'Public Sans';
    src: url('fonts/public-sans-latin-wght-normal.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Public Sans';
    src: url('fonts/public-sans-latin-wght-italic.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ============================================================
   TOKEN — tema chiaro (default)
   ============================================================ */
:root {
    color-scheme: light;

    /* Superfici */
    --bg: #f2f3f5;
    --surface: #ffffff;
    --surface-2: #f8f9fa;
    --surface-hover: #f4f5f7;
    --overlay: rgba(15, 17, 19, 0.45);

    /* Bordi */
    --border: #e2e5e9;
    --border-strong: #d6dade;
    --border-input: #8a929c;   /* 3:1 sul bianco: il bordo deve far riconoscere il campo (WCAG 1.4.11) */

    /* Testo */
    --text: #15181c;
    --text-2: #3f454c;
    --muted: #59616b;
    --text-on-dark: #ffffff;

    /* Sidebar (scura in entrambi i temi) */
    --side-bg: #1c2024;
    --side-fg: #c3c9d0;
    --side-muted: #8b939c;
    --side-hover: rgba(255, 255, 255, 0.05);
    --side-active: rgba(255, 255, 255, 0.08);
    --side-border: #2e3439;

    /* Stati — fondo / testo / pallino */
    --tone-neutral-bg: #eef0f2;  --tone-neutral-fg: #4b5563;  --tone-neutral-dot: #8a929c;
    --tone-info-bg: #e6ebf2;     --tone-info-fg: #34506f;     --tone-info-dot: #5b7aa0;
    --tone-success-bg: #e2f2e6;  --tone-success-fg: #1b6631;  --tone-success-dot: #2f9a4d;
    --tone-warning-bg: #fbf1d9;  --tone-warning-fg: #7a5100;  --tone-warning-dot: #c98a00;
    --tone-danger-bg: #fae5e5;   --tone-danger-fg: #9f2828;   --tone-danger-dot: #c93a3a;
    --tone-violet-bg: #efeaf7;   --tone-violet-fg: #5b3f8a;   --tone-violet-dot: #8466b8;
    --tone-teal-bg: #e1f1f1;     --tone-teal-fg: #17605f;     --tone-teal-dot: #2b8f8c;

    /* Categorie dei grafici: distinguibili tra loro anche in luminosità */
    --cat-1: #1f78b4; --cat-2: #2f9a4d; --cat-3: #8466b8;
    --cat-4: #d4701f; --cat-5: #2b8f8c; --cat-6: #a8851f;

    /* Colore del portale: neutro finché data-portal non lo imposta */
    --accent: #2a2f35;
    --accent-hover: #15181c;
    --accent-fg: #ffffff;
    --accent-soft: #eef0f2;
    --accent-text: #2a2f35;
    --accent-bright: #c3c9d0;

    /* Ombre: minime, il lavoro lo fanno i bordi */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 20px 48px rgba(16, 24, 40, 0.18);

    /* Forma */
    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 8px;
    --radius-pill: 999px;

    /* Tipografia */
    --font: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Niente monospaziato: codici, IP, importi e 2FA usano lo stesso carattere */
    --font-mono: var(--font);
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs: 14px;
    --fs-md: 15px;
    --fs-lg: 18px;
    --fs-xl: 24px;

    /* Spazi */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 28px;
    --sp-8: 32px;

    /* Dimensioni */
    --sidebar-w: 236px;
    --topbar-h: 56px;
    --control-h: 36px;
    --control-h-lg: 40px;

    --z-sidebar: 1000;
    --z-topbar: 900;
    --z-modal: 2000;
    --z-toast: 3000;
}

/* ============================================================
   TOKEN — tema scuro
   Non è l'inverso del chiaro: le superfici "sopra" sono più chiare,
   i bordi sostituiscono le ombre.
   ============================================================ */
[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0f1113;
    --surface: #171a1d;
    --surface-2: #1c2024;
    --surface-hover: #1f2327;
    --overlay: rgba(0, 0, 0, 0.6);

    --border: #2a2f35;
    --border-strong: #353b42;
    --border-input: #646c75;   /* 3:1 sulla superficie scura */

    --text: #eceef0;
    --text-2: #c3c9d0;
    --muted: #99a1aa;

    --side-bg: #0b0c0e;
    --side-border: #1f2327;

    --tone-neutral-bg: #1f2327;  --tone-neutral-fg: #c3c9d0;  --tone-neutral-dot: #8b939c;
    --tone-info-bg: #18222e;     --tone-info-fg: #a9c1e0;     --tone-info-dot: #7a9cc6;
    --tone-success-bg: #13281a;  --tone-success-fg: #86d79f;  --tone-success-dot: #3fb862;
    --tone-warning-bg: #2b2210;  --tone-warning-fg: #f0c35a;  --tone-warning-dot: #e0a526;
    --tone-danger-bg: #2e1617;   --tone-danger-fg: #f2a0a0;   --tone-danger-dot: #e05a5a;
    --tone-violet-bg: #231c30;   --tone-violet-fg: #c9b5ec;   --tone-violet-dot: #9b7fd0;
    --tone-teal-bg: #122726;     --tone-teal-fg: #84d3cf;     --tone-teal-dot: #3bb0ab;

    --cat-1: #4aa8e0; --cat-2: #4cc06a; --cat-3: #a58ae0;
    --cat-4: #f0964a; --cat-5: #45b8b3; --cat-6: #d8b54a;

    --accent: #c3c9d0;
    --accent-hover: #eceef0;
    --accent-fg: #0b0d0f;
    --accent-soft: #1f2327;
    --accent-text: #eceef0;

    --shadow-sm: none;
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   COLORE DEL PORTALE
   Chiaro: tinta profonda + testo bianco.
   Scuro: tinta accesa del logo + testo quasi nero.
   data-portal funziona anche su un elemento interno (es. le card dell'hub):
   per questo il tema scuro vale sia su <html> sia sugli antenati.
   ============================================================ */
[data-portal="commerciale"] {
    --accent: #1f78b4; --accent-hover: #175d8c; --accent-fg: #ffffff;
    --accent-soft: #e9f2f9; --accent-text: #175d8c; --accent-bright: #27a2da;
}
[data-portal="commerciale"][data-theme="dark"],
[data-theme="dark"] [data-portal="commerciale"] {
    --accent: #27a2da; --accent-hover: #4bb5e4; --accent-fg: #0b0d0f;
    --accent-soft: #132636; --accent-text: #6cc3ea;
}

[data-portal="operativo"] {
    --accent: #1f7f36; --accent-hover: #18652b; --accent-fg: #ffffff;
    --accent-soft: #e8f4eb; --accent-text: #18652b; --accent-bright: #2ba83a;
}
[data-portal="operativo"][data-theme="dark"],
[data-theme="dark"] [data-portal="operativo"] {
    --accent: #2ba83a; --accent-hover: #45b852; --accent-fg: #0b0d0f;
    --accent-soft: #132a19; --accent-text: #6fcc7a;
}

[data-portal="interventi"] {
    --accent: #b5501c; --accent-hover: #8f3f16; --accent-fg: #ffffff;
    --accent-soft: #f9ece4; --accent-text: #8f3f16; --accent-bright: #f08030;
}
[data-portal="interventi"][data-theme="dark"],
[data-theme="dark"] [data-portal="interventi"] {
    --accent: #f08030; --accent-hover: #f39552; --accent-fg: #0b0d0f;
    --accent-soft: #33200f; --accent-text: #f6a56c;
}

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

html, body { margin: 0; padding: 0; }

[hidden] { display: none !important; }

body {
    font-family: var(--font);
    font-size: var(--fs);
    line-height: 1.45;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p { margin: 0; }

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

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

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

/* Icone dello sprite icons.svg: <svg class="icon"><use href=".../icons.svg#nome"/></svg> */
svg.icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    vertical-align: -0.2em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
svg.icon-sm { width: 16px; height: 16px; }

code, kbd, samp, .mono { font-family: var(--font-mono); font-size: inherit; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.text-muted { color: var(--muted); }
.text-2 { color: var(--text-2); }

/* Scrollbar sottili e neutre */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   LAYOUT APP
   ============================================================ */
.app { display: flex; min-height: 100vh; }

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

.content {
    flex: 1;
    padding: var(--sp-7);
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

/* ---------- Sidebar ---------- */
.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    padding: var(--sp-4) var(--sp-3);
    background: var(--side-bg);
    color: var(--side-fg);
    scrollbar-color: var(--side-border) transparent;
    z-index: var(--z-sidebar);
}

/* ---------- Logo CMC ----------
   Senza fondo: due varianti nello stesso blocco, si vede quella adatta allo sfondo.
     <span class="cmc-logo">
       <img class="cmc-logo-su-chiaro" src="…/logo.png" alt="CMC">        inchiostro nero
       <img class="cmc-logo-su-scuro" src="…/logo-bianco.png" alt="" aria-hidden="true">
     </span>
   Sidebar e barra dell'hub (.su-grafite) sono grafite in entrambi i temi: li' sempre
   la variante bianca. I file arrivano dall'anagrafica CMC (pagina Azienda dell'hub);
   quelli in cmc/ sono il ripiego. Altezza con --logo-h. */
.cmc-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.cmc-logo img { display: block; height: var(--logo-h, 32px); width: auto; }
.cmc-logo .cmc-logo-su-scuro,
[data-theme="dark"] .cmc-logo .cmc-logo-su-chiaro,
.sidebar .cmc-logo .cmc-logo-su-chiaro,
.su-grafite .cmc-logo .cmc-logo-su-chiaro { display: none; }
[data-theme="dark"] .cmc-logo .cmc-logo-su-scuro,
.sidebar .cmc-logo .cmc-logo-su-scuro,
.su-grafite .cmc-logo .cmc-logo-su-scuro { display: block; }

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-1) 6px;
}
.sidebar-logo .cmc-logo { --logo-h: 40px; }
.sidebar-logo-text { font-size: var(--fs-md); font-weight: 600; color: #ffffff; line-height: 1.2; }
.sidebar-logo-sub { font-size: var(--fs-xs); color: var(--accent-bright); }

/* Cambio portale (login unico): il blocco del logo diventa un pulsante che apre l'elenco
   dei gestionali dell'account. Markup:
   .portal-switch > button.sidebar-logo.portal-switch-trigger + .portal-switch-menu > a.portal-switch-item
   Il menu e' chiaro anche sulla sidebar grafite, come gli altri popover. */
.portal-switch { position: relative; }
.portal-switch-trigger {
    width: 100%;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.portal-switch-trigger:hover,
.portal-switch-trigger[aria-expanded="true"] { background: var(--side-hover); }
.portal-switch-trigger:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.portal-switch-chevron { width: 16px; height: 16px; margin-left: auto; flex-shrink: 0; color: var(--side-muted); transition: transform 0.15s; }
.portal-switch-trigger[aria-expanded="true"] .portal-switch-chevron { transform: rotate(180deg); }

.portal-switch-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: calc(var(--z-sidebar) + 1);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.portal-switch-menu[hidden] { display: none; }
.portal-switch-title {
    padding: 6px var(--sp-2) var(--sp-1);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.portal-switch-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px var(--sp-2);
    border-radius: var(--radius);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
}
.portal-switch-item:hover,
.portal-switch-item:focus-visible { background: var(--surface-hover); color: var(--text); text-decoration: none; outline: none; }
.portal-switch-item[aria-current="true"] { background: var(--accent-soft); }
.portal-switch-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent-text);
}
.portal-switch-icon svg { width: 16px; height: 16px; }
.portal-switch-check { width: 16px; height: 16px; margin-left: auto; color: var(--accent-text); }
.portal-switch-hub { margin-top: 2px; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); }
.portal-switch-hub .portal-switch-icon { background: var(--surface-2); color: var(--muted); }

.sidebar nav { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }

.nav-section {
    padding: var(--sp-3) var(--sp-3) 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--side-muted);
}
.nav-section:first-child { padding-top: 0; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 var(--sp-3);
    border-radius: var(--radius);
    color: var(--side-fg);
    font-size: var(--fs);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s;
}
.nav-item:hover { background: var(--side-hover); color: #ffffff; text-decoration: none; }
.nav-item .icon,
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--side-muted); }
.nav-item.active {
    position: relative;
    background: var(--side-active);
    color: #ffffff;
    font-weight: 600;
    border-radius: 0 var(--radius) var(--radius) 0;
    box-shadow: inset 3px 0 0 var(--accent-bright);
}
.nav-item.active .icon,
.nav-item.active svg { color: var(--accent-bright); }

.nav-badge {
    margin-left: auto;
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    color: var(--side-muted);
}
.nav-item.active .nav-badge { color: #ffffff; }

/* Gruppi richiudibili (Interventi / Operativo) */
.nav-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-3) 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--side-muted);
    cursor: pointer;
    border-radius: var(--radius);
}
.nav-group-header:hover { color: var(--side-fg); }
.nav-group-body { overflow: hidden; }
.nav-group-body.chiuso { display: none; }

.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--side-border);
}

/* Pulsanti "piatti" dentro la sidebar (tema, esci, ecc.) */
.side-action {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 36px;
    padding: 0 var(--sp-3);
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--side-fg);
    font-family: inherit;
    font-size: var(--fs-sm);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.side-action:hover { background: var(--side-hover); color: #ffffff; text-decoration: none; }
.side-action svg { width: 16px; height: 16px; color: var(--side-muted); }

/* ---------- Topbar ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: var(--topbar-h);
    padding: var(--sp-2) var(--sp-7);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.topbar-title { font-size: var(--fs-md); font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: var(--sp-3); }

.crumbs { font-size: var(--fs-sm); color: var(--muted); }
.crumbs .sep { padding: 0 6px; color: var(--border-input); }
.crumbs .current { color: var(--text); font-weight: 500; }

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: var(--fs-xs);
    font-weight: 700;
    flex-shrink: 0;
}

/* ---------- Intestazione pagina ---------- */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-4);
}
.page-title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.page-subtitle { margin-top: var(--sp-1); font-size: var(--fs); color: var(--muted); }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ============================================================
   PULSANTI
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    height: var(--control-h-lg);
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.btn:hover { background: var(--surface-hover); text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-secondary { background: var(--surface); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--text); }

.btn-danger { background: var(--surface); border-color: var(--border-strong); color: var(--tone-danger-fg); }
.btn-danger:hover { background: var(--tone-danger-bg); border-color: var(--tone-danger-dot); }

.btn-success { background: var(--surface); color: var(--tone-success-fg); }
.btn-success:hover { background: var(--tone-success-bg); border-color: var(--tone-success-dot); }

.btn-warning { background: var(--surface); color: var(--tone-warning-fg); }
.btn-warning:hover { background: var(--tone-warning-bg); border-color: var(--tone-warning-dot); }

.btn-sm { height: 32px; padding: 0 10px; font-size: var(--fs-sm); }
.btn-lg { height: 44px; padding: 0 18px; font-size: var(--fs-md); }
.btn-icon { width: var(--control-h-lg); padding: 0; }
.btn-icon.btn-sm { width: 32px; }

/* ============================================================
   FORM
   ============================================================ */
.form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.form-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); }

.form-control,
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    min-height: var(--control-h);
    padding: 7px 10px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs);
    line-height: 1.4;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.form-control::placeholder,
.form-input::placeholder,
.form-textarea::placeholder { color: var(--muted); opacity: 1; }
.form-control:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-control:disabled,
.form-input:disabled,
.form-select:disabled { background: var(--surface-2); color: var(--muted); }
textarea.form-control, .form-textarea { min-height: 88px; resize: vertical; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
.form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.form-section { display: flex; flex-direction: column; gap: var(--sp-3); }
.form-section + .form-section { padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.form-section-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }

/* Campo di ricerca con icona */
.search-box {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--control-h);
    padding: 0 10px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--muted);
}
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-box svg { width: 16px; height: 16px; flex-shrink: 0; }
.search-box input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-sm);
}
.search-box kbd {
    padding: 0 5px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--muted);
}

/* ============================================================
   CARD E KPI
   ============================================================ */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
}
.card-title { font-size: var(--fs-md); font-weight: 600; }
.card-body { padding: var(--sp-4); }
.card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border);
    font-size: var(--fs-sm);
    color: var(--muted);
}

/* Fascia KPI unica divisa da filetti (firma della direzione Grafite) */
.stats-grid,
.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.stat-card,
.metric-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-4) 18px;
    background: var(--surface);
}
.stat-label,
.stat-card-label { font-size: var(--fs-sm); color: var(--muted); }
.stat-value,
.stat-card-value { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: var(--fs-xs); color: var(--muted); }

/* ============================================================
   TABELLE
   ============================================================ */
/* overflow-x: auto e non hidden: su schermi stretti la tabella scorre di lato invece di essere tagliata */
.table-wrap,
.table-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow-x: auto;
}
.table-scroll { overflow-x: auto; }

.table-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: var(--sp-3) var(--sp-4);
}
.table-title { font-size: var(--fs-md); font-weight: 600; }

.table,
.table-wrap table,
.table-container table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs);
}
.table th,
.table-wrap th,
.table-container th {
    padding: 9px var(--sp-4);
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}
.table td,
.table-wrap td,
.table-container td {
    padding: 10px var(--sp-4);
    border-bottom: 1px solid var(--border);
    color: var(--text-2);
    vertical-align: middle;
}
.table tbody tr:last-child td,
.table-wrap tbody tr:last-child td,
.table-container tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td,
.table-wrap tbody tr:hover td,
.table-container tbody tr:hover td { background: var(--surface-hover); }

td.code, .cell-code { font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-title { font-weight: 600; color: var(--text); }
.cell-sub { display: block; font-size: var(--fs-sm); color: var(--muted); }
.td-actions { white-space: nowrap; text-align: right; }

/* ============================================================
   BADGE DI STATO
   Toni semantici: neutral, info, success, warning, danger, violet, teal.
   Gli alias tengono compatibili i nomi già usati nei portali.
   ============================================================ */
.badge, .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 9px;
    border-radius: var(--radius-pill);
    background: var(--b-bg, var(--tone-neutral-bg));
    color: var(--b-fg, var(--tone-neutral-fg));
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
}
.badge::before, .pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--b-dot, var(--tone-neutral-dot));
    flex-shrink: 0;
}
.badge-plain::before { display: none; }

.badge-neutral, .badge-gray, .badge-secondary, .pill-gray {
    --b-bg: var(--tone-neutral-bg); --b-fg: var(--tone-neutral-fg); --b-dot: var(--tone-neutral-dot);
}
.badge-info, .badge-blue, .pill-blue {
    --b-bg: var(--tone-info-bg); --b-fg: var(--tone-info-fg); --b-dot: var(--tone-info-dot);
}
.badge-success, .badge-green, .pill-green {
    --b-bg: var(--tone-success-bg); --b-fg: var(--tone-success-fg); --b-dot: var(--tone-success-dot);
}
.badge-warning, .badge-amber, .pill-amber {
    --b-bg: var(--tone-warning-bg); --b-fg: var(--tone-warning-fg); --b-dot: var(--tone-warning-dot);
}
.badge-danger, .badge-error, .badge-red, .pill-red {
    --b-bg: var(--tone-danger-bg); --b-fg: var(--tone-danger-fg); --b-dot: var(--tone-danger-dot);
}
.badge-violet, .badge-purple, .pill-purple {
    --b-bg: var(--tone-violet-bg); --b-fg: var(--tone-violet-fg); --b-dot: var(--tone-violet-dot);
}
.badge-teal, .badge-cyan {
    --b-bg: var(--tone-teal-bg); --b-fg: var(--tone-teal-fg); --b-dot: var(--tone-teal-dot);
}
.badge-primary {
    --b-bg: var(--accent-soft); --b-fg: var(--accent-text); --b-dot: var(--accent);
}

/* ============================================================
   FILTRI A SEGMENTI E SCHEDE
   ============================================================ */
.segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border-radius: var(--radius-lg);
    background: var(--bg);
}
.segmented button,
.segmented a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-2);
    font-family: inherit;
    font-size: var(--fs-sm);
    text-decoration: none;
    cursor: pointer;
}
.segmented .count { color: var(--muted); font-variant-numeric: tabular-nums; }
.segmented .active,
.segmented [aria-pressed="true"] {
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 0 0 1px var(--border);
}

.tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    border-bottom: 1px solid var(--border);
}
.tab {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 42px;
    padding: 0 var(--sp-3);
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: none;
    color: var(--muted);
    font-family: inherit;
    font-size: var(--fs);
    cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }

/* ============================================================
   MODALI
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh var(--sp-4) var(--sp-4);
    background: var(--overlay);
    overflow-y: auto;
}
.modal {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.modal-lg { max-width: 880px; }
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
}
.modal-title { font-size: var(--fs-lg); font-weight: 600; }
.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.modal-close:hover { background: var(--surface-hover); color: var(--text); }
.modal-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ============================================================
   AVVISI, TOAST, STATO VUOTO
   ============================================================ */
.alert {
    display: flex;
    gap: 10px;
    padding: var(--sp-3) 14px;
    border: 1px solid var(--a-dot, var(--tone-info-dot));
    border-radius: var(--radius);
    background: var(--a-bg, var(--tone-info-bg));
    color: var(--a-fg, var(--tone-info-fg));
    font-size: var(--fs-sm);
}
.alert-success { --a-bg: var(--tone-success-bg); --a-fg: var(--tone-success-fg); --a-dot: var(--tone-success-dot); }
.alert-warning { --a-bg: var(--tone-warning-bg); --a-fg: var(--tone-warning-fg); --a-dot: var(--tone-warning-dot); }
.alert-error, .alert-danger { --a-bg: var(--tone-danger-bg); --a-fg: var(--tone-danger-fg); --a-dot: var(--tone-danger-dot); }

.toast-container {
    position: fixed;
    right: var(--sp-5);
    bottom: var(--sp-5);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 260px;
    max-width: 420px;
    padding: var(--sp-3) 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--t-dot, var(--accent));
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-sm);
    box-shadow: var(--shadow-md);
}
.toast.success, .toast-success { --t-dot: var(--tone-success-dot); }
.toast.error, .toast-error { --t-dot: var(--tone-danger-dot); }
.toast.warning, .toast-warning { --t-dot: var(--tone-warning-dot); }

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: 48px var(--sp-6);
    color: var(--muted);
    text-align: center;
}
.empty-state-title { font-size: var(--fs-md); font-weight: 600; color: var(--text); }

/* ============================================================
   PAGINE DI ACCESSO (login, 2FA, codici di recupero)
   Stile dato al markup esistente dentro .auth-card, così le
   pagine 2FA cambiano solo nell'intestazione, mai nella logica.
   ============================================================ */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background: var(--bg);
}
.auth-card {
    width: 100%;
    max-width: 420px;
    padding: 32px 32px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.auth-brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: 28px; }
.auth-brand .cmc-logo { --logo-h: 44px; }
.auth-brand-name { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.auth-brand-sub { font-size: var(--fs-xs); color: var(--accent-text); }

.auth-card h1,
.auth-card h2 { margin-bottom: 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.auth-card .sub,
.auth-card .testo { margin-bottom: var(--sp-5); font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); }
.auth-card .form-group { margin-bottom: var(--sp-3); }
.auth-card .form-group input:not([type="hidden"]) { margin-bottom: 0; }
.auth-card .requisiti { margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); }
.auth-card .strength { height: 4px; margin-top: 6px; border-radius: 2px; background: var(--surface-2); }
.auth-card .strength-bar { width: 0; height: 100%; border-radius: 2px; transition: width 0.3s, background 0.3s; }
.auth-card ol { margin: 0 0 18px 1.1rem; padding: 0; font-size: var(--fs-sm); line-height: 1.7; color: var(--text-2); }
.auth-card label { display: block; margin-bottom: 6px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); }
.auth-card input:not([type="hidden"]) {
    width: 100%;
    min-height: var(--control-h-lg);
    margin-bottom: var(--sp-3);
    padding: 9px 12px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs);
}
.auth-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.auth-card .codice-input {
    padding: 12px;
    font-size: 24px;
    letter-spacing: 0.35em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.auth-card .btn {
    display: flex;
    width: 100%;
    height: 44px;
    margin-top: var(--sp-3);
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-fg);
    font-weight: 600;
}
.auth-card .btn:hover { border-color: var(--accent-hover); background: var(--accent-hover); text-decoration: none; }
.auth-card .btn-scuro { border-color: var(--text); background: var(--text); color: var(--surface); }
.auth-card .btn-scuro:hover { border-color: var(--text-2); background: var(--text-2); }

.auth-card .errore,
.auth-card .avviso,
.auth-card .info {
    margin-bottom: var(--sp-4);
    padding: var(--sp-3) 14px;
    border: 1px solid;
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    line-height: 1.55;
}
.auth-card .errore { border-color: var(--tone-danger-dot); background: var(--tone-danger-bg); color: var(--tone-danger-fg); }
.auth-card .avviso { border-color: var(--tone-warning-dot); background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
.auth-card .info { border-color: var(--tone-info-dot); background: var(--tone-info-bg); color: var(--tone-info-fg); }

/* Il QR resta nero su bianco in entrambi i temi, altrimenti il telefono non lo legge */
.auth-card .qr-box {
    display: flex;
    justify-content: center;
    margin-bottom: var(--sp-4);
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #ffffff;
}
.auth-card .qr-box canvas { display: block; width: 200px; height: 200px; image-rendering: pixelated; }
.auth-card .chiave,
.auth-card .codici-lista span {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--fs);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    text-align: center;
    word-break: break-all;
}
.auth-card .chiave { margin-bottom: var(--sp-4); }
.auth-card .codici-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin: var(--sp-4) 0; }
.auth-card .piede { margin-top: var(--sp-5); font-size: var(--fs-sm); text-align: center; }
.auth-card .piede a { color: var(--accent-text); font-weight: 600; }

@media print {
    .auth-page { background: #ffffff; }
    .auth-card { border: 0; box-shadow: none; }
    .auth-card .btn, .auth-card .piede { display: none; }
}

/* ============================================================
   RESPONSIVE
   Sotto 900px la sidebar diventa un pannello a scomparsa:
   il portale aggiunge/toglie .open su .sidebar e mette subito
   dopo un <div class="sidebar-backdrop"> che al clic la chiude.
   ============================================================ */
.sidebar-backdrop { display: none; }

@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }
    .sidebar.open { transform: none; box-shadow: var(--shadow-lg); }
    .sidebar.open + .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: calc(var(--z-sidebar) - 1);
        background: var(--overlay);
    }
    .content { padding: var(--sp-4); }
    .topbar { padding: var(--sp-2) var(--sp-4); }
    .topbar .crumbs { flex: 1; min-width: 0; }
    .stats-grid, .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .table-wrap > table, .table-container > table { min-width: 640px; }
    .stat-card, .metric-card { padding: var(--sp-3) 14px; }
    .stat-value, .stat-card-value { font-size: 20px; }
    .form-grid-2, .form-grid-3, .form-grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   STAMPA: sempre chiaro, niente navigazione
   ============================================================ */
@media print {
    :root, [data-theme="dark"] {
        color-scheme: light;
        --bg: #ffffff; --surface: #ffffff; --surface-2: #f8f9fa;
        --border: #d6dade; --text: #000000; --text-2: #222222; --muted: #555555;
    }
    .sidebar, .topbar, .toast-container, .page-actions { display: none !important; }
    .content { padding: 0; }
}