/* ============================================================
   PROD — Modulo CRM
   ============================================================
   Namespace .crm-mod isolato: nessuna regola qui dentro puo'
   raggiungere gli altri moduli. Sostituisce, quando una vista
   arriva qui, le regole .crm-* sparse fra style-settings.css e
   style-overlays.css — lo strato vecchio sparisce nello stesso
   commit della vista che lo usava, non gli si affianca.

   I token vivono in :root (scuro) e :root[data-tema="chiaro"],
   come in css/distinta-base-module.css. Sono derivati da quelli
   canonici di style-core.css, non riscritti: il mockup e' stato
   disegnato sulla stessa palette — il suo arancio e il suo ink
   coincidono a meno di un paio di punti con --accent e
   --text-strong — quindi bastano le derivazioni e il file resta
   senza un solo colore cablato.

   I colori di fase (Qualification, Design, ...) NON stanno qui:
   sono un dato, vivono in STAGES dentro modules/features/crm.js
   e arrivano ai componenti dalla variabile --crm-stage impostata
   sull'elemento. Cosi' cambiare una fase non tocca il CSS.
   ============================================================ */

:root {
    /* ── Tipografia ──
       Il mockup usa un monospaziato per importi, date e codici.
       Stack di sistema: stessa texture, nessuna dipendenza di
       rete in piu'. */
    --crm-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;

    /* ── Superfici ── */
    --crm-surface:   var(--panel-bg);
    --crm-surface-2: color-mix(in srgb, var(--text-strong) 5%, var(--panel-bg));
    --crm-surface-3: color-mix(in srgb, var(--bg-base) 55%, var(--panel-bg));
    --crm-surface-4: color-mix(in srgb, var(--bg-base) 72%, var(--panel-bg));

    /* ── Bordi ── */
    --crm-line:        var(--panel-border);
    --crm-line-2:      var(--panel-border-mid);
    --crm-line-3:      color-mix(in srgb, var(--text-strong) 16%, transparent);
    --crm-line-strong: color-mix(in srgb, var(--text-strong) 24%, transparent);
    --crm-line-hover:  color-mix(in srgb, var(--text-strong) 34%, transparent);

    /* ── Testo ── */
    --crm-text:    var(--text-strong);
    --crm-text-2:  color-mix(in srgb, var(--text-strong) 82%, transparent);
    --crm-text-3:  color-mix(in srgb, var(--text-strong) 68%, transparent);
    --crm-muted:   var(--text-secondary);
    --crm-muted-2: var(--text-tertiary);
    --crm-faint:   color-mix(in srgb, var(--text-strong) 28%, transparent);

    /* ── Accento ── */
    --crm-accent:       var(--accent);
    --crm-accent-hover: color-mix(in srgb, var(--accent) 82%, var(--text-strong));
    --crm-accent-soft:  var(--accent-wash);
    --crm-accent-line:  color-mix(in srgb, var(--accent) 30%, transparent);
    --crm-on-accent:    var(--accent-contrast);

    /* ── Semantici ── */
    --crm-ok:        var(--success);
    --crm-ok-soft:   color-mix(in srgb, var(--success) 15%, transparent);
    --crm-warn:      var(--warning);
    --crm-warn-soft: color-mix(in srgb, var(--warning) 15%, transparent);
    --crm-bad:       var(--error);
    --crm-bad-soft:  color-mix(in srgb, var(--error) 15%, transparent);

    /* Colore di fase: lo imposta il markup da STAGES, questo e' il
       ripiego quando non arriva. */
    --crm-stage: var(--text-tertiary);

    /* ── Raggi ── */
    --crm-r-xs: 4px;
    --crm-r-sm: 6px;
    --crm-r:    8px;
    --crm-r-lg: 10px;

    /* ── Misure ── */
    --crm-kpi-h: 58px;
    --crm-row-h: 44px;
}

