/* ============================================================
   PROD — Modulo Distinta Base
   ============================================================
   Namespace .bom-* isolato. Sostituisce le regole .kit-* / .kcfg-*
   sparse fra style-features.css e style-overlays.css: quando una
   schermata arriva qui, lo strato che la vestiva prima sparisce
   nello stesso commit, non gli si affianca.

   I token vivono in :root (scuro) e :root[data-tema="chiaro"],
   come in css/mobile-atelier.css: nell'app l'assenza di attributo
   vale scuro. Sono derivati da quelli canonici di style-core.css,
   non riscritti: il mockup e' stato disegnato sulla palette di
   PROD — il suo ink e il suo arancio coincidono a meno di un
   paio di punti con --text-strong e --accent — quindi bastano le
   derivazioni e il file resta senza un solo colore cablato.
   ============================================================ */

:root {
    /* ── Tipografia ──
       Il mockup usa un monospaziato per etichette tecniche, numeri
       e badge ("4 SEZ · 12 COMP", "OPERATIVO"). Stack di sistema:
       stessa texture, nessuna dipendenza di rete in piu'. */
    --bom-font-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;

    /* ── Raggi ── */
    --bom-r-lg: 16px;
    --bom-r-md: 11px;
    --bom-r-sm: 8px;

    /* ── Superfici ── */
    --bom-paper: var(--bg-base);
    --bom-surface: var(--panel-bg);
    --bom-tint: var(--panel-soft);
    --bom-tint-2: color-mix(in srgb, var(--text-strong) 5%, var(--panel-bg));

    /* ── Testo ── */
    --bom-ink: var(--text-strong);
    --bom-ink-2: color-mix(in srgb, var(--text-strong) 82%, transparent);
    --bom-muted: var(--text-secondary);
    --bom-muted-2: color-mix(in srgb, var(--text-strong) 52%, transparent);
    --bom-faint: var(--text-tertiary);
    --bom-faint-2: color-mix(in srgb, var(--text-strong) 28%, transparent);

    /* ── Linee ── */
    --bom-line: color-mix(in srgb, var(--text-strong) 13%, transparent);
    --bom-line-soft: color-mix(in srgb, var(--text-strong) 7%, transparent);

    /* ── Accento ──
       --bom-accent-text e' l'arancio usato come testo: sul fondo scuro
       regge quello pieno, sulla carta serve la versione profonda. La
       differenza la fa il blocco del tema chiaro qui sotto. */
    --bom-accent: var(--accent);
    --bom-accent-hover: var(--accent-strong);
    --bom-accent-text: var(--accent);
    --bom-accent-tint: color-mix(in srgb, var(--accent) 10%, var(--panel-bg));
    --bom-accent-tint-2: color-mix(in srgb, var(--accent) 5%, var(--panel-bg));
    --bom-accent-border: color-mix(in srgb, var(--accent) 40%, var(--panel-bg));
    --bom-accent-border-2: color-mix(in srgb, var(--accent) 58%, var(--panel-bg));

    /* ── Selezione piena ──
       Il blocco "selezionato" e' un'inversione, non un colore: in chiaro e'
       inchiostro su carta, in scuro carta su inchiostro. Deve ruotare col
       tema, altrimenti in scuro diventa chiaro su chiaro. Non confonderla
       con il blocco --bom-dark-* qui sotto, che invece non ruota mai. */
    --bom-sel-bg: var(--bom-ink);
    --bom-sel-ink: var(--bom-surface);
    --bom-sel-muted: color-mix(in srgb, var(--bom-surface) 62%, transparent);
    --bom-sel-veil: color-mix(in srgb, var(--bom-surface) 16%, transparent);

    /* ── Blocco scuro che non ruota col tema ──
       La testata del dettaglio resta scura anche in tema chiaro, come
       gia' fa la sidebar. Per questo prende i token della sidebar, che
       sono fissi nei due temi: quelli generali su un fondo che non
       ruota diventerebbero illeggibili. */
    --bom-dark: var(--sidebar-panel);
    --bom-dark-ink: var(--sidebar-ink);
    --bom-dark-muted: var(--sidebar-ink-soft);
    --bom-dark-faint: color-mix(in srgb, var(--sidebar-ink) 42%, transparent);
    --bom-dark-line: color-mix(in srgb, var(--sidebar-ink) 13%, transparent);
    --bom-dark-soft: color-mix(in srgb, var(--sidebar-ink) 13%, transparent);
    --bom-accent-light: color-mix(in srgb, var(--accent) 68%, var(--sidebar-ink));

    /* Il velo sotto il foglio del dettaglio. Deriva da --bom-dark e non
       dall'inchiostro generale perche' deve restare scuro in entrambi i temi:
       in tema scuro --bom-ink e' chiaro, e il velo diventerebbe una foschia. */
    --bom-scrim: color-mix(in srgb, var(--bom-dark) 58%, transparent);

    /* Etichetta sul bottone arancio. Il mockup la vuole bianca, ma
       sull'arancio di PROD da' 2,3:1 — sotto ogni soglia, e questi bottoni
       li premono operatori su tablet in officina. Con --accent-contrast sale
       a 7,45:1, ed e' anche quello che fa ogni altro bottone primario
       dell'app. Per il bianco del mockup: var(--sidebar-ink). */
    --bom-on-accent: var(--accent-contrast);
}

:root[data-tema="chiaro"] {
    --bom-accent-text: var(--accent-strong);
}

/* ============================================================
   SHELL — due pannelli affiancati dentro #contenitore-dati
   ============================================================ */

