/*
 * Tsunami BI - design system derivato da TSUNAMI UNITED (Figma, "Guida · Fondazioni").
 * Tema scuro · Inter · angoli 5 px · spaziature 8/12/16/24/32 px.
 * Tipografia: Title 28 · Heading 18 · Body 14 · Label 12 · Score 32.
 */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-wght-normal-Gz7AlRl.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-ext-wght-normal-1Br77OV.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    color-scheme: light;

    /* ── Superfici ─────────────────────────────────────────────── */
    --tsu-bg: #f3f4f6;            /* pagina */
    --tsu-panel: #ffffff;         /* card, tabelle, menu, sidebar */
    --tsu-panel-2: #f1f2f4;       /* incassi dentro una card (metric, advice, code, hover) */
    --tsu-sidebar-bg: #ffffff;
    --tsu-table-head: #fafbfc;
    --tsu-input-bg: #ffffff;
    --tsu-tooltip-bg: #ffffff;

    /* ── Bordi ─────────────────────────────────────────────────── */
    --tsu-border: #e3e5e8;        /* filetto decorativo: card, divisori, griglia */
    --tsu-border-strong: #7f868d; /* confine di un controllo: input, pulsanti, chip (≥ 3:1) */
    --tsu-tooltip-border: #7f868d;

    /* ── Testo ─────────────────────────────────────────────────── */
    --tsu-text: #16181a;
    --tsu-muted: #5f666c;
    --tsu-text-disabled: #a1a7ad; /* solo controlli disattivati (esenti AA) */
    --tsu-on-accent: #ffffff;     /* testo sopra i riempimenti rossi */
    --tsu-tooltip-text: #16181a;

    /* ── Rosso Tsunami ─────────────────────────────────────────── */
    --tsu-red: #ed2027;           /* marchio: wordmark, sottolineatura tab, icone, focus, serie grafici, cartine */
    --tsu-red-rgb: 237, 32, 39;   /* stesso rosso come terna, per le velature rgba() */
    --tsu-red-fill: #e01c23;      /* riempimento sotto testo bianco: nav attiva, btn-primary, segmented, contatori */
    --tsu-red-hover: #c9181e;
    --tsu-red-ink: #c6161c;       /* rosso come testo piccolo: badge, errori, termini, btn-danger */
    --tsu-red-soft: #fde8e9;      /* velatura: alert-danger, nav-sub corrente, giorni selezionati */
    --tsu-red-line: rgba(237, 32, 39, .6); /* sottolineatura dei termini cliccabili */
    --tsu-nav-active-bg: var(--tsu-red-fill);

    /* ── Stati ─────────────────────────────────────────────────── */
    --tsu-green: #1f7a2f;
    --tsu-green-soft: #e6f4e7;
    --tsu-amber: #a85309;
    --tsu-amber-soft: #fcf0db;

    /* ── Navigazione laterale ──────────────────────────────────── */
    --tsu-nav-bg: transparent;
    --tsu-nav-border: transparent;
    --tsu-nav-hover-bg: var(--tsu-panel-2);
    --tsu-nav-hover-border: transparent;

    /* ── Focus ─────────────────────────────────────────────────── */
    --tsu-focus: var(--tsu-red);
    --tsu-focus-ring: rgba(237, 32, 39, .28);

    /* ── Ombre e velature ──────────────────────────────────────── */
    --tsu-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    --tsu-shadow-menu: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .12);
    --tsu-shadow-tint: rgba(16, 24, 40, .14);
    --tsu-backdrop: rgba(22, 24, 26, .35);

    /* ── Grafici (Chart.js: colori fissi dal PHP rimappati da theme.js) ── */
    --tsu-chart-grid: #e3e5e8;
    --tsu-chart-tick: #5f666c;
    --tsu-chart-prev: #7a8188;            /* linea «periodo precedente» */
    --tsu-chart-prev-fill: #878c91;       /* barre «periodo precedente» */
    --tsu-chart-bar-fill: rgba(237, 32, 39, .8); /* barre rosse chiare (ricerche al giorno) */
    --tsu-chart-green: #1f7a2f;
    --tsu-chart-amber: #d97d02;
    --tsu-chart-neutral: #858b92;         /* fetta «1 ordine» della ciambella */
    --tsu-chart-red-deep: #b8141a;        /* fetta «6–10 ordini» */
    --tsu-chart-red-deepest: #7a0d11;     /* fetta «11 o più» */

    /* ── Cartine (chartjs-chart-geo) ───────────────────────────── */
    --tsu-map-missing: #e6e8eb;
    --tsu-map-border: #b3b9bf;
    --tsu-map-alpha-min: .28;

    /* ── Freccia del select (unico colore non tokenizzabile: vive in un data URI) ── */
    --tsu-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f666c' stroke-width='1.5'/%3E%3C/svg%3E");

    /* Tipografia (Figma: stili TSUNAMI/*) - invariata */
    --tsu-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --tsu-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --tsu-title: 600 28px/39px var(--tsu-font);
    --tsu-heading: 600 18px/25px var(--tsu-font);
    --tsu-body: 400 14px/20px var(--tsu-font);
    --tsu-label: 500 12px/17px var(--tsu-font);
    --tsu-score: 600 32px/45px var(--tsu-font);

    /* Spaziature e forme - invariate */
    --sp-1: 8px;
    --sp-2: 12px;
    --sp-3: 16px;
    --sp-4: 24px;
    --sp-5: 32px;
    --radius: 5px;
    --control-h: 44px;
    --sidebar-w: 232px;
}

/* Tema scuro (quello attuale, con le correzioni AA): data-theme="dark" è messo da base.html.twig
   prima del CSS e da theme.js; tipografia e spaziature ereditano da :root. */
:root[data-theme="dark"] {
    color-scheme: dark;

    /* ── Superfici ─────────────────────────────────────────────── */
    --tsu-bg: #0b0c0d;
    --tsu-panel: #111314;
    --tsu-panel-2: #0b0c0d;       /* gli incassi restano identici a oggi */
    --tsu-sidebar-bg: #111314;
    --tsu-table-head: #15171a;    /* intestazione appena sollevata dalle righe */
    --tsu-input-bg: #111314;
    --tsu-tooltip-bg: #0b0c0d;

    /* ── Bordi ─────────────────────────────────────────────────── */
    --tsu-border: #343638;
    --tsu-border-strong: #666a6d; /* oggi #343638 su input e pulsanti = 1.54:1 */
    --tsu-tooltip-border: #666a6d;

    /* ── Testo ─────────────────────────────────────────────────── */
    --tsu-text: #f1f2f2;
    --tsu-muted: #9b9e9f;
    --tsu-text-disabled: #4a4d50;
    --tsu-on-accent: #ffffff;
    --tsu-tooltip-text: #f1f2f2;

    /* ── Rosso Tsunami ─────────────────────────────────────────── */
    --tsu-red: #ed2027;
    --tsu-red-rgb: 237, 32, 39;
    --tsu-red-fill: #e01c23;      /* oggi #f1f2f2 su #ed2027 = 3.87:1 */
    --tsu-red-hover: #d41b21;
    --tsu-red-ink: #f54f55;       /* oggi #ed2027 come testo su #111314 = 4.29:1 */
    --tsu-red-soft: #341517;
    --tsu-red-line: rgba(237, 32, 39, .6);
    --tsu-nav-active-bg: var(--tsu-red-fill);

    /* ── Stati ─────────────────────────────────────────────────── */
    --tsu-green: #83ce73;
    --tsu-green-soft: #212d21;
    --tsu-amber: #efb34e;
    --tsu-amber-soft: #30291c;

    /* ── Navigazione laterale (voci riquadrate come nel Figma) ── */
    --tsu-nav-bg: #111314;
    --tsu-nav-border: #343638;
    --tsu-nav-hover-bg: #111314;
    --tsu-nav-hover-border: #9b9e9f;

    /* ── Focus ─────────────────────────────────────────────────── */
    --tsu-focus: var(--tsu-red);
    --tsu-focus-ring: rgba(237, 32, 39, .35);

    /* ── Ombre e velature ──────────────────────────────────────── */
    --tsu-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    --tsu-shadow-menu: 0 12px 32px rgba(0, 0, 0, .5);
    --tsu-shadow-tint: rgba(0, 0, 0, .6);
    --tsu-backdrop: rgba(0, 0, 0, .55);

    /* ── Grafici ───────────────────────────────────────────────── */
    --tsu-chart-grid: #343638;
    --tsu-chart-tick: #9b9e9f;
    --tsu-chart-prev: #9b9e9f;
    --tsu-chart-prev-fill: rgba(155, 158, 159, .65); /* oggi .45 = 2.36:1 */
    --tsu-chart-bar-fill: rgba(237, 32, 39, .85); /* oggi .65 = 2.37:1 sul pannello */
    --tsu-chart-green: #2e9a52;   /* oggi #83ce73 accanto a #efb34e: ΔE 4.5 in protanopia */
    --tsu-chart-amber: #efb34e;
    --tsu-chart-neutral: #6b6f72; /* oggi #5b5e60 = 2.85:1 */
    --tsu-chart-red-deep: #d4363c;        /* #b8141a sarebbe 2.80:1 sul pannello */
    --tsu-chart-red-deepest: #b95a5e;     /* #7a0d11 sarebbe 1.68:1: si distingue per saturazione */

    /* ── Cartine ───────────────────────────────────────────────── */
    --tsu-map-missing: #1a1c1e;
    --tsu-map-border: #4a4d50;
    --tsu-map-alpha-min: .18;

    --tsu-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239b9e9f' stroke-width='1.5'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--tsu-bg); }
body { margin: 0; font: var(--tsu-body); color: var(--tsu-text); background: var(--tsu-bg); -webkit-font-smoothing: antialiased; }
a { color: var(--tsu-text); }
h1, h2, p { margin: 0; }
h1 { font: var(--tsu-title); }
h2 { font: var(--tsu-heading); }
code { font-family: var(--tsu-mono); font-size: 13px; }
strong { font-weight: 600; }

.muted { color: var(--tsu-muted); }
.small, .label { font: var(--tsu-label); }
.label { color: var(--tsu-muted); text-transform: uppercase; }
.text-green { color: var(--tsu-green); }
.text-amber { color: var(--tsu-amber); }
.text-red { color: var(--tsu-red); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--tsu-red); outline-offset: 2px; }

/* ─── Marchio ─────────────────────────────────────────────────────────── */
.wordmark { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; color: var(--tsu-text); line-height: 1; }
.wordmark-accent { color: var(--tsu-red); }
.wordmark-sm { font-size: 22px; }
.wordmark-lg { font-size: 44px; }

/* ─── Pulsanti (Figma: TSUNAMI / Button - primary · default · disabled) ─ */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--control-h); padding: var(--sp-2);
    font: var(--tsu-label); color: var(--tsu-text); text-align: center; text-decoration: none;
    background: var(--tsu-panel); border: 1px solid var(--tsu-border); border-radius: var(--radius);
    cursor: pointer; transition: background-color .12s, border-color .12s;
}
.btn:hover { border-color: var(--tsu-muted); }
.btn-primary { background: var(--tsu-red); }
.btn-primary:hover { background: var(--tsu-red-hover); border-color: var(--tsu-border); }
.btn:disabled, .btn[aria-disabled="true"] { color: var(--tsu-muted); cursor: not-allowed; border-color: var(--tsu-border); }
.btn-danger { color: var(--tsu-red); }
.btn-block { width: 100%; }
.btn-sm { min-height: 32px; padding: 6px 12px; }

/* ─── Pagine di accesso (Figma: 09 · Login) ──────────────────────────── */
.auth { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); min-height: 100vh; }
.auth-brand { display: flex; flex-direction: column; gap: var(--sp-5); padding: 64px; background: var(--tsu-panel); border-right: 1px solid var(--tsu-border); }
.auth-claim { font: var(--tsu-score); text-transform: uppercase; }
.auth-lead { font: var(--tsu-heading); color: var(--tsu-muted); }
.auth-sites { font: var(--tsu-body); color: var(--tsu-red); }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 64px var(--sp-4); }
.auth-card { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-card > .muted { margin-top: calc(var(--sp-1) * -1); }
.auth-note { color: var(--tsu-muted); }
.steps { margin: 0; padding-left: 18px; color: var(--tsu-muted); display: grid; gap: var(--sp-1); }
.qr { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-4); background: var(--tsu-panel); border: 1px solid var(--tsu-border); border-radius: var(--radius); }
.app-install { max-width: 720px; }
.app-qr { margin: var(--sp-3) 0; max-width: 320px; text-align: center; }
@media (max-width: 760px) { .app-qr { display: none; } }
.qr img { background: #fff; padding: 10px; border-radius: var(--radius); max-width: 100%; height: auto; }
.secret { font-size: 14px; letter-spacing: .1em; word-break: break-all; text-align: center; color: var(--tsu-text); }

@media (max-width: 900px) {
    .auth { grid-template-columns: 1fr; }
    .auth-brand { padding: var(--sp-5) var(--sp-4); gap: var(--sp-3); border-right: 0; border-bottom: 1px solid var(--tsu-border); }
    .auth-claim, .auth-lead, .auth-sites { display: none; }
    .auth-main { padding: var(--sp-5) var(--sp-3); align-items: flex-start; }
    .wordmark-lg { font-size: 32px; }
}

/* ─── Struttura del pannello (Figma: 01 · Panoramica) ────────────────── */
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.topbar { display: none; }
.backdrop { display: none; }
.sidebar {
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4);
    background: var(--tsu-panel); border-right: 1px solid var(--tsu-border);
}
.sidebar-brand { display: flex; align-items: center; min-height: 76px; margin-bottom: 0; }
.nav { display: flex; flex-direction: column; gap: var(--sp-2); }
.nav-group { font: var(--tsu-label); color: var(--tsu-muted); text-transform: uppercase; }
.nav-link {
    display: flex; align-items: center; justify-content: center; min-height: var(--control-h); padding: var(--sp-2);
    font: var(--tsu-label); color: var(--tsu-text); text-decoration: none;
    background: var(--tsu-panel); border: 1px solid var(--tsu-border); border-radius: var(--radius);
}
.nav-link:hover { border-color: var(--tsu-muted); }
.nav-link.is-active { background: var(--tsu-red); }
/* Gruppo richiudibile (Amministrazione) */
.nav-box { margin-top: var(--sp-2); }
.nav-summary { cursor: pointer; list-style: none; position: relative; }
.nav-summary::-webkit-details-marker { display: none; }
.nav-summary::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); }
.nav-box[open] .nav-summary::after { transform: translateY(-30%) rotate(225deg); }
.nav-box-items { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-1) 0 0 var(--sp-2); }
.nav-sub { min-height: 36px; background: var(--tsu-bg); }
.nav-sub.is-current { border-color: var(--tsu-red); }
.user-box { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: auto; padding: var(--sp-2); background: var(--tsu-bg); border: 1px solid var(--tsu-border); border-radius: var(--radius); }
.user-name { font: var(--tsu-body); overflow-wrap: anywhere; }
.user-role { font: var(--tsu-label); color: var(--tsu-muted); }
.main { padding: var(--sp-5); min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.page-header h1 { text-transform: uppercase; }
.page-header .muted { margin-top: var(--sp-1); }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.page-actions .btn { min-width: 164px; }
.page-footnote { font: var(--tsu-label); color: var(--tsu-muted); }

/* Mobile: barra in alto e menu laterale a scorrimento */
@media (max-width: 900px) {
    .shell { display: block; }
    .topbar { display: flex; align-items: center; gap: var(--sp-2); position: sticky; top: 0; z-index: 30; min-height: 56px; padding: 0 var(--sp-3); padding-top: env(safe-area-inset-top, 0px); background: var(--tsu-panel); border-bottom: 1px solid var(--tsu-border); }
    .topbar-btn { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -8px; background: transparent; border: 0; border-radius: var(--radius); color: var(--tsu-text); cursor: pointer; }
    .burger, .burger::before, .burger::after { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; content: ""; position: relative; }
    .burger::before { position: absolute; top: -6px; }
    .burger::after { position: absolute; top: 6px; }
    .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: min(84vw, 320px); height: 100dvh; padding: var(--sp-3); padding-top: calc(var(--sp-3) + env(safe-area-inset-top, 0px)); transform: translateX(-100%); transition: transform .2s ease; box-shadow: none; }
    .shell.is-open .sidebar { transform: none; box-shadow: var(--tsu-shadow-menu); }
    .backdrop { display: block; position: fixed; inset: 0; z-index: 40; background: var(--tsu-backdrop); opacity: 0; pointer-events: none; transition: opacity .2s; }
    .shell.is-open .backdrop { opacity: 1; pointer-events: auto; }
    body.menu-open { overflow: hidden; }
    .sidebar-brand { min-height: 0; margin-bottom: var(--sp-2); }
    .nav-link { justify-content: flex-start; }
    .main { padding: var(--sp-3); gap: var(--sp-3); }
    .page-header { gap: var(--sp-2); }
    .page-header h1 { font-size: 22px; line-height: 30px; }
    .page-actions { width: 100%; gap: var(--sp-2); }
    .page-actions .btn { min-width: 0; }
    .filters { width: 100%; }
    .filters select { min-width: 0; width: 100%; }
    .segmented { display: flex; width: 100%; }
    .segmented label { flex: 1; min-width: 0; }
}

