:root {
    --bg: #f6f7f9;
    --sidebar-bg: #ffffff;
    --card: #ffffff;
    --text: #1c2330;
    --muted: #6b7280;
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --primary-soft: #eef2ff;
    --border: #e8eaed;
    --error-bg: #fef2f2;
    --error-border: #fecaca;
    --error-text: #b91c1c;
    --radius: 12px;
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --topbar-h: 56px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); }

/* ===================== Impalcatura: barra in alto + sidebar ===================== */
.app { display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    height: var(--topbar-h); padding: 0 1rem;
    background: #fff; border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 20;
}
.topbar-left { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 0.6rem; }

/* I menù "Gestione"/"Amministrazione" nel cassetto laterale: solo su mobile. */
.sidebar-admin { display: none; }
.sidebar-sec { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 0.55rem 0.75rem 0.25rem; }

/* Pulsante hamburger: nascosto su desktop, visibile su mobile */
.hamburger {
    display: none; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; color: var(--text);
    padding: 0.35rem; border-radius: 8px;
}
.hamburger:hover { background: #f3f4f6; }
.nav-overlay { display: none; }

.brand {
    display: flex; align-items: center; gap: 0.5rem;
    font-weight: 800; font-size: 1.2rem; color: var(--text); text-decoration: none;
    padding: 0 0.5rem;
}
.brand-logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--primary); color: #fff; font-size: 0.95rem;
}

.topnav-item {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: 0.95rem; font-weight: 500; color: #374151;
    padding: 0.45rem 0.7rem; border-radius: 8px;
}
.topnav-item:hover { background: #f3f4f6; }
.topnav-item.active { color: var(--primary-dark); background: var(--primary-soft); font-weight: 600; }
.caret { font-size: 0.7rem; color: var(--muted); }

.dropdown { position: relative; }
.dropdown-menu {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px;
    background: #fff; border: 1px solid var(--border); border-radius: 11px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.12); padding: 0.35rem; display: none; z-index: 30;
}
.dropdown.open .dropdown-menu { display: block; }
.dropdown-menu a {
    display: flex; align-items: center; gap: 0.6rem; white-space: nowrap;
    padding: 0.5rem 0.65rem; border-radius: 8px;
    color: var(--text); text-decoration: none; font-size: 0.92rem; font-weight: 500;
}
.dropdown-menu a:hover { background: #f3f4f6; }
.dropdown-menu a svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--primary); }

.search-box {
    width: 240px; max-width: 36vw;
    padding: 0.5rem 0.8rem; border: 1px solid var(--border); border-radius: 9px;
    font-size: 0.9rem; font-family: inherit; background: #f8f9fb; color: var(--text);
}
.search-box:disabled { color: var(--muted); cursor: not-allowed; }

.body { display: flex; flex: 1; min-height: 0; }

.sidebar {
    width: 240px; flex: 0 0 240px;
    background: var(--sidebar-bg); border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); align-self: flex-start;
}
/* min-height:0 è indispensabile: senza, un figlio flex non si stringe sotto la
   sua altezza naturale e l'elenco, invece di scorrere, esce dallo schermo
   spingendo fuori il piede (profilo ed esci). */
.sidebar-nav { flex: 1 1 auto; min-height: 0; padding: 0.7rem; overflow-y: auto; }

.nav-item {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.58rem 0.75rem; border-radius: 9px;
    color: #374151; text-decoration: none; font-weight: 500; font-size: 0.95rem;
    margin-bottom: 2px; transition: background 0.12s, color 0.12s;
}
.nav-item:hover { background: #f3f4f6; }
.nav-item.active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.nav-item svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--primary); }
.nav-item.active svg { color: var(--primary-dark); }
.nav-item.disabled { color: var(--muted); cursor: default; }
.nav-item.disabled:hover { background: transparent; }
.nav-item.disabled svg { opacity: 0.6; }
.soon {
    margin-left: auto; font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase;
    background: #f1f2f4; color: var(--muted); font-weight: 700;
    padding: 0.08rem 0.4rem; border-radius: 999px;
}

.sidebar-foot {
    display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem;
    padding: 0.85rem 1rem; border-top: 1px solid var(--border);
}
.sidebar-foot-actions { display: flex; align-items: center; gap: 0.35rem; }
.avatar {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.95rem;
}
.sidebar-me { display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0; text-decoration: none; color: inherit; border-radius: 8px; padding: 0.2rem 0.3rem; }
.sidebar-me:hover { background: var(--primary-soft); }
.sidebar-user { flex: 1; min-width: 0; }
.sidebar-user-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: 0.78rem; color: var(--muted); }

.icon-btn { color: var(--muted); display: inline-flex; align-items: center; padding: 0.35rem; border-radius: 8px; text-decoration: none; }
.icon-btn:hover { color: var(--error-text); background: var(--error-bg); }
.icon-btn svg { width: 18px; height: 18px; }

.main { flex: 1; min-width: 0; }
.content { max-width: 1080px; margin: 0 auto; padding: 2.2rem 2.2rem 3rem; }
.content-wide { max-width: 1320px; }
/* Un 20% in piu' del solito: serve dove le colonne si adattano al contenuto
   (elenco preventivi), cosi' la barra di scorrimento resta l'ultima spiaggia. */
.content-xwide { max-width: 1584px; }

/* ===================== Schermata di accesso ===================== */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.auth-inner { width: 100%; max-width: 420px; }
.auth-brand {
    display: flex; align-items: center; justify-content: center; gap: 0.55rem;
    font-weight: 800; font-size: 1.7rem; margin-bottom: 1.4rem; color: var(--text);
}

/* ===================== Card ===================== */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.8rem;
    box-shadow: var(--shadow);
}
.card-narrow { max-width: 420px; margin: 0 auto; }
.card-spaced { margin-bottom: 1.5rem; }

.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--border); padding-bottom: 0.7rem; }
.card-head h1 { margin: 0; }

h1 { margin-top: 0; font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em; }
.card-head h2 { margin: 0; font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; }

/* Titoli con la barretta colorata a sinistra (identita' visiva dei box). */
.card-head h1, .card-head h2, .list-head h1, .dash-head h1 {
    display: flex; align-items: center; gap: 0.6rem;
}
.card-head h1::before, .card-head h2::before, .list-head h1::before, .dash-head h1::before {
    content: ''; flex: 0 0 auto; width: 4px; height: 1.15em; border-radius: 99px;
    background: linear-gradient(180deg, var(--primary), #a78bfa);
}
.muted { color: var(--muted); }
hr { border: none; border-top: 1px solid var(--border); margin: 1.4rem 0; }

/* Strumenti accanto al titolo (ricerca + pulsante) */
.card-head-tools { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-end; }
.search-inline {
    padding: 0.5rem 0.8rem; border: 1px solid var(--border); border-radius: 9px;
    font-size: 0.95rem; font-family: inherit; background: #fff; color: var(--text);
    min-width: 260px; transition: border-color 0.12s, box-shadow 0.12s;
}
.search-inline:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); }

/* Riga cliente espandibile (fisarmonica) */
.row-toggle {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: none; border: none; padding: 0; cursor: pointer;
    font: inherit; font-weight: 600; color: var(--text); text-align: left;
}
.row-toggle:hover { color: var(--primary); }
.row-toggle .chev { color: var(--muted); transition: transform 0.15s ease; flex: 0 0 auto; }
.client-row.expanded .row-toggle .chev { transform: rotate(180deg); color: var(--primary); }
.client-detail > td { background: var(--bg); padding: 0; }
.client-detail-inner { padding: 1.1rem 1.3rem 1.3rem; }
.client-detail-inner h2 { margin: 0 0 0.4rem; font-size: 1.05rem; font-weight: 700; }
.search-empty { margin-top: 1rem; }
.detail-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; }
.detail-head h2 { margin: 0; }
.detail-head-tools { display: inline-flex; gap: 0.9rem; align-items: center; }

/* Mini-elenco (es. progetti dentro l'accordion del cliente) */
.mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.mini-list li { display: flex; align-items: center; gap: 0.6rem; }

/* Link "forte" (nome cliente/progetto nelle tabelle) */
.link-strong { color: var(--text); font-weight: 600; text-decoration: none; }
.link-strong:hover { color: var(--primary); text-decoration: underline; }

/* Intestazione di pagina (link "torna indietro" sopra le card) */
.page-head { margin-bottom: 0.9rem; }
.page-head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.agenda-date-edit { cursor: pointer; border-radius: 6px; }
.agenda-date-edit:hover { background: var(--primary-soft); }
.agenda-date-edit .ie-input { width: 160px; }
.card-spaced-top { margin-top: 1.5rem; }

/* Scheda dettaglio: coppie etichetta/valore */
.detail-grid { display: grid; grid-template-columns: 150px 1fr; gap: 0.7rem 1.2rem; margin: 0; align-items: start; }
.detail-grid dt { font-weight: 600; color: var(--muted); }
.detail-grid dd { margin: 0; color: var(--text); }
.detail-notes { white-space: normal; }
@media (max-width: 600px) { .detail-grid { grid-template-columns: 1fr; gap: 0.2rem 0; } .detail-grid dd { margin-bottom: 0.6rem; } }

