/* ============================================================
   PRODUZIONE · ORDINI ATTIVI — quel che e' solo suo
   ============================================================
   Il grosso del vestito — guscio, rail, riga di lista, foglio,
   picker degli stati — sta in css/mobile-board.css, dove lo
   condivide con le altre schermate che erano kanban. Qui resta
   cio' che nessun altro modulo ha:

   · la BARRA DI DISTRIBUZIONE. In Produzione un ordine e' spalmato
     su piu' stati contemporaneamente — tre articoli collaudati, sei
     imballati — e la barra segmentata e' cio' che sostituisce le
     colonne del kanban. Altrove una card sta in una fase sola e la
     barra non avrebbe niente da dire.

   Nessun colore cablato: il colore dello stato arriva come --c,
   iniettata inline da produzione-ordini-mobile.js leggendo
   window.listaStati. Vale solo sotto i 768px.
   ============================================================ */

/* ── Barra di distribuzione ──
   Sostituisce le colonne del kanban: quanti articoli in quale stato. */
.po-dist {
    flex: none;
    display: flex;
    height: 8px;
    gap: 2px;
    border-radius: var(--pr-r-pill);
    overflow: hidden;
}

.po-dist--mini {
    width: 56px;
    height: 5px;
    gap: 1.5px;
}

.po-dist span {
    background: var(--c, var(--pr-text-3));
}

.po-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.po-legend__item {
    flex: none;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--pr-text-2);
}

.po-legend__dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: var(--pr-r-pill);
    background: var(--c, var(--pr-text-3));
}

/* ── Scadenze, sotto la lista ──
   Erano una tab a se'; dal 14 settembre 2026 stanno nella stessa
   schermata degli ordini, chiuse: si aprono quando servono, e il
   numero sulla testa dice se c'e' qualcosa dentro senza aprire. Dentro
   ci sono il rail dei filtri e le righe di produzione-scadenze-mobile.js. */
.mb-page--scadenze {
    margin-top: 14px;
}

.mb-scadenze {
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-card);
    background: var(--pr-surface);
    overflow: hidden;
}

.mb-scadenze__testa {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--pr-tap);
    padding: 0 14px;
    font-size: var(--pr-fs-card-title);
    font-weight: 700;
    color: var(--pr-ink);
    cursor: pointer;
}

.mb-scadenze__testa::-webkit-details-marker {
    display: none;
}

.mb-scadenze__testa > i:first-child {
    color: var(--pr-text-3);
}

.mb-scadenze__n {
    margin-left: auto;
    min-width: 22px;
    padding: 2px 8px;
    border-radius: var(--pr-r-pill);
    background: var(--pr-bg);
    color: var(--pr-text-2);
    font-size: var(--pr-fs-micro);
    font-weight: 700;
    text-align: center;
}

.mb-scadenze__n:empty {
    display: none;
}

.mb-scadenze__freccia {
    font-size: var(--pr-fs-micro);
    color: var(--pr-text-3);
    transition: transform 0.2s var(--pr-ease);
}

.mb-scadenze[open] .mb-scadenze__freccia {
    transform: rotate(180deg);
}

.mb-scadenze > .mb-intro,
.mb-scadenze > #scadenze-filtri {
    padding: 0 12px 10px;
}

.mb-scadenze > #scadenze-list {
    padding: 0 12px 12px;
}