/* Icone nel menu laterale, nei pulsanti e nelle schede */
.icon { width: 18px; height: 18px; flex: none; }
.nav-link { justify-content: flex-start; gap: 10px; padding: var(--sp-2) 14px; }
.nav-link .icon { color: var(--tsu-muted); }
.nav-link.is-active .icon { color: var(--tsu-on-accent); }
.btn .icon { width: 16px; height: 16px; }
.btn { gap: 6px; }
.tab .icon { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }

/* Configurazione: parametri */
.settings-list { list-style: none; margin: 0; padding: 0; }
.setting { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3); border-top: 1px solid var(--tsu-border); scroll-margin-top: 80px; }
.setting-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1); }
.setting-head .badge { margin-left: 8px; }
.setting-key { font: 400 11px/16px var(--tsu-mono); color: var(--tsu-muted); }
.setting p { margin: 0; }
.setting-value code { font: 400 13px/20px var(--tsu-mono); overflow-wrap: anywhere; }
.setting-actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: flex-start; }
.setting-actions details { display: contents; }
.setting-actions details[open] { display: block; width: 100%; }
.setting-actions summary { list-style: none; gap: 6px; }
.setting-actions summary::-webkit-details-marker { display: none; }
.setting-form, .setting-confirm { margin-top: var(--sp-1); }
.setting-confirm { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.setting-form input[type=text], .setting-form input[type=password], .setting-form textarea { text-align: left; font-family: var(--tsu-mono); }
.input-code-sm { width: 150px !important; text-align: center; letter-spacing: .15em; }
.setting-revealed { display: flex; flex-direction: column; gap: 4px; }
.setting-revealed textarea { text-align: left; font-family: var(--tsu-mono); }
.settings-group .card-head form { margin: 0; }

/* ─── Pannelli, schede numeriche, griglie ────────────────────────────── */
.card { display: flex; flex-direction: column; gap: var(--sp-3); padding: 20px; background: var(--tsu-panel); border: 1px solid var(--tsu-border); border-radius: var(--radius); }
.card-flush { padding: 0; gap: 0; overflow: hidden; }
.card-link { color: inherit; text-decoration: none; transition: border-color .12s; }
.card-link:hover { border-color: var(--tsu-muted); }
.card-link .badge { align-self: flex-start; margin-top: auto; }
.stat { gap: var(--sp-1); padding: var(--sp-3); }
.stat-value { font: var(--tsu-score); }
.empty { align-items: center; text-align: center; padding: 48px var(--sp-4); }
.grid { display: grid; gap: var(--sp-3); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ─── Messaggi e stati ───────────────────────────────────────────────── */
.alert { padding: var(--sp-2) var(--sp-3); font: var(--tsu-body); background: var(--tsu-panel); border: 1px solid var(--tsu-border); border-left-width: 3px; border-radius: var(--radius); }
.main > .alert, .auth-card > .alert { margin: 0; }
.alert-success { border-left-color: var(--tsu-green); color: var(--tsu-green); }
.alert-warning { border-left-color: var(--tsu-amber); color: var(--tsu-amber); }
.alert-danger { border-left-color: var(--tsu-red); color: var(--tsu-text); }
.badge { display: inline-block; font: var(--tsu-label); text-transform: uppercase; color: var(--tsu-muted); }
.badge-accent { color: var(--tsu-red); }
.badge-success { color: var(--tsu-green); }
.badge-warning { color: var(--tsu-amber); }

/* ─── Form (Figma: campi 44 px, etichetta Label sopra) ───────────────── */
.form { display: flex; flex-direction: column; gap: var(--sp-4); }
.form-wide { max-width: 820px; }
.field, .form > div:not(.grid):not(.form-actions):not(.access-grid) { display: flex; flex-direction: column; gap: var(--sp-1); }
.field-label, .form label:not(.check):not(.segmented label) { font: var(--tsu-label); color: var(--tsu-muted); }
.field-help, .form .help-text { font: var(--tsu-label); color: var(--tsu-muted); }
input[type=text], input[type=email], input[type=password], input[type=search], select, textarea {
    width: 100%; min-height: var(--control-h); padding: var(--sp-2);
    font: 500 14px/20px var(--tsu-font); color: var(--tsu-text); text-align: center;
    background: var(--tsu-panel); border: 1px solid var(--tsu-border); border-radius: var(--radius);
}
input::placeholder { color: var(--tsu-muted); }
input:hover { border-color: var(--tsu-muted); }
input:focus-visible { outline: none; border-color: var(--tsu-red); }
.input-code { font-family: var(--tsu-mono); font-size: 22px; letter-spacing: .35em; }
.check { display: flex; align-items: center; gap: var(--sp-1); font: var(--tsu-body); color: var(--tsu-muted); }
.check input { accent-color: var(--tsu-red); width: 16px; height: 16px; }
.fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.fieldset legend { font: var(--tsu-heading); padding: 0; margin-bottom: var(--sp-3); }
.form-actions { display: flex; justify-content: flex-end; gap: var(--sp-3); }
.form-actions .btn { min-width: 164px; }
.form ul { margin: 0; padding: 0; list-style: none; color: var(--tsu-red); font: var(--tsu-label); }

.access-grid { display: flex; flex-direction: column; border: 1px solid var(--tsu-border); border-radius: var(--radius); background: var(--tsu-bg); }
.access-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
.access-row + .access-row { border-top: 1px solid var(--tsu-border); }
.access-label { font: var(--tsu-body); }
.segmented { display: inline-flex; gap: var(--sp-1); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; min-width: 120px; padding: 0 var(--sp-2); font: var(--tsu-label); color: var(--tsu-text); background: var(--tsu-panel); border: 1px solid var(--tsu-border); border-radius: var(--radius); cursor: pointer; }
.segmented input:checked + label { background: var(--tsu-red); }
.segmented input:focus-visible + label { outline: 2px solid var(--tsu-red); outline-offset: 2px; }
.form > div > input[type=checkbox] + label, .form div:has(> input[type=checkbox]) { flex-direction: row; align-items: center; gap: var(--sp-1); }
.form input[type=checkbox] { accent-color: var(--tsu-red); width: 16px; height: 16px; margin: 0; }

/* ─── Tabelle (Figma: intestazione 41 px su panel, righe 56 px) ──────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--tsu-border); border-radius: var(--radius); }
.card-flush > .table-wrap { border: 0; border-radius: 0; }
.table { width: 100%; border-collapse: collapse; font: var(--tsu-body); }
.table th, .table td { padding: 0 var(--sp-3); text-align: left; vertical-align: middle; }
.table thead th { height: 41px; font: var(--tsu-label); color: var(--tsu-muted); text-transform: uppercase; background: var(--tsu-panel); white-space: nowrap; }
.table tbody td { height: 56px; background: var(--tsu-panel); border-top: 1px solid var(--tsu-border); }
.table td .muted { font: var(--tsu-label); }
.table .actions { text-align: right; white-space: nowrap; }
.table .actions form { display: inline; }
.table .actions .btn + .btn, .table .actions form + form, .table .actions .btn + form { margin-left: var(--sp-1); }
.table-kv th { width: 35%; height: 56px; font: var(--tsu-label); color: var(--tsu-muted); text-transform: uppercase; border-top: 1px solid var(--tsu-border); }
.table-kv tr:first-child th, .table-kv tr:first-child td { border-top: 0; }
.table-kv td { border-top: 1px solid var(--tsu-border); }
.is-inactive td { color: var(--tsu-muted); }
.level { white-space: nowrap; }
.level-none { color: var(--tsu-muted); }
.level-read { color: var(--tsu-text); }
.level-operate { color: var(--tsu-green); }

/* ─── Dashboard: filtri, schede numeriche, grafici, classifiche ──────── */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.filters select { min-width: 220px; text-align: left; padding-right: 32px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239b9e9f' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.stat-delta { display: flex; align-items: baseline; gap: var(--sp-1); font: var(--tsu-label); }
.delta { font: var(--tsu-label); white-space: nowrap; }
.delta-good { color: var(--tsu-green); }
.delta-bad { color: var(--tsu-amber); }
.delta-flat, .delta-na { color: var(--tsu-muted); }
.chart { position: relative; height: 260px; }
.chart canvas { max-width: 100%; }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding: 20px 20px 0; }
.card-flush .card-head { padding: var(--sp-3) var(--sp-3) var(--sp-2); }
.card-flush .card-head + .table-wrap .table thead th { border-top: 1px solid var(--tsu-border); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .key { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table .key a { color: var(--tsu-text); text-decoration: none; }
.table .key a:hover { text-decoration: underline; }
/* Termini cliccabili: sottolineati in rosso con l'icona del grafico */
.table .key a.term-link, a.term-link { color: var(--tsu-text); text-decoration: underline; text-decoration-color: var(--tsu-red-line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.term-link .icon { width: 14px; height: 14px; margin-left: 6px; vertical-align: -2px; color: var(--tsu-red); opacity: .75; }
.table .key a.term-link:hover, a.term-link:hover { color: var(--tsu-red); text-decoration-color: currentColor; }
a.term-link:hover .icon { opacity: 1; }
.term-accent { color: var(--tsu-red); }
mark.term-hit { background: none; color: var(--tsu-red); font-weight: 600; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); font-weight: 500; }
.crumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--tsu-text); text-decoration: none; }
.crumbs a:hover { color: var(--tsu-red); }
.crumbs .icon { width: 16px; height: 16px; }
.table-ranking tbody td { height: 44px; }
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--tsu-border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; padding: var(--sp-2) var(--sp-3); margin-bottom: -1px; font: var(--tsu-label); color: var(--tsu-muted); text-decoration: none; text-transform: uppercase; white-space: nowrap; border-bottom: 2px solid transparent; }
.tab:hover { color: var(--tsu-text); }
.tab.is-active { color: var(--tsu-text); border-bottom-color: var(--tsu-red); }
.tab-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--tsu-red); color: var(--tsu-text); font-size: 11px; line-height: 18px; text-align: center; }
.findings { display: flex; flex-direction: column; gap: var(--sp-3); }
.finding { gap: var(--sp-2); border-left-width: 3px; }
.finding-serious { border-left-color: var(--tsu-red); }
.finding-warning { border-left-color: var(--tsu-amber); }
.finding-info { border-left-color: var(--tsu-muted); }
.finding-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.finding-when { margin-left: auto; }
.finding h2 a { color: inherit; text-decoration: none; }
.finding h2 a:hover { text-decoration: underline; }
.badge-serious { color: var(--tsu-red); }
.badge-warning { color: var(--tsu-amber); }
.badge-info { color: var(--tsu-muted); }
.inline-actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