:root[data-tema="chiaro"] {
    /* Col tema chiaro le superfici scendono invece di salire: la
       terza e la quarta sono piu' scure del pannello, non piu'
       chiare, altrimenti head e footer di tabella sparirebbero. */
    --crm-surface-2: var(--surface-hover-soft);
    --crm-surface-3: color-mix(in srgb, var(--bg-base) 72%, var(--panel-bg));
    --crm-surface-4: color-mix(in srgb, var(--bg-base) 88%, var(--panel-bg));
    --crm-accent-hover: var(--accent-strong);
}

/* ============================================================
   RADICE — ogni vista CRM apre con .crm-mod
   ============================================================ */

.crm-mod {
    font-size: 13px;
    color: var(--crm-text);
}

.crm-mod .crm-spacer { flex: 1; }

/* Cresce e si lascia troncare: senza min-width:0 il testo lungo dentro un
   flex non va mai in ellissi, spinge invece il contenitore. */
.crm-mod .crm-grow { flex: 1; min-width: 0; }

/* ============================================================
   STRISCIA KPI — sostituisce l'hero: una riga, mai tagliata
   ============================================================ */

.crm-mod .crm-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    grid-auto-rows: var(--crm-kpi-h);
    border-top: 1px solid var(--crm-line);
    border-bottom: 1px solid var(--crm-line);
    margin-bottom: 18px;
}

.crm-mod .crm-kpi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    padding: 0 20px;
    border-right: 1px solid var(--crm-line);
}

.crm-mod .crm-kpi:last-child { border-right: 0; }

.crm-mod .crm-kpi__label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--crm-muted-2);
}

.crm-mod .crm-kpi__row {
    display: flex;
    align-items: baseline;
    gap: 7px;
    white-space: nowrap;
}

.crm-mod .crm-kpi__value {
    font-family: var(--crm-mono);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.crm-mod .crm-kpi__value.is-pos { color: var(--crm-ok); }
.crm-mod .crm-kpi__value.is-neg { color: var(--crm-bad); }

.crm-mod .crm-kpi__meta { font-size: 11px; color: var(--crm-muted); }
.crm-mod .crm-kpi__meta.is-pos { color: var(--crm-ok); }

/* ============================================================
   TOOLBAR — va a capo, non comprime: mai scroll orizzontale
   ============================================================ */

.crm-mod .crm-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.crm-mod .crm-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    white-space: nowrap;
    cursor: pointer;
    height: 32px;
    padding: 0 11px;
    border-radius: var(--crm-r);
    border: 1px solid var(--crm-line-2);
    background: var(--crm-surface);
    color: var(--crm-text-2);
    font-size: 12px;
}

.crm-mod .crm-chip:hover {
    border-color: var(--crm-line-strong);
    color: var(--crm-text);
}

.crm-mod .crm-chip--sm {
    height: auto;
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--crm-muted);
    background: none;
    border-color: var(--crm-line-3);
}

.crm-mod .crm-chip--sm:hover {
    color: var(--crm-text);
    border-color: var(--crm-line-hover);
}

.crm-mod .crm-chip.is-active {
    border-color: var(--crm-accent);
    color: var(--crm-accent);
    background: var(--crm-accent-soft);
}

.crm-mod .crm-chip--danger {
    color: var(--crm-bad);
    border-color: color-mix(in srgb, var(--error) 38%, transparent);
    background: color-mix(in srgb, var(--error) 11%, transparent);
}

.crm-mod .crm-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    white-space: nowrap;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: var(--crm-r);
    border: 1px solid var(--crm-line-3);
    background: none;
    color: var(--crm-text-2);
    font-size: 12px;
    font-weight: 600;
}

.crm-mod .crm-btn:hover {
    border-color: var(--crm-accent);
    color: var(--crm-accent);
}

.crm-mod .crm-btn--primary {
    background: var(--crm-accent);
    border-color: var(--crm-accent);
    color: var(--crm-on-accent);
    font-weight: 700;
    padding: 9px 13px;
}

.crm-mod .crm-btn--primary:hover {
    background: var(--crm-accent-hover);
    border-color: var(--crm-accent-hover);
    color: var(--crm-on-accent);
}

.crm-mod .crm-btn--sm { padding: 6px 11px; font-size: 11.5px; }

