:root {
    /* Palette brand ONE Advisors & Accountants */
    --bg: #f6f3ee;          /* crema */
    --card: #ffffff;
    --card-2: #f1ece3;      /* tinta calda chiara */
    --border: #e6dfd3;      /* bordo caldo */
    --text: #272624;        /* dark warm */
    --text-dim: #8a8073;    /* grigio caldo */
    --navy: #1f2d3d;        /* navy header */
    --ink: #272624;         /* dark warm brand (footer/sezioni scure) */
    --gold: #cba16e;        /* oro brand */
    --gold-soft: rgba(203, 161, 110, .16);
    --green: #5b8c6e;       /* salvia (completa) */
    --taupe: #b9b0a2;       /* da avviare */
    --coral: #e84a43;       /* danger/accento */
    /* Raggi: tre soli valori ammessi in tutta l'interfaccia — 0 (spigolo vivo,
       o un lato che si unisce a un altro elemento), --radius, --radius-pill. */
    --radius: 6px;          /* card, tabelle, box, controlli: tutto ciò che ha uno spigolo */
    --radius-pill: 999px;   /* pill, chip e badge: tondo pieno */
    --shadow: 0 1px 2px rgba(39,38,36,.04), 0 10px 28px rgba(39,38,36,.07);
    /* Metriche condivise dai controlli (input/select/textarea/button): stessa
       altezza ovunque, definita una volta sola. Il raggio è --radius. */
    --control-h: 36px;      /* altezza unica di input, select e pulsanti */
    --control-h-sm: 28px;   /* variante compatta (.is-sm) e pulsanti-icona */
    --control-pad-x: 12px;
    --control-font: 13px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Controlli base ──────────────────────────────────────────────
   Gli stili stanno sui tag, non su una classe: ogni input/select/
   textarea/button è coerente per default e serve una classe solo per
   cambiare colore. I componenti con look proprio (search bar, dots-menu,
   stage-select dei Deal, timesheet…) hanno regole più specifiche che
   vincono su queste. */
input[type="text"], input[type="email"], input[type="number"],
input[type="password"], input[type="search"], input[type="url"],
input[type="tel"], input[type="date"], select, textarea {
    width: 100%; height: var(--control-h);
    padding: 0 var(--control-pad-x);
    border: 1px solid var(--border); border-radius: var(--radius);
    font: inherit; font-size: var(--control-font);
    background: var(--card); color: var(--text); outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); }
textarea { height: auto; padding: 9px var(--control-pad-x); resize: vertical; min-height: 80px; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; cursor: pointer; }

/* Select: freccia custom al posto del triangolo nativo del browser. */
select {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8073' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center;
}

/* Pulsante base: altezza, font e raggio identici a input/select. Vale per il
   tag `button` e per qualunque elemento che porti una classe .btn-* — in molti
   punti il "pulsante" è un <a> o una <label>, e deve essere indistinguibile.
   Le classi servono solo a cambiare colore (e .is-sm l'altezza). */
button, .btn, .btn-primary, .btn-secondary, .btn-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer; white-space: nowrap;
    height: var(--control-h); padding: 0 14px;
    border: 1px solid var(--border); border-radius: var(--radius);
    font: inherit; font-size: var(--control-font); font-weight: 600; line-height: 1;
    background: var(--card-2); color: var(--navy); text-decoration: none;
    transition: background .15s, border-color .15s;
}
button:hover, .btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-danger:hover {
    background: var(--gold-soft); border-color: var(--gold);
}
/* `display` sopra batte il [hidden] del browser: senza questa riga l'attributo
   hidden non nasconde un pulsante. Vale per tutta la piattaforma. */
[hidden] { display: none !important; }
button svg, .btn svg, .btn-primary svg, .btn-secondary svg, .btn-danger svg { width: 14px; height: 14px; }

/* Pulsante-icona quadrato: quello che compare nelle righe di tabella e nelle
   testate dei pannelli. Una misura sola per tutti — prima ce n'erano quattro. */
.btn-icon, .ts-act {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: var(--control-h-sm); height: var(--control-h-sm); padding: 0;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card); color: var(--text-dim); cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.btn-icon:hover, .ts-act:hover { background: var(--card-2); color: var(--navy); border-color: var(--gold); }
.btn-icon svg, .ts-act svg { width: 14px; height: 14px; }

body {
    font-family: "Raleway", system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

h1, h2, .kpi-value, .login-brand strong {
    font-family: "Poppins", system-ui, sans-serif;
}

/* ---------- Page: una schermata, no scroll ---------- */
.page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 22px;
    overflow: hidden;
}
body.has-dock .page { margin-left: 196px; }