.bom-module {
    font-family: var(--font-ui);
    color: var(--bom-ink);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* display:flex qui sopra batterebbe [hidden], che e' solo una regola d'agente. */
.bom-module[hidden] {
    display: none;
}

.bom-module *,
.bom-module *::before,
.bom-module *::after {
    box-sizing: border-box;
}

.bom-split {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 392px minmax(0, 1fr);
    background: var(--bom-surface);
    border: 1px solid var(--bom-line);
    border-radius: var(--bom-r-lg);
    overflow: hidden;
}

/* Senza nessuna distinta i pannelli non hanno senso: lo stato vuoto prende
   tutta la superficie invece di stare nella colonna dell'elenco. */
.bom-split--vuoto {
    grid-template-columns: minmax(0, 1fr);
    background: var(--bom-paper);
}

.bom-split__list,
.bom-split__detail {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bom-split__list {
    border-right: 1px solid var(--bom-line);
    background: var(--bom-surface);
}

.bom-split__detail {
    background: var(--bom-paper);
}

.bom-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ============================================================
   PRIMITIVI — bottoni, badge, chip, checkbox, ricerca, etichette
   ============================================================ */

.bom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.87rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bom-btn--sm {
    height: 34px;
    padding: 0 14px;
    border-radius: 9px;
    font-size: 0.8rem;
}

.bom-btn--icon {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 10px;
    font-size: 1rem;
}

.bom-btn--primary {
    background: var(--bom-accent);
    color: var(--bom-on-accent);
}

.bom-btn--primary:hover {
    background: var(--bom-accent-hover);
}

.bom-btn--ghost {
    background: var(--bom-surface);
    border-color: var(--bom-line);
    color: var(--bom-ink-2);
}

.bom-btn--ghost:hover {
    border-color: var(--bom-ink);
    color: var(--bom-ink);
}

.bom-btn--on-dark {
    background: transparent;
    border-color: var(--bom-dark-line);
    color: var(--bom-dark-ink);
}

.bom-btn--on-dark:hover {
    background: var(--bom-dark-soft);
}

.bom-btn--danger {
    background: transparent;
    border-color: var(--bom-line);
    color: var(--error);
}

.bom-btn--danger:hover {
    border-color: var(--error);
}

.bom-btn:focus-visible,
.bom-chip:focus-visible,
.bom-icon-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.bom-icon-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    background: var(--bom-dark-soft);
    color: var(--bom-dark-ink);
    font-size: 0.95rem;
    cursor: pointer;
    flex: none;
}

.bom-icon-btn--light {
    background: transparent;
    border: 1px solid var(--bom-line);
    color: var(--bom-ink-2);
}

/* Per l'azione primaria quando c'e' posto solo per un'icona: e' l'arancione a
   dire che quel tasto e' l'unico che fa succedere qualcosa. */
.bom-icon-btn--accent {
    background: var(--bom-accent);
    color: var(--bom-on-accent);
}

.bom-icon-btn--accent:active {
    background: var(--bom-accent-hover);
}

.bom-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-family: var(--bom-font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.bom-badge--stato {
    background: var(--bom-sel-bg);
    color: var(--bom-sel-ink);
}

.bom-badge--stato-inverse {
    background: var(--bom-dark-ink);
    color: var(--bom-dark);
}

.bom-badge--config {
    border-color: var(--bom-accent);
    color: var(--bom-accent-text);
    background: transparent;
}

.bom-badge--muted {
    background: var(--bom-dark-soft);
    color: var(--bom-dark-ink);
}

.bom-chip {
    height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border: 1px solid var(--bom-line);
    border-radius: 13px;
    background: var(--bom-surface);
    color: var(--bom-ink-2);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bom-chip:hover {
    border-color: var(--bom-ink-2);
}

.bom-chip.is-active {
    background: var(--bom-sel-bg);
    border-color: var(--bom-sel-bg);
    color: var(--bom-sel-ink);
}

.bom-chip.is-warning {
    border-color: var(--bom-accent-border);
    background: var(--bom-accent-tint);
    color: var(--bom-accent-text);
}

.bom-chip.is-warning.is-active {
    background: var(--bom-accent);
    border-color: var(--bom-accent);
    color: var(--bom-on-accent);
}

.bom-check {
    width: 16px;
    height: 16px;
    flex: none;
    margin: 0;
    border: 1.5px solid var(--bom-faint-2);
    border-radius: 5px;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.bom-check::after {
    content: '';
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--bom-on-accent);
    border-bottom: 2px solid var(--bom-on-accent);
    transform: rotate(-45deg) translate(1px, -1px);
    opacity: 0;
}

.bom-check:checked {
    background: var(--bom-accent);
    border-color: var(--bom-accent);
}

.bom-check:checked::after {
    opacity: 1;
}

.bom-check:indeterminate {
    background: var(--bom-accent);
    border-color: var(--bom-accent);
}

.bom-check:indeterminate::after {
    opacity: 1;
    width: 9px;
    height: 0;
    border-left: none;
    transform: none;
}

.bom-check:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.bom-search {
    height: 36px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: var(--bom-tint-2);
}

.bom-search--outline {
    background: var(--bom-surface);
    border-color: var(--bom-line);
}

.bom-search:focus-within {
    border-color: var(--bom-accent-border-2);
}

.bom-search i {
    color: var(--bom-faint);
    font-size: 0.8rem;
    flex: none;
}

.bom-search input {
    width: 100%;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    color: var(--bom-ink);
    font-family: inherit;
    font-size: 0.85rem;
}

.bom-search input::placeholder {
    color: var(--bom-faint);
}

.bom-label {
    font-family: var(--bom-font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.16em;
    color: var(--bom-muted-2);
    text-transform: uppercase;
}

.bom-label--accent {
    color: var(--bom-accent-text);
}

.bom-label--on-dark {
    color: var(--bom-dark-faint);
}

.bom-mono {
    font-family: var(--bom-font-mono);
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--bom-muted-2);
}

.bom-field {
    width: 100%;
    height: 36px;
    padding: 0 11px;
    border: 1px solid var(--bom-line);
    border-radius: var(--bom-r-sm);
    background: var(--bom-surface);
    color: var(--bom-ink);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
}

.bom-field:focus {
    outline: none;
    border-color: var(--bom-accent);
}

.bom-field--select {
    background: var(--bom-tint-2);
    font-weight: 500;
    cursor: pointer;
}

.bom-empty {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 24px;
    text-align: center;
    color: var(--bom-muted);
}

.bom-empty i {
    font-size: 1.6rem;
    color: var(--bom-faint-2);
}

.bom-empty p {
    margin: 0;
    font-size: 0.88rem;
    max-width: 34ch;
    text-wrap: pretty;
}

/* ============================================================
   ELENCO — pannello di sinistra
   ============================================================ */

.bom-list-head {
    flex: none;
    padding: 20px 18px 14px;
    border-bottom: 1px solid var(--bom-line-soft);
}

.bom-list-head__top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bom-list-head__spacer {
    flex: 1;
}

.bom-list-title {
    margin: 0;
    font-family: var(--font-titolo);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--bom-ink);
}

/* Ricerca e filtri sulla stessa riga: il bottone e' alto quanto il campo. */
.bom-list-head__cerca {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.bom-list-head__cerca .bom-search {
    flex: 1;
    min-width: 0;
}

.bom-filtri-btn {
    position: relative;
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-content: center;
    border: 1px solid var(--bom-line);
    border-radius: 9px;
    background: var(--bom-surface);
    color: var(--bom-ink-2);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bom-filtri-btn:hover {
    border-color: var(--bom-ink-2);
}

.bom-filtri-btn.is-active {
    background: var(--bom-sel-bg);
    border-color: var(--bom-sel-bg);
    color: var(--bom-sel-ink);
}

.bom-filtri-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Un filtro acceso si vede col cassetto chiuso, o non si trova piu'. */
.bom-filtri-btn.has-dot::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bom-accent);
}

.bom-filter-drawer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid var(--bom-line);
    border-radius: var(--bom-r-md);
    background: var(--bom-tint-2);
}

.bom-filter-drawer[hidden] {
    display: none;
}

.bom-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bom-filter-drawer .bom-field {
    height: 32px;
    font-size: 0.78rem;
}

.bom-list {
    padding: 8px 10px 14px;
}

.bom-list__vuoto {
    margin: 18px 12px;
    font-size: 0.85rem;
    color: var(--bom-muted);
    text-wrap: pretty;
}

.bom-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border: none;
    border-radius: var(--bom-r-md);
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.14s ease;
}

.bom-row:hover {
    background: var(--bom-tint);
}

.bom-row.needs-config {
    background: var(--bom-accent-tint-2);
}

.bom-row.is-selected,
.bom-row.is-selected:hover,
.bom-row.needs-config.is-selected {
    background: var(--bom-sel-bg);
}

.bom-row:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.bom-row__avatar {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-content: center;
    border-radius: 9px;
    background: var(--bom-tint);
    color: var(--bom-ink);
    font-size: 0.92rem;
    font-weight: 700;
}

.bom-row__avatar.is-unconfigured {
    background: transparent;
    border: 1.5px dashed var(--bom-accent-border-2);
    color: var(--bom-accent-text);
}

.bom-row.is-selected .bom-row__avatar {
    background: var(--bom-sel-veil);
    border-color: var(--bom-sel-muted);
    color: var(--bom-sel-ink);
}

/* Il nome e' l'unica cosa scritta nella riga: sezioni e componenti si leggono
   nel pannello di destra, dove non sono ripetuti trenta volte. */
.bom-row__name {
    flex: 1;
    min-width: 0;
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--bom-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bom-row.is-selected .bom-row__name {
    color: var(--bom-sel-ink);
}

.bom-row__dot {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--bom-ink);
}

.bom-row__dot.is-warning {
    background: var(--bom-accent);
}

.bom-row.is-selected .bom-row__dot {
    background: var(--bom-sel-ink);
}

/* ============================================================
   DETTAGLIO — testata scura, statistiche, linguette, panoramica
   ============================================================ */

/* Una fascia sola: foto, identita' con i numeri sotto, azioni. Prima erano
   due bande separate da una linea e la testata valeva quasi 300px. */
.bom-detail-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 18px;
    row-gap: 12px;
    flex-wrap: wrap;
    padding: 16px 28px;
    background: var(--bom-dark);
    color: var(--bom-dark-ink);
}

.bom-detail-head__id {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* Nome, stato e data sulla stessa riga: erano incolonnati sotto un'etichetta
   "DISTINTA BASE" che ripeteva il titolo della pagina. */
.bom-detail-head__riga {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

/* h2 e non h1: la pagina ha gia' il suo titolo in topbar, e il blocco desktop
   di style-workspaces.css impone d'imperio il font-size di ogni h1. Qui il
   titolo grande e' il nome della distinta, quindi e' un titolo di sezione. */
.bom-detail-head__title {
    margin: 0;
    font-family: var(--font-titolo);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--bom-dark-ink);
    overflow-wrap: anywhere;
}

.bom-detail-head__meta {
    font-family: var(--bom-font-mono);
    font-size: 0.72rem;
    color: var(--bom-dark-muted);
}

.bom-detail-head__riga .bom-badge--config {
    border-color: var(--bom-accent-light);
    color: var(--bom-accent-light);
    align-self: center;
}

.bom-detail-head__riga .bom-badge {
    align-self: center;
}

.bom-detail-head__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

/* I numeri in linea sotto al nome: la cifra grande, l'etichetta accanto. */
.bom-stats {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 20px;
    row-gap: 6px;
}

.bom-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--bom-font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bom-dark-faint);
}

.bom-stat__value {
    font-family: var(--bom-font-mono);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--bom-dark-ink);
}

.bom-stat__value.is-accent {
    color: var(--bom-accent-light);
}

.bom-detail-head__cover {
    width: 104px;
    height: 62px;
    flex: none;
    display: grid;
    place-content: center;
    padding: 0 6px;
    border-radius: 10px;
    overflow: hidden;
    background: repeating-linear-gradient(
        135deg,
        var(--bom-dark-soft) 0 8px,
        transparent 8px 16px
    );
    font-family: var(--bom-font-mono);
    font-size: 0.58rem;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    color: var(--bom-dark-faint);
}

.bom-detail-head__cover.has-image {
    background: none;
}

.bom-detail-head__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* L'avviso di una distinta condivisa, sotto la testata. */
.bom-condivisa {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 28px 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--bom-tint-2);
    font-size: 0.8rem;
    color: var(--bom-muted);
}

.bom-condivisa i {
    color: var(--bom-accent);
}

.bom-detail-body {
    padding: 24px 28px 30px;
}

/* ── La lista dei componenti: una sezione dopo l'altra, una riga per voce ──
   Era una griglia a cinque colonne che si leggeva a zig-zag e senza ordine.
   In colonna, in ordine alfabetico, la quantita' si legge in verticale. */
.bom-specs + .bom-specs {
    margin-top: 26px;
}

.bom-sez-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bom-line);
}

.bom-sez-head__nome {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--font-titolo);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--bom-ink);
}