/* ─── Agente: briefing, chat, testo Markdown ─────────────────────────── */
.grid-agent { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--sp-4); align-items: start; }
@media (max-width: 1000px) { .grid-agent { grid-template-columns: minmax(0, 1fr); } }
.agent-main, .agent-side { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
textarea { width: 100%; padding: var(--sp-2); font: var(--tsu-body); color: var(--tsu-text); background: var(--tsu-panel); border: 1px solid var(--tsu-border); border-radius: var(--radius); resize: vertical; }
textarea:focus-visible { outline: none; border-color: var(--tsu-red); }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--tsu-border); }
.list li a { color: var(--tsu-text); text-decoration: none; }
.list li a:hover { text-decoration: underline; }
.list li.is-active { border-left: 3px solid var(--tsu-red); }
.prose { font: var(--tsu-body); line-height: 1.6; }
.prose h2 { font: var(--tsu-heading); margin: var(--sp-4) 0 var(--sp-2); }
.prose h3 { font: 600 15px/22px var(--tsu-font); margin: var(--sp-3) 0 var(--sp-1); }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--sp-2); }
.prose ul, .prose ol { padding-left: 20px; }
.prose li { margin-bottom: 4px; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--sp-2) 0 var(--sp-3); font-size: 13px; }
.prose th, .prose td { padding: 6px 10px; border-bottom: 1px solid var(--tsu-border); text-align: left; vertical-align: top; }
.prose th { font: var(--tsu-label); color: var(--tsu-muted); text-transform: uppercase; }
.prose code { background: var(--tsu-bg); padding: 1px 5px; border-radius: 3px; }
.prose a { color: var(--tsu-text); }
.prose strong { color: var(--tsu-text); }
.chat { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 900px; }
.chat-user { border-left: 3px solid var(--tsu-border); }
.chat-assistant { border-left: 3px solid var(--tsu-red); }
.tool-log summary { cursor: pointer; }
.tool-log ol { padding-left: 20px; margin: var(--sp-1) 0 0; }
.tool-log pre { margin: 4px 0 8px; padding: var(--sp-1) var(--sp-2); background: var(--tsu-bg); border-radius: var(--radius); font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.btn.is-busy { color: var(--tsu-muted); pointer-events: none; }

/* ─── Tempo reale ────────────────────────────────────────────────────── */
.realtime { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); gap: var(--sp-4); align-items: start; }
@media (max-width: 800px) { .realtime { grid-template-columns: minmax(0, 1fr); } }
.realtime-main { display: flex; flex-direction: column; gap: var(--sp-1); }
.realtime-value { color: var(--tsu-green); }
.realtime-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); }
.realtime-cols .label { display: block; margin-bottom: var(--sp-1); }
.realtime-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.realtime-list li { display: flex; justify-content: space-between; gap: var(--sp-2); padding: 4px 0; border-top: 1px solid var(--tsu-border); font: var(--tsu-body); }
.realtime-key { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.realtime-list .num { font-variant-numeric: tabular-nums; color: var(--tsu-muted); }
.status-ok .stat-value { color: var(--tsu-green); }
.status-warning .stat-value { color: var(--tsu-amber); }
.status-critical .stat-value { color: var(--tsu-red); }

@media (max-width: 900px) {
    .table .key { max-width: 220px; }
    .table th, .table td { padding: 0 var(--sp-2); }
    .grid-agent { grid-template-columns: minmax(0, 1fr); }
    .auth-main { padding: var(--sp-4) var(--sp-3); }
}
.advice { padding: var(--sp-2) var(--sp-3); background: var(--tsu-bg); border: 1px solid var(--tsu-border); border-radius: var(--radius); }
.advice .label { display: block; margin-bottom: 4px; }

/* ─── Server: panoramica a caselle ───────────────────────────────────── */
.server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3); }
.server-tile { gap: var(--sp-2); color: inherit; text-decoration: none; border-top-width: 3px; transition: border-color .12s; }
.server-tile:hover { border-color: var(--tsu-muted); }
.tile-ok { border-top-color: var(--tsu-green); }
.tile-warning { border-top-color: var(--tsu-amber); }
.tile-critical { border-top-color: var(--tsu-red); }
.tile-unknown { border-top-color: var(--tsu-border); }
.tile-head { display: flex; align-items: center; gap: var(--sp-1); }
.tile-head h2 { font-size: 15px; line-height: 20px; overflow-wrap: anywhere; }
.dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--tsu-border); }
.dot-ok { background: var(--tsu-green); }
.dot-warning { background: var(--tsu-amber); }
.dot-critical { background: var(--tsu-red); }
.tile-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1); }
.metric { display: flex; flex-direction: column; padding: var(--sp-1); background: var(--tsu-bg); border-radius: var(--radius); font: 600 18px/24px var(--tsu-font); }
.metric .label { font-size: 11px; }
.metric-warning { color: var(--tsu-amber); }
.metric-critical { color: var(--tsu-red); }
.tile-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: var(--tsu-label); color: var(--tsu-muted); }
.breadcrumb { font: var(--tsu-label); color: var(--tsu-muted); }
.breadcrumb a { color: var(--tsu-muted); }

/* ─── Selettore di periodo (Litepicker) ─────────────────────────────── */
.daterange { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.daterange-input { min-width: 230px; cursor: pointer; }
.daterange-toggle { color: var(--tsu-text); }
.daterange-compare { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.daterange-compare select { min-width: 200px; text-align: left; }
@media (max-width: 900px) {
    .daterange, .daterange-input, .daterange-compare, .daterange-compare select { width: 100%; min-width: 0; }
}
/* Tema scuro per il calendario */
.litepicker { font-family: var(--tsu-font) !important; font-size: 13px !important;
    --litepicker-container-months-color-bg: var(--tsu-panel);
    --litepicker-container-months-box-shadow-color: var(--tsu-shadow-tint);
    --litepicker-footer-color-bg: var(--tsu-panel);
    --litepicker-footer-box-shadow-color: var(--tsu-border);
    --litepicker-tooltip-color-bg: var(--tsu-bg);
    --litepicker-month-header-color: var(--tsu-text);
    --litepicker-button-prev-month-color: var(--tsu-muted);
    --litepicker-button-next-month-color: var(--tsu-muted);
    --litepicker-button-prev-month-color-hover: var(--tsu-red);
    --litepicker-button-next-month-color-hover: var(--tsu-red);
    --litepicker-month-width: calc(var(--litepicker-day-width) * 7);
    --litepicker-month-weekday-color: var(--tsu-muted);
    --litepicker-month-week-number-color: var(--tsu-muted);
    --litepicker-day-color: var(--tsu-text);
    --litepicker-day-color-hover: var(--tsu-red);
    --litepicker-is-today-color: var(--tsu-red);
    --litepicker-is-in-range-color: var(--tsu-red-soft);
    --litepicker-is-locked-color: var(--tsu-text-disabled);
    --litepicker-is-start-color: var(--tsu-on-accent);
    --litepicker-is-start-color-bg: var(--tsu-red);
    --litepicker-is-end-color: var(--tsu-on-accent);
    --litepicker-is-end-color-bg: var(--tsu-red);
    --litepicker-button-cancel-color: var(--tsu-text);
    --litepicker-button-cancel-color-bg: var(--tsu-panel);
    --litepicker-button-apply-color: var(--tsu-on-accent);
    --litepicker-button-apply-color-bg: var(--tsu-red);
    --litepicker-button-reset-color: var(--tsu-muted);
    --litepicker-button-reset-color-hover: var(--tsu-red);
    --litepicker-highlighted-day-color: var(--tsu-text);
    --litepicker-highlighted-day-color-bg: var(--tsu-border);
}
.litepicker .container__months, .litepicker .container__footer { border: 1px solid var(--tsu-border); }
.litepicker .container__footer .button-apply, .litepicker .container__footer .button-cancel { border: 1px solid var(--tsu-border) !important; border-radius: var(--radius) !important; padding: 6px 14px !important; font-weight: 600; }
.litepicker .container__main .container__predefined-ranges { background: var(--tsu-panel); border: 1px solid var(--tsu-border); box-shadow: none; }
.litepicker .container__predefined-ranges button { color: var(--tsu-text) !important; padding: 8px 14px !important; text-align: left; }
.litepicker .container__predefined-ranges button:hover { color: var(--tsu-red) !important; background: var(--tsu-bg) !important; }
.litepicker .container__tooltip { color: var(--tsu-text); border: 1px solid var(--tsu-border); }

/* Vendite: tabella prodotti con ricerca, ordinamento e paginazione */
.product-search { display: flex; gap: var(--sp-1, 8px); flex: 1 1 280px; max-width: 420px; }
.product-search input[type="search"] { flex: 1; min-width: 0; min-height: 32px; padding: 6px 12px; text-align: left; appearance: none; -webkit-appearance: none; }
.product-meta { padding: 0 var(--sp-3, 24px) var(--sp-2, 16px); margin: 0; }
.sort-link { color: inherit; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.sort-link:hover, .sort-link.is-active { color: var(--tsu-text); }
.sort-arrow { font-size: 10px; color: var(--tsu-muted); }
.sort-link.is-active .sort-arrow { color: var(--tsu-red); }
.stores-cell { white-space: nowrap; }
.store-chip { display: inline-block; font: var(--tsu-label); padding: 1px 6px; margin-right: 4px; border: 1px solid var(--tsu-border); border-radius: 4px; color: var(--tsu-text); }
.store-chip.store-it { border-color: var(--tsu-green); }
.store-chip.store-com { border-color: var(--tsu-amber); }
.store-chip.store-b2b { border-color: var(--tsu-red); }
.store-chip.is-past { opacity: .35; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2, 16px); padding: var(--sp-2, 16px) var(--sp-3, 24px); border-top: 1px solid var(--tsu-border); }
.btn.is-disabled { opacity: .4; pointer-events: none; }
@media (max-width: 720px) { .product-search { max-width: none; } .pager .muted { display: none; } }

/* Calendario su mobile: periodi rapidi come pulsanti sopra il mese, tutto dentro lo schermo */
.litepicker.mobilefriendly-portrait { --litepicker-day-width: calc((100vw - 48px) / 7); }
.litepicker.mobilefriendly { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; }
.litepicker.mobilefriendly[data-plugins*="ranges"] > .container__main { flex-direction: column; }
.litepicker.mobilefriendly .container__main > .container__predefined-ranges { flex-direction: row !important; flex-wrap: wrap; gap: 6px; padding: 10px; width: auto; border-bottom: 0 !important; }
.litepicker.mobilefriendly .container__predefined-ranges button { width: auto !important; margin: 0 !important; padding: 6px 10px !important; border: 1px solid var(--tsu-border) !important; border-radius: var(--radius); font-size: 13px; }
.litepicker.mobilefriendly .container__months { box-shadow: none; }
@media (max-width: 720px) {
    .litepicker { max-width: calc(100vw - 16px); }
    .litepicker[data-plugins*="ranges"] > .container__main { flex-direction: column; }
    .litepicker .container__main > .container__predefined-ranges { flex-direction: row !important; flex-wrap: wrap; gap: 6px; padding: 10px; width: auto; }
    .litepicker .container__predefined-ranges button { width: auto !important; margin: 0 !important; padding: 6px 10px !important; border: 1px solid var(--tsu-border) !important; border-radius: var(--radius); }
}

/* Vendite: cartina dei paesi di spedizione */
.country-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.country-card .card-head-bare { padding: 0; }
.country-map { position: relative; height: 340px; }
.country-map canvas { width: 100% !important; height: 100% !important; }
.country-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-3); font-size: 13px; }
.country-list li { display: grid; grid-template-columns: 1fr auto 52px; gap: var(--sp-1); padding: 4px 0; border-bottom: 1px solid var(--tsu-border); }
@media (max-width: 720px) { .country-map { height: 260px; } .country-list { grid-template-columns: 1fr; } }
.country-map { height: 400px; }
.map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.map-legend-bar { width: 90px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(var(--tsu-red-rgb), var(--tsu-map-alpha-min)), var(--tsu-red)); }
.country-card { align-self: start; }
@media (max-width: 720px) { .country-map { height: 280px; } }

/* Configurazione degli agenti */
.agent-config-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.agent-config-form .field { display: flex; flex-direction: column; gap: 6px; }
.agent-config-form .label { font: var(--tsu-label); text-transform: uppercase; color: var(--tsu-text); }
.textarea-code { font: 400 13px/20px var(--tsu-font); min-height: 180px; }
.agent-config-test { display: flex; flex-direction: column; gap: 6px; padding-top: var(--sp-3); border-top: 1px solid var(--tsu-border); }
.agent-config-test .label { font: var(--tsu-label); text-transform: uppercase; color: var(--tsu-text); }
.technical-context summary { cursor: pointer; }
.technical-context pre { margin: var(--sp-2) 0 0; white-space: pre-wrap; word-break: break-word; font: 400 12px/18px var(--tsu-mono); color: var(--tsu-muted); }
.legend h2 { margin-bottom: var(--sp-2); }
.legend h3 { font: var(--tsu-label); text-transform: uppercase; color: var(--tsu-text); margin: var(--sp-3) 0 var(--sp-1); }
.legend dl { margin: 0; }
.legend dt { font-weight: 600; margin-top: var(--sp-2); }
.legend dd { margin: 4px 0 0; color: var(--tsu-muted); }
.legend ul { margin: 0; padding-left: 18px; color: var(--tsu-muted); }
.legend li + li { margin-top: 4px; }
.legend-reset { padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--tsu-border); }
.notice { border-color: var(--tsu-amber); }
.agent-config-form textarea, .agent-config-form input[type=text] { text-align: left; }

/* Risposta dell'agente in preparazione */
.agent-thinking { display: flex; align-items: center; gap: var(--sp-2); color: var(--tsu-muted); margin: 0; }
.agent-error { color: var(--tsu-amber); margin: 0; }
.spinner { flex: none; width: 16px; height: 16px; border: 2px solid var(--tsu-border); border-top-color: var(--tsu-red); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
.tabs-sub { margin-top: calc(var(--sp-2) * -1); }
.tabs-sub .tab { font-size: 12px; }

/* Barra in alto a destra (rotellina e utente) sopra il contenuto; il menu resta laterale */
.content-col { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: var(--sp-2); position: sticky; top: 0; z-index: 30; min-height: 64px; padding: 0 var(--sp-5); background: var(--tsu-bg); border-bottom: 1px solid var(--tsu-border); }
.topbar-btn, .topbar-brand { display: none; }
.topbar-right { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; }
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-width: 40px; padding: 0 10px;
    color: var(--tsu-muted); background: transparent; border: 1px solid transparent; border-radius: var(--radius); text-decoration: none; cursor: pointer;
}
.icon-btn:hover, .icon-btn.is-active { color: var(--tsu-text); border-color: var(--tsu-border); }
.icon-btn.is-active .icon { color: var(--tsu-red); }
.user-menu { position: relative; }
.user-menu-btn { list-style: none; font: var(--tsu-label); }
.user-menu-btn::-webkit-details-marker { display: none; }
.user-menu-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tsu-text); }
.user-menu[open] .user-menu-btn { border-color: var(--tsu-border); }
.user-menu-panel {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 240px;
    display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3);
    background: var(--tsu-panel); border: 1px solid var(--tsu-border); border-radius: var(--radius); box-shadow: var(--tsu-shadow-menu);
}
.user-menu-panel .btn { margin-top: var(--sp-1); }
@media (max-width: 900px) {
    .topbar { min-height: 56px; padding: 0 var(--sp-3); padding-top: env(safe-area-inset-top, 0px); background: var(--tsu-panel); }
    .topbar-btn { display: grid; }
    .topbar-brand { display: inline-flex; }
    .user-menu-name { display: none; }
}

/* Icona del calendario nel campo del periodo */
.daterange-field { position: relative; display: inline-flex; }
.daterange-field .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tsu-muted); pointer-events: none; }
.daterange-field .daterange-input { padding-left: 38px; }
@media (max-width: 900px) { .daterange-field { display: flex; width: 100%; } }

/* Gli elementi nascosti restano nascosti anche se hanno un display impostato */
[hidden] { display: none !important; }

