/* ============================================================
   STELS Flow v2 — Design System CSS
   Odoo 18-inspired, improved polish
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Base — tinted indigo paper.
     * Tutta la scala dei neutri è leggermente tinta sull'asse indaco (h=265):
     * non più `#FFF` puro né `#212529` di Bootstrap, ma sfumature dello stesso
     * colore. Risultato: superfici più calde-pro, meno "HTML grezzo". */
    --bg-page: oklch(0.985 0.004 265);
    --bg-card: oklch(0.995 0.003 265);
    --bg-sidebar: oklch(0.995 0.003 265);
    --bg-sidebar-active: oklch(0.40 0.14 265 / 0.08);
    --bg-sidebar-hover: oklch(0.965 0.005 265);
    --border: oklch(0.92 0.005 265);
    --text-primary: oklch(0.18 0.02 265);
    --text-secondary: oklch(0.48 0.02 265);
    --text-disabled: oklch(0.65 0.01 265);

    /* Accent — indaco profondo (era viola Odoo #714B67) */
    --primary: oklch(0.40 0.14 265);
    --primary-hover: oklch(0.32 0.14 265);
    --secondary: oklch(0.35 0.02 265);

    /* Semantic — ricalibrati in OKLCH, stesse intenzioni cromatiche */
    --success: oklch(0.55 0.13 145);
    --warning: oklch(0.78 0.15 75);
    --danger: oklch(0.60 0.20 25);
    --info: oklch(0.68 0.13 230);
    --neutral: oklch(0.48 0.02 265);

    /* Badge colors — qualifica */
    --badge-qual-qualificato-bg: #D1E7DD;
    --badge-qual-qualificato-text: #0F5132;
    --badge-qual-da-qualificare-bg: #FFF3CD;
    --badge-qual-da-qualificare-text: #664D03;
    --badge-qual-fuori-target-bg: #F8D7DA;
    --badge-qual-fuori-target-text: #842029;
    --badge-qual-dati-incompleti-bg: #FFE5D0;
    --badge-qual-dati-incompleti-text: #984C0C;
    --badge-qual-da-verificare-bg: #CFF4FC;
    --badge-qual-da-verificare-text: #055160;

    /* Badge colors — pipeline */
    --badge-pipe-interessato-bg: #D1E7DD;
    --badge-pipe-interessato-text: #0F5132;
    --badge-pipe-cliente-bg: #198754;
    --badge-pipe-cliente-text: #FFFFFF;
    --badge-pipe-inviato-bg: #CFE2FF;
    --badge-pipe-inviato-text: #084298;
    --badge-pipe-non-interessato-bg: #F8D7DA;
    --badge-pipe-non-interessato-text: #842029;

    /* Badge colors — campagna */
    --badge-camp-attiva-bg: #D1E7DD;
    --badge-camp-attiva-text: #0F5132;
    --badge-camp-bozza-bg: #E2E3E5;
    --badge-camp-bozza-text: #41464B;

    /* Badge colors — contenuto */
    --badge-cont-approvato-bg: #D1E7DD;
    --badge-cont-approvato-text: #0F5132;
    --badge-cont-scartato-bg: #F8D7DA;
    --badge-cont-scartato-text: #842029;

    /* Spacing */
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 16px;
    --sp-lg: 24px;
    --sp-xl: 32px;
    --sp-xxl: 48px;

    /* Layout */
    --sidebar-width: 220px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 50px;
}

html {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    color: var(--text-primary);
    background: var(--bg-page);
    line-height: 1.5;
    min-height: 100vh;
    font-variant-numeric: tabular-nums;
}

/* --- Typography --- */
h1 { font-size: 24px; font-weight: 600; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 500; }

.text-secondary { color: var(--text-secondary); }
.text-disabled { color: var(--text-disabled); }
.text-small { font-size: 13px; }
.text-mono { font-family: 'JetBrains Mono', monospace; font-size: 13px; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Layout --- */
.app-layout {
    display: flex;
    min-height: 100vh;
}

/* --- Sidebar --- */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    overflow-y: auto;
}

.sidebar-header {
    padding: var(--sp-lg) var(--sp-md);
    border-bottom: 1px solid var(--border);
}

.sidebar-header .app-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.sidebar-header .app-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.sidebar-nav {
    flex: 1;
    padding: var(--sp-sm) 0;
}

.sidebar-category {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    padding: var(--sp-md) var(--sp-md) var(--sp-xs);
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md);
    color: var(--secondary);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.sidebar-item:hover {
    background: var(--bg-sidebar-hover);
    text-decoration: none;
}

.sidebar-item.active {
    background: var(--bg-sidebar-active);
    border-left-color: var(--primary);
    color: var(--text-primary);
    font-weight: 500;
}

.sidebar-item .icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sidebar-item .badge-count {
    margin-left: auto;
    background: var(--danger);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    min-width: 18px;
    text-align: center;
}

.sidebar-footer {
    padding: var(--sp-sm) var(--sp-md);
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-disabled);
}

/* --- Sidebar gruppi modulo (blocco CCI 02) --- */
.sidebar-group {
    margin-top: 4px;
}
.sidebar-group-header {
    width: 100%;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
}
.sidebar-group-header:hover {
    background: var(--bg-sidebar-hover);
}
.sidebar-group-header span {
    flex: 1;
    text-align: left;
}
.sidebar-group-chevron {
    transition: transform 0.15s ease;
}
.sidebar-group.collapsed .sidebar-group-chevron {
    transform: rotate(-90deg);
}
.sidebar-group.collapsed .sidebar-group-items {
    display: none;
}
.sidebar-item.sub {
    padding-left: 32px;
    font-size: 13px;
}

/* --- Pillola contesto modulo --- */
.context-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: #F4F0F2;
    color: var(--primary);
    border: 1px solid #E1D4DE;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}
.context-pill strong {
    font-weight: 600;
    color: var(--primary-hover);
}

