/* ============================================================
   BOARD → LISTA — il vestito comune delle schermate telefono
   ============================================================
   Un kanban su un telefono non si legge: le colonne diventano
   scorrimento laterale e la board smette di dire dove sono le cose.
   Al suo posto, ovunque: una lista di righe, un rail di pastiglie
   che filtra per stato, e un foglio dal basso al tocco.

   Il vocabolario nasce dalla schermata Ordini Attivi di Produzione,
   dove e' stato disegnato e provato per primo. Qui e' senza dominio:
   Produzione, Acquisti, CRM lo compongono ciascuno coi propri dati
   e tengono nel proprio foglio solo cio' che e' loro soltanto — la
   barra di distribuzione fra stati, le righe articolo.

   Nessun colore cablato. Le superfici arrivano dai token --pr-* di
   css/mobile-atelier.css, quindi la pagina segue chiaro e scuro; il
   colore dello stato arriva a runtime come --c, iniettata inline dal
   modulo che legge la configurazione del tenant.

   Vale solo sotto i 768px: index.html lo carica con media attribute.
   ============================================================ */

/* ── Guscio della pagina ──
   box-sizing dichiarato qui e non ereditato: senza, ogni min-height si
   somma al padding e una riga da 54px ne misura 79. overflow-x: clip
   perche' la pagina deve restare ferma — niente si trascina di lato. */
.mb-page,
.mb-page *,
.mb-sheet,
.mb-sheet * {
    box-sizing: border-box;
}