/* Pannello aperto dentro l'app Android: la navigazione è quella dell'app */
.shell.in-app { display: block; }
.shell.in-app .sidebar, .shell.in-app .topbar, .shell.in-app .backdrop { display: none !important; }
.shell.in-app .main { padding-top: var(--sp-3); }

/* Campo password con l'occhio */
.password-field { position: relative; display: block; }
.password-field input { width: 100%; padding-right: 48px; }
.password-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px;
    background: transparent; border: 0; border-radius: var(--radius); color: var(--tsu-muted); cursor: pointer; }
.password-toggle:hover, .password-toggle[aria-pressed="true"] { color: var(--tsu-text); }
.password-toggle:focus-visible { outline: 2px solid var(--tsu-red); outline-offset: 1px; }

/* Vendite > Clienti e Coupon */
.chart-doughnut { height: 250px; margin-bottom: var(--sp-3); }
.table-compact th, .table-compact td { padding-top: 8px; padding-bottom: 8px; }
.card-head-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.map-toggle { display: inline-flex; gap: 4px; }
.map-toggle .btn.is-active { background: var(--tsu-red-fill); border-color: var(--tsu-red-fill); color: var(--tsu-on-accent); }
.italy-map { position: relative; height: 440px; margin: var(--sp-2) 0; }
.italy-map canvas { width: 100% !important; height: 100% !important; }
@media (max-width: 720px) { .italy-map { height: 380px; } }
.table-scroll { max-height: 440px; overflow-y: auto; }
.stat-link { text-decoration: none; color: inherit; transition: border-color .15s; }
.stat-link:hover { border-color: var(--tsu-muted); }
.stat-link.is-active { border-color: var(--tsu-red); box-shadow: inset 0 0 0 1px var(--tsu-red); }
.empty-note { padding: 4px var(--sp-4) var(--sp-4); }
.empty-note p { margin: 0 0 var(--sp-2); }
.alert-info { border-left-color: var(--tsu-amber); color: var(--tsu-text); }
.table-wrap-plain { border: 0; border-radius: 0; }
.geo-card h3.label { margin: var(--sp-3) 0 var(--sp-1); }

/* Dettatura della domanda agli agenti */
.form-actions { flex-wrap: wrap; align-items: center; }
.form-actions .dictation-btn { min-width: 0; width: 44px; padding: 0; justify-content: center; }
.dictation-btn .icon { width: 20px; height: 20px; }
.dictation-btn.is-listening { background: var(--tsu-red-fill); border-color: var(--tsu-red-fill); color: var(--tsu-on-accent); animation: dictation-pulse 1.4s ease-in-out infinite; }
@keyframes dictation-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--tsu-red); } 50% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .dictation-btn.is-listening { animation: none; } }
.dictation-status { order: -1; flex: 1 1 100%; text-align: right; }
.dictation-status:empty { display: none; }
.dictation-status[data-kind="error"] { color: var(--tsu-amber); }
.dictation-btn[hidden] { display: none; }

/* Scelta del sito nelle pagine SEO: pulsanti affiancati come nell'app */
.site-toggle { display: inline-flex; }
.site-toggle .btn { min-width: 72px; min-height: var(--control-h); border-radius: 0; font-weight: 600; }
.site-toggle .btn + .btn { margin-left: -1px; }
.site-toggle .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.site-toggle .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.site-toggle .btn.is-active { background: var(--tsu-red-fill); border-color: var(--tsu-red-fill); color: var(--tsu-on-accent); position: relative; }
@media (max-width: 900px) { .site-toggle { display: flex; width: 100%; } .site-toggle .btn { flex: 1; } }

/* ═══════════════════════════════════════════════════════════════════════
   Tema chiaro + scuro: colori dei componenti. Solo colore, bordo, ombra.
   Da incollare in coda ad app.css (vince per ordine a pari specificità) o
   da fondere riga per riga nelle regole esistenti. Nessun colore fisso:
   tutto passa dai token di :root / :root[data-theme="dark"].
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Base: rosso come testo piccolo → inchiostro ─────────────────── */
.text-red, .badge-accent, .badge-serious, .btn-danger, .form ul, .auth-sites,
.term-accent, mark.term-hit, .metric-critical { color: var(--tsu-red-ink); }
.crumbs a:hover, .table .key a.term-link:hover, a.term-link:hover { color: var(--tsu-red-ink); }
.table .key a.term-link, a.term-link { text-decoration-color: var(--tsu-red-line); }
a.term-link .icon { opacity: .85; }                       /* icona rossa: 3.78:1 su bianco (.75 dava 3.32) */
.sort-link.is-active .sort-arrow { color: var(--tsu-red-ink); }
/* restano rosso marchio (testo grande ≥ 3:1): .wordmark-accent 22/44px 700, .status-critical .stat-value 32px 600 */

/* ── 2. Sidebar e navigazione ───────────────────────────────────────── */
.sidebar { background: var(--tsu-sidebar-bg); border-right-color: var(--tsu-border); }
.nav-link { color: var(--tsu-text); background: var(--tsu-nav-bg); border-color: var(--tsu-nav-border); }
.nav-link:hover { background: var(--tsu-nav-hover-bg); border-color: var(--tsu-nav-hover-border); }
.nav-link.is-active { background: var(--tsu-nav-active-bg); border-color: var(--tsu-nav-active-bg); color: var(--tsu-on-accent); }
.nav-link.is-active .icon { color: var(--tsu-on-accent); }
.nav-sub { background: var(--tsu-panel-2); }
.nav-sub.is-current { background: var(--tsu-red-soft); border-color: var(--tsu-red); color: var(--tsu-red-ink); }
.nav-sub.is-current .icon { color: var(--tsu-red-ink); }
.user-box { background: var(--tsu-panel-2); }
.shell.is-open .sidebar { box-shadow: var(--tsu-shadow-menu); }
.backdrop { background: var(--tsu-backdrop); }

/* ── 3. Barra in alto e menu utente ─────────────────────────────────── */
.icon-btn:hover, .icon-btn.is-active, .user-menu[open] .user-menu-btn { color: var(--tsu-text); background: var(--tsu-panel); border-color: var(--tsu-border-strong); }
.user-menu-panel { box-shadow: var(--tsu-shadow-menu); }

/* ── 4. Card, schede numeriche, caselle server ──────────────────────── */
.card { box-shadow: var(--tsu-shadow); }
.card-link:hover, .stat-link:hover, .server-tile:hover { border-color: var(--tsu-border-strong); }
/* la striscia di stato in alto sopravvive all'hover (oggi sparisce) */
.server-tile.tile-ok:hover { border-top-color: var(--tsu-green); }
.server-tile.tile-warning:hover { border-top-color: var(--tsu-amber); }
.server-tile.tile-critical:hover { border-top-color: var(--tsu-red); }
.server-tile.tile-unknown:hover, .tile-unknown { border-top-color: var(--tsu-border-strong); }
.dot-unknown { background: var(--tsu-border-strong); }
.finding-info { border-left-color: var(--tsu-border-strong); }
.chat-user { border-left-color: var(--tsu-border-strong); }
.metric, .advice, .access-grid, .prose code, .tool-log pre { background: var(--tsu-panel-2); }
.qr { box-shadow: var(--tsu-shadow); }

/* ── 5. Tabelle ─────────────────────────────────────────────────────── */
.table thead th { background: var(--tsu-table-head); }
.table tbody tr:hover td, .table tbody tr:hover th { background: var(--tsu-panel-2); }
.table-scroll { scrollbar-color: var(--tsu-border-strong) transparent; }

/* ── 6. Tab ─────────────────────────────────────────────────────────── */
.tab-count { background: var(--tsu-red-fill); color: var(--tsu-on-accent); }

/* ── 7. Pulsanti ────────────────────────────────────────────────────── */
.btn { border-color: var(--tsu-border-strong); box-shadow: var(--tsu-shadow); }
.btn:hover { background: var(--tsu-panel-2); border-color: var(--tsu-muted); }
.btn-primary { background: var(--tsu-red-fill); border-color: var(--tsu-red-fill); color: var(--tsu-on-accent); }
.btn-primary:hover { background: var(--tsu-red-hover); border-color: var(--tsu-red-hover); }
.btn:disabled, .btn[aria-disabled="true"], .btn.is-busy { color: var(--tsu-muted); background: var(--tsu-panel-2); border-color: var(--tsu-border); box-shadow: none; }
.btn.is-disabled { opacity: .55; }
.map-toggle .btn.is-active, .site-toggle .btn.is-active, .dictation-btn.is-listening { background: var(--tsu-red-fill); border-color: var(--tsu-red-fill); color: var(--tsu-on-accent); }
@keyframes dictation-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--tsu-red); } 50% { box-shadow: 0 0 0 8px transparent; } }
.segmented label { border-color: var(--tsu-border-strong); }
.segmented input:checked + label { background: var(--tsu-red-fill); border-color: var(--tsu-red-fill); color: var(--tsu-on-accent); }
/* anello di focus sopra un riempimento rosso: rosso su rosso sparirebbe */
.nav-link.is-active:focus-visible, .btn-primary:focus-visible, .segmented input:checked:focus-visible + label,
.site-toggle .btn.is-active:focus-visible, .map-toggle .btn.is-active:focus-visible, .dictation-btn.is-listening:focus-visible { outline-color: var(--tsu-text); }

/* ── 8. Campi ───────────────────────────────────────────────────────── */
input[type=text], input[type=email], input[type=password], input[type=search], select, textarea { color: var(--tsu-text); background-color: var(--tsu-input-bg); border-color: var(--tsu-border-strong); }
input::placeholder, textarea::placeholder { color: var(--tsu-muted); }
input:hover, select:hover, textarea:hover { border-color: var(--tsu-muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--tsu-focus); box-shadow: 0 0 0 3px var(--tsu-focus-ring); }
.filters select { background-image: var(--tsu-select-chevron); }
.check input, .form input[type=checkbox] { accent-color: var(--tsu-red-fill); }

/* ── 9. Avvisi, chip ────────────────────────────────────────────────── */
.alert-success { background: var(--tsu-green-soft); }
.alert-warning, .alert-info { background: var(--tsu-amber-soft); }
.alert-danger { background: var(--tsu-red-soft); }
.store-chip { border-color: var(--tsu-border-strong); }
.store-chip.is-past { opacity: 1; color: var(--tsu-muted); border-style: dashed; border-color: var(--tsu-border-strong); } /* opacity .35 dava 2.2:1 */

/* ── 10. Cartine ────────────────────────────────────────────────────── */
.map-legend-bar { background: linear-gradient(90deg, rgba(var(--tsu-red-rgb), var(--tsu-map-alpha-min)), var(--tsu-red)); }

/* ── 11. Calendario (Litepicker) ────────────────────────────────────── */
.litepicker {
    --litepicker-container-months-box-shadow-color: var(--tsu-shadow-tint);
    --litepicker-tooltip-color-bg: var(--tsu-tooltip-bg);
    --litepicker-button-prev-month-color-hover: var(--tsu-red-ink);
    --litepicker-button-next-month-color-hover: var(--tsu-red-ink);
    --litepicker-day-color-hover: var(--tsu-red-ink);
    --litepicker-is-today-color: var(--tsu-red-ink);
    --litepicker-is-in-range-color: var(--tsu-red-soft);
    --litepicker-is-locked-color: var(--tsu-text-disabled);
    --litepicker-is-start-color: var(--tsu-on-accent);
    --litepicker-is-start-color-bg: var(--tsu-red-fill);
    --litepicker-is-end-color: var(--tsu-on-accent);
    --litepicker-is-end-color-bg: var(--tsu-red-fill);
    --litepicker-button-apply-color: var(--tsu-on-accent);
    --litepicker-button-apply-color-bg: var(--tsu-red-fill);
    --litepicker-button-reset-color-hover: var(--tsu-red-ink);
    --litepicker-highlighted-day-color-bg: var(--tsu-panel-2);
}
.litepicker .container__footer .button-cancel { border-color: var(--tsu-border-strong) !important; }
.litepicker .container__footer .button-apply { border-color: var(--tsu-red-fill) !important; }
.litepicker .container__predefined-ranges button:hover { color: var(--tsu-red-ink) !important; background: var(--tsu-panel-2) !important; }
.litepicker .container__tooltip { color: var(--tsu-tooltip-text); border-color: var(--tsu-tooltip-border); }
.litepicker.mobilefriendly .container__predefined-ranges button { border-color: var(--tsu-border-strong) !important; }
@media (max-width: 720px) { .litepicker .container__predefined-ranges button { border-color: var(--tsu-border-strong) !important; } }

/* ── 12. Pagine di accesso ──────────────────────────────────────────── */
.auth-brand { background: var(--tsu-sidebar-bg); }

/* ═══════════════════════════════════════════════════════════════════════
   Sala di controllo SEO: casi, attività, approvazioni, esecuzioni,
   apprendimento. Solo token --tsu-*: valgono per il tema chiaro e scuro.
   ═══════════════════════════════════════════════════════════════════════ */

/* Banner della modalità di autonomia (sempre visibile su queste pagine) */
.mode-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--tsu-panel); border: 1px solid var(--tsu-border); border-left: 3px solid var(--tsu-border-strong); border-radius: var(--radius); }
.mode-banner .mode-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; }
.mode-banner .mode-text span { font: var(--tsu-label); color: var(--tsu-muted); }
.mode-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--tsu-border-strong); }
.mode-observe { border-left-color: var(--tsu-border-strong); }
.mode-propose { border-left-color: var(--tsu-amber); background: var(--tsu-amber-soft); }
.mode-propose .mode-dot { background: var(--tsu-amber); }
.mode-operate { border-left-color: var(--tsu-green); background: var(--tsu-green-soft); }
.mode-operate .mode-dot { background: var(--tsu-green); }
.mode-change { margin-left: auto; }

/* Etichette di stato (pillole) */
.pill { display: inline-flex; align-items: center; min-height: 22px; padding: 1px 8px; font: var(--tsu-label); line-height: 18px; white-space: nowrap; border: 1px solid var(--tsu-border-strong); border-radius: 999px; color: var(--tsu-text); background: var(--tsu-panel); }
.pill-neutral { color: var(--tsu-muted); background: var(--tsu-panel-2); border-color: var(--tsu-border); }
.pill-outline { color: var(--tsu-text); background: transparent; border-style: dashed; }
.pill-red { color: var(--tsu-red-ink); background: var(--tsu-red-soft); border-color: var(--tsu-red-ink); }
.pill-amber { color: var(--tsu-amber); background: var(--tsu-amber-soft); border-color: var(--tsu-amber); }
.pill-green { color: var(--tsu-green); background: var(--tsu-green-soft); border-color: var(--tsu-green); }
.pill-prio { font-weight: 600; min-width: 32px; justify-content: center; }
.pill-lg { font: 600 14px/20px var(--tsu-font); padding: 4px 12px; }

