/**
 * NFC e QR.
 *
 * Come per la fedelta', questo foglio e' piccolo e `mytap-nfc.css` resta:
 * veste ancora la finestra dei chip (`#deskNfcGroupOverlay` e tutto quello che
 * ci finisce dentro) e la versione per il telefono, che non sono state rifatte.
 * Quando toccherA' a loro, quel foglio si svuota e questo cresce.
 */

/* ── Le due schermate ──────────────────────────────────────────────── */

.nfc-schermata { display: none; }
.nfc-schermata.attiva { display: block; }

/* Stesso cappello della fedelta': sono schede da leggere e campi da compilare,
   non una galleria. Vedi il perche' esteso in `fedelta.css`. */
.nfc-sezione { max-width: 1240px; }

.nfc-indietro { display: inline-block; margin-bottom: 10px; font-size: 12.5px; }

.nfc-numeri { margin-bottom: 16px; }

/* ── La scheda di un ordine ────────────────────────────────────────── */

.nfc-ordine { padding: 16px; }
.nfc-ordine + .nfc-ordine { margin-top: 11px; }

.nfc-ordine-testa { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.nfc-ordine-nome { margin: 0; flex: 1; min-width: 0; }
.nfc-ordine-riga { margin-bottom: 12px; }

/**
 * Le pastiglie che non si vedono.
 *
 * `deskNfcToggleBatch()` ne copia il contenuto dentro la finestra che apre,
 * quindi devono **esistere nel documento**; nella scheda pero' direbbero una
 * terza volta gli stessi tre numeri. `display: none` basta: la funzione legge
 * `innerHTML`, che c'e' lo stesso.
 */
/* ⚠ Ci vogliono un identificatore e due classi: `mytap-nfc.css` ha
   `#nfc-wrap .nfc-stat-pills { display: flex }`, che batte una classe sola. Le
   pastiglie si vedevano ancora, e nella scheda dicono una terza volta gli stessi
   tre numeri. Trovato guardando la schermata a fianco del disegno. */
.mt-dashboard #nfc-wrap .nfc-pastiglie-nascoste { display: none !important; }

/* ── I gruppi e le loro destinazioni ───────────────────────────────── */

/**
 * LE RIGHE DEL DISEGNO (`.tn` e `.tn.l1`).
 *
 * Una riga per il gruppo, e **sotto, rientrata e tratteggiata**, dove porta.
 * Prima la destinazione stava a destra della riga del gruppo: si accorciava a
 * poche parole su schermi normali, e soprattutto non si capiva che fosse una
 * cosa modificabile. Cosi' invece si legge come «questo gruppo → va li'», con
 * la sua azione a destra.
 */
.nfc-riga {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 13px;
    border: 1px solid var(--nk-line);
    border-radius: var(--nk-r-sm);
    background: var(--nk-ink);
    margin-bottom: 6px;
    font-size: 13px;
}
.nfc-riga.l1 { margin-left: 22px; }
.nfc-riga.tratteggiata { border-style: dashed; background: var(--nk-ink-2); }
.nfc-riga.tratteggiata.vuota { border-color: color-mix(in oklch, #FF9500 34%, var(--nk-line)); }

.nfc-riga-m {
    margin-left: auto; text-align: right; white-space: nowrap; flex-shrink: 0;
    font-size: 11.5px; color: var(--nk-muted);
}
.nfc-riga-m b { color: var(--nk-accent); font-weight: 600; }

.nfc-riga-url {
    font-family: var(--nk-mono); font-size: 12px; color: var(--nk-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.nfc-riga-manca { color: var(--nk-warn-ink); font-weight: 550; font-size: 12px; }

/* ⚠ LO SPAZIO SOTTO E' CAMBIATO QUANDO I BOTTONI SONO SALITI IN CIMA.
   [25/08/2026] Stavano in fondo alla scheda, e sotto non c'era niente: bastava
   il margine sopra. Adesso sotto c'e' la prima riga di un gruppo, ed erano
   appiccicati — il titolare l'ha visto subito. ⇒ Quando un blocco si sposta,
   i suoi margini vanno riguardati: erano giusti per il posto di prima. */
.nfc-ordine-azioni { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; margin-bottom: 16px; }

@media (max-width: 560px) {
    /* Rientrare di 22px su uno schermo da 375 mangia lo spazio che serve
       all'indirizzo, che e' la cosa da leggere. */
    .nfc-riga.l1 { margin-left: 10px; }
}

/* ── «Serve un altro ordine?» ──────────────────────────────────────── */

.nfc-altro {
    border: 1.5px dashed var(--nk-line-2);
    border-radius: var(--nk-r-md);
    padding: 20px;
    text-align: center;
    margin: 11px 0 14px;
}
.nfc-altro .nk-cd { margin: 5px 0 11px; }

/* ── La schermata del QR ───────────────────────────────────────────── */

.nfc-qr-card { padding: 18px; }
.nfc-qr-riga { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }

.nfc-qr-quadro {
    width: 148px; height: 148px; flex-shrink: 0;
    border: 1px solid var(--nk-line);
    border-radius: var(--nk-r-sm);
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 8px;
}
.nfc-qr-quadro > div { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.nfc-qr-quadro img, .nfc-qr-quadro canvas, .nfc-qr-quadro svg { max-width: 100%; height: auto; }

.nfc-qr-corpo { flex: 1; min-width: 230px; }
.nfc-qr-testa { display: flex; align-items: center; gap: 8px; }
.nfc-qr-nome { margin: 0; flex: 1; min-width: 0; }
.nfc-qr-dove { margin: 4px 0 12px; }
.nfc-qr-dove a { color: var(--nk-accent); font-family: var(--nk-mono); font-size: 11.5px; }

.nfc-qr-scelta { margin-bottom: 10px; }

.nfc-qr-cambia { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.nfc-qr-cambia .nk-inp { flex: 1; min-width: 170px; }
.nfc-qr-cambia .nk-btn { flex-shrink: 0; }

.nfc-qr-azioni { display: flex; gap: 7px; flex-wrap: wrap; }

/* ── La tabella dei chip ───────────────────────────────────────────── */

/* Vive dentro la finestra che si apre da «Vedi i N chip», quindi lo spazio se
   lo prende tutto: e' li' che si lavora. */
.nfc-chip-schermata { width: 100%; }
.nfc-chip-schermata .nk-hr { margin-bottom: 12px; }

.nfc-chip-barra { display: flex; gap: 9px; margin-bottom: 12px; flex-wrap: wrap; }
.nfc-chip-cerca { flex: 1; min-width: 200px; max-width: 380px; }

/**
 * La barra delle azioni sui selezionati.
 *
 * Sta **sopra** la tabella e non in fondo: e' la conferma che qualcosa e'
 * selezionato, e va vista prima di premere, non dopo aver scorso trenta righe.
 */
.nfc-chip-azioni {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    padding: 10px 14px; margin-bottom: 11px;
    border: 1px solid color-mix(in oklch, var(--nk-accent) 30%, var(--nk-line));
    background: color-mix(in oklch, var(--nk-accent) 6%, var(--nk-ink));
    border-radius: var(--nk-r-sm);
    font-size: 13px;
}
.nfc-chip-azioni[hidden] { display: none; }
.nfc-chip-sp { flex: 1; }

.nfc-chip-tabella { padding: 0; overflow: hidden; }

.nfc-td-spunta { width: 34px; }
.nfc-td-spunta input { width: 15px; height: 15px; accent-color: var(--nk-accent); cursor: pointer; margin: 0; }
.nfc-td-azione { text-align: right; white-space: nowrap; }
.nfc-td-dove { max-width: 260px; }

.nfc-chip-schermata .nk-tbl tbody tr:hover td { background: var(--nk-ink); }

/* Un chip spento resta leggibile ma si vede che e' spento: sparire dall'elenco
   sarebbe peggio, perche' e' proprio quello che uno cerca per riaccenderlo. */
.nfc-riga-spenta td { opacity: .55; }
.nfc-spento-eti {
    display: inline-block; margin-left: 7px;
    font-size: 10.5px; font-weight: 600; color: var(--nk-danger);
}

.nfc-gruppo-tag { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nfc-gruppo-tag i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.nfc-dove {
    font-family: var(--nk-mono); font-size: 11px;
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Da dove viene la destinazione: se non e' del chip, e' del gruppo o
   dell'ordine. Senza questa riga uno crede che sia stata impostata li'. */
.nfc-dove-da { display: block; font-size: 10px; color: var(--nk-muted-2); margin-top: 1px; }
.nfc-manca { color: var(--nk-warn-ink); font-weight: 550; }
.nfc-vuoto { color: var(--nk-muted-2); }

.nfc-chip-nessuno { padding: 22px; text-align: center; font-size: 13px; color: var(--nk-muted); }
.nfc-chip-nessuno[hidden] { display: none; }

.nfc-chip-dest { margin-top: 11px; }
.nfc-chip-dest[hidden] { display: none; }
.nfc-chip-dest [data-nfc-riga][hidden] { display: none; }
.nfc-chip-dest-azioni { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nfc-chip-dest-azioni .nk-esito { margin-right: 0; }

/* ── Il foglio vecchio, che arriva anche qui ───────────────────────── */

/**
 * ⚠ `mytap-nfc.css` veste per **classe generica** dentro `#nfc-wrap`, e alcune
 * di quelle classi le tengo apposta perche' le cerca il JavaScript
 * (`.qr-page-select` la usa `nfcHydrateBatchCardQuicklinks()`, `.nfcv-ext-input`
 * e `.nfcv-type-btn` le usa `nfcQrToggleMode()`). Senza queste righe i campi
 * nuovi escono col vestito vecchio: e' la stessa trappola gia' presa due volte
 * in fedelta', e qui era annunciata.
 */
/* ⚠ `.nfc-chip-schermata` va elencata a parte e **non basta `#nfc-wrap`**: la
   tabella dei chip vive dentro `#deskNfcGroupOverlay`, che nel markup sta
   **prima** di `#nfc-wrap` e quindi ne resta fuori. Trovato leggendo dove
   `deskNfcToggleBatch()` sposta il pannello. */
.mt-dashboard .nfc-chip-schermata .nk-inp,
.mt-dashboard #nfc-wrap .nfc-schermata .nk-inp {
    width: 100%;
    background: var(--nk-ink) !important;
    border: 1px solid var(--nk-line) !important;
    color: var(--nk-paper) !important;
    border-radius: var(--nk-r-sm) !important;
    padding: 10px 13px !important;
    margin: 0 !important;
    font-family: var(--nk-font) !important;
    font-size: 13px !important;
    max-width: none !important;
    height: auto !important;
}
.mt-dashboard .nfc-chip-schermata .nk-inp:focus,
.mt-dashboard #nfc-wrap .nfc-schermata .nk-inp:focus {
    border-color: color-mix(in oklch, var(--nk-accent) 55%, var(--nk-line)) !important;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--nk-accent) 14%, transparent);
    outline: 0;
}

/* Le pastiglie del tipo di destinazione: `.nfcv-type-btn` resta perche' la cerca
   il JavaScript, ma il vestito e' quello del kit. */
.mt-dashboard .nfc-chip-schermata .fedelta-modo,
.mt-dashboard #nfc-wrap .nfc-schermata .fedelta-modo {
    flex: 0 0 auto !important;
    border-radius: 999px !important;
    padding: 7px 15px !important;
    font-size: 12.5px !important;
    font-family: var(--nk-font) !important;
    height: auto !important;
    width: auto !important;
}

@media (max-width: 640px) {
    .nfc-qr-quadro { width: 128px; height: 128px; }
    .nfc-dest-eti { margin-left: 0; }
}