/* --- Sidebar user (badge + dropdown) --- */
.sidebar-user {
    position: relative;
    border-top: 1px solid var(--border);
}
.sidebar-user-button {
    width: 100%;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    font-family: inherit;
}
.sidebar-user-button:hover {
    background: var(--bg-sidebar-hover);
}
.sidebar-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}
.sidebar-user-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.sidebar-user-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-ruolo {
    font-size: 11px;
    color: var(--text-secondary);
}
.sidebar-user-menu {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 8px;
    right: 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 6px;
    z-index: 50;
}
.sidebar-user-menuitem {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text-primary);
    text-decoration: none;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.sidebar-user-menuitem:hover {
    background: var(--bg-sidebar-hover);
}
.sidebar-user-logout {
    color: var(--danger);
}
.sidebar-user-menu-sep {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}
[x-cloak] { display: none !important; }

/* --- Main content --- */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: var(--sp-lg);
    min-height: 100vh;
}

/* --- Hamburger button (visibile solo su mobile) --- */
.sidebar-toggle {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 200;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 99;
}

/* --- Responsive: sotto 1024px sidebar diventa drawer --- */
@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 2px 0 12px rgba(0,0,0,0.18);
    }
    body.sidebar-open .sidebar {
        transform: translateX(0);
    }
    body.sidebar-open .sidebar-backdrop {
        display: block;
    }
    .main-content {
        margin-left: 0 !important;
        padding-top: 56px;  /* spazio per hamburger button */
    }
    .sidebar-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
}

/* --- Page header --- */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--sp-xl);
    gap: var(--sp-md);
}

.page-header h1 {
    margin: 0;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.1;
}

.page-header .actions {
    display: flex;
    gap: var(--sp-sm);
}

/* Kicker: etichetta uppercase sopra l'H1 di una pagina (es. nome modulo,
 * sezione, contesto). Usata solo dove il contesto sopra il titolo aiuta:
 * non metterlo a ogni pagina, solo dove c'è una gerarchia "macro → pagina". */
.page-kicker {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    margin-bottom: 6px;
    line-height: 1;
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
    padding: var(--sp-sm) var(--sp-md);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    text-decoration: none;
    line-height: 1.4;
}

.btn:hover { text-decoration: none; }

.btn-primary {
    background: var(--primary);
    color: white;
}
.btn-primary:hover { background: var(--primary-hover); }

.btn-secondary {
    background: white;
    color: var(--secondary);
    border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--bg-page); }

.btn-danger {
    background: var(--danger);
    color: white;
}
.btn-danger:hover { opacity: 0.9; }

.btn-ghost {
    background: transparent;
    color: var(--primary);
}
.btn-ghost:hover { background: var(--bg-page); }

.btn-sm {
    padding: var(--sp-xs) var(--sp-sm);
    font-size: 13px;
}

/* --- Cards --- */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-md);
}

/* --- Tables --- */
.table-wrapper {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead th {
    background: var(--bg-page);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

tbody tr:hover {
    background: var(--bg-page);
}

tbody tr.selected {
    background: #E8DAFE;
}

/* Number alignment */
td.num, th.num {
    text-align: right;
}

/* --- Status (dot + label) ---
 * Nuovo pattern: pallino colorato + testo nel colore normale.
 * Pensato per le tabelle dense — sostituisce la pillola .badge dove serve
 * comunicare uno stato senza creare rumore visivo.
 */
.status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    line-height: 1;
}
.status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-disabled);
    flex: 0 0 auto;
}
.status--success::before { background: var(--success); }
.status--warning::before { background: var(--warning); }
.status--danger::before  { background: var(--danger); }
.status--info::before    { background: var(--info); }
.status--neutral::before { background: var(--text-disabled); }
.status--accent::before  { background: var(--primary); }

/* --- Badges / Chips --- */
.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* Qualifica badges */
.badge-qual_qualificato     { background: var(--badge-qual-qualificato-bg); color: var(--badge-qual-qualificato-text); }
.badge-qual_da_qualificare  { background: var(--badge-qual-da-qualificare-bg); color: var(--badge-qual-da-qualificare-text); }
.badge-qual_fuori_target    { background: var(--badge-qual-fuori-target-bg); color: var(--badge-qual-fuori-target-text); }
.badge-qual_dati_incompleti { background: var(--badge-qual-dati-incompleti-bg); color: var(--badge-qual-dati-incompleti-text); }
.badge-qual_da_verificare   { background: var(--badge-qual-da-verificare-bg); color: var(--badge-qual-da-verificare-text); }

/* Pipeline badges */
/* Rev. 2026-04-25 (prep blocco CCI 05): rimosso .badge-pipe_interessato
 * (lo stato non esiste piu`). Aggiunti badge per i 3 nuovi stati telefono
 * pipe_da_chiamare, pipe_richiamare, pipe_non_chiamare_piu. */