/* Barre 0–100 */
.meter { position: relative; display: inline-block; flex: 1 1 auto; width: 100%; min-width: 48px; height: 8px; border-radius: 4px; background: var(--tsu-panel-2); border: 1px solid var(--tsu-border); overflow: hidden; vertical-align: middle; }
.meter-fill { display: block; height: 100%; background: var(--tsu-border-strong); border-radius: 4px 0 0 4px; }
.meter-accent .meter-fill { background: var(--tsu-red-fill); }
.meter-green .meter-fill { background: var(--tsu-green); }

/* Segmenti con il conteggio (In coda, In indagine…) */
.group-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr)); gap: var(--sp-1); }
.group-tab { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--sp-1) var(--sp-2); color: var(--tsu-text); text-decoration: none; background: var(--tsu-panel); border: 1px solid var(--tsu-border); border-radius: var(--radius); }
.group-tab:hover { border-color: var(--tsu-border-strong); }
.group-tab.is-active { border-color: var(--tsu-red); box-shadow: inset 0 0 0 1px var(--tsu-red); }
.group-count { font: 600 20px/26px var(--tsu-font); font-variant-numeric: tabular-nums; }
.group-label { font: var(--tsu-label); color: var(--tsu-muted); text-transform: uppercase; overflow-wrap: anywhere; }
.group-tab.is-active .group-label { color: var(--tsu-text); }
.group-help { font: var(--tsu-label); margin-top: calc(var(--sp-2) * -1); }
.tab-count-soft { background: var(--tsu-panel-2); color: var(--tsu-text); border: 1px solid var(--tsu-border); }
.nav-count { display: inline-block; min-width: 20px; margin-left: auto; padding: 0 6px; border-radius: 10px; background: var(--tsu-red-fill); color: var(--tsu-on-accent); font: 600 11px/20px var(--tsu-font); text-align: center; }
.nav-link.is-active .nav-count { background: var(--tsu-on-accent); color: var(--tsu-red-ink); }

/* Filtri: sito + menu */
.control-filters { align-items: center; }
.control-filters select { width: auto; min-width: 200px; max-width: 280px; }
.control-filters .check { min-height: var(--control-h); }

/* Schede di casi e attività */
.case-card, .task-card { min-width: 0; }
.case-card h2, .task-card h2 { overflow-wrap: anywhere; }
.entity-key { overflow-wrap: anywhere; margin-top: calc(var(--sp-1) * -1); }
.entity-key .label { margin-right: 6px; }
.url-link { overflow-wrap: anywhere; word-break: break-word; }
.kpi-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--sp-1) var(--sp-2); margin: 0; }
.kpi-lines > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 6px var(--sp-2); background: var(--tsu-panel-2); border-radius: var(--radius); }
.kpi-lines dt { font: var(--tsu-label); color: var(--tsu-muted); }
.kpi-lines dd { margin: 0; font: 500 14px/20px var(--tsu-font); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.case-scores { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--sp-2) var(--sp-4); }
.score-line { display: grid; grid-template-columns: minmax(0, 1fr) 36px; grid-template-areas: "label label" "bar num"; align-items: center; gap: 4px var(--sp-1); min-width: 0; }
.score-line .label { grid-area: label; }
.score-line .meter { grid-area: bar; }
.score-num { grid-area: num; text-align: right; font-variant-numeric: tabular-nums; }
.task-card.task-p0 { border-left-color: var(--tsu-red); }
.task-card.task-p1 { border-left-color: var(--tsu-amber); }
.task-card.task-p2, .task-card.task-p3 { border-left-color: var(--tsu-border-strong); }
.task-why { overflow-wrap: anywhere; }
.task-meta { margin: 0; }
.task-meta a { color: var(--tsu-text); }
.lint-summary { margin: 0; font: var(--tsu-label); }
.lint-summary.lint-block { color: var(--tsu-red-ink); }
.lint-summary.lint-warn { color: var(--tsu-amber); }
.task-actions { align-items: flex-start; }
.task-actions form { margin: 0; }
.reject-box { flex: 1 1 auto; min-width: 0; }
.reject-box > summary { list-style: none; display: inline-flex; }
.reject-box > summary::-webkit-details-marker { display: none; }
.reject-box[open] > summary { margin-bottom: var(--sp-1); }
.reject-form { display: flex; flex-direction: column; gap: var(--sp-1); max-width: 520px; }
.reject-form textarea, .mark-done input, .confirm-form input, .edit-form input { text-align: left; }
.reject-form .btn { align-self: flex-start; }

/* Pagine di dettaglio */
.control-detail .agent-main > .card, .control-detail .agent-side > .card { min-width: 0; }
.card-title-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-2); }
.explain { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.explain p { overflow-wrap: anywhere; }
.kpi-lines-full { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.signal-list .label { display: block; margin-bottom: 4px; }
.plain-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; overflow-wrap: anywhere; }
.kv-mini { display: grid; gap: 6px; margin: 0; min-width: 0; }
.kv-mini > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-2); padding-top: 6px; border-top: 1px solid var(--tsu-border); }
.kv-mini > div:first-child { border-top: 0; padding-top: 0; }
.kv-mini dt { font: var(--tsu-label); color: var(--tsu-muted); }
.kv-mini dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kv-mini .kv-mini > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.is-changed { color: var(--tsu-text); font-weight: 500; }
td.is-changed { background: var(--tsu-green-soft); }
.compare-table th[scope=row] { font: var(--tsu-label); color: var(--tsu-muted); white-space: normal; min-width: 96px; }
.compare-table .text-cell { min-width: 180px; padding-top: 8px; padding-bottom: 8px; overflow-wrap: anywhere; }
.link-list { margin: 0; padding-left: 20px; display: grid; gap: var(--sp-2); overflow-wrap: anywhere; }
.edit-box > summary { list-style: none; display: inline-flex; }
.edit-box > summary::-webkit-details-marker { display: none; }
.edit-box[open] > summary { margin-bottom: var(--sp-2); }
.edit-form { gap: var(--sp-3); }
.length-meter.is-out { color: var(--tsu-amber); }
.length-meter.is-ok { color: var(--tsu-green); }
.lint-ok { color: var(--tsu-green); }
.lint-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.lint-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sp-1); padding: var(--sp-1) var(--sp-2); border-radius: var(--radius); background: var(--tsu-panel-2); border-left: 3px solid var(--tsu-amber); }
.lint-item.lint-block { border-left-color: var(--tsu-red); }
.lint-msg { flex: 1 1 100%; overflow-wrap: anywhere; }
.card-note { padding: var(--sp-2) var(--sp-3) var(--sp-3); margin: 0; }
.measure-table td { padding-top: 8px; padding-bottom: 8px; }
.status-card .btn { align-self: flex-start; }
.status-card form { margin: 0; }
.mark-done { gap: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--tsu-border); }
.mark-done input[type=date] { width: 100%; min-height: var(--control-h); padding: var(--sp-2); font: 500 14px/20px var(--tsu-font); color: var(--tsu-text); background: var(--tsu-input-bg); border: 1px solid var(--tsu-border-strong); border-radius: var(--radius); }
.investigate-form { gap: var(--sp-2); }
.investigate-form .btn { align-self: flex-start; }
.investigate-form select { text-align: left; }

/* Diario e storia */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline-item { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-1) 0 var(--sp-1) var(--sp-3); border-left: 2px solid var(--tsu-border); position: relative; min-width: 0; }
.timeline-item::before { content: ""; position: absolute; left: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--tsu-panel); border: 2px solid var(--tsu-border-strong); }
.timeline-item.tone-green::before { border-color: var(--tsu-green); background: var(--tsu-green-soft); }
.timeline-item.tone-red::before { border-color: var(--tsu-red-ink); background: var(--tsu-red-soft); }
.timeline-item.tone-amber::before { border-color: var(--tsu-amber); background: var(--tsu-amber-soft); }
.timeline-item strong { overflow-wrap: anywhere; }
.timeline-detail { font: var(--tsu-label); color: var(--tsu-muted); overflow-wrap: anywhere; }

/* Regole del playbook */
.rule-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rule-list li { overflow-wrap: anywhere; }
.rule-id { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--tsu-panel-2); border: 1px solid var(--tsu-border); font: 600 12px/20px var(--tsu-mono); color: var(--tsu-text); white-space: nowrap; }
.rule-cell { white-space: normal; min-width: 240px; }

/* Punteggio con le sei componenti */
.score-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--tsu-panel-2); border-radius: var(--radius); }
.score-total { display: flex; align-items: baseline; gap: var(--sp-1); flex-wrap: wrap; }
.score-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.score-parts li { display: grid; grid-template-columns: minmax(0, 1fr) 32px; grid-template-areas: "label value" "bar value" "help help"; align-items: center; gap: 2px var(--sp-1); min-width: 0; }
.score-part-label { grid-area: label; font: var(--tsu-label); }
.score-parts .meter { grid-area: bar; }
.score-part-value { grid-area: value; text-align: right; font: 600 14px/20px var(--tsu-font); font-variant-numeric: tabular-nums; }
.score-part-help { grid-area: help; }
@media (min-width: 760px) {
    .score-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); }
}
.decision-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }

/* Elenchi compatti nella pagina del caso */
.task-mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.task-mini-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--sp-2); padding: var(--sp-1) 0; border-top: 1px solid var(--tsu-border); min-width: 0; }
.task-mini-list li:first-child { border-top: 0; }
.task-mini-list a { color: var(--tsu-text); overflow-wrap: anywhere; min-width: 0; }
.task-mini-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.run-mini-list li { overflow-wrap: anywhere; }
.runs-table .run-detail { min-width: 220px; white-space: normal; padding-top: 8px; padding-bottom: 8px; }
.runs-table td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
.rate-cell { display: flex; align-items: center; gap: var(--sp-1); min-width: 120px; }
.rate-cell .meter { max-width: 120px; }

/* Imbuto dell'apprendimento */
.funnel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: var(--sp-1); counter-reset: none; }
.funnel li { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2); background: var(--tsu-panel-2); border-radius: var(--radius); border-top: 3px solid var(--tsu-border-strong); min-width: 0; }
.funnel li:last-child { border-top-color: var(--tsu-green); }
.funnel-n { font: var(--tsu-score); font-variant-numeric: tabular-nums; }
.funnel-label { font: var(--tsu-label); color: var(--tsu-muted); }

/* Secondo passaggio */
.confirm-card { max-width: 760px; }
.confirm-form { gap: var(--sp-3); }
.input-confirm { font: 600 18px/24px var(--tsu-mono) !important; letter-spacing: .2em; text-transform: uppercase; max-width: 280px; }
.confirm-form .form-actions { justify-content: flex-start; }
.linked-case { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sp-1); overflow-wrap: anywhere; }

/* Legende richiudibili */
details.legend > summary { cursor: pointer; list-style: none; }
details.legend > summary::-webkit-details-marker { display: none; }
details.legend > summary h2 { display: inline; margin: 0; }
details.legend > summary h2::after { content: " +"; color: var(--tsu-muted); }
details.legend[open] > summary h2::after { content: " −"; }

@media (max-width: 900px) {
    .control-filters { width: 100%; }
    .control-filters > .filters { width: 100%; }
    .control-filters select { width: 100%; max-width: none; min-width: 0; }
    .kpi-lines, .kpi-lines-full { grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); }
    .group-tab { padding: 6px var(--sp-1); }
    .group-count { font-size: 18px; line-height: 24px; }
    .mode-change { margin-left: 0; }
    .kv-mini > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .compare-table .text-cell { min-width: 160px; }
    .task-mini-list li { flex-direction: column; align-items: flex-start; }
}

/* Schede SEO: tre sole (Andamento, Proposte, Risultati), subito sotto il titolo. In Andamento, sotto le schede,
   tre link di testo più piccoli delle schede (quali numeri), una riga che dice cosa si guarda, poi sito e periodo */