.crm-mod .crm-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 11px;
    border-radius: var(--crm-r);
    border: 1px solid var(--crm-line-2);
    background: var(--crm-surface);
    color: var(--crm-muted-2);
    flex: 0 1 220px;
    min-width: 140px;
}

.crm-mod .crm-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--crm-text);
    font-size: 12px;
}

.crm-mod .crm-search input::placeholder { color: var(--crm-muted-2); }

.crm-mod .crm-seg {
    display: flex;
    gap: 2px;
    flex: none;
    padding: 2px;
    border-radius: 7px;
    border: 1px solid var(--crm-line-2);
    background: var(--crm-surface);
}

.crm-mod .crm-seg__item {
    padding: 5px 11px;
    border-radius: var(--crm-r-sm);
    font-size: 12px;
    font-weight: 600;
    color: var(--crm-muted);
    cursor: pointer;
    white-space: nowrap;
    border: 0;
    background: none;
}

.crm-mod .crm-seg__item:hover { color: var(--crm-text); }

.crm-mod .crm-seg__item.is-active {
    background: var(--crm-line-3);
    color: var(--crm-text);
}

/* ============================================================
   COLONNE DI PAGINA — flex-wrap, si impilano da sole
   ============================================================ */

.crm-mod .crm-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
}

.crm-mod .crm-cols__main {
    flex: 1 1 520px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.crm-mod .crm-cols__side {
    flex: 1 1 320px;
    max-width: 372px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.crm-mod .crm-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.crm-mod .crm-section-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.crm-mod .crm-count {
    font-family: var(--crm-mono);
    font-size: 11px;
    color: var(--crm-muted);
    background: var(--crm-surface);
    border: 1px solid var(--crm-line-2);
    border-radius: 5px;
    padding: 2px 6px;
}

.crm-mod .crm-link {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--crm-muted);
    cursor: pointer;
    border: 0;
    background: none;
}

.crm-mod .crm-link:hover { color: var(--crm-accent); }

/* ============================================================
   PANNELLI
   ============================================================ */

.crm-mod .crm-panel {
    border: 1px solid var(--crm-line);
    border-radius: var(--crm-r-lg);
    background: var(--crm-surface);
    padding: 14px;
}

.crm-mod .crm-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.crm-mod .crm-panel__title { font-size: 13.5px; font-weight: 600; }
.crm-mod .crm-panel__note { font-size: 11px; color: var(--crm-muted-2); }

.crm-mod .crm-stage {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px 4px;
    border-radius: var(--crm-r-sm);
    cursor: pointer;
}

.crm-mod .crm-stage:hover { background: var(--crm-surface-2); }

.crm-mod .crm-stage__row { display: flex; align-items: baseline; gap: 8px; }
.crm-mod .crm-stage__name { flex: 1; font-size: 12px; font-weight: 600; }

.crm-mod .crm-stage__count {
    font-family: var(--crm-mono);
    font-size: 11px;
    color: var(--crm-muted);
}

.crm-mod .crm-stage__value {
    font-family: var(--crm-mono);
    font-size: 12px;
    width: 66px;
    text-align: right;
}

.crm-mod .crm-bar {
    height: 4px;
    border-radius: 3px;
    background: var(--crm-line-3);
    overflow: hidden;
}

.crm-mod .crm-bar__fill {
    height: 100%;
    border-radius: 3px;
    background: var(--crm-stage);
}

.crm-mod .crm-minirow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 7px;
    cursor: pointer;
}

.crm-mod .crm-minirow:hover { background: var(--crm-surface-2); }