.badge-pipe_cliente         { background: var(--badge-pipe-cliente-bg); color: var(--badge-pipe-cliente-text); }
.badge-pipe_inviato         { background: var(--badge-pipe-inviato-bg); color: var(--badge-pipe-inviato-text); }
.badge-pipe_non_interessato { background: var(--badge-pipe-non-interessato-bg); color: var(--badge-pipe-non-interessato-text); }
.badge-pipe_contenuto_pronto { background: var(--badge-pipe-inviato-bg); color: var(--badge-pipe-inviato-text); }
.badge-pipe_nuovo           { background: var(--badge-camp-bozza-bg); color: var(--badge-camp-bozza-text); }
.badge-pipe_da_chiamare     { background: var(--badge-camp-bozza-bg); color: var(--badge-camp-bozza-text); }
.badge-pipe_richiamare      { background: #FFF3CD; color: #664D03; }
.badge-pipe_in_trattativa   { background: #E2E3F1; color: #3D3F8C; }
.badge-pipe_campionatura    { background: #FFF3CD; color: #664D03; }
.badge-pipe_mailing         { background: var(--badge-camp-bozza-bg); color: var(--badge-camp-bozza-text); }
.badge-pipe_fuori_target    { background: var(--badge-qual-fuori-target-bg); color: var(--badge-qual-fuori-target-text); }
.badge-pipe_uscito          { background: var(--badge-qual-fuori-target-bg); color: var(--badge-qual-fuori-target-text); }
/* pipe_duplicato — grigio neutro: un doppione è chiusura tecnica, NON un
 * esito negativo. Distinto a colpo d'occhio dal rosso di pipe_fuori_target. */
.badge-pipe_duplicato       { background: var(--badge-camp-bozza-bg); color: var(--badge-camp-bozza-text); }
.badge-pipe_non_chiamare_piu { background: var(--badge-pipe-non-interessato-bg); color: var(--badge-pipe-non-interessato-text); }
.badge-pipe_manuale         { background: #FFF3CD; color: #664D03; }

/* Campagna badges */
.badge-camp_attiva          { background: var(--badge-camp-attiva-bg); color: var(--badge-camp-attiva-text); }
.badge-camp_bozza           { background: var(--badge-camp-bozza-bg); color: var(--badge-camp-bozza-text); }
.badge-camp_in_pausa        { background: #FFF3CD; color: #664D03; }
.badge-camp_completata      { background: var(--badge-pipe-inviato-bg); color: var(--badge-pipe-inviato-text); }
.badge-camp_archiviata      { background: var(--badge-camp-bozza-bg); color: var(--badge-camp-bozza-text); }

/* Contenuto badges */
.badge-cont_approvato       { background: var(--badge-cont-approvato-bg); color: var(--badge-cont-approvato-text); }
.badge-cont_scartato        { background: var(--badge-cont-scartato-bg); color: var(--badge-cont-scartato-text); }
.badge-cont_bozza           { background: var(--badge-camp-bozza-bg); color: var(--badge-camp-bozza-text); }

/* --- Forms --- */
.form-group {
    margin-bottom: var(--sp-md);
}

.form-group label,
.form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--sp-xs);
}

.form-control {
    width: 100%;
    padding: var(--sp-sm) 12px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--text-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(113, 75, 103, 0.15);
}

.form-control::placeholder {
    color: var(--text-disabled);
}

textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

select.form-control {
    appearance: auto;
}

.form-error {
    font-size: 13px;
    color: var(--danger);
    margin-top: var(--sp-xs);
}

/* --- Sortable tables — pattern standard (vedi app.js attivaTabelleOrdinabili)
 * Applicare class="sortable-table" alla tabella e class="sortable" agli <th>
 * cliccabili, più data-sort="num|text" e data-col="N" per ogni colonna sortable.
 * Le frecce ▲▼ vivono in <span class="sort-arrow"></span> dentro l'header. */
.sortable-table .sortable {
    cursor: pointer;
    user-select: none;
}
.sortable-table .sortable:hover {
    color: var(--text-primary);
}
.sortable-table .sortable .sort-arrow {
    font-size: 10px;
    opacity: 0.7;
    margin-left: 2px;
}
.sortable-table .sortable[data-dir="asc"],
.sortable-table .sortable[data-dir="desc"] {
    color: var(--primary);
}

/* Input ricerca tabelle — campo testo full-text che filtra le righe. */
.table-search {
    width: 100%;
    max-width: 320px;
    padding: 7px 12px;
    font-size: 13px;
    font-family: inherit;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
}
.table-search:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px oklch(0.40 0.14 265 / 0.15);
}
.table-search::placeholder { color: var(--text-disabled); }

/* --- Filter chips — pattern standard (2026-05-20)
 * Pillole neutre per filtri tabellari (es. categoria operativa, modulo).
 * Sostituiscono i `btn btn-sm btn-primary/secondary` usati come filtri:
 * con quel pattern il bottone "Tutti" sembrava CTA primario, qui invece
 * uno qualsiasi può essere attivo senza gerarchia visiva forte.
 * Markup: <div class="chip-bar"><button class="chip chip--active">...</button></div>
 *   il conteggio va in <span class="chip-count">N</span>. */
.chip-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.chip-bar .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.chip-bar .chip:hover {
    color: var(--text-primary);
    background: oklch(0.40 0.14 265 / 0.05);
    border-color: oklch(0.40 0.14 265 / 0.25);
}
.chip-bar .chip--active,
.chip-bar .chip--active:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}
.chip-bar .chip .chip-count {
    font-variant-numeric: tabular-nums;
    color: var(--text-disabled);
}
.chip-bar .chip--active .chip-count {
    color: oklch(1 0 0 / 0.7);
}

/* --- Tabs ---
 * Sticky: la barra tab resta in alto mentre scorri il contenuto della tab
 * (utile su pagine lunghe come dettaglio campagna). scroll-margin-top dà
 * un po' di aria quando si arriva qui via ancora #tabs. */
.tabs {
    display: flex;
    border-bottom: 2px solid var(--border);
    margin-bottom: var(--sp-lg);
    position: sticky;
    top: 0;
    background: var(--bg-page);
    z-index: 50;
    padding-top: 6px;
    scroll-margin-top: 6px;
}

.tab {
    padding: var(--sp-sm) var(--sp-md);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}

.tab:hover {
    color: var(--text-primary);
    text-decoration: none;
}

.tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--primary);
}

/* Tab "a linguetta" (scheda cliente/lead): pill di un'unica tinta (blu).
   Inattivo = contorno blu su sfondo bianco; attivo/hover = pieno blu, testo
   bianco. Si capisce che sono cliccabili senza usare tanti colori. */