.seo-subnav { display: flex; flex-wrap: wrap; gap: 4px var(--sp-3); margin-top: calc(var(--sp-2) * -1); }
.seo-sublink { display: inline-flex; align-items: center; min-height: 32px; font: var(--tsu-body); color: var(--tsu-muted); text-decoration: none; border-bottom: 2px solid transparent; }
.seo-sublink:hover { color: var(--tsu-text); }
.seo-sublink.is-active { color: var(--tsu-text); font-weight: 600; border-bottom-color: var(--tsu-text); }
.seo-intro { margin: calc(var(--sp-2) * -1) 0 0; color: var(--tsu-muted); max-width: 720px; }
.seo-subnav + .seo-intro { margin-top: calc(var(--sp-3) * -1); }
.seo-period { margin: calc(var(--sp-2) * -1) 0 0; font: var(--tsu-label); color: var(--tsu-muted); }
.label-hint { text-transform: none; font-weight: 400; }
/* Numeri principali: sul telefono due per riga, così si vedono tutti insieme */
@media (max-width: 600px) {
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
    .stat-grid .stat { padding: var(--sp-2); min-width: 0; }
    .stat-grid .stat-value { font-size: 24px; line-height: 32px; overflow-wrap: anywhere; }
    .stat-grid .stat-delta { white-space: normal; }
    .stat-grid .stat-delta .muted { display: block; }
}
.delta-arrow { font-size: 10px; }
/* Pagine chiamate per nome (titolo vero o parole dell'indirizzo), con l'indirizzo piccolo sotto */
.page-ref { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; vertical-align: top; }
.page-name { color: var(--tsu-text); overflow-wrap: anywhere; }
a.page-name { text-decoration: underline; text-decoration-color: var(--tsu-border-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.page-name:hover { text-decoration-color: currentColor; }
.page-url { font: var(--tsu-label); color: var(--tsu-muted); overflow-wrap: anywhere; word-break: break-word; }
/* Pagine da unire: quale resta e chi arriva lì, in una riga; sotto gli indirizzi */
.merge-line { margin: 0; overflow-wrap: anywhere; }
.page-urls { list-style: none; margin: calc(var(--sp-1) * -1) 0 0; padding: 0; display: grid; gap: 4px; font: var(--tsu-label); color: var(--tsu-muted); }
.page-urls .url-link { color: var(--tsu-muted); }
/* Tabelle sul telefono: le colonne col-wide si nascondono, così nessuna resta tagliata; nelle tabelle di ricerche
   e pagine (table-phone-short: nome, clic e Δ) il nome va a capo invece di finire con i puntini */
@media (max-width: 600px) {
    .table .col-wide { display: none; }
    .table-phone-short .key { max-width: none; white-space: normal; overflow-wrap: anywhere; }
}
/* Pagine tecniche: dove ci si trova; in fondo alle pagine SEO, il link per gli amministratori */
.tech-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: calc(var(--sp-2) * -1); font: var(--tsu-label); color: var(--tsu-muted); }
.tech-crumb a { color: var(--tsu-muted); }
.tech-crumb a:hover { color: var(--tsu-text); }
.tech-footer { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--tsu-border); font: var(--tsu-label); }
.tech-footer a { color: var(--tsu-muted); }
.tech-footer a:hover { color: var(--tsu-text); }
.tech-pages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--sp-3); }
.tech-page { height: 100%; gap: var(--sp-1); }
.tech-page h2 { display: flex; align-items: center; gap: 6px; }
.run-mini-list { list-style: none; padding-left: 0; }
.investigate-form select, .status-card select { text-align: left; padding-right: 32px; appearance: none; background-image: var(--tsu-select-chevron); background-repeat: no-repeat; background-position: right 12px center; }
/* Telefono: subito dopo l'intestazione la scheda con le azioni (approva, indaga…), poi il resto */
@media (max-width: 1000px) {
    .control-detail { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); }
    .control-detail .card { min-width: 0; max-width: 100%; }
    .control-detail > .agent-main, .control-detail > .agent-side { display: contents; }
    .control-detail .detail-head { order: -2; }
    .control-detail .status-card { order: -1; }
}
/* Telefono: il confronto "oggi / proposta" diventa una pila, senza scorrimento orizzontale */
@media (max-width: 600px) {
    .table.compare-table thead { display: none; }
    .table.compare-table, .table.compare-table tbody, .table.compare-table tr, .table.compare-table tbody th, .table.compare-table tbody td { display: block; width: auto; height: auto; }
    .table.compare-table tr + tr { border-top: 1px solid var(--tsu-border); }
    .table.compare-table tbody th[scope=row] { padding: var(--sp-2) var(--sp-2) 0; border-top: 0; background: var(--tsu-panel); }
    .table.compare-table tbody td { border-top: 0; padding: 4px var(--sp-2) var(--sp-1); min-width: 0; }
    .table.compare-table tbody td::before { content: attr(data-label); display: block; font: var(--tsu-label); color: var(--tsu-muted); text-transform: uppercase; }
}
/* Scheda prodotto per campo, lista di controllo del passaggio a mano, valori precedenti */
.html-preview { max-height: 22rem; overflow: auto; padding: var(--sp-1) var(--sp-2); background: var(--tsu-panel); border: 1px solid var(--tsu-border); border-radius: var(--radius); font-weight: 400; overflow-wrap: anywhere; }
.html-preview > :first-child { margin-top: 0; }
.html-preview > :last-child { margin-bottom: 0; }
.html-preview h2, .html-preview h3 { font: 600 14px/20px var(--tsu-font); margin: var(--sp-2) 0 4px; }
.html-preview p, .html-preview ul, .html-preview ol { margin: 0 0 var(--sp-1); }
.html-preview table { display: block; max-width: 100%; overflow-x: auto; }
.product-compare .text-cell { vertical-align: top; }
.field-why { margin: 6px 0 0; font-weight: 400; }
.faq-list { margin: 0; padding-left: 20px; display: grid; gap: var(--sp-2); overflow-wrap: anywhere; }
.faq-list .html-preview { margin-top: 4px; }
.faq-edit { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; padding: var(--sp-2); border: 1px solid var(--tsu-border); border-radius: var(--radius); min-width: 0; }
.input-code { font: 13px/18px var(--tsu-mono) !important; text-align: left; }
.checklist { margin: 0; padding-left: 22px; display: grid; gap: var(--sp-2); }
.checklist li { min-width: 0; }
.step-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.export-links { color: var(--tsu-muted); }
.long-value > summary { cursor: pointer; overflow-wrap: anywhere; }
.pre-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 18rem; overflow: auto; margin-top: 4px; padding: var(--sp-1) var(--sp-2); background: var(--tsu-panel-2); border-radius: var(--radius); font: 12px/18px var(--tsu-mono); }
.mark-done .check { color: var(--tsu-text); }
.product-compare tbody th[scope=row] { vertical-align: top; padding-top: 10px; }
/* Frasi che fanno scattare una regola dei claim nelle anteprime (claims_highlight) */
.html-preview mark.claim { color: var(--tsu-text); background: var(--tsu-amber-soft); border-bottom: 2px solid var(--tsu-amber); padding: 0 1px; }
.html-preview mark.claim--block { background: var(--tsu-red-soft); border-bottom-color: var(--tsu-red-ink); }

/* Contenuti strumenti: calendario, inventario, confronti, autori, Impostazioni › Claims. Solo token --tsu-* */
.field-error { font: var(--tsu-label); color: var(--tsu-red-ink); }
.has-error input, .has-error textarea, .has-error select { border-color: var(--tsu-red-ink); }
.input-mono { font: 13px/19px var(--tsu-mono) !important; text-align: left !important; }
.input-short { max-width: 200px; text-align: left; }
.input-date { width: 100%; max-width: 240px; min-height: var(--control-h); padding: var(--sp-2); font: 500 14px/20px var(--tsu-font); color: var(--tsu-text); background: var(--tsu-input-bg); border: 1px solid var(--tsu-border-strong); border-radius: var(--radius); }
:is(.author-form, .rule-form, .cmp-form, .claim-test-form, .inv-propose-form, .confirm-form) :is(textarea, input[type=text]) { text-align: left; }
:is(.author-form, .rule-form, .cmp-form, .claim-test-form, .confirm-form) select { text-align: left; padding-right: 32px; appearance: none; background-image: var(--tsu-select-chevron); background-repeat: no-repeat; background-position: right 12px center; }
.eeat-note { padding: var(--sp-2) var(--sp-3); background: var(--tsu-panel); border: 1px solid var(--tsu-border); border-left: 3px solid var(--tsu-green); border-radius: var(--radius); overflow-wrap: anywhere; }
.card-flush > .card-note { padding: var(--sp-3); }

/* Tabelle che su telefono diventano schede: una riga = un blocco, etichetta sopra il valore.
   .stack-wide: tabelle larghe (inventario, regole dei claims) che si impilano già sotto i 1100 px */
@media (max-width: 760px) {
    .table.stack-table thead { display: none; }
    .table.stack-table, .table.stack-table tbody, .table.stack-table tr, .table.stack-table td { display: block; width: auto; height: auto; }
    .table.stack-table tr { padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--tsu-border); background: var(--tsu-panel); }
    .table.stack-table tbody tr:first-child { border-top: 0; }
    .table.stack-table tbody td { border-top: 0; padding: 2px 0; text-align: left; white-space: normal; }
    .table.stack-table td[data-label] { display: grid; grid-template-columns: minmax(96px, 40%) minmax(0, 1fr); gap: var(--sp-1); align-items: baseline; }
    .table.stack-table td[data-label]::before { content: attr(data-label); font: var(--tsu-label); color: var(--tsu-muted); text-transform: uppercase; }
    .table.stack-table td[data-label] > * { grid-column: 2; min-width: 0; }
    .table.stack-table td.actions { text-align: left; padding-top: var(--sp-1); }
}
@media (min-width: 761px) and (max-width: 1100px) {
    .table.stack-wide thead { display: none; }
    .table.stack-wide, .table.stack-wide tbody, .table.stack-wide tr, .table.stack-wide td { display: block; width: auto; height: auto; }
    .table.stack-wide tr { padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--tsu-border); background: var(--tsu-panel); }
    .table.stack-wide tbody tr:first-child { border-top: 0; }
    .table.stack-wide tbody td, .table.stack-wide tbody td:first-child { border-top: 0; padding: 2px 0; text-align: left; white-space: normal; min-width: 0; max-width: none; }
    .table.stack-wide td[data-label] { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--sp-1); align-items: baseline; }
    .table.stack-wide td[data-label]::before { content: attr(data-label); font: var(--tsu-label); color: var(--tsu-muted); text-transform: uppercase; }
    .table.stack-wide td[data-label] > * { grid-column: 2; min-width: 0; }
    .table.stack-wide td.actions { text-align: left; padding-top: var(--sp-1); width: auto; }
    .table.stack-wide .rule-edit-row > td { padding: var(--sp-2) 0; background: transparent; }
}

/* Più elementi nella stessa cella (pillole, modello e sforzo) */
.cell-list { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }

/* Inventario */
.flag-filters { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.flag-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; font: var(--tsu-label); color: var(--tsu-text); text-decoration: none; background: var(--tsu-panel); border: 1px solid var(--tsu-border); border-radius: 999px; }
.flag-chip:hover { border-color: var(--tsu-border-strong); }
.flag-chip.is-active { border-color: var(--tsu-red); box-shadow: inset 0 0 0 1px var(--tsu-red); }
.flag-count { font-variant-numeric: tabular-nums; color: var(--tsu-muted); }
.flag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tsu-border-strong); }
.flag-dot-red { background: var(--tsu-red-ink); }
.flag-dot-amber { background: var(--tsu-amber); }
.flag-dot-green { background: var(--tsu-green); }
.inventory-head { align-items: flex-start; }
.inventory-head p { margin-top: 2px; }
.inventory-table td { padding-top: 10px; padding-bottom: 10px; height: auto; vertical-align: top; }
.table.inventory-table th, .table.inventory-table td { padding-left: 10px; padding-right: 10px; }
.table.inventory-table th:first-child, .table.inventory-table td:first-child { padding-left: var(--sp-3); }
.inv-article { width: 36%; min-width: 220px; max-width: 420px; }
.inv-title { display: block; color: var(--tsu-text); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.inv-title:hover { text-decoration: underline; }
.inv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-1); margin-top: 4px; }
/* L'indirizzo non allarga la colonna: una riga con i puntini (width 0 + min-width 100%) */
.inv-article .url-link { display: block; margin-top: 2px; width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.inv-flags { min-width: 140px; }
.table .inv-actions { width: 124px; white-space: normal; }
.inv-actions .btn { white-space: normal; line-height: 16px; text-align: center; }
.inv-actions > a, .inv-actions > span { display: inline-block; max-width: 124px; overflow-wrap: anywhere; }
.inv-propose > summary { list-style: none; display: inline-flex; }
.inv-propose > summary::-webkit-details-marker { display: none; }
.inv-propose[open] > summary { margin-bottom: var(--sp-1); }
.inv-propose-form { display: flex; flex-direction: column; gap: 6px; min-width: 220px; max-width: 320px; margin-left: auto; text-align: left; white-space: normal; }
.inv-propose-form .btn { align-self: flex-start; }
.product-claims { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.product-claims > li { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-2) 0; border-top: 1px solid var(--tsu-border); min-width: 0; }
.product-claims > li:first-child { border-top: 0; padding-top: 0; }
.product-claims-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-2); overflow-wrap: anywhere; }
.product-claims-head a { color: var(--tsu-text); }
.product-claims-link { margin: 0; }
.product-claims-link a { color: var(--tsu-text); }
@media (max-width: 760px) {
    .table.stack-table.inventory-table td, .table.stack-table.inventory-table td:first-child { padding-left: 0; padding-right: 0; }
    .inv-article { min-width: 0; max-width: none; padding-bottom: var(--sp-1) !important; }
    .inv-flags { min-width: 0; }
    .table .inv-actions { width: auto; }
    .inv-actions > a, .inv-actions > span { max-width: none; }
    .inv-propose-form { margin-left: 0; max-width: none; }
}

/* Calendario */
.cal-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cal-stats .stat { gap: 4px; min-width: 0; }
.cal-warnings ul { margin-top: 4px; color: var(--tsu-text); }
.cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cal-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: start; gap: var(--sp-2); padding: var(--sp-2) 0; border-top: 1px solid var(--tsu-border); min-width: 0; }
.cal-item:first-child { border-top: 0; padding-top: 0; }
.cal-date { display: flex; flex-direction: column; align-items: center; padding: 4px 0; background: var(--tsu-panel-2); border-radius: var(--radius); border-top: 3px solid var(--tsu-border-strong); }
.cal-proposed .cal-date { border-top-color: var(--tsu-amber); }
.cal-scheduled .cal-date { border-top-color: var(--tsu-green); }
.cal-blocked .cal-date { border-top-color: var(--tsu-red-ink); }
.cal-weekday { font: var(--tsu-label); color: var(--tsu-muted); text-transform: uppercase; }
.cal-day { font: 600 14px/20px var(--tsu-font); font-variant-numeric: tabular-nums; }
.cal-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-1); }
.cal-title { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.cal-title a { color: var(--tsu-text); }
.cal-reason { margin: 0; overflow-wrap: anywhere; }
.cal-action { white-space: nowrap; }
.cal-caps td { height: auto; padding-top: 10px; padding-bottom: 10px; }
.cal-lane { min-width: 200px; }
.cal-waiting { display: block; margin-top: 2px; white-space: normal; }
.cap-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 96px; }
.cap-cell .meter { width: 96px; }
.cap-cell.is-full .cap-text { color: var(--tsu-red-ink); font-weight: 600; }
@media (max-width: 760px) {
    .cal-stats { gap: var(--sp-1); }
    .cal-stats .stat { padding: var(--sp-2); }
    .cal-stats .stat-value { font-size: 24px; line-height: 32px; }
    .cal-stats .stat .label { overflow-wrap: anywhere; }
    .cal-stats .stat > .muted { display: none; }
    .cal-item { grid-template-columns: 48px minmax(0, 1fr); }
    .cal-action { grid-column: 2; justify-self: start; }
    .cap-cell { align-items: flex-start; }
}