.crm-mod .crm-minirow__title {
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-mod .crm-minirow__meta {
    font-size: 11px;
    color: var(--crm-muted);
    margin-top: 2px;
}

/* feed compatto delle ultime attivita' */

/* ============================================================
   CODA ATTIVITA' — bordo sinistro di severita'
   ============================================================ */

.crm-mod .crm-queue { display: flex; flex-direction: column; gap: 6px; }

.crm-mod .crm-queue__row {
    --sev: var(--crm-muted);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    cursor: pointer;
    background: var(--crm-surface);
    border: 1px solid var(--crm-line);
    border-left: 3px solid var(--sev);
    border-radius: 9px;
}

.crm-mod .crm-queue__row:hover {
    background: var(--crm-surface-2);
    border-color: var(--crm-line-3);
    border-left-color: var(--sev);
}

.crm-mod .crm-queue__row.is-late  { --sev: var(--crm-bad); }
.crm-mod .crm-queue__row.is-today { --sev: var(--crm-warn); }
.crm-mod .crm-queue__row.is-stale { --sev: var(--crm-stage); }

.crm-mod .crm-queue__body { flex: 1; min-width: 0; }

.crm-mod .crm-queue__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
}

.crm-mod .crm-queue__meta {
    font-size: 11.5px;
    color: var(--crm-muted);
    margin-top: 4px;
}

.crm-mod .crm-queue__actions { display: flex; gap: 6px; flex: none; }

/* ============================================================
   BADGE E TAG
   ============================================================ */

.crm-mod .crm-tag {
    justify-self: start;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 5px;
    white-space: nowrap;
    color: var(--crm-stage);
    background: color-mix(in srgb, currentcolor 14%, transparent);
}

.crm-mod .crm-tag--accent { color: var(--crm-accent); }
.crm-mod .crm-tag--ok     { color: var(--crm-ok); }
.crm-mod .crm-tag--warn   { color: var(--crm-warn); }
.crm-mod .crm-tag--bad    { color: var(--crm-bad); }
.crm-mod .crm-tag--muted  { color: var(--crm-muted); }

/* ============================================================
   BOARD KANBAN — le colonne vanno a capo, non si strizzano
   ============================================================ */

.crm-mod .crm-board {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}

.crm-mod .crm-board__col {
    flex: 1 1 236px;
    min-width: 0;
    padding: 9px 9px 10px;
    border: 1px solid var(--crm-line);
    border-radius: var(--crm-r-lg);
    background: var(--crm-surface-3);
}

.crm-mod .crm-board__col--focus {
    background: color-mix(in srgb, var(--accent) 6%, var(--crm-surface-3));
    border-color: var(--crm-accent-line);
}

.crm-mod .crm-board__col--closed { opacity: 0.86; }

.crm-mod .crm-board__head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
}

.crm-mod .crm-board__swatch {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    flex: none;
    background: var(--crm-stage);
}

.crm-mod .crm-board__name {
    flex: 1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--crm-text-2);
}

.crm-mod .crm-board__count {
    font-family: var(--crm-mono);
    font-size: 11px;
    color: var(--crm-muted-2);
}

.crm-mod .crm-board__value {
    font-family: var(--crm-mono);
    font-size: 12px;
    color: var(--crm-muted);
    margin: 0 1px 10px;
}

.crm-mod .crm-board__col--focus .crm-board__value { color: var(--crm-accent); }

.crm-mod .crm-board__stack { display: flex; flex-direction: column; gap: 7px; min-height: 48px; }

/* La card si trascina: il cursore lo dice prima del gesto, e la colonna sotto
   il puntatore si accende mentre si tiene. Mentre e' in volo, l'originale
   resta al suo posto sbiadito: e' il fantasma che segue il dito. */
.crm-mod .crm-card.ov-drag-active { opacity: 0.35; cursor: grabbing; }
.crm-mod .crm-board__stack.crm-board__stack--sopra {
    outline: 2px dashed var(--crm-stage, var(--accent));
    outline-offset: 3px;
    border-radius: 10px;
}

.crm-mod .crm-board__empty {
    font-size: 11.5px;
    color: var(--crm-muted-2);
    padding: 4px 2px;
}

.crm-mod .crm-card {
    padding: 9px 10px;
    border: 1px solid var(--crm-line-3);
    border-radius: var(--crm-r);
    background: var(--crm-surface-2);
    cursor: grab;
    touch-action: pan-y;
}

.crm-mod .crm-card:hover {
    border-color: var(--crm-line-hover);
    background: color-mix(in srgb, var(--text-strong) 8%, var(--panel-bg));
}

.crm-mod .crm-card.is-late { border-left: 2px solid var(--crm-bad); }