.mb-page {
    max-width: 100%;
    overflow-x: clip;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Ogni figlio con altezza propria va tenuto fuori dalla compressione:
   in una colonna flex la barra da 8px e i contenitori con overflow
   nascosto vengono schiacciati a zero dal contenuto che li segue. */
.mb-page > * {
    flex: none;
}

.mb-intro {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.mb-intro__s {
    flex: 1;
    min-width: 0;
    font-size: var(--pr-fs-micro);
    color: var(--pr-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Riga ricerca ──
   La casella si allarga, tutto cio' che le sta accanto — un filtro, un
   tasto — resta della sua misura. */
.mb-searchrow {
    display: flex;
    gap: 8px;
}

.mb-searchrow > *:not(.mb-search) {
    flex: none;
}

/* 48 e non 46: accanto c'e' il filtro, e ogni bottone dentro .main-content
   parte da 48 per css/workspace-responsive.css. Due misure vicine ma diverse
   sulla stessa riga si vedono. */
.mb-search {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: var(--pr-r-tile);
    background: var(--pr-surface);
    border: 1px solid var(--pr-line);
    color: var(--pr-text-3);
    font-size: var(--pr-fs-body);
}

.mb-search input {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    outline: 0;
    color: var(--pr-ink);
    font: inherit;
}

/* ── Rail degli stati ──
   Il rail scorre dentro la sua larghezza, mai fuori dal gutter: i margini
   negativi che lo facevano sbordare rendevano scorrevole l'intera schermata,
   e la pagina si spostava invece di restare ferma. */
.mb-railwrap {
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

.mb-rail {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow-x: auto;
    padding: 1px 34px 1px 0;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.mb-rail::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.mb-railwrap::after {
    content: '';
    position: absolute;
    inset: 0 0 0 auto;
    width: 44px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--pr-bg) 62%);
}

.mb-rail__hint {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: var(--pr-r-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pr-surface);
    border: 1px solid var(--pr-line);
    color: var(--pr-text-2);
    font-size: 9px;
    pointer-events: none;
}

.mb-chip {
    flex: none;
    scroll-snap-align: start;
    height: var(--pr-tap);
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    border-radius: var(--pr-r-pill);
    white-space: nowrap;
    background: var(--pr-surface);
    border: 1px solid var(--pr-line);
    color: var(--pr-text-2);
    font-size: var(--pr-fs-meta);
    font-weight: 600;
    cursor: pointer;
}

.mb-chip--on {
    background: var(--pr-ink);
    border-color: var(--pr-ink);
    color: var(--pr-bg);
}

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

.mb-chip__num {
    flex: none;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pr-r-pill);
    background: var(--pr-bg);
    color: var(--pr-ink);
    font-size: var(--pr-fs-micro);
    font-weight: 700;
}

.mb-chip--on .mb-chip__num {
    background: color-mix(in srgb, var(--pr-bg) 22%, transparent);
    color: var(--pr-bg);
}

/* ── Filtro: un quadrato accanto alla ricerca ──
   Sul telefono il filtro sta in linea con la casella di ricerca, non su una
   riga sua: una barra a tutta larghezza che dice "Filtra / Ordina" costa
   quanto costerebbe mostrare due ordini in piu'. Restano l'icona, il numero
   dei filtri attivi e la X che li azzera — la scritta la spiega il pannello. */
.mb-searchrow .pf-wrap {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
}

.mb-searchrow .pf-trigger-btn {
    position: relative;
    flex: none;
    width: 46px;
    height: 46px;
    justify-content: center;
    padding: 0;
    border-color: var(--pr-line);
    border-radius: var(--pr-r-tile);
    background: var(--pr-surface);
    color: var(--pr-ink);
    box-shadow: var(--pr-shadow);
    font-size: var(--pr-fs-body);
}

/* Il badge e' un fratello della scritta: si nascondono per esclusione, non per
   posizione, cosi' l'ordine dentro il bottone puo' cambiare senza rompere. */
.mb-searchrow .pf-trigger-btn > span:not(.pf-active-badge),
.mb-searchrow .pf-trigger-btn .pf-caret {
    display: none;
}

.mb-searchrow .pf-trigger-btn .fa-sliders-h {
    font-size: var(--pr-fs-body);
}

.mb-searchrow .pf-active-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    padding: 1px 5px;
    background: var(--pr-accent);
    color: var(--pr-on-accent);
}

.mb-searchrow .pf-reset-btn {
    flex: none;
    width: 46px;
    height: 46px;
    border-color: var(--pr-line);
    border-radius: var(--pr-r-tile);
    background: var(--pr-surface);
    color: var(--pr-text-2);
    box-shadow: var(--pr-shadow);
    font-size: var(--pr-fs-body);
}

/* Ancorato a destra: il trigger sta all'estremita' della riga, e un pannello
   che parte da li' verso destra finisce fuori schermo. L'altezza e' limitata
   perche' l'elenco degli stati cresce con la configurazione del tenant. */
.mb-searchrow .pf-panel {
    left: auto;
    right: 0;
    min-width: 240px;
    max-width: calc(100vw - 2 * var(--pr-gutter));
    max-height: 60vh;
    overflow-y: auto;
    border-color: var(--pr-line);
    border-radius: var(--pr-r-card);
    background: var(--pr-surface);
}

.mb-searchrow .pf-panel-sep {
    background: var(--pr-line);
}

.mb-searchrow .pf-panel-title {
    color: var(--pr-text-3);
}

.mb-searchrow .pf-row-lbl {
    color: var(--pr-ink);
}

/* ── Lista compatta ── */
.mb-list {
    background: var(--pr-surface);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-card);
    overflow: hidden;
}

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

.mb-row {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 54px;
    padding: 12px 13px 12px 0;
    border-bottom: 1px solid var(--pr-line);
    cursor: pointer;
}

.mb-row:last-child {
    border-bottom: 0;
}

.mb-row:active {
    background: var(--pr-bg);
}

/* Fuori dallo stato scelto col rail. La ricerca universale nasconde per conto
   suo con .hidden-search (filtraUniversale in script.js). */
.mb-row--fuori-fase {
    display: none;
}

.mb-row__accent {
    flex: none;
    width: 3px;
    min-width: 3px;
    height: 36px;
    border-radius: 0 3px 3px 0;
    background: var(--c, var(--pr-text-3));
}

.mb-row__body {
    flex: 1;
    min-width: 0;
}

.mb-row__top {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.mb-row__client {
    flex: 1;
    min-width: 0;
    font-size: var(--pr-fs-card-title);
    font-weight: 700;
    letter-spacing: var(--pr-ls-tight);
    line-height: 17px;
    color: var(--pr-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Si stringe e non supera meta' riga. Con flex:none e nessun tetto, un valore
   lungo — una data che il modulo non e' riuscito a formattare, un importo in
   valuta — prendeva tutta la larghezza e schiacciava il titolo a zero: la riga
   restava, ma il nome spariva del tutto. Nessun campo deve poterne cancellare
   un altro. */
.mb-row__date {
    flex: 0 1 auto;
    max-width: 46%;
    line-height: 17px;
    font-size: var(--pr-fs-micro);
    font-weight: 700;
    color: var(--pr-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mb-row__date--urgent {
    color: var(--pr-danger);
}

.mb-row__date--empty {
    color: var(--pr-text-3);
}

.mb-row__bottom {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Una riga sola: titolo, meta e pastiglia sulla stessa linea. Serve dove
   l'elenco e' lungo e ogni voce dice poco — la copertura ha 27 materiali, e a
   due linee ciascuno diventano tre schermate di pollice. */
.mb-row--1riga {
    min-height: 30px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.mb-row--1riga .mb-row__accent {
    height: 22px;
}

.mb-row--1riga .mb-row__body {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.mb-row--1riga .mb-row__top {
    flex: 1 1 auto;
    min-width: 0;
}

.mb-row--1riga .mb-row__bottom {
    margin-top: 0;
    flex: 0 1 auto;
    min-width: 0;
}

.mb-row--1riga .mb-row__meta {
    flex: 0 1 auto;
}

.mb-row__meta {
    flex: 1;
    min-width: 0;
    line-height: 13px;
    font-size: var(--pr-fs-micro);
    color: var(--pr-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Segnali brevi accanto alla meta: "estero", "misto". Non un badge — quelli
   stanno nel foglio — ma una parola che qualifica la riga. */
.mb-tag {
    flex: none;
    padding: 1px 6px;
    border-radius: var(--pr-r-pill);
    background: var(--pr-bg);
    border: 1px solid var(--pr-line);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: var(--pr-ls-micro);
    text-transform: uppercase;
    color: var(--pr-text-3);
}

.mb-tag--avviso {
    border-color: var(--pr-accent);
    color: var(--pr-accent);
}

/* ── Riga di periodo ──
   Indietro, avanti, "oggi" e l'intervallo che si sta guardando. Serve a ogni
   lista che copre un periodo invece di un insieme: una settimana di impegni,
   un mese di movimenti. Il tasto "oggi" e' una .mb-chip perche' e' esattamente
   quello — una pastiglia, alta quanto il dito. */
.mb-navrow {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mb-navrow__t {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: var(--pr-fs-card-title);
    font-weight: 700;
    letter-spacing: var(--pr-ls-tight);
    color: var(--pr-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mb-navrow .mb-iconbtn {
    background: var(--pr-surface);
}

/* ── Gruppo: un'intestazione e la sua lista ──
   Quando la lista non e' una sola — un giorno per volta, un deposito per volta
   — ogni blocco tiene insieme la sua intestazione e le sue righe. Il gap della
   pagina vale fra i blocchi, non dentro: qui serve il proprio. */
.mb-gruppo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mb-gruppo--fuori {
    display: none;
}

/* ── Stato vuoto ── */
.mb-empty {
    margin-top: 6px;
    padding: 28px 20px;
    text-align: center;
    background: var(--pr-surface);
    border: 1px dashed var(--pr-line);
    border-radius: var(--pr-r-card);
}

.mb-empty__t {
    font-size: var(--pr-fs-card-title);
    font-weight: 600;
    color: var(--pr-ink);
}

.mb-empty__s {
    margin-top: 5px;
    font-size: var(--pr-fs-meta);
    color: var(--pr-text-2);
}

/* ============================================================
   FOGLIO — dettaglio e scelta stato
   Il guscio (velo, pannello, maniglia, salita dal basso) e' quello
   di .pr-sheet in mobile-atelier.css: qui c'e' solo il contenuto.
   ============================================================ */

.mb-sheet {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
}

.mb-sheet--pieno {
    height: 92dvh;
    max-height: 92dvh;
    overflow: hidden;
}

.mb-sheet--picker {
    max-height: 86dvh;
    overflow: hidden;
}

.mb-sheet__head {
    flex: none;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pr-line);
}

.mb-sheet__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mb-sheet__ident {
    flex: 1;
    min-width: 0;
}

.mb-sheet__title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: var(--pr-ls-tight);
    color: var(--pr-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mb-sheet__sub {
    margin-top: 2px;
    font-size: var(--pr-fs-micro);
    font-weight: 600;
    color: var(--pr-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mb-iconbtn {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: var(--pr-r-ctl);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pr-bg);
    border: 1px solid var(--pr-line);
    color: var(--pr-ink);
    font-size: var(--pr-fs-body);
    cursor: pointer;
}

/* Pill dello stato corrente: piena del colore dello stato, come sul desktop. */
.mb-select {
    margin-top: 10px;
    width: 100%;
    height: var(--pr-tap);
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border: 0;
    border-radius: var(--pr-r-ctl);
    background: var(--c, var(--pr-text-3));
    color: var(--pr-on-accent);
    font-family: inherit;
    font-size: var(--pr-fs-body);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.mb-select__label {
    flex: 1;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mb-select__dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: var(--pr-r-pill);
    background: currentColor;
    opacity: 0.85;
}

.mb-select__caret {
    flex: none;
    font-size: 10px;
    opacity: 0.7;
}

/* Menu delle azioni: sostituisce la toolbar orizzontale del desktop. */
.mb-menu {
    position: absolute;
    top: 62px;
    right: var(--pr-gutter);
    width: 224px;
    z-index: 2;
    background: var(--pr-surface);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-tile);
    overflow: hidden;
    box-shadow: var(--pr-shadow-sheet);
}

.mb-menu[hidden] {
    display: none;
}

/* Il menu che E' il foglio, non una tendina appesa a un tasto.
   Senza questa variante resta `position: absolute` a 62px dall'alto e largo
   224: dentro un foglio che non ha nient'altro, il pannello si affloscia a
   pochi pixel e le voci galleggiano fuori — un foglio bianco che non si riesce
   ne' a leggere ne' a toccare. */
.mb-menu--pieno {
    position: static;
    width: auto;
    margin-top: 4px;
}

.mb-menu__item {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 0;
    border-bottom: 1px solid var(--pr-line);
    background: none;
    color: var(--pr-ink);
    font-family: inherit;
    font-size: var(--pr-fs-body);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.mb-menu__item:last-child {
    border-bottom: 0;
}

.mb-menu__item--accent {
    color: var(--pr-accent);
}

.mb-menu__item--danger {
    color: var(--pr-danger);
}

.mb-sheet__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 13px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: none;
}

.mb-sheet__body > * {
    flex: none;
}

.mb-sheet__body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* ── Intestazione di sezione ── */
.mb-secline {
    display: flex;
    align-items: center;
    gap: 9px;
}

.mb-secline__t {
    font-size: var(--pr-fs-micro);
    font-weight: 700;
    letter-spacing: var(--pr-ls-micro);
    text-transform: uppercase;
    color: var(--pr-text-3);
}

.mb-secline__rule {
    flex: 1;
    height: 1px;
    background: var(--pr-line);
}

.mb-badge {
    padding: 5px 10px;
    border-radius: var(--pr-r-pill);
    white-space: nowrap;
    background: var(--pr-bg);
    border: 1px solid var(--pr-line);
    font-size: var(--pr-fs-micro);
    font-weight: 700;
    color: var(--pr-text-2);
}

/* ── Pill di stato compatta, dentro le righe di dettaglio ── */
.mb-state {
    flex: none;
    max-width: 62%;
    height: 22px;
    padding: 0 9px;
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--c, var(--pr-text-2));
    background: color-mix(in srgb, var(--c, var(--pr-text-3)) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--c, var(--pr-text-3)) 30%, transparent);
}

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

/* ── Picker degli stati ── */
.mb-picker__list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-top: 11px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    scrollbar-width: none;
}

.mb-picker__list::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.mb-picker__row {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    border-radius: 13px;
    cursor: pointer;
    text-align: left;
    background: var(--pr-bg);
    border: 1px solid var(--pr-line);
    font-family: inherit;
}

.mb-picker__row--on {
    background: color-mix(in srgb, var(--c, var(--pr-accent)) 12%, transparent);
    border-color: var(--c, var(--pr-accent));
}

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

.mb-picker__testo {
    flex: 1;
    min-width: 0;
}

.mb-picker__label {
    display: block;
    font-size: var(--pr-fs-body);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--pr-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mb-picker__row--on .mb-picker__label {
    color: var(--c, var(--pr-accent));
}

.mb-picker__macro {
    display: block;
    margin-top: 2px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pr-text-2);
}

.mb-picker__check {
    flex: none;
    font-size: var(--pr-fs-body);
    font-weight: 700;
    color: var(--c, var(--pr-accent));
    opacity: 0;
}

.mb-picker__row--on .mb-picker__check {
    opacity: 1;
}

/* ── Righe articolo ── */
/* ── Scheda ordine: quello che il gestionale sa dell'ordine ──
   Coppie in colonna e non affiancate: su 375px due colonne lascerebbero al
   valore trenta caratteri, e «Riqualificazione rotatoria SS1» diventerebbe tre
   puntini. Stesso contenitore delle righe articolo, cosi' le due sezioni del
   foglio si somigliano. */
.mb-scheda {
    background: var(--pr-surface);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-tile);
    overflow: hidden;
}

.mb-kv {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 13px;
    border-bottom: 1px solid var(--pr-line);
}

.mb-kv:last-child { border-bottom: 0; }

.mb-kv__k {
    flex: none;
    min-width: 92px;
    font-size: var(--pr-fs-micro);
    font-weight: 700;
    letter-spacing: var(--pr-ls-micro);
    text-transform: uppercase;
    color: var(--pr-text-3);
}

.mb-kv__v {
    flex: 1;
    min-width: 0;
    font-size: var(--pr-fs-body);
    font-weight: 600;
    color: var(--pr-ink);
    overflow-wrap: anywhere;
}

/* Il testo dell'ordine e' spesso un elenco: gli a capo che il Connector ha
   conservato vanno rispettati, o le tre condizioni diventano una frase sola. */
.mb-kv--prosa { align-items: flex-start; }
.mb-kv--prosa .mb-kv__v {
    font-weight: 500;
    white-space: pre-line;
}


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

.mb-art {
    display: flex;
    align-items: flex-start;
    padding: 12px 13px;
    border-bottom: 1px solid var(--pr-line);
    cursor: pointer;
}

.mb-art:last-child {
    border-bottom: 0;
}

.mb-art:active {
    background: var(--pr-bg);
}

.mb-art__body {
    flex: 1;
    min-width: 0;
}

.mb-art__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.mb-art__code {
    flex: 1;
    min-width: 0;
    font-size: var(--pr-fs-body);
    line-height: 18px;
    font-weight: 700;
    letter-spacing: var(--pr-ls-tight);
    color: var(--pr-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* La quantita' e' il dato che l'operatore cerca: sta a destra e piu' grande
   del codice, non incolonnata in mezzo agli altri campi. */
.mb-art__qty {
    flex: none;
    font-size: 17px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: var(--pr-ls-tight);
    color: var(--pr-ink);
}

.mb-art__qty small {
    margin-left: 3px;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: var(--pr-ls-micro);
    color: var(--pr-text-3);
}

/* Mai troncata: e' la descrizione con cui si riconosce il pezzo in officina. */
.mb-art__desc {
    margin: 4px 0 0;
    font-size: var(--pr-fs-meta);
    line-height: 16px;
    color: var(--pr-text-2);
    text-wrap: pretty;
}

.mb-art__foot {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mb-art__dates {
    margin-left: auto;
    flex: none;
    font-size: 9.5px;
    line-height: 22px;
    font-weight: 600;
    color: var(--pr-text-2);
    white-space: nowrap;
}

/* La nota di lavorazione del gestionale: montaggio, tagli, composizione.
   Sul telefono il tocco sulla riga cambia gia' lo stato, quindi la nota ha il
   suo bottoncino. Chiusa non occupa niente. */
.mb-art__nota-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--pr-line);
    border-radius: 999px;
    background: var(--pr-bg);
    color: var(--pr-text-2);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: var(--pr-ls-micro);
}

.mb-art__nota {
    margin: 10px 0 0;
    padding: 9px 11px;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-tile);
    background: var(--pr-bg);
    color: var(--pr-text-2);
    font-size: var(--pr-fs-meta);
    line-height: 16px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.mb-art__nota[hidden] {
    display: none;
}

/* ── Fatti: etichetta a sinistra, valore a destra ──
   Il foglio di una schermata che non e' Produzione non ha righe articolo da
   elencare: ha quattro o cinque campi da leggere. Stessa scatola di .mb-arts,
   dentro coppie invece che card. L'etichetta ha una larghezza sua e il valore
   va a capo: un nome di prodotto lungo non deve spingere fuori il suo nome. */
.mb-fatti {
    background: var(--pr-surface);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-tile);
    overflow: hidden;
}

.mb-fatto {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-height: 42px;
    padding: 10px 13px;
    border-bottom: 1px solid var(--pr-line);
}

.mb-fatto:last-child {
    border-bottom: 0;
}

.mb-fatto__k {
    flex: none;
    width: 34%;
    font-size: var(--pr-fs-micro);
    font-weight: 700;
    letter-spacing: var(--pr-ls-micro);
    text-transform: uppercase;
    color: var(--pr-text-3);
}

.mb-fatto__v {
    flex: 1;
    min-width: 0;
    font-size: var(--pr-fs-meta);
    font-weight: 600;
    color: var(--pr-ink);
    text-wrap: pretty;
}

.mb-fatto__v--vuoto {
    font-weight: 500;
    color: var(--pr-text-3);
}

/* Il comando in fondo a una riga di fatti. Non e' una .mb-tag: quella e'
   un'etichetta alta tredici pixel, e dentro un foglio — che sta fuori da
   .main-content, dove workspace-responsive alza i bersagli — resterebbe tale.
   Un tasto che cancella un allegato non puo' essere alto tredici pixel. */
.mb-fatto__azione {
    flex: none;
    width: var(--pr-tap);
    height: var(--pr-tap);
    margin: -10px -8px -10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: var(--pr-text-2);
    font-size: var(--pr-fs-body);
    cursor: pointer;
}

.mb-fatto__azione--danger {
    color: var(--pr-danger);
}

/* ── L'albero degli allegati ──
   Cartelle in <details> (summary al display di serie, flex sul div dentro:
   vedi dettagli-pieghevoli) e file in righe mb-fatto. Ogni livello rientra. */
.mb-albero__cartella {
    border-bottom: 1px solid var(--pr-line);
}

.mb-albero__riga {
    list-style: none;
    padding: 0;
}

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

.mb-albero__riga-in {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 13px 8px calc(13px + var(--albero-livello, 0) * 16px);
}

.mb-albero__icona {
    flex: none;
    width: 18px;
    text-align: center;
    color: var(--pr-text-3);
}

.mb-albero__icona.is-cartella {
    color: var(--warning);
}

.mb-albero__cartella[open] > .mb-albero__riga .mb-albero__icona.is-cartella::before {
    content: "\f07c";
}

.mb-albero__nome {
    flex: 1;
    min-width: 0;
    font-size: var(--pr-fs-meta);
    font-weight: 700;
    color: var(--pr-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mb-albero__conta {
    flex: none;
    font-size: var(--pr-fs-micro);
    font-weight: 700;
    color: var(--pr-text-3);
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--pr-surface);
}

.mb-albero__file {
    align-items: center;
    padding-left: calc(13px + var(--albero-livello, 0) * 16px);
}

.mb-albero__dentro .mb-albero__file {
    padding-left: calc(29px + var(--albero-livello, 0) * 16px);
}

.mb-albero__file.is-mail .mb-albero__icona {
    color: var(--pr-accent);
}

.mb-albero__testo {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.mb-albero__testo a {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mb-albero__sotto {
    font-size: var(--pr-fs-micro);
    font-weight: 500;
    color: var(--pr-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mb-albero__vuota {
    margin: 0;
    padding: 6px 13px 10px calc(29px + var(--albero-livello, 0) * 16px);
    font-size: var(--pr-fs-micro);
    color: var(--pr-text-3);
    font-style: italic;
}

/* ── Sezione che si apre ──
   Un foglio che contiene un record intero — storico, allegati, preventivo,
   promemoria — non ci sta disteso: su 375px sarebbero sei schermate di
   scorrimento prima dell'ultimo campo. Ogni parte si apre da sola, e quella
   che serve piu' spesso parte aperta. Il cappello e' la .mb-secline, cosi'
   una sezione chiusa e una intestazione semplice si somigliano. */
.mb-piega > summary {
    list-style: none;
    cursor: pointer;
    min-height: var(--pr-tap);
}

.mb-piega > summary::-webkit-details-marker {
    display: none;
}

.mb-piega__caret {
    flex: none;
    font-size: 10px;
    color: var(--pr-text-3);
    transition: transform 0.16s ease;
}

.mb-piega[open] > summary .mb-piega__caret {
    transform: rotate(180deg);
}

.mb-piega__corpo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .mb-piega__caret {
        transition: none;
    }
}

/* ── Campi ──
   16px sul controllo non e' una scelta tipografica: sotto quella misura iPhone
   ingrandisce la pagina appena il campo prende il fuoco, e il foglio si sposta
   sotto le dita mentre si scrive. */
.mb-campo {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mb-campo__l {
    font-size: var(--pr-fs-micro);
    font-weight: 700;
    letter-spacing: var(--pr-ls-micro);
    text-transform: uppercase;
    color: var(--pr-text-3);
}

.mb-campo input,
.mb-campo select,
.mb-campo textarea {
    width: 100%;
    min-height: var(--pr-tap);
    padding: 10px 12px;
    box-sizing: border-box;
    border-radius: var(--pr-r-ctl);
    border: 1px solid var(--pr-line);
    background: var(--pr-bg);
    color: var(--pr-ink);
    font-family: inherit;
    font-size: 16px;
}

.mb-campo textarea {
    min-height: 92px;
    line-height: 1.4;
    resize: vertical;
}

.mb-campo input:focus,
.mb-campo select:focus,
.mb-campo textarea:focus {
    outline: none;
    border-color: var(--pr-accent);
}

/* Due campi corti in fila: prezzo e valuta, sconto e giorni. Sotto i 340px
   tornano in colonna — a quel punto un campo per riga si legge meglio di due
   che non ci stanno. */
.mb-campi2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 340px) {
    .mb-campi2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Due comandi in fila: annulla e conferma, carico e scarico. Stessa soglia dei
   campi — sotto i 340px due tasti affiancati hanno etichette che vanno a capo. */
.mb-azioni2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 340px) {
    .mb-azioni2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Un campo che sta da solo, senza etichetta sopra: una ricerca, una nota. Le
   stesse misure di .mb-campo input — 16px inclusi, o iOS ingrandisce la pagina
   al fuoco e la schermata si sposta sotto le dita. */
.mb-input {
    width: 100%;
    min-height: var(--pr-tap);
    padding: 10px 12px;
    box-sizing: border-box;
    border-radius: var(--pr-r-ctl);
    border: 1px solid var(--pr-line);
    background: var(--pr-bg);
    color: var(--pr-ink);
    font-family: inherit;
    font-size: 16px;
}

.mb-input:focus {
    outline: none;
    border-color: var(--pr-accent);
}

/* Una riga di testo che spiega lo stato di quello che ha sopra. Non e' .mb-nota,
   che e' una voce di storico con un autore e una data. */
.mb-avviso {
    font-size: var(--pr-fs-meta);
    color: var(--pr-text-3);
    padding: 2px 2px 0;
}

/* Il comando che toglie qualcosa: si distingue senza gridare, perche' nei fogli
   sta accanto a comandi normali e non deve attirare il pollice. */
.mb-azione--pericolo {
    border-color: color-mix(in srgb, var(--pr-danger) 45%, transparent);
    color: var(--pr-danger);
}

/* ── Riga di storico ──
   Una nota o un'email nel thread. Non e' .mb-art: li' contano codice e
   quantita', qui contano chi ha scritto e quando. */
.mb-nota {
    padding: 11px 13px;
    border-bottom: 1px solid var(--pr-line);
}

.mb-nota:last-child {
    border-bottom: 0;
}

.mb-nota__top {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.mb-nota__chi {
    flex: 1;
    min-width: 0;
    font-size: var(--pr-fs-meta);
    font-weight: 700;
    color: var(--pr-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mb-nota__quando {
    flex: none;
    font-size: var(--pr-fs-micro);
    font-weight: 600;
    color: var(--pr-text-3);
}

.mb-nota__testo {
    margin: 5px 0 0;
    font-size: var(--pr-fs-meta);
    line-height: 1.45;
    color: var(--pr-text-2);
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

/* Una mail e' chiusa finche' non la si apre: il summary tiene il display di
   serie (vedi dettagli-pieghevoli), il marker si toglie, e la freccia la fa
   il bordo che cambia quando e' aperta. */
.mb-nota--mail {
    padding: 0;
}

.mb-nota__riga {
    list-style: none;
    padding: 11px 13px;
    cursor: pointer;
}

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

.mb-nota__sotto {
    margin-top: 2px;
    font-size: var(--pr-fs-micro);
    color: var(--pr-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mb-nota--mail[open] > .mb-nota__riga {
    border-bottom: 1px dashed var(--pr-line);
}

.mb-nota--mail > .mb-nota__testo {
    margin: 0;
    padding: 9px 13px 12px;
}

/* ── Azione a tutta larghezza ──
   Il tasto che porta altrove: il dettaglio completo, una voce nuova. Non e'
   .mb-select, che porta addosso il colore di uno stato ed e' il comando di
   quello soltanto. */
.mb-azione {
    width: 100%;
    min-height: var(--pr-tap);
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    cursor: pointer;
    border-radius: var(--pr-r-ctl);
    background: var(--pr-surface);
    border: 1px solid var(--pr-line);
    color: var(--pr-ink);
    font-family: inherit;
    font-size: var(--pr-fs-body);
    font-weight: 700;
}

.mb-azione--accento {
    background: var(--pr-accent);
    border-color: var(--pr-accent);
    color: var(--pr-on-accent);
}

@media (prefers-reduced-motion: reduce) {
    .mb-row:active,
    .mb-art:active {
        background: none;
    }
}