.tabs--pills {
    border-bottom: none;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 8px;
}
.tabs--pills .tab {
    border: 1px solid var(--primary);
    border-radius: 6px;
    margin-bottom: 0;
    padding: 6px 12px;
    color: var(--primary);
    background: var(--bg-card, #fff);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.tabs--pills .tab:hover,
.tabs--pills .tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.tabs--pills .tab:hover .text-secondary,
.tabs--pills .tab.active .text-secondary { color: #fff !important; }
/* Badge conteggio uniforme (no arcobaleno): tenue su linguetta inattiva,
   bianco translucido su quella attiva/hover. */
.tabs--pills .tab-count {
    margin-left: 4px; padding: 0 7px; border-radius: 10px;
    font-size: 11px; font-weight: 600;
    background: rgba(0,0,0,0.07); color: inherit;
}
.tabs--pills .tab:hover .tab-count,
.tabs--pills .tab.active .tab-count {
    background: rgba(255,255,255,0.28); color: #fff;
}

/* --- Timeline attività (macro condivisa lead+cliente) --- */
.tl-event {
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card, #fff);
    margin-bottom: 8px;
    /* difesa: niente whitespace ereditato che renda visibili righe vuote */
    white-space: normal;
}
.tl-event__head { display: flex; align-items: center; gap: 8px; }
.tl-event__icon { color: var(--text-secondary); flex-shrink: 0; width: 15px; height: 15px; }
.tl-event__title { font-weight: 600; font-size: 13px; color: var(--text-primary); }
.tl-event__date { margin-left: auto; font-size: 11px; color: var(--text-disabled); white-space: nowrap; }
.tl-event__actions { display: flex; gap: 6px; }
.tl-mailbtn {
    font-size: 11px; color: var(--primary); text-decoration: none;
    border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px;
}
.tl-mailbtn:hover { background: var(--primary); color: #fff; }
.tl-event__body { margin-top: 5px; padding-left: 23px; font-size: 12.5px; color: var(--text-secondary); }
.tl-event__meta { display: block; color: var(--text-disabled); font-size: 11px; margin-bottom: 2px; }
.tl-event__text { white-space: pre-line; word-wrap: break-word; line-height: 1.5; }
.tl-event__text.is-clamped {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tl-event__toggle {
    background: none; border: none; color: var(--primary);
    cursor: pointer; font-size: 11px; padding: 2px 0; margin-top: 2px;
}
.tl-event__esito { margin-top: 4px; }
.tl-event__foot {
    margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap;
    font-size: 11px; color: var(--text-disabled);
}
/* Riga "DA FARE": azione caring pianificata e dovuta, cliccabile. */
a.tl-event--todo { display: block; text-decoration: none; color: inherit; }
.tl-event--todo {
    border: 1px solid oklch(0.55 0.16 50);
    background: oklch(0.97 0.05 75);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: background 0.12s, box-shadow 0.12s;
}
.tl-event--todo:hover {
    background: oklch(0.95 0.07 75);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.tl-event--todo .tl-event__icon { color: oklch(0.50 0.16 50); }
.tl-todo-badge {
    font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
    background: oklch(0.55 0.16 50); color: #fff;
    padding: 2px 7px; border-radius: 4px; flex-shrink: 0;
}
.tl-todo-cta {
    margin-left: 10px; font-size: 12px; font-weight: 600;
    color: oklch(0.45 0.16 50); white-space: nowrap;
}

/* --- Status dots (pipeline preparazione) --- */
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.dot-done { background: var(--success); }
.dot-progress { background: var(--warning); }
.dot-todo { background: var(--border); }
.dot-error { background: var(--danger); }

/* --- Progress bar --- */
.progress-bar {
    height: 6px;
    border-radius: 3px;
    background: #E9ECEF;
    overflow: hidden;
}

.progress-bar .fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--primary), var(--success));
    transition: width 0.3s;
}

/* --- Spin animation --- */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }

/* --- Toast --- */
.toast-container {
    position: fixed;
    top: var(--sp-md);
    right: var(--sp-md);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.toast {
    padding: 12px var(--sp-md);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-size: 14px;
    color: white;
    min-width: 280px;
    animation: slideIn 0.3s ease;
}

.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }
.toast-warning { background: var(--warning); color: var(--text-primary); }
.toast-info { background: var(--info); color: var(--text-primary); }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* --- Email thread --- */
.email-message {
    border-left: 3px solid var(--border);
    padding: var(--sp-md);
    margin-bottom: var(--sp-md);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.email-message.outbound {
    border-left-color: var(--primary);
    background: white;
}

.email-message.inbound {
    border-left-color: var(--info);
    background: var(--bg-page);
}

.email-header {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--sp-sm);
}

/* --- Modal --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--sp-lg);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-md);
}

.modal h2 {
    margin-bottom: var(--sp-md);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-sm);
    margin-top: var(--sp-lg);
}

/* --- Dialog (HTMX modals) --- */
/* <dialog open> nativo: sfondo scuro + stile come i .modal classici */
dialog.app-dialog {
    border: none;
    border-radius: var(--radius-lg);
    padding: 0;
    max-width: 640px;
    width: 92%;
    max-height: 88vh;
    box-shadow: var(--shadow-md);
    background: var(--bg-card);
}
dialog.app-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}
dialog.app-dialog .dialog-body { padding: var(--sp-lg); }
dialog.app-dialog h2 {
    margin: 0 0 var(--sp-md);
    font-size: 18px;
    font-weight: 600;
}
dialog.app-dialog .dialog-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: var(--sp-md);
}
dialog.app-dialog .dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-sm);
    margin-top: var(--sp-md);
    padding-top: var(--sp-md);
    border-top: 1px solid var(--border);
}
dialog.app-dialog textarea {
    width: 100%;
    min-height: 180px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
}
dialog.app-dialog input[type="text"],
dialog.app-dialog input[type="email"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
}
dialog.app-dialog label.field {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
    margin-top: var(--sp-sm);
}
dialog.app-dialog .dialog-allegati {
    display: flex;
    gap: var(--sp-md);
    flex-wrap: wrap;
    margin-top: var(--sp-sm);
    font-size: 12px;
    color: var(--text-secondary);
}
dialog.app-dialog .dialog-allegati label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

/* --- Filters bar --- */
.filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm);
    margin-bottom: var(--sp-lg);
    align-items: center;
}

.filters-bar .form-control {
    width: auto;
    min-width: 150px;
}

/* --- Empty state --- */
.empty-state {
    text-align: center;
    padding: var(--sp-xxl);
    color: var(--text-secondary);
}

.empty-state .icon {
    font-size: 48px;
    margin-bottom: var(--sp-md);
    opacity: 0.3;
}

/* --- Two-panel layout (Posta) --- */
.panel-layout {
    display: flex;
    gap: 0;
    height: calc(100vh - 80px);
}

.panel-left {
    width: 380px;
    min-width: 380px;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    background: white;
}

.panel-right {
    flex: 1;
    overflow-y: auto;
    background: var(--bg-page);
}

/* --- Utility --- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-xs { gap: var(--sp-xs); }
.gap-sm { gap: var(--sp-sm); }
.gap-md { gap: var(--sp-md); }
.gap-lg { gap: var(--sp-lg); }
.mt-sm { margin-top: var(--sp-sm); }
.mt-md { margin-top: var(--sp-md); }
.mt-lg { margin-top: var(--sp-lg); }
.mb-sm { margin-bottom: var(--sp-sm); }
.mb-md { margin-bottom: var(--sp-md); }
.mb-lg { margin-bottom: var(--sp-lg); }
.p-md { padding: var(--sp-md); }
.p-lg { padding: var(--sp-lg); }

/* --- Lead header card --- */
.lead-header-card {
    border-left: 4px solid var(--primary);
}