.crm-mod .crm-card__title { font-size: 12.5px; font-weight: 600; line-height: 1.3; }

.crm-mod .crm-card__sub {
    font-size: 11px;
    color: var(--crm-muted);
    margin-top: 3px;
}

.crm-mod .crm-card__foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
}

.crm-mod .crm-card__value {
    font-family: var(--crm-mono);
    font-size: 12px;
    flex: 1;
}

.crm-mod .crm-card__date {
    font-family: var(--crm-mono);
    font-size: 10.5px;
    color: var(--crm-muted-2);
}

.crm-mod .crm-card__date.is-late { color: var(--crm-bad); }

.crm-mod .crm-card--compact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-color: var(--crm-line);
    border-radius: 7px;
}

.crm-mod .crm-prob {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: var(--crm-r-xs);
    color: var(--crm-stage);
    background: color-mix(in srgb, currentcolor 14%, transparent);
}

/* ============================================================
   TABELLE — le colonne vivono in --crm-cols, una per variante
   ============================================================ */

.crm-mod .crm-table {
    border: 1px solid var(--crm-line);
    border-radius: var(--crm-r-lg);
    background: var(--crm-surface);
    overflow: hidden;
    overflow-x: auto;
}


.crm-mod .crm-table__head,
.crm-mod .crm-table__row {
    display: grid;
    grid-template-columns: var(--crm-cols);
    gap: 10px;
    align-items: center;
}

.crm-mod .crm-table__head {
    padding: 9px 14px;
    background: var(--crm-surface-3);
    border-bottom: 1px solid var(--crm-line-2);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--crm-muted-2);
}

.crm-mod .crm-table__row {
    height: var(--crm-row-h);
    padding: 0 14px;
    border-bottom: 1px solid var(--crm-line);
    cursor: pointer;
}

.crm-mod .crm-table__row:last-child { border-bottom: 0; }
.crm-mod .crm-table__row:hover { background: var(--crm-surface-2); }

.crm-mod .crm-table__group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: var(--crm-surface-4);
    border-top: 1px solid var(--crm-line);
    border-bottom: 1px solid var(--crm-line);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--crm-muted);
}

.crm-mod .crm-table__foot {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: var(--crm-surface-3);
    border-top: 1px solid var(--crm-line-2);
    font-size: 11.5px;
    color: var(--crm-muted);
}

.crm-mod .crm-table--contacts {
    --crm-cols: minmax(150px, 2fr) 96px minmax(126px, 1.5fr) 112px 64px 116px 24px;
}

.crm-mod .crm-table--deals {
    --crm-cols: minmax(140px, 2.1fr) minmax(112px, 1.4fr) 148px 92px 58px 84px 96px;
}

.crm-mod .crm-cell {
    font-size: 12.5px;
    color: var(--crm-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-mod .crm-cell--strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--crm-text);
}

.crm-mod .crm-cell--num {
    font-family: var(--crm-mono);
    font-size: 12.5px;
    text-align: right;
}

.crm-mod .crm-cell--more {
    font-size: 14px;
    color: var(--crm-muted-2);
    text-align: center;
}

.crm-mod .crm-name {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.crm-mod .crm-avatar {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: var(--crm-r-sm);
    background: var(--crm-line-3);
    display: grid;
    place-items: center;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--crm-text-2);
}

/* ============================================================
   DRAWER — contenuto interno (la chrome sta in style-overlays)
   ============================================================ */

.crm-mod .crm-kv {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 9px 12px;
    align-items: center;
    font-size: 12.5px;
}

.crm-mod .crm-kv__k { color: var(--crm-muted-2); }

.crm-mod .crm-timeline { display: flex; flex-direction: column; gap: 12px; }
.crm-mod .crm-timeline__row { display: flex; gap: 11px; }

.crm-mod .crm-timeline__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--crm-line-strong);
    margin-top: 5px;
    flex: none;
}

.crm-mod .crm-timeline__dot.is-latest { background: var(--crm-accent); }
.crm-mod .crm-timeline__text { font-size: 12.5px; }

