/*
 * Traduttore Novopac — foglio di stile unico.
 *
 * Nessun build step: variabili CSS native, niente preprocessori, niente
 * richieste verso l'esterno. Il font è servito da qui, non da un CDN: la
 * Content-Security-Policy non ammette altre origini, e l'applicazione deve
 * funzionare anche su una rete che non esce.
 */

/* ── Inter, servito in locale ──────────────────────────────────────────── */

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

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.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;
}

/* ── Token ─────────────────────────────────────────────────────────────── */

:root {
    color-scheme: light dark;

    /* Verde per le azioni che fanno avanzare il lavoro. */
    --primary:       #10b981;
    --primary-hover: #059669;
    --primary-soft:  #dcfce7;
    --primary-text:  #15803d;

    /* Ambra per ciò che richiede attenzione, e per l'accento della navigazione. */
    --accent:      #f59e0b;
    --accent-hover: #d97706;
    --accent-soft: #fef3c7;
    --accent-text: #b45309;

    --danger:      #ef4444;
    --danger-hover: #dc2626;
    --danger-soft: #fef2f2;
    --danger-text: #b91c1c;

    --info:      #0284c7;
    --info-soft: #e0f2fe;

    --bg:         #f8f9fa;
    --surface:    #ffffff;
    --surface-2:  #fbfbfc;
    --border:     #e9ecef;
    --border-firm:#d7dce2;

    --text:        #333333;
    --text-heading:#495057;
    --text-muted:  #8b92a5;
    --text-invert: #ffffff;

    --radius-sm: 6px;
    --radius:    8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 4%);
    --shadow:    0 4px 12px rgb(0 0 0 / 3%);
    --shadow-md: 0 4px 6px rgb(0 0 0 / 7%);
    --shadow-lg: 0 12px 32px rgb(0 0 0 / 12%);

    --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

    --sidebar-w: 260px;
    --header-h:  70px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary-soft: #0e2a1e;
        --primary-text: #34d399;
        --accent-soft:  #2e2308;
        --accent-text:  #fbbf24;
        --danger-soft:  #2a1212;
        --danger-text:  #f87171;
        --info-soft:    #0c2233;

        --bg:          #0f1319;
        --surface:     #171b22;
        --surface-2:   #1c212a;
        --border:      #262c36;
        --border-firm: #333b48;

        --text:         #e5e7eb;
        --text-heading: #f3f4f6;
        --text-muted:   #8b92a5;

        --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
        --shadow:    0 4px 12px rgb(0 0 0 / 30%);
        --shadow-md: 0 4px 6px rgb(0 0 0 / 40%);
        --shadow-lg: 0 12px 32px rgb(0 0 0 / 55%);
    }
}

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

/* L'attributo «hidden» deve vincere sempre. Senza questa riga qualunque
   componente che dichiari un proprio «display» resta visibile pur essendo
   nascosto — è così che il pannello di avvio compariva già aperto, con i
   propri comandi ancora vuoti. */
[hidden] { display: none !important; }

body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    font-family: var(--font);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; color: var(--text-heading); font-weight: 600; letter-spacing: -0.4px; }
h1 { font-size: 24px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p  { margin: 0 0 12px; }
a  { color: var(--primary-hover); text-decoration: none; }
a:hover { color: var(--primary); }

/* ── Barra laterale ────────────────────────────────────────────────────── */

.sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 100;
    width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-inline-end: 1px solid var(--border);
}

.sidebar__logo {
    display: flex;
    align-items: center;
    height: var(--header-h);
    padding: 0 24px;
    border-bottom: 1px solid var(--border);
}
/* Il marchio non si stringe mai sotto la soglia in cui «impianti» e «s.r.l.»
   smettono di essere leggibili: sotto i 120px diventano una sbavatura. */
.sidebar__logo img {
    width: 120px;
    height: auto;
    display: block;
}

/* Il marchio ha del testo scuro — «impianti», «s.r.l.» — che su fondo scuro
   sparisce, e un marchio a cui manca metà nome non è più quel marchio. Sta
   quindi sempre su una sua base chiara: in tema chiaro è invisibile perché la
   barra è già bianca, in tema scuro protegge il logo senza toccarne i colori,
   che non sono nostri da cambiare. */
.sidebar__logo img,
.auth__brand img {
    background: #ffffff;
    border-radius: 8px;
}
@media (prefers-color-scheme: dark) {
    .sidebar__logo img,
    .auth__brand img { padding: 6px 10px; }
    .topbar__logo img { padding: 4px 8px; }
}

.sidebar__menu {
    list-style: none;
    margin: 0;
    padding: 24px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
}

.sidebar__menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 14.5px;
    font-weight: 500;
    transition: background 160ms ease, color 160ms ease;
}
.sidebar__menu a:hover { background: var(--bg); color: var(--text); }
.sidebar__menu a[aria-current="page"] { background: var(--bg); color: var(--text); font-weight: 600; }
.sidebar__menu a svg { width: 18px; height: 18px; flex: none; color: var(--text-muted); }
.sidebar__menu a[aria-current="page"] svg { color: var(--accent); }