.lead-meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-lg);
}

.lead-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* --- Anagrafica grid --- */
.lead-anagrafica-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-md);
}

@media (max-width: 900px) {
    .lead-anagrafica-grid {
        grid-template-columns: 1fr;
    }
}

.anagrafica-field {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--sp-sm) 0;
    border-bottom: 1px solid var(--border);
}

.anagrafica-field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 120px;
    margin-bottom: 0;
}

.anagrafica-field .anagrafica-value {
    text-align: right;
}

/* --- Timeline (storico) --- */
.timeline {
    position: relative;
    padding-left: 28px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
}

.timeline-item {
    position: relative;
    padding: var(--sp-sm) 0;
    padding-left: var(--sp-md);
}

.timeline-dot {
    position: absolute;
    left: -24px;
    top: 12px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 1px var(--border);
}

.dot-transition { background: var(--primary); }
.dot-comunicazione { background: var(--info); }
.dot-contenuto { background: var(--warning); }

.timeline-content {
    padding: var(--sp-sm) var(--sp-md);
    border-radius: var(--radius-sm);
    background: var(--bg-page);
    border: 1px solid var(--border);
}

.timeline-label {
    font-size: 14px;
}

/* --- Email thread --- */
.email-thread {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.email-body {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 14px;
    line-height: 1.6;
}
.email-body .email-html-content {
    white-space: normal;
}
.email-html-content img { max-width: 100%; height: auto; }
.email-html-content table { max-width: 100%; border-collapse: collapse; }
.email-html-content a { color: var(--primary); }

/* Difese per le bolle del pannello Posta: l'HTML utente (firme Gmail con
   table+col width fissi, immagini esterne grandi) non deve sfondare la
   larghezza della bolla né del container thread. `col` reset perché ha
   priorità sui width via CSS. */
.msg-bubble-body                { overflow-x: auto; }
.msg-bubble-body img            { max-width: 100%; height: auto; }
.msg-bubble-body table          { max-width: 100%; }
.msg-bubble-body col            { width: auto !important; }

/* --- Bulk actions bar --- */
.bulk-actions-bar {
    background: var(--primary);
    color: white;
    padding: var(--sp-sm) var(--sp-md);
    border-radius: var(--radius-sm);
    margin-bottom: var(--sp-md);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: var(--sp-md);
}

.bulk-actions-bar .btn {
    color: white;
    border-color: rgba(255,255,255,0.3);
}

.bulk-actions-bar .btn-primary {
    background: rgba(255,255,255,0.2);
}

.bulk-actions-bar .btn-secondary {
    background: transparent;
    border-color: rgba(255,255,255,0.3);
    color: white;
}

.bulk-actions-bar .btn-ghost {
    color: rgba(255,255,255,0.7);
}

/* --- Country row (pipeline preparazione) --- */
.country-row td {
    padding-top: var(--sp-md) !important;
}

/* --- Campagne: contenuto card --- */
.contenuto-card {
    transition: border-color 0.15s;
}

.contenuto-card:hover {
    border-color: var(--primary);
}

.email-preview {
    font-family: 'Inter', sans-serif;
    border: 1px solid var(--border);
}

/* --- Campagne: pipeline visual --- */
.pipeline-counter {
    transition: transform 0.15s, box-shadow 0.15s;
}

.pipeline-counter:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

/* --- Contenuti list scrollable --- */
.contenuti-list {
    max-height: calc(100vh - 280px);
    overflow-y: auto;
}

/* --- Tooltip "?" per intestazioni colonna (col_help macro) ---
   Tooltip singleton iniettato in <body> da base.html: non clippato da
   table-wrapper (overflow:auto) né da header sticky. */
.col-help {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.col-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 700;
    cursor: help;
    line-height: 1;
    user-select: none;
    transition: background 0.12s, color 0.12s;
}

.col-help-icon:hover,
.col-help-icon:focus {
    background: var(--primary);
    color: #fff;
    outline: none;
}

#col-help-singleton {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background: linear-gradient(180deg, #475569 0%, #334155 100%);
    color: #f8fafc;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    max-width: 280px;
    white-space: normal;
    text-align: left;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18), 0 2px 4px rgba(15, 23, 42, 0.08);
    transition: opacity 0.12s ease;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

#col-help-singleton.show {
    opacity: 1;
    visibility: visible;
}

#col-help-singleton::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: var(--arrow-x, 50%);
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #334155;
    border-bottom: 0;
}

#col-help-singleton.below::after {
    bottom: auto;
    top: -5px;
    border-top: 0;
    border-top-color: transparent;
    border-bottom: 5px solid #475569;
}

