/**
 * Clienti.
 *
 * Qui c'e' solo quello che nel kit non c'e' perche' e' di questa schermata:
 * la tabella con la selezione multipla, la barra dei selezionati, la fascia
 * dei filtri sopra la tabella e il riquadro per trascinare il file.
 * Schede, bottoni, pastiglie, campi, note, tabella base e stato vuoto vengono
 * tutti da nosumo-kit.css.
 */

/**
 * `app.css`, dentro la parte per il telefono, ha
 * `#dCrm-wrap { display: none !important }`: li' il CRM del computer veniva
 * spento perche' sul telefono si mostrava l'altro contenitore, `#mob-crm-wrap`.
 * Adesso il markup e' uno solo, quindi quella riga spegnerebbe la sezione sul
 * telefono e basta. Va riacceso qui.
 *
 * Si riaccende invece di togliere la riga da `app.css` perche' quel blocco
 * spegne anche `.desk-home` e `#dAn-wrap`, che sono ancora doppi: quando
 * toccheranno a loro, la riga se ne andra' insieme al resto.
 *
 * Il selettore porta l'identificatore e non solo la classe: `#dCrm-wrap` da
 * solo vince su `.clienti-wrap` anche essendo tutti e due `!important`, perche'
 * un identificatore pesa piu' di una classe. Scritto senza, la sezione restava
 * spenta sul telefono e sembrava che la regola non ci fosse.
 */
#dCrm-wrap.clienti-wrap { display: block !important; }
.clienti-wrap { padding: 0 0 22px; }

@media (max-width: 900px) { .clienti-wrap { padding: 0 16px 22px; } }
@media (max-width: 640px) { .clienti-wrap { padding: 0 15px 22px; } }

/* ── Ricerca ───────────────────────────────────────────────────────── */