.bom-sez-head__n {
    flex: none;
    font-family: var(--bom-font-mono);
    font-size: 0.72rem;
    color: var(--bom-muted-2);
    white-space: nowrap;
}

.bom-specs__list {
    display: flex;
    flex-direction: column;
}

.bom-spec {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dotted var(--bom-line);
}

.bom-spec__name {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bom-ink);
}

.bom-spec__code {
    margin-left: 8px;
    font-family: var(--bom-font-mono);
    font-size: 0.72rem;
    color: var(--bom-muted-2);
}

.bom-spec__qty {
    flex: none;
    font-family: var(--bom-font-mono);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bom-ink-2);
}

.bom-empty--detail {
    background: var(--bom-paper);
}

/* ============================================================
   CONFIGURAZIONE — linguetta del dettaglio, non piu' una modale
   ============================================================ */

/* In configurazione la testata scura lascia il posto a una barra chiara:
   contano i campi da compilare, non i numeri della distinta. */
.bom-cfg-head {
    flex: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 28px 14px;
    background: var(--bom-surface);
}

.bom-cfg-head__title {
    font-family: var(--font-titolo);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--bom-ink);
}

/* Raggruppa badge, spaziatore e stato delle modifiche senza cambiare nulla:
   con display:contents restano item della barra, nello stesso ordine. Serve al
   telefono, dove il gruppo diventa una cella sola della griglia. */
.bom-cfg-head__stato {
    display: contents;
}

.bom-cfg-head__modifiche {
    font-family: var(--bom-font-mono);
    font-size: 0.74rem;
    color: var(--bom-accent-text);
}

.bom-cfg-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 26px;
    align-items: start;
}

.bom-cfg-col,
.bom-cfg-side {
    min-width: 0;
}

.bom-cfg-col__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}

.bom-cfg-side .bom-cfg-col__head:not(:first-child) {
    margin-top: 22px;
}

.bom-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--bom-line);
    border-radius: 13px;
    background: var(--bom-surface);
}

.bom-fieldrow {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.bom-hint {
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--bom-muted);
    text-wrap: pretty;
}

/* ── I comandi della modifica: in cima alla lista, e restano in vista ──
   Erano in fondo, sotto l'ultima sezione: con venti componenti bisognava
   scorrere per trovarli. Appiccicati al bordo alto del pannello che scorre. */
.bom-cfg-toolbar {
    position: sticky;
    top: -24px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -24px 0 14px;
    padding: 16px 0 12px;
    background: var(--bom-surface);
    border-bottom: 1px solid var(--bom-line);
}

/* In modifica il nome della sezione e' un campo che sembra il titolo. */
.bom-cfg-sez__name {
    flex: 1;
    min-width: 0;
    height: 34px;
    padding-left: 6px;
    border-color: transparent;
    background: transparent;
    font-family: var(--font-titolo);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--bom-ink);
}

.bom-cfg-sez__name:hover,
.bom-cfg-sez__name:focus {
    border-color: var(--bom-line);
    outline: none;
}

/* La riga compilabile: nome, quantita', unita', ingranaggio, togli. */
.bom-cfg-comp__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px 96px 28px 28px;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    border-bottom: 1px solid var(--bom-line-soft);
}

.bom-cfg-comp__name {
    height: 34px;
    border-color: transparent;
    background: transparent;
    font-size: 0.88rem;
}

.bom-cfg-comp__name:hover {
    border-color: var(--bom-line);
}

.bom-cfg-comp__row .bom-unit-dd .oe-dd-trigger {
    height: 32px;
    padding: 0 8px;
    border-color: transparent;
    border-radius: var(--bom-r-sm);
    background: var(--bom-tint-2);
    color: var(--bom-ink-2);
    font-family: var(--bom-font-mono);
    font-size: 0.76rem;
}

/* L'ingranaggio apre la finestra del componente. Il pallino dice che li'
   dentro c'e' qualcosa fuori dal solito — un articolo collegato, i lotti, una
   nota — senza doverla aprire. */
.bom-gear {
    position: relative;
    width: 28px;
    height: 28px;
    display: grid;
    place-content: center;
    border: none;
    border-radius: var(--bom-r-sm);
    background: none;
    color: var(--bom-muted-2);
    font-size: 0.82rem;
    cursor: pointer;
}

.bom-gear:hover {
    background: var(--bom-tint);
    color: var(--bom-ink);
}

.bom-gear.has-dot::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bom-accent);
}

.bom-fieldrow--wide {
    grid-column: 1 / -1;
}

/* ── La finestra del componente ── */
.bom-comp-modale {
    max-width: 640px;
    width: min(640px, 92vw);
}

.bom-comp-modale__titolo {
    margin: 0 0 4px;
    padding-right: 32px;
    font-family: var(--font-titolo);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--text-strong);
}

.bom-comp-modale__sotto {
    margin: 0 0 16px;
    font-family: var(--bom-font-mono);
    font-size: 0.76rem;
    color: var(--text-tertiary);
}

.bom-comp-modale__campi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px 18px;
}

.bom-fieldrow--spunta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.bom-fieldrow--spunta .bom-hint {
    flex-basis: 100%;
}

.bom-cfg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.bom-card + .bom-cfg-actions {
    margin-top: 12px;
}

.bom-cover-drop {
    width: 100%;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0;
    border: 1px dashed var(--bom-faint-2);
    border-radius: 9px;
    background: repeating-linear-gradient(
        135deg,
        var(--bom-tint-2) 0 9px,
        var(--bom-tint) 9px 18px
    );
    cursor: pointer;
    overflow: hidden;
}

.bom-cover-drop.has-image {
    border-style: solid;
    border-color: var(--bom-line);
    background: none;
}

.bom-cover-drop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bom-cover-drop__icon {
    width: 26px;
    height: 26px;
    display: grid;
    place-content: center;
    border-radius: var(--bom-r-sm);
    background: var(--bom-sel-bg);
    color: var(--bom-sel-ink);
    font-size: 0.72rem;
}

.bom-cover-drop__label {
    font-family: var(--bom-font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bom-muted-2);
}

/* ============================================================
   WORKSPACE DI COMPOSIZIONE — testata scura + due pannelli
   ============================================================ */

.bom-ws-head {
    flex: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    row-gap: 10px;
    padding: 14px 20px;
    background: var(--bom-dark);
    color: var(--bom-dark-ink);
    border-radius: var(--bom-r-lg) var(--bom-r-lg) 0 0;
}

.bom-ws-head__title {
    font-family: var(--font-titolo);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--bom-dark-ink);
}

.bom-ws-head__spacer {
    flex: 1;
}

.bom-stepper {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-right: 14px;
    margin-right: 2px;
    border-right: 1px solid var(--bom-dark-line);
}

.bom-stepper__btn {
    width: 30px;
    height: 30px;
    flex: none;
    display: grid;
    place-content: center;
    border: none;
    border-radius: var(--bom-r-sm);
    background: var(--bom-dark-soft);
    color: var(--bom-dark-ink);
    font-size: 0.95rem;
    cursor: pointer;
}

.bom-stepper__btn.is-add {
    background: var(--bom-accent);
    color: var(--bom-on-accent);
}

.bom-stepper__value {
    width: 52px;
    height: 30px;
    border: none;
    border-radius: var(--bom-r-sm);
    background: transparent;
    color: var(--bom-dark-ink);
    font-family: var(--bom-font-mono);
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
}

.bom-stepper__value:focus {
    outline: none;
    background: var(--bom-dark-soft);
}

/* La testata occupa tutta la larghezza: lo split sotto perde gli angoli alti. */
.bom-split--workspace {
    grid-template-columns: minmax(0, 1fr) 760px;
    border-radius: 0 0 var(--bom-r-lg) var(--bom-r-lg);
    border-top: none;
}

.bom-split--workspace .bom-split__list {
    background: var(--bom-paper);
}

.bom-split--workspace .bom-split__detail {
    background: var(--bom-surface);
}

/* ── Pannello magazzino ── */

.bom-wh-list {
    padding: 6px 14px 14px;
}

.bom-wh-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border: 1px solid var(--bom-line-soft);
    border-radius: var(--bom-r-md);
    background: var(--bom-surface);
}

.bom-wh-item.is-added {
    opacity: 0.55;
}

.bom-wh-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bom-wh-item__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bom-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bom-wh-item__stock {
    font-family: var(--bom-font-mono);
    font-size: 0.7rem;
    color: var(--bom-muted-2);
}

.bom-wh-item__stock.is-low {
    font-weight: 600;
    color: var(--bom-accent-text);
}

.bom-wh-item__add {
    width: 28px;
    height: 28px;
    flex: none;
    display: grid;
    place-content: center;
    border: none;
    border-radius: var(--bom-r-sm);
    background: var(--bom-sel-bg);
    color: var(--bom-sel-ink);
    font-size: 0.8rem;
    cursor: pointer;
}

.bom-wh-item__add:hover {
    background: var(--bom-accent);
    color: var(--bom-on-accent);
}

.bom-wh-item__added {
    flex: none;
    font-family: var(--bom-font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bom-muted-2);
    white-space: nowrap;
}

/* ── Pannello distinta ── */

.bom-comp-head {
    flex: none;
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 18px 22px 12px;
}

.bom-linkbtn {
    border: none;
    background: none;
    padding: 0;
    color: var(--bom-ink);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--bom-line);
}