/* Chip dei flag tecnici (impostato / non impostato) */
.chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; }
.chip-on { background: #e7f6ec; color: #15803d; }
/* Condivisione di una riunione. Due colori diversi apposta: viola = l'ho data
   io, giallo = l'ho ricevuta. Si distingue a colpo d'occhio senza leggere. */
.chip-share { background: #eef2ff; color: #4338ca; font-weight: 500; font-size: 0.78rem; }
.chip-share-in { background: #fef3c7; color: #92400e; font-weight: 500; font-size: 0.78rem; }
.chip-off { background: #f1f2f4; color: var(--muted); }

/* ===================== Form ===================== */
.form { display: flex; flex-direction: column; gap: 1.05rem; margin-top: 1.3rem; }
.form label { display: flex; flex-direction: column; gap: 0.4rem; font-weight: 600; font-size: 0.9rem; }
.form input, .form select, .form textarea {
    padding: 0.62rem 0.75rem; border: 1px solid var(--border); border-radius: 9px;
    font-size: 1rem; font-weight: 400; background: #fff; color: var(--text);
    font-family: inherit; transition: border-color 0.12s, box-shadow 0.12s;
}
.form textarea { resize: vertical; min-height: 5rem; }
.form input:focus, .form select:focus, .form textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.form-inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.form-inline label { flex: 1 1 160px; }
.form-inline label.grow { flex: 3 1 240px; }
.form label.check-label { flex-direction: row; align-items: center; gap: 0.45rem; font-weight: 500; }
.form-inline label.check-label { flex: 0 0 auto; }
.form-inline .btn { flex: 0 0 auto; }
.form input[type="checkbox"] { width: auto; padding: 0; box-shadow: none; }

/* Form progetto: larghezza comoda, righe a due colonne, riquadro flag */
.card-form { max-width: 720px; }
.form-row { display: flex; gap: 1rem; }
.form-row > label { flex: 1 1 0; min-width: 0; }
.form-spacer { flex: 1 1 0; }
.check-inline { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; color: var(--muted); cursor: pointer; }
.check-inline input { width: auto; }
.form-sep { border: none; border-top: 1px solid var(--border); margin: 0.4rem 0 0.2rem; }
@media (max-width: 600px) { .form-row { flex-direction: column; gap: 1.05rem; } }

/* Pulsante chiaro (azione secondaria, es. Modifica nella scheda) */
.btn-light { background: #fff; color: var(--text); border: 1px solid var(--border); }
.btn-light:hover { background: var(--bg); }
.btn-danger { background: var(--error-text); color: #fff; }
.btn-danger:hover { background: #991b1b; }
.form-actions .view-del { margin-left: auto; }

/* Modulo progetto: campi su una riga con scorrimento orizzontale */
.fields-line { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.85rem; }
.fields-line .fld { flex: 0 0 220px; }
.fields-line .fld-lg { flex: 0 0 320px; }

/* ===================== Modifica "al volo" (inline) ===================== */
.ie-display {
    cursor: pointer; display: inline-block; min-width: 2rem;
    padding: 0.12rem 0.35rem; margin: -0.12rem -0.35rem; border-radius: 6px;
    transition: background 0.12s;
}
.ie-display:hover { background: var(--primary-soft); }
.ie.editing .ie-display { display: none; }
.ie-edit .ie-input {
    width: 100%; max-width: 360px; padding: 0.45rem 0.6rem;
    border: 1px solid var(--primary); border-radius: 8px; font: inherit;
    background: #fff; color: var(--text);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); outline: none;
}
.ie-edit textarea.ie-input { resize: vertical; min-height: 5rem; }
.ie-title .ie-display { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em; }
.ie-title .ie-input { font-size: 1.2rem; font-weight: 700; }
.hint-edit { margin-top: -0.5rem; font-size: 0.85rem; }
.ie-flag { cursor: pointer; border-radius: 999px; }

/* ===================== Elenco progetti a tutta larghezza (stile Notion) ===================== */
.content-full { max-width: none; padding: 1.5rem 1.7rem 3rem; }
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.list-head h1 { margin: 0; }

.table-scroll {
    overflow-x: auto; background: var(--card);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}

/* Barra di scorrimento curata (sottile, stondata, indaco al passaggio) */
.table-scroll { scrollbar-width: thin; scrollbar-color: #c6cbee transparent; }
.table-scroll::-webkit-scrollbar { height: 9px; width: 9px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; margin: 0 10px; }
.table-scroll::-webkit-scrollbar-thumb { background: #c6cbee; border-radius: 999px; }
.table-scroll::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* Barra di scorrimento orizzontale SEMPRE visibile in fondo allo schermo:
   una barra "finta" fissa che pilota un contenitore largo (tabelle, bacheche),
   così non serve arrivare in fondo alla lista per scorrere destra/sinistra.
   La crea il JS solo quando serve (overflow + barra vera fuori schermo). */
.xscroll-sticky { position: fixed; bottom: 0; z-index: 60; height: 16px; overflow-x: scroll; overflow-y: hidden; background: rgba(255, 255, 255, 0.92); box-shadow: 0 -1px 5px rgba(16, 24, 40, 0.12); }
.xscroll-sticky.hidden { display: none; }
.xscroll-sticky-inner { height: 1px; }
.xscroll-sticky { scrollbar-width: thin; scrollbar-color: #b9bfe8 transparent; }
.xscroll-sticky::-webkit-scrollbar { height: 12px; }
.xscroll-sticky::-webkit-scrollbar-track { background: transparent; }
.xscroll-sticky::-webkit-scrollbar-thumb { background: #b9bfe8; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.6); }
.xscroll-sticky::-webkit-scrollbar-thumb:hover { background: var(--primary); }
.table-grid { table-layout: fixed; min-width: 100%; }
.table-grid th, .table-grid td {
    padding: 0.5rem 0.8rem; white-space: nowrap; border-right: 1px solid var(--border);
    overflow: hidden; text-overflow: ellipsis;
}
.table-grid th:last-child, .table-grid td:last-child { border-right: none; }
.table-grid .col-actions { white-space: nowrap; overflow: visible; }

/* Colonna "Assegnato": i nomi vanno a capo e la riga si alza, niente tagli */
.table-grid td[data-col-field="assigned"] { white-space: normal; overflow: visible; }
.table-grid td[data-col-field="assigned"] .badge { margin-bottom: 0.15rem; }

/* Intestazioni: fascia color indaco tenue, titolo con font dedicato.
   Un clic sul titolo ordina (crescente, poi decrescente); trascina per
   spostare la colonna; bordo destro per ridimensionare. */
.table-grid thead th { background: var(--primary-soft); border-bottom: 1px solid #dfe4ff; padding-top: 0.6rem; padding-bottom: 0.6rem; }
.table-grid thead th[draggable="true"] { position: relative; cursor: pointer; user-select: none; }
.table-grid thead th.dragging { opacity: 0.45; }
.th-inner { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.th-label {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--primary-dark);
}
.table-grid thead th[draggable="true"]:hover .th-label { color: var(--primary); }

/* Indicatore dell'ordinamento attivo (compare solo dopo il clic) */
.table-grid thead th[data-sorted]::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--primary);
}
.table-grid thead th .th-sort-mark { display: none; font-size: 9px; color: var(--primary); flex: 0 0 auto; }
.table-grid thead th[data-sorted] .th-sort-mark { display: inline; }
.table-grid thead th[data-sorted="desc"] .th-sort-mark { transform: rotate(180deg); }
.col-resize {
    position: absolute; top: 0; right: -3px; width: 8px; height: 100%;
    cursor: col-resize; z-index: 2;
}
.col-resize:hover { background: var(--primary); opacity: 0.35; }
body.col-resizing { cursor: col-resize; user-select: none; }
body.col-resizing * { cursor: col-resize !important; }

/* Celle modificabili al volo */
.ie-cell { cursor: pointer; }
.ie-cell:hover { background: var(--primary-soft); }
.ie-cell .ie-cd { display: inline-block; min-width: 1.5rem; min-height: 1.1em; }
.ie-cell .ie-input {
    width: 100%; min-width: 0; max-width: none; box-sizing: border-box;
    padding: 0.4rem 0.55rem; font: inherit; color: var(--text); background: #fff;
    border: 1px solid var(--primary); border-radius: 8px; outline: none;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
/* Nelle colonne numeriche (Ore, Valore lavori...) il valore va a destra */
.ie-cell.col-num .ie-input { text-align: right; }

/* ===================== Modulo progetto: griglia 3-4 campi per riga ===================== */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; margin-top: 0.4rem; }
.form-grid .span-all { grid-column: 1 / -1; }
/* Separatore di sezione dentro un form a griglia (es. "Indirizzo", "Dati fiscali"). */
.form-sep { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--border); padding-bottom: 0.3rem; margin-top: 0.2rem; }

/* Riquadro "Scansiona biglietto da visita" (AI). */
.scan-box { border: 1px dashed var(--border); border-radius: 10px; padding: 0.4rem 0.9rem; margin: 0.2rem 0 1rem; background: var(--bg); }
.scan-summary { display: flex; align-items: center; gap: 0.45rem; font-weight: 600; cursor: pointer; padding: 0.35rem 0; list-style: none; }
.scan-summary::-webkit-details-marker { display: none; }
.scan-summary svg { color: var(--primary); }
.scan-box[open] .scan-summary { margin-bottom: 0.2rem; }
.scan-hint { margin: 0.2rem 0 0.6rem; font-size: 0.86rem; }
.scan-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding-bottom: 0.5rem; }
.scan-row input[type="file"] { flex: 1 1 auto; min-width: 0; }
.scan-row .btn { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Riquadro permessi (Vede / Modifica) */
.perms-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: 0.4rem 0 0.4rem; }
.perms-group { border: 1px solid var(--border); border-radius: 10px; padding: 0.4rem 0.8rem 0.6rem; min-width: 0; }
.perms-group legend { font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; padding: 0 0.4rem; }
.perms-hint { font-size: 0.82rem; line-height: 1.4; margin: 0.1rem 0 0.5rem; }
.perms-table { width: 100%; }
.perms-table th, .perms-table td { padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--border); }
.perms-table tbody tr:last-child td { border-bottom: none; }
.perms-table th { font-size: 0.7rem; }
.perms-col { width: 4.5rem; text-align: center; }
.perms-table input[type="checkbox"] { width: auto; }

/* Griglia compatta a 2 colonne fisse (es. modulo vista) */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1rem; }
.form-grid-2 .span-all { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid-2 { grid-template-columns: 1fr; } }

/* ===================== Viste a schede (linguette tipo rubrica) ===================== */
.view-tabs { display: flex; gap: 4px; align-items: flex-end; border-bottom: 1px solid var(--border); padding: 0 2px; flex-wrap: wrap; }
.view-tab {
    position: relative; top: 1px;
    padding: 0.5rem 1rem; text-decoration: none;
    color: var(--muted); font-weight: 600; font-size: 0.92rem;
    background: #eef0f3; border: 1px solid var(--border); border-bottom: none;
    border-radius: 9px 9px 0 0;
}
.view-tab:hover { background: #e6e8ec; color: var(--text); }
.view-tab.active { background: var(--card); color: var(--primary); }
/* la linguetta attiva "copre" la riga di base, come una scheda di rubrica */
.view-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--card); }
.view-tab-add { background: transparent; border-style: dashed; color: var(--primary); font-size: 1.15rem; font-weight: 800; line-height: 1; padding: 0.45rem 0.75rem; }
.view-tab-add:hover { background: var(--primary-soft); }

/* Pannello sotto le linguette */
.view-panel {
    border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--card); padding: 1.1rem; box-shadow: var(--shadow);
}
/* La tabella dentro il pannello: riquadro stondato su tutti gli angoli,
   con un po' d'aria rispetto ai bordi del pannello. */
.view-panel .table-scroll { border: 1px solid var(--border); box-shadow: none; border-radius: 12px; }

/* Form vista: filtri a gruppi di caselle */
.card-narrow-lg { max-width: 760px; margin: 0 auto; }
.section-title { font-size: 1.05rem; font-weight: 700; margin: 0.6rem 0 0.1rem; }
.filter-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 0.6rem; }
.filter-group { border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.9rem; min-width: 0; }
.filter-group legend { font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; padding: 0 0.4rem; }
/* Bottoncino segmentato +/- sotto l'etichetta del gruppo, allineato a sinistra */
.seg-toggle {
    display: inline-flex; margin: 0.45rem 0 0.6rem; border: 1px solid var(--border); border-radius: 7px;
    overflow: hidden; background: #fff; box-shadow: 0 1px 1px rgba(16,24,40,0.05);
}
.seg-btn {
    border: none; background: #fff; cursor: pointer; font: inherit;
    font-weight: 800; font-size: 1rem; line-height: 1; padding: 0.16rem 0.55rem;
    color: var(--muted); transition: background 0.12s, color 0.12s;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-plus:hover { background: #e7f6ec; color: #15803d; }
.seg-minus:hover { background: #fdeaea; color: #b91c1c; }
.seg-btn:active { transform: translateY(1px); }
.filter-options { display: flex; flex-direction: column; gap: 0.45rem; max-height: 210px; overflow-y: auto; }
.filter-options .check-label { font-weight: 500; }
/* Colonne visibili: caselle in fila che vanno a capo (niente scroll verticale) */
.filter-options.cols-inline { flex-direction: row; flex-wrap: wrap; gap: 0.55rem 1.4rem; max-height: none; overflow: visible; }

/* ===================== Riassunto economico ===================== */
.summary-pick { margin: 0; }
.summary-totopts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 1.2rem; margin: 0.2rem 0 0.9rem; }
.summary-table .num { text-align: right; white-space: nowrap; }
.summary-table tfoot .sum-row td { border-top: 2px solid var(--border); font-weight: 700; padding-top: 0.7rem; }
.summary-table tfoot .sum-row td:first-child { color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.82rem; }
/* ===================== Voci di lavoro ===================== */
.hidden-file { display: none; }
.wi-list { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 0.4rem; }
.wi { border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.75rem; transition: outline 0.12s, background 0.12s; }
.wi.drop-over { outline: 2px dashed var(--primary); outline-offset: 2px; background: var(--bg); }
.wi-row { display: flex; align-items: center; gap: 0.7rem; }
.wi-type { flex: 0 0 auto; }
.wi-desc { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; min-width: 0; }
.wi-dates { font-size: 0.85rem; }
.wi-amount { flex: 0 0 auto; white-space: nowrap; }
.wi-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 0.1rem; }
.wi-actions form { display: inline-flex; margin: 0; }
.wi-done .wi-row { opacity: 0.55; }
.wi-files { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--border); }
.wi-file { display: inline-flex; align-items: center; gap: 0.15rem; background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 0.12rem 0.4rem; font-size: 0.85rem; }
.wi-file a { display: inline-flex; align-items: center; gap: 0.3rem; }
.wi-file .icon { width: 15px; height: 15px; }
.wi-edit { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--border); }
.btn-icon-sm { padding: 0.1rem; }
.btn-icon-sm .icon { width: 15px; height: 15px; }
.wi-file-name { font-size: 0.85rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* L'attributo hidden deve sempre nascondere, anche dentro i form in flex */
[hidden] { display: none !important; }
/* Campi stretti: "Ogni (mesi)" e "Scadenza" non devono allargarsi tutto */
.line-form label.wi-xs { flex: 0 0 auto; }
.line-form label.wi-xs input { width: 110px; }
.line-form label.wi-sm { flex: 0 0 auto; }
.line-form label.wi-sm input { width: 170px; }
/* Bottone "Allega" nel modulo aggiungi: a forma di tasto, ben visibile */
.wi-clip { display: inline-flex; align-items: center; gap: 0.35rem; }
.wi-clip .icon { width: 20px; height: 20px; }
/* Bottone verde (es. + Aggiungi voce) */
.btn-success { background: #16a34a; color: #fff; border: 1px solid #16a34a; box-shadow: none; }
.btn-success:hover { background: #15803d; }
/* Colonne griglia: valore lavori a destra, allegati con graffetta */
.table-grid td.col-num { text-align: right; }
.table-grid td.col-domdue.due-past { color: #b91c1c; font-weight: 600; }

/* Barra filtri rapidi della pagina Progetti (collassabile: aperta solo al click) */
.proj-filters { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
/* Pulsante "Filtri" che apre/chiude il pannello */
.pf-toggle { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; padding: 0.4rem 0.8rem; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-family: inherit; font-size: 0.85rem; font-weight: 700; color: var(--text); }
.pf-toggle svg { width: 15px; height: 15px; color: var(--primary); }
.pf-toggle:hover { background: var(--bg); }
.pf-toggle.on { background: var(--primary-soft); border-color: #dfe4ff; color: var(--primary-dark); }
.pf-toggle[aria-expanded="true"] { border-color: var(--primary); }
.pf-toggle[aria-expanded="true"] .pf-caret { transform: rotate(180deg); }
.pf-toggle .pf-caret { font-size: 0.7rem; color: var(--muted); transition: transform 0.15s; }
.pf-count { background: var(--primary); color: #fff; border-radius: 999px; font-size: 0.72rem; font-weight: 700; padding: 0.02rem 0.42rem; min-width: 1.2rem; text-align: center; }
/* Pannello dei filtri: nascosto di default. Su desktop si apre A DESTRA del
   pulsante (stessa riga, risparmia spazio); su mobile va sotto (vedi media query). */
.pf-body { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.pf-body[hidden] { display: none; }
.qf { position: relative; }
.qf-summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.qf-summary::-webkit-details-marker { display: none; }
.qf-summary:hover { background: var(--bg); }
.qf-summary.on { background: var(--primary-soft); border-color: #dfe4ff; color: var(--primary-dark); }
.qf[open] .qf-summary { background: var(--primary-soft); border-color: var(--primary); }
.qf-caret { font-size: 0.7rem; color: var(--muted); }
.qf-badge { background: var(--primary); color: #fff; border-radius: 999px; font-size: 0.7rem; font-weight: 700; padding: 0.02rem 0.4rem; }
.qf-menu { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; min-width: 210px; max-height: 340px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14); padding: 6px; }
.qf-opt { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.4rem; border-radius: 8px; cursor: pointer; font-size: 0.88rem; }
.qf-opt:hover { background: var(--bg); }
.qf-opt input { width: auto; }
.qf-empty { padding: 0.3rem 0.4rem; margin: 0; }
.qf-actions { display: inline-flex; align-items: center; gap: 0.6rem; margin-left: 0.2rem; }

/* Riga dei totali in fondo alla griglia (conteggio progetti + somme colonne) */
.table-grid tfoot td { background: var(--primary-soft); border-top: 2px solid #dfe4ff; font-weight: 700; padding: 0.55rem 0.8rem; white-space: nowrap; }
.table-grid tfoot td.col-num { text-align: right; }
.table-grid tfoot strong { font-weight: 800; }
.table-grid tfoot .tf-count .muted { font-weight: 500; }
.att-link { display: inline-flex; align-items: center; gap: 0.25rem; }
.att-link .icon, .att-link svg { width: 15px; height: 15px; }
/* Cella "Allegati": zona dove trascinare un file per allegarlo al volo */
.att-cell { transition: background 0.15s, box-shadow 0.15s; }
.att-cell.drop-over { background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); }
.att-cell.att-uploading { opacity: 0.55; cursor: progress; }
.att-eye { margin-left: 4px; vertical-align: middle; }
/* Graffetta "+": allega un file direttamente dalla lista. Sta in ombra finche'
   non passi sulla riga, per non affollare la griglia. */
.att-add { margin-left: 4px; vertical-align: middle; opacity: 0.35; transition: opacity 0.15s, color 0.15s; }
.att-add:hover, tr:hover .att-add { opacity: 1; }
.att-add:hover { color: var(--primary); }
/* Menu di scelta "Preventivo / Allegato" */
.att-menu { position: absolute; z-index: 1200; min-width: 148px; padding: 4px; background: #fff;
    border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16); }
.att-menu button { display: block; width: 100%; padding: 0.45rem 0.7rem; border: 0; border-radius: 7px;
    background: none; text-align: left; font: inherit; font-size: 0.9rem; color: var(--text); cursor: pointer; }
.att-menu button:hover { background: var(--primary-soft); color: var(--primary-dark); }
/* Evidenzia per un attimo la riga a cui si torna dopo essere entrati nel progetto */
@keyframes rowFlash { from { background: var(--primary-soft); } to { background: transparent; } }
.row-flash > td, tr.row-flash > td { animation: rowFlash 1.6s ease-out; }
.board-card.row-flash { animation: rowFlash 1.6s ease-out; }

/* ===== Bacheca Note (colonne personali, schede stile post-it) ===== */
.note-board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 12px; }
.note-col { flex: 0 0 400px; max-width: 400px; background: #f4f5f7; border-radius: 12px; padding: 8px; }
.note-col-head { display: flex; align-items: center; gap: 8px; padding: 6px; border-top: 3px solid transparent; border-radius: 8px; cursor: grab; }
.note-col-head:active { cursor: grabbing; }
.note-col-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.note-col-title { font-weight: 700; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-col-count { color: var(--muted); font-size: 0.85rem; }
.note-col-tools { display: flex; gap: 2px; flex: 0 0 auto; }
.note-add-btn { font-size: 1.15rem; line-height: 1; font-weight: 700; }
.note-col.col-dragging { opacity: 0.5; }
.note-col.drop-hover { outline: 2px dashed var(--primary); outline-offset: 2px; }
.note-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 28px; padding: 4px 2px; }
.note-card { background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 10px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06); cursor: grab; }
.note-card:active { cursor: grabbing; }
.note-card.dragging { opacity: 0.5; }
.note-card-title { font-weight: 600; margin-bottom: 4px; cursor: pointer; }
.note-card-body { font-size: 0.92rem; color: var(--text); cursor: pointer; }
.note-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 6px; }
.note-card-actions { display: flex; gap: 2px; }
.note-card-date { font-size: 0.78rem; }
.note-col-edit, .note-col-add, .note-card-edit { margin: 6px 2px; }
.note-form { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px; }
.note-form-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.note-title-input { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.note-col-del { margin-top: 6px; display: flex; align-items: center; gap: 6px; }

/* ---- Bacheca Gruppi di progetti ---- */

/* Selettore colore compatto a tendina (pallini) */
.color-dots { position: relative; display: inline-block; }
.cd-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: #fff; cursor: pointer; font: inherit; }
.cd-current { width: 16px; height: 16px; border-radius: 50%; display: inline-block; background: #fff; }
.cd-current.cd-none-ind { border: 1px dashed var(--muted); background: #fff; }
.cd-caret { color: var(--muted); font-size: 0.7rem; }
.cd-menu { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(16, 24, 40, 0.16); padding: 8px; display: grid; grid-template-columns: repeat(6, 22px); gap: 8px; }
.cd-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; background: #fff; }
.cd-dot:hover { transform: scale(1.12); }
.cd-dot.selected { border-color: #111827; box-shadow: 0 0 0 2px #fff inset; }
.cd-dot.cd-none { border: 1px dashed var(--muted); }

/* Sezione Note condivise */
.note-shared-owner { display: flex; align-items: center; gap: 8px; margin: 20px 0 10px; font-size: 1.05rem; }
.note-shared-owner .icon, .note-shared-owner svg { width: 18px; height: 18px; }
.note-shared-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-items: start; margin-bottom: 8px; }
.note-card-shared { cursor: default; }
.note-shared-col { margin-bottom: 6px; }
.note-share-panel { margin-top: 8px; }
/* La graffetta dalla griglia porta qui: lascia spazio sotto la barra in alto */
#voci { scroll-margin-top: 90px; }

/* ===================== Editor di testo (Note) ===================== */
.rte { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
.rte-toolbar { display: flex; flex-wrap: wrap; gap: 0.15rem; padding: 0.3rem; border-bottom: 1px solid var(--border); background: var(--bg); }
.rte-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 28px; padding: 0 0.45rem; border: 1px solid transparent; background: transparent; border-radius: 6px; cursor: pointer; font-size: 0.95rem; line-height: 1; color: var(--text); }
.rte-btn:hover { background: #fff; border-color: var(--border); }
.rte-btn .icon { width: 16px; height: 16px; }
.rte-area { min-height: 90px; padding: 0.6rem 0.7rem; outline: none; font-size: 0.95rem; line-height: 1.5; }
.rte-area:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }

/* Versione "mini" per i post-it (aggiunta e modifica) */
.rte-mini { width: 100%; }
.rte-mini .rte-area { min-height: 52px; font-size: 0.92rem; }

/* Titolo del post-it + anteprima compatta (3 righe, poi puntini).
   Clic sul titolo o sul testo per aprire/chiudere la nota intera. */
.postit-title { font-weight: 700; font-size: 0.95rem; line-height: 1.35; cursor: pointer; color: var(--pi-color, inherit); }
.postit-clamp {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; cursor: pointer;
}
.postit-clamp.open { display: block; overflow: visible; }
.postit-title-input { width: 100%; margin-bottom: 0.4rem; }

/* Nuovo post-it: blocco compatto a due colonne (campi a sinistra, testo a destra) */
.pi-new {
    display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 0.9rem;
    align-items: stretch; background: var(--bg);
    border: 1px solid var(--border); border-radius: 12px; padding: 0.8rem;
}
.pi-new-left { display: flex; flex-direction: column; gap: 0.5rem; }
.pi-new-left label { gap: 0.25rem; font-size: 0.8rem; }
.pi-new-left input { padding: 0.45rem 0.6rem; font-size: 0.95rem; }
.pi-new-left .btn { align-self: flex-start; margin-top: auto; }
.pi-new-right { display: flex; min-width: 0; }
.pi-new-right .rte { flex: 1 1 auto; display: flex; flex-direction: column; }
.pi-new-right .rte-area { flex: 1 1 auto; min-height: 70px; }
@media (max-width: 820px) { .pi-new { grid-template-columns: 1fr; } }

/* Testo formattato dentro i biglietti */
.postit-body p, .postit-body div { margin: 0; }
.postit-body ul, .postit-body ol { margin: 0.15rem 0; padding-left: 1.2rem; }
.postit-mini ul, .postit-mini ol { margin: 0.15rem 0; padding-left: 1.2rem; }
.rte-area:empty::before { content: 'Scrivi qui le note…'; color: var(--muted); }
.rte-area ul, .rte-area ol, .rte-view ul, .rte-view ol { margin: 0.3rem 0 0.3rem 1.3rem; }
.rte-area a, .rte-view a { color: var(--primary); text-decoration: underline; }
.rte-foot { display: flex; align-items: center; gap: 0.7rem; padding: 0.35rem 0.5rem; border-top: 1px solid var(--border); background: var(--bg); }
.rte-status { font-size: 0.85rem; }
.rte-view { line-height: 1.5; }

/* ===================== Bacheca Kanban ===================== */
.board { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; }
.board-col {
    flex: 0 0 270px; background: var(--bg); border: 1px solid var(--border);
    border-radius: 10px; padding: 0.7rem; min-height: 80px; transition: outline 0.12s;
}
.board-col.drop-hover { outline: 2px dashed var(--primary); outline-offset: 2px; }
.board-col-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.7rem; }
.board-count { font-size: 0.78rem; font-weight: 700; color: var(--muted); background: #fff; border-radius: 999px; padding: 0.05rem 0.5rem; }
.board-body { display: flex; flex-direction: column; gap: 0.55rem; min-height: 30px; }
.board-card {
    background: #fff; border: 1px solid var(--border); border-radius: 9px;
    padding: 0.6rem 0.7rem; box-shadow: var(--shadow); cursor: grab;
}
.board-card:active { cursor: grabbing; }
.board-card.dragging { opacity: 0.5; }
.board-card-title { display: block; font-weight: 600; color: var(--text); text-decoration: none; margin-bottom: 0.35rem; }
.board-card-title:hover { color: var(--primary); }
.board-card-meta { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; font-size: 0.85rem; }
.board-hint { margin-top: 0.4rem; }

/* ===================== Assegnazioni / paghe ===================== */
.assign { border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1rem; margin-top: 1rem; }
.assign-head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    margin: -0.9rem -1rem 0.9rem; padding: 0.6rem 1rem;
    background: var(--primary-soft); border-bottom: 1px solid #dfe4ff;
    border-radius: 10px 10px 0 0;
}
.assign-who { display: flex; align-items: center; gap: 0.5rem; font-size: 1.02rem; }
.assign-actions { display: flex; align-items: center; gap: 0.9rem; }
.assign-due { color: var(--text); }
.assign-lines { margin: 0.7rem 0 0.3rem; }
.assign-lines td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); }
.assign-lines tr:last-child td { border-bottom: none; }
.assign-lines .line-kind { width: 1%; white-space: nowrap; }
.assign-lines .line-amount { text-align: right; white-space: nowrap; }
.assign-lines .line-del { width: 1%; }
.assign-add { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.6rem; }
.line-form { align-items: flex-end; gap: 0.6rem; background: var(--bg); padding: 0.55rem 0.7rem; border-radius: 8px; margin-top: 0; }
.line-tag {
    flex: 0 0 100%; align-self: flex-start;
    font-weight: 800; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em;
    margin: 0 0 0.15rem; color: var(--muted);
}
.line-tag-fisso { color: #1d4ed8; }
.line-tag-ore   { color: #6d28d9; }
.line-tag-paga  { color: #15803d; }

/* Totali soldi (testata sezione e per persona) */
.pay-totals { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: 0.95rem; color: var(--muted); }
.pay-totals strong, .assign-nums strong { color: var(--text); }
.pay-due strong { color: var(--error-text); }
.assign-nums { display: flex; gap: 0.9rem; flex-wrap: wrap; font-size: 0.86rem; color: var(--muted); }
.assign-pay { margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px dashed var(--border); }
.assign-pay-head { font-size: 0.74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.4rem; }
.assign-sub { display: flex; align-items: center; gap: 0.7rem; font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; margin: 1rem 0 0.5rem; }
.assign-sub::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--border); }
.assign-sub.collapsible { cursor: pointer; user-select: none; }
.assign-sub.collapsible:hover { color: var(--primary); }
.assign-sub .icon-chevron { flex: 0 0 auto; color: var(--muted); transition: transform 0.15s ease; }
.assign-sub.collapsible:hover .icon-chevron { color: var(--primary); }
.assign-sub.open .icon-chevron { transform: rotate(180deg); }

/* Pulsante "Aggiungi" comprimibile: colorato, freccia ben visibile */
.add-toggle {
    display: inline-flex; align-items: center; gap: 0.45rem;
    margin: 1rem 0 0.6rem; padding: 0.4rem 0.8rem;
    background: var(--primary-soft); color: var(--primary-dark);
    border: 1px solid #dfe4ff; border-radius: 9px;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    cursor: pointer; user-select: none; transition: background 0.12s ease, color 0.12s ease;
}
.add-toggle:hover { background: #e2e7ff; }
.add-toggle .icon-chevron { width: 19px; height: 19px; flex: 0 0 auto; transition: transform 0.15s ease; }
.add-toggle.open { background: var(--primary); color: #fff; border-color: var(--primary); }
.add-toggle.open .icon-chevron { transform: rotate(180deg); }

/* Preventivo e allegati a livello progetto */
.proj-files { margin-top: 1.1rem; border-top: 1px solid var(--border); padding-top: 0.8rem; }
.proj-files-spaced { margin-top: 1.2rem; }
.proj-files .field-label { display: block; margin-bottom: 0.5rem; }
.pf-hint { text-transform: none; font-weight: 500; letter-spacing: 0; font-size: 0.72rem; }
.proj-files-empty { margin: 0.2rem 0 0.5rem; }
.proj-file-add { margin-top: 0.6rem; display: flex; align-items: center; gap: 0.6rem; }
.line-pay .line-amount strong { color: #15803d; }
.line-voce { margin-left: 0.4rem; font-weight: 600; }

/* Margine della singola voce di lavoro */
.wi-econ { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; font-size: 0.82rem; color: var(--muted); margin: 0.1rem 0 0.2rem; padding-left: 0.1rem; }
.wi-econ strong { color: var(--text); }
.wi-marg strong { color: var(--primary); }
.wi-pay { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.2rem 0 0.1rem; padding-left: 0.1rem; }
.wi-adv { flex-basis: 100%; margin-top: 0.3rem; }

/* Riga "Pagato / Rimane" sotto ogni compenso del collaboratore: sta attaccata
   alla sua voce (niente bordo sopra) e i pulsanti restano a destra. */
.assign-lines tr.line-econ-row > td { border-top: 0; padding-top: 0; padding-bottom: 0.5rem; vertical-align: middle; }
.assign-lines tr.line-econ-row .wi-econ { margin: 0; }
.assign-lines tr.line-econ-row .wi-pay { margin: 0; justify-content: flex-end; }

/* Schede dei campi (parte alta della scheda progetto) */
/* Scheda progetto: info a sinistra e voci di lavoro a destra (affiancate) */
/* minmax(0, 1fr): senza lo "0" le colonne non scendono sotto la larghezza minima
   del contenuto e la scheda sfora a destra su mobile. */
.scheda-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.3rem; align-items: start; margin-bottom: 1.5rem; }
.scheda-cols > .card { margin: 0; min-width: 0; }
@media (max-width: 1100px) { .scheda-cols { grid-template-columns: minmax(0, 1fr); } }

/* Colonna destra "impilata": Voci di lavoro + Incassi e margine uno sotto l'altro */
.scheda-stack { display: flex; flex-direction: column; gap: 1.3rem; min-width: 0; }
.scheda-stack > .card { margin: 0; }

/* Riga Note (2/5) + Attività (3/5), con spazio sopra rispetto agli Incassi */
.scheda-nt { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.3rem; align-items: start; margin: 1.6rem 0 1.5rem; }
.scheda-nt > .card { margin: 0; min-width: 0; }
@media (max-width: 1100px) { .scheda-nt { grid-template-columns: minmax(0, 1fr); } }

/* Persone e paghe: due collaboratori per riga (il 3o va sotto, il 4o di fianco) */
.assign-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 1.3rem; }
.assign-grid .assign { margin-top: 0; }
@media (max-width: 900px) { .assign-grid { grid-template-columns: minmax(0, 1fr); } }

.fields-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8rem; margin-top: 0.3rem; }
.field-card { border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.8rem; background: #fafbfc; min-width: 0; }
.fields-cards .span-all { grid-column: 1 / -1; }
.field-label { display: block; font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.35rem; }
.field-ro { color: var(--text); }
.note-box { margin-top: 0.9rem; }
.note-box-sep { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--border); }

/* ===================== Bacheca (cruscotto) ===================== */
.dash-head { margin-bottom: 1.2rem; }
.dash-head h1 { margin-bottom: 0.2rem; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 0.4rem; }
.kpi { display: flex; flex-direction: column; gap: 0.35rem; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem 1.2rem; box-shadow: 0 1px 2px rgba(16,24,40,0.04); text-decoration: none; color: inherit; }
a.kpi:hover { border-color: var(--primary); }
.kpi-label { font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.kpi-value { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.kpi-due { color: #dc2626; }
.kpi-hi { color: var(--primary); }
.dash-date { white-space: nowrap; }
.dash-date .badge { margin-left: 0.4rem; }
.dash-overdue { color: #dc2626; font-weight: 600; }
.agenda-overdue-title { color: #dc2626; }
/* Banner "Installa come app" (PWA) */
.pwa-install-banner {
    position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
    z-index: 200; display: flex; align-items: center; gap: 0.7rem;
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); padding: 0.6rem 0.85rem;
    max-width: calc(100% - 24px); font-size: 0.9rem; color: var(--text);
}
.pwa-install-banner .pwa-x { border: none; background: transparent; font-size: 1.25rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 0.15rem; }
.pwa-install-banner .pwa-x:hover { color: var(--text); }
.dash-amount { white-space: nowrap; text-align: right; width: 1%; }
.agenda-amount { font-weight: 700; color: var(--text); }
.dash-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.3rem; }

/* ===================== Report ===================== */
.dash-head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dash-head-tight { margin-bottom: 0.9rem; }
.dash-head-tight h1 { margin-bottom: 0; }
.btn svg, .btn-light svg { vertical-align: -2px; margin-right: 0.2rem; width: 15px; height: 15px; }
.kpi-grid-wide { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 1.4rem; }
.kpi-grid-wide .kpi { padding: 0.9rem 1rem; }
.kpi-grid-wide .kpi-value { font-size: 1.35rem; }
.report-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; align-items: start; }
.report-cols > .card { margin: 0; }
@media (max-width: 1000px) { .report-cols { grid-template-columns: minmax(0, 1fr); } }
.report-table th.num, .report-table td.num { text-align: right; white-space: nowrap; }
.report-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip-filter { display: inline-block; padding: 0.25rem 0.7rem; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--muted); font-size: 0.82rem; font-weight: 600; text-decoration: none; }
.chip-filter:hover { border-color: var(--primary); color: var(--primary-dark); }
.chip-filter.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip-sort { padding: 0.25rem 0.55rem; color: var(--primary-dark); font-size: 0.95rem; line-height: 1; }

/* Icone delle note (permessi): in orizzontale, checkbox a sinistra del testo. */
.note-caps-grid { display: flex; flex-wrap: wrap; gap: 0.55rem 1.4rem; margin: 0.4rem 0 0.2rem; }
.note-caps-grid label.note-cap { display: inline-flex !important; flex-direction: row !important;
    align-items: center; gap: 0.5rem; padding: 0; margin: 0; font-weight: 500; white-space: nowrap; cursor: pointer; }
.note-caps-grid label.note-cap input { margin: 0; }

/* Filtro per categoria/argomento dei post-it (chip colorati riusando i colori badge) */
.postit-catfilter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0.9rem; }
.chip-cat { display: inline-block; padding: 0.22rem 0.7rem; border-radius: 999px; border: 1px solid transparent; font-size: 0.8rem; font-weight: 600; text-decoration: none; opacity: 0.75; }
.chip-cat:hover { opacity: 1; }
.chip-cat.on { opacity: 1; box-shadow: 0 0 0 2px var(--primary); }
.chip-cat:not([class*="badge-color-"]) { background: #fff; border-color: var(--border); color: var(--muted); }
/* Testata del post-it: categoria a sinistra, icona origine (Gmail/WhatsApp) a destra */
.postit-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-bottom: 0.35rem; min-height: 1.2rem; }
.postit-head-left { display: inline-flex; align-items: center; min-width: 0; }
.postit-source { display: inline-flex; align-items: center; flex: 0 0 auto; }
.postit-source.src-gmail { color: #d93025; }       /* rosso Gmail */
.postit-source.src-whatsapp { color: #25d366; }    /* verde WhatsApp */
.postit-source.src-voce { color: #6d28d9; }        /* viola: dettato a voce */
/* Badge categoria sopra il post-it */
.postit-cat { margin-bottom: 0; }
/* Allegati del post-it */
.postit-files { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.4rem; }
.postit-files .pf-item { display: inline-flex; align-items: center; gap: 0.1rem; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 0.08rem 0.35rem; }
.postit-files .pf-dl { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; font-weight: 600; color: var(--primary-dark); text-decoration: none; }
.postit-files .pf-dl span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.postit-attach-file { display: inline-flex; margin: 0; }
.postit-files .pf-add { font-size: 0.8rem; color: var(--primary-dark); }
/* Graffetta colorata quando ci sono allegati */
.btn-icon.has-files { color: var(--primary); }
.btn-icon.has-files:hover { color: var(--primary-dark); background: var(--primary-soft); }
/* Allegati compatti: primo visibile + freccetta "+N" per gli altri */
.pf-more {
    display: inline-flex; align-items: center; gap: 0.2rem; cursor: pointer;
    font-size: 0.76rem; font-weight: 700; color: var(--primary);
    background: var(--primary-soft); border: 1px solid var(--border);
    border-radius: 999px; padding: 0.08rem 0.5rem; font-family: inherit;
}
.pf-more .caret { color: inherit; transition: transform 0.15s ease; }
.pf-more.open .caret { transform: rotate(180deg); }
.pf-rest { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; flex-basis: 100%; }
/* Pagina: da post-it a evento Google Calendar */
.cal-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1rem; align-items: start; }
.cal-row { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.cal-row label { flex: 1 1 140px; }
.cal-preview-h { font-size: 0.95rem; margin: 0 0 0.6rem; color: var(--muted); }
@media (max-width: 800px) { .cal-layout { grid-template-columns: minmax(0, 1fr); } }
.postit-cat-set { margin-top: 0.4rem; }
.postit-cat-set select { width: 100%; }

/* ===================== Inbox / Post-it ===================== */
.nav-count { margin-left: auto; background: var(--primary); color: #fff; font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 0.05rem 0.45rem; min-width: 1.2rem; text-align: center; }
.postit-add { display: block; margin-top: 0; }
.postit-tabs { display: flex; gap: 0.4rem; margin: 1.1rem 0 0.8rem; }
.postit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 0.9rem; }
.postit { display: flex; flex-direction: column; gap: 0.5rem; background: #fffdf3; border: 1px solid #f0e6c8; border-radius: 12px; padding: 0.8rem 0.9rem; box-shadow: 0 1px 2px rgba(16,24,40,0.05); }
.postit-body { white-space: normal; line-height: 1.4; }
.postit-foot { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
/* Data spostata in cima alla card (sopra il titolo), sotto la riga categoria/origine. */
.postit > .postit-date { margin: -0.15rem 0 -0.1rem; font-size: 0.82rem; }
.postit-sharedwith, .postit-createdby { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0.35rem 0 0; padding: 0.12rem 0.5rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; max-width: 100%; }
.postit-sharedwith { background: #ede9fe; color: #5b21b6; }
.postit-createdby { background: #d1fae5; color: #065f46; }
.postit-sharedwith svg, .postit-createdby svg { width: 14px; height: 14px; flex: 0 0 auto; }
.postit-sharedwith span, .postit-createdby span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Spinge data+azioni e i controlli sottostanti (aggancia, categoria, urgenza)
   in fondo alla card: nella griglia le card di una riga hanno altezza uguale,
   così tutti i tasti restano allineati e lo spazio vuoto va fra testo e controlli. */
.postit-grid .postit-foot { margin-top: auto; }
.postit-actions { display: flex; gap: 0.1rem; flex-wrap: wrap; justify-content: flex-end; }
.postit-attach select { width: 100%; font-size: 0.84rem; }
.postit-smista { margin-top: 0.5rem; }
.postit-smista select { width: 100%; font-size: 0.84rem; font-weight: 600; color: var(--primary-dark); background: var(--primary-soft); border-color: #dfe4ff; }
/* Urgenza in Inbox: tendina (colore della corsia) + bottone vai in Lavagna.
   Entrambi i form si stirano in altezza, cosi select e bottone sono identici. */
.postit-urg { display: flex; gap: 0.4rem; align-items: stretch; margin-top: 0.5rem; }
.postit-urg > form { display: flex; margin: 0; }
.postit-urg-set { flex: 1 1 auto; min-width: 0; }
.postit-urg-set select { width: 100%; height: 100%; font-size: 0.82rem; font-weight: 700; color: var(--pi-color); background: #fff; border: 1px solid var(--pi-border); border-radius: 8px; padding: 0.4rem 0.5rem; }
.btn-sm { padding: 0.4rem 0.7rem; font-size: 0.8rem; white-space: nowrap; }
.btn-lavagna { flex: 0 0 auto; display: inline-flex; align-items: center; background: var(--pi-color); color: #fff; border: 1px solid var(--pi-color); font-weight: 700; }
.btn-lavagna:hover { filter: brightness(0.92); color: #fff; }
/* Testata Inbox: titolo + tab e azioni allineate a destra */
.inbox-head-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.chip-urg { display: inline-flex; align-items: center; gap: 0.3rem; }
/* Filtri urgenza + categoria compattati su un'unica riga */
.postit-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.7rem 0 0.8rem; }
.postit-filters .pf-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.postit-filters .pf-sep { width: 1px; align-self: stretch; min-height: 1.3rem; background: var(--border); margin: 0 0.3rem; }
.postit-filters .chip-filter, .postit-filters .chip-cat { padding: 0.16rem 0.55rem; font-size: 0.76rem; }
/* Filtro "Progetto": menù a discesa multi-spunta (usa <details>, niente JS) */
.pf-proj { position: relative; display: inline-block; }
.pf-proj > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem; }
.pf-proj > summary::-webkit-details-marker { display: none; }
.pf-proj > summary svg { width: 13px; height: 13px; }
.pf-proj-menu { position: absolute; z-index: 40; top: calc(100% + 5px); left: 0; min-width: 230px; max-height: 340px; overflow: auto; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,0.14); padding: 0.5rem; }
.pf-proj-opt { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.4rem; border-radius: 6px; font-size: 0.85rem; cursor: pointer; white-space: nowrap; }
.pf-proj-opt:hover { background: var(--primary-soft); }
.pf-proj-opt input { width: auto; margin: 0; }
.pf-proj-actions { display: flex; gap: 0.4rem; margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px solid var(--border); }
/* Cestino: barra azioni + selezione multipla */
.cestino-toolbar { display: flex; justify-content: flex-end; margin: 0.2rem 0 0.8rem; }
.cestino-check { display: flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; color: var(--muted); margin-bottom: 0.4rem; cursor: pointer; }
.cestino-check input { width: 16px; height: 16px; }
.postit-cestino { opacity: 0.92; }
/* Lavagna: switch viste (per urgenza / per categoria) */
.lavagna-head-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.lavagna-views { display: inline-flex; gap: 0.4rem; }
.postit-link { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.84rem; font-weight: 600; text-decoration: none; color: var(--primary-dark); }
.postit-link svg { width: 15px; height: 15px; }
.postit-proj { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.postit-proj .btn-icon-sm { font-size: 0.95rem; line-height: 1; }
/* Cliente del post-it (link + stacca, oppure tendina per agganciare) */
.postit-cli { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-top: 0.35rem; }
.postit-cli .btn-icon-sm { font-size: 0.95rem; line-height: 1; }
.postit-cli-set { margin-top: 0.35rem; }
.postit-cli-set select { width: 100%; }
/* Condivisione: icona due omini (grigia/blu) + pannello */
.btn-icon.shared { color: #2563eb; }
.btn-icon.shared:hover { color: #1d4ed8; background: #eff6ff; }
.psh-panel {
    margin-top: 0.4rem; padding: 0.6rem 0.7rem; border: 1px solid var(--border);
    border-radius: 10px; background: #f8fafc;
}
.psh-auto { margin: 0 0 0.5rem; font-size: 0.84rem; }
.psh-ro { margin: 0; font-size: 0.86rem; color: var(--text); }
.psh-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin-bottom: 0.35rem; }
.psh-list { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.55rem; }
.psh-opt { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; cursor: pointer; }
.psh-opt input { width: auto; }
.btn.btn-sm { padding: 0.32rem 0.8rem; font-size: 0.85rem; }
/* Vista sola lettura dell'urgenza (collaboratore) */
.postit-urg-ro { margin-top: 0.35rem; font-size: 0.85rem; }
.postit-edit textarea { width: 100%; resize: vertical; }
.postit-edit-foot { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; }
/* Mini-form "Attivazione" del task */
.postit-activate { margin-top: 0.5rem; padding: 0.55rem 0.7rem; background: #f5f7ff; border: 1px solid #dfe4f5; border-radius: 8px; }
.postit-activate-lbl { display: block; font-size: 0.85rem; font-weight: 600; }
.postit-activate-lbl select { width: 100%; margin-top: 0.3rem; }
.postit-on-project { margin-bottom: 1.25rem; }
.postit-on-project .card-head { display: flex; align-items: center; justify-content: space-between; }
.postit-on-project h2 { display: inline-flex; align-items: center; gap: 0.4rem; }
.postit-mini-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 0.7rem; align-items: start; }
.postit-mini { background: #fffdf3; border: 1px solid #f0e6c8; border-radius: 10px; padding: 0.6rem 0.8rem; }
.postit-mini .postit-date { display: block; margin-top: 0.2rem; font-size: 0.78rem; }
.postit-mini-top { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.3rem; }
.postit-mini .postit-title { display: block; margin-bottom: 0.2rem; }
.postit-dot { width: 10px; height: 10px; border-radius: 99px; flex: 0 0 auto; background: var(--pi-color, #64748b); }

/* Colore di corsia dei post-it: sfondo tenue + colore del pallino.
   Stesso codice colore delle colonne della lavagna. */
.postit-lane-da_smistare { --pi-color: #64748b; --pi-bg: #f4f6f8; --pi-border: #e2e8f0; }
.postit-lane-urgente     { --pi-color: #dc2626; --pi-bg: #fff5f3; --pi-border: #f3d4cd; }
.postit-lane-settimana   { --pi-color: #d97706; --pi-bg: #fff8ee; --pi-border: #f2e1c2; }
.postit-lane-quando      { --pi-color: #059669; --pi-bg: #f0fbf6; --pi-border: #cbeddd; }
.postit.postit-lane-da_smistare, .postit.postit-lane-urgente, .postit.postit-lane-settimana, .postit.postit-lane-quando,
.postit-mini.postit-lane-da_smistare, .postit-mini.postit-lane-urgente, .postit-mini.postit-lane-settimana, .postit-mini.postit-lane-quando {
    background: var(--pi-bg); border-color: var(--pi-border);
}

/* ===================== Registro modifiche ===================== */
.log-filters { margin-top: 0; gap: 0.6rem; }
.log-filters label { font-size: 0.8rem; gap: 0.2rem; }
.log-filters input, .log-filters select { padding: 0.4rem 0.6rem; font-size: 0.9rem; }
.log-when { white-space: nowrap; color: var(--muted); font-size: 0.88rem; }
.log-details { max-width: 480px; }
.log-table .badge { font-size: 0.72rem; }

/* ===================== Campi personalizzati ===================== */
.cf-note { margin: 0.6rem 0 0; font-size: 0.84rem; }
.badge-system { background: var(--primary-soft); color: var(--primary-dark); font-size: 0.7rem; margin-left: 0.3rem; }
.row-system td { background: #fcfcfe; }
.drag-handle-off { cursor: default; }
.cf-rename { margin-top: 0.5rem; }
.ie-multi-panel { display: flex; flex-direction: column; gap: 0.35rem; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.75rem; box-shadow: 0 8px 24px rgba(16,24,40,0.12); }
.ie-multi-panel .check-label { display: flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; cursor: pointer; }
.ie-multi-foot { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.35rem; padding-top: 0.5rem; border-top: 1px dashed var(--border); }

/* ===================== Profilo personale ===================== */
.profile-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; align-items: start; }
.profile-cols > .card { margin: 0; }
@media (max-width: 900px) { .profile-cols { grid-template-columns: minmax(0, 1fr); } }
.profile-note { margin: -0.4rem 0 0.2rem; font-size: 0.82rem; }

/* ===================== Cerca progetto (suggerimenti) ===================== */
.ppick { position: relative; display: block; min-width: 220px; }
.ppick-input { width: 100%; }
.ppick-list {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
    background: #fff; border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.14); padding: 0.25rem;
    max-height: 260px; overflow: auto;
}
.ppick-item {
    display: block; width: 100%; text-align: left; background: none; border: 0;
    padding: 0.45rem 0.6rem; border-radius: 8px; cursor: pointer;
    font: inherit; color: var(--text);
}
.ppick-item:hover, .ppick-item.on { background: var(--primary-soft); color: var(--primary-dark); }

/* ===================== Lavagna (post-it a colonne) ===================== */
.lavagna-add { margin: 0 0 1.1rem; }
.lavagna { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .lavagna { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .lavagna { grid-template-columns: 1fr; } }
.lavagna-col { --lane-color: #64748b; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem; display: flex; flex-direction: column; min-height: 200px; }
.lavagna-col-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.1rem 0.2rem 0.6rem; border-bottom: 2px solid var(--lane-color); margin-bottom: 0.75rem; }
.lavagna-col-head h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text); }
.lavagna-col-head h2::before { content: ''; width: 9px; height: 9px; border-radius: 99px; background: var(--lane-color); flex: 0 0 auto; }
.lavagna-count { background: #fff; border: 1px solid var(--border); border-radius: 999px; font-size: 0.74rem; font-weight: 700; color: var(--muted); padding: 0.05rem 0.5rem; }
.lavagna-col-da_smistare { --lane-color: #64748b; }
.lavagna-col-urgente     { --lane-color: #dc2626; }
.lavagna-col-settimana   { --lane-color: #d97706; }
.lavagna-col-quando      { --lane-color: #059669; }
.lavagna-body { display: flex; flex-direction: column; gap: 0.6rem; flex: 1 1 auto; min-height: 60px; }
.lavagna-card { cursor: grab; }
.lavagna-card.dragging { opacity: 0.45; cursor: grabbing; }

/* ---- Task: interruttore di viste (Globale / Per urgenza / Per tipo) ---- */
.task-views { display: inline-flex; gap: 0.3rem; margin: 0 0 0.9rem; flex-wrap: wrap; }
.task-view { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text); text-decoration: none; font-size: 0.86rem; font-weight: 600; }
.task-view svg { width: 16px; height: 16px; }
.task-view:hover { background: var(--bg); }
.task-view.on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---- Task: bacheca a colonne (viste Per urgenza / Per tipo) ---- */
.task-board { display: flex; gap: 1rem; align-items: flex-start; overflow-x: auto; padding-bottom: 12px; }
.task-col { --col-color: var(--border); flex: 0 0 320px; max-width: 320px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem; }
.task-col-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.1rem 0.2rem 0.6rem; border-bottom: 2px solid var(--col-color); margin-bottom: 0.75rem; }
.task-col-head h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); }
.task-col-head h2::before { content: ''; width: 9px; height: 9px; border-radius: 99px; background: var(--col-color); flex: 0 0 auto; }
.task-col-count { background: #fff; border: 1px solid var(--border); border-radius: 999px; font-size: 0.74rem; font-weight: 700; color: var(--muted); padding: 0.05rem 0.5rem; }
/* Testata cliccabile per ordinare la colonna per data. */
.task-col-sort { cursor: pointer; justify-content: flex-start; user-select: none; border-radius: 6px 6px 0 0; transition: background 0.12s; }
.task-col-sort:hover { background: rgba(79, 70, 229, 0.06); }
.task-col-sort .task-col-count { margin-left: auto; }
.task-sort-mark { font-size: 0.66rem; color: var(--col-color); font-weight: 700; min-width: 0.7rem; }
.task-col-body { display: flex; flex-direction: column; gap: 0.9rem; min-height: 40px; }
.task-col-empty { text-align: center; padding: 0.6rem 0; margin: 0; }
.task-board .postit[data-can-move] { cursor: grab; }
.task-board .postit.dragging { opacity: 0.45; cursor: grabbing; }
.task-col.drop-hover { outline: 2px dashed var(--primary); outline-offset: 2px; background: var(--primary-soft); }

/* ===================== Attività (task) ===================== */
.task-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.4rem; }
.task { border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: 0.5rem 0.7rem; }
.task-row { display: flex; align-items: center; gap: 0.7rem; }
.task-status-form { margin: 0; }
.task-status-select { font-size: 0.82rem; font-weight: 600; border: 1px solid var(--border); border-radius: 999px; padding: 0.18rem 0.5rem; background: var(--bg); cursor: pointer; }
.task.task-st-in_corso { border-left: 3px solid var(--primary); }
.task.task-st-fatto { background: #f7f9f7; }
.task-main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; }
.task-title { font-weight: 600; }
.task-done .task-title { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.task-due { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; color: var(--muted); }
.task-due svg { opacity: 0.8; width: 14px; height: 14px; }
.task-overdue { color: #dc2626; font-weight: 600; }
.task-actions { display: flex; align-items: center; gap: 0.1rem; flex: 0 0 auto; }
.task-edit { margin-top: 0.6rem; }
/* Riquadro "occhiolino": mostra il post-it da cui è nata l'attività. */
.task-peek { margin-top: 0.5rem; padding: 0.6rem 0.75rem; background: #fffdf3; border: 1px solid #f0e6c8; border-left: 3px solid var(--primary); border-radius: 8px; }
.task-peek-head { font-size: 0.78rem; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.35rem; }
.task-peek-head svg { width: 14px; height: 14px; }
.task-peek-body { font-size: 0.9rem; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; }

/* Riepilogo economico (incassi e margine) */
.econ-summary { display: flex; flex-wrap: wrap; gap: 0.9rem 1.8rem; padding: 0.2rem 0 0.9rem; }
.econ-item { display: flex; flex-direction: column; gap: 0.15rem; }
.econ-label { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.econ-item strong { font-size: 1.08rem; }
.econ-due { color: #dc2626; }
.econ-hi strong { color: var(--primary); }
.note-box .ie-display { display: block; min-height: 4.5rem; border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.8rem; background: #fafbfc; white-space: normal; margin: 0; }
.note-box .ie-edit .ie-input { max-width: none; width: 100%; }

/* Chip persona (colonna Assegnato) */
.person-chip { display: inline-block; background: var(--primary-soft); color: var(--primary-dark); border-radius: 999px; padding: 0.1rem 0.55rem; font-size: 0.82rem; font-weight: 600; margin: 0 0.25rem 0.2rem 0; }
[data-assign-cell] .badge { margin: 0 0.25rem 0.15rem 0; }

/* Menu a tendina custom (popover) per la modifica al volo */
.ie-pop {
    position: fixed; z-index: 60; background: #fff; border: 1px solid var(--border);
    border-radius: 10px; box-shadow: 0 10px 30px rgba(16, 24, 40, 0.16);
    padding: 0.35rem; min-width: 210px; max-width: 300px; max-height: 320px; overflow-y: auto;
}
.ie-pop-item {
    display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left;
    background: none; border: none; cursor: pointer; padding: 0.4rem 0.5rem; border-radius: 8px;
    font: inherit; color: var(--text);
}
.ie-pop-item:hover { background: var(--primary-soft); }
.ie-pop-item.selected { background: var(--primary-soft); }
.ie-pop-head { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; padding: 0.45rem 0.5rem 0.2rem; }
.ie-pop-check { margin-left: auto; color: var(--primary); font-weight: 800; }

/* Selettore cliente ricco: cerca / apri scheda / crea al volo */
.ie-pop-client { display: flex; flex-direction: column; overflow: hidden; max-height: 360px; min-width: 240px; }
.ie-pop-scroll { overflow-y: auto; max-height: 200px; }
.ie-pop-filter {
    width: 100%; box-sizing: border-box; margin: 0.15rem 0 0.3rem; padding: 0.4rem 0.55rem;
    border: 1px solid var(--border); border-radius: 8px; font: inherit; color: var(--text);
}
.ie-pop-filter:focus { outline: none; border-color: var(--primary); }
.ie-pop-open {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.45rem 0.55rem; margin-bottom: 0.2rem; border-radius: 8px;
    background: var(--primary-soft); color: var(--primary); font-weight: 600; text-decoration: none;
}
.ie-pop-open:hover { filter: brightness(0.97); }
.ie-pop-newbtn {
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: 0.45rem 0.55rem; margin-top: 0.2rem; border-top: 1px solid var(--border);
    font: inherit; font-weight: 600; color: var(--primary);
}
.ie-pop-newbtn:hover { background: var(--primary-soft); border-radius: 0 0 8px 8px; }
.ie-pop-newform { display: flex; flex-direction: column; gap: 0.3rem; padding-top: 0.2rem; border-top: 1px solid var(--border); }
.ie-pop-create { justify-content: center; background: var(--primary-soft); color: var(--primary); font-weight: 600; }

/* Trascinamento righe (drag and drop) */
.drag-handle { color: var(--muted); cursor: grab; width: 1%; white-space: nowrap; }
.drag-handle:active { cursor: grabbing; }
tr.dragging { opacity: 0.5; background: var(--primary-soft); }

.form-actions { display: flex; align-items: center; gap: 1rem; }

/* ===================== Bottoni ===================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    background: var(--primary); color: #fff; border: none; border-radius: 9px;
    padding: 0.6rem 1.15rem; font-size: 0.95rem; font-weight: 600; cursor: pointer;
    text-decoration: none; font-family: inherit; transition: background 0.12s, transform 0.02s;
    box-shadow: var(--shadow);
}
.btn:hover { background: var(--primary-dark); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn + .btn { margin-left: 0.5rem; }

/* Varianti colore (definite DOPO .btn cosi' vincono sul colore di base) */
.btn-light { background: #fff; color: var(--text); border: 1px solid var(--border); box-shadow: none; }
.btn-light:hover { background: var(--bg); }
.btn-warning { background: #f59e0b; color: #fff; }
.btn-warning:hover { background: #d97706; }
.btn-danger { background: var(--error-text); color: #fff; }
.btn-danger:hover { background: #991b1b; }
/* Verde: va ripetuto QUI perché la regola base `.btn` sta più in basso nel
   file e, a parità di specificità, l'ultima vince (la prima definizione, più
   in alto, veniva coperta e il bottone restava viola). */
.btn-success { background: #16a34a; color: #fff; border: 1px solid #16a34a; box-shadow: none; }
.btn-success:hover { background: #15803d; }

.btn-link {
    color: var(--primary); text-decoration: none; font-weight: 600; font-size: 0.92rem;
    background: none; border: none; cursor: pointer; padding: 0; font-family: inherit;
}
.btn-link:hover { text-decoration: underline; }
.btn-link.danger { color: var(--error-text); }

button.btn-icon {
    background: none; border: none; cursor: pointer; padding: 0.25rem;
    color: var(--muted); display: inline-flex; align-items: center; border-radius: 7px;
}
button.btn-icon:hover { color: var(--error-text); background: var(--error-bg); }
a.btn-icon {
    background: none; border: none; cursor: pointer; padding: 0.25rem;
    color: var(--muted); display: inline-flex; align-items: center; border-radius: 7px; text-decoration: none;
}
a.btn-icon.btn-icon-edit:hover,
button.btn-icon.btn-icon-edit:hover { color: var(--primary); background: var(--primary-soft); }
.icon { display: block; }
.line-tools { display: inline-flex; align-items: center; gap: 0.35rem; }
.line-when { font-size: 0.8rem; margin-left: 0.3rem; }
.line-edit-row td { background: var(--bg); }

/* ===================== Alert ===================== */
.alert { padding: 0.8rem 1rem; border-radius: 10px; margin-bottom: 1.25rem; font-size: 0.93rem; }
.alert ul { margin: 0; padding-left: 1.2rem; }
.alert-error { background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-text); }
.alert-success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.gprob-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.gprob-banner .btn { flex: 0 0 auto; }

/* Banner "stai impersonando un altro utente" */
.imp-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
    flex-wrap: wrap;
    padding: 0.6rem 1rem; border-radius: 10px; margin-bottom: 1.25rem;
    background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; font-size: 0.92rem;
}
.imp-banner-text { display: inline-flex; align-items: center; gap: 0.5rem; }
.imp-banner-text svg { width: 18px; height: 18px; }
.imp-banner-actions { display: inline-flex; align-items: center; gap: 0.8rem; }
.imp-banner .btn-link { color: #92400e; }

/* Bacheca note del progetto (per tutti o per un collaboratore) */
.note-add { margin-bottom: 1.1rem; }
.note-to-field { display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; margin-bottom: 0.7rem; font-size: 0.9rem; font-weight: 600; }
.note-to-field select { width: auto; min-width: 150px; }
.note-add .form-actions { margin-top: 0.2rem; }
.note-list { display: flex; flex-direction: column; gap: 0.8rem; }
.note-item { border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem 1rem; }
.note-item-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.45rem; flex-wrap: wrap; }
.note-to { display: inline-flex; align-items: center; gap: 0.35rem; }
.note-meta { font-size: 0.82rem; }
.note-body { font-size: 0.95rem; line-height: 1.5; word-break: break-word; }
.note-body p { margin: 0 0 0.4rem; }
.note-actions { display: flex; gap: 0.3rem; margin-top: 0.5rem; }
.note-edit { margin-top: 0.6rem; }

/* Note condivise dentro le colonne giuste: indicatore chiaro */
.note-card-shared { background: rgba(79, 70, 229, 0.05); }
.note-shared-from { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.45rem; font-size: 0.8rem; }
.note-shared-badge { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--primary); color: #fff; font-weight: 700; font-size: 0.72rem; padding: 0.12rem 0.5rem; border-radius: 999px; }
.note-shared-badge svg { width: 13px; height: 13px; }

/* Pannello "Ordine del menù" */
.menu-sort { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.menu-sort-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; cursor: grab; user-select: none; }
.menu-sort-item.dragging { opacity: 0.5; border-style: dashed; }
.menu-sort-grip { color: var(--muted); font-size: 1.15rem; line-height: 1; }
.menu-sort-ic { display: inline-flex; color: var(--primary); }
.menu-sort-ic svg { width: 18px; height: 18px; }
.menu-sort-label { font-weight: 600; }
.ok-flash { color: #047857; font-weight: 600; }

/* ===================== Tabelle ===================== */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: #fafbfc; }
.row-inactive { opacity: 0.5; }
.actions { display: flex; gap: 0.85rem; align-items: center; justify-content: flex-end; white-space: nowrap; }
.inline-form { display: inline; margin: 0; }

/* ===================== Etichette colorate ===================== */
.badge {
    display: inline-block; font-size: 0.74rem; font-weight: 600;
    padding: 0.12rem 0.5rem; border-radius: 999px; background: #eef2ff; color: #4338ca;
    margin-left: 0.3rem; vertical-align: middle;
}
.badge:first-child { margin-left: 0; }
.badge-ok  { background: #ecfdf5; color: #047857; }
.badge-off { background: #fef2f2; color: #b91c1c; }
.badge-color-grigio    { background: #eef1f4; color: #374151; }
.badge-color-rosso     { background: #fee2e2; color: #b91c1c; }
.badge-color-arancione { background: #ffedd5; color: #c2410c; }
.badge-color-giallo    { background: #fef9c3; color: #a16207; }
.badge-color-verde     { background: #dcfce7; color: #15803d; }
.badge-color-blu       { background: #dbeafe; color: #1d4ed8; }
.badge-color-viola     { background: #ede9fe; color: #6d28d9; }
.badge-color-rosa      { background: #fce7f3; color: #be185d; }
.badge-color-ambra     { background: #fef3c7; color: #b45309; }
.badge-color-lime      { background: #ecfccb; color: #4d7c0f; }
.badge-color-teal      { background: #ccfbf1; color: #0f766e; }
.badge-color-ciano     { background: #cffafe; color: #0e7490; }
.badge-color-indaco    { background: #e0e7ff; color: #4338ca; }
.badge-color-nero      { background: #1f2937; color: #f9fafb; }

/* Selettore colore a contenitori colorati */
.color-picker { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; }
.color-swatch {
    border: 2px solid transparent; border-radius: 999px; padding: 0.2rem 0.7rem;
    font-size: 0.82rem; font-weight: 700; cursor: pointer; color: #fff; font-family: inherit;
    transition: transform 0.02s;
}
.color-swatch:active { transform: translateY(1px); }
.color-swatch.selected { border-color: var(--text); box-shadow: 0 0 0 2px #fff inset; }
.sw-none { background: #fff; color: #6b7280; border: 2px dashed var(--border); }
.sw-none.selected { border-color: var(--text); border-style: solid; }
.sw-grigio { background: #6b7280; } .sw-rosso { background: #dc2626; } .sw-arancione { background: #ea580c; }
.sw-ambra { background: #d97706; } .sw-giallo { background: #ca8a04; } .sw-lime { background: #65a30d; }
.sw-verde { background: #16a34a; } .sw-teal { background: #0d9488; } .sw-ciano { background: #0891b2; }
.sw-blu { background: #2563eb; } .sw-indaco { background: #4f46e5; } .sw-viola { background: #7c3aed; }
.sw-rosa { background: #db2777; } .sw-nero { background: #111827; }

/* ===================== Responsive (schermi stretti) ===================== */
@media (max-width: 820px) {
    .hamburger { display: inline-flex; }

    /* In alto niente menù a tendina (sforerebbero): vanno nel cassetto. */
    .topbar .dropdown { display: none; }
    .sidebar-admin { display: block; border-top: 1px solid var(--border); margin-top: 0.5rem; padding-top: 0.2rem; }

    /* La sidebar diventa un cassetto che scorre da sinistra (off-canvas). */
    .sidebar {
        position: fixed; top: var(--topbar-h); left: 0; bottom: 0;
        width: 264px; max-width: 82vw; flex: none;
        /* Altezza esplicita: con il solo top/bottom alcuni browser mobile la
           calcolano sul contenuto e l'elenco esce dallo schermo. dvh tiene
           conto della barra del browser che compare e scompare. */
        height: calc(100dvh - var(--topbar-h));
        display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch;
        transform: translateX(-100%); transition: transform 0.25s ease;
        z-index: 40; box-shadow: 2px 0 20px rgba(15, 23, 42, 0.18);
    }
    .app.nav-open .sidebar { transform: translateX(0); }
    /* L'elenco scorre DENTRO il cassetto: min-height:0 (vedi sopra) e
       overscroll-behavior perché arrivando in fondo non trascini la pagina. */
    .sidebar-nav {
        flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.7rem;
        -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    }
    .nav-item { margin-bottom: 2px; white-space: normal; }
    /* Il piede (profilo, guida, esci) resta sempre visibile in fondo. */
    .sidebar-foot { flex: 0 0 auto; border-top: 1px solid var(--border); margin-left: 0; }

    /* Velo scuro dietro al cassetto: tocco per chiudere. */
    .nav-overlay {
        display: block; position: fixed; inset: var(--topbar-h) 0 0 0;
        background: rgba(15, 23, 42, 0.45); z-index: 35;
        opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
    }
    .app.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }

    .search-box { width: 130px; }
    .content { padding: 1.3rem; }
}

/* ===================== Correzioni mobile (niente sforamenti) ===================== */
@media (max-width: 820px) {
    /* Mai scroll orizzontale dell'intera pagina su mobile. */
    body { overflow-x: hidden; }

    /* Le tabelle non chiuse in un contenitore scrollano da sole (no sforamento). */
    table.table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-scroll > table.table { display: table; }

    /* La testata delle pagine va a capo invece di stringersi. */
    .dash-head-row { align-items: flex-start; }

    /* Le scritte lunghe (nomi, valori, file) vanno a capo invece di sforare. */
    .field-card, .field-ro, .ie-display, .wi-desc, .proj-files, .postit-mini { overflow-wrap: anywhere; min-width: 0; }
    .card { overflow-wrap: break-word; }
}

@media (max-width: 640px) {
    /* Le card dei post-it a colonna singola: minmax(0,1fr) evita lo sforamento. */
    .postit-grid { grid-template-columns: minmax(0, 1fr); }

    /* Righe Incassi/Paghe: invece di una tabella stretta e illeggibile, ogni voce
       diventa un blocco — badge e importo in alto, descrizione/data sotto. */
    .assign-lines td { padding: 0.1rem 0; border-bottom: none; }
    .assign-lines tr {
        display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.55rem;
        padding: 0.6rem 0; border-bottom: 1px solid var(--border);
    }
    .assign-lines tr:last-child { border-bottom: none; }
    .assign-lines .line-kind { width: auto; }
    .assign-lines .line-amount { margin-left: auto; }
    .assign-lines .line-del { width: auto; }
    /* La cella centrale (data · nota) va a capo a tutta larghezza, sotto. */
    .assign-lines td:not([class]) { flex: 1 1 100%; order: 5; color: var(--muted); font-size: 0.9rem; }

    /* Caricamento file: tasto a tutta larghezza in alto, riquadro "trascina qui"
       sotto (prima erano affiancati e sforavano). */
    .proj-file-add { flex-direction: column; align-items: stretch; gap: 0.45rem; }
    .proj-file-add .btn { width: 100%; justify-content: center; }
    .proj-file-add .wi-file-name {
        max-width: none; white-space: normal; overflow: visible; text-align: center;
        padding: 0.7rem; border: 1px dashed var(--border); border-radius: 9px; background: var(--bg);
    }
}

@media (max-width: 560px) {
    /* Schermi molto stretti: niente ricerca in alto (resta più spazio al menu). */
    .topbar-right { display: none; }
    /* Pulsante "Salva task" a tutta larghezza nella dettatura. */
    .dc-save { margin-left: 0; width: 100%; }
}

/* ===================== Testate pagina a due fasce ===================== */
/* Desktop: titolo+azione a sinistra, strumenti a destra (una riga).
   Mobile: titolo (con azione) sopra, strumenti sotto. */
.ph-head { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem 1rem; flex-wrap: wrap; }
.ph-top { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.ph-top h1, .ph-top h2 { margin: 0; }
.ph-tools { display: flex; align-items: center; gap: 0.6rem; flex-wrap: nowrap; justify-content: flex-end; }
.ph-tools .search-inline { flex: 0 1 320px; min-width: 0; }
.ph-tools .btn { flex: 0 0 auto; white-space: nowrap; }
.ph-short { display: none; }   /* su desktop si mostrano le etichette lunghe */

@media (max-width: 640px) {
    .ph-head { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .ph-top { width: 100%; justify-content: space-between; }
    .ph-tools { width: 100%; justify-content: flex-start; gap: 0.45rem; }
    .ph-tools .search-inline { flex: 1 1 auto; }
    .ph-tools .summary-pick { flex: 1 1 auto; min-width: 0; }
    .ph-tools .summary-pick select { width: 100%; }
    .ph-long { display: none; }
    .ph-short { display: inline; }

    /* Testate generiche dei box: vanno a capo invece di sforare. */
    .card-head { flex-wrap: wrap; }

    /* Voci di lavoro: la riga va a capo (badge+importo sopra, descrizione, azioni). */
    .wi-row { flex-wrap: wrap; row-gap: 0.4rem; }
    .wi-type { order: 1; }
    .wi-amount { order: 1; margin-left: auto; }
    .wi-desc { order: 2; flex: 1 1 100%; }
    .wi-actions { order: 3; flex: 1 1 100%; justify-content: flex-end; }
}

/* ===================== Testata Task (titolo + azioni) ===================== */
.task-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 0.7rem; flex-wrap: wrap; }
.task-head-top { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.task-head-top h1 { margin: 0; }
.task-head-tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Avviso "nuovi task arrivati" dal controllo automatico della posta */
.autocheck-banner {
    position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%);
    z-index: 60; background: #0f172a; color: #fff; padding: 0.6rem 1.1rem;
    border-radius: 999px; box-shadow: 0 6px 24px rgba(15, 23, 42, 0.28);
    font-size: 0.9rem; font-weight: 600; max-width: 92vw;
}
.autocheck-banner a { color: #c7d2fe; text-decoration: underline; }

/* Filtri Task come due tendine (solo mobile; su desktop restano le chip). */
.postit-filters-m { display: none; gap: 0.5rem; margin: 0.7rem 0 0.85rem; }
.postit-filters-m select {
    flex: 1 1 0; min-width: 0;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    font-family: inherit; font-size: 0.92rem; font-weight: 600; color: var(--text);
    padding: 0.6rem 2.1rem 0.6rem 0.85rem;
    border: 1px solid var(--border); border-radius: 10px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    cursor: pointer;
}
.postit-filters-m select:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

@media (max-width: 640px) {
    .task-head { flex-direction: column; align-items: stretch; gap: 0.55rem; }

    /* Strumenti Task (Posta/Archivio/Detta) tutti su UNA riga, larghezza uguale. */
    .task-head-tools { flex-wrap: nowrap; gap: 0.4rem; }
    .task-head-tools > * { flex: 1 1 0; min-width: 0; }
    .task-head-tools .btn { width: 100%; justify-content: center; padding: 0.5rem 0.3rem; font-size: 0.82rem; }
    /* Viste (Globale/Urgenze/Tipo) tutte su UNA riga, larghezza uguale. */
    .task-views { flex-wrap: nowrap; gap: 0.35rem; width: 100%; }
    .task-view { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0.45rem 0.3rem; font-size: 0.82rem; }

    /* La card del task non deve toccare i bordi: il titolo va a capo invece di
       allargare la card (vedi anche .postit-grid minmax sopra). */
    .postit-title, .postit-body { overflow-wrap: anywhere; }

    /* I filtri a chip lasciano il posto a due tendine affiancate. */
    .postit-filters { display: none; }
    .postit-filters-m { display: flex; }

    /* Filtri Progetti: su mobile il pannello va SOTTO il pulsante (a tutta riga). */
    .proj-filters .pf-body { flex-basis: 100%; }

    /* Collaboratori (assegnazioni): testata e modulo che non sforano. */
    .assign-head { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .assign-actions { justify-content: space-between; }
    .assign-nums { font-size: 0.82rem; gap: 0.2rem 0.8rem; }
    .form-inline label.grow { flex: 1 1 100%; }
    .form-inline label.grow select { width: 100%; }
}

/* ===================== Dettatura task (mobile) ===================== */
.dictate-head { max-width: 640px; }
.dictate-head-actions { display: inline-flex; align-items: center; gap: 0.5rem; }
.dictate-card { max-width: 640px; display: flex; flex-direction: column; gap: 0.7rem; }
.dictate-field { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 600; }
#dictate-body {
    width: 100%; box-sizing: border-box; font-family: inherit; font-size: 1.05rem;
    line-height: 1.5; padding: 0.8rem; border: 1px solid var(--border); border-radius: 10px;
    resize: vertical; min-height: 130px;
}
#dictate-body:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.rec-status { font-size: 0.85rem; min-height: 1.1em; margin-top: -0.2rem; }

/* Urgenza / Categoria (pillole) + Salva, tutto sulla stessa fascia. */
.dictate-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.5rem; margin-top: 0.3rem; }
.dc-field { display: flex; flex-direction: column; gap: 0.4rem; }
.dc-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.pill-group { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pill {
    --c: #64748b;
    display: inline-flex; align-items: center; cursor: pointer;
    border: 1.5px solid var(--c); color: var(--c); background: #fff;
    border-radius: 999px; padding: 0.32rem 0.8rem; font-family: inherit;
    font-size: 0.84rem; font-weight: 600; line-height: 1.2; transition: all 0.12s ease;
}
.pill:hover { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.pill.is-active { background: var(--c); color: #fff; border-color: var(--c); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18); }
.pill-auto { font-weight: 700; }
.dictate-hint { font-size: 0.82rem; margin: 0.7rem 0 0; max-width: 640px; }
.dc-save { margin-left: auto; }
.btn-lg { font-size: 1.02rem; padding: 0.62rem 1.5rem; }

/* Pulsante "Parla": diventa rosso e pulsa mentre registra. */
.btn-rec { display: inline-flex; align-items: center; gap: 0.5rem; }
.btn-rec .rec-label { display: inline-flex; align-items: center; gap: 0.4rem; }
.btn-rec .rec-dot {
    width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; flex: 0 0 auto;
}
.btn-rec.is-recording { background: var(--error-text); border-color: var(--error-text); color: #fff; }
.btn-rec.is-recording .rec-dot { background: #fff; animation: rec-pulse 1s ease-in-out infinite; }
@keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.rec-status { font-size: 0.88rem; }

/* --- Meeting Intelligence (scheda riunione) --- */
.meet-meta { font-size: 13px; }
.meet-title-wrap { display: flex; align-items: center; gap: 0.4rem; }
.meet-title-wrap h1 { margin: 0; }
.meet-title-edit { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.5rem 0 0; }
.meet-title-input { flex: 1; min-width: 260px; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 15px; }

/* Registratore riunioni in presenza */
.rec-panel { margin-top: 0.9rem; padding: 1rem; border: 1px solid var(--border, #e5e7eb); border-radius: 12px; background: #fafafa; }
.rec-controls { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.rec-status { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.8rem; }
.rec-time { font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rec-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #dc2626; animation: recPulse 1.1s infinite; }
@keyframes recPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.rec-progress { margin-top: 0.9rem; }
.rec-bar { height: 6px; border-radius: 4px; background: linear-gradient(90deg, #6366f1, #a855f7); background-size: 200% 100%; animation: recBar 1.2s linear infinite; }
@keyframes recBar { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.rec-meta { margin-top: 1rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.btn-danger { background: #dc2626; color: #fff; }
.mini-lbl { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #6b7280; }
.mini-lbl select, .mini-lbl input { padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 7px; font-size: 13px; }
.meet-takeaways { margin: 0; padding-left: 1.1rem; }
.meet-takeaways li { margin: 5px 0; }
.meet-point { margin: 6px 0; }
.meet-point > summary { cursor: pointer; list-style: none; }
.meet-point > summary::-webkit-details-marker { display: none; }
.meet-point ul { margin: 4px 0 8px 1.2rem; }
.ts-link { color: #4338ca; text-decoration: none; font-variant-numeric: tabular-nums; }
.meet-regen > summary { display: inline-block; list-style: none; }
.meet-regen > summary::-webkit-details-marker { display: none; }
/* Trascrizione: chi parla e il minuto su una riga, il testo sotto a tutta
   larghezza. Prima erano tre colonne e il testo restava in una striscia
   stretta, soprattutto sul telefono. */
.trascr-list { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow: auto; }
.trascr-row { display: block; padding: 8px 10px; border-radius: 8px; }
.trascr-row:hover { background: #f9fafb; }
.trascr-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 2px; }
.trascr-who { font-weight: 700; }
.trascr-ts { font-size: 0.85em; font-variant-numeric: tabular-nums; }
.trascr-txt { line-height: 1.55; }
.trascr-hl { background: #fef9c3 !important; }
@media print {
  .topbar, .sidebar, .meet-actions, .meet-assign, .postit-tabs, [data-meet-pane="trascr"], .imp-banner { display: none !important; }
  .content { max-width: 100% !important; }
  /* "Stampa con trascrizione": mostra anche la scheda della trascrizione,
     che normalmente in stampa viene esclusa. */
  body.print-trascr [data-meet-pane="trascr"] { display: block !important; }
  body.print-trascr [data-meet-pane="trascr"] .search-inline { display: none !important; }
  /* In stampa le due colonne vanno una sotto l'altra, per intero: niente
     riquadro con la barra di scorrimento (stamperebbe solo la parte visibile). */
  .meet-split { display: block !important; }
  .meet-col-trascr { position: static !important; max-height: none !important; overflow: visible !important; max-width: none !important; }
  .trascr-row { break-inside: avoid; page-break-inside: avoid; }
}

/* ============ Scheda riunione: documento a sinistra, trascrizione a destra ===
   Sullo schermo grande le due parti si vedono insieme (niente piu' schede da
   alternare) e la trascrizione ha una SUA barra di scorrimento: resta ferma
   accanto al documento mentre lo si legge. */
.meet-split { display: flex; gap: 1.4rem; align-items: flex-start; }
.meet-col-doc { flex: 1 1 0; min-width: 0; }
.meet-col-trascr {
    flex: 0 0 40%; min-width: 340px; max-width: 660px;
    position: sticky; top: 1rem;
    max-height: calc(100vh - 2rem); overflow-y: auto; overscroll-behavior: contain;
    padding-right: 4px;
}
.meet-col-trascr .card-spaced-top:first-child { margin-top: 0; }
/* A colonna affiancata scorre la COLONNA: la lista non deve avere una seconda
   barra dentro la prima (due barre annidate sono scomodissime). */
.meet-col-trascr .trascr-list { max-height: none; overflow: visible; }
/* Gli aiuti (rinomina voci, rifai trascrizione) stanno chiusi in cima: si
   aprono al bisogno e non rubano spazio alla trascrizione. */
.meet-help { margin-bottom: 0.7rem; }
.meet-help > summary {
    cursor: pointer; list-style: none; padding: 0.55rem 0.8rem; border: 1px solid var(--border);
    border-radius: 10px; background: #fff; font-weight: 600; font-size: 0.9rem; color: var(--muted);
}
.meet-help > summary::-webkit-details-marker { display: none; }
.meet-help > summary::before { content: "▸ "; }
.meet-help[open] > summary::before { content: "▾ "; }
.meet-help > summary:hover { border-color: var(--primary); color: var(--primary-dark); }
.meet-help .card { margin-top: 0.5rem; }
/* La barra di scorrimento della colonna: sottile e discreta. */
.meet-col-trascr::-webkit-scrollbar { width: 10px; }
.meet-col-trascr::-webkit-scrollbar-thumb { background: #cfd6e4; border-radius: 999px; border: 2px solid #fff; }
.meet-col-trascr::-webkit-scrollbar-thumb:hover { background: #b6c0d4; }
.meet-tabs { display: none; }

/* Schermi stretti (portatili piccoli, tablet, telefono): si torna alle schede. */
@media (max-width: 1150px) {
    .meet-split { display: block; }
    .meet-col-trascr { position: static; max-height: none; overflow: visible; max-width: none; min-width: 0; }
    .meet-tabs { display: flex; }
    .meet-split > [data-meet-pane] { display: none; }
    .meet-split > [data-meet-pane].pane-on { display: block; }
}

/* Elenco clienti: i progetti collegati, in colonna, cliccabili. */
.cell-projects { line-height: 1.9; }
.proj-chip {
    display: inline-block; margin: 0 0.3rem 0.2rem 0; padding: 0.1rem 0.5rem;
    background: var(--primary-soft); color: var(--primary-dark);
    border-radius: 999px; font-size: 0.85rem; text-decoration: none;
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.proj-chip:hover { background: var(--primary); color: #fff; }

/* ===================== Preventivi: elenco e stato ===================== */
/* Importo e stato su una riga sola: spezzati in due erano illeggibili. */
.q-nowrap { white-space: nowrap; }

/* Ogni colonna larga quanto il suo contenuto (niente parole spezzate a meta').
   Se la tabella cresce oltre la pagina, si scorre in orizzontale. */
.q-scroll { overflow-x: auto; }
.table-auto { width: auto; min-width: 100%; }
.table-auto th, .table-auto td { white-space: nowrap; }

/* Linguette dell'elenco preventivi. */
.q-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.q-tabs .btn { display: inline-flex; align-items: center; gap: 0.4rem; }
.q-tab-n {
    display: inline-block; min-width: 1.35rem; text-align: center;
    padding: 0 0.35rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
    background: rgba(255, 255, 255, 0.3);
}
.q-tabs .btn-light .q-tab-n { background: var(--primary-soft); color: var(--primary); }

/* Lo stato e' il "tasto" piu' usato della scheda preventivo: grande e visibile. */
.quote-state .badge { font-size: 1rem; padding: 0.3rem 0.85rem; }
.quote-state .ie-display { padding: 0.28rem 0.45rem; }
.quote-state .ie-input { font-size: 1rem; font-weight: 600; }

/* ===================== Preventivi: mini editor di testo ===================== */
.rt-toolbar { display: flex; gap: 0.3rem; margin-bottom: 0.45rem; flex-wrap: wrap; }
.rt-toolbar button {
    border: 1px solid var(--border); background: #fff; border-radius: 7px;
    padding: 0.3rem 0.65rem; cursor: pointer; font-size: 0.9rem; color: var(--text);
    font-family: inherit;
}
.rt-toolbar button:hover { background: var(--bg); border-color: var(--primary); }
.rt-editor {
    min-height: 9rem; border: 1px solid var(--border); border-radius: 9px;
    padding: 0.62rem 0.75rem; background: #fff; font-size: 1rem; font-weight: 400;
    line-height: 1.5; overflow-y: auto; max-height: 26rem;
}
.rt-editor:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.rt-editor ul, .rt-editor ol { margin: 0.3rem 0; padding-left: 1.5rem; }
.rt-editor p, .rt-editor div { margin: 0 0 0.3rem; }

/* ===== Riunioni: programmi da scaricare e condivisione ===== */
.app-dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.9rem; }
.app-dl-card { border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1rem; background: var(--bg); }
.app-dl-name { font-weight: 700; margin-bottom: 0.25rem; }
.app-dl-descr { font-size: 0.88rem; line-height: 1.45; margin: 0 0 0.5rem; }
.app-dl-meta { font-size: 0.82rem; margin-left: 0.6rem; }
.meet-share { margin-top: 0.7rem; }
.meet-share > summary { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; list-style: none; }
.meet-share > summary::-webkit-details-marker { display: none; }
.meet-share-box { margin-top: 0.6rem; padding: 0.9rem 1rem; max-width: 560px; }
.meet-share-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.3rem 0.8rem; }
.meet-share-item { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-weight: 400; }

/* ===== Righe apribili su telefono (freccetta “vedi il resto”) =====
   Su schermo grande la tabella resta com'è: la freccetta e la riga di
   dettaglio non esistono proprio. Sotto i 720 px restano le colonne
   essenziali e il resto si apre toccando la freccetta. */
.m-extra { display: none; }
/* La freccetta esiste solo sul telefono: su schermo grande le colonne ci sono
   tutte e non serve aprire niente. */
.row-more { display: none; }
@media (max-width: 720px) {
    .row-more {
        display: inline-flex; align-items: center; justify-content: center;
        width: 32px; height: 32px; padding: 0; border: 1px solid var(--border);
        border-radius: 8px; background: #fff; color: var(--muted); cursor: pointer;
        transition: transform 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
}
.row-more:hover { color: var(--primary); border-color: var(--primary); }
.row-more[aria-expanded="true"] { transform: rotate(90deg); color: var(--primary); border-color: var(--primary); }
.m-extra-list {
    display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.8rem;
    margin: 0 0 0.6rem; font-size: 0.92rem;
}
.m-extra-list dt { color: var(--muted); }
.m-extra-list dd { margin: 0; }

@media (max-width: 720px) {
    .m-hide { display: none; }
    .m-extra.open { display: table-row; }
    .m-extra > td { background: var(--bg); }
    /* Titolo e data devono stare comodi: niente troncamenti strani. */
    .table td .link-strong { word-break: break-word; }
    /* La colonna della data si stringe al minimo e tiene la freccetta SOTTO,
       allineata a destra: tutto lo spazio che avanza va al titolo. */
    /* `.table td` allinea a sinistra ed è più specifico: qui serve `td.col-data`,
       se no la data e la freccetta restano incollate a sinistra. */
    .table td.col-data {
        width: 1%; white-space: nowrap; text-align: right; vertical-align: top;
    }
    /* La data su una riga sua e la freccetta SOTTO, incolonnata a destra:
       la colonna resta stretta e il titolo guadagna tutto lo spazio. */
    .col-data > span { display: block; }
    .col-data .row-more { margin-top: 0.45rem; }
}

/* Riunioni: su telefono i due pulsanti della testata occupano tutta la riga. */
@media (max-width: 640px) {
    .meet-head-actions { gap: 0.5rem; }
    .meet-head-actions .btn { flex: 1 1 0; justify-content: center; }
}

/* ===== Pagina "Programmi per registrare" ===== */
.steps-list { margin: 0 0 0.8rem; padding-left: 1.2rem; line-height: 1.7; max-width: 70ch; }
.steps-list li { margin-bottom: 0.25rem; }
.app-token-box {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; border: 1px solid var(--border); border-radius: 10px;
    padding: 0.9rem 1rem; background: var(--bg);
}
.app-dl-foot { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.app-help { margin: 0; padding-left: 1.2rem; line-height: 1.7; max-width: 78ch; }
.app-help li { margin-bottom: 0.3rem; }

/* ===== Scheda riunione: i pulsanti delle azioni =====
   Su schermo grande stanno in fila e vanno a capo da soli. Sul telefono
   diventano una griglia a due colonne, tutti della stessa larghezza: prima
   erano di misure diverse e sembravano buttati lì a caso. */
.meet-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.8rem; }
.meet-actions > form { margin: 0; }

@media (max-width: 640px) {
    .meet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; align-items: stretch; }
    .meet-actions > * { min-width: 0; }
    .meet-actions .btn,
    .meet-actions > details > summary { width: 100%; justify-content: center; text-align: center; }
    /* I nomi lunghi vanno a capo DENTRO il pulsante invece di sbordare, e c'è
       aria fra il testo e il bordo: prima "PDF con trascrizione" usciva dalla
       sua casella e le scritte toccavano i lati. */
    .meet-actions .btn,
    .meet-actions > details > summary,
    .meet-link-share .btn,
    .meet-share > summary {
        white-space: normal; overflow-wrap: anywhere;
        padding: 0.45rem 0.7rem; font-size: 0.86rem; line-height: 1.25;
        min-height: 2.3rem; border-radius: 9px;
    }
    /* Riga 1: Collega e Condividi affiancati, mezza riga ciascuno.
       Serve `.meet-bar` davanti: la regola "in fila" per lo schermo grande sta
       più in basso nel file e a parità di peso vincerebbe lei. */
    .meet-bar .meet-link-share {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; margin-top: 0.55rem;
    }
    .meet-bar .meet-link-share > * { min-width: 0; margin: 0; }
    /* Stacco fra la riga Collega/Condividi e i pulsanti del documento:
       sopra erano appiccicati. */
    .meet-bar > .meet-actions { margin-top: 0.55rem; }
    .meet-share > summary { width: 100%; justify-content: center; }
    /* Riga 2: "Word + trascrizione" da solo. Riga 3: i due PDF affiancati. */
    .meet-actions > .meet-wide { grid-column: 1 / -1; }
    /* "Rigenera" apre un pannello sotto: gli serve tutta la riga. */
    .meet-actions > .meet-regen { grid-column: 1 / -1; }
    .meet-actions > .meet-regen[open] .card { max-width: none; }
}

/* Scheda riunione: collegamento a cliente/progetto. */
.meet-assign { margin-top: 0.7rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: end; }
.meet-assign select { max-width: 100%; }

@media (max-width: 640px) {
    /* In colonna: i menù a tendina prendono tutta la larghezza della scheda
       invece di sforare a destra. */
    .meet-assign { flex-direction: column; align-items: stretch; }
    .meet-assign .mini-lbl { width: 100%; }
    .meet-assign select { width: 100%; }
    .meet-assign .btn { width: 100%; justify-content: center; }
}

/* ===== Scheda riunione: una barra sola =====
   Su schermo grande cliente/progetto, "Condividi" e i pulsanti del documento
   stanno tutti sulla STESSA riga. I pannelli che si aprono (Condividi,
   Rigenera) si prendono la riga intera solo quando sono aperti, così non
   spingono via gli altri pulsanti. */
.meet-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.7rem; margin-top: 0.7rem; }
/* NB: qui si azzera SOLO il margine del blocco cliente/progetto. Gli altri due
   blocchi tengono il loro margine sopra, che sul telefono fa da stacco fra le
   righe; su schermo grande la barra è allineata in basso e non si vede. */
.meet-bar > .meet-assign { margin-top: 0; }
/* I pulsanti dentro una griglia non devono avere margini propri: la distanza
   la dà `gap`. Senza questo, la vecchia regola `.btn + .btn` aggiungeva un
   margine a sinistra e spostava di sbieco tutta la riga (i due PDF non erano
   allineati con gli altri). */
.meet-actions .btn + .btn,
.meet-link-share .btn + .btn { margin-left: 0; }
.meet-bar > .meet-share > summary { margin-bottom: 0; }
.meet-bar > details[open] { flex-basis: 100%; }
/* Il blocco cliente/progetto è l'unico che può STRINGERSI: così, quando lo
   spazio è poco, si accorciano i menù a tendina invece di mandare a capo i
   pulsanti. Gli altri blocchi restano della loro misura. */
.meet-bar > .meet-assign { flex: 0 1 auto; min-width: 0; }
.meet-bar > .meet-link-share,
.meet-bar > .meet-actions { flex: 0 0 auto; }
/* Collega + Condividi: in fila su schermo grande, affiancati sul telefono. */
.meet-link-share { display: flex; align-items: flex-end; gap: 0.5rem; }
.meet-bar .meet-assign .mini-lbl { flex: 0 1 auto; min-width: 0; }
.meet-bar .meet-assign select { width: 100%; max-width: 15rem; }

/* Schermo largo: TUTTO su una riga sola. Niente a capo: l'unica cosa che cede
   spazio sono i due menù a tendina (fino a un minimo leggibile). */
@media (min-width: 1200px) {
    .meet-bar { flex-wrap: nowrap; }
    /* Anche dentro il blocco cliente/progetto niente a capo: se no, stretto
       com'è, «Progetto» finiva sotto a «Cliente». */
    .meet-bar > .meet-assign { flex-wrap: nowrap; }
    .meet-bar .meet-assign select { min-width: 7rem; }
    /* I pannelli che si aprono (Condividi, Rigenera) diventano tendine
       appoggiate sopra al resto: se restassero nel flusso allargherebbero la
       riga e rimanderebbero i pulsanti a capo. */
    .meet-bar details { position: relative; }
    .meet-bar details[open] { flex-basis: auto; }
    .meet-bar details > .card {
        position: absolute; top: calc(100% + 0.4rem); left: 0; z-index: 30;
        min-width: 22rem; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    }
}

@media (max-width: 640px) {
    /* Sul telefono si torna in colonna: ogni blocco sulla sua riga. */
    .meet-bar { display: block; }
    .meet-bar > .meet-share { margin-top: 0.6rem; }
    .meet-bar .meet-assign select { max-width: 100%; }
}

/* ===== Ricerca con la lente e scansione in linea (elenco clienti) ===== */
.search-wrap { position: relative; display: flex; align-items: center; width: 100%; }
.search-wrap > svg { position: absolute; left: 0.7rem; color: var(--muted); pointer-events: none; }
.search-wrap .search-inline { width: 100%; padding-left: 2.3rem; }
/* Campo di ricerca più grande e leggibile: prima era piccolo e anonimo. */
.search-big { font-size: 1rem; padding-top: 0.62rem; padding-bottom: 0.62rem; min-width: 320px; }
.ph-tools .search-wrap { flex: 0 1 460px; min-width: 0; }

/* La scansione sta IN LINEA col pulsante "Nuovo cliente": la linguetta sembra
   un pulsante chiaro, e il riquadro si apre sotto, a tutta larghezza. */
.ph-top .scan-box {
    border: 1px solid var(--border); border-radius: 9px; padding: 0; margin: 0;
    background: #fff;
}
.ph-top .scan-box > .scan-summary {
    padding: 0.6rem 1.1rem; font-size: 0.95rem; white-space: nowrap; border-radius: 9px;
}
.ph-top .scan-box > .scan-summary:hover { background: var(--bg); }
.ph-top .scan-box[open] { flex-basis: 100%; }        /* aperto: riga tutta sua */
.ph-top .scan-box[open] > .scan-summary { border-bottom: 1px solid var(--border); }
.ph-top .scan-panel { padding: 0.2rem 1.1rem 0.6rem; }

@media (max-width: 640px) {
    .ph-tools .search-wrap { flex: 1 1 auto; }
    .search-big { min-width: 0; }
    .ph-top .scan-box > .scan-summary { padding: 0.55rem 0.8rem; font-size: 0.9rem; }
}

/* Riquadro di verifica dei permessi salvati (scheda utente). */
.perms-saved { margin: 0.6rem 0 0.2rem; border: 1px solid var(--border); border-radius: 10px; padding: 0.4rem 0.9rem; background: var(--bg); }
.perms-saved > summary { cursor: pointer; font-weight: 600; padding: 0.35rem 0; }
.perms-saved p { margin: 0.35rem 0; line-height: 1.5; }

/* ===================== AI Act (conformità) ===================== */
/* La "natura" di un adempimento non è mai un generico «da fare»: obbligo di
   legge, policy di piattaforma, zona grigia e consiglio hanno colori diversi
   apposta, perché il rischio che portano è diverso. */
.nat-alert   { background: #1f2937; color: #ffffff; }
.nat-legge   { background: #fee2e2; color: #b91c1c; }
.nat-policy  { background: #ffedd5; color: #c2410c; }
.nat-grigia  { background: #fef9c3; color: #854d0e; }
.nat-pratica { background: #e0f2fe; color: #075985; }

/* Sul riquadro il colore della natura resta solo nella barra a sinistra:
   il testo deve restare leggibile, non tinto di rosso. */
.aiact-gruppo { border-left: 4px solid var(--border); }
.aiact-gruppo.nat-alert,
.aiact-gruppo.nat-legge,
.aiact-gruppo.nat-policy,
.aiact-gruppo.nat-grigia,
.aiact-gruppo.nat-pratica { background: var(--card); color: var(--text); }
.aiact-gruppo.nat-alert   { border-left-color: #1f2937; }
.aiact-gruppo.nat-legge   { border-left-color: #dc2626; }
.aiact-gruppo.nat-policy  { border-left-color: #ea580c; }
.aiact-gruppo.nat-grigia  { border-left-color: #ca8a04; }
.aiact-gruppo.nat-pratica { border-left-color: #0284c7; }
.aiact-gruppo h2 { margin: 0 0 0.2rem; }

/* Domande del questionario */
.aiact-q { border-top: 1px solid var(--border); padding: 0.9rem 0 0.2rem; }
.aiact-q[hidden] { display: none; }
.aiact-q-testo { font-weight: 600; margin-bottom: 0.15rem; }
.aiact-q-num { color: var(--muted); font-weight: 600; margin-right: 0.4rem; }
.aiact-q-aiuto { color: var(--muted); font-size: 0.85rem; margin: 0.1rem 0 0.5rem; }
.aiact-opts { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; margin-bottom: 0.6rem; }
/* .form label e' a colonna: qui le opzioni devono stare in riga, quadratino
   accanto al testo. Serve la stessa specificita' per avere la meglio. */
.form .aiact-opt, .aiact-opt {
    display: inline-flex; flex-direction: row; align-items: center; gap: 0.45rem;
    border: 1px solid var(--border); border-radius: 999px;
    padding: 0.35rem 0.85rem; cursor: pointer; background: #fff;
    font-size: 0.92rem; font-weight: 500;
}
.aiact-opt:hover { border-color: var(--primary); }
.form .aiact-opt input[type="radio"], .form .aiact-opt input[type="checkbox"] {
    width: auto; margin: 0; padding: 0; box-shadow: none; flex: 0 0 auto;
}

/* Esito */
.aiact-ruoli {
    display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem;
    padding: 0.6rem 0 0.4rem; font-size: 0.92rem;
}
.aiact-item {
    display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; justify-content: space-between;
    border-top: 1px solid var(--border); padding: 0.75rem 0;
}
.aiact-item:first-of-type { border-top: 0; }
.aiact-item-chiuso { opacity: 0.55; }
.aiact-item-testo { flex: 1 1 24rem; min-width: 0; }
.aiact-item-testo p { margin: 0 0 0.35rem; }
.aiact-fonte { color: var(--muted); font-size: 0.84rem; }
.aiact-item-stato { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.aiact-item-stato input[type="text"] { min-width: 12rem; }

/* Il riquadro di «Controlla ora»: pulsante, data dell'ultimo controllo e,
   mentre il lavoro gira in sottofondo, a che punto è arrivato. */
.aiact-watch {
    border: 1px solid var(--border); border-radius: 12px;
    padding: 0.9rem 1rem; margin: 0.2rem 0 1rem; background: #fbfbfd;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.aiact-watch-azione { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.aiact-watch-stato:empty { display: none; }
.aiact-watch-stato {
    margin: 0; font-weight: 600; color: var(--accent, #4338ca);
}
.aiact-watch button[disabled] { opacity: 0.6; cursor: default; }

/* Testi da copiare */
.aiact-testo-pronto {
    border: 1px solid var(--border); border-radius: 10px;
    padding: 0.55rem 0.7rem; margin: 0.5rem 0; background: #fbfbfd;
}
.aiact-testo-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.aiact-testo-pronto pre {
    white-space: pre-wrap; word-break: break-word; margin: 0.4rem 0 0;
    font-family: inherit; font-size: 0.9rem; line-height: 1.45;
}

.aiact-norma { padding: 0.4rem 0 0.8rem; }
.check-line { display: flex; align-items: center; gap: 0.45rem; }

/* AI Act — fase 2: guard rail, spiegazione, vista per cliente */
.aiact-guard-lista { margin: 0.4rem 0 0.8rem; padding-left: 1.1rem; }
.aiact-guard-lista li { margin-bottom: 0.3rem; }
.aiact-guard-lista code { background: #f3f4f6; padding: 0.1rem 0.35rem; border-radius: 5px; }
.aiact-guard-scelte { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.6rem; }
.aiact-spiegazione { line-height: 1.6; }
.aiact-cliente-lista { margin: 0.3rem 0; padding-left: 1.1rem; }
.aiact-cliente-lista li { margin-bottom: 0.25rem; }

/* AI Act — fase 3: fonti della risposta */
.aiact-fonte-box {
    border: 1px solid var(--border); border-left: 3px solid var(--primary);
    border-radius: 8px; padding: 0.5rem 0.7rem; margin-bottom: 0.5rem; background: #fbfbfd;
}
.aiact-fonte-box p { margin: 0.3rem 0 0; }

/* Regola imparata dalle email: le scelte «solo questo indirizzo / tutto il
   dominio» valgono soltanto se si spunta «Blocca anche il mittente». Finche'
   la casella e' vuota restano spente, cosi' non sembra che il mittente venga
   messo in spam quando invece si sta salvando solo la regola. */
.block-scope.is-off { opacity: 0.45; }
.block-scope.is-off .check-label { cursor: default; }


/* Tendine cercabili (public/assets/js/select-cerca.js): con centinaia di
   progetti o clienti si scrive invece di scorrere. La tendina vera resta nel
   form, solo nascosta — senza JavaScript torna visibile e funziona come prima. */
.selc { position: relative; display: block; }
.selc-nascosto { display: none; }
.selc-input { width: 100%; cursor: text; }
.selc-lista {
    position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 2px);
    max-height: 280px; overflow-y: auto;
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 12px 28px rgba(17, 20, 32, 0.16);
}
.selc-voce { padding: 0.45rem 0.7rem; cursor: pointer; font-size: 0.95rem; }
.selc-voce.su { background: var(--primary); color: #fff; }
.selc-voce.scelta { font-weight: 600; }
.selc-voce.scelta.su { color: #fff; }
.selc-vuoto { padding: 0.55rem 0.7rem; color: var(--muted, #6b7280); font-size: 0.9rem; }

/* Parti di pagina 2 del preventivo (licenze, fasi di lavoro): quando la parte
   non va stampata la scheda resta lì ma sbiadita, così si vede subito cosa
   finirà nel PDF senza perdere il testo scritto. */
.parte-pdf .card-head { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.parte-pdf .card-head h2 { margin-right: auto; }
.parte-pdf.spenta .rt-toolbar,
.parte-pdf.spenta .rt-editor { opacity: 0.45; }
.rt-sep {
    display: inline-block; width: 1px; height: 18px; margin: 0 0.2rem;
    background: var(--border); vertical-align: middle;
}

/* Conferma "volante": quando dopo un salvataggio si resta a metà pagina
   (public/assets/js/torna-dov-eri.js), il messaggio in cima non si vedrebbe.
   Se ne mostra una copia in basso a destra, che sparisce da sola. */
.flash-toast {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 1200;
    max-width: min(380px, calc(100vw - 2rem)); margin: 0; cursor: pointer;
    box-shadow: 0 12px 32px rgba(17, 20, 32, 0.22);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.flash-toast.via { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) {
    .flash-toast { transition: none; }
}

/* Task ricevuto da un'altra persona: si deve distinguere a colpo d'occhio da
   quelli che ci si è scritti da soli (prima diceva solo "Creato da…", e in
   mezzo agli altri non si notava). Etichetta ambrata + filo sul bordo. */
.postit-ricevuto {
    display: inline-flex; align-items: center; gap: 0.3rem; margin: 0.35rem 0 0;
    padding: 0.12rem 0.5rem; border-radius: 999px; font-size: 0.8rem;
    font-weight: 600; max-width: 100%;
    background: #fef3c7; color: #92400e;
}
.postit-ricevuto svg { width: 14px; height: 14px; flex: 0 0 auto; }
.postit.postit-da-altri { box-shadow: inset 3px 0 0 #f59e0b; }