.clienti-barra { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.clienti-barra .nk-srch { max-width: 360px; }

@media (max-width: 640px) { .clienti-barra .nk-srch { max-width: none; } }

/* ── La barra dei selezionati ──────────────────────────────────────── */

/* Compare solo quando c'e' davvero una selezione: una barra che dice
   «0 selezionati» con dei bottoni spenti e' peggio del vuoto. */
.clienti-scelti {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 11px;
    border-radius: var(--nk-r-md);
    border: 1px solid color-mix(in oklch, var(--nk-accent) 24%, var(--nk-line));
    background: color-mix(in oklch, var(--nk-accent) 6%, var(--nk-ink));
    font-size: 13px;
}
.clienti-scelti[hidden] { display: none; }
.clienti-scelti-n { font-size: 13px; }
.clienti-scelti-n b { font-weight: 650; }
.nk-sp { flex: 1; }

/* ── La tabella ────────────────────────────────────────────────────── */

/* La scheda non ha padding: la tabella arriva ai bordi, come nel disegno,
   dove la fascia dei filtri e' separata da una riga e non da uno spazio. */
.clienti-tabella-card { padding: 0; overflow: hidden; }

.clienti-filtri {
    display: flex; gap: 7px; flex-wrap: wrap;
    padding: 12px 14px;
    border-bottom: 1px solid var(--nk-line);
}
.clienti-filtri .nk-chip { cursor: pointer; border-width: 1px; font-family: var(--nk-font); }

.clienti-tbl { font-size: 12.5px; }
.clienti-tbl th { position: sticky; top: 0; z-index: 1; }
.clienti-tbl tbody tr:hover td { background: var(--nk-ink); }
.clienti-tbl td { vertical-align: middle; }

.clienti-col-spunta { width: 34px; text-align: center; }
.clienti-col-spunta input { width: 15px; height: 15px; accent-color: var(--nk-accent); cursor: pointer; margin: 0; }
.clienti-col-apri { text-align: right; white-space: nowrap; }

.clienti-recapito { font-size: 11.5px; color: var(--nk-muted); margin-top: 1px; }

/* Chi non si fa vivo da piu' di un mese: e' l'unica cosa che in questa tabella
   vale la pena far saltare all'occhio, ed e' il colore che usa il disegno. */
.clienti-fermo { color: var(--nk-warn-ink) !important; font-weight: 550; }

.clienti-riga.scelta td { background: color-mix(in oklch, var(--nk-accent) 6%, transparent); }

.clienti-niente { border: 0; border-radius: 0; background: transparent; padding: 30px 22px; }
.clienti-niente[hidden] { display: none; }

/* Detto in chiaro finche' non c'e' l'impaginazione: la query si ferma a 50 */
.clienti-troncato {
    padding: 11px 14px;
    border-top: 1px solid var(--nk-line);
    font-size: 11.5px;
    color: var(--nk-muted);
    background: var(--nk-ink);
}
.clienti-troncato b { color: var(--nk-paper); font-weight: 600; }

/* ── La scheda di un cliente, e lo scrivere a piu' clienti ─────────── */

/* Due viste a se', non due riquadri: nel disegno sono schermate intere.
   Niente larghezza massima, per lo stesso motivo di Pagine e dell'elenco: era
   copiata da `sedi.css`, dove ha senso perche' e' un elenco da leggere, e qui
   lasciava un margine vuoto a destra senza nessuna ragione. */
.cliente-wrap,
.invio-wrap { padding: 0 0 22px; }

@media (max-width: 900px) {
    .cliente-wrap, .invio-wrap { padding: 0 16px 22px; }
}
@media (max-width: 640px) {
    .cliente-wrap, .invio-wrap { padding: 0 15px 22px; }
}

/* Il ritorno all'elenco. Sta sopra il titolo perche' e' la prima cosa che si
   cerca quando si e' entrati in una scheda per sbaglio. */
.cliente-indietro { display: inline-block; margin-bottom: 12px; font-size: 12.5px; }

.cliente-azioni { display: flex; gap: 8px; flex-wrap: wrap; }

.cliente-wrap .nk-card + .nk-card,
.cliente-wrap .nk-gr + .nk-card { margin-top: 14px; }

.cliente-wrap textarea.nk-inp { min-height: 76px; }

.invio-canali { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 13px; }
.invio-canali .nk-chip { cursor: pointer; font-family: var(--nk-font); }

.invio-scorciatoie { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; }
.invio-scorciatoie .nk-chip { cursor: pointer; font-family: var(--nk-font); text-transform: none; letter-spacing: 0; }

.invio-fondo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.invio-fondo .nk-esito { margin-right: 0; }

/* ── Allegati ──────────────────────────────────────────────────────── */

.invio-allegati { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.invio-allegati:empty { display: none; }

.invio-file {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--nk-line); border-radius: 999px;
    background: var(--nk-ink);
    padding: 6px 11px;
    font-size: 11.5px; color: var(--nk-muted);
}
.invio-togli {
    border: 0; background: none; padding: 0;
    color: var(--nk-danger); cursor: pointer;
    font-size: 12px; line-height: 1;
    font-family: var(--nk-font);
}

/* Il campo file vero sta nascosto dentro l'etichetta: cosi' il bottone e' il
   nostro e non quello grigio del browser, che cambia da sistema a sistema. */
.invio-aggiungi { cursor: pointer; }

.invio-nosu { margin-top: 14px; }
.invio-nosu .nk-btn:disabled { opacity: .55; }

/* ── Le due schede in fondo ────────────────────────────────────────── */

.clienti-fondo { margin-top: 14px; }

.clienti-trascina {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 7px;
    width: 100%;
    padding: 18px 14px;
    border: 1.5px dashed var(--nk-line-2);
    border-radius: var(--nk-r-md);
    background: var(--nk-ink);
    font-family: var(--nk-font); font-size: 12.5px; color: var(--nk-muted);
    cursor: pointer;
    transition: border-color .18s, background .18s;
}
.clienti-trascina:hover {
    border-color: color-mix(in oklch, var(--nk-accent) 45%, var(--nk-line-2));
    background: color-mix(in oklch, var(--nk-accent) 4%, var(--nk-ink));
}
.clienti-file {
    font-family: var(--nk-mono); font-size: 10.5px;
    border: 1px solid var(--nk-line); border-radius: 999px;
    padding: 2px 9px; background: var(--nk-ink-2); color: var(--nk-muted);
}

/* ⇒ I GRUPPI: crearne uno e metterci i selezionati. [12/08/2026]
   Prima le pastiglie dei filtri mostravano gruppi che nessuno poteva creare. */
.clienti-gruppo-nuovo {
    cursor: pointer;
    border-style: dashed;
    font-family: var(--nk-font);
}

.clienti-gruppo { margin-bottom: 12px; }
.clienti-gruppo-riga {
    margin-top: 9px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
/* Il campo del nome non si stringe fino a non poterci scrivere: su un telefono
   una casella da 40 pixel e' una casella che non si usa. */
.clienti-gruppo-riga .nk-inp { min-width: 180px; flex: 1 1 180px; }