/* PROD — Magazzini
 *
 * Il modulo e' cresciuto con gli stili scritti in linea nel markup e in blocchi
 * <style> iniettati a runtime: 340 `style="` e 16 iniezioni. Nessuno dei due si
 * puo' tematizzare, sovrascrivere o cercare, e su un tema chiaro un colore
 * cablato in linea non ruota con gli altri.
 *
 * Questo file e' il posto dove quel debito rientra, un pezzo per volta. Si
 * comincia dal pannello degli ordini arrivati, che nasce qui e non ha mai avuto
 * stili in linea.
 *
 * Regole della catena CSS: il file e' registrato in `STYLE_FILES` di sw.js e
 * porta il `?v=` in index.html — un foglio fuori da STYLE_FILES resta quello
 * vecchio per sempre, ed e' la storia di progetti-module.css.
 */

/* ── Ordini arrivati, in testa ai Movimenti ──────────────────────────────────
 *
 * Verde perche' e' merce che c'e' gia' in azienda: non un allarme, un invito.
 * Il colore esce da color-mix sul token, non da un esadecimale, cosi' segue il
 * tema come tutto il resto. */
.mag-arrivi {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    margin-bottom: 14px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--success) 9%, var(--panel-bg));
    border: 1px solid color-mix(in srgb, var(--success) 38%, transparent);
}

.mag-arrivi__head {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--success);
}

.mag-arrivi__riga {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 9px 12px;
    border-radius: 12px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
}

/* min-width:0 e' obbligatorio, non decorativo: senza, un nome fornitore lungo
   pretende la sua larghezza intrinseca e spinge il tasto Carica fuori dal
   riquadro invece di farsi troncare. */
.mag-arrivi__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 220px;
}

.mag-arrivi__ord {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mag-arrivi__meta {
    font-size: 0.74rem;
    color: var(--text-muted);
}

/* I codici che non si riconoscono: si dicono, non si nascondono. Un carico
   mancato in silenzio si scambia per "non e' arrivato niente". */
.mag-arrivi__ignote {
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    color: var(--warning);
    cursor: help;
}

.mag-arrivi__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--success) 42%, transparent);
    background: color-mix(in srgb, var(--success) 14%, transparent);
    color: var(--success);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}

.mag-arrivi__btn:hover {
    background: color-mix(in srgb, var(--success) 22%, transparent);
}

/* ── La conferma di un arrivo ─────────────────────────────────────────────── */

.mag-arrivo__box {
    max-width: 620px;
    width: 100%;
}

.mag-arrivo__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-strong);
}