.bom-linkbtn:hover {
    text-decoration-color: var(--bom-accent);
}

.bom-comp-body {
    padding: 0 22px 14px;
}

/* Griglia condivisa da intestazione e righe: se cambia una, cambia l'altra. */
.bom-comp-thead,
.bom-comp-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 92px 78px 92px 28px;
    align-items: center;
    gap: 10px;
}

.bom-comp-thead {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 32px;
    background: var(--bom-surface);
    border-bottom: 1px solid var(--bom-line-soft);
    font-family: var(--bom-font-mono);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--bom-muted-2);
}

.bom-comp-thead .num {
    text-align: right;
}

.bom-comp-section__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0 8px;
}

.bom-comp-row {
    min-height: 46px;
    padding: 4px 0;
    border-bottom: 1px solid var(--bom-line-soft);
}

.bom-comp-row.is-dimmed {
    opacity: 0.55;
}

.bom-comp-row__name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--bom-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bom-qty {
    height: 32px;
    width: 100%;
    padding: 0 9px;
    border: 1px solid var(--bom-line);
    border-radius: var(--bom-r-sm);
    background: var(--bom-surface);
    color: var(--bom-ink);
    font-family: var(--bom-font-mono);
    font-size: 0.82rem;
    text-align: right;
}

.bom-qty:focus {
    outline: none;
    border-color: var(--bom-accent);
    border-width: 1.5px;
    font-weight: 700;
}

.bom-unit {
    height: 32px;
    width: 100%;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: var(--bom-r-sm);
    background: var(--bom-tint-2);
    color: var(--bom-ink-2);
    font-family: var(--bom-font-mono);
    font-size: 0.76rem;
    cursor: pointer;
}

.bom-unit:focus {
    outline: none;
    border-color: var(--bom-accent);
}

.bom-comp-row__total {
    text-align: right;
    font-family: var(--bom-font-mono);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--bom-ink);
}

/* La riga non spuntata e' gia' attenuata dall'opacita': se anche il trattino
   parte dal grigio piu' chiaro sparisce del tutto. */
.bom-comp-row__total.is-empty {
    font-weight: 500;
    color: var(--bom-faint);
}

.bom-comp-row__remove {
    width: 28px;
    height: 28px;
    display: grid;
    place-content: center;
    border: none;
    border-radius: var(--bom-r-sm);
    background: none;
    color: var(--bom-faint-2);
    font-size: 0.8rem;
    cursor: pointer;
}

.bom-comp-row__remove:hover {
    background: var(--bom-tint);
    color: var(--error);
}

/* ── Barra di riepilogo ── */

.bom-summary {
    flex: none;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 22px;
    row-gap: 12px;
    padding: 13px 22px;
    border-top: 1px solid var(--bom-line);
    background: var(--bom-tint-2);
}

.bom-summary__cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.bom-summary__cell--orders {
    flex: 1 1 300px;
    max-width: 460px;
}

/* Ricerca e ordini collegati sulla stessa riga: impilati, la barra di
   riepilogo rubava un centinaio di pixel all'elenco dei componenti. */
.bom-summary__orders-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.bom-summary__orders-row .bom-order-search {
    flex: 0 1 200px;
    min-width: 150px;
}

.bom-summary__value {
    font-family: var(--bom-font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--bom-ink);
}

.bom-summary__divider {
    width: 1px;
    align-self: stretch;
    background: var(--bom-line);
}

.bom-summary__spacer {
    flex: 1;
}

.bom-summary__note {
    align-self: center;
    font-size: 0.76rem;
    color: var(--bom-muted-2);
    text-wrap: pretty;
}

.bom-order-search {
    position: relative;
}

.bom-order-search .bom-field {
    height: 32px;
    font-size: 0.8rem;
    font-weight: 500;
}

.bom-order-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 6px 0 10px;
    border-radius: 12px;
    background: var(--bom-accent-tint);
    color: var(--bom-accent-text);
    font-family: var(--bom-font-mono);
    font-size: 0.7rem;
    font-weight: 600;
}

.bom-order-chip button {
    display: grid;
    place-content: center;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: none;
    color: inherit;
    font-size: 0.66rem;
    cursor: pointer;
}

.bom-order-chip button:hover {
    background: var(--bom-accent-border);
}

/* ============================================================
   ARCHIVIO — vista a pagina piena, non affiancata
   ============================================================ */

#bom-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.bom-module[data-bom-view="distinte"] #bom-content {
    overflow-y: auto;
}

/* ============================================================
   DESKTOP — lo split prende l'altezza utile della shell.
   .main-content e' un contenitore a scroll di altezza fissa
   (style-workspaces.css, blocco min-width:769px): l'altezza
   utile e' la sua meno il padding verticale. Ricavarla da quei
   token invece di scriverla a mano la tiene giusta se cambiano.
   ============================================================ */

/* Le due testate convivono nel markup del dettaglio e il CSS ne accende una
   sola: sul desktop la barra chiara quando si configura, sul telefono sempre
   quella scura — li' cambiarla faceva sembrare le due linguette due schermate.

   L'ambito e' .bom-module e non la classe nuda: la stessa .bom-cfg-head fa da
   testata anche al lettore e al modulo del manuale, che vivono in un foglio
   loro. Nasconderla dappertutto lasciava quelle due schermate senza la
   freccia per chiudere e senza il Salva. */
.bom-module .bom-cfg-head {
    display: none;
}

@media (min-width: 769px) {
    .bom-module[data-bom-modifica="1"] .bom-cfg-head {
        display: flex;
    }

    .bom-module[data-bom-modifica="1"] .bom-detail-head {
        display: none;
    }
}

@media (min-width: 769px) {
    .bom-module {
        height: calc(
            100vh
            - var(--desk-shell-edge)
            - var(--desk-topbar-height)
            - var(--desk-shell-gap)
            - var(--desk-shell-edge)
            - var(--desk-main-padding-y) * 2
        );
        min-height: 520px;
    }
}

/* Quando il pannello di destra si stringe, la testata scura andrebbe su tre
   righe: prima cede la copertina, che e' un di piu', poi si assottiglia
   l'elenco. Cosi' i numeri e le azioni restano su una riga sola. */
@media (max-width: 1340px) {
    .bom-detail-head__cover {
        display: none;
    }

    .bom-stats {
        gap: 32px;
    }
}

/* ── Manuale della distinta ──────────────────────────────────────────────────
   Il manuale non e' piu' una pagina a parte: si apre da qui. Quando la distinta
   non ne ha ancora uno il tasto resta, ma vuoto: chiede di collegarlo. */
.bom-detail-head__manuale.is-vuoto {
    border-style: dashed;
    opacity: 0.72;
}

/* Le finestre del modulo usano il guscio comune dell'app; queste danno solo
   ritmo al contenuto, senza rifare il modale. */
.bom-modal-titolo {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bom-ink);
}

.bom-modal-titolo i {
    margin-right: 6px;
    color: var(--bom-accent);
}

.bom-modal-copy {
    margin: 0 0 16px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--bom-muted);
}

.bom-modal-azione-larga {
    width: 100%;
    margin-bottom: 16px;
}

.bom-modal-piede {
    justify-content: space-between;
}

/* «Importa distinte da un file»: la finestra e' larga quanto serve a
   leggere un elenco di distinte con i loro avvisi, e il campo file sta
   dentro un bottone del modulo — il controllo di sistema non si vede. */
.bom-import-file {
    width: min(640px, 100%);
}

.bom-import-file__azioni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.bom-import-file__scegli {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.bom-import-file__scegli input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.bom-import-file__nome {
    min-width: 0;
    flex: 1;
    font-size: 0.8rem;
    color: var(--bom-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bom-import-file__esito {
    max-height: 48vh;
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid var(--bom-line);
    border-radius: var(--bom-r-md);
    background: var(--bom-tint-2);
}

.bom-import-file__riepilogo {
    margin: 0 0 10px;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--bom-ink);
}

.bom-import-file__errore {
    margin: 0;
    font-size: 0.84rem;
    color: var(--error);
}

.bom-import-file__lista {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--bom-ink-2);
}

.bom-import-file__lista span {
    font-family: var(--bom-font-mono);
    font-size: 0.76rem;
    color: var(--bom-muted);
}

.bom-import-file__lista em {
    color: var(--bom-accent-text);
    font-style: normal;
}

.bom-import-file__avvisi {
    display: grid;
    gap: 6px;
}

.bom-import-file__avvisi details {
    border-top: 1px solid var(--bom-line-soft);
    padding-top: 6px;
}

.bom-import-file__avvisi summary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bom-ink);
    cursor: pointer;
    list-style: none;
}

/* Con `display: flex` il triangolo di sistema sparisce: se ne disegna uno,
   che ruota quando il gruppo e' aperto. */
.bom-import-file__avvisi summary::before {
    content: '\25B8';
    font-size: 0.7rem;
    color: var(--bom-muted);
    transition: transform 0.15s;
}

.bom-import-file__avvisi details[open] summary::before {
    transform: rotate(90deg);
}

.bom-import-file__avvisi summary span {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--bom-accent-tint);
    color: var(--bom-accent-text);
    font-size: 0.72rem;
}

.bom-import-file__avvisi ul {
    margin: 6px 0 4px;
    padding: 0 0 0 14px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--bom-ink-2);
}