/* ---------- Cards ---------- */
.card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
    display: flex; flex-direction: column; min-height: 0;
}
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex: 0 0 auto; }
.card-head h2 { font-size: 14px; font-weight: 600; color: var(--navy); }
.card-tag { font-size: 10.5px; color: var(--text-dim); background: var(--card-2); padding: 3px 9px; border-radius: var(--radius-pill); }
.kpi { flex-direction: column; gap: 4px; padding: 12px 16px; }
.kpi-label { color: var(--text-dim); font-size: 12px; font-weight: 500; }
.kpi-value { font-size: 30px; font-weight: 700; letter-spacing: -1px; line-height: 1; color: var(--navy); }
.table-wrap { flex: 2.2 1 0; }
/* ---------- Lista attività ---------- */
.table-wrap {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
    display: flex; flex-direction: column;
}
.table-wrap > header {
    font-family: "Poppins", sans-serif;
    padding: 13px 16px; border-bottom: 1px solid var(--border);
    font-size: 11px; color: var(--gold);
    text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.table-scroll { overflow-y: auto; flex: 1 1 0; min-height: 0; }
/* Tabelle: stile guidato dai tag standard, scoping sul contenitore di scroll
   (.table-scroll, presente in ogni tabella). Nessuna classe sul <table> —
   così è una classe in meno su cui sbagliare. */
.table-scroll table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-scroll thead th {
    position: sticky; top: 0; background: var(--card);
    text-align: left; padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 11px; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.table-scroll td { padding: 11px 16px; border-bottom: 1px solid var(--border); }
.table-scroll tbody tr:last-child td { border-bottom: 0; }
.table-scroll tr.row-in_corso td { background: var(--gold-soft); }
.table-scroll .strong { font-weight: 600; color: var(--navy); }

.pill {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; font-weight: 600;
    line-height: 1.4;
}
/* Varianti colore semantiche: quattro coppie, non quattordici nomi di stato.
   .is-sm è la vecchia .pill-mini (badge minuscolo maiuscolo). */
.pill.is-sm {
    font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: 2px 6px; font-style: normal;
}
/* Le priorità (low/medium/high) arrivano dalla view come chiave: sono gli stessi
   tre colori di taupe/gold/coral, quindi condividono la regola. */
.pill--gold,  .pill--medium { background: var(--gold-soft); color: #9a7339; }
.pill--green                { background: rgba(91,140,110,.16); color: var(--green); }
.pill--taupe, .pill--low    { background: rgba(185,176,162,.22); color: #7d7466; }
.pill--coral, .pill--high   { background: rgba(232,74,67,.14); color: var(--coral); }
/* ---------- Sidebar fissa (sinistra, solo icone) ---------- */
/* Sidebar larga: l'etichetta sta accanto all'icona invece di apparire come
   tooltip al passaggio del mouse — una voce si legge senza doverla cercare. */
.dock {
    position: fixed; left: 0; top: 0; width: 196px; height: 100vh; z-index: 60;
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 18px 12px;
    background: var(--ink);
    box-shadow: 4px 0 24px rgba(39,38,36,.10);
    overflow-y: auto;
}
.dock-logo {
    width: 100%; height: auto; margin: 0 0 16px; align-self: center;
    filter: brightness(0) invert(1); opacity: .9;
}
.dock-item {
    position: relative;
    display: flex; align-items: center; gap: 11px;
    min-height: var(--control-h); padding: 0 10px; border-radius: var(--radius);
    color: rgba(255,255,255,.7); text-decoration: none;
    transition: background .15s, color .15s;
}
.dock-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.dock-item:hover { background: rgba(255,255,255,.10); color: #fff; }
.dock-item.active { background: var(--gold); color: var(--ink); }
.dock-tip {
    font-size: 13px; font-weight: 500; white-space: nowrap;
    font-family: "Raleway", sans-serif;
    overflow: hidden; text-overflow: ellipsis;
}
.dock-tip small { opacity: .6; font-size: 10.5px; margin-left: 3px; }

/* Footer della sidebar: nome dell'account loggato + logout, spinto in basso. */
/* Il separatore va da bordo a bordo: i margini negativi annullano il padding
   laterale della dock, il padding interno riallinea il contenuto alle voci. */
.dock-user {
    margin: auto -12px 0; padding: 12px 12px 0;
    display: flex; align-items: center; gap: 10px;
    border-top: 1px solid rgba(255,255,255,.10);
}
.dock-user-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.dock-user-name {
    font-size: 13px; font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dock-user-role { font-size: 11px; color: rgba(255,255,255,.55); text-transform: capitalize; }
.dock-user-logout {
    flex-shrink: 0; width: var(--control-h); height: var(--control-h); padding: 0;
    display: grid; place-items: center; border-radius: var(--radius);
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.75); cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.dock-user-logout:hover { background: rgba(232,74,67,.18); color: #fff; border-color: rgba(232,74,67,.5); }
.dock-user-logout svg { width: 17px; height: 17px; }

/* ---------- Timesheet ---------- */
.ts-top { display: flex; gap: 12px; flex: 0 0 auto; }
.ts-title-card {
    flex-direction: row; align-items: center; gap: 12px;
    padding: 12px 18px; flex: 0 0 auto;
}
.ts-title { font-family: "Poppins", sans-serif; font-size: 16px; font-weight: 600; color: var(--navy); }
.ts-running-list {
    flex: 1 1 0; min-width: 0; display: flex; gap: 12px; overflow-x: auto; padding-bottom: 2px;
}
.ts-running {
    flex-direction: row; align-items: center; gap: 14px; flex: 0 0 auto;
    min-width: 340px; padding: 12px 18px;
    background: linear-gradient(0deg, var(--gold-soft), var(--gold-soft)), var(--card);
    border-color: rgba(203,161,110,.5);
}
.ts-running-dot {
    width: 11px; height: 11px; border-radius: 50%; background: var(--coral); flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(232,74,67,.5); animation: pulse 1.6s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(232,74,67,.5); }
    70% { box-shadow: 0 0 0 9px rgba(232,74,67,0); }
    100% { box-shadow: 0 0 0 0 rgba(232,74,67,0); }
}
.ts-running-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ts-running-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #9a7339; font-weight: 600; }
.ts-running-task { font-size: 14px; color: var(--navy); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-timer { margin-left: auto; font-family: "Poppins", sans-serif; font-size: 24px; font-weight: 700; color: var(--navy); letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.ts-running-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.ts-btn-pausa, .ts-btn-ripresa, .ts-stop {
    width: var(--control-h); height: var(--control-h); border-radius: var(--radius); flex-shrink: 0; cursor: pointer;
    background: var(--coral); border: 0; color: #fff; display: grid; place-items: center;
}
.ts-btn-pausa { background: #9a7339; }
.ts-btn-pausa:hover { background: #8a6a29; }
.ts-btn-ripresa { background: var(--green); }
.ts-btn-ripresa:hover { background: #4a7a5e; }
.ts-stop:hover { background: #d83a33; }
.ts-stop svg, .ts-btn-pausa svg, .ts-btn-ripresa svg { width: 16px; height: 16px; }

/* Barra nuova voce */
/* Barra "nuova voce": sta sulla pagina come la toolbar di Clients, senza
   riquadro bianco attorno — bastano i controlli a darle forma. */
.ts-new { display: flex; align-items: flex-end; gap: 10px; flex: 0 0 auto; }
.ts-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ts-field-grow { flex: 1 1 0; }
.ts-field > span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); font-weight: 600; }
.ts-field select, .ts-field input { max-width: 190px; }
.ts-field-grow input { max-width: none; width: 100%; }
/* Corpo: tabella + riepilogo */
.ts-body { flex: 1 1 0; min-height: 0; display: flex; gap: 12px; }
/* Colonna voci: barra filtro sopra, tabella che riempie il resto in altezza. */
.ts-entries { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.ts-entries .table-wrap { flex: 1 1 0; min-height: 0; }
/* Nel timesheet la colonna voci sta accanto al riepilogo e si prende tre quarti. */
.ts-body > .ts-entries { flex: 3 1 0; }
.ts-side { flex: 1 1 0; min-width: 220px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.ts-side .ts-summary { min-width: 0; }
.ts-descr { color: var(--text-dim); }
.ts-empty td { text-align: center; color: var(--text-dim); padding: 40px 16px; }
.ts-running form { display: flex; }

/* Barra filtro periodo: sta sopra la tabella come la toolbar di Clients, senza
   fascia bianca né riga di separazione — sono i controlli a dare la forma. */
.ts-filterbar {
    display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
    padding: 0 0 10px;
}
/* Il sottotitolo, quando accompagna i comandi, sta sulla stessa riga: il suo
   margine sotto sbilancerebbe l'allineamento verticale. */
.ts-filterbar .tr-subhead { margin-bottom: 0; }
.ts-filter-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-dim); font-weight: 600; margin-right: 2px;
}
.ts-filter-sep { color: var(--taupe); }
/* Le date prendono forma e altezza dalla regola base di `input`: qui serve solo
   la larghezza, che altrimenti occuperebbe tutta la riga. */
.ts-filterbar input[type="date"] { width: auto; background: #fff; }
.ts-filter-reset { color: var(--text-dim); text-decoration: none; font-size: 12.5px; margin-left: 2px; }
.ts-filter-reset:hover { color: var(--coral); }

/* Azioni riga (modifica/elimina): forma e misura da .btn-icon. */
.ts-actions { white-space: nowrap; text-align: right; }
.ts-actions form { display: inline-block; margin: 0; }
.ts-act { vertical-align: middle; }
.ts-act-del:hover { background: rgba(232,74,67,.12); color: var(--coral); border-color: rgba(232,74,67,.4); }

/* Toast messaggi */
.ts-toasts { position: fixed; top: 14px; right: 18px; z-index: 70; display: flex; flex-direction: column; gap: 8px; }
.ts-toast {
    background: var(--green); color: #fff; font-size: 13px; font-weight: 600;
    padding: 10px 16px; border-radius: var(--radius); box-shadow: var(--shadow);
}
.ts-toast-err { background: var(--coral); }

/* Pagina modifica voce */
.ts-edit-card { width: min(480px, 100%); }
.ts-edit-times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ts-edit-times .login-field span em { font-style: normal; color: var(--taupe); font-size: 11px; }
.ts-edit-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.ts-edit-cancel { color: var(--text-dim); text-decoration: none; font-size: 14px; }
.ts-edit-cancel:hover { color: var(--navy); }
.ts-edit-card .btn-primary { margin-top: 0; padding: 0 26px; }
.tag-nofatt {
    margin-left: 6px; font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--taupe); vertical-align: middle;
}
.ts-summary { flex: 1 1 0; min-width: 220px; }
.ts-summary-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.ts-sum-row {
    display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
    padding: 9px 2px; border-bottom: 1px solid var(--border);
}
.ts-sum-name { font-weight: 600; color: var(--navy); }
.ts-sum-h { font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ts-sum-cost { font-size: 13px; font-weight: 600; color: var(--green); min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.ts-sum-total {
    display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
    padding-top: 12px; margin-top: 6px; border-top: 2px solid var(--border);
    font-family: "Poppins", sans-serif; font-weight: 700; color: var(--navy);
}
.ts-sum-total span:last-child { color: var(--green); text-align: right; }
.ts-summary-nocost .ts-sum-row,
.ts-summary-nocost .ts-sum-total { grid-template-columns: 1fr auto; }
/* ---------- Anagrafiche ---------- */
.anag-head { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.anag-tabs { display: flex; gap: 10px; }
.anag-tabs a {
    display: inline-flex; align-items: center;
    height: var(--control-h); padding: 0 18px;
    border-radius: var(--radius); text-decoration: none;
    font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 600;
    color: var(--text-dim); background: var(--card); border: 1px solid var(--border);
}
.anag-tabs a:hover { color: var(--navy); }
/* Tab attiva: il bordo prende il colore del testo, altrimenti sparirebbe
   contro lo sfondo navy e la pillola perderebbe la sua sagoma. */
.anag-tabs a.active { background: var(--navy); color: var(--gold); border-color: var(--gold); }
.anag-empty { color: var(--text-dim); padding: 20px 2px; }

/* ---------- Margine ---------- */
.marg-side .ts-summary-scroll { gap: 0; }
.marg-sum-row { grid-template-columns: 1fr 55px 75px 55px; }
.marg-period { display: flex; align-items: center; gap: 6px; }
.marg-form { display: flex; align-items: center; margin: 0; }
.marg-input { height: var(--control-h-sm); }
.marg-pos { color: var(--green); }
.marg-neg { color: var(--coral); }

/* ---------- Login ---------- */
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--bg); }
.login-card {
    width: min(360px, 100%);
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 14px;
}
.login-brand { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.login-logo { height: 56px; width: auto; }
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field span { font-size: 12px; color: var(--text-dim); }
.login-field input { font-size: 14px; }
.login-card .btn-primary { margin-top: 6px; width: 100%; }
.login-error {
    background: rgba(232,74,67,.1); border: 1px solid rgba(232,74,67,.3);
    color: var(--coral); font-size: 12.5px; padding: 9px 12px; border-radius: var(--radius);
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
/* Sotto i 900px la sidebar larga toglie troppo spazio al contenuto: torna a sole
   icone, con l'etichetta di nuovo come tooltip al passaggio del mouse. */
@media (max-width: 900px) and (min-width: 481px) {
    body.has-dock .page { margin-left: 64px; }
    .dock { width: 64px; align-items: center; padding: 16px 0; gap: 10px; }
    .dock-logo { align-self: center; margin: 0 0 6px; }
    .dock-item { width: 46px; height: 46px; min-height: 0; padding: 0; justify-content: center; border-radius: var(--radius); }
    .dock-tip {
        position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
        background: var(--ink); color: #fff; padding: 5px 10px; border-radius: var(--radius);
        opacity: 0; pointer-events: none; transition: opacity .15s; font-size: 12px;
    }
    .dock-item:hover .dock-tip { opacity: 1; }
    /* Sidebar a sole icone: il footer utente non ci sta, resta il logout in tondo. */
    .dock-user { flex-direction: column; padding: 8px 0 2px; gap: 6px; }
    .dock-user-info { display: none; }
}

@media (max-width: 680px) {
    .page { padding-left: 18px; padding-right: 18px; }
}

/* ---------- Mobile (smartphone, <=480px) ----------
   Il layout desktop è single-screen (100vh, overflow:hidden) e sidebar fissa
   a sinistra: su schermo stretto va in scroll verticale naturale e la sidebar
   diventa una bottom-bar orizzontale, pattern standard mobile. Nessuna modifica
   all'HTML: si riusano gli stessi elementi (.dock, .dock-item, .page, ecc.). */
@media (max-width: 480px) {
    body.has-dock .page { margin-left: 0; margin-bottom: 60px; }
    .page {
        height: auto; min-height: 100vh; overflow: visible;
        padding: 12px 14px 14px;
    }

    /* Sidebar → bottom nav orizzontale */
    .dock {
        position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: 60px;
        flex-direction: row; justify-content: space-around; align-items: center;
        padding: 6px 8px; gap: 0; z-index: 80;
    }
    .dock-logo { display: none; }
    /* Su touch tornano le sole icone: l'etichetta non ci sta in orizzontale. */
    .dock-item { width: 42px; height: 42px; min-height: 0; padding: 0; justify-content: center; border-radius: var(--radius); }
    .dock-tip { display: none; }
    /* Nella bottom-bar il footer utente non ha senso: via. */
    .dock-user { display: none; }

    /* Card impilate invece che affiancate */
    .kpi-grid { grid-template-columns: 1fr; }
    .dash-mid { flex-direction: column; }
    .dash-mid .panel-bar, .dash-mid .dash-pie { flex: none; }
    .pies-grid { grid-template-columns: repeat(2, 1fr); }

    /* Timesheet: timer in corso, form nuova voce e corpo tabella+riepilogo
       impilati verticalmente invece che affiancati. */
    .ts-top { flex-direction: column; }
    .ts-running-list { overflow-x: auto; }
    .ts-new { flex-wrap: wrap; }
    .ts-field select, .ts-field input { max-width: none; width: 100%; }
    .ts-body { flex-direction: column; }
    .ts-entries, .ts-side { flex: none; width: 100%; }
    .table-wrap { max-height: 60vh; }

    /* Anagrafiche / Deal: stessa logica, header e toolbar vanno a capo */
    .anag-head { flex-wrap: wrap; gap: 10px; }
    .anag-toolbar { flex: 1 1 100%; }
    .tr-board { grid-template-columns: 1fr; overflow: visible; }
    .tr-col { min-width: 0; max-height: 50vh; }

    /* Pannelli laterali: a schermo intero invece che 420px fissi */
    .side-panel { width: 100%; max-width: none; }

    /* Impostazioni: colonne impilate */
    .set-grid { grid-template-columns: 1fr; }
    .set-pair { grid-template-columns: 1fr; }
}

/* Resti della pagina Scadenze, ancora usati altrove: la nota in grigio accanto
   a un nome e i select dentro le righe di tabella. */
.scad-entity { font-size: 11px; color: var(--text-dim); }

/* ---------- Impostazioni ---------- */
.set-page { flex: 1 1 0; min-height: 0; overflow-y: auto; padding-right: 4px; }

.set-hero {
    /* .card è flex-column: qui serve una riga. */
    flex-direction: row !important;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    margin-bottom: 14px;
}
.set-hero-txt h1 {
    font-size: 19px; font-weight: 600; color: var(--navy); line-height: 1.2;
}
.set-hero-txt span { font-size: 12px; color: var(--text-dim); }
.set-hero-role {
    margin-left: auto; font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; padding: 5px 11px; border-radius: var(--radius-pill);
    background: var(--gold-soft); color: #9a7339;
}

/* griglia: profilo a sinistra, integrazioni a destra */
.set-grid { display: grid; grid-template-columns: 340px 1fr; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .set-grid { grid-template-columns: 1fr; } }

.set-card { padding: 20px 22px; display: block; }
.set-card h2 {
    font-size: 14px; font-weight: 600; color: var(--navy);
    display: flex; align-items: center; gap: 9px; margin-bottom: 3px;
}
.set-card .set-sub {
    font-size: 11.5px; color: var(--text-dim); line-height: 1.5; margin-bottom: 16px;
}

/* campi */
.set-row { margin-bottom: 15px; }
.set-row:last-of-type { margin-bottom: 0; }
.set-label {
    display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
    font-size: 12px; font-weight: 500; color: var(--text);
}
.set-row input { width: 100%; }
.set-row input::placeholder { color: var(--taupe); }
.set-hint {
    display: block; margin-top: 5px; font-size: 10.5px; line-height: 1.5; color: var(--text-dim);
}
.set-hint code {
    font-size: 10px; padding: 1px 4px; border-radius: var(--radius);
    background: var(--card-2); color: var(--navy);
}
.set-err { display: block; margin-top: 4px; font-size: 10.5px; color: var(--coral); font-style: normal; }

/* pillole di stato */

/* blocchi integrazione */
.set-integr { display: flex; flex-direction: column; gap: 14px; }
.set-block { padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.set-block:last-of-type { padding-bottom: 0; border-bottom: 0; }
.set-block-head {
    display: flex; align-items: center; gap: 9px; margin-bottom: 4px;
}
.set-block-head h3, .side-people-head h3 {
    font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 600; color: var(--navy);
}
.set-block-sub { font-size: 11px; color: var(--text-dim); margin-bottom: 14px; line-height: 1.5; }
.set-block-sub a { color: var(--navy); font-weight: 600; }

.set-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .set-pair { grid-template-columns: 1fr; } }

/* bottoni */
.set-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; }

/* messaggi */
.set-flash {
    padding: 10px 14px; border-radius: var(--radius); font-size: 12.5px; margin-bottom: 12px;
    background: rgba(91,140,110,.12); color: var(--green);
}
.set-flash.is-err { background: rgba(232,74,67,.1); color: var(--coral); }
/* risorse / link utili */


/* ---------- Impostazioni: Team & accessi ---------- */
.set-team { margin-top: 14px; }
.set-team-table { font-size: 12.5px; }
.set-team-table th { font-size: 10.5px; }
.set-team-table code { font-size: 11.5px; background: var(--card-2); padding: 1px 6px; border-radius: var(--radius); }
.set-team-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.set-team-pwd { display: flex; gap: 5px; align-items: center; }
.set-team-add-h {
    font-family: "Poppins", sans-serif; font-size: 12.5px; font-weight: 600;
    color: var(--navy); margin: 20px 0 10px;
}
.set-team-add { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.set-team-add input, .set-team-add select { width: auto; }
.set-team-add input[name="nome"] { min-width: 200px; }

/* ---------- Trattative (pipeline board) ---------- */
.tr-kpis { display: flex; gap: 16px; align-items: center; margin-left: auto; }
.tr-kpi { font-size: 12.5px; color: var(--text-dim); }
.tr-kpi strong { color: var(--navy); font-size: 15px; }

.tr-board {
    flex: 1 1 0; min-height: 0; display: grid;
    grid-template-columns: repeat(7, 1fr); gap: 10px; overflow: hidden;
}
.tr-col {
    display: flex; flex-direction: column; min-height: 0;
    background: var(--card-2); border-radius: var(--radius); padding: 10px;
}
.tr-col-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 8px; padding: 0 2px;
}
.tr-col-name { font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 600; color: var(--navy); }
.tr-col-meta { font-size: 10.5px; color: var(--text-dim); }
.tr-col-won .tr-col-name { color: var(--green); }
.tr-col-lost .tr-col-name { color: var(--taupe); }
.tr-col-body { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; border-radius: var(--radius); transition: background .12s; }
.tr-col-over { background: var(--gold-soft); }
.tr-card[draggable] { cursor: grab; }
.tr-dragging { opacity: .4; }

.tr-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 10px; box-shadow: 0 1px 2px rgba(39,38,36,.03);
}
.tr-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.tr-card-azienda { font-weight: 600; font-size: 12.5px; color: var(--navy); }
.tr-card-val { font-size: 12px; font-weight: 600; color: var(--gold); white-space: nowrap; }
.tr-card-serv { font-size: 11px; color: var(--text); margin-top: 3px; }
.tr-card-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: 10.5px; color: var(--text-dim); }
.tr-empty { text-align: center; color: var(--taupe); font-size: 12px; padding: 6px 0; }
.tr-hint { flex: 0 0 auto; font-size: 11px; color: var(--text-dim); padding: 2px 4px; }

/* Stage select nella tabella Deal: sostituisce il rendering nativo del browser */
.tr-move select {
    appearance: none; -webkit-appearance: none;
    padding: 5px 24px 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill);
    font: inherit; font-size: 11px; font-weight: 600; background: var(--card-2); color: var(--navy);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8073' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center;
}
.tr-move select:focus { outline: none; border-color: var(--gold); }

/* Barra azioni di massa (bulk) nella tabella Deal */
.tr-bulk-bar {
    display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
    padding: 9px 14px; margin-bottom: 8px; border-radius: var(--radius);
    background: var(--gold-soft); border: 1px solid rgba(203,161,110,.5);
    font-size: 12.5px; font-weight: 600; color: var(--navy);
}
.tr-bulk-select { width: auto; height: var(--control-h-sm); background: #fff; }

/* ---------- Procedures (markdown renderizzato) ---------- */
.proc-content {
    flex: 1 1 0; min-height: 0; overflow-y: auto;
    padding: 24px 28px; line-height: 1.6; font-size: 13.5px;
}
.proc-content h1 { font-family: "Poppins", sans-serif; font-size: 20px; color: var(--navy); margin-bottom: 10px; }
.proc-content h2 { font-family: "Poppins", sans-serif; font-size: 15px; color: var(--navy); margin: 22px 0 8px; }
.proc-content h3 { font-family: "Poppins", sans-serif; font-size: 13px; color: var(--navy); margin: 16px 0 6px; }
.proc-content p { margin-bottom: 10px; }
.proc-content ul, .proc-content ol { margin: 0 0 10px 22px; }
.proc-content li { margin-bottom: 4px; }
.proc-content blockquote {
    border-left: 3px solid var(--gold); background: var(--card-2);
    padding: 8px 14px; border-radius: 0 var(--radius) var(--radius) 0; margin: 0 0 14px; color: var(--text-dim); font-size: 12.5px;
}
.proc-content table { border-collapse: collapse; width: 100%; margin-bottom: 14px; font-size: 12.5px; }
.proc-content th, .proc-content td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.proc-content th { background: var(--card-2); }
.proc-content code { background: var(--card-2); padding: 1px 5px; border-radius: var(--radius); font-size: 12px; }
.proc-content a { color: var(--gold); }

/* ---------- Pannello laterale (checkbox-hack, zero JS) ---------- */
/* Usato da Anagrafiche (dettaglio/modifica/aggiungi cliente) e Trattative     */
/* (modifica/aggiungi). Ogni istanza è isolata in un .side-instance: checkbox, */
/* backdrop e pannello sono fratelli SOLO all'interno della propria istanza,   */
/* così aprirne uno non fa comparire anche gli altri.                         */
/* display:contents: il wrapper non genera una propria box, quindi non conta come
   flex-item nel .page (niente gap/spazio rubato ai fratelli), ma i suoi figli
   restano nel DOM ai fini dei selettori CSS (~ funziona lo stesso). I figli sono
   comunque position:fixed, quindi si posizionano da soli fuori dal flusso. */
.side-instance { display: contents; }
.side-toggle { display: none; }
.side-backdrop {
    position: fixed; inset: 0; z-index: 90; cursor: pointer;
    background: rgba(39,38,36,.28); opacity: 0; pointer-events: none;
    transition: opacity .2s;
}
.side-panel {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(560px, 94vw);
    z-index: 91; background: var(--card); box-shadow: none;
    transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
    display: flex; flex-direction: column; padding: 22px; overflow-y: auto;
}
.side-toggle:checked ~ .side-backdrop { opacity: 1; pointer-events: auto; }
.side-toggle:checked ~ .side-panel { transform: translateX(0); box-shadow: -12px 0 40px rgba(39,38,36,.18); }
.side-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px; flex: 0 0 auto;
}
.side-panel-head h2 { font-family: "Poppins", sans-serif; font-size: 16px; font-weight: 600; color: var(--navy); }
.side-close {
    cursor: pointer; display: grid; place-items: center;
    width: var(--control-h-sm); height: var(--control-h-sm);
    border-radius: var(--radius);
    color: var(--text-dim); font-size: 15px; transition: background .15s;
}
.side-close:hover { background: var(--card-2); color: var(--navy); }
.side-panel-form { display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; }
.side-panel-form label {
    display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-dim);
}
.side-panel-check { flex-direction: row !important; align-items: center; gap: 8px !important; }
.side-panel-actions { display: flex; gap: 10px; margin-top: 4px; flex: 0 0 auto; }
.side-people-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.side-person-row {
    display: flex; align-items: baseline; gap: 8px; padding: 9px 12px; border-radius: var(--radius);
    background: var(--card-2); margin-bottom: 6px; cursor: pointer; text-decoration: none;
}
.side-person-row:hover { background: var(--gold-soft); }
.side-person-name, .side-form-name { font-size: 13px; font-weight: 600; color: var(--navy); }
.side-person-title { font-size: 11px; color: var(--text-dim); }

/* ---------- Menu a 3 puntini (azioni riga/card) ---------- */
.dots-menu { position: relative; display: inline-block; }
.dots-menu > summary {
    list-style: none; cursor: pointer; display: grid; place-items: center;
    width: var(--control-h-sm); height: var(--control-h-sm);
    border-radius: var(--radius);
    color: var(--text-dim); font-size: 17px; line-height: 1;
}
.dots-menu > summary::-webkit-details-marker,
.dots-menu > summary::marker { display: none; content: ""; }
.dots-menu > summary:hover { background: var(--card-2); color: var(--navy); }
.dots-menu-list {
    position: absolute; z-index: 30; right: 0; top: 34px; min-width: 150px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.dots-menu-list label, .dots-menu-list button, .dots-menu-list a {
    display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: var(--radius);
    font: inherit; font-size: 12.5px; color: var(--text); background: none; border: none; cursor: pointer;
    text-decoration: none;
}
.dots-menu-list label:hover, .dots-menu-list button:hover, .dots-menu-list a:hover { background: var(--card-2); }
.dots-menu-list .danger { color: var(--coral); }
/* ---------- Anagrafiche: tabella clienti semplice ---------- */
.anag-search-row { flex: 0 1 280px; display: flex; }
.anag-search-row input {
    border-radius: var(--radius) 0 0 var(--radius); border-right: 0;
}
.anag-search-row button {
    flex: 0 0 auto; padding: 0 12px;
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--card);
}
tr.anag-tr { cursor: pointer; }
tr.anag-tr:hover td { background: var(--card-2); }

/* Colonne nascoste nelle tabelle di Anagrafiche */
.col-hidden { display: none; }

.col-select { width: 40px; text-align: center; }
.col-select input { width: 16px; height: 16px; cursor: pointer; }

.sort-header {
    color: var(--text-dim); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
}
.sort-header:hover { color: var(--text-dim); }

.bulk-bar {
    display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
    padding: 10px 14px; margin-bottom: 10px; border-radius: var(--radius);
    background: var(--gold-soft); border: 1px solid rgba(203,161,110,.5);
    font-size: 13px; font-weight: 600; color: var(--navy);
}
.bulk-count { color: var(--text); }

.paginator {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    padding: 10px 16px; border-top: 1px solid var(--border);
    font-size: 13px; font-weight: 600;
}
/* Frecce: quadrate come gli altri pulsanti-icona, disabilitate restano al loro
   posto invece di sparire, così l'indicatore di pagina non si sposta. */
.paginator a, .paginator-disabled {
    display: inline-grid; place-items: center;
    width: var(--control-h-sm); height: var(--control-h-sm);
    border-radius: var(--radius); color: var(--navy); text-decoration: none;
}
.paginator a:hover { background: var(--card-2); }
.paginator a svg, .paginator-disabled svg { width: 16px; height: 16px; }
.paginator-info { color: var(--text-dim); font-weight: 500; }
.paginator-disabled { color: var(--taupe); }

/* ---------- Forms ---------- */
/* Le testate non ripetono più il nome della pagina (è già nella sidebar): qui
   restano solo le azioni, che vanno a destra. */
.tr-head { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 14px; }
.tr-head h1 { font-family: "Poppins", sans-serif; font-size: 18px; font-weight: 600; color: var(--navy); margin-right: auto; }
.tr-subhead { font-size: 13px; color: var(--text-dim); margin-bottom: 18px; line-height: 1.5; }
/* Riga di controlli affiancati: la stessa forma per ogni barra della piattaforma. */
.head-actions, .anag-toolbar, .contract-start, .ins-range, .ins-staff {
    display: flex; align-items: center; gap: 10px;
}
/* Ritorno alla pagina madre: quadrato alto come un pulsante normale, a filo
   sinistro sopra il contenuto. Vedi templates/dashboard/_back.html. */
.page-back {
    width: var(--control-h); height: var(--control-h);
    margin-bottom: 12px; align-self: flex-start;
}
/* Nella testata sta in riga col titolo: la spaziatura la dà il gap del flex,
   e il box del titolo è alto come il pulsante. */
.anag-head .page-back { margin-bottom: 0; }
.anag-head .ts-title-card { height: var(--control-h); padding: 0 16px; }
/* Il menu azioni della testata è alto come i pulsanti, non come quelli di riga. */
.head-menu > summary {
    width: var(--control-h); height: var(--control-h);
    border: 1px solid var(--border); background: var(--card);
}
.head-menu > summary:hover { border-color: var(--gold); }
.head-menu .dots-menu-list { top: calc(var(--control-h) + 6px); }
/* Varianti di colore dei pulsanti — forma e altezza le eredita da `button`.
   .btn-secondary è il default: esiste solo per retro-compatibilità nei template. */
.btn-link {
    display: inline; padding: 0; border: 0; background: none;
    color: var(--navy); font-size: 13px; font-weight: 600; text-decoration: none;
}
.btn-link:hover { color: var(--gold); background: none; }
.btn-link.danger { color: var(--coral); }
/* Le varianti piene scuriscono lo sfondo al passaggio e prendono il bordo oro,
   come i pulsanti chiari: l'evidenziazione è la stessa ovunque. */
.btn-primary { background: var(--navy); color: var(--gold); border-color: var(--navy); }
.btn-primary:hover { background: #16212d; border-color: var(--gold); }
.btn-danger { background: var(--coral); color: #fff; border-color: var(--coral); }
.btn-danger:hover { background: #d83a33; border-color: var(--gold); }

/* Modificatori condivisi: dimensione, varianti e posizione. */
.is-sm { height: var(--control-h-sm); padding: 0 12px; font-size: 12px; }
/* Campi compatti dentro tabelle e righe: si restringono al contenuto. */
.marg-period select, .scad-inline select, .set-team-table select, .set-team-pwd input {
    width: auto; height: var(--control-h-sm);
}
.is-ghost { background: transparent; }
/* Stacca l'elemento dal gruppo e lo manda a filo destro della sua riga flex. */
.is-end { margin-left: auto; }
.is-ghost:hover { background: var(--card-2); border-color: var(--gold); }
.btn-secondary.is-danger { color: var(--coral); border-color: rgba(232,74,67,.3); }
.btn-secondary.is-danger:hover { background: rgba(232,74,67,.08); border-color: var(--coral); }
.btn-block { width: 100%; justify-content: center; }

.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-field label { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.form-field input[type="file"] { padding: 7px 10px; cursor: pointer; }

/* Bottone "Choose file": il default del browser stona con la UI. Stile brand
   (come .btn-secondary) applicato a ogni input file della piattaforma. */
input[type="file"]::file-selector-button {
    margin-right: 12px; padding: 7px 13px; cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--radius);
    font: inherit; font-size: 12px; font-weight: 600;
    background: var(--card-2); color: var(--navy);
    transition: background .15s, border-color .15s;
}
input[type="file"]::file-selector-button:hover {
    background: var(--gold-soft); border-color: var(--gold);
}
.form-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.form-section-title { font-size: 15px; font-weight: 600; color: var(--navy); margin: 8px 0 2px; }
.form-errors { background: rgba(232,74,67,.1); border: 1px solid rgba(232,74,67,.3); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px; color: var(--coral); font-size: 13px; }
.form-errors ul { margin-left: 18px; }

.question-row {
    position: relative;
    background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 14px 40px 14px 34px;   /* spazio per handle a sinistra e ✕ a destra */
    margin-bottom: 12px;
    transition: opacity .12s, border-color .12s;
}
.question-row.q-dragging { opacity: .45; border-color: var(--gold); }
/* Handle di trascinamento: l'ordine si cambia qui, non digitando un numero. */
.q-handle {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    cursor: grab; color: var(--taupe); font-size: 15px; line-height: 1;
    user-select: none; padding: 4px 2px;
}
.q-handle:active { cursor: grabbing; }
.question-row:hover .q-handle { color: var(--text-dim); }
.q-remove {
    position: absolute; right: 8px; top: 10px;
    width: 26px; height: 26px; border-radius: var(--radius); cursor: pointer;
    background: transparent; border: 1px solid transparent; color: var(--taupe);
    font-size: 13px; line-height: 1;
}
.q-remove:hover { background: rgba(232,74,67,.1); border-color: rgba(232,74,67,.3); color: var(--coral); }
.q-delete-hidden { display: none; }   /* la checkbox DELETE la pilota il pulsante ✕ */
.q-grid {
    display: grid; grid-template-columns: 1.6fr 1fr 120px; gap: 12px; align-items: flex-end;
}
.q-testo { grid-column: 1; }
.q-tipo { grid-column: 2; }
.q-obbligatorio { grid-column: 3; }
.q-opzioni { grid-column: 1 / -1; display: none; }
.q-required { color: var(--coral); margin-left: 4px; }
.q-type {
    display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 7px; border-radius: var(--radius-pill); background: var(--gold-soft); color: #9a7339; margin-right: 6px;
}
.form-question-list { margin-left: 18px; }
.form-question-list > li { margin-bottom: 12px; line-height: 1.5; }
.q-choices { margin-left: 18px; margin-top: 6px; color: var(--text-dim); font-size: 12px; }

/* Le domande su due colonne: liberato lo spazio del riquadro invio (ora modale),
   la lista sfrutta tutta la larghezza. `break-inside: avoid` tiene una domanda e
   le sue opzioni nella stessa colonna. */
.form-question-cols { columns: 2; column-gap: 32px; }
.form-question-cols > li { break-inside: avoid; }
@media (max-width: 760px) { .form-question-cols { columns: 1; } }
.mt-2 { margin-top: 20px; }


.submission-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.submission-answers { display: flex; flex-direction: column; gap: 14px; }
.answer-row { background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.answer-question { font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.answer-type { font-size: 11px; color: var(--text-dim); font-weight: 500; margin-left: 6px; }
.answer-value { font-size: 13px; line-height: 1.5; }


/* Modale col link pubblico appena creato */
.fi-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; }
.fi-modal[hidden] { display: none; }
.fi-modal-backdrop { position: absolute; inset: 0; background: rgba(39,38,36,.45); }
.fi-modal-box {
    position: relative; z-index: 1; width: min(560px, 92vw);
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 22px;
}
.fi-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fi-modal-head h2 { font-family: "Poppins", sans-serif; font-size: 16px; font-weight: 600; color: var(--navy); }
.fi-link-row { display: flex; gap: 8px; margin-top: 14px; }
.fi-link-row input {
    flex: 1 1 auto; min-width: 0; background: var(--card-2);
}
@media (max-width: 900px) {
    .q-grid { grid-template-columns: 1fr 1fr; }
    .q-testo, .q-tipo, .q-obbligatorio, .q-opzioni { grid-column: auto; }
}
@media (max-width: 480px) {
    .q-grid { grid-template-columns: 1fr; }
    .tr-head { flex-wrap: wrap; gap: 10px; }
    .head-actions { flex-wrap: wrap; }
}
.side-form-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px; border-radius: var(--radius); background: var(--card-2); margin-bottom: 6px;
}

.checkbox-inline { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.checkbox-inline input { width: auto; margin: 0; }


/* Form di creazione firma: griglia 2 colonne che riusa .form-field */

/* ---------- Insights: alert, produttività, workflow (mockup 2026-07-23) ---------- */
.alert-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px; margin-bottom: 14px;
}
.ins-scroll .alert-grid { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; }
.alert-tile {
    display: flex; flex-direction: column; gap: 2px;
    padding: 11px 13px; border-radius: var(--radius);
    background: var(--card-2);
}
/* In Insights i riquadri sono card come tutte le altre: fondo bianco, etichetta
   sopra, numero grande sotto. Il numero dice già se c'è qualcosa da guardare. */
.card.alert-tile { padding: 12px 16px; gap: 4px; box-shadow: none; background: var(--card); }
/* Lo sfondo distingue i riquadri che chiedono attenzione da quelli a zero:
   a differenza dei KPI qui il colore dice qualcosa, quindi resta. */
.alert-tile.is-coral { background: rgba(232,74,67,.07); }
.alert-tile.is-gold  { background: var(--gold-soft); }
.alert-detail { font-size: 11px; color: var(--text-dim); }
/* Barra di produttività */
.meter { display: flex; align-items: center; gap: 9px; min-width: 190px; }
.meter-bar { flex: 1 1 auto; height: 7px; background: var(--card-2); border-radius: var(--radius); overflow: hidden; }
.meter-fill { display: block; height: 100%; border-radius: var(--radius); }
.meter-green { background: var(--green); }
.meter-gold  { background: var(--gold); }
.meter-coral { background: var(--coral); }
.meter-val { font-size: 12px; font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* Client productivity: ore per persona */
.cp-staff { display: flex; flex-wrap: wrap; gap: 4px; max-width: 320px; }
.cp-chip { font-size: 10.5px; padding: 2px 7px; border-radius: var(--radius-pill); background: var(--card-2); color: var(--text-dim); white-space: nowrap; }
.cp-over  { color: var(--coral); font-weight: 600; }
.cp-under { color: var(--green); font-weight: 600; }

/* Workflow: griglia dei periodi */
.wf-year select { width: auto; }
.wf-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.wf-month { text-align: center; width: 34px; }
.wf-done { background: rgba(91,140,110,.16); color: var(--green); font-weight: 600; }
.wf-periods { display: flex; flex-wrap: wrap; gap: 4px; }
.wf-period {
    display: inline-grid; place-items: center; width: 26px; height: 26px;
    border-radius: var(--radius); font-size: 11px; font-weight: 600;
    background: var(--card-2); color: var(--text-dim);
}
.wf-period.wf-done { background: rgba(91,140,110,.16); color: var(--green); }
.wf-period.wf-empty { opacity: .45; }
.wf-alert {
    margin-top: 12px; padding: 12px 14px; border-radius: var(--radius);
    background: rgba(232,74,67,.08); border: 1px solid rgba(232,74,67,.25);
    font-size: 12.5px; color: var(--text);
}
.wf-alert ul { margin: 6px 0 0 18px; color: var(--text-dim); }

/* Bottone in attesa: spinner + disabilitazione, per le azioni che richiedono
   secondi (upload di allegati, invio email). Senza segnale l'utente ripreme. */
.btn-primary.is-loading, .btn-secondary.is-loading, .btn-danger.is-loading {
    opacity: .75; cursor: progress;
}
.btn-primary.is-loading::before,
.btn-secondary.is-loading::before,
.btn-danger.is-loading::before {
    content: ""; width: 13px; height: 13px; flex-shrink: 0;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%; animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
button:disabled { cursor: not-allowed; }

/* ---------- Select ricercabile (static/js/searchable-select.js) ----------
   Sostituisce il menu nativo quando le opzioni sono centinaia. Il <select> resta
   nel DOM, nascosto, così il form invia lo stesso valore di prima. */
.ss-wrap { position: relative; }
.ss-native { display: none; }
.ss-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; height: var(--control-h); padding: 0 var(--control-pad-x);
    cursor: pointer; text-align: left;
    border: 1px solid var(--border); border-radius: var(--radius);
    font: inherit; font-size: var(--control-font); background: var(--card); color: var(--text);
    transition: border-color .15s;
}
.ss-toggle::after { content: "▾"; color: var(--text-dim); font-size: 11px; }
.ss-toggle:hover { border-color: var(--gold); }
.ss-toggle.is-empty { color: var(--taupe); }
.ss-wrap.is-open .ss-toggle { border-color: var(--gold); }
.ss-menu {
    position: absolute; z-index: 90; left: 0; right: 0; top: calc(100% + 4px);
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.ss-menu[hidden] { display: none; }
.ss-search {
    width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius);
    font: inherit; font-size: 13px; background: var(--card-2); color: var(--text); outline: none;
}
.ss-search:focus { border-color: var(--gold); }
.ss-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.ss-group {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--gold); padding: 8px 8px 3px;
}
.ss-opt {
    display: block; width: 100%; text-align: left; padding: 7px 9px; border-radius: var(--radius);
    font: inherit; font-size: 13px; color: var(--text); background: none; border: 0; cursor: pointer;
}
.ss-opt:hover, .ss-opt:focus { background: var(--card-2); outline: none; }
.ss-opt.is-selected { background: var(--gold-soft); color: #9a7339; font-weight: 600; }
.ss-empty { padding: 10px 9px; font-size: 12.5px; color: var(--text-dim); }

/* ---------- Contratti ---------- */
/* Preparazione contratto: una riga di controlli nella toolbar, non un form
   a sé — i due select e il pulsante stanno accanto agli altri comandi. */
.contract-start select { width: auto; min-width: 190px; }

.contract-warn, .contract-ok {
    padding: 12px 14px; border-radius: var(--radius); font-size: 13px; margin-bottom: 16px; line-height: 1.5;
}
.contract-warn { background: var(--gold-soft); border: 1px solid rgba(203,161,110,.4); color: #7a5a2e; }
.contract-ok { background: rgba(91,140,110,.12); border: 1px solid rgba(91,140,110,.35); color: var(--green); }

.contract-actions { grid-column: 1 / -1; flex-wrap: wrap; }
@media (max-width: 760px) { .contract-fields { grid-template-columns: 1fr; } }

/* Un campo mancante si vede prima di leggerlo: bordo e etichetta in rosso. */
.form-field.is-missing input, .side-panel-form label.is-missing input,
.side-panel-form label.is-missing select {
    border-color: rgba(232,74,67,.55); background: rgba(232,74,67,.04);
}
.side-panel-form label.is-missing { color: var(--coral); }
.field-flag {
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    padding: 2px 6px; border-radius: var(--radius-pill); margin-left: 6px;
    background: rgba(232,74,67,.14); color: var(--coral);
}
.field-src { font-size: 10.5px; color: var(--taupe); margin-left: 6px; font-weight: 500; }

.fi-modal-wide { max-width: 620px; width: calc(100% - 32px); }
.tpl-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.tpl-form .form-actions { grid-column: 1 / -1; }
@media (max-width: 620px) { .tpl-form { grid-template-columns: 1fr; } }
.tpl-list { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.tpl-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--radius); background: var(--card-2);
}
.tpl-row form { display: inline; }
.tpl-name { flex: 1 1 auto; font-size: 13px; font-weight: 600; color: var(--navy); }

/* Parametri contratto in Settings */
.param-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.param-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-dim); font-weight: 600; }
.param-form input { width: auto; }
.param-form input[name="anno"] { width: 90px; }

/* Blocco Files nel pannello cliente: documenti per anno e tipologia */
.side-files-block { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; }
.files-year { margin-bottom: 12px; }
.files-year-head {
    font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 600; color: var(--navy);
    margin-bottom: 6px;
}
.files-topic {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--gold); margin: 8px 0 4px;
}
.files-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 10px; border-radius: var(--radius); background: var(--card-2);
    text-decoration: none; color: var(--text); margin-bottom: 3px;
}
.files-row:hover { background: var(--gold-soft); }
.files-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-date { font-size: 11px; color: var(--text-dim); flex-shrink: 0; }
/* Switch on/off nelle impostazioni */
.set-switch { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.set-switch input { width: 16px; height: 16px; cursor: pointer; }

/* Pagina dettaglio contatto: la pagina non scorre, scorrono le due colonne. */
.cd-grid {
    display: grid; grid-template-columns: 2fr 1fr; gap: 12px; align-items: stretch;
    flex: 1 1 0; min-height: 0;
}
.cd-grid > .card, .cd-side { overflow-y: auto; min-height: 0; }
@media (max-width: 900px) { .cd-grid { grid-template-columns: 1fr; } }
.cd-form, .contract-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.cd-form .cd-full { grid-column: 1 / -1; }
@media (max-width: 600px) { .cd-form { grid-template-columns: 1fr; } }
.cd-side { display: flex; flex-direction: column; gap: 12px; }
/* Pagina di creazione (New company / New person): un solo blocco, form a 2 colonne. */
.cd-single .cd-form { max-width: 720px; }
.cd-side-head { display: flex; justify-content: space-between; align-items: center; }
.cd-assign-form { display: flex; gap: 8px; margin: 10px 0; }
.cd-assign-form select { flex: 1 1 auto; min-width: 0; }
/* Riga contratto: tutta l'area è cliccabile come un pulsante, non un link. */
.contract-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; margin-bottom: 8px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-soft, #faf8f4); color: var(--navy);
    text-decoration: none; cursor: pointer;
    transition: background .12s, border-color .12s;
}
.contract-row:hover { background: var(--gold-soft); border-color: var(--gold); }
.contract-row .side-form-name { font-weight: 600; }
.contract-row.is-disabled { cursor: default; color: var(--text-dim); }
.contract-row.is-disabled:hover { background: var(--bg-soft, #faf8f4); border-color: var(--border); }

/* ---------- Insights (/dash/) ----------
   La dashboard del mockup 07-23. Riusa card, kpi, alert-tile, pill, meter e
   fi-modal: qui c'è solo la disposizione delle sue finestre. */
/* Scorre senza mostrare la barra: il contenuto arriva a filo del bordo e non
   c'è una colonna vuota a destra. Rotella e trascinamento funzionano lo stesso. */
.ins-scroll {
    flex: 1 1 0; min-height: 0; overflow-y: auto;
    scrollbar-width: none; -ms-overflow-style: none;
}
.ins-scroll::-webkit-scrollbar { width: 0; height: 0; }
.ins-row { display: flex; gap: 12px; margin-bottom: 14px; align-items: stretch; }
.ins-row-2 { display: grid; grid-template-columns: 1fr 1fr; }
/* Ore del periodo: occupa la riga intera, totale a sinistra e legenda al centro. */
.ins-hours { margin-bottom: 14px; gap: 14px; }
.ins-hours-top { display: flex; align-items: flex-start; gap: 20px; }
.ins-hours-top .kpi-value { display: block; }
.ins-hours-top .card-tag { margin-left: auto; flex-shrink: 0; }
.ins-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 11.5px; color: var(--text-dim); }
.ins-legenda-voce { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ins-legenda-voce i { width: 9px; height: 9px; border-radius: var(--radius-pill); flex-shrink: 0; }
.ins-legenda-voce strong { color: var(--navy); }

.ins-days { display: flex; align-items: flex-end; gap: 14px; height: 120px; }
.ins-day { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; }
/* La barra del giorno è il contenitore; dentro, una fetta per persona, ognuna
   alta la sua quota di quel giorno. Impilate dal basso, come si legge. */
.ins-day-bar {
    width: 100%; max-width: 96px; margin-top: auto; min-height: 4px;
    display: flex; flex-direction: column-reverse;
    border-radius: var(--radius); overflow: hidden; background: var(--card-2);
}
/* I giorni non ancora arrivati restano visibili ma spenti: la settimana si
   legge per intero, senza far sembrare un buco il futuro. */
.ins-day-bar.is-futuro { background: var(--card-2); }
.ins-quota { display: block; width: 100%; }
.ins-day-label { font-size: 10.5px; color: var(--text-dim); font-weight: 600; }
/* Riquadri che aprono un modale o portano a una pagina. */
.ins-link { gap: 3px; cursor: pointer; text-decoration: none; transition: border-color .15s; }
.ins-link:hover { border-color: var(--gold); }
.ins-link strong { font-size: 13px; color: var(--navy); }
/* Solo i figli diretti che non hanno già un ruolo tipografico: altrimenti
   questa regola rimpiccioliva anche il numero delle card che aprono un modale. */
.ins-link > span:not([class]) { font-size: 11.5px; color: var(--text-dim); }

/* To-do list e calendario affiancati. */
.ins-todo-row { align-items: stretch; }
.ins-todo-row .table-wrap { flex: 3 1 0; min-width: 0; }
/* Scorre senza mostrare la barra, come il corpo della pagina. Vale solo qui:
   nelle altre tabelle la barra dice quanto contenuto resta sotto. */
.ins-todo-row .table-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.ins-todo-row .table-scroll::-webkit-scrollbar { width: 0; height: 0; }
.ins-todo-filtri {
    display: flex; gap: 10px; align-items: center;
    padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.ins-todo-filtri select { width: auto; }
.ins-flag {
    width: auto; height: auto; padding: 0; border: 0; background: none;
    color: var(--taupe); font-size: 14px; line-height: 1;
}
.ins-flag:hover { background: none; border: 0; color: var(--text-dim); }
.ins-flag.is-on, .ins-flag.is-on:hover { color: var(--coral); }

/* Calendario: griglia compatta, due pallini per distinguere ufficiale e target. */
.ins-cal { flex: 1 1 0; min-width: 240px; gap: 10px; }
.ins-cal-grid { width: 100%; border-collapse: collapse; }
.ins-cal-grid th {
    font-size: 10px; font-weight: 600; color: var(--text-dim);
    text-transform: uppercase; padding-bottom: 6px;
}
.ins-cal-grid td {
    position: relative; height: 30px; text-align: center; font-size: 12px;
    color: var(--text); vertical-align: middle;
}
.ins-cal-grid td.is-fuori { color: var(--taupe); }
.ins-cal-grid td.is-oggi .ins-cal-n {
    display: inline-grid; place-items: center; width: 22px; height: 22px;
    border-radius: var(--radius); background: var(--navy); color: var(--gold); font-weight: 600;
}
.ins-cal-dots { position: absolute; left: 0; right: 0; bottom: 1px; display: flex; justify-content: center; gap: 3px; }
.ins-cal-dots i, .ins-cal-legend i {
    width: 5px; height: 5px; border-radius: var(--radius-pill); display: inline-block;
}
.is-official { background: var(--coral); }
.is-target { background: var(--gold); }
.ins-cal-legend { display: flex; gap: 12px; font-size: 10.5px; color: var(--text-dim); }
.ins-cal-legend span { display: flex; align-items: center; gap: 5px; }
.ins-cal-next { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.ins-cal-item {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 10px; border-radius: var(--radius); background: var(--card-2);
    font-size: 12px; color: var(--navy);
}
.ins-cal-item.is-coral { background: rgba(232,74,67,.07); }

/* Modali di produttività: tabelle lunghe che scorrono dentro il riquadro. */
/* Il modale clienti ha otto colonne, l'ultima delle quali è l'esito: se sta
   stretto le colonne di destra escono dal riquadro invece di scorrere. */
.ins-modal { width: min(1240px, 96vw); max-width: none; }
.ins-modal .table-scroll { overflow-x: auto; }
.ins-modal-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.ins-modal-bar input { flex: 0 1 260px; }
.ins-modal-scroll { max-height: 60vh; overflow-y: auto; }
.ins-legend { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-dim); }
.ins-legend i { width: 7px; height: 7px; border-radius: var(--radius-pill); display: inline-block; }
.ins-legend .is-under { background: var(--green); }
.ins-legend .is-over { background: var(--coral); }
.ins-by-staff { display: flex; flex-wrap: wrap; gap: 4px; max-width: 260px; }
.ins-by-staff .pill { text-transform: none; letter-spacing: 0; }

@media (max-width: 1100px) {
    .ins-row, .ins-row-2, .ins-todo-row { flex-direction: column; grid-template-columns: 1fr; }
}

/* Schede dei workflow: stessa pillola delle tab di Clients, staccate dalla
   toolbar che le precede. */
.wf-tabs { margin-bottom: 12px; flex-wrap: wrap; }
/* Celle della griglia per periodo: la scadenza resta leggibile finché il
   filing è aperto, la spunta prende il posto quando è depositato. */
.wf-cell { text-align: center; font-size: 12px; white-space: nowrap; }
.wf-cell.wf-due { background: rgba(232,74,67,.07); color: var(--coral); }
/* Filtro a intervallo: le due date e il pulsante stanno in linea con le
   schede del periodo. */
.ins-range input[type="date"] { width: auto; }
.ins-range .is-attivo { background: var(--navy); color: var(--gold); border-color: var(--navy); }
/* Riquadri di «Priorities & attention needed» apribili: solo quelli con
   qualcosa dentro reagiscono, un riquadro a zero non ha nulla da mostrare. */
.alert-tile.is-apribile { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.alert-tile.is-apribile:hover { box-shadow: 0 0 0 1px var(--gold) inset; }
.ins-tile-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.ins-tile-item {
    display: flex; flex-direction: column; gap: 2px;
    padding: 9px 12px; border-radius: var(--radius); background: var(--card-2);
    color: var(--navy); text-decoration: none; font-size: 12.5px;
}
a.ins-tile-item:hover { background: var(--gold-soft); }
/* Voce con un timer in corso: testo a sinistra, cronometro a destra. */
.ins-tile-item.has-timer { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.ins-tile-item.has-timer > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ins-tile-item .ts-timer { flex-shrink: 0; font-size: 18px; margin-left: 0; }

/* Workflow nei modali: le schede sono radio nascoste, così si passa da una
   tabella all'altra senza ricaricare la pagina. */
.wf-pane { display: none; }
#bk-board:checked ~ [data-pane="bk-board"],
#bk-overview:checked ~ [data-pane="bk-overview"],
#st-entities:checked ~ [data-pane="st-entities"],
#st-mensile:checked ~ [data-pane="st-mensile"],
#st-trimestrale:checked ~ [data-pane="st-trimestrale"],
#st-annuale:checked ~ [data-pane="st-annuale"] { display: block; }

/* La scheda attiva si evidenzia come le tab di Clients. */
.wf-tabs label {
    display: inline-flex; align-items: center;
    height: var(--control-h); padding: 0 18px;
    border-radius: var(--radius); cursor: pointer;
    font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 600;
    color: var(--text-dim); background: var(--card); border: 1px solid var(--border);
}
.wf-tabs label:hover { color: var(--navy); }
#bk-board:checked ~ .wf-tabs label[for="bk-board"],
#bk-overview:checked ~ .wf-tabs label[for="bk-overview"],
#st-entities:checked ~ .wf-tabs label[for="st-entities"],
#st-mensile:checked ~ .wf-tabs label[for="st-mensile"],
#st-trimestrale:checked ~ .wf-tabs label[for="st-trimestrale"],
#st-annuale:checked ~ .wf-tabs label[for="st-annuale"] {
    background: var(--navy); color: var(--gold); border-color: var(--gold);
}

/* Le griglie dei workflow sono larghe: il modale prende quasi tutto lo schermo
   e la tabella scorre in orizzontale quando le colonne non ci stanno. */
.ins-modal.is-wide { width: min(1600px, 90vw); }
.ins-modal.is-wide .table-scroll { overflow-x: auto; }
/* Giorni con una scadenza: cliccabili per filtrare la to-do su quella data. */
.ins-cal-grid td.is-cliccabile { cursor: pointer; border-radius: var(--radius); }
.ins-cal-grid td.is-cliccabile:hover { background: var(--gold-soft); }
.ins-cal-grid td.is-scelto { background: var(--gold-soft); box-shadow: 0 0 0 1px var(--gold) inset; }
#todo-giorno { cursor: pointer; flex-shrink: 0; }