/* Confronti */
.cmp-start { border-top: 1px solid var(--tsu-border); padding-top: var(--sp-2); }
.cmp-start:first-of-type { border-top: 0; padding-top: 0; }
.cmp-start > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sp-2); }
.cmp-start > summary::-webkit-details-marker { display: none; }
.cmp-start > summary strong::before { content: "+ "; color: var(--tsu-muted); }
.cmp-start[open] > summary strong::before { content: "− "; }
.cmp-start[open] > summary { margin-bottom: var(--sp-2); }
.cmp-empty { margin: 0; }
.cmp-form { gap: var(--sp-3); }
.cmp-sides-form { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--sp-2); }
.cmp-side-fields { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2); background: var(--tsu-panel-2); border-radius: var(--radius); min-width: 0; }
.cmp-side-label { font: 600 12px/17px var(--tsu-font); text-transform: uppercase; }
.cmp-form .form-actions { justify-content: flex-start; }
.cmp-table td { height: auto; padding-top: 10px; padding-bottom: 10px; vertical-align: top; }
.cmp-what { min-width: 220px; }
.cmp-ref { display: block; margin-top: 2px; }
.cmp-what a { color: var(--tsu-text); }
.cmp-what .muted { overflow-wrap: anywhere; }
.cmp-model { font-family: var(--tsu-mono); font-size: 13px; overflow-wrap: anywhere; }
.cmp-winner { background: var(--tsu-green-soft); }
.cmp-detail { table-layout: fixed; }
.cmp-detail thead th:first-child { width: 24%; }
.cmp-detail tbody th[scope=row] { vertical-align: top; padding-top: 10px; overflow-wrap: anywhere; }
.cmp-detail td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; height: auto; }
.cmp-score { font: 600 20px/26px var(--tsu-font); font-variant-numeric: tabular-nums; }
.cmp-reviewer { display: block; margin-top: 2px; }
.cmp-crit { max-width: 240px; }
.cmp-choose-actions { justify-content: flex-start; flex-wrap: wrap; }
.cmp-choose-actions .btn { min-width: 0; overflow-wrap: anywhere; }
.cmp-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--sp-3); }
.cmp-preview > summary { list-style: none; display: inline-flex; }
.cmp-preview > summary::-webkit-details-marker { display: none; }
.cmp-preview[open] > summary { margin-bottom: var(--sp-1); }
.cmp-preview .html-preview { max-height: 32rem; }
.cmp-diff { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cmp-diff li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--sp-1); align-items: baseline; padding: 4px var(--sp-1); border-radius: var(--radius); overflow-wrap: anywhere; }
.diff-a { background: var(--tsu-red-soft); }
.diff-b { background: var(--tsu-green-soft); }
.diff-same { color: var(--tsu-muted); }
.diff-skip { display: block !important; text-align: center; }
.diff-mark { font: 600 12px/18px var(--tsu-mono); text-align: center; }
.diff-a .diff-mark { color: var(--tsu-red-ink); }
.diff-b .diff-mark { color: var(--tsu-green); }
.diff-heading { font-weight: 600; }

/* Autori */
.author-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.author-item { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3) 0; border-top: 1px solid var(--tsu-border); min-width: 0; scroll-margin-top: 80px; }
.author-item:first-child { border-top: 0; padding-top: 0; }
.author-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-1); }
.author-name { font: 600 16px/22px var(--tsu-font); }
.author-credentials, .author-bio { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.author-credentials { font-weight: 500; }
.author-item .inline-actions form { margin: 0; }
.author-form { max-width: 720px; gap: var(--sp-3); }
.author-verify { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); padding-top: var(--sp-2); border-top: 1px solid var(--tsu-border); }

/* Impostazioni › Claims */
.claim-test-form { gap: var(--sp-2); }
.claim-test-actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0; }
.claim-test-actions select { width: auto; min-width: 200px; }
.claim-test-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--sp-2); align-items: start; }
.claim-test-lang { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: var(--sp-2); background: var(--tsu-panel-2); border-radius: var(--radius); }
.claim-test-lang .lint-item { background: var(--tsu-panel); }
.rule-new > summary { cursor: pointer; list-style: none; }
.rule-new > summary::-webkit-details-marker { display: none; }
.rule-new > summary h2 { display: inline; }
.rule-new > summary h2::after { content: " +"; color: var(--tsu-muted); }
.rule-new[open] > summary h2::after { content: " −"; }
.rules-head { align-items: flex-start; }
.rule-filters select { width: auto; min-width: 160px; }
.rule-filters input[type=search] { width: auto; min-width: 180px; min-height: 32px; padding: 6px 12px; text-align: left; }
.rules-table td { height: auto; padding-top: 10px; padding-bottom: 10px; vertical-align: top; }
.rule-row { scroll-margin-top: 80px; }
.rule-code { white-space: nowrap; }
.rule-sub { display: block; margin-top: 4px; white-space: normal; }
.rule-severity { min-width: 120px; }
.rule-pattern { width: 34%; min-width: 220px; }
.rule-pattern code { font-size: 12px; overflow-wrap: anywhere; word-break: break-all; }
.rule-replacement { width: 30%; min-width: 180px; overflow-wrap: anywhere; }
.rule-edit-row:not(:target):not(.is-open) { display: none; }
.rule-edit-row > td { background: var(--tsu-panel-2); padding: var(--sp-3); }
.rule-form { gap: var(--sp-3); max-width: 900px; }
.rule-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--sp-2); }
.rule-langs { border: 0; margin: 0; padding: 0; }
.rule-langs legend { padding: 0; margin-bottom: var(--sp-1); }
.import-form { gap: var(--sp-2); }
.import-form input[type=file] { font: var(--tsu-body); color: var(--tsu-text); max-width: 100%; }
.import-form .form-actions { justify-content: flex-start; flex-wrap: wrap; }
.wording-filters { justify-content: space-between; }
.wording-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.wording-item { gap: var(--sp-1); scroll-margin-top: 80px; }
.wording-ingredient { font: 600 16px/22px var(--tsu-font); }
.wording-text { overflow-wrap: anywhere; }
.wording-verify { margin: 0; }
@media (max-width: 760px) {
    .rule-pattern, .rule-replacement, .rule-severity { width: auto; min-width: 0; }
    .rule-edit-row > td { padding: var(--sp-2) 0 !important; background: transparent; }
    .rule-filters, .rule-filters select, .rule-filters input[type=search] { width: 100%; min-width: 0; }
    .claim-test-actions select { flex: 1 1 auto; min-width: 0; }
}
/* Confronto su telefono: i due lati restano affiancati sotto il nome della riga */
@media (max-width: 600px) {
    .table.compare-table.cmp-detail tbody tr { display: flex; flex-wrap: wrap; }
    .table.compare-table.cmp-detail tbody th[scope=row] { flex: 0 0 100%; }
    .table.compare-table.cmp-detail tbody td { flex: 0 0 50%; width: 50%; min-width: 0; padding-right: var(--sp-1); }
    .cmp-crit { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Contenuti: redazione, approvazioni, brief, articoli.
   Solo token --tsu-*: valgono per il tema chiaro e scuro.
   ═══════════════════════════════════════════════════════════════════════ */

/* Sito e lingua in una pillola compatta */
.lang-chip { display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; font: 600 11px/18px var(--tsu-font); letter-spacing: .02em; color: var(--tsu-text); background: var(--tsu-panel-2); border: 1px solid var(--tsu-border); border-radius: 4px; white-space: nowrap; }

/* Prerequisiti che bloccano la pubblicazione */
.content-blockers { gap: var(--sp-2); border-left: 3px solid var(--tsu-red-ink); }
.blocker-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.blocker { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sp-1); min-width: 0; }
.blocker-text { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }

/* Schede in testa alla bacheca */
.content-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--sp-3); }
.content-stat { gap: var(--sp-1); min-width: 0; }
.content-stat .stat-value { font-variant-numeric: tabular-nums; }
.content-stat a { color: var(--tsu-text); }
.content-stat .meter { flex: none; }
.cap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cap-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 40px; align-items: center; gap: var(--sp-1); }
.cap-site { font: var(--tsu-label); white-space: nowrap; }
.cap-num { font: 600 13px/18px var(--tsu-font); text-align: right; font-variant-numeric: tabular-nums; }
.mode-card { border-left: 3px solid var(--tsu-border-strong); }
.mode-card p { margin: 0; }

/* Filtri della bacheca: sito e lingua */
.board-filters { gap: var(--sp-2); }
.lang-toggle .btn { min-width: 52px; }

/* Bacheca: colonne a griglia, si impilano sul telefono */
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--sp-3); align-items: start; }
.board-col { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; padding: var(--sp-2); background: var(--tsu-panel); border: 1px solid var(--tsu-border); border-top: 3px solid var(--tsu-border-strong); border-radius: var(--radius); }
.board-ready, .board-briefs { border-top-color: var(--tsu-amber); }
.board-draft_on_site { border-top-color: var(--tsu-amber); }
.board-scheduled, .board-live { border-top-color: var(--tsu-green); }
.board-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-1); }
.board-col-head h2 { font: 600 14px/20px var(--tsu-font); text-transform: uppercase; letter-spacing: .02em; }
.board-count { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 11px; background: var(--tsu-panel-2); border: 1px solid var(--tsu-border); font: 600 12px/20px var(--tsu-font); text-align: center; font-variant-numeric: tabular-nums; }
.board-count.is-zero { color: var(--tsu-muted); }
.board-help { margin: 0; }
.board-empty { margin: 0; padding: var(--sp-1) 0; }
.board-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.board-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: var(--sp-1); background: var(--tsu-panel-2); border: 1px solid var(--tsu-border); border-radius: var(--radius); }
.board-item.is-legal { border-left: 3px solid var(--tsu-amber); }
.board-title { font: 500 14px/19px var(--tsu-font); color: var(--tsu-text); text-decoration: none; overflow-wrap: anywhere; }
a.board-title:hover { text-decoration: underline; }
.board-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font: var(--tsu-label); }
.board-more { color: var(--tsu-muted); }
.content-empty { align-items: stretch; text-align: left; }
.content-empty h2, .content-empty > p { text-align: center; }
.flow-steps { margin: 0 auto; padding-left: 22px; display: grid; gap: var(--sp-2); max-width: 680px; }
.flow-steps li { overflow-wrap: anywhere; }

/* Redazione: «Altro» nelle schede (brief, inventario, confronti, autori) */
.content-tabs { overflow: visible; }
.tab-more { position: relative; flex: 0 0 auto; }
.tab-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.tab-more > summary::-webkit-details-marker { display: none; }
.tab-more > summary .icon { width: 14px; height: 14px; margin: 0; transition: transform .12s; }
.tab-more[open] > summary .icon { transform: rotate(180deg); }
.tab-more-panel {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; width: min(300px, calc(100vw - 32px));
    display: flex; flex-direction: column; padding: 4px;
    background: var(--tsu-panel); border: 1px solid var(--tsu-border); border-radius: var(--radius); box-shadow: var(--tsu-shadow-menu);
}
.tab-more-link { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-1) var(--sp-2); color: var(--tsu-text); text-decoration: none; border-radius: 4px; }
.tab-more-link span { font: var(--tsu-label); color: var(--tsu-muted); }
.tab-more-link:hover, .tab-more-link.is-active { background: var(--tsu-panel-2); }
.tab-more-link.is-active strong { color: var(--tsu-red-ink); }

/* «Da fare» e «Proposte»: una voce per scheda, il perché in una riga, un solo pulsante principale */
.queue-title { display: flex; align-items: center; gap: var(--sp-1); }
.todo-section { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; max-width: 920px; }
.todo-list { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; max-width: 920px; }
.todo-card { gap: var(--sp-1); min-width: 0; border-left: 3px solid var(--tsu-border-strong); }
.todo-card.is-urgent { border-left-color: var(--tsu-red); }
.todo-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.todo-title { font: 600 16px/22px var(--tsu-font); overflow-wrap: anywhere; }
.todo-title a { color: inherit; text-decoration: none; }
.todo-title a:hover { text-decoration: underline; }
.todo-why { margin: 0; overflow-wrap: anywhere; }
.todo-note { margin: 0; font: var(--tsu-label); color: var(--tsu-muted); }
.todo-effect { margin: 0; padding: var(--sp-1) var(--sp-2); background: var(--tsu-panel-2); border-radius: var(--radius); overflow-wrap: anywhere; }
.todo-goal { margin: 0; overflow-wrap: anywhere; }
.todo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); margin-top: 4px; }
.todo-actions form { margin: 0; }
.todo-secondary { font: var(--tsu-body); color: var(--tsu-text); }
/* Elenchi compatti (aspettano altri, proposte in lavorazione): una riga per voce, il titolo porta alla pagina */
.todo-rows { list-style: none; margin: 0; padding: 0; gap: 0; max-width: 920px; }
.todo-row { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--tsu-border); min-width: 0; }
.todo-row:first-child { border-top: 0; }
.todo-row-title { color: var(--tsu-text); font-weight: 500; overflow-wrap: anywhere; }
.todo-row-count { font: 600 12px/17px var(--tsu-font); color: var(--tsu-muted); }
.todo-row-meta, .todo-row-note { font: var(--tsu-label); color: var(--tsu-muted); overflow-wrap: anywhere; }
.todo-row-meta .pill { margin-right: 4px; }
.todo-row-why { overflow-wrap: anywhere; }
.todo-others .todo-row-title { font-weight: 400; }
.todo-fold { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 920px; }
.todo-fold > summary { cursor: pointer; list-style: none; flex-wrap: wrap; font: 600 18px/26px var(--tsu-font); }
.todo-fold > summary::-webkit-details-marker { display: none; }
.todo-fold-hint { font: var(--tsu-label); color: var(--tsu-muted); text-decoration: underline; }
.todo-fold[open] .todo-fold-hint { display: none; }
.todo-fold-alert { font: var(--tsu-label); color: var(--tsu-red-ink); }
.todo-fold[open] > summary { margin-bottom: var(--sp-2); }
/* Schede richiudibili nella pagina di un'attività: dettagli tecnici e storia */
.fold-card > summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1); cursor: pointer; list-style: none; }
.fold-card > summary::-webkit-details-marker { display: none; }
.fold-card > summary h2::after { content: " ›"; color: var(--tsu-muted); }
.fold-card[open] > summary h2::after { content: " ⌄"; }
.fold-card:not([open]) { gap: 0; }
.back-link { color: var(--tsu-muted); }
.proposals-callout { max-width: 920px; }
.todo-empty .todo-activity { display: flex; flex-direction: column; gap: 6px; max-width: 560px; text-align: left; }
.todo-activity ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--sp-2); font: var(--tsu-label); color: var(--tsu-text); text-decoration: none; background: var(--tsu-panel); border: 1px solid var(--tsu-border-strong); border-radius: 999px; }
.filter-chip:hover { background: var(--tsu-panel-2); }
.filter-chip.is-active { background: var(--tsu-red-fill); border-color: var(--tsu-red-fill); color: var(--tsu-on-accent); }
.filter-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.filter-chip.is-active:focus-visible { outline-color: var(--tsu-text); }
@media (max-width: 600px) {
    .todo-card { padding: var(--sp-2) var(--sp-3); }
    /* L'azione principale è la più larga; «Leggi i dettagli» resta un link accanto */
    .todo-actions > .btn, .todo-approve { flex: 1 1 auto; }
    .todo-approve .btn { width: 100%; }
}