.bom-import-file__avvisi li span {
    font-family: var(--bom-font-mono);
    font-size: 0.74rem;
    color: var(--bom-muted);
}

.bom-import-file__altri {
    list-style: none;
    margin-left: -14px;
    color: var(--bom-muted);
}

/* La riga che segnala i manuali rimasti senza distinta. Sta in cima all'elenco
   e sparisce da sola quando la coda si svuota: e' l'unico posto da cui si
   raggiungono, ora che la pagina Manuali non c'e' piu'. */
.bom-avviso {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    border: 0;
    border-bottom: 1px solid var(--bom-line);
    background: var(--bom-accent-tint);
    color: var(--bom-accent-text);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.bom-avviso:hover {
    background: var(--bom-accent-tint-2);
}

.bom-avviso span {
    flex: 1;
    min-width: 0;
}

.bom-avviso__freccia {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Il corredo che il manuale aggiunge a un componente: lettera e foto. Sta in
   fondo alle Avanzate, staccato da una linea, perche' non e' un campo della
   distinta — vive nella riga del manuale e si salva da solo. */
.bom-corredo {
    display: grid;
    gap: 10px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--bom-line);
}

.bom-corredo__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bom-corredo__media {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bom-corredo__media img {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    border: 1px solid var(--bom-line);
    object-fit: cover;
}

.bom-corredo__vuoto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border: 1px dashed var(--bom-line);
    border-radius: 10px;
    font-size: 0.68rem;
    text-align: center;
    color: var(--bom-faint);
}

.bom-corredo__attesa {
    margin-top: 8px;
}

/* ── Identikit di un manuale ─────────────────────────────────────────────────
   La copertina davanti a tutto: con la sola categoria non si capiva di che
   prodotto fosse il manuale, e sono nate distinte doppie. */
.bom-manuale-id {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.bom-manuale-id__foto {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--bom-line);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bom-tint);
}

.bom-manuale-id__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bom-manuale-id__foto.is-vuota {
    border-style: dashed;
    color: var(--bom-faint);
}

.bom-manuale-id__testo {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bom-manuale-id__nome {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bom-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

/* Elenco a scelta singola: il pallino da solo, accanto a una copertina, non si
   nota. Lo dice il riquadro. */
.bom-scelta-lista {
    display: grid;
    gap: 6px;
    max-height: 40vh;
    overflow-y: auto;
    margin-bottom: 12px;
}

.bom-scelta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--bom-line);
    border-radius: 12px;
    cursor: pointer;
}

.bom-scelta:hover {
    border-color: var(--bom-accent-border);
}

.bom-scelta.is-scelta {
    border-color: var(--bom-accent);
    background: var(--bom-accent-tint);
}

.bom-scelta input {
    flex-shrink: 0;
    accent-color: var(--bom-accent);
}

.bom-scelta.is-spenta {
    opacity: 0.5;
    cursor: default;
}

/* ── Prendere pezzi da un altro manuale ──────────────────────────────────────
   Due colonne: da dove si prende, e cosa. La riga in fondo dice cosa succede
   prima che succeda. */
.bom-prelievo-modal {
    width: min(94vw, 780px);
}

.bom-prelievo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 14px;
}

