/* CRM Kepler — Design system "marine/ink" (D-ui-design-system, Fase A2).
   LIBRERIA COMPONENTI riusabili + STILE FORM globale sopra django_bootstrap5.
   Caricato DOPO bootstrap_css e app.css (vince in cascata). Usa i token di
   tokens.css. I primitivi generici sono estratti VERBATIM dal mockup
   (design/crm_kepler_mockup.html, righe 158-318); i widget specifici di Fase B
   (kpi, dashboard, kanban, timeline, act-row) NON sono qui: si costruiranno in B
   usando questi primitivi. Lo stile FORM non è nel mockup: è DERIVATO dai token,
   coerente con .search. */

/* ---------- Bottoni design system ---------- */
.btn-accent{
    height:38px;padding:0 15px;border-radius:10px;border:1px solid transparent;
    font-family:var(--sans);font-weight:600;font-size:13px;cursor:pointer;
    display:inline-flex;align-items:center;gap:7px;transition:.16s;white-space:nowrap;letter-spacing:-.01em;
    background:var(--accent-deep);color:#fff;box-shadow:0 4px 12px -3px rgba(15,163,177,.5);
}
.btn-accent:hover{background:var(--accent-deep);filter:brightness(.94);transform:translateY(-1px);color:#fff}
.btn-ghost{
    height:38px;padding:0 15px;border-radius:10px;
    font-family:var(--sans);font-weight:600;font-size:13px;cursor:pointer;
    display:inline-flex;align-items:center;gap:7px;transition:.16s;white-space:nowrap;letter-spacing:-.01em;
    background:#fff;border:1px solid var(--line);color:var(--text-2);
}
.btn-ghost:hover{border-color:#C9D6E2;color:var(--text)}
.btn-accent svg,.btn-ghost svg{width:16px;height:16px}

/* ---------- Card ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card-h{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line-2)}
.card-h h3{font-family:var(--display);font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.card-h .hint{font-size:11.5px;color:var(--muted);margin-left:auto}
.link{color:var(--accent-deep);font-weight:600;font-size:12.5px;cursor:pointer;text-decoration:none}
.link:hover{text-decoration:underline}

/* ---------- Badge & chip ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:7px;font-size:11.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.b-dot{width:6px;height:6px;border-radius:50%;flex:0 0 6px}
/* Testo dei badge ai token -deep (AA >=4.5 sul rispettivo soft-bg; i valori del
   mockup fallivano: teal 4.23, green 3.15, red ok, gold 3.53, warn 3.91). Fondi
   soft invariati. violet/grey/ink: literal locali GIA' AA-conformi (valori unici,
   nessun token corrispondente) -> lasciati come sono. */
.b-teal{background:var(--accent-soft);color:var(--accent-deep)}    /* 4.64 su --accent-soft */
.b-green{background:var(--success-soft);color:var(--success-deep)} /* 4.60 su --success-soft */
.b-gold{background:var(--gold-soft);color:var(--gold-deep)}        /* 4.62 su --gold-soft */
.b-warn{background:var(--warn-soft);color:var(--warn-deep)}        /* 4.62 su --warn-soft */
.b-red{background:var(--danger-soft);color:var(--danger-deep)}     /* 4.75 su --danger-soft */
.b-violet{background:var(--violet-soft);color:#534BA3}             /* literal AA 6.09 */
.b-grey{background:#EEF2F6;color:#5B6E81}                          /* literal AA 4.68 */
.b-ink{background:#E7EDF3;color:var(--ink-2)}                      /* literal bg, AA 12.05 */

.pri{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.pri .bar{width:3px;height:13px;border-radius:2px}

/* ---------- Tabelle ---------- */
.tbl-wrap{overflow:hidden;border-radius:var(--radius)}
.tbl-wrap table{width:100%;border-collapse:collapse}
.tbl-wrap thead th{
    text-align:left;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
    color:var(--muted);font-weight:600;padding:11px 16px;background:var(--surface-2);
    border-bottom:1px solid var(--line);white-space:nowrap;
}
.tbl-wrap tbody td{padding:13px 16px;border-bottom:1px solid var(--line-2);font-size:13.5px;vertical-align:middle}
.tbl-wrap tbody tr{transition:background .12s}
.tbl-wrap tbody tr:hover{background:var(--surface-2)}
.tbl-wrap tbody tr:last-child td{border-bottom:none}
.cell-main{display:flex;align-items:center;gap:11px}
.cell-main .av{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-weight:600;font-size:12px;color:#fff;flex:0 0 34px}
.cell-main b{font-weight:600;color:var(--text);font-size:13.5px}
.cell-main span{display:block;color:var(--muted);font-size:11.5px}
/* Cella numerica/importo: allineata a destra + cifre tabulari (colonne importi
   delle liste commerciali). Scoping th/td necessario: la regola A2
   `.tbl-wrap thead th{text-align:left}` è più specifica di un semplice `.cell-num`. */
.tbl-wrap th.cell-num,.tbl-wrap td.cell-num{
    text-align:right;
    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum";
}
/* Troncamento a riga singola con ellissi (#9): sostituisce il taglio fisso a
   caratteri (truncatechars) con un troncamento adattivo alla larghezza. Il
   template passa il testo INTERO e lo mette nel ``title`` (tooltip nativo).
   Riusabile su cella (``td``, tronca a max-width) e su anteprima inline
   (``a``, box inline-block che riempie il contenitore). */
.cell-truncate{max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.cell-truncate{display:inline-block;vertical-align:bottom;max-width:100%}

/* ---------- Toolbar / segmented / chip filtro ---------- */
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.seg{display:flex;background:#fff;border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.seg button{border:none;background:none;padding:6px 12px;border-radius:7px;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--text-2);cursor:pointer;transition:.14s}
.seg button.on{background:var(--ink);color:#fff}
.seg button:not(.on):hover{background:var(--surface-2)}
.chip-filter{height:34px;padding:0 12px;border:1px solid var(--line);background:#fff;border-radius:9px;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--text-2);cursor:pointer;transition:.14s}
.chip-filter:hover{border-color:#C9D6E2}
.chip-filter svg{width:14px;height:14px;color:var(--muted)}
/* Stato attivo del chip (toggle "solo le mie", D-rowscope): stesso trattamento
   di .seg button.on — fondo ink, testo bianco. Il chip nasce senza stato ON nel
   mockup: qui serve perche il toggle deve dire a colpo d'occhio se e inserito. */
.chip-filter.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip-filter.on svg{color:#fff}
a.chip-filter{text-decoration:none}

/* ---------- Barre probabilità ---------- */
.prob{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-2);font-weight:600}
.prob-track{width:38px;height:4px;background:var(--line);border-radius:3px;overflow:hidden}
.prob-fill{height:100%;background:var(--accent);border-radius:3px}

/* ---------- Group header / note callout / empty ---------- */
.group-h{display:flex;align-items:center;gap:9px;margin:22px 0 11px;padding:0 2px}
.group-h h4{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.01em}
.group-h .gc{font-size:11px;font-weight:600;color:#fff;padding:1px 8px;border-radius:20px}
.group-h .gl{flex:1;height:1px;background:var(--line)}

.note{font-size:12px;color:var(--text-2);background:var(--gold-soft);border:1px solid #EFD9A8;border-radius:10px;padding:10px 13px;display:flex;gap:9px;align-items:flex-start;margin-bottom:16px}
.note svg{width:16px;height:16px;color:#A9741B;flex:0 0 16px;margin-top:1px}
.note b{color:#8A5E14}

.empty-tip{font-size:12px;color:var(--muted);padding:14px 18px;text-align:center}

/* ============================================================
   STILE FORM sopra django_bootstrap5 (DERIVATO dai token, non nel mockup).
   Coerente con .search: bordo --line, raggio --radius-sm, bg --surface-2,
   focus ring --accent-soft, stato errore --danger/--danger-soft.
   ============================================================ */
.form-label{
    font-family:var(--sans);font-weight:600;font-size:12.5px;color:var(--text-2);
    margin-bottom:5px;letter-spacing:-.01em;
}
.form-control,.form-select{
    border:1px solid var(--line);border-radius:var(--radius-sm);
    background:var(--surface-2);
    font-family:var(--sans);font-size:13.5px;color:var(--text);
    min-height:38px;padding:7px 12px;
    transition:border-color .16s,background .16s,box-shadow .16s;
}
.form-control::placeholder{color:var(--muted)}
.form-control:focus,.form-select:focus{
    border-color:var(--accent);background:#fff;color:var(--text);
    box-shadow:0 0 0 3px var(--accent-soft);outline:none;
}
textarea.form-control{min-height:84px;line-height:1.5}

/* Checkbox / radio: accento del design system */
.form-check-input{border-color:var(--line)}
.form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}
.form-check-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.form-check-label{font-size:13.5px;color:var(--text)}

/* Help text + stato errore */
.form-text{color:var(--muted);font-size:11.5px}
.form-control.is-invalid,.form-select.is-invalid{
    border-color:var(--danger);background:#fff;
}
.form-control.is-invalid:focus,.form-select.is-invalid:focus{
    box-shadow:0 0 0 3px var(--danger-soft);
}
.invalid-feedback{color:var(--danger);font-size:11.5px;font-weight:500}

/* ============================================================
   Rimappatura bottoni Bootstrap ai token (cambiamento GLOBALE).
   .btn-primary -> ink on-brand; .btn-outline-secondary -> sobrio.
   Usati anche fuori dai form (paginazione, dropdown): vedi verifica.
   ============================================================ */
.btn{font-family:var(--sans);font-weight:600;letter-spacing:-.01em;border-radius:var(--radius-sm)}
.btn-primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-primary:hover,.btn-primary:focus{background:var(--ink-2);border-color:var(--ink-2);color:#fff}
.btn-primary:focus,.btn-primary:focus-visible{box-shadow:0 0 0 3px var(--accent-soft)}
.btn-outline-secondary{border-color:var(--line);color:var(--text-2)}
.btn-outline-secondary:hover{background:var(--surface-2);border-color:#C9D6E2;color:var(--text)}
.btn-outline-secondary:focus,.btn-outline-secondary:focus-visible{box-shadow:0 0 0 3px var(--accent-soft)}

/* Bottoni semantici ai token (varianti -deep AA-safe; testo bianco su fill,
   testo -deep su bianco per gli outline a riposo). */
.btn-danger{background:var(--danger-deep);border-color:var(--danger-deep);color:#fff}
.btn-danger:hover{background:var(--danger-deep);border-color:var(--danger-deep);color:#fff;filter:brightness(.94)}
.btn-danger:focus,.btn-danger:focus-visible{box-shadow:0 0 0 3px var(--danger-soft)}
.btn-outline-danger{border-color:var(--danger-deep);color:var(--danger-deep)}
.btn-outline-danger:hover{background:var(--danger-deep);border-color:var(--danger-deep);color:#fff}
.btn-outline-danger:focus,.btn-outline-danger:focus-visible{box-shadow:0 0 0 3px var(--danger-soft)}

.btn-success{background:var(--success-deep);border-color:var(--success-deep);color:#fff}
.btn-success:hover{background:var(--success-deep);border-color:var(--success-deep);color:#fff;filter:brightness(.94)}
.btn-success:focus,.btn-success:focus-visible{box-shadow:0 0 0 3px var(--success-soft)}
.btn-outline-success{border-color:var(--success-deep);color:var(--success-deep)}
.btn-outline-success:hover{background:var(--success-deep);border-color:var(--success-deep);color:#fff}
.btn-outline-success:focus,.btn-outline-success:focus-visible{box-shadow:0 0 0 3px var(--success-soft)}

/* Outline "primary": stessa famiglia ink di btn-primary (NON un colore nuovo). */
.btn-outline-primary{border-color:var(--ink);color:var(--ink)}
.btn-outline-primary:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-outline-primary:focus,.btn-outline-primary:focus-visible{box-shadow:0 0 0 3px var(--accent-soft)}

/* ============================================================
   Kanban board Opportunità (Fase B — D-kanban-opportunita).
   Valori strutturali (grid/gap/padding/font-size/raggi/dimensioni) estratti
   VERBATIM da design/kanban_opportunita_3_colonne_raggruppate.html; i COLORI
   sono mappati ai token marine/ink (nessun hex hardcoded). Un solo schema di
   nomi (.kanban-*), allineato al template; il micro-tag stage riusa il primitivo
   .badge e la barra probabilità riusa .prob. Numeri: tabular-nums qui (NON si
   de-scopa .cell-num, che resta legata a .tbl-wrap).
   Mappa colori mockup→token: #F7F9FB=--surface-2 · #E1E8EF=--line ·
   #EDF1F5=--line-2 · #FFFFFF=--surface · #0A2233=--ink · #0F2235=--text ·
   #5E6E7F/#73879B=--muted · #E1F4F6=--accent-soft · #097783=--accent-deep ·
   Space Grotesk=--display.
   ============================================================ */
.kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.kanban-col{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:11px}
.kanban-col-h{display:flex;align-items:center;gap:7px;margin-bottom:2px}
.kanban-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--accent)}
.kanban-col-name{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink)}
.kanban-col-stages{font-size:10px;color:var(--muted);margin-bottom:6px;line-height:1.3}
.kanban-col-meta{font-size:11.5px;color:var(--muted);font-weight:500;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line-2)}
.kanban-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 10px;margin-bottom:8px;text-decoration:none;color:inherit;transition:border-color .14s,box-shadow .14s}
.kanban-card:last-child{margin-bottom:0}
.kanban-card:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.kanban-card-t{font-size:12.5px;font-weight:500;line-height:1.3;color:var(--text);margin-bottom:2px}
.kanban-card-co{font-size:11px;color:var(--muted);margin-bottom:3px}
.kanban-card .badge{margin-bottom:8px}
.kanban-card .prob{margin-bottom:8px}
.kanban-card-foot{display:flex;align-items:center;justify-content:space-between;gap:6px}
.kanban-val{font-size:12.5px;font-weight:600;color:var(--ink)}
.kanban-av{width:20px;height:20px;border-radius:50%;background:var(--accent-soft);color:var(--accent-deep);font-size:9.5px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.kanban-empty{font-size:11.5px;color:var(--muted);padding:6px 2px}

/* Board responsive: sotto i 900px le 3 colonne si impilano (non nel mockup;
   valori strutturali, nessun colore). */
@media (max-width:900px){.kanban{grid-template-columns:1fr}}

/* Data in evidenza sulle righe della sezione "Attività scadute" (dashboard).
   Classe dedicata invece di .text-danger di Bootstrap per due motivi: il rosso
   resta on-palette (--danger-deep, AA 5.68 su bianco; .text-danger non è
   mappato ai token) e serve un marcatore univoco della RIGA — .text-danger
   compare già nella card conteggi sopra, quindi non distinguerebbe le righe. */
.due-overdue{color:var(--danger-deep);font-weight:600}