.crm-mod .crm-timeline__meta {
    font-size: 11px;
    color: var(--crm-muted-2);
    margin-top: 3px;
}

.crm-mod .crm-composer {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    padding: 10px 12px;
    border: 1px solid var(--crm-line-2);
    border-radius: 9px;
    background: var(--crm-surface);
}

.crm-mod .crm-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    text-align: left;
}

.crm-mod .crm-form .form-field--wide { grid-column: span 2; }

.crm-mod .crm-form .modal-label {
    display: block;
    margin-bottom: 5px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--crm-muted-2);
}

.crm-mod .crm-form .input-field-modern { width: 100%; }
.crm-mod .crm-form textarea.input-field-modern { min-height: 80px; }

.crm-mod .crm-composer__input {
    flex: 1;
    font-size: 12.5px;
    color: var(--crm-muted);
    border: 0;
    background: none;
}

/* ============================================================
   REPORT — tabelle semplici, grafico a barre e funnel
   ============================================================ */

/* Tabella "di lettura" del Report: niente griglia a colonne fisse come
   .crm-table, qui le colonne le decide il contenuto. */
.crm-mod .crm-tbl {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 12px;
}

.crm-mod .crm-tbl th {
    padding: 8px 6px;
    border-bottom: 1px solid var(--crm-line-2);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--crm-muted-2);
    white-space: nowrap;
}

.crm-mod .crm-tbl td {
    padding: 8px 6px;
    border-bottom: 1px solid var(--crm-line);
    color: var(--crm-text-2);
}

.crm-mod .crm-tbl tr:last-child td { border-bottom: 0; }
.crm-mod .crm-tbl .is-num { text-align: right; font-family: var(--crm-mono); }
.crm-mod .crm-tbl .is-mid { text-align: center; }
.crm-mod .crm-tbl .is-strong { color: var(--crm-text); font-weight: 600; }

.crm-mod .crm-report-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.crm-mod .crm-report-filters label {
    display: block;
    margin-bottom: 5px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--crm-muted-2);
}

.crm-mod .crm-report-filters .input-field-modern { width: 100%; }

.crm-mod .crm-report-sec { margin-top: 22px; }

/* Il report nel modale largo. Testata con titolo e filtri sulla stessa riga,
   poi due colonne: cio' che si legge a colpo d'occhio a sinistra, le
   classifiche a destra. Sotto i 900px torna in colonna unica. */
.crm-mod.crm-report { padding: 22px 26px 18px; }

.crm-mod .crm-report__testa {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.crm-mod .crm-report__titolo {
    margin: 4px 0 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--crm-text);
}

.crm-mod .crm-report__testa .crm-report-filters {
    margin-bottom: 0;
    grid-template-columns: 180px 150px 150px;
}

.crm-mod .crm-report__colonne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 32px;
}

.crm-mod .crm-report__piede {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid var(--crm-line);
}

@media (max-width: 900px) {
    .crm-mod .crm-report__colonne { grid-template-columns: minmax(0, 1fr); }
    .crm-mod .crm-report__testa .crm-report-filters { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); width: 100%; }
}

.crm-mod .crm-funnel__row {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 9px;
}

.crm-mod .crm-funnel__name {
    width: 96px;
    font-size: 12px;
    color: var(--crm-text-2);
}

.crm-mod .crm-funnel__track {
    flex: 1;
    height: 18px;
    border-radius: var(--crm-r-xs);
    background: var(--crm-line-3);
    overflow: hidden;
}

.crm-mod .crm-funnel__fill {
    height: 100%;
    opacity: 0.6;
    background: var(--crm-stage);
}

.crm-mod .crm-funnel__val {
    width: 74px;
    text-align: right;
    font-family: var(--crm-mono);
    font-size: 11.5px;
}

/* ============================================================
   UTILITY
   ============================================================ */

.crm-mod .crm-mono { font-family: var(--crm-mono); }

/* campo vuoto: un trattino, mai la stringa "N/A" */
.crm-mod .crm-dash { font-family: var(--crm-mono); color: var(--crm-faint); }