.sidebar__group {
    margin: 16px 16px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sidebar__foot {
    margin-top: auto;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar__foot a { color: var(--text-muted); }
.sidebar__foot a:hover { color: var(--text); text-decoration: underline; }

/* ── Intestazione ──────────────────────────────────────────────────────── */

.shell {
    margin-inline-start: var(--sidebar-w);
    width: calc(100% - var(--sidebar-w));
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 90;
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 32px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.topbar__toggle { display: none; }

/* Compare solo quando la barra laterale non c'è: sopra è un doppione del
   marchio che si vede già a sinistra. */
.topbar__logo { display: none; }
.topbar__logo img { width: 104px; height: auto; display: block; background: #ffffff; border-radius: 6px; }

.search-global { position: relative; }
.search-global svg {
    position: absolute;
    inset-inline-start: 12px;
    inset-block-start: 50%;
    translate: 0 -50%;
    width: 15px; height: 15px;
    color: var(--text-muted);
    pointer-events: none;
}
.search-global input {
    width: 260px;
    padding: 9px 16px 9px 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 160ms ease, background 160ms ease;
}
.search-global input:focus { border-color: var(--accent); background: var(--surface); }
.search-global input::placeholder { color: var(--text-muted); }

.user-chip {
    display: flex;
    background: none;
    border: 0;
    cursor: pointer;
    align-items: center;
    gap: 12px;
    padding: 4px;
    border-radius: var(--radius);
    color: var(--text-heading);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}
.user-chip:hover { background: var(--bg); color: var(--text-heading); }
.user-chip__avatar {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: var(--radius);
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-heading);
    font-size: 13px;
    font-weight: 600;
}

/* ── Contenuto ─────────────────────────────────────────────────────────── */

.content { flex: 1; padding: 32px; min-width: 0; }

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.page-header__title { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.page-header__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}
.breadcrumb a { color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb svg { width: 13px; height: 13px; }
.breadcrumb b { color: var(--text); font-weight: 500; }

.page-lead { color: var(--text-muted); font-size: 14px; margin: 0; max-width: 68ch; }

/* ── Pulsanti ──────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    transition: background 160ms ease, border-color 160ms ease, transform 80ms ease, box-shadow 160ms ease;
}
.btn:hover { background: var(--bg); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn svg { width: 15px; height: 15px; flex: none; }

.btn--default { border-color: var(--border); }

.btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn--primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgb(16 185 129 / 20%);
}

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

.btn--ghost { background: transparent; box-shadow: none; color: var(--text-muted); }
.btn--ghost:hover { background: var(--bg); color: var(--text); }

.btn--sm { padding: 7px 12px; font-size: 13px; }

/* Pulsante da barra strumenti: neutro, con icona spenta. */
.btn--tool {
    padding: 8px 12px;
    border-color: var(--border);
    font-size: 13px;
    box-shadow: none;
}
.btn--tool svg { color: var(--text-muted); }

/* Pulsante di sola icona, per le azioni di riga. */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn-icon svg { width: 15px; height: 15px; }
.btn-icon:hover { background: var(--bg); border-color: var(--border); color: var(--text); }
.btn-icon:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-icon--danger:hover { background: var(--danger-soft); border-color: #fca5a5; color: var(--danger); }

/* ── Card e tabelle ────────────────────────────────────────────────────── */

.card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.card__body { padding: 24px; }
.card + .card { margin-top: 16px; }

.card__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-wrap: wrap;
}
.card__toolbar-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
}

/* Le tabelle HTML non esistono più: le griglie sono tutte AG Grid, che
   disegna le proprie righe con dei div. Lo stile di table/th/td è stato tolto
   perché non lo applicava più nulla. */

/* ── Identità di un file ───────────────────────────────────────────────── */

.file-info { display: flex; align-items: center; gap: 16px; min-width: 0; }

.file-icon {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex: none;
    border-radius: var(--radius);
    background: #eef2fb;
    color: #2b579a;
}
.file-icon svg { width: 20px; height: 20px; }
@media (prefers-color-scheme: dark) {
    .file-icon { background: #1b2438; color: #7aa2e3; }
}

.file-details { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.file-details__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.file-details__name:hover { color: var(--primary-hover); }
.file-details__meta { font-size: 12px; color: var(--text-muted); }

/* ── Badge ─────────────────────────────────────────────────────────────── */

.badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.badge svg { width: 12px; height: 12px; }

/* Un colore per lingua: lo stesso ovunque, così si riconosce a colpo d'occhio. */
.badge--en { background: #e0f2fe; color: #0284c7; }
.badge--fr { background: #fce7f3; color: #db2777; }
.badge--es { background: #fef3c7; color: #d97706; }
.badge--de { background: #dcfce7; color: #15803d; }
.badge--pt { background: #ede9fe; color: #7c3aed; }
.badge--it { background: #f1f5f9; color: #475569; }

@media (prefers-color-scheme: dark) {
    .badge--en { background: #0c2233; color: #7dd3fc; }
    .badge--fr { background: #2e1122; color: #f9a8d4; }
    .badge--es { background: #2e2308; color: #fcd34d; }
    .badge--de { background: #0e2a1e; color: #6ee7b7; }
    .badge--pt { background: #221a3a; color: #c4b5fd; }
    .badge--it { background: #1c212a; color: #cbd5e1; }
}

/* Aggiunta: bordo tratteggiato, perché è un invito e non uno stato. */
.badge--add {
    background: transparent;
    border: 1px dashed var(--border-firm);
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.badge--add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* Gli stati sono a pillola: la forma li distingue dalle lingue. */
.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.status svg { width: 12px; height: 12px; flex: none; }
.status--done    { background: var(--primary-soft); color: var(--primary-text); }
.status--running { background: var(--info-soft);    color: var(--info); }
.status--wait    { background: var(--bg);           color: var(--text-muted); }
.status--warn    { background: var(--accent-soft);  color: var(--accent-text); }
.status--error   { background: var(--danger-soft);  color: var(--danger-text); }

.spin { animation: spin 900ms linear infinite; }
@keyframes spin { to { rotate: 360deg; } }

/* ── Campi ─────────────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field__label { font-size: 13px; font-weight: 600; color: var(--text-heading); }
.field__hint  { font-size: 12.5px; color: var(--text-muted); }

.input {
    width: 100%;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder { color: var(--text-muted); }
.input:disabled { background: var(--bg); color: var(--text-muted); }


/* Modifica sul posto: il campo si rivela solo quando serve. */

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }

/* ── Riquadri numerici ─────────────────────────────────────────────────── */

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.stat {
    display: grid;
    gap: 2px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.stat__value { font-size: 26px; font-weight: 600; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; color: var(--text-heading); }
.stat__label { font-size: 12.5px; color: var(--text-muted); }
.stat--ok .stat__value    { color: var(--primary-text); }
.stat--warn .stat__value  { color: var(--accent-text); }
.stat--error .stat__value { color: var(--danger-text); }

/* ── Stati vuoti ───────────────────────────────────────────────────────── */

.empty { padding: 56px 24px; text-align: center; color: var(--text-muted); }
.empty svg { width: 36px; height: 36px; color: var(--border-firm); }
.empty__title { margin: 12px 0 4px; font-size: 15px; font-weight: 600; color: var(--text-heading); }
.empty p { margin: 0 auto; max-width: 46ch; font-size: 13.5px; }
.empty .btn { margin-top: 16px; }

/* ── Notifiche ─────────────────────────────────────────────────────────── */

.toasts {
    position: fixed;
    inset-block-end: 24px;
    inset-inline-end: 24px;
    z-index: 200;
    display: grid;
    gap: 10px;
    max-width: min(24rem, calc(100vw - 48px));
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--primary);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    font-size: 13.5px;
    animation: rise 180ms ease;
}
.toast--success { border-inline-start-color: var(--primary); }
.toast--error   { border-inline-start-color: var(--danger); }
.toast--warning { border-inline-start-color: var(--accent); }
.toast__close {
    margin-inline-start: auto;
    padding: 0 2px;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

@keyframes rise { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0; } }

/* ── Dialoghi ──────────────────────────────────────────────────────────── */

.dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgb(15 19 25 / 55%);
    animation: fade 120ms ease;
}
.dialog {
    width: min(28rem, 100%);
    padding: 24px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.dialog__title   { font-size: 17px; margin-bottom: 6px; }
.dialog__message { color: var(--text-muted); font-size: 13.5px; line-height: 1.6; margin-bottom: 16px; }
/* Tre risposte non stanno sempre su una riga: quando non ci stanno vanno a
   capo invece di stringersi fino a diventare illeggibili. */
.dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 20px; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* I dialoghi sono costruiti da SweetAlert2, che porta con sé un proprio
   aspetto. Qui viene tolto: restano la nostra scatola, i nostri pulsanti e i
   nostri colori, così una conferma non sembra arrivare da un'altra
   applicazione. */
.swal2-container.dialog-overlay { padding: 16px; background: rgb(15 19 25 / 55%); }
.swal2-popup.dialog {
    width: min(28rem, 100%);
    max-width: 100%;
    padding: 24px;
    grid-template-columns: 1fr;
    font-family: inherit;
    color: var(--text);
}
.swal2-popup.dialog .dialog__title {
    padding: 0;
    text-align: start;
    font-size: 17px;
    font-weight: 650;
    color: var(--text-heading);
}
.swal2-popup.dialog .dialog__message {
    justify-content: flex-start;
    margin: 6px 0 0;
    padding: 0;
    text-align: start;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-muted);
}
.swal2-popup.dialog .dialog__actions {
    width: 100%;
    padding: 0;
    margin-top: 20px;
    justify-content: flex-end;
}
.swal2-popup.dialog .swal2-input,
.swal2-popup.dialog .swal2-select {
    margin: 14px 0 0;
    width: 100%;
    height: auto;
    font-size: 14px;
    box-shadow: none;
}
.swal2-popup.dialog .swal2-input-label {
    justify-content: flex-start;
    margin: 16px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
}
.swal2-popup.dialog .swal2-validation-message {
    margin: 12px 0 0;
    border-radius: var(--radius-sm);
    background: var(--danger-soft);
    color: var(--danger-text);
    font-size: 12.5px;
}
.swal2-popup.dialog .swal2-validation-message::before { display: none; }
.swal2-popup.dialog .btn:focus { box-shadow: none; }

/* ── Barra di avanzamento ──────────────────────────────────────────────── */

.progress { height: 6px; border-radius: var(--radius-pill); background: var(--bg); overflow: hidden; }
.progress__fill {
    height: 100%;
    width: 0;
    border-radius: var(--radius-pill);
    background: var(--info);
    transition: width 240ms ease;
}
.progress--success .progress__fill { background: var(--primary); }
.progress--error .progress__fill   { background: var(--danger); }
.progress--indeterminate .progress__fill { width: 35%; animation: slide 1.15s ease-in-out infinite; }

@keyframes slide { from { margin-inline-start: -35%; } to { margin-inline-start: 100%; } }

.lang-backfill-bar {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.lang-backfill-bar__copy {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    font-size: 13.5px;
}
.lang-backfill-bar__copy strong { color: var(--text-heading); font-weight: 600; }
.lang-backfill-bar__progress { margin: 0; }

.lang-status {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-text);
}
.lang-status--busy::before {
    content: '';
    width: 8px;
    height: 8px;
    margin-inline-end: 8px;
    border-radius: 50%;
    background: var(--accent);
    animation: pulse-dot 1.2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1); }
}

/* ── Accesso ───────────────────────────────────────────────────────────── */

body.auth { display: grid; place-items: center; background: var(--bg); }

.auth__card {
    width: min(25rem, calc(100vw - 32px));
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}
.auth__brand { margin-bottom: 20px; }
.auth__brand img { width: 190px; height: auto; display: block; }
.auth__foot { margin: 20px 0 0; text-align: center; font-size: 12px; }
.auth__foot a { color: var(--text-muted); }
.auth__foot a:hover { color: var(--text); text-decoration: underline; }
.auth__lead { color: var(--text-muted); font-size: 13.5px; margin-bottom: 24px; }

.form-error {
    padding: 10px 12px;
    margin-bottom: 16px;
    border: 1px solid #fca5a5;
    border-radius: var(--radius-sm);
    background: var(--danger-soft);
    color: var(--danger-text);
    font-size: 13px;
}
.form-error:empty { display: none; }

/* ── Avvisi ────────────────────────────────────────────────────────────── */

.banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--accent);
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: 13.5px;
}
.banner svg { width: 16px; height: 16px; flex: none; }

/* ── Utilità ───────────────────────────────────────────────────────────── */

.muted   { color: var(--text-muted); }
.nowrap  { white-space: nowrap; }
.mono    { font-family: var(--font-mono); font-size: 0.86em; }
.stack   { display: grid; gap: 16px; }
.row     { display: flex; align-items: center; gap: 10px; }
.numeric { font-variant-numeric: tabular-nums; }
.grow    { flex: 1; min-width: 0; }
.section-title { margin: 28px 0 12px; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
    position: absolute;
    inset-block-start: -3rem;
    inset-inline-start: 12px;
    z-index: 400;
    padding: 8px 14px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    transition: inset-block-start 160ms ease;
}
.skip-link:focus { inset-block-start: 0; color: #fff; }

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

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    .progress--indeterminate .progress__fill { animation-duration: 3s !important; }
}

/* ── Adattamento ───────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 200ms ease;
        box-shadow: var(--shadow-lg);
    }
    body.nav-open .sidebar { transform: none; }
    .shell { margin-inline-start: 0; width: 100%; }
    .topbar__toggle { display: inline-flex; }
    .topbar__logo { display: block; }
    .search-global input { width: 180px; }
}

@media (max-width: 720px) {
    .content { padding: 20px 16px; }
    .topbar { padding: 0 16px; }
    .search-global { display: none; }
    .user-chip span:not(.user-chip__avatar) { display: none; }
    th, td { padding-inline: 16px; }
    .card__toolbar { flex-direction: column; align-items: stretch; }
}

@media (pointer: coarse) {
    .btn--sm { min-height: 36px; }
    .btn-icon { width: 36px; height: 36px; }
}

/* ── Rilascio di file ──────────────────────────────────────────────────── */

/*
   Compare solo mentre si trascina qualcosa sulla finestra: una zona di
   rilascio sempre visibile occuperebbe spazio per un gesto che si fa una
   volta ogni tanto, e il pulsante in alto copre già il caso normale.
*/
.dropzone-hint {
    position: fixed;
    inset: 0;
    z-index: 250;
    display: grid;
    place-items: center;
    padding: 32px;
    background: rgb(15 19 25 / 45%);
    animation: fade 120ms ease;
}
.dropzone-hint__box {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 48px 64px;
    border: 2px dashed var(--primary);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--primary-text);
    text-align: center;
}
.dropzone-hint__box svg { color: var(--primary); margin-bottom: 8px; }
.dropzone-hint__title { margin: 0; font-size: 17px; font-weight: 600; color: var(--text-heading); }

/* ── Glossario per termine ─────────────────────────────────────────────── */

.entry__term  { font-weight: 600; color: var(--text-heading); }
.entry__badge { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-muted); }


.file-ref {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    max-width: 100%;
}
.file-ref svg { width: 14px; height: 14px; color: #2b579a; flex: none; }
.file-ref span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.file-ref:hover { color: var(--primary-hover); }

/*
   Le traduzioni affiancate: il codice della lingua fa da etichetta colorata,
   il testo accanto è modificabile sul posto. Vedere le cinque rese una sotto
   l'altra è ciò che permette di accorgersi che una stona.
*/
.translations { display: grid; gap: 6px; min-width: 260px; }

.translation {
    display: flex;
    align-items: center;
    gap: 8px;
}

@keyframes saved {
    from { background: var(--primary-soft); }
    to   { background: transparent; }
}


/* ── Barra della selezione multipla ────────────────────────────────────── */

/* Compare solo quando c'è una selezione: un comando che non ha su cosa
   agire è un comando morto che occupa spazio. */
.bulk-bar {
    position: fixed;
    inset-block-end: 24px;
    inset-inline-start: calc(50% + var(--sidebar-w) / 2);
    translate: -50% 0;
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    background: #1f2937;
    color: #fff;
    box-shadow: var(--shadow-lg);
    font-size: 13.5px;
    animation: rise 160ms ease;
}
.bulk-bar .btn { background: rgb(255 255 255 / 10%); border-color: transparent; color: #fff; box-shadow: none; }
.bulk-bar .btn:hover { background: rgb(255 255 255 / 20%); color: #fff; }
.bulk-bar .btn--danger { background: rgb(239 68 68 / 25%); color: #fca5a5; }
.bulk-bar .btn--danger:hover { background: rgb(239 68 68 / 40%); color: #fff; }

@media (max-width: 1024px) {
    .bulk-bar { inset-inline: 16px; inset-block-end: 16px; translate: none; border-radius: var(--radius); justify-content: center; flex-wrap: wrap; }
}

/* ── Scheda di una traduzione ──────────────────────────────────────────── */

/*
    Tre per riga: una traduzione è una cosa piccola — bandiera, barra, un
    bottone — e a tutta larghezza costringeva a scorrere per vedere le lingue
    successive. Sotto una certa larghezza le colonne si riducono da sole,
    perché due parole spezzate su sei righe non sono più leggibili di una
    scheda larga.
*/
.job-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.job-grid .empty { grid-column: 1 / -1; }
/* `.card + .card` serve alle sezioni impilate: qui lo spazio lo fa il gap. */
.job-grid > .card { margin-top: 0; }

.job-card { padding: 16px 18px; display: grid; gap: 10px; }
.job-card--done  { border-color: var(--primary); }
.job-card--error { border-color: #fca5a5; background: var(--danger-soft); }

.job-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.job-card__lang { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text-heading); }
.job-card__status { margin: 0; font-size: 13.5px; color: var(--text-muted); }
.job-card__foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.job-card__foot:empty { display: none; }
/* Il glossario è cambiato dopo la traduzione: una nota, non un allarme. */
.job-card__stale {
    font-size: 12px;
    color: var(--accent-text);
    background: var(--accent-soft);
    padding: 3px 8px;
    border-radius: 999px;
}

/* Stepper: a che punto del processo siamo, senza leggere il diario. */
.steps {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.steps li { display: flex; align-items: center; gap: 8px; }
.steps__dot { width: 9px; height: 9px; border: 1.5px solid var(--border-firm); border-radius: 50%; }
.steps li[data-state="done"] { color: var(--primary-text); }
.steps li[data-state="done"] .steps__dot { background: var(--primary); border-color: var(--primary); }
.steps li[data-state="active"] { color: var(--info); font-weight: 600; }
.steps li[data-state="active"] .steps__dot { background: var(--info); border-color: var(--info); }

@media (max-width: 1400px) {
    .job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .job-grid { grid-template-columns: 1fr; }
}

/* ── Scelta delle lingue ───────────────────────────────────────────────── */

.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }

.lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    transition: border-color 160ms ease, background 160ms ease;
}
.lang-option:hover { border-color: var(--primary); }
.lang-option--on { border-color: var(--primary); background: var(--primary-soft); font-weight: 600; }
.lang-option--disabled { opacity: 0.45; cursor: not-allowed; }
.lang-option--disabled:hover { border-color: var(--border); }
.lang-option--done {
    cursor: default;
    background: var(--bg);
    color: var(--text-muted);
    border-color: color-mix(in srgb, var(--border) 70%, transparent);
}
.lang-option--done:hover { border-color: var(--border); }
.lang-option--done input:disabled { pointer-events: none; opacity: 0.55; }
.lang-option[data-tip] { position: relative; }
.lang-option[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    z-index: 20;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    padding: 7px 11px;
    border-radius: var(--radius-sm);
    background: #1e293b;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgb(15 23 42 / 28%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 160ms ease, visibility 160ms ease;
}
.lang-option[data-tip]:hover::after,
.lang-option[data-tip]:focus-within::after {
    opacity: 1;
    visibility: visible;
}
.lang-option input { accent-color: var(--primary); }

.hint-box {
    margin: 16px 0 0;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text-muted);
    font-size: 13px;
}
/* Un avviso che non impedisce di procedere: la terminologia non rivista non
   blocca la traduzione, ma chi avvia deve saperlo prima e non dopo. */
.hint-box--warn {
    background: var(--accent-soft);
    color: var(--accent-text);
}

/* ── Terminologia del manuale ──────────────────────────────────────────── */

.termini { display: grid; gap: 14px; }
.termini__conteggi { display: flex; flex-wrap: wrap; gap: 20px; }
.termini__voce { display: grid; gap: 2px; }
.termini__numero { font-size: 22px; font-weight: 650; color: var(--text-heading); line-height: 1.1; }
.termini__etichetta { font-size: 12.5px; color: var(--text-muted); }
.termini__voce--attesa .termini__numero { color: var(--accent-text); }
.termini__azioni { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.termini__lingue { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Pagina a fuoco singolo ────────────────────────────────────────────── */

.focus-page { display: grid; place-items: center; min-height: 60vh; padding: 16px; }
.focus-page__card {
    width: min(26rem, 100%);
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}
.focus-page__icon { display: block; width: 32px; height: 32px; color: var(--accent); margin-bottom: 12px; }
.focus-page__lead { color: var(--text-muted); font-size: 13.5px; line-height: 1.6; margin-bottom: 24px; }

/* ── Worker ────────────────────────────────────────────────────────────── */

.worker {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 14px;
}
.worker__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); flex: none; }
.worker--stale .worker__dot { background: var(--accent); }
.worker__id { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); }
.worker__meta { margin-inline-start: auto; color: var(--text-muted); font-size: 12.5px; }

/* ── Chip di filtro ────────────────────────────────────────────────────── */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.chip:hover { border-color: var(--border-firm); color: var(--text); }
.chip__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.chip__count { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.chip--on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-text); font-weight: 600; }
.chip--on .chip__count { color: var(--primary-text); opacity: 0.75; }

/* ── Tabelle (AG Grid) ─────────────────────────────────────────────────── */

/*
 * AG Grid vestito con i nostri token: il tema Quartz espone tutto tramite
 * variabili --ag-*, quindi non serve combattere con la specificità. Il
 * risultato deve sembrare parte dell'applicazione, non un componente
 * incollato dentro.
 */
.grid {
    --ag-font-family: var(--font);
    --ag-font-size: 14px;

    --ag-background-color: var(--surface);
    --ag-foreground-color: var(--text);
    --ag-header-background-color: var(--surface-2);
    --ag-header-foreground-color: var(--text-muted);
    --ag-border-color: var(--border);
    --ag-row-border-color: var(--border);
    --ag-row-hover-color: var(--surface-2);
    --ag-selected-row-background-color: var(--primary-soft);
    --ag-odd-row-background-color: transparent;

    --ag-input-focus-border-color: var(--accent);
    --ag-input-border-color: var(--border);
    --ag-checkbox-checked-color: var(--primary);
    --ag-range-selection-border-color: var(--accent);

    --ag-cell-horizontal-padding: 18px;
    --ag-borders: none;
    --ag-borders-critical: solid 1px;
    --ag-wrapper-border-radius: 0;
    --ag-header-column-resize-handle-color: var(--border);

    width: 100%;
}

/* Le intestazioni parlano la stessa lingua delle altre tabelle: maiuscoletto
   spaziato, non grassetto pieno. */
.grid .ag-header-cell-text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.grid .ag-header { border-bottom: 1px solid var(--border); }
.grid .ag-row { border-bottom: 1px solid var(--border); }
.grid .ag-row-last { border-bottom: 0; }

/* Il contenuto delle celle è verticalmente centrato: le righe contengono
   badge e pulsanti, non solo testo. */
.grid .ag-cell {
    display: flex;
    align-items: center;
    line-height: 1.45;
    /* Senza questo il testo lungo esce dalla cella e si sovrappone alla
       colonna accanto: una traduzione più larga della sua colonna deve
       troncarsi, non invadere quella del vicino. */
    overflow: hidden;
}
/* AG Grid avvolge il contenuto in un proprio elemento che, lasciato a sé,
   si allarga fino al testo: il troncamento finiva sul bordo della cella,
   di netto e senza puntini. Vincolato qui, la catena width/min-width arriva
   intatta fino agli span. */
.grid .ag-cell-wrapper {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
.grid-cell__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
/* Il testo si tronca con i puntini; i comandi non si stringono mai. */
.grid-cell__inner > span,
.grid-cell__inner > a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.grid-cell__inner > button,
.grid-cell__inner > .badge,
.grid-cell__inner > .icon { flex-shrink: 0; }

/* Cella su due righe: il termine e, sotto, cosa c'è da sapere su di esso.
   «stretch» invece di «flex-start» serve a far troncare le righe con i
   puntini: allineate all'inizio prenderebbero la larghezza del testo e
   verrebbero tagliate di netto dal bordo della cella. */
.grid-cell__inner--stack {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 1px;
}

/* Celle che ospitano più righe: badge di lingua, traduzioni affiancate. */
.grid .ag-cell--stacked .grid-cell__inner { flex-direction: column; align-items: stretch; gap: 6px; }
.grid .ag-cell--wrap { white-space: normal; }

.grid .ag-cell--actions .grid-cell__inner { justify-content: flex-end; gap: 6px; }
.grid .ag-cell--num .grid-cell__inner { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.grid .ag-cell--num { color: var(--text-muted); }

.grid-empty { color: var(--text-muted); font-size: 13.5px; }

/* La cella in modifica non deve sembrare un campo qualsiasi comparso dal
   nulla: prende il bordo di accento come gli altri input. */
.grid .ag-cell-inline-editing {
    height: auto;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 3px var(--accent-soft);
    border-color: var(--accent);
    background: var(--surface);
}
.grid .ag-input-field-input {
    font: inherit;
    font-size: 14px;
    color: var(--text);
}

/* L'ordinamento attivo si vede: senza, si perde qual è la colonna che comanda. */
.grid .ag-header-cell-sorted-asc .ag-header-cell-text,
.grid .ag-header-cell-sorted-desc .ag-header-cell-text { color: var(--text); }
.grid .ag-sort-indicator-icon { color: var(--accent); }

/* Il riquadro di scorrimento resta dentro la card. */
.card > .grid { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.card > .grid:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

.grid .ag-overlay-loading-center,
.grid .ag-overlay-no-rows-center {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 40px;
}

/* ── Ricerca della pagina ──────────────────────────────────────────────── */

.search-global__key {
    position: absolute;
    inset-inline-end: 10px;
    inset-block-start: 50%;
    translate: 0 -50%;
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    pointer-events: none;
}
.search-global input:focus + .search-global__key,
.search-global input:not(:placeholder-shown) + .search-global__key { opacity: 0; }
.search-global input { padding-inline-end: 32px; }

/* ── Riquadri "richiede attenzione" ────────────────────────────────────── */

/*
 * Non è una dashboard di metriche: mostra solo ciò su cui si può agire, e
 * ogni riquadro filtra la tabella. Quando non c'è niente da fare sparisce del
 * tutto, invece di mostrare una fila di zeri.
 */
.attention {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.attention__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    font: inherit;
    font-size: 13.5px;
    color: var(--text);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.attention__item:hover { border-color: var(--border-firm); box-shadow: var(--shadow-md); }
.attention__item[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.attention__count { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.attention__item svg { width: 16px; height: 16px; flex: none; }
.attention__item--running { color: var(--info); }
.attention__item--error   { color: var(--danger-text); }
.attention__item--todo    { color: var(--accent-text); }

/* ── Contenitore delle griglie ─────────────────────────────────────────── */

/* Due modalità, decise da grid.js in base alle righe visibili.
   Con poche righe la griglia è alta quanto il contenuto; oltre la soglia
   prende un'altezza propria, si ferma prima del fondo pagina e scorre al
   proprio interno, così l'intestazione resta ferma e visibile. */
.grid--scroll { height: clamp(360px, calc(100vh - 380px), 680px); }
/* In «autoHeight» il tema quartz impone 150px al corpo della griglia: con una
   riga sola resta mezzo riquadro vuoto sotto. Lo spazio serve solo quando c'è
   il messaggio «Nessun risultato» da ospitare. */
.grid.ag-layout-auto-height .ag-center-cols-viewport,
.grid.ag-layout-auto-height .ag-center-cols-container { min-height: 0; }

.grid--vuota:not(.grid--scroll) .ag-root-wrapper { min-height: 168px; }

/* ── Tag modificabili ──────────────────────────────────────────────────── */

.badge--removable { padding-right: 4px; }
.badge__remove {
    border: 0;
    background: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.45;
    font-size: 15px;
    line-height: 1;
    padding: 0 4px;
    border-radius: 4px;
}
.badge__remove:hover { opacity: 1; background: rgba(0, 0, 0, 0.07); }

/* Tratteggiato come il « + » delle lingue: è un'azione, non uno stato. */
.badge--tag-add { cursor: pointer; font-weight: 500; }

.tag-input {
    height: 24px;
    width: 9rem;
    padding: 0 8px;
    font: inherit;
    font-size: 12px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
}
.tag-input:focus { outline: none; }

/* ── Filtri di colonna ─────────────────────────────────────────────────── */

/* Il filtro sta nell'icona dentro l'intestazione. Una riga di caselle sotto i
   titoli occupava spazio a schermo anche quando non si stava filtrando nulla,
   che è quasi sempre. */
.grid .ag-header-cell-filter-button {
    color: var(--text-muted);
    opacity: 0.55;
    border-radius: 5px;
}
.grid .ag-header-cell:hover .ag-header-cell-filter-button { opacity: 1; }
.grid .ag-header-cell-filtered .ag-header-cell-filter-button {
    opacity: 1;
    color: var(--accent-text);
}

/* Una colonna filtrata si vede anche dal titolo, non solo dall'icona. */
.grid .ag-header-cell-filtered .ag-header-cell-text { color: var(--accent-text); }

/* Il riquadro che si apre. */
.ag-menu, .ag-filter { border-radius: 10px; }
.grid-filtro { padding: 10px; min-width: 12rem; }
.grid-filtro select { width: 100%; }
.grid-filtro__select,
.ag-filter .ag-input-field-input {
    height: 30px;
    min-height: 30px;
    padding: 0 8px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    width: 100%;
}
.grid-filtro__select:focus,
.ag-filter .ag-input-field-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* La colonna della casella di selezione non ha testo: il margine pensato per
   il testo la stringerebbe soltanto. */
.grid .grid-cell--check { --ag-cell-horizontal-padding: 12px; }

/* Un'intestazione lunga su una colonna stretta: si rinuncia alla spaziatura
   fra le lettere, non alla parola intera. */
.grid .grid-header--compact .ag-header-cell-text { letter-spacing: 0.01em; }
.grid .grid-header--compact { --ag-cell-horizontal-padding: 12px; }

/* ── Glossario in griglia ──────────────────────────────────────────────── */

/* L'intestazione di ogni colonna di lingua porta il colore della lingua: si
   riconosce la colonna prima di leggerne il codice. */
.grid .grid-header--en .ag-header-cell-text { color: #0284c7; }
.grid .grid-header--fr .ag-header-cell-text { color: #db2777; }
.grid .grid-header--es .ag-header-cell-text { color: #d97706; }
.grid .grid-header--de .ag-header-cell-text { color: #15803d; }
.grid .grid-header--pt .ag-header-cell-text { color: #7c3aed; }

/* ── Dove è usata una parola ───────────────────────────────────────────── */

/* Il termine e, accanto, l'icona che apre l'elenco dei manuali. */
.entry__riga {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.entry__riga .entry__term { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.entry__dove {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    border: 0;
    padding: 2px 4px;
    border-radius: 5px;
    background: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.entry__dove:hover,
.entry__dove[aria-expanded="true"] { background: var(--surface-2); color: var(--accent-text); }

.entry__meta {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border: 0;
    padding: 2px 4px;
    border-radius: 5px;
    background: none;
    cursor: pointer;
    color: var(--text-muted);
}
.entry__meta:hover,
.entry__meta[aria-expanded="true"] { background: var(--surface-2); color: var(--accent-text); }

.entry__term[data-tip] { position: relative; cursor: help; }
.entry__term[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    z-index: 20;
    left: 0;
    bottom: calc(100% + 6px);
    min-width: 10rem;
    max-width: 18rem;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--text-heading);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    white-space: pre-wrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s, transform 0.15s;
}
.entry__term[data-tip]:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.entry-draft-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.entry-draft-bar p {
    margin: 0;
    font-size: 13.5px;
    color: var(--text-heading);
}
.entry-draft-bar__actions { display: flex; gap: 8px; }

.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 16px;
    font-size: 13.5px;
    color: var(--text);
    cursor: pointer;
}
.checkbox-row input { margin-top: 2px; accent-color: var(--accent); }

.form-grid .field--wide { grid-column: 1 / -1; }

.popover__form { display: grid; gap: 10px; min-width: 14rem; }
.popover__form .field { display: grid; gap: 4px; }

.entry-form__hint { margin: 0 0 12px; font-size: 13px; }

/* Il riquadro vive in fondo al body: le celle tagliano ciò che sborda, e qui
   dentro si vedrebbe a metà. */
.popover {
    position: fixed;
    z-index: 60;
    max-width: 22rem;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.popover__title {
    margin: 0 0 8px;
    font-size: 12.5px;
    color: var(--text-muted);
}
.popover__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.popover__list li { font-size: 13.5px; }

/* ── Menu del proprio nome ─────────────────────────────────────────────── */

.menu { display: grid; gap: 2px; min-width: 12rem; }
.menu__voce {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    text-align: start;
    cursor: pointer;
}
.menu__voce:hover { background: var(--bg); color: var(--text-heading); }
.menu__voce--esci { color: var(--danger-text); }
.menu__voce--esci:hover { background: var(--danger-soft); }
.menu__riga { height: 1px; margin: 6px 0; background: var(--border); }

/* La voce appena aggiunta, finché non ha un nome. */
.entry__term--vuoto { color: var(--text-muted); font-style: italic; font-weight: 400; }

/* La cella vuota è l'informazione: si vede che manca, senza gridare. */
.grid .grid-cell--missing { background: repeating-linear-gradient(
    -45deg,
    transparent, transparent 6px,
    color-mix(in srgb, var(--border) 45%, transparent) 6px,
    color-mix(in srgb, var(--border) 45%, transparent) 7px
); }
.translation-missing { color: var(--text-muted); opacity: 0.6; }
.translation-locked {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: var(--text-muted);
    opacity: 0.65;
}
.grid .grid-cell--locked {
    background: var(--bg);
    cursor: default;
}
.translation-locked[data-tip] { position: relative; }
.translation-locked[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    z-index: 20;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    padding: 7px 11px;
    border-radius: var(--radius-sm);
    background: #1e293b;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgb(15 23 42 / 28%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 160ms ease, visibility 160ms ease;
}
.translation-locked[data-tip]:hover::after {
    opacity: 1;
    visibility: visible;
}

.entry__badge--warn { color: var(--accent-text); font-weight: 600; }

/* Il lampo di conferma dopo una modifica in cella. */
.grid { --ag-value-change-value-highlight-background-color: var(--primary-soft); }