/* --- Popup generico per drill-down (lista lead/clienti su click numero) --- */
.popup-clienti { position:fixed; inset:0; background:rgba(15,23,42,0.35); z-index:9000; display:flex; align-items:flex-start; justify-content:center; padding-top:80px; }
.popup-clienti-card { background:#fff; border-radius:8px; box-shadow:0 12px 32px rgba(0,0,0,0.18); width:min(440px, 90vw); max-height:70vh; display:flex; flex-direction:column; overflow:hidden; }
.popup-clienti-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--border); }
.popup-clienti-close { background:transparent; border:0; font-size:22px; line-height:1; color:var(--text-secondary); cursor:pointer; padding:0 6px; }
.popup-clienti-close:hover { color:var(--text); }
.popup-clienti-body { padding:8px 0; overflow-y:auto; flex:1; }
.popup-clienti-row { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid var(--border-light, #f1f5f9); transition:background 0.1s; gap:12px; }
.popup-clienti-row:last-child { border-bottom:0; }
.popup-clienti-row:hover { background:var(--bg-secondary); }
.popup-clienti-row a { color:var(--primary); font-weight:500; text-decoration:none; }
.popup-clienti-row a:hover { text-decoration:underline; }
.popup-clienti-meta { font-size:11px; color:var(--text-secondary); white-space:nowrap; }

/* --- Email: quoted reply / forward collassabile (smart trim) --- */
.email-quoted-trim {
    margin-top: 12px;
    border-left: 3px solid var(--border);
    padding: 4px 0 4px 10px;
}
.email-quoted-trim > summary {
    cursor: pointer;
    user-select: none;
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    padding: 4px 0;
    list-style: none;
    transition: color 0.12s;
}
.email-quoted-trim > summary::-webkit-details-marker { display: none; }
.email-quoted-trim > summary:hover { color: var(--primary); }
.email-quoted-trim[open] > summary { color: var(--primary); }
.email-quoted-body {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--bg-page);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 13px;
}

/* Città — badge colorato in base a fattibilita_spedizione (verde/giallo/rosso).
   Usato dalla macro components/citta_badge.html ovunque appaia il nome città. */
.citta-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
}
.citta-verde  { background: #DCFCE7; color: #166534; border-color: #86EFAC; }
.citta-giallo { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.citta-rosso  { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }
.citta-none   { background: transparent; color: inherit; border-color: transparent; font-weight: inherit; }

/* Bottone extra-compatto per azioni inline accanto al badge città. */
.btn-xs {
    font-size: 11px;
    padding: 1px 6px;
    line-height: 1.4;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid transparent;
}

/* ════════════════════════════════════════════════════════════════════════
   Dettaglio campagna — pannelli Automazione / Da fare tu, funnel pipeline,
   sezione manuale collapsable. (Round 2026-05-20, indaco palette.)
   Pensati per stare *direttamente sulla pagina* senza card wrapper esterno:
   sono sezioni di flusso, non cards annidate.
   ═══════════════════════════════════════════════════════════════════════ */

/* Riga metadata sotto il titolo della pagina (stato · canale · agente · ecc) */
.page-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}
.page-meta .sep {
    color: var(--text-disabled);
    user-select: none;
}
.page-meta .health-metric {
    color: var(--text-primary);
    font-weight: 500;
}
.page-meta .health-metric .health-pct {
    color: var(--success);
    font-variant-numeric: tabular-nums;
}
.page-description {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    margin: 4px 0 8px;
    max-width: 740px;
}
.page-kicker a {
    color: inherit;
    text-decoration: none;
}
.page-kicker a:hover {
    color: var(--primary);
}

/* Pannello generico (Automazione, Da fare tu).
 * Stile: non un card lussuoso, un'area sezione con titolo small-caps,
 * separatore in alto e contenuto in colonna. Niente bordi pesanti. */
.panel {
    margin: var(--sp-lg) 0;
    padding-top: var(--sp-md);
    border-top: 1px solid var(--border);
}
.panel-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    margin-bottom: var(--sp-md);
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Modifier "prossimo passo" — pannello attivo che rappresenta l'azione da
 * fare adesso nel flusso. Tinta indaco molto leggera (no side-stripe, vietato
 * dal restyling — vedi feedback-stels-restyling-roadmap). Il titolo del
 * pannello ha un mini-tag accanto via `.panel-next-tag`. */
.panel--next {
    background: oklch(0.40 0.14 265 / 0.04);
    border-top-color: oklch(0.40 0.14 265 / 0.25);
    padding: var(--sp-md) var(--sp-md) var(--sp-sm);
    border-radius: var(--radius-sm);
    margin-left: calc(var(--sp-md) * -1);
    margin-right: calc(var(--sp-md) * -1);
}
.panel-next-tag {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    background: oklch(0.40 0.14 265 / 0.10);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.panel-title .panel-title-aside {
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-secondary);
    margin-left: auto;
}

/* Riga key-value dentro un pannello — etichetta a sinistra a larghezza fissa,
 * valore subito dopo. Usata per "Prossimo ciclo", "Cap giornaliero", ecc. */
.panel-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    align-items: center;
    padding: 6px 0;
    font-size: 14px;
}
.panel-row > .panel-label,
.panel-label {
    color: var(--text-secondary);
    font-size: 13px;
}
.panel-row > .panel-value {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.panel-row > .panel-value strong {
    font-weight: 600;
}
.panel-row + .panel-subrow {
    margin-top: 12px;
}

/* Barra cap giornaliero — sottile, no chrome. Usa colori semantici per
 * dire "sei oltre target / sei oltre cap" senza bisogno di testo. */
.cap-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.cap-bar-track {
    flex: 1 1 auto;
    height: 6px;
    background: var(--bg-sidebar-hover);
    border-radius: 3px;
    overflow: hidden;
    max-width: 380px;
}
.cap-bar-fill {
    height: 100%;
    background: var(--success);
    transition: width 0.3s ease;
}
.cap-bar[data-state="warning"] .cap-bar-fill { background: var(--warning); }
.cap-bar[data-state="danger"]  .cap-bar-fill { background: var(--danger); }
.cap-bar-tail {
    color: var(--text-secondary);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* Lista invii pianificati — righe dense, ogni riga è un'azione
 * potenziale (data, num lead, città, link annulla). */
.scheduled-list {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
}
.scheduled-row {
    display: grid;
    grid-template-columns: 16px 200px 60px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    font-size: 14px;
    border-bottom: 1px dashed var(--border);
}
.scheduled-row:last-child { border-bottom: 0; }

/* Lista eventi tracking — righe pulite, timestamp + phase + descrizione.
 * Riusabile per tracking spedizioni, audit log, qualunque sequenza ordinata
 * cronologicamente. Prima riga (più recente) leggermente evidenziata. */
.event-list {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
    max-height: 420px;
    overflow-y: auto;
}
.event-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    line-height: 1.45;
}
.event-row:last-child { border-bottom: 0; }
.event-row .event-when {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}
.event-row .event-phase {
    font-weight: 600;
    color: var(--text-primary);
}
.event-row .event-desc {
    color: var(--text-primary);
    margin-top: 2px;
}
.event-row .event-office {
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 2px;
}
.event-row--current .event-phase { color: var(--primary); }
.scheduled-row .schedule-marker {
    color: var(--info);
    text-align: center;
    line-height: 0;
}
.scheduled-row .schedule-when {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.scheduled-row .schedule-count {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.scheduled-row .schedule-where {
    color: var(--text-secondary);
}
.scheduled-row form { display: inline; }
.scheduled-row .schedule-cancel {
    background: none;
    border: 0;
    color: var(--danger);
    font-size: 12px;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 4px;
}
.scheduled-row .schedule-cancel:hover {
    background: oklch(0.60 0.20 25 / 0.08);
}
.scheduled-empty {
    color: var(--text-disabled);
    font-size: 13px;
    font-style: italic;
    padding: 4px 0 6px;
}

/* Chip list per "città in coda" — formato compatto inline read-only. */
.city-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    font-size: 13px;
}
.city-chip {
    color: var(--text-primary);
    white-space: nowrap;
}
.city-chip .city-chip-count {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    margin-left: 4px;
}
.city-chips-empty {
    color: var(--text-disabled);
    font-size: 13px;
    font-style: italic;
}

/* Pannello "Da fare tu" — warning soft, compare solo se ha contenuto.
 * Stile più sobrio del giallo Bootstrap: tinta indaco molto chiara. */
.panel--todo .todo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 14px;
}
.panel--todo .todo-row .todo-icon {
    color: var(--warning);
    flex: 0 0 auto;
}
.panel--todo .todo-row .todo-label {
    color: var(--text-primary);
}
.panel--todo .todo-row .todo-link {
    margin-left: auto;
    color: var(--primary);
    font-size: 13px;
    text-decoration: none;
}
.panel--todo .todo-row .todo-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════
   PIPELINE STATS — distribuzione lead per stato come tabella-bar chart.
   Una riga per stato: dot · etichetta · numero · barra proporzionale.
   La barra è scalata sul valore MASSIMO, non sul totale: gli stati piccoli
   restano visibili, e la visuale dice "chi domina e chi è secondario" senza
   far credere che gli stati sommino a un totale (cosa che non è).
   ═══════════════════════════════════════════════════════════════════════ */
.pipeline-stats {
    margin: var(--sp-md) 0 var(--sp-lg);
}
.pipeline-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-xl);
    margin-top: 12px;
}
@media (max-width: 920px) {
    .pipeline-cols { grid-template-columns: 1fr; gap: var(--sp-lg); }
}
.pipeline-col-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.pipeline-col-empty {
    font-size: 13px;
    color: var(--text-disabled);
    font-style: italic;
    padding: 16px 6px;
}
.pipeline-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
}
.pipeline-stats-header .pipeline-stats-total {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.stat-bars {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
}
.stat-bar-row {
    display: grid;
    grid-template-columns: 18px minmax(160px, 1.2fr) 56px minmax(120px, 2fr) auto;
    gap: 14px;
    align-items: center;
    padding: 9px 6px;
    font-size: 14px;
    text-decoration: none;
    color: var(--text-primary);
    border-radius: 4px;
    border-bottom: 1px solid var(--border);
}
.stat-bar-row:last-child { border-bottom: 0; }
.stat-bar-row:hover {
    background: oklch(0.40 0.14 265 / 0.04);
}
.stat-bar-row .stat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-disabled);
    justify-self: center;
}
.stat-bar-row .stat-label {
    color: var(--text-primary);
    font-weight: 500;
}
.stat-bar-row .stat-count {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text-primary);
}
.stat-bar-row .stat-track {
    height: 6px;
    background: var(--bg-sidebar-hover);
    border-radius: 3px;
    overflow: hidden;
}
.stat-bar-row .stat-fill {
    height: 100%;
    background: var(--text-disabled);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.stat-bar-row .stat-extra {
    color: var(--warning);
    font-size: 12px;
    white-space: nowrap;
    font-weight: 500;
}
.stat-bar-row .stat-extra:empty { display: none; }

/* Colore dot + fill basato sul tipo di stato pipeline */
.stat-bar-row[data-type="ingresso"]     .stat-dot,
.stat-bar-row[data-type="ingresso"]     .stat-fill  { background: oklch(0.78 0.04 265); }
.stat-bar-row[data-type="preparazione"] .stat-dot,
.stat-bar-row[data-type="preparazione"] .stat-fill  { background: var(--info); }
.stat-bar-row[data-type="invio"]        .stat-dot,
.stat-bar-row[data-type="invio"]        .stat-fill  { background: var(--primary); }
.stat-bar-row[data-type="esito_aperto"] .stat-dot,
.stat-bar-row[data-type="esito_aperto"] .stat-fill  { background: var(--success); }
.stat-bar-row[data-type="esito_chiuso"] .stat-dot,
.stat-bar-row[data-type="esito_chiuso"] .stat-fill  { background: oklch(0.55 0.02 265); }

/* ═══════════════════════════════════════════════════════════════════════
   CALLOUT — banner informativo dentro contenuto cards (note interne agente,
   motivazione bocciatura revisore AI, ecc). Pattern uniforme: icona + titolo
   semi-grassetto + corpo. Niente più hex inline negli style="...".
   ═══════════════════════════════════════════════════════════════════════ */
.callout {
    margin-bottom: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.5;
}
.callout-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}
.callout-body { color: var(--text-primary); }