/* «Risultati»: esiti in parole e riepilogo */
.outcome-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.outcome-tile { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2); background: var(--tsu-panel-2); border: 1px solid var(--tsu-border); border-top: 3px solid var(--tsu-border-strong); border-radius: var(--radius); }
.outcome-success { border-top-color: var(--tsu-green); }
.outcome-fail { border-top-color: var(--tsu-red); }
.outcome-measuring { border-top-style: dashed; }
.outcome-n { font: var(--tsu-score); font-variant-numeric: tabular-nums; }
.outcome-label { font: var(--tsu-label); color: var(--tsu-muted); }
.type-rates { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.result-list { list-style: none; margin: 0; padding: 0; }
.result-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--sp-2); align-items: start; padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--tsu-border); }
.result-row:first-child { border-top: 0; }
.result-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.result-title { color: var(--tsu-text); font-weight: 500; overflow-wrap: anywhere; }
.result-meta, .result-detail { font: var(--tsu-label); color: var(--tsu-muted); overflow-wrap: anywhere; }
.result-detail:empty { display: none; }
@media (max-width: 600px) {
    .outcome-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .result-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* Panoramica: quante cose aspettano chi entra */
.todo-callout { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); color: inherit; text-decoration: none; border-left: 3px solid var(--tsu-red); }
.todo-callout:hover { border-color: var(--tsu-border-strong); border-left-color: var(--tsu-red); }
.todo-callout-n { font: var(--tsu-score); color: var(--tsu-red-ink); font-variant-numeric: tabular-nums; }
.todo-callout-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.todo-callout .btn { margin-left: auto; }
@media (max-width: 600px) { .todo-callout .btn { flex: 1 1 100%; } }
/* «Da fare»: in cima al menu laterale e, sul telefono, nella barra in alto */
.nav-todo { font-weight: 600; }
.topbar-todo { display: none; color: var(--tsu-text); }
.topbar-todo .nav-count { margin-left: 0; }
@media (max-width: 900px) { .topbar-todo { display: inline-flex; } }

/* Tabelle che sul telefono diventano schede */
.title-cell { min-width: 220px; white-space: normal; padding-top: 8px; padding-bottom: 8px; }
.title-cell a { display: block; color: var(--tsu-text); font-weight: 500; overflow-wrap: anywhere; }
.title-cell .small { display: block; }
.sort-link { color: inherit; text-decoration: none; }
.sort-link.is-sorted, .sort-link:hover { color: var(--tsu-text); }
.article-filters select { text-align: left; padding-right: 32px; appearance: none; background-image: var(--tsu-select-chevron); background-repeat: no-repeat; background-position: right 12px center; }
@media (max-width: 700px) {
    .stack-table thead { display: none; }
    .table.stack-table, .stack-table tbody { display: block; width: auto; }
    /* Ogni riga diventa una scheda: titolo in alto, poi i valori a due a due con l'etichetta sopra */
    .stack-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--sp-2); padding: var(--sp-2); border-top: 1px solid var(--tsu-border); background: var(--tsu-panel); }
    .stack-table tr:first-child { border-top: 0; }
    .table.stack-table tbody td { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; height: auto; padding: 0; border-top: 0; text-align: left; white-space: normal; min-width: 0; background: none; }
    .table.stack-table tbody td::before { content: attr(data-label); font: var(--tsu-label); color: var(--tsu-muted); text-transform: uppercase; }
    .table.stack-table tbody td.title-cell, .table.stack-table tbody td.wide-cell { grid-column: 1 / -1; }
    .table.stack-table tbody td.title-cell { display: block; min-width: 0; }
    .table.stack-table tbody td.title-cell::before { content: none; }
    .stack-table .url-link { max-width: 100%; }
    .article-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Brief */
.kw-primary { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2); background: var(--tsu-panel-2); border-radius: var(--radius); }
.kw-term { font: 600 16px/22px var(--tsu-font); overflow-wrap: anywhere; }
.kw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kw-list li { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; border-top: 1px solid var(--tsu-border); min-width: 0; }
.kw-list li:first-child { border-top: 0; padding-top: 0; }
.kw-list .kw-term { font-size: 14px; }
.gsc-line { font-variant-numeric: tabular-nums; }
.meta-list dd { display: flex; flex-direction: column; gap: 2px; }
.meta-list code { overflow-wrap: anywhere; }
.outline { margin: 0; padding-left: 22px; display: grid; gap: var(--sp-2); }
.outline > li { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.outline-sub { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 2px; }
.claim-flags { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.claim-flag { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-1) var(--sp-2); background: var(--tsu-panel-2); border-left: 3px solid var(--tsu-border-strong); border-radius: var(--radius); overflow-wrap: anywhere; }
.claim-flag-red { border-left-color: var(--tsu-red-ink); }
.claim-flag-yellow { border-left-color: var(--tsu-amber); }
.claim-flag-green { border-left-color: var(--tsu-green); }
.claim-flag-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-1); }
.claim-flag p { margin: 0; }
.task-mini-list li.is-current { border-left: 3px solid var(--tsu-red); padding-left: var(--sp-1); }
.form-inline-action { margin: 0; }

/* Voto del revisore */
.criteria-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.criteria-list li { display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "label label" "bar num" "note note"; align-items: center; gap: 2px var(--sp-1); min-width: 0; }
.criteria-label { grid-area: label; overflow-wrap: anywhere; }
.criteria-list .meter { grid-area: bar; }
.criteria-num { grid-area: num; text-align: right; font: 600 13px/18px var(--tsu-font); font-variant-numeric: tabular-nums; }
.criteria-note { grid-area: note; overflow-wrap: anywhere; }
.review-panel .score-total .pill { margin-left: auto; }
.lint-metrics { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }

/* Approvazione con le destinazioni */
.approve-form { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--tsu-border); }
.approve-form > .btn { align-self: flex-start; }
.destinations { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sp-1); min-width: 0; }
.destinations legend { font: 600 14px/20px var(--tsu-font); padding: 0; margin-bottom: 4px; }
.dest-option { display: flex; align-items: flex-start; gap: var(--sp-1); min-width: 0; padding: var(--sp-1) var(--sp-2); background: var(--tsu-panel-2); border: 1px solid var(--tsu-border); border-radius: var(--radius); cursor: pointer; }
.dest-option:has(input:checked) { border-color: var(--tsu-red); }
.dest-option input { accent-color: var(--tsu-red); width: 18px; height: 18px; margin: 1px 0 0; flex: none; }
.dest-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dest-name { font: 500 14px/20px var(--tsu-font); color: var(--tsu-text); }
.dest-why { overflow-wrap: anywhere; }
.approve-form textarea { text-align: left; }
.content-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: var(--sp-4); color: var(--tsu-text); background: var(--tsu-panel); border: 1px solid var(--tsu-border-strong); border-radius: var(--radius); box-shadow: var(--tsu-shadow-menu); }
.content-dialog::backdrop { background: var(--tsu-backdrop); }
.content-dialog[open] { display: flex; flex-direction: column; gap: var(--sp-3); }
.check-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.check-items li { display: flex; align-items: flex-start; gap: var(--sp-1); overflow-wrap: anywhere; }
.check-items .check { color: var(--tsu-text); align-items: flex-start; }
.check-items .check input { margin-top: 2px; flex: none; }
.check-mark { flex: none; width: 18px; font-weight: 700; text-align: center; }
.check-items .is-ok .check-mark { color: var(--tsu-green); }
.check-items .is-ko { color: var(--tsu-red-ink); }
.dialog-actions { flex-wrap: wrap; }
.dialog-actions .btn { min-width: 0; flex: 1 1 160px; }
.destinations-now p { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; }

/* Traduzioni */
.translation-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.translation-row { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-2) 0; border-top: 1px solid var(--tsu-border); min-width: 0; }
.translation-row:first-child { border-top: 0; padding-top: 0; }
.translation-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-1); }
.translation-title { overflow-wrap: anywhere; }
.translation-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.translation-approve { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin: 0; }
.translation-approve .check, .approve-all .check { color: var(--tsu-text); }
.approve-all { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); padding-top: var(--sp-2); border-top: 1px solid var(--tsu-border); margin: 0; }
.status-card .translation-approve { flex-direction: column; align-items: flex-start; padding-top: var(--sp-2); border-top: 1px solid var(--tsu-border); }

/* Messa online */
.activation-box { display: flex; flex-direction: column; gap: var(--sp-1); padding-top: var(--sp-2); border-top: 1px solid var(--tsu-border); min-width: 0; }
.activation-box p { margin: 0; overflow-wrap: anywhere; }
.activation-box .btn { align-self: flex-start; }
.activation-locked a { color: inherit; }
.when-choice { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.when-option { display: flex; align-items: flex-start; gap: var(--sp-1); padding: var(--sp-2); background: var(--tsu-panel-2); border: 1px solid var(--tsu-border); border-radius: var(--radius); color: var(--tsu-text); cursor: pointer; }
.when-option:has(input[type=radio]:checked) { border-color: var(--tsu-red); box-shadow: inset 0 0 0 1px var(--tsu-red); }
.when-option > span { display: flex; flex-direction: column; gap: 6px; min-width: 0; font: 500 14px/20px var(--tsu-font); }
.when-option input[type=radio] { accent-color: var(--tsu-red); width: 18px; height: 18px; margin: 1px 0 0; flex: none; }
.when-option input[type=date] { max-width: 220px; min-height: var(--control-h); padding: var(--sp-1) var(--sp-2); font: 500 14px/20px var(--tsu-font); color: var(--tsu-text); background: var(--tsu-input-bg); border: 1px solid var(--tsu-border-strong); border-radius: var(--radius); }

/* Differenze fra versioni */
.diff-card details > summary { display: flex; flex-direction: column; gap: 4px; }
.diff-legend { margin: var(--sp-2) 0; }
.diff-fields { margin-bottom: var(--sp-2); }
.diff-blocks { display: grid; gap: 6px; }
.diff-block { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-1) var(--sp-2); background: var(--tsu-panel-2); border-left: 3px solid var(--tsu-border-strong); border-radius: var(--radius); overflow-wrap: anywhere; }
.diff-block p { margin: 0; }
.diff-add { border-left-color: var(--tsu-green); }
.diff-del { border-left-color: var(--tsu-red-ink); }
.diff-change { border-left-color: var(--tsu-amber); }
.diff-tag-h2 p, .diff-tag-h3 p { font-weight: 600; }
.diff-op { color: var(--tsu-muted); text-transform: uppercase; }
.diff-same { margin: 0; text-align: center; }
.diff-card ins, .diff-legend ins, .diff-fields ins { color: var(--tsu-text); background: var(--tsu-green-soft); text-decoration: none; border-bottom: 2px solid var(--tsu-green); }
.diff-card del, .diff-legend del, .diff-fields del { color: var(--tsu-muted); background: var(--tsu-red-soft); text-decoration: line-through; }

/* Anteprima dell'articolo come sul blog */
.preview-card { gap: var(--sp-2); }
.preview-legend { margin: 0; }
.preview-legend mark.claim, .article-preview mark.claim { color: var(--tsu-text); background: var(--tsu-amber-soft); border-bottom: 2px solid var(--tsu-amber); padding: 0 1px; }
.preview-legend mark.claim--block, .article-preview mark.claim--block { background: var(--tsu-red-soft); border-bottom-color: var(--tsu-red-ink); }
.article-preview mark.claim { cursor: help; }
.article-preview { min-width: 0; padding: var(--sp-4); background: var(--tsu-bg); border: 1px solid var(--tsu-border); border-radius: var(--radius); font: 400 16px/1.65 var(--tsu-font); overflow-wrap: anywhere; }
.preview-h1 { font: 700 26px/1.25 var(--tsu-font); margin: 0 0 var(--sp-1); text-transform: none; }
.preview-byline { margin: 0 0 var(--sp-2); font: var(--tsu-label); color: var(--tsu-muted); }
.preview-lead { margin: 0 0 var(--sp-3); font-size: 17px; color: var(--tsu-muted); }
.preview-body > :first-child { margin-top: 0; }
.preview-body h2 { font: 700 21px/1.3 var(--tsu-font); margin: var(--sp-4) 0 var(--sp-1); }
.preview-body h3 { font: 600 17px/1.35 var(--tsu-font); margin: var(--sp-3) 0 4px; }
.preview-body p, .preview-body ul, .preview-body ol { margin: 0 0 var(--sp-2); }
.preview-body ul, .preview-body ol { padding-left: 22px; }
.preview-body a { color: var(--tsu-red-ink); text-decoration: underline; text-underline-offset: 2px; }
.preview-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 var(--sp-2); font-size: 14px; }
.preview-body th, .preview-body td { padding: 6px 10px; border: 1px solid var(--tsu-border); text-align: left; vertical-align: top; }
.preview-body img { max-width: 100%; height: auto; }
/* Immagini generate nel testo (<figure><img>), nell'anteprima e nelle schede del pannello */
.preview-body figure, .html-preview figure { margin: var(--sp-2) 0; }
.preview-body figure img, .html-preview figure img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: var(--radius); background: var(--tsu-panel-2); }
.preview-body blockquote { margin: 0 0 var(--sp-2); padding-left: var(--sp-2); border-left: 3px solid var(--tsu-border-strong); color: var(--tsu-muted); }
.preview-body .tn-product-card { display: grid; gap: 4px; margin: var(--sp-3) 0; padding: var(--sp-3); background: var(--tsu-panel); border: 1px solid var(--tsu-border-strong); border-radius: var(--radius); font-size: 15px; }
.preview-body .tn-product-card h3 { margin: 0; }
.preview-body .tn-product-card p, .preview-body .tn-product-card ul { margin: 0; }
.preview-body .tn-product-card ul { list-style: none; padding: 0; }
.preview-body .tn-product-card__line { font: var(--tsu-label); color: var(--tsu-muted); text-transform: uppercase; }
.preview-body .tn-product-card__image { max-width: 160px; border-radius: var(--radius); }
.article-images { min-width: 0; }
.article-images:empty { display: none; }
@media (min-width: 1001px) {
    .article-detail { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); }
}
.agent-side .meta-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
/* Telefono: prima si legge (anteprima e immagini), poi si decide */
@media (max-width: 1000px) {
    .article-detail .preview-card, .article-detail .article-images { order: -1; }
}
.code-area { font: 13px/1.5 var(--tsu-mono); text-align: left; min-height: 18rem; }
.edit-form .field-help code { overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .article-preview { padding: var(--sp-2); font-size: 15px; }
    .preview-h1 { font-size: 22px; }
    .preview-body h2 { font-size: 19px; }
    .content-dialog { padding: var(--sp-3); }
    .lang-toggle .btn { min-width: 0; padding: var(--sp-1); }
    .cap-list li { grid-template-columns: 56px minmax(0, 1fr) 36px; }
    /* Spesa e approvazioni affiancate, tetti e autonomia a tutta larghezza */
    .content-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
    .content-cards .content-stat { padding: var(--sp-2); }
    .content-cards .content-stat:nth-child(n+3) { grid-column: 1 / -1; }
    .content-stat .stat-value { font-size: 26px; line-height: 34px; }
}