.mag-arrivo__hint {
    margin: 0 0 12px;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.mag-arrivo__list {
    max-height: 55vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mag-arrivo__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
}

.mag-arrivo__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.mag-arrivo__mat {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mag-arrivo__cod {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Quando il gestionale non riporta l'evasa, la quantita' proposta e' l'ordinata:
   e' un numero dedotto e chi conferma deve saperlo. */
.mag-arrivo__dedotta {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    color: var(--warning);
    cursor: help;
    flex-shrink: 0;
}

.mag-arrivo__qty {
    width: 84px;
    padding: 7px 8px;
    border-radius: 8px;
    border: 1px solid var(--panel-border-mid);
    background: var(--panel-bg);
    color: var(--text-strong);
    font-size: 0.86rem;
    text-align: right;
    flex-shrink: 0;
}

.mag-arrivo__ignote {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
    font-size: 0.78rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mag-arrivo__ignote strong {
    color: var(--warning);
}

.mag-arrivo__ignote ul {
    margin: 2px 0 0;
    padding-left: 18px;
}

@media (max-width: 768px) {
    .mag-arrivi {
        padding: 12px;
        border-radius: 14px;
    }

    .mag-arrivi__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── La sorgente della Copertura, e il piano ────────────────────────────────
 *
 * Due pastiglie e un tasto sulla stessa riga: la sorgente e' una scelta, non un
 * titolo, e una riga in piu' per dire «sorgente» costerebbe 46px per
 * un'informazione che le pastiglie danno gia'. */
.cop-fonte {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.cop-piano-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 7px 13px;
    border-radius: 10px;
    border: 1px solid var(--panel-border-mid);
    background: var(--panel-bg);
    color: var(--text-secondary);
    font-size: 0.79rem;
    font-weight: 700;
    cursor: pointer;
}

.cop-piano-btn:hover {
    background: var(--panel-mid);
    color: var(--text-strong);
}

.mag-piano__box {
    max-width: 720px;
    width: 100%;
}

.mag-piano__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-strong);
}

.mag-piano__hint {
    margin: 0 0 12px;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* La tabella puo' avere quattro colonne e nomi lunghi: scorre dentro il suo
   riquadro invece di allargare il modale oltre lo schermo. */
.mag-piano__scroll {
    max-height: 55vh;
    overflow: auto;
}

.mag-piano__tab {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.mag-piano__tab th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 9px 10px;
    background: var(--panel-mid);
    border-bottom: 1px solid var(--panel-border);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: left;
}

.mag-piano__mese {
    text-align: right;
    white-space: nowrap;
}

.mag-piano__tab td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--panel-border);
    vertical-align: middle;
}

/* La colonna resta una CELLA: un `td` con `display: flex` esce dal modello
   della tabella — il browser gli mette intorno una cella anonima e il bordo
   della riga finisce disegnato attorno al contenuto invece che alla riga, che
   si legge come un filo che si spezza in quella colonna. Le due righe di testo
   si impilano dentro. */
.mag-piano__art { min-width: 0; }

.mag-piano__art-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mag-piano__nome {
    color: var(--text-strong);
    font-weight: 600;
}

.mag-piano__cod {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.mag-piano__qty {
    width: 84px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--panel-border-mid);
    background: var(--panel-bg);
    color: var(--text-strong);
    font-size: 0.85rem;
    text-align: right;
}

@media (max-width: 768px) {
    .cop-piano-btn {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .mag-piano__qty {
        width: 64px;
    }
}

/* ── I gesti che muovono piu' righe insieme ─────────────────────────────────
 *
 * Carico multiplo e Inventario hanno la stessa forma — un elenco, una quantita'
 * per riga — e quindi lo stesso vestito. Le differenze sono due sole: il carico
 * ha la spunta, l'inventario ha il segno della differenza. */
.mag-batch__box {
    max-width: 720px;
    width: 100%;
}

.mag-batch__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-strong);
}

.mag-batch__hint {
    margin: 0 0 12px;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.mag-batch__campi {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* min-width: 0 e width: 100% sul campo: in flexbox un input non scende sotto la
   sua larghezza intrinseca (~200px), e due campi affiancati pretenderebbero
   piu' spazio di quanto il modale ne abbia — il secondo finirebbe fuori. */
.mag-batch__campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 160px;
    min-width: 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.mag-batch__campo--largo {
    flex: 2 1 240px;
}

.mag-batch__select,
.mag-batch__input,
.mag-batch__cerca {
    width: 100%;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid var(--panel-border-mid);
    background: var(--panel-bg);
    color: var(--text-strong);
    font-size: 0.86rem;
    font-weight: 400;
    text-transform: none;
}

.mag-batch__cerca {
    margin-bottom: 8px;
}

.mag-batch__scroll {
    max-height: 48vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mag-batch__row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border-radius: 11px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    cursor: pointer;
}

.mag-batch__row[hidden] {
    display: none;
}

.mag-batch__check {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.mag-batch__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.mag-batch__nome {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mag-batch__meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Il segno della differenza, prima di applicare: si vede quale conteggio si
   sposta e di quanto, invece di scoprirlo dopo nello storico. */
.mag-batch__delta {
    flex-shrink: 0;
    min-width: 52px;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.mag-batch__delta.is-su {
    color: var(--success);
}

.mag-batch__delta.is-giu {
    color: var(--error);
}

.mag-batch__qty {
    width: 84px;
    flex-shrink: 0;
    padding: 7px 8px;
    border-radius: 8px;
    border: 1px solid var(--panel-border-mid);
    background: var(--panel-bg);
    color: var(--text-strong);
    font-size: 0.86rem;
    text-align: right;
}

.mag-batch__totale {
    margin-right: auto;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .mag-batch__qty {
        width: 66px;
    }

    .mag-batch__totale {
        width: 100%;
        margin-bottom: 8px;
    }
}

.mag-batch__vuoto {
    padding: 14px 12px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ── Le pastiglie sopra lo storico ──────────────────────────────────────────
 *
 * Le causali c'erano gia' su ogni riga, ma leggerle una per una in una colonna
 * non risponde a «quanti pezzi ho buttato questo mese». Il conteggio a fianco
 * si', e premerla filtra. */
.mag-mov-chips {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.mag-mov-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--panel-border);
    background: var(--panel-bg);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.mag-mov-chip:hover {
    background: var(--panel-mid);
    color: var(--text-strong);
}

.mag-mov-chip.is-active {
    background: var(--accent);
    border-color: var(--panel-border-mid);
    color: var(--text-strong);
}

/* Il numero e' la ragione per cui la pastiglia esiste: si legge staccato. */
.mag-mov-chip__n {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--panel-mid);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.mag-mov-chip.is-active .mag-mov-chip__n {
    background: color-mix(in srgb, var(--text-strong) 16%, transparent);
    color: var(--text-strong);
}

@media (max-width: 768px) {
    .mag-mov-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .mag-mov-chips::-webkit-scrollbar {
        display: none;
    }
}