.callout--warning {
    background: oklch(0.78 0.15 75 / 0.10);
}
.callout--warning .callout-title { color: oklch(0.45 0.13 65); }

.callout--danger {
    background: oklch(0.60 0.20 25 / 0.10);
}
.callout--danger .callout-title { color: oklch(0.42 0.18 25); }
.callout--danger .callout-body  { color: oklch(0.35 0.15 25); }

/* ═══════════════════════════════════════════════════════════════════════
   MINI-TABLE — tabella read-only compatta per dati densi nei pannelli.
   Pensata per "città in coda invio", "città da generare", ecc.: pochi
   record, dati strutturati, leggibili in colonne allineate.
   ═══════════════════════════════════════════════════════════════════════ */
.mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    max-width: 520px;
}
.mini-table thead th {
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    padding: 6px 12px 5px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.mini-table thead th.num { text-align: right; }
.mini-table tbody td {
    padding: 7px 12px;
    color: var(--text-primary);
    border-bottom: 1px solid oklch(0.95 0.005 265);
}
.mini-table tbody tr:last-child td { border-bottom: 0; }
.mini-table tbody td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.mini-table tbody td.paese {
    color: var(--text-secondary);
    font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Esecuzione manuale — collapsable via <details>. Default chiusa.
   Discreta: estetica da "break glass", non da bottone principale.
   ═══════════════════════════════════════════════════════════════════════ */
.manual-section {
    margin-top: var(--sp-xl);
    border-top: 1px dashed var(--border);
    padding-top: var(--sp-md);
}
.manual-section summary {
    cursor: pointer;
    list-style: none;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    padding: 4px 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}
.manual-section summary::-webkit-details-marker { display: none; }
.manual-section summary::before {
    content: "▸";
    font-size: 10px;
    transition: transform 0.15s;
    color: var(--text-secondary);
}
.manual-section[open] > summary::before {
    transform: rotate(90deg);
}
.manual-section summary:hover {
    color: var(--text-primary);
}
.manual-section .manual-warning {
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
    margin: 12px 0 18px;
    padding: 10px 14px;
    background: oklch(0.78 0.15 75 / 0.08);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.manual-section .manual-warning::before {
    content: "⚠";
    color: var(--warning);
    font-size: 14px;
    flex: 0 0 auto;
    font-style: normal;
}
.manual-section h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 18px 0 10px;
    color: var(--text-primary);
}

/* Tabelle interne alla sezione manuale: padding/font uniformi al resto.
 * Si combina con .sortable-table (per ordinamento) e usa lo stile generale
 * delle tabelle senza il "card" wrapper esterno. Header e footer più severi. */
.manual-table {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
}
.manual-table thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    padding: 8px 10px 6px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.manual-table thead th.num,
.manual-table tbody td.num,
.manual-table tfoot td.num { text-align: right; }
.manual-table tbody td {
    padding: 8px 10px;
    color: var(--text-primary);
    border-bottom: 1px solid oklch(0.95 0.005 265);
}
.manual-table tbody td.num {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.manual-table tbody tr:last-child td { border-bottom: 0; }
.manual-table tbody tr.is-disabled { opacity: 0.5; }
.manual-table tfoot td {
    padding: 10px;
    border-top: 1px solid var(--border);
    font-weight: 600;
    color: var(--text-primary);
}

/* Contenitore della tabella manuale: nessun bordo colorato decorativo,
 * solo spazio + un sottile heading sopra. */
.manual-block {
    margin-bottom: 18px;
    padding: 14px 0 4px;
    border-top: 1px solid var(--border);
}
.manual-block:first-of-type { border-top: 0; padding-top: 0; }
.manual-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 13px;
}
.manual-block-header strong {
    color: var(--text-primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ============================================================
   Scheda dettaglio lead/cliente — breadcrumb statico
   (cantiere uniformazione scheda; riferimento layout: sandbox v2)
   ============================================================ */
.detail-breadcrumb {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 8px 0 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}
.detail-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.detail-breadcrumb a:hover { color: var(--primary); text-decoration: underline; }
.detail-breadcrumb .sep { margin: 0 6px; opacity: 0.5; }

/* Banner stato condizionale — warning (giallo) / alert (rosso); niente verde.
   Stesse intenzioni cromatiche dei semantici --warning (h=75) / --danger (h=25). */
.detail-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 6px;
    margin-bottom: 14px; font-size: 14px;
}
.detail-banner.warning {
    background: oklch(0.78 0.15 75 / 0.15);
    border: 1px solid oklch(0.78 0.15 75 / 0.45);
    color: oklch(0.30 0.10 70);
}
.detail-banner.alert {
    background: oklch(0.60 0.20 25 / 0.12);
    border: 1px solid oklch(0.60 0.20 25 / 0.40);
    color: oklch(0.36 0.14 25);
}

/* Box info riassunto — 3 colonne (livello 5 del layout). Token reali del
   design system; --text-tertiary non esiste, si usa --text-disabled. */
.detail-info {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;
    padding: 16px;
    /* Banda info "a rilievo": card bianca con bordo + lieve ombra, così
       stacca dall'header (richiesta leggibilità 2026-06-16). */
    background: var(--bg-card, #fff);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    margin-bottom: 18px;
}
.detail-info__col h3 {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    color: var(--text-disabled); letter-spacing: 0.5px;
    margin: 0 0 10px;
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.detail-info__row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 8px; font-size: 13px; padding: 4px 0;
    border-bottom: 1px dashed var(--border);
}
.detail-info__row:last-child { border-bottom: none; }
.detail-info__lbl { color: var(--text-secondary); white-space: nowrap; }
.detail-info__val { color: var(--text-primary); font-weight: 500; text-align: right; }
.detail-info__val a { color: var(--primary); text-decoration: none; }
.detail-info__val a:hover { text-decoration: underline; }
/* mini-azione inline (matita/Cambia/Classifica) accanto a un valore o titolo */
.detail-info__edit {
    background: none; border: none; cursor: pointer;
    color: var(--text-disabled); padding: 0 2px; font-size: 11px;
    display: inline-flex; align-items: center; gap: 3px;
}
.detail-info__edit:hover { color: var(--primary); }
@media (max-width: 720px) {
    .detail-info { grid-template-columns: 1fr; }
}

/* Timeline tab Attività (lead+cliente) — chip filtri + eventi <details>.
   Cantiere uniformazione vista, lotto 2. */
.tl-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tl-chip {
    padding: 4px 12px; border-radius: 14px; font-size: 12px;
    border: 1px solid var(--border); background: var(--bg-page);
    color: var(--text-secondary); cursor: pointer; user-select: none;
}
.tl-chip.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.tl-event { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; background: var(--bg-card); }
.tl-event > summary { padding: 10px 14px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 13px; list-style: none; }
.tl-event > summary::-webkit-details-marker { display: none; }
.tl-event__icon { color: var(--text-disabled); flex-shrink: 0; }
.tl-event__title { font-weight: 500; flex: 1; }
.tl-event__date { color: var(--text-disabled); font-size: 11px; white-space: nowrap; }
.tl-event__body { padding: 2px 14px 12px 38px; font-size: 12.5px; color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; }
.tl-event__actions { display: flex; gap: 6px; }
.tl-mailbtn { font-size: 11px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-page); color: var(--primary); text-decoration: none; white-space: nowrap; }
.tl-mailbtn:hover { border-color: var(--primary); }
.tl-empty { padding: 30px; text-align: center; color: var(--text-disabled); font-style: italic; font-size: 13px; }