.bom-prelievo__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.bom-prelievo__anteprima {
    margin: 0 0 16px;
    padding: 11px 14px;
    border: 1px solid var(--bom-accent-border);
    border-radius: 12px;
    background: var(--bom-accent-tint);
    color: var(--bom-ink);
    font-size: 0.82rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .bom-prelievo {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Modulo del manuale ──────────────────────────────────────────────────────
   Non e' una finestrella: e' una schermata sopra la distinta, con la stessa
   barra in cima della Configurazione — indietro, nome, stato, Salva. */
.bom-modulo-velo {
    align-items: stretch;
    justify-content: center;
    padding: 24px;
}

.bom-modulo {
    display: flex;
    flex-direction: column;
    width: min(96vw, 1080px);
    max-height: 100%;
    overflow: hidden;
    border: 1px solid var(--bom-line);
    border-radius: 18px;
    background: var(--bom-paper);
}

.bom-modulo__corpo {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 20px 28px 28px;
}

.bom-modulo__sezione {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bom-modulo__sezione .bom-hint {
    margin: -6px 0 12px;
}

.bom-modulo__righe {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bom-modulo__identita {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}

.bom-modulo-copertina {
    width: 100%;
    max-height: 190px;
    border-radius: 11px;
    object-fit: cover;
}

/* Una voce della scheda: nome a sinistra, valore al centro, via a destra. */
.bom-riga-scheda {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) 28px;
    align-items: center;
    gap: 10px;
}

.bom-riga-scheda__voce {
    font-size: 0.86rem;
    color: var(--bom-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bom-riga-scheda__voce-input {
    font-style: italic;
}

.bom-modulo-card__riga {
    display: grid;
    grid-template-columns: 56px minmax(0, 1.4fr) minmax(0, 1fr) 28px;
    align-items: center;
    gap: 9px;
}

.bom-modulo-card__lettera {
    text-align: center;
    text-transform: uppercase;
}

.bom-modulo-card__testa {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bom-modulo-testo {
    min-height: 74px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}

.bom-modulo-slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.bom-modulo-slot,
.bom-modulo-media {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Le anteprime foto restano quelle del lettore: sono gia' vestite, e sono le
   stesse che il caricamento delle immagini va a cercare nel DOM. */
.bom-modulo-slot .manuali-media-preview,
.bom-modulo-media .manuali-media-preview {
    border-radius: 11px;
    overflow: hidden;
}

/* Un materiale in modifica: la lettera si cambia, nome e codice arrivano dalla
   distinta e stanno li' per essere letti mentre si scrivono gli step. */
.bom-materiale-edit {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 150px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--bom-line);
    border-radius: 12px;
    background: var(--bom-surface);
}

.bom-materiale-edit__id {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bom-materiale-edit__nome {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bom-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bom-materiale-edit__meta {
    font-family: var(--bom-font-mono);
    font-size: 0.74rem;
    color: var(--bom-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bom-materiale-edit__media {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.bom-materiale-edit__media .manuali-media-preview-img {
    max-height: 84px;
    object-fit: cover;
}

.bom-modulo-nota {
    flex-direction: row;
    align-items: flex-start;
    gap: 11px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--bom-muted);
}

.bom-modulo-nota i {
    margin-top: 2px;
    color: var(--bom-accent);
}

/* ── Lettore del manuale ─────────────────────────────────────────────────────
   Si legge di fila, come un foglio di istruzioni. Prima ogni step era una
   fisarmonica con la foto a tutta larghezza e la descrizione schiacciata in
   mezzo: si vedevano le immagini e non si leggeva niente. */
/* ── Testata del manuale ─────────────────────────────────────────────────────
   Una riga sola che non scorre mai: chiusura, copertina, nome con la sua riga
   di dati, versione, l'azione primaria e i tre puntini per il resto. Prima
   riusava la barra della Configurazione, che e' disegnata per un'altra
   schermata: ogni volta che quella cambiava, cambiava anche questa. */
/* Foto, nome, versione, azione primaria, menu, chiusura: la ✕ in fondo,
   in alto a destra come in ogni modale di PROD. */
.bom-testata {
    flex: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--bom-line);
    background: var(--bom-surface);
}

.bom-testata__chiudi {
    width: 36px;
    height: 36px;
}

.bom-testata__foto {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bom-line);
    background: var(--bom-tint);
    color: var(--bom-faint);
}

.bom-testata__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bom-testata__id {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bom-testata__nome {
    font-family: var(--font-titolo);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--bom-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bom-testata__meta {
    font-size: 0.74rem;
    color: var(--bom-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Le altre azioni, sotto i tre puntini ─────────────────────────────────── */
/* Il guscio si allunga quanto la riga della testata: cosi' il 100% da cui
   scende il pannello e' il fondo della testata, non quello del tastino. */
.bom-menu {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
}

.bom-menu__apri {
    width: 36px;
    height: 36px;
}

.bom-menu__pannello {
    position: absolute;
    top: calc(100% + 13px);
    right: 0;
    z-index: 20;
    min-width: 230px;
    display: flex;
    flex-direction: column;
    padding: 6px;
    border: 1px solid var(--bom-line);
    border-radius: 12px;
    background: var(--bom-surface);
    box-shadow: var(--elev-4);
}

.bom-menu__voce {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--bom-ink);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.bom-menu__voce i {
    width: 16px;
    flex: none;
    text-align: center;
    color: var(--bom-muted);
}

.bom-menu__voce:hover {
    background: var(--bom-tint);
}

.bom-menu__voce.is-pericolo,
.bom-menu__voce.is-pericolo i {
    color: var(--error);
}

.bom-menu__voce.is-pericolo:hover {
    background: color-mix(in srgb, var(--error) 10%, var(--bom-surface));
}

/* Scheda tecnica: due colonne, voce a sinistra e valore a destra, con la linea
   che le lega. Le voci senza valore non si mostrano affatto. */
.bom-scheda {
    display: grid;
    gap: 0;
}

.bom-scheda-riga {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bom-line-soft);
}

.bom-scheda-riga:last-child {
    border-bottom: 0;
}

.bom-scheda-riga__voce {
    font-size: 0.86rem;
    color: var(--bom-muted);
}

.bom-scheda-riga__valore {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bom-ink);
}

/* Materiali: una griglia di riquadri con la foto, la lettera e il nome. */
.bom-materiali {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}

.bom-materiale {
    display: grid;
    grid-template-columns: 52px 24px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--bom-line);
    border-radius: 12px;
    background: var(--bom-surface);
    text-align: left;
}

.bom-materiale.is-apribile {
    cursor: pointer;
}

.bom-materiale.is-apribile:hover {
    border-color: var(--bom-accent-border);
}

.bom-materiale__foto {
    width: 52px;
    height: 52px;
    border-radius: 9px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bom-tint);
    color: var(--bom-faint);
}

.bom-materiale__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bom-materiale__foto.is-vuota {
    border: 1px dashed var(--bom-line);
}

.bom-materiale__lettera {
    font-family: var(--bom-font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--bom-accent-text);
    text-align: center;
}

.bom-materiale__id {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bom-materiale__nome {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--bom-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bom-materiale__meta {
    font-family: var(--bom-font-mono);
    font-size: 0.72rem;
    color: var(--bom-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Il procedimento: numero, testo che si legge, foto in colonna a destra alte
   quanto basta per capire. Si ingrandiscono al tocco. */
.bom-passi {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bom-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 240px;
    align-items: start;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--bom-line);
    border-radius: 13px;
    background: var(--bom-surface);
}

.bom-step.senza-foto {
    grid-template-columns: 34px minmax(0, 1fr);
}

.bom-step__numero {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bom-accent);
    color: var(--bom-on-accent);
    font-family: var(--bom-font-mono);
    font-size: 0.86rem;
    font-weight: 700;
}

.bom-step__testo {
    margin: 0;
    align-self: center;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--bom-ink);
    white-space: pre-wrap;
}

.bom-step__foto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
}

.bom-step__scatto {
    display: block;
    padding: 0;
    border: 1px solid var(--bom-line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bom-tint);
    cursor: pointer;
}

.bom-step__scatto img {
    display: block;
    width: 100%;
    height: 118px;
    object-fit: cover;
}

.bom-step__scatto:hover {
    border-color: var(--bom-accent-border);
}

.bom-disegno {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--bom-line);
    border-radius: 13px;
    overflow: hidden;
    background: var(--bom-tint);
    cursor: pointer;
}

.bom-disegno img {
    display: block;
    width: 100%;
    max-height: 460px;
    object-fit: contain;
}

@media (max-width: 900px) {
    .bom-modulo__identita {
        grid-template-columns: minmax(0, 1fr);
    }

    .bom-materiale-edit {
        grid-template-columns: 56px minmax(0, 1fr) 110px;
    }

    /* Sotto una certa larghezza le foto accanto al testo diventano francobolli:
       meglio sotto, larghe, dove si vede qualcosa. */
    .bom-step,
    .bom-step.senza-foto {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .bom-step__foto {
        grid-column: 2 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bom-step__scatto img {
        height: 150px;
    }
}

@media (max-width: 768px) {
    .bom-modulo-velo {
        padding: 0;
    }

    .bom-modulo {
        width: 100%;
        border: 0;
        border-radius: 0;
    }

    .bom-modulo__corpo {
        gap: 22px;
        padding: 16px 18px calc(24px + env(safe-area-inset-bottom, 0px));
    }

    /* Il nome della voce sale sopra il suo valore: in fila restavano due
       colonne strizzate e non si leggeva nessuna delle due. Le posizioni sono
       tutte dichiarate, altrimenti chi resta fuori si crea colonne sue e la
       riga si allarga oltre lo schermo. */
    .bom-riga-scheda {
        grid-template-columns: minmax(0, 1fr) 28px;
        row-gap: 6px;
    }

    .bom-riga-scheda__voce,
    .bom-riga-scheda__voce-input {
        grid-area: 1 / 1 / 2 / 3;
    }

    .bom-riga-scheda [data-field="valore"] {
        grid-area: 2 / 1 / 3 / 2;
    }

    .bom-riga-scheda .bom-comp-row__remove {
        grid-area: 2 / 2 / 3 / 3;
    }

    .bom-modulo-card__riga {
        grid-template-columns: 56px minmax(0, 1fr) 28px;
        row-gap: 6px;
    }

    .bom-modulo-card__riga [data-field="lettera"] {
        grid-area: 1 / 1 / 2 / 2;
    }

    .bom-modulo-card__riga [data-field="nome"] {
        grid-area: 1 / 2 / 2 / 3;
    }

    .bom-modulo-card__riga .bom-comp-row__remove {
        grid-area: 1 / 3 / 2 / 4;
    }

    .bom-modulo-card__riga [data-field="codice"] {
        grid-area: 2 / 1 / 3 / 4;
    }

    .bom-modulo-slots {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Il materiale in modifica: lettera e nome sulla prima riga, la foto sotto
       a tutta larghezza invece che in una colonna da francobollo. */
    .bom-materiale-edit {
        grid-template-columns: 56px minmax(0, 1fr);
        row-gap: 10px;
    }

    .bom-materiale-edit__media {
        grid-column: 1 / -1;
    }

    .bom-materiale-edit__media .manuali-media-preview-img {
        max-height: 150px;
    }

    .bom-materiali {
        grid-template-columns: minmax(0, 1fr);
    }

    .bom-scheda-riga {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    /* La testata resta una riga sola: la copertina e la versione cedono il
       posto, il nome no. Le altre azioni sono gia' sotto i tre puntini. */
    .bom-testata {
        grid-template-columns: minmax(0, 1fr) auto auto auto;
        gap: 10px;
        padding: 10px 14px;
    }

    .bom-testata__foto,
    .bom-testata__versione {
        display: none;
    }

    .bom-testata__nome {
        font-size: 1.05rem;
    }

    .bom-menu__pannello {
        min-width: 210px;
    }
}

.bom-orfani-modal {
    width: min(92vw, 620px);
}

.bom-orfani-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 46vh;
    overflow-y: auto;
    margin-bottom: 16px;
}

.bom-orfano {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

@media (max-width: 768px) {
    .bom-orfano {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }
}

/* La riga di un componente da collegare: la spunta, cosa c'e' nella distinta e
   a quale articolo andrebbe. La freccia in mezzo non e' decorazione: senza, i
   due nomi affiancati non dicono quale dei due diventa l'altro. */
.bom-orfano--scelta {
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    cursor: pointer;
}

.bom-orfano__testo {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bom-orfano__testo strong {
    font-size: 0.88rem;
    color: var(--bom-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bom-orfano__dove {
    font-size: 0.74rem;
    color: var(--bom-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bom-orfano__verso {
    color: var(--bom-faint);
    font-size: 0.8rem;
    text-align: center;
}

@media (max-width: 768px) {
    /* Sul telefono le due sponde si impilano e la freccia gira di 90 gradi:
       affiancate in 375px i nomi si troncherebbero dopo tre lettere. */
    .bom-orfano--scelta {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .bom-orfano--scelta .bom-orfano__verso {
        grid-column: 1;
        transform: rotate(90deg);
    }
}

/* Quello che esiste solo su una delle due sponde. Le regole che li accendono
   e li spengono stanno nel blocco mobile in fondo al file. */
.bom-solo-mobile {
    display: none;
}

/* Il velo del foglio: esiste solo sul telefono e solo col dettaglio aperto.
   Spento qui, lo accende il blocco mobile in fondo al file. */
.bom-scrim {
    display: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

@media (max-width: 1440px) {
    .bom-split--workspace {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    }
}

@media (max-width: 1180px) {
    .bom-split {
        grid-template-columns: 320px minmax(0, 1fr);
    }

    .bom-comp-thead,
    .bom-comp-row {
        grid-template-columns: 22px minmax(0, 1fr) 78px 66px 78px 26px;
        gap: 8px;
    }

    .bom-comp-head,
    .bom-comp-body,
    .bom-summary {
        padding-left: 16px;
        padding-right: 16px;
    }

    .bom-detail-head,
    .bom-detail-body {
        padding-left: 20px;
        padding-right: 20px;
    }

    .bom-condivisa {
        margin-left: 20px;
        margin-right: 20px;
    }

    .bom-detail-head__title {
        font-size: 1.9rem;
    }

    .bom-cfg-head {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Sotto questa soglia l'anagrafica in colonna sarebbe una fessura:
       passa sotto i componenti, a tutta larghezza. */
    .bom-cfg-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }
}

/* ============================================================
   MOBILE — quattro schermate, mai due pannelli affiancati
   ============================================================
   Sotto i 768px l'elenco e il dettaglio non convivono: si tocca
   una distinta e si passa al dettaglio, si torna con la freccia.
   Quale pannello si veda lo dicono tre attributi su .bom-module,
   scritti da _bomSyncAttributiMobile: sopra questa soglia nessuna
   regola li legge, quindi sul desktop non esistono.

   L'azione primaria vive sempre in fondo, a portata di pollice,
   sopra il dock flottante di navigazione.
   ============================================================ */

@media (max-width: 768px) {
    /* La pagina smette di scorrere per intero: scorrono i pannelli.
       Serve perche' la barra dell'azione primaria resti ferma in fondo. */
    body.page-kit #contenitore-dati {
        display: flex;
        flex-direction: column;
        padding: 0;
        overflow: hidden;
    }

    .bom-module {
        flex: 1;
        min-height: 0;
        height: auto;
    }

    .bom-solo-mobile {
        display: flex;
    }

    .bom-no-mobile {
        display: none;
    }

    /* Le liste scorrono in verticale e basta. Dichiarare solo overflow-y: auto
       non lo dice: per le regole del calcolo, l'altro asse smette di essere
       "visible" e diventa scorrevole anche lui. Bastava un pixel di troppo — un
       campo che non si stringe sotto la sua larghezza minima — e la pagina si
       trascinava di lato, restando storta. Le righe qui sotto tolgono quel
       pixel; questa toglie la possibilita' stessa di muoversi. */
    .bom-scroll {
        overflow-x: hidden;
    }

    /* La larghezza minima automatica di un elemento di griglia e' il suo
       min-content: un <input> senza attributo size la calcola su venti
       caratteri, e su uno schermo stretto quella misura puo' allargare la
       colonna oltre il contenitore. Non sono riuscito a farlo accadere con dei
       dati di prova, nemmeno a 320px: e' una difesa, non una causa accertata. */
    .bom-cfg-comp__row > *,
    .bom-sez-head > * {
        min-width: 0;
    }

    .bom-split,
    .bom-split--workspace {
        grid-template-columns: minmax(0, 1fr);
        border: none;
        border-radius: 0;
    }

    .bom-split__list {
        border-right: none;
    }

    /* ── M1 catalogo / M2 anteprima: il dettaglio e' un foglio sopra l'elenco ──
       Erano due schermate che si davano il cambio, e il dettaglio partiva dal
       bordo alto dell'area contenuto: la sua testata scura finiva incollata
       sotto la testata scura dell'app, e le due si leggevano come un blocco
       solo. Ora l'elenco resta sotto, velato, e il foglio scende dall'alto
       lasciando scoperti venti pixel: bastano a dire che sono due strati.

       Come il modal degli ordini in Produzione, ma senza z-index alti: sta
       sotto il dock (40) e sotto i fogli della shell (50), cosi' la
       navigazione resta raggiungibile mentre si legge la distinta. */
    .bom-split {
        position: relative;
    }

    .bom-module[data-bom-mobile="elenco"] .bom-split__detail {
        display: none;
    }

    .bom-module[data-bom-mobile="dettaglio"] .bom-scrim {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 3;
        background: var(--bom-scrim);
        animation: bom-velo 0.2s ease;
    }

    .bom-module[data-bom-mobile="dettaglio"] .bom-split__detail {
        position: absolute;
        inset: 20px 0 0;
        z-index: 4;
        border-radius: var(--bom-r-lg) var(--bom-r-lg) 0 0;
        box-shadow: var(--elev-4);
        overflow: hidden;
        animation: bom-foglio-su 0.26s cubic-bezier(0.22, 1, 0.36, 1);
    }

    @keyframes bom-velo {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    @keyframes bom-foglio-su {
        from { transform: translateY(3%); opacity: 0; }
        to   { transform: translateY(0);  opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
        .bom-module[data-bom-mobile="dettaglio"] .bom-scrim,
        .bom-module[data-bom-mobile="dettaglio"] .bom-split__detail {
            animation: none;
        }
    }

    /* ── La testata dell'elenco: la ricerca sale accanto ai due tasti ──
       Il titolo "Distinte" ripeteva quello di pagina e il totale e' passato
       nella pastiglia "Tutte": restava una riga intera per non dire niente.
       I due tasti scendono sulla riga della ricerca, che e' larga abbastanza.
       Solo l'elenco delle distinte: il pannello magazzino usa la stessa
       classe, ma li' l'etichetta e il conteggio sono l'unica intestazione. */
    #bom-list-pane .bom-list-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        column-gap: 8px;
        row-gap: 10px;
        padding: 12px 16px;
    }

    /* Le distanze le fa il row-gap: i margini nascono da quando ricerca e
       pastiglie erano righe una sotto l'altra, e qui si sommerebbero. */
    #bom-list-pane .bom-list-head__cerca,
    #bom-list-pane .bom-filter-drawer {
        margin-top: 0;
    }

    #bom-list-pane .bom-list-head__top {
        display: contents;
    }

    #bom-list-pane .bom-list-title,
    #bom-list-pane .bom-list-head__spacer {
        display: none;
    }

    #bom-list-pane .bom-list-head__cerca {
        grid-area: 1 / 1;
    }

    #bom-list-pane .bom-list-head__top .bom-icon-btn {
        grid-area: 1 / 2;
    }

    #bom-list-pane .bom-list-head__top .bom-btn--icon {
        grid-area: 1 / 3;
    }

    #bom-list-pane .bom-filter-drawer {
        grid-column: 1 / -1;
    }

    /* Il bottone dei filtri e' alto quanto il campo, che sul telefono cresce. */
    .bom-list-head__cerca .bom-filtri-btn {
        width: 42px;
        height: 42px;
    }

    .bom-list-head {
        padding: 14px 16px 12px;
    }

    .bom-list-title {
        font-size: 1.5rem;
    }

    .bom-search {
        height: 42px;
    }

    .bom-filter-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .bom-filter-row::-webkit-scrollbar {
        display: none;
    }

    .bom-chip {
        height: 32px;
        flex: none;
        font-size: 0.82rem;
    }

    /* Righe alte abbastanza da colpirle col pollice senza mirare. */
    .bom-row {
        min-height: 64px;
        padding: 12px;
        border-radius: 13px;
    }

    .bom-row__avatar {
        width: 42px;
        height: 42px;
        font-size: 1.05rem;
    }

    .bom-row__name {
        font-size: 1rem;
    }

    /* Il pallino di stato lascia il posto al segno che si puo' entrare. */
    .bom-row__dot {
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 7px solid var(--bom-faint-2);
        border-radius: 0;
        background: none;
    }

    .bom-row__dot.is-warning {
        border-left-color: var(--bom-accent-border-2);
        background: none;
    }

    .bom-row.is-selected .bom-row__dot {
        border-left-color: var(--bom-sel-muted);
        background: none;
    }

    /* ── Testata scura del dettaglio ──
       Due righe: la prima e' la barra dei comandi, con freccia a sinistra,
       nome-stato-data al centro e azione primaria a destra; la seconda porta
       i tre numeri, allineati al nome e non al bordo, cosi' la colonna del
       contenuto resta una sola e la freccia ha la sua corsia.

       Il display:contents su __id serve a questo: sul desktop e' la colonna
       che tiene insieme nome e numeri, qui deve sparire dal layout e lasciare
       che riga e numeri siano celle della griglia della testata. */
    .bom-detail-head {
        display: grid;
        /* Cinque colonne: freccia, titolo, manuale, matita, produzione. Il
           manuale e la matita stanno accanto al play perche' sono le cose che
           si aprono da qui. */
        grid-template-columns: auto minmax(0, 1fr) auto auto auto;
        column-gap: 12px;
        row-gap: 9px;
        padding: 12px 18px 14px;
        border-radius: 0;
    }

    .bom-detail-head__id {
        display: contents;
    }

    .bom-detail-head__back {
        grid-area: 1 / 1;
        margin-bottom: 0;
    }

    .bom-detail-head__manuale {
        grid-area: 1 / 3;
    }

    .bom-detail-head__modifica {
        grid-area: 1 / 4;
    }

    .bom-detail-head__play {
        grid-area: 1 / 5;
    }

    /* In cima e non centrati: con un nome lungo la riga cresce, e una freccia
       che scende insieme al testo non sembra piu' il tasto per tornare
       indietro. Con un nome corto i due centri coincidono comunque, perche' e'
       il titolo a centrarsi nell'altezza del tasto. */
    .bom-detail-head__back,
    .bom-detail-head__manuale,
    .bom-detail-head__modifica,
    .bom-detail-head__play {
        width: 36px;
        height: 36px;
        align-self: start;
    }

    .bom-detail-head__riga {
        grid-area: 1 / 2;
        align-self: center;
        gap: 8px;
    }

    .bom-detail-head__title {
        font-size: 1.35rem;
        line-height: 1.12;
    }

    .bom-detail-head__meta {
        font-size: 0.7rem;
    }

    .bom-stats {
        grid-area: 2 / 2 / 3 / -1;
        gap: 14px;
        row-gap: 6px;
    }

    .bom-stat {
        font-size: 0.58rem;
    }

    .bom-stat__value {
        font-size: 1.05rem;
    }

    /* "collegati" e' l'unica etichetta che non ci sta, coi tre numeri in fila. */
    .bom-stat__label-coda {
        display: none;
    }

    .bom-detail-head__actions,
    .bom-detail-head__cover {
        display: none;
    }

    /* Il fondo lo tiene il corpo, non piu' la barra dell'azione: sotto c'e' il
       dock flottante, e senza questo spazio l'ultima riga ci finisce dietro.
       Serviva anche prima in configurazione, dove la barra non c'era mai. */
    .bom-detail-body {
        padding: 16px 18px calc(78px + env(safe-area-inset-bottom, 0px));
    }

    .bom-condivisa {
        margin: 10px 18px 0;
    }

    .bom-spec {
        padding: 11px 0;
    }

    .bom-spec__name {
        font-size: 0.95rem;
    }

    /* ── M3 composizione: un interruttore invece di due colonne ── */
    .bom-ws-head {
        padding: 12px 16px;
        border-radius: 0;
    }

    .bom-ws-head__title {
        font-size: 1.15rem;
    }

    .bom-ws-head__spacer {
        display: none;
    }

    .bom-stepper {
        width: 100%;
        justify-content: center;
        padding-right: 0;
        border-right: none;
    }

    .bom-segmented {
        flex: none;
        display: flex;
        gap: 6px;
        padding: 12px 16px;
        background: var(--bom-surface);
    }

    .bom-segmented__opt {
        flex: 1;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
        border: 1px solid var(--bom-line);
        border-radius: 10px;
        background: var(--bom-surface);
        color: var(--bom-ink-2);
        font-family: inherit;
        font-size: 0.85rem;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
    }

    .bom-segmented__opt.is-active {
        background: var(--bom-sel-bg);
        border-color: var(--bom-sel-bg);
        color: var(--bom-sel-ink);
        font-weight: 700;
    }

    .bom-module[data-bom-ws="magazzino"] #bom-comp-pane,
    .bom-module[data-bom-ws="distinta"] #bom-wh-pane {
        display: none;
    }

    /* Il segmented dice gia' dove siamo: la testata del magazzino ripeterebbe. */
    .bom-module[data-bom-ws="magazzino"] #bom-wh-pane .bom-list-head__top,
    .bom-comp-head {
        display: none;
    }

    /* Quantita' e unita' sotto il nome, invece che in colonne strette. */
    .bom-comp-thead {
        display: none;
    }

    /* Due righe: nome sopra, quantita' e unita' sotto. Ogni pezzo ha la sua
       cella — niente margini negativi, che si sovrapponevano. */
    .bom-comp-row {
        grid-template-columns: 26px 96px 76px minmax(0, 1fr) 30px;
        gap: 8px 10px;
        min-height: 62px;
        padding: 10px 0;
    }

    /* 16px sono da mouse: questa spunta la preme un dito, e per giunta e' il
       gesto piu' frequente della schermata. */
    .bom-comp-row .bom-check,
    .bom-comp-section__head .bom-check {
        grid-column: 1;
        grid-row: 1;
        width: 24px;
        height: 24px;
        border-radius: 7px;
    }

    .bom-comp-row .bom-check::after,
    .bom-comp-section__head .bom-check::after {
        width: 12px;
        height: 6px;
    }

    .bom-comp-row__name {
        grid-column: 2 / span 3;
        grid-row: 1;
        white-space: normal;
        font-size: 0.92rem;
    }

    .bom-comp-row .bom-qty {
        grid-column: 2;
        grid-row: 2;
        height: 38px;
    }

    .bom-comp-row .bom-unit {
        grid-column: 3;
        grid-row: 2;
        height: 38px;
    }

    .bom-comp-row__total {
        grid-column: 4;
        grid-row: 2;
        align-self: center;
        justify-self: end;
        font-size: 1.05rem;
    }

    .bom-comp-row__remove {
        grid-column: 5;
        grid-row: 1;
        align-self: center;
    }

    .bom-comp-body {
        padding: 0 16px 14px;
    }

    .bom-wh-list {
        padding: 6px 16px 14px;
    }

    .bom-wh-item {
        padding: 12px;
        min-height: 62px;
    }

    .bom-wh-item__name {
        font-size: 0.92rem;
        white-space: normal;
    }

    .bom-wh-item__add {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
    }

    /* Il riepilogo passa nella barra in fondo, dove sta anche il salva. */
    .bom-summary {
        display: none;
    }

    /* ── M4 configurazione: linguette impilate, non colonna a fianco ──
       La testata e' la stessa delle due linguette: cambia solo l'azione a
       destra, dove Usa in produzione lascia il posto a Salva. Prima cambiava
       tutta la cima del foglio — via la copertina, via i numeri, altra altezza
       — e sembrava un'altra schermata. */
    .bom-detail-head__salva {
        grid-area: 1 / 5;
        align-self: start;
        height: 36px;
        padding: 0 14px;
    }

    .bom-detail-head__modifiche {
        font-family: var(--bom-font-mono);
        color: var(--bom-accent-light);
    }

    .bom-detail-head__annulla {
        color: var(--bom-dark-ink);
        text-decoration: underline;
    }

    .bom-cfg-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .bom-module[data-bom-cfg="componenti"] .bom-cfg-sezione:not([data-sezione="componenti"]),
    .bom-module[data-bom-cfg="anagrafica"] .bom-cfg-sezione:not([data-sezione="anagrafica"]),
    .bom-module[data-bom-cfg="copertina"] .bom-cfg-sezione:not([data-sezione="copertina"]) {
        display: none;
    }

    .bom-cfg-side .bom-cfg-col__head:not(:first-child) {
        margin-top: 0;
    }

    /* Un componente sta su una riga sola. Prima ne occupava due — nome sopra,
       quantita' e unita' sotto — e con diciotto componenti la lista diventava
       un rotolo: si vedevano tre voci per schermata. */
    .bom-cfg-comp__row {
        grid-template-columns: minmax(0, 1fr) 50px 60px 24px 22px;
        gap: 5px;
        padding: 3px 0;
    }

    .bom-cfg-comp__name {
        height: 34px;
        font-size: 0.85rem;
    }

    .bom-cfg-comp__row .bom-qty {
        height: 34px;
        width: 100%;
        padding: 0 6px;
        font-size: 0.8rem;
    }

    .bom-cfg-comp__row .bom-unit-dd .oe-dd-trigger {
        height: 34px;
        padding: 0 6px;
        font-size: 0.74rem;
    }

    .bom-cfg-comp__row .bom-comp-row__remove {
        width: 22px;
        height: 22px;
    }

    .bom-gear {
        width: 24px;
        height: 24px;
    }

    .bom-cfg-toolbar {
        top: -16px;
        margin: -16px 0 10px;
        padding: 12px 0 10px;
        gap: 6px;
    }

    .bom-specs + .bom-specs {
        margin-top: 16px;
    }

    .bom-cfg-sez__name {
        height: 30px;
    }

    .bom-cfg-col__head {
        margin-bottom: 8px;
    }

    .bom-cfg-actions {
        gap: 6px;
    }

    .bom-comp-modale__campi {
        grid-template-columns: minmax(0, 1fr);
    }

    /* ── Barra dell'azione primaria, sopra il dock ── */
    .bom-cta-bar {
        flex: none;
        flex-direction: column;
        gap: 10px;
        padding: 12px 16px calc(76px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--bom-line);
        background: var(--bom-surface);
    }

    .bom-cta-bar__riepilogo {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        font-size: 0.85rem;
        color: var(--bom-muted);
    }

    .bom-cta-bar__riepilogo b {
        font-family: var(--bom-font-mono);
        font-size: 0.95rem;
        color: var(--bom-ink);
    }

    .bom-cta {
        width: 100%;
        height: 50px;
        border: none;
        border-radius: 13px;
        background: var(--bom-accent);
        color: var(--bom-on-accent);
        font-family: inherit;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
    }

    .bom-cta:active {
        background: var(--bom-accent-hover);
    }
}

/* ============================================================
   Una via d'uscita che non scorre via
   ============================================================
   Sul telefono le finestre diventano fogli che scorrono: il
   guscio comune mette max-height:92dvh e overflow-y:auto sul
   .modal-content. Ma la ✕ e' in posizione assoluta *dentro*
   quell'area, quindi appena si scende verso l'elenco se ne va
   con il contenuto, e i tasti stanno in fondo a tutto: a meta'
   finestra non restava niente da toccare per uscire, e l'unica
   strada era ricaricare la pagina.

   Qui la ✕ e la barra dei tasti diventano appiccicate ai due
   bordi dell'area che scorre. Vale per ogni finestra aperta
   dalla Distinta Base — sono tutte fatte con lo stesso guscio,
   quindi non serve toccarne il markup una per una.

   Le regole stanno qui e non fra i fogli sigillati perche' li'
   .modal-close-x e .modal-footer non forzano nessuna dichiarazione:
   bastano la specificita' e il fatto che questo foglio venga
   caricato dopo.
   ============================================================ */

@media (max-width: 768px) {
    /* Su una riga sua, non sovrapposta: da flottante finiva sotto il titolo
       appena il nome della distinta era lungo. Costa 34px in cima, e sono
       trentaquattro pixel che valgono una via d'uscita sempre a portata. */
    body.page-kit .modal-overlay .modal-content > .modal-close-x {
        position: sticky;
        top: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin: 0 0 4px auto;
        padding: 0;
        border-radius: 50%;
        background: var(--bom-tint);
        color: var(--bom-ink);
    }

    body.page-kit .modal-overlay .modal-content > .modal-footer {
        position: sticky;
        /* Il fondo del foglio ha 28px di respiro: senza questo scarto la
           barra resterebbe sospesa sopra il bordo invece che appoggiata. */
        bottom: -28px;
        z-index: 2;
        margin-top: 18px;
        padding: 12px 0 16px;
        border-top: 1px solid var(--bom-line);
        background: var(--bom-surface);
    }

    /* Una finestra puo' avere piu' di una fila di tasti (la nostra ne ha una
       secondaria dentro il piede): non devono impilarsi fuori schermo. */
    body.page-kit .modal-overlay .modal-content > .modal-footer .bom-cfg-actions {
        flex-wrap: wrap;
    }
}