.crm-mod .crm-late { color: var(--crm-bad); }
.crm-mod .crm-ok { color: var(--crm-ok); }

/* stato vuoto: una riga di testo, non un contenitore grande */
.crm-mod .crm-empty {
    font-size: 12px;
    color: var(--crm-muted-2);
    padding: 8px 2px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ── Mobile ──
   Non e' la scrivania rimpicciolita: i comandi arrivano al minimo di tocco e
   la toolbar scorre invece di impilarsi in una parete alta mezzo schermo.
   La soglia e' la stessa dell'app (viewport.js e i CSS mobile). */
@media (max-width: 768px) {
    .crm-mod .crm-chip,
    .crm-mod .crm-btn { min-height: var(--touch-min); }
    .crm-mod .crm-chip--sm,
    .crm-mod .crm-btn--sm { min-height: 36px; }

    .crm-mod .crm-seg__item {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
    }

    .crm-mod .crm-toolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .crm-mod .crm-toolbar::-webkit-scrollbar { display: none; }

    /* In una toolbar che scorre lo spaziatore mangerebbe la corsa. */
    .crm-mod .crm-toolbar .crm-spacer { display: none; }
    .crm-mod .crm-search { flex: 0 0 200px; }

    /* La coda: il titolo sopra, i comandi sotto a tutta larghezza. */
    .crm-mod .crm-queue__row { flex-wrap: wrap; }
    .crm-mod .crm-queue__body { flex: 1 1 100%; }
    .crm-mod .crm-queue__actions { flex: 1 1 100%; }
    .crm-mod .crm-queue__actions .crm-btn,
    .crm-mod .crm-queue__actions .crm-chip { flex: 1; justify-content: center; }

    /* Una colonna kanban per riga: a meta' schermo sarebbero illeggibili. */
    .crm-mod .crm-board__col { flex: 1 1 100%; }
    .crm-mod .crm-form { grid-template-columns: 1fr; }
    .crm-mod .crm-form .form-field--wide { grid-column: span 1; }
    .crm-mod .crm-kv { grid-template-columns: 92px 1fr; }
}

@media (max-width: 1440px) {
    .crm-mod .crm-table--contacts {
        --crm-cols: minmax(140px, 2fr) 92px minmax(118px, 1.4fr) 104px 58px 104px 24px;
    }
    .crm-mod .crm-table--deals {
        --crm-cols: minmax(130px, 2fr) minmax(104px, 1.3fr) 140px 86px 54px 78px 90px;
    }
}

/* ── Il perché accanto al campo, e cosa manca a questa scheda ──
   PROD lo faceva gia' in Impostazioni (.imp-riga__aiuto): una
   riga piccola sotto l'etichetta che dice a cosa serve il campo.
   Qui la stessa cosa nel drawer, con i testi che arrivano da
   core/referto-spiegazioni.mjs — gli stessi con cui il referto
   conta le lacune. */

.crm-mod .crm-form .modal-aiuto {
    display: block;
    margin: -2px 0 6px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--crm-muted-2);
}

/* Il campo che una voce del referto ha nominato. Un filo a
   sinistra, non un fondo colorato: sono anche sei campi su una
   scheda, e sei rettangoli accesi diventerebbero un allarme. */
.crm-mod .crm-form .form-field--manca {
    padding-left: 10px;
    border-left: 2px solid var(--warning);
}

.crm-manca {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin-bottom: 4px;
    padding: 10px 12px;
    border: 1px solid var(--crm-line);
    border-left: 3px solid var(--warning);
    border-radius: 8px;
    background: var(--crm-surface-2);
}

.crm-manca.is-bloccante { border-left-color: var(--error); }

.crm-manca__tit {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-strong);
}

.crm-manca__voci {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Ogni voce e' un bottone che porta il fuoco sul campo: dire cosa
   manca e lasciar cercare dove si scrive sarebbe meta' lavoro. */
.crm-manca__voce {
    padding: 2px 8px;
    border: 1px solid var(--crm-line-2);
    border-radius: 999px;
    background: transparent;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
}

.crm-manca__voce:hover {
    border-color: var(--text-secondary);
    color: var(--text-strong);
}