/* PROD — Modulo Progetti
   Namespace isolato .progetti-module: ogni colore del file passa per i token
   --pm-*, derivati dai canonici di style-core.css, quindi il modulo gira col
   tema chiaro e scuro e con l'accento scelto dall'utente senza toccare una
   riga del resto. Zero esadecimali e zero override forzati, per cricchetto.

   Due strade d'ingresso, riconoscibili dal colore in ogni schermata (redesign
   del 15 settembre 2026): l'ACCENTO = nato in PROD (progetti con preventivo,
   configuratore, produzione); la SALVIA (--pm-server) = le cartelle dei
   clienti. PROD non ha un secondo accento: la salvia si calcola dal verde di
   feedback e dal testo del tema, cosi' resta un verde spento leggibile su
   entrambi i fondi. Gli stati del progetto non la usano mai.

   Pagina integrata di PROD: nessuna sidebar/topbar propria, usa solo la chrome
   globale; le schede del progetto aperto stanno nella nav di sezione in topbar. */

.progetti-module {
    --pm-bg: var(--bg-base);
    --pm-panel-1: var(--panel-bg);
    --pm-panel-2: var(--panel-mid);
    --pm-panel-3: var(--panel-soft);
    --pm-border: color-mix(in srgb, var(--accent) 18%, transparent);
    --pm-border-soft: var(--panel-border);
    --pm-text: var(--text-strong);
    --pm-text-muted: var(--text-secondary);
    --pm-text-faint: var(--text-tertiary);
    --pm-accent-1: var(--accent);
    --pm-accent-2: var(--accent-strong);
    --pm-accent-grad: linear-gradient(135deg, var(--pm-accent-1), var(--pm-accent-2));
    --pm-accent-wash: var(--accent-wash);
    /* Verde della guida di posa: e' un marcatore funzionale sulla pianta, non
       una superficie — resta lo stesso nei due temi, come i colori di stato. */
    --pm-guide-green: rgba(95, 214, 171, 0.6);
    --pm-danger: var(--error);
    --pm-marker-bordo: var(--pm-text);
    /* Colore unico dei corpi in pianta: a distinguerli e' la sigla, non la tinta. */
    --pm-marker-fill: var(--pm-accent-2);
    --pm-su-accento: var(--accent-contrast);
    /* La salvia delle cartelle dei clienti. */
    --pm-server: color-mix(in oklch, var(--success) 45%, var(--text-secondary));
    --pm-server-ink: color-mix(in oklch, var(--success) 55%, var(--text-strong));
    --pm-server-wash: color-mix(in srgb, var(--pm-server) 14%, transparent);
    --pm-server-border: color-mix(in srgb, var(--pm-server) 40%, transparent);
    --pm-radius-sm: 8px;
    --pm-radius-md: 12px;
    --pm-radius-lg: 16px;
    --pm-font-title: var(--font-titolo);
    --pm-font-body: var(--font-ui);

    background: var(--pm-bg);
    color: var(--pm-text);
    font-family: var(--pm-font-body);
    border-radius: var(--pm-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 480px;
}

.progetti-module * {
    box-sizing: border-box;
}

.progetti-module h2,
.progetti-module h3 {
    font-family: var(--pm-font-title);
    color: var(--pm-text);
    margin: 0;
}

.progetti-module a {
    color: inherit;
    text-decoration: none;
}

.pm-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px;
}

/* ── Gli stati del progetto e delle aree: la classe porta i colori, i figli
   li leggono da --s-*. Aggiungere uno stato = una classe in piu'. ────────── */
.pm-st-bozza {
    --s-bg: color-mix(in srgb, var(--pm-text-muted) 14%, transparent);
    --s-fg: var(--pm-text);
    --s-bar: var(--pm-text-muted);
}
.pm-st-in_corso {
    --s-bg: var(--pm-accent-wash);
    --s-fg: var(--pm-accent-1);
    --s-bar: var(--pm-accent-1);
}
.pm-st-preventivo_inviato {
    --s-bg: color-mix(in srgb, var(--warning) 16%, transparent);
    --s-fg: var(--warning);
    --s-bar: var(--warning);
}
.pm-st-approvato {
    --s-bg: color-mix(in srgb, var(--success) 14%, transparent);
    --s-fg: var(--success);
    --s-bar: var(--success);
}
.pm-st-chiuso {
    --s-bg: color-mix(in srgb, var(--pm-text-faint) 14%, transparent);
    --s-fg: var(--pm-text-muted);
    --s-bar: var(--pm-text-faint);
}

/* ── I tipi di file: stessa idea, --f-*. ─────────────────────────────────── */
.pm-ft-dwg   { --f-bg: var(--pm-accent-wash); --f-fg: var(--pm-accent-1); }
.pm-ft-pdf   { --f-bg: color-mix(in srgb, var(--error) 12%, transparent); --f-fg: var(--error); }
.pm-ft-xls   { --f-bg: color-mix(in srgb, var(--success) 14%, transparent); --f-fg: var(--success); }
.pm-ft-doc   { --f-bg: color-mix(in srgb, var(--info) 12%, transparent); --f-fg: var(--info); }
.pm-ft-img   { --f-bg: var(--pm-server-wash); --f-fg: var(--pm-server-ink); }
.pm-ft-ppt   { --f-bg: color-mix(in srgb, var(--warning) 14%, transparent); --f-fg: var(--warning); }
.pm-ft-zip,
.pm-ft-mail,
.pm-ft-altro { --f-bg: color-mix(in srgb, var(--pm-text-muted) 12%, transparent); --f-fg: var(--pm-text-muted); }

/* ── La testata del progetto aperto ──────────────────────────────────────── */
.pm-detail-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--pm-border);
}
.pm-detail-testi { flex: 1; min-width: 0; }
.pm-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
    font-size: 13px;
}
.pm-detail-cliente { font-weight: 700; }
.pm-detail-dove { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; }
.pm-detail-azioni { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pm-detail-elimina:hover { color: var(--pm-danger); }

.pm-badge--tendina {
    cursor: pointer;
    border: none;
    font-family: inherit;
}
.pm-badge--tendina i { font-size: 9px; opacity: 0.7; }

/* ── Header comuni ────────────────────────────────────────────────── */
.pm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.pm-kicker {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pm-accent-1);
    font-weight: 700;
}

.pm-title {
    font-size: 22px;
    font-weight: 800;
}

.pm-title-lg {
    font-size: 26px;
}

/* ── Pillole filtro (categorie) ───────────────────────────────────── */
.pm-pill {
    border: 1px solid var(--pm-border);
    background: var(--pm-panel-1);
    color: var(--pm-text-muted);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.pm-pill.active {
    background: var(--pm-accent-grad);
    color: var(--pm-su-accento);
    border-color: transparent;
}

.pm-pill-sm {
    padding: 4px 10px;
    font-size: 11px;
}

/* ── Bottoni ──────────────────────────────────────────────────────── */
.pm-btn-primary,
.pm-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--pm-radius-sm);
    padding: 10px 18px;
    font-family: var(--pm-font-body);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    border: none;
}

.pm-btn-primary {
    background: var(--pm-accent-grad);
    color: var(--pm-su-accento);
}

.pm-btn-primary:disabled,
.pm-btn-secondary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pm-btn-secondary {
    background: var(--pm-panel-1);
    border: 1px solid var(--pm-border);
    color: var(--pm-text);
}

.pm-icon-btn {
    background: transparent;
    border: none;
    color: var(--pm-text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--pm-radius-sm);
}

.pm-icon-btn:hover {
    color: var(--pm-danger);
    background: color-mix(in srgb, var(--pm-danger) 10%, transparent);
}

/* ── Badge: stato, origine, tipo di file ─────────────────────────────────── */
.pm-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    line-height: 1.2;
    background: var(--s-bg, color-mix(in srgb, var(--pm-text-muted) 14%, transparent));
    color: var(--s-fg, var(--pm-text-muted));
}
.pm-badge--prod { background: var(--pm-accent-wash); color: var(--pm-accent-1); }
.pm-badge--server { background: var(--pm-server-wash); color: var(--pm-server-ink); }
.pm-badge--file {
    background: var(--f-bg, color-mix(in srgb, var(--pm-text-muted) 12%, transparent));
    color: var(--f-fg, var(--pm-text-muted));
    min-width: 44px;
    justify-content: center;
    font-size: 10px;
    flex: none;
}
.pm-badge--path { text-transform: none; letter-spacing: 0; font-size: 11px; }

/* ── Filtri della lista progetti ─────────────────────────────────────────── */
.pm-sottotitolo {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--pm-text-muted);
}

.pm-lista-filtri {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.pm-ricerca {
    position: relative;
    flex: 1 1 260px;
    max-width: 380px;
}

.pm-ricerca i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--pm-text-muted);
    pointer-events: none;
}

.pm-ricerca input {
    width: 100%;
    padding: 9px 12px 9px 32px;
    background: var(--pm-panel-1);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    color: var(--pm-text);
    font-size: 13px;
    font-family: inherit;
}

.pm-ricerca input:focus {
    outline: none;
    border-color: var(--pm-accent-1);
}

.pm-lista-stati {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pm-lista-stati .pm-pill span {
    opacity: 0.6;
    margin-left: 4px;
}

.pm-lista-vuota {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 24px;
    text-align: center;
    background: var(--pm-panel-1);
    border: 1px dashed var(--pm-border);
    border-radius: var(--pm-radius-md);
}

.pm-lista-vuota i {
    font-size: 28px;
    color: var(--pm-text-muted);
    opacity: 0.5;
}

.pm-lista-vuota h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.pm-lista-vuota p {
    margin: 0;
    max-width: 460px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pm-text-muted);
}

.pm-btn-xs {
    padding: 6px 12px;
    font-size: 12px;
}

/* ── Preventivo ───────────────────────────────────────────────────── */
.pm-preventivo-gruppo {
    background: var(--pm-panel-1);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
    overflow: hidden;
}

.pm-preventivo-gruppo-head {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--pm-panel-2);
    font-weight: 700;
    font-size: 13px;
}

.pm-preventivo-riga {
    display: grid;
    grid-template-columns: 1fr auto auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--pm-border);
    font-size: 13px;
}

.pm-riga-qty,
.pm-riga-prezzo {
    color: var(--pm-text-muted);
}

.pm-riga-totale {
    font-weight: 700;
}

.pm-preventivo-totali {
    background: var(--pm-panel-1);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 360px;
    margin-left: auto;
}

.pm-totale-riga {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--pm-text-muted);
}

.pm-totale-finale {
    font-size: 16px;
    font-weight: 800;
    color: var(--pm-text);
    border-top: 1px solid var(--pm-border);
    padding-top: 8px;
    margin-top: 4px;
}

.pm-sconto-input {
    width: 56px;
    background: var(--pm-panel-3);
    border: 1px solid var(--pm-border);
    border-radius: 6px;
    color: var(--pm-text);
    padding: 2px 6px;
    text-align: right;
}

/* ── Stato vuoto ──────────────────────────────────────────────────── */
.pm-empty {
    color: var(--pm-text-muted);
    background: var(--pm-panel-1);
    border: 1px dashed var(--pm-border);
    border-radius: var(--pm-radius-md);
    padding: 24px;
    text-align: center;
    font-size: 13px;
}

/* ── Modali (riusano .modal-overlay globale, contenuto scoped) ──────── */
.progetti-module.modal-overlay {
    background: rgba(0, 0, 0, 0.72);
    padding: 0;
    border-radius: 0;
}

.pm-modal {
    background: var(--pm-panel-1);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-lg);
    padding: 20px;
    width: 420px;
    max-width: 92vw;
    max-height: 86vh;
    overflow-y: auto;
    margin: auto;
    color: var(--pm-text);
    font-family: var(--pm-font-body);
}

.pm-modal-sm {
    width: 360px;
}

/* I 420px di serie tengono un modulo a campi impilati, non una tabella. Quella
   dell'anteprima ne ha cinque di colonne per ogni fornitore, e a 420 il nome
   del componente andava a capo tre volte: la riga diventava un paragrafo e i
   numeri, che sono il motivo per cui si apre quel modale, finivano lontani
   dalla cosa che descrivono. La larghezza si sceglie su cosa deve contenere. */
.pm-modal-lg {
    width: 880px;
}

.pm-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.pm-modal-close {
    background: none;
    border: none;
    color: var(--pm-text-muted);
    cursor: pointer;
    font-size: 16px;
}

.pm-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pm-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pm-form-row label {
    font-size: 12px;
    color: var(--pm-text-muted);
    font-weight: 600;
}

/* width:100% e non la larghezza di serie del browser: un input senza larghezza
   dichiarata ne pretende ~200px, e due affiancati non stanno in un modale da
   360. Vedi la regola dei modali in CLAUDE.md. */
.pm-form-row input,
.pm-form-row textarea,
.pm-form-row select {
    width: 100%;
    background: var(--pm-panel-3);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    color: var(--pm-text);
    padding: 9px 12px;
    font-family: var(--pm-font-body);
    font-size: 13px;
}

.pm-form-row-split {
    flex-direction: row;
    gap: 12px;
}

/* min-width:0 e' l'altra meta': senza, `flex: 1` non scende mai sotto la
   larghezza intrinseca del campo e il secondo esce dal bordo del modale. */
.pm-form-row-split > div {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pm-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

/* Il calendario di PROD (.oe-date) qui aveva un vestito suo, coi token del
   modulo: stessa cosa disegnata in due modi, e infatti in Progetti si vedeva
   un campo data diverso da quello degli Acquisti o dei Documenti. Il vestito e'
   uno solo, in style-overlays.css, e vale dappertutto.

   Il menu di .oe-dd resta ridefinito qui sotto: e' un elenco a tendina, non un
   calendario, e il fondo del modulo e' scuro. */
.progetti-module .oe-dd-trigger {
    background: var(--pm-panel-3);
    border: 1px solid var(--pm-border);
    color: var(--pm-text);
    border-radius: var(--pm-radius-sm);
}

.progetti-module .oe-dd-menu {
    background: var(--pm-panel-1);
    border: 1px solid var(--pm-border);
}

/* ── Configuratore planimetria ───────────────────────────────────────── */
.pm-cfg-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px 16px;
}

/* Toolbar a gruppi: le azioni sulla planimetria restano insieme anche
   quando la riga va a capo, invece di spezzarsi a meta'. */
.pm-cfg-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 10px 12px;
    background: var(--pm-panel-1);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
}

.pm-cfg-toolbar-gruppo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.pm-cfg-toolbar .pm-btn-primary,
.pm-cfg-toolbar .pm-btn-secondary {
    padding: 8px 14px;
    font-size: 12.5px;
    white-space: nowrap;
}

.pm-cfg-toolbar .pm-btn-secondary.active {
    background: var(--pm-accent-grad);
    color: var(--pm-su-accento);
}

/* Il selettore di vista chiude la toolbar a destra; quando la riga va a capo
   resta comunque allineato a destra invece di attaccarsi alle azioni. */
.pm-cfg-viste {
    margin-left: auto;
}

.pm-cfg-grid {
    display: grid;
    grid-template-columns: minmax(190px, 220px) minmax(0, 1fr) minmax(260px, 300px);
    gap: 14px;
    align-items: start;
}

/* Sotto i 1400px il pannello prodotto scende sotto la pianta invece di
   comprimerla; sotto i 1000px anche la palette. */
@media (max-width: 1400px) {
    .pm-cfg-grid { grid-template-columns: minmax(180px, 210px) minmax(0, 1fr); }
    .pm-cfg-grid > .pm-cfg-cpq-panel { grid-column: 1 / -1; }
}

@media (max-width: 1000px) {
    .pm-cfg-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Le tre viste ─────────────────────────────────────────────────────────
   'planimetria' e' il default e non toglie nulla. 'cliente' spoglia la pagina
   di tutto cio' che e' lavoro interno: palette, scheda prodotto con i prezzi,
   barra di selezione e avvisi di configurazione. 'tecnica' aggiunge le quote
   dell'ambiente e le specifiche dei corpi in legenda. */
.pm-cfg-grid.pm-cfg-vista-cliente {
    grid-template-columns: minmax(0, 1fr);
}

.pm-cfg-vista-cliente .pm-cfg-palette,
.pm-cfg-vista-cliente .pm-cfg-cpq-panel,
.pm-cfg-vista-cliente .pm-cfg-azioni,
.pm-cfg-vista-cliente .pm-cfg-dim-mancante,
.pm-cfg-vista-cliente .pm-cfg-quote,
.pm-cfg-vista-planimetria .pm-cfg-quote {
    display: none;
}

.pm-cfg-legenda-spec {
    display: none;
}

.pm-cfg-vista-tecnica .pm-cfg-legenda-spec {
    display: block;
    font-size: 11px;
    color: var(--pm-text-muted);
    margin-top: 2px;
}

.pm-cfg-legenda-testo {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.pm-cfg-quote {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 8px 12px;
    background: var(--pm-panel-1);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
    font-size: 12px;
    color: var(--pm-text-muted);
}

.pm-cfg-quote span {
    white-space: nowrap;
}

.pm-cfg-palette {
    background: var(--pm-panel-1);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 640px;
    overflow-y: auto;
}

.pm-cfg-palette-title {
    font-weight: 700;
    font-size: 13px;
}

.pm-cfg-palette-filtri {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pm-cfg-palette-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pm-cfg-palette-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: var(--pm-radius-sm);
    background: var(--pm-panel-2);
    cursor: grab;
}

.pm-cfg-palette-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pm-marker-fill);
    flex-shrink: 0;
}

.pm-cfg-palette-nome {
    font-size: 12px;
    font-weight: 600;
}

.pm-cfg-palette-specs {
    font-size: 11px;
    color: var(--pm-text-muted);
}

.pm-cfg-canvas-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.pm-cfg-canvas-wrap {
    position: relative;
    background: var(--pm-panel-1);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
    overflow: hidden;
    touch-action: none;
    /* aspect-ratio impostato inline dalle proporzioni reali della stanza */
}

/* La planimetria riempie il riquadro senza deformarsi ne' perdere risoluzione:
   il contenitore ha gia' le proporzioni del ritaglio. */
.pm-cfg-canvas-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.pm-cfg-canvas-vuoto {
    position: absolute;
    inset: 8px;
    border: 1px dashed color-mix(in srgb, var(--pm-accent-1) 35%, transparent);
    border-radius: var(--pm-radius-sm);
}

.pm-cfg-canvas-piano {
    position: absolute;
    inset: 0;
}

.pm-cfg-canvas-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pm-text-muted);
    font-size: 13px;
    pointer-events: none;
}

/* ── Corpi illuminanti sulla pianta ────────────────────────────────────
   Elementi HTML e non SVG: la posizione e' in percentuale ma la dimensione
   in pixel, quindi restano tondi e leggibili con qualsiasi proporzione. */
.pm-cfg-fixture {
    position: absolute;
    transform: translate(-50%, -50%) rotate(var(--pm-fx-rot, 0deg));
    cursor: grab;
    z-index: 2;
}

.pm-cfg-fixture-corpo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--pm-marker-fill);
    border: 2px solid var(--pm-marker-bordo);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    color: var(--pm-marker-bordo);
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
}

.pm-cfg-fixture.is-barra .pm-cfg-fixture-corpo {
    width: var(--pm-fx-len, 8%);
    min-width: 34px;
    height: 12px;
    border-radius: 6px;
}

/* Alone: resa del fascio di luce, solo a corpo acceso. */
.pm-cfg-fixture-alone {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 92px;
    height: 92px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--pm-marker-fill) 45%, transparent) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.pm-cfg-fixture.is-acceso .pm-cfg-fixture-alone { opacity: 1; }

.pm-cfg-fixture.is-selected { z-index: 3; }

.pm-cfg-fixture.is-selected .pm-cfg-fixture-corpo {
    outline: 2px dashed var(--pm-marker-bordo);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-marker-fill) 55%, transparent),
                0 3px 10px rgba(0, 0, 0, 0.5);
}

.pm-cfg-fixture-rot {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    /* Pastiglia invertita: fondo d'inchiostro e testo del pannello, cosi' si
       ribalta col tema. --pm-su-accento e l'inchiostro DELL'ACCENTO: qui
       sarebbe stato quasi nero su quasi nero. */
    background: var(--pm-marker-bordo);
    color: var(--pm-panel-1);
    font-size: 10px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ── Legenda dei prodotti in pianta ────────────────────────────────── */
.pm-cfg-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 10px;
    background: var(--pm-panel-1);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    font-size: 11.5px;
    color: var(--pm-text-muted);
}

.pm-cfg-legenda-voce {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pm-cfg-legenda-voce strong { color: var(--pm-text); }

.pm-cfg-legenda-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--pm-marker-fill);
    border: 2px solid var(--pm-marker-bordo);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    color: var(--pm-marker-bordo);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.pm-cfg-distribute-panel {
    background: var(--pm-panel-1);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pm-cfg-distribute-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 13px;
}

.pm-cfg-cpq-panel {
    background: var(--pm-panel-1);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pm-cfg-cpq-empty {
    align-items: center;
    text-align: center;
    color: var(--pm-text-muted);
    justify-content: center;
    min-height: 200px;
}

.pm-cfg-cpq-empty i {
    font-size: 22px;
    color: var(--pm-accent-1);
}

.pm-cfg-cpq-empty p {
    font-size: 12px;
    margin: 0;
}

.pm-cfg-cpq-photo {
    height: 100px;
    border-radius: var(--pm-radius-sm);
    background: var(--pm-panel-3);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--pm-text-muted);
    font-size: 12px;
    overflow: hidden;
}

.pm-cfg-cpq-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pm-cfg-cpq-categoria {
    font-size: 11px;
    color: var(--pm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pm-cfg-cpq-nome {
    font-weight: 700;
    font-size: 15px;
    font-family: var(--pm-font-title);
}

.pm-cfg-cpq-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--pm-text-muted);
    background: var(--pm-panel-2);
    border-radius: var(--pm-radius-sm);
    padding: 8px 10px;
}

.pm-cfg-cpq-row2 {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.pm-cfg-cpq-label {
    display: block;
    font-size: 11px;
    color: var(--pm-text-muted);
}

.pm-cfg-cpq-value {
    display: block;
    font-weight: 700;
    font-size: 14px;
}

.pm-cfg-cpq-varianti-title {
    font-size: 12px;
    font-weight: 700;
    margin-top: 4px;
}

.pm-cfg-cpq-actions {
    display: flex;
    gap: 8px;
}

.pm-cfg-cpq-actions .pm-btn-secondary {
    flex: 1;
    justify-content: center;
}

.pm-cfg-cpq-hint {
    font-size: 11px;
    color: var(--pm-text-muted);
    opacity: 0.8;
}

@media (max-width: 1100px) {
    .pm-cfg-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Azioni dell'intestazione ─────────────────────────────────────────── */
.pm-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Ritaglio da planimetria generale ─────────────────────────────────── */
.pm-cfg-ritaglio {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pm-cfg-ritaglio-hint {
    font-size: 13px;
    color: var(--pm-text-muted);
    margin: 0;
}

.pm-cfg-ritaglio-zoom {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--pm-text-muted);
    width: fit-content;
    background: var(--pm-panel-1);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    padding: 4px 10px;
}

/* Contenitore con dimensione fissa e scroll: quando lo zoom supera il 100%
   la planimetria trabocca ed è possibile scorrere per raggiungere ogni
   angolo mantenendo il rettangolo di ritaglio preciso. */
.pm-cfg-ritaglio-scroll {
    max-width: 100%;
    height: 60vh;
    overflow: auto;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
    background: var(--pm-panel-1);
}

.pm-cfg-ritaglio-frame {
    position: relative;
    touch-action: none;
    /* width impostata inline in percentuale (zoom) dal markup */
}

.pm-cfg-ritaglio-img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    pointer-events: none;
}

.pm-cfg-ritaglio-rect {
    position: absolute;
    border: 2px solid var(--pm-accent-1);
    background: color-mix(in srgb, var(--pm-accent-1) 12%, transparent);
    cursor: move;
    /* Velatura del ritaglio: scura nei due temi, come tutti i fondali dell'app. */
    box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.55);
}

.pm-cfg-ritaglio-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--pm-accent-1);
    border: 2px solid var(--pm-bg);
    border-radius: 50%;
}

.pm-cfg-ritaglio-handle.nw { top: -8px; left: -8px; cursor: nwse-resize; }
.pm-cfg-ritaglio-handle.ne { top: -8px; right: -8px; cursor: nesw-resize; }
.pm-cfg-ritaglio-handle.sw { bottom: -8px; left: -8px; cursor: nesw-resize; }
.pm-cfg-ritaglio-handle.se { bottom: -8px; right: -8px; cursor: nwse-resize; }

.pm-cfg-ritaglio-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.pm-form-hint {
    font-size: 11px;
    color: var(--pm-text-muted);
}

/* Quanti corpi servono, dentro il modale "Componi preventivo". E' il numero da
   cui esce la riga: sta piu' in evidenza del testo che lo spiega. */
.pm-composizione-esito {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--pm-radius-sm);
    background: var(--pm-panel-3);
    border: 1px solid var(--pm-border);
    font-size: 13px;
    color: var(--pm-text);
}

.pm-composizione-esito strong {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
}

.pm-composizione-esito span {
    flex: 1 1 100%;
    font-size: 12px;
    color: var(--pm-text-muted);
}

/* ── Riquadro costi e margine (solo con permesso dedicato) ───────────── */
.pm-preventivo-margine {
    max-width: 360px;
    margin-left: auto;
    background: var(--pm-panel-2);
    border: 1px dashed var(--pm-border);
    border-radius: var(--pm-radius-md);
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pm-margine-head {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pm-text-muted);
    margin-bottom: 4px;
}

.pm-margine-valore {
    font-weight: 800;
    border-top: 1px solid var(--pm-border);
    padding-top: 6px;
    margin-top: 2px;
}

.pm-margine-valore.is-positive { color: var(--pm-guide-green); }
.pm-margine-valore.is-negative { color: var(--pm-danger); }

.pm-margine-nota {
    font-size: 11px;
    color: var(--pm-text-muted);
    line-height: 1.4;
    margin-top: 4px;
}

.pm-cfg-cpq-codice {
    font-size: 11px;
    font-family: ui-monospace, monospace;
    color: var(--pm-text-muted);
}

/* ── Dimensionamento ambiente ─────────────────────────────────────────── */
.pm-cfg-dim-mancante {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: var(--pm-text-muted);
    background: var(--pm-panel-2);
    border: 1px dashed var(--pm-border);
    border-radius: var(--pm-radius-sm);
    padding: 10px 12px;
}

.pm-cfg-dim-mancante input {
    width: 90px;
    background: var(--pm-panel-3);
    border: 1px solid var(--pm-border);
    border-radius: 6px;
    color: var(--pm-text);
    padding: 5px 8px;
}

.pm-cfg-dim-esito {
    border-radius: var(--pm-radius-sm);
    padding: 12px;
    font-size: 12px;
    line-height: 1.5;
}

.pm-cfg-dim-esito.is-attesa {
    background: var(--pm-panel-2);
    color: var(--pm-text-muted);
}

.pm-cfg-dim-esito.is-errore {
    background: color-mix(in srgb, var(--pm-danger) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--pm-danger) 35%, transparent);
    color: var(--pm-text);
}

.pm-cfg-dim-esito.is-ok {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--pm-panel-3);
    border: 1px solid var(--pm-border);
}

.pm-cfg-dim-numero {
    font-family: var(--pm-font-title);
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: var(--pm-accent-1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pm-cfg-dim-numero span {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pm-text-muted);
    margin-top: 2px;
}

.pm-cfg-dim-dettaglio {
    color: var(--pm-text-muted);
}

.pm-cfg-dim-dettaglio strong {
    color: var(--pm-text);
}

.pm-cfg-dim-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11px;
    color: var(--pm-text-muted);
    line-height: 1.4;
}

.pm-cfg-ritaglio-scala {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: var(--pm-text-muted);
    background: var(--pm-panel-1);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    padding: 10px 12px;
}

.pm-cfg-ritaglio-scala input {
    width: 110px;
    background: var(--pm-panel-3);
    border: 1px solid var(--pm-border);
    border-radius: 6px;
    color: var(--pm-text);
    padding: 6px 8px;
}

.pm-cfg-ritaglio-scala-hint {
    flex: 1 1 100%;
    font-size: 11px;
    opacity: 0.85;
}

/* Vale su qualunque testo di servizio: l'avviso non e' un tipo di riga, e' un
   tono. Lo usano l'hint della planimetria e l'esito mancante del calcolo. */
.pm-avviso {
    color: var(--pm-accent-1);
}

/* ── Selezione multipla, guide di allineamento, azioni ────────────────── */
.pm-cfg-rubber {
    position: absolute;
    border: 1px dashed var(--pm-marker-fill);
    background: color-mix(in srgb, var(--pm-marker-fill) 12%, transparent);
    pointer-events: none;
    z-index: 4;
}

/* Compaiono mentre si trascina: verde, per distinguerle dai corpi. */
.pm-cfg-guida {
    position: absolute;
    background: var(--pm-guide-green);
    pointer-events: none;
    z-index: 1;
}

.pm-cfg-guida.is-v {
    top: 0;
    bottom: 0;
    width: 1px;
    transform: translateX(-0.5px);
}

.pm-cfg-guida.is-o {
    left: 0;
    right: 0;
    height: 1px;
    transform: translateY(-0.5px);
}

.pm-cfg-azioni {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 42px;
    padding: 6px 10px;
    background: var(--pm-panel-2);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
}

/* A selezione vuota resta al suo posto ma si fa da parte visivamente. */
.pm-cfg-azioni.is-vuota {
    background: transparent;
    border-style: dashed;
}

.pm-cfg-azioni.is-vuota .pm-cfg-azioni-conteggio {
    color: var(--pm-text-muted);
    font-weight: 500;
}

.pm-cfg-azioni-conteggio {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--pm-text);
    padding-right: 4px;
}

.pm-cfg-azioni-sep {
    width: 1px;
    height: 18px;
    background: var(--pm-border);
    margin: 0 4px;
}

.pm-cfg-azione {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--pm-text-muted);
    font-size: 12px;
    cursor: pointer;
}

.pm-cfg-azione:hover:not(:disabled) {
    background: var(--pm-panel-3);
    color: var(--pm-text);
}

.pm-cfg-azione:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ── Board delle zone ──────────────────────────────────────────────────────
   Il preventivo si compone trascinando i prodotti dentro le zone, senza pianta.
   La palette riusa .pm-cfg-palette del configuratore: e' lo stesso gesto e deve
   avere lo stesso aspetto. */

.pm-zone-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.pm-zone-palette {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 180px);
}

.pm-zone-palette .pm-cfg-palette-item.is-dragging {
    opacity: 0.45;
}

.pm-zone-palette-vuota {
    font-size: 12px;
    color: var(--pm-text-muted);
    padding: 6px 2px;
}

.pm-zone-conteggio {
    font-size: 11px;
    font-weight: 600;
    color: var(--pm-text-muted);
}

.pm-zone-cerca {
    width: 100%;
    padding: 6px 9px;
    font-family: inherit;
    font-size: 12px;
    color: var(--pm-text);
    background: var(--pm-panel-2);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
}

.pm-zone-cerca:focus {
    outline: none;
    border-color: var(--pm-accent-1);
}

/* La voce di catalogo porta quello che serve per decidere: foto, prezzo,
   giacenza e — a chi puo' vederlo — margine. */
.pm-zone-voce {
    display: flex;
    align-items: center;
    gap: 9px;
}

.pm-zone-voce-foto {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    object-fit: contain;
    border-radius: var(--pm-radius-sm);
    background: var(--pm-panel-2);
    border: 1px solid var(--pm-border);
}

.pm-zone-voce-foto--vuota {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pm-text-muted);
    font-size: 12px;
}

.pm-zone-voce-corpo {
    min-width: 0;
    flex: 1;
}

.pm-zone-voce-riga {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.pm-zone-voce-prezzo {
    font-size: 12px;
    font-weight: 700;
    color: var(--pm-text);
}

.pm-zone-scorta,
.pm-zone-margine,
.pm-zone-no-lumen {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Discreta apposta: non e' un errore del prodotto, e' un dato mancante che
   riguarda solo chi lo userebbe nel calcolatore. */
.pm-zone-no-lumen {
    color: var(--pm-text-muted);
    background: var(--pm-panel-2);
    border: 1px dashed var(--pm-border);
}

.pm-zone-scorta {
    color: var(--pm-guide-green);
    background: color-mix(in srgb, var(--pm-guide-green) 20%, transparent);
}

.pm-zone-scorta.is-scarso {
    color: var(--pm-accent-1);
    background: color-mix(in srgb, var(--pm-accent-1) 14%, transparent);
}

.pm-zone-scorta.is-esaurito {
    color: var(--pm-danger);
    background: color-mix(in srgb, var(--pm-danger) 14%, transparent);
}

.pm-zone-margine {
    color: var(--pm-text-muted);
    background: var(--pm-panel-2);
    border: 1px solid var(--pm-border);
}

.pm-zone-margine.is-negativo {
    color: var(--pm-danger);
    border-color: color-mix(in srgb, var(--pm-danger) 40%, transparent);
}

.pm-zona-prezzo-input {
    width: 68px;
    padding: 3px 4px;
    text-align: right;
    font-family: inherit;
    font-size: 12px;
    color: var(--pm-text);
    background: var(--pm-panel-2);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
}

.pm-zona-prezzo-input:focus {
    outline: none;
    border-color: var(--pm-accent-1);
}

.pm-zona-margine {
    font-size: 11px;
    font-weight: 600;
    color: var(--pm-text-muted);
    padding: 5px 7px;
    border: 1px dashed var(--pm-border);
    border-radius: var(--pm-radius-sm);
}

.pm-zona-margine.is-negativo {
    color: var(--pm-danger);
    border-color: color-mix(in srgb, var(--pm-danger) 40%, transparent);
}

.pm-zone-board {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.pm-zone-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.pm-zona-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--pm-panel-1);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
    transition: border-color 0.15s ease, background 0.15s ease;
}

/* Il bersaglio si dichiara mentre lo si sorvola: senza, non si capisce quale
   zona prendera' il prodotto che si sta trascinando. */
.pm-zona-card.is-drop {
    border-color: var(--pm-accent-1);
    background: var(--pm-panel-2);
}

.pm-zona-card--orfana {
    border-style: dashed;
}

.pm-zona-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pm-zona-nome,
.pm-zona-nome-input {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--pm-text);
}

.pm-zona-nome-input {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--pm-radius-sm);
    padding: 3px 6px;
    font-family: inherit;
}

.pm-zona-nome-input:hover {
    border-color: var(--pm-border);
}

.pm-zona-nome-input:focus {
    outline: none;
    border-color: var(--pm-accent-1);
    background: var(--pm-panel-2);
}

.pm-zona-conta {
    font-size: 11px;
    color: var(--pm-text-muted);
    white-space: nowrap;
}

.pm-zona-righe {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 54px;
}

.pm-zona-vuota {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 8px;
    text-align: center;
    font-size: 12px;
    color: var(--pm-text-muted);
    border: 1px dashed var(--pm-border);
    border-radius: var(--pm-radius-sm);
}

/* nome · quantita · prezzo · totale · sostituisci · cestino */
.pm-zona-riga {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto auto;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    border-radius: var(--pm-radius-sm);
}

.pm-zona-riga:hover {
    background: var(--pm-panel-2);
}

.pm-zona-riga-nome {
    font-size: 13px;
    color: var(--pm-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-zona-qty {
    display: flex;
    align-items: center;
    gap: 2px;
}

.pm-zona-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 10px;
    color: var(--pm-text);
    background: var(--pm-panel-2);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    cursor: pointer;
}

.pm-zona-qty-btn:hover {
    color: var(--pm-text);
    border-color: var(--pm-accent-1);
}

.pm-zona-qty-input {
    width: 46px;
    padding: 3px 4px;
    text-align: center;
    font-family: inherit;
    font-size: 12px;
    color: var(--pm-text);
    background: var(--pm-panel-2);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
}

.pm-zona-qty-input:focus {
    outline: none;
    border-color: var(--pm-accent-1);
}

.pm-zona-qty-fissa {
    font-size: 12px;
    color: var(--pm-text-muted);
}

.pm-zona-riga-totale {
    font-size: 12px;
    font-weight: 700;
    color: var(--pm-text);
    white-space: nowrap;
}

.pm-zona-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid var(--pm-border);
    font-size: 12px;
    color: var(--pm-text-muted);
}

.pm-zona-foot strong {
    font-size: 14px;
    color: var(--pm-text);
}

.pm-zona-azioni {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pm-zone-totale {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--pm-panel-1);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
    font-size: 13px;
    color: var(--pm-text);
}

.pm-zone-totale strong {
    font-size: 18px;
    color: var(--pm-text);
}

/* Sotto i 900px la palette non regge accanto alla board: passa sopra, e le zone
   diventano una colonna sola. */
@media (max-width: 900px) {
    .pm-zone-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .pm-zone-palette {
        position: static;
        max-height: 320px;
    }
}

/* ── Varianti d'offerta ────────────────────────────────────────────────────
   Una barra di pastiglie, che compare solo quando le varianti sono piu' d'una;
   accanto i comandi per crearne, rinominarle e dire quale ha scelto il cliente. */
.pm-varianti {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 0 2px;
}

.pm-varianti-azione {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--pm-text-muted);
    background: transparent;
    border: 1px dashed var(--pm-border);
    border-radius: var(--pm-radius-sm);
    cursor: pointer;
}

.pm-varianti-azione:hover {
    color: var(--pm-text);
    border-color: var(--pm-accent-1);
    border-style: solid;
}

/* ── Produzione: il fabbisogno per fornitore ───────────────────────────────
   Un gruppo per fornitore, e il gruppo dice da solo se arriva in tempo. */
.pm-ord-gruppo {
    margin-top: 12px;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
    padding: 12px;
}

.pm-ord-gruppo.is-ritardo {
    border-color: color-mix(in srgb, var(--pm-danger) 55%, transparent);
}

.pm-ord-gruppo.is-incerto {
    border-style: dashed;
}

.pm-ord-gruppo-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.pm-ord-fornitore {
    font-size: 14px;
    font-weight: 700;
    color: var(--pm-text);
}

.pm-ord-tempi {
    font-size: 11px;
    color: var(--pm-text-muted);
}

.pm-ord-gruppo.is-ritardo .pm-ord-tempi strong {
    color: var(--pm-danger);
}

.pm-ord-tabella {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.pm-ord-tabella th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pm-text-muted);
    border-bottom: 1px solid var(--pm-border);
    padding: 5px 6px;
}

.pm-ord-tabella td {
    border-bottom: 1px solid var(--pm-border);
    padding: 6px;
    color: var(--pm-text);
}

.pm-ord-tabella .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pm-ord-codice {
    font-size: 10px;
    color: var(--pm-text-muted);
}

.pm-ord-gruppo-foot {
    text-align: right;
    padding-top: 8px;
    font-size: 12px;
    color: var(--pm-text-muted);
}

/* ── Archivio documenti dei clienti ────────────────────────────────────────
   Le righe portano il tipo come badge (.pm-badge--file + .pm-ft-*) e
   l'origine come badge (Server / PROD); i comandi piccoli sono
   .ui-btn .ui-btn-sm .ui-btn-ghost di style-workspaces.css. Tutto dai token
   --pm-*, senza colori letterali e senza override forzati. */
.pm-arch {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pm-arch-testa {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.pm-arch-testa .pm-arch-ricerca { flex: 1; min-width: 0; }

/* La riga di stato: compare solo quando c'e' qualcosa da dire. */
.pm-arch-stato {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--pm-radius-sm);
    font-size: 13px;
    border: 1px solid var(--pm-border);
}
.pm-arch-stato--attesa {
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    color: var(--pm-text);
    border-color: color-mix(in srgb, var(--warning) 40%, transparent);
}
.pm-arch-stato--ko {
    background: color-mix(in srgb, var(--pm-danger) 10%, transparent);
    color: var(--pm-text);
    border-color: color-mix(in srgb, var(--pm-danger) 35%, transparent);
}

/* La ricerca. */
.pm-arch-ricerca {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--pm-panel-2);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    padding: 0 12px;
}
.pm-arch-ricerca i { color: var(--pm-text-muted); font-size: 13px; }
.pm-arch-ricerca input {
    flex: 1;
    min-width: 0;
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--pm-text);
    font-family: var(--pm-font-body);
    font-size: 14px;
    padding: 10px 0;
}
.pm-arch-ricerca input::placeholder { color: var(--pm-text-muted); }

/* Il filo di navigazione. */
.pm-arch-briciole {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 13px;
}
.pm-arch-briciola {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--pm-text-muted);
    font-family: var(--pm-font-body);
    font-size: 13px;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
}
.pm-arch-briciola:hover { color: var(--pm-accent-1); background: var(--pm-panel-2); }
.pm-arch-sep { color: var(--pm-text-muted); opacity: 0.6; }
.pm-arch-qui { color: var(--pm-text); font-weight: 600; padding: 4px 6px; }

/* Le righe. */
.pm-arch-list { display: flex; flex-direction: column; gap: 6px; }
.pm-arch-riga {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--pm-panel-1);
    border: 1px solid var(--pm-border-soft);
    border-radius: var(--pm-radius-md);
    min-width: 0;
}
.pm-arch-riga--dir { cursor: pointer; }
.pm-arch-riga--dir:hover { border-color: var(--pm-server-border); background: var(--pm-panel-3); }
.pm-arch-testo { flex: 1; min-width: 0; }
.pm-arch-testo strong { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-arch-testo p { margin: 2px 0 0; font-size: 11.5px; color: var(--pm-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-arch-meta { display: flex; align-items: center; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.pm-arch-riga--presa { opacity: 0.45; }
.pm-arch-riga--bersaglio {
    border-color: var(--pm-accent-1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--pm-accent-1) 30%, transparent);
}

.pm-arch-nota {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--warning);
}

.pm-arch-comandi {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pm-arch-vuoto {
    padding: 28px;
    text-align: center;
    color: var(--pm-text-muted);
    font-size: 13px;
}
.pm-arch-altri { align-self: center; }

/* Il selettore delle cartelle, nel modale. */
.pm-arch-modale { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; }
.pm-arch-modale__t { margin: 0; color: var(--pm-text-muted); font-size: 13px; }
.pm-arch-scelte {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 46vh;
    overflow-y: auto;
}
.pm-arch-scelta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--pm-panel-2);
    border: 1px solid transparent;
    border-radius: var(--pm-radius-sm);
    color: var(--pm-text);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    width: 100%;
}
.pm-arch-scelta:hover { border-color: var(--pm-accent-1); background: var(--pm-panel-3); }
.pm-arch-scelta i { color: var(--pm-accent-1); }
/* Il nome di una cartella non ha spazi dove andare a capo: senza min-width: 0
   la colonna del testo si rifiuta di stringersi e spinge la pastiglia oltre il
   bordo del modale. E' la stessa lezione delle righe dei quaderni. */
.pm-arch-scelta__n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-arch-scelta--sugg { border-color: var(--pm-border); }
.pm-arch-scelta__b {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--pm-accent-grad);
    color: var(--pm-su-accento);
    border-radius: 999px;
    padding: 2px 8px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Le viste del redesign (15 settembre 2026): primitive condivise, home,
   ricerca, elenco, bacheca, scadenzario, riepilogo, documenti, produzione,
   archivio. Le classi di stato (.pm-st-*) e di tipo (.pm-ft-*) stanno in
   testa al file.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Primitive ───────────────────────────────────────────────────────────── */
.pm-mut { color: var(--pm-text-muted); }
.pm-faint { color: var(--pm-text-faint); }
.pm-b { font-weight: 700; }
.pm-small { font-size: 12px; }
.pm-tiny { font-size: 11px; }
.pm-grow { flex: 1; min-width: 0; }
.pm-cluster { display: flex; align-items: center; gap: 10px; }
.pm-cluster--stretto { gap: 6px; }
.pm-spread { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pm-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pm-text-muted);
}
.pm-num { font-family: var(--pm-font-title); font-weight: 700; line-height: 1; }
.pm-lede { max-width: 620px; line-height: 1.5; }
.pm-title-xl { font-size: 30px; letter-spacing: -0.01em; }
.pm-server-ink { color: var(--pm-server-ink); }

.pm-panel {
    background: var(--pm-panel-1);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
}

.pm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--s-bar, var(--pm-accent-1)); flex: none; }
.pm-dot--prod { background: var(--pm-accent-1); }
.pm-dot--server { background: var(--pm-server); }

.pm-bar {
    display: inline-block;
    width: 72px;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pm-text-muted) 18%, transparent);
    overflow: hidden;
    flex: none;
    vertical-align: middle;
}
.pm-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--s-bar, var(--pm-accent-1)); }
.pm-bar--grow { flex: 1 1 0; width: auto; min-width: 0; }

.pm-donut { flex: none; }
.pm-donut-track { fill: none; stroke: color-mix(in srgb, var(--pm-text-muted) 18%, transparent); stroke-width: 5; }
.pm-donut-fill { fill: none; stroke: var(--s-bar, var(--pm-accent-1)); stroke-width: 5; stroke-linecap: round; }
.pm-donut-label { font-family: var(--pm-font-body); font-size: 10.5px; font-weight: 700; fill: var(--pm-text); }

.pm-due { font-size: 12.5px; white-space: nowrap; }
.pm-due--vicina { color: var(--warning); font-weight: 700; }
.pm-due--scaduta { color: var(--pm-danger); font-weight: 700; }
.pm-due--nessuna { color: var(--pm-text-faint); }

.pm-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--pm-text-muted);
}
.pm-crumb b { color: var(--pm-text); font-weight: 600; }
.pm-crumb-sep { font-size: 9px; opacity: 0.6; }
.pm-crumb-link {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--pm-text-muted);
    font: inherit;
    cursor: pointer;
}
.pm-crumb-link:hover { color: var(--pm-accent-1); }
.pm-crumb + .pm-title { margin-top: 6px; }

.pm-rowicon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-size: 14px;
}
.pm-rowicon--prod { background: var(--pm-accent-wash); color: var(--pm-accent-1); }
.pm-rowicon--server { background: var(--pm-server-wash); color: var(--pm-server-ink); }

.pm-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    border-radius: var(--pm-radius-md);
    cursor: pointer;
    transition: background 0.12s;
}
.pm-row:hover { background: var(--pm-panel-3); }
.pm-row-title { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-row-sub { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-row-prog { display: inline-flex; }
.pm-row-money { width: 92px; text-align: right; font-size: 12.5px; font-weight: 700; white-space: nowrap; }

.pm-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    padding: 6px 4px;
    color: var(--pm-text-muted);
    font: 600 13px var(--pm-font-body);
    cursor: pointer;
    flex: none;
}
.pm-back:hover { color: var(--pm-text); }

.pm-tiles { display: grid; gap: 13px; }
.pm-tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pm-tiles-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.pm-tile {
    background: var(--pm-panel-1);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    min-width: 0;
}
.pm-tile:hover { border-color: var(--pm-accent-1); transform: translateY(-2px); box-shadow: var(--elev-2); }
.pm-tile-top { display: flex; align-items: flex-start; gap: 11px; }
.pm-tile-title { font-size: 13.5px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pm-tile-sub { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-tile-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 9px;
    border-top: 1px solid var(--pm-border-soft);
    margin-top: auto;
}
.pm-tile-icona { font-size: 20px; color: var(--pm-server-ink); }
.pm-tile--server { background: var(--pm-server-wash); border-color: var(--pm-server-border); gap: 8px; }
.pm-tile--server:hover { border-color: var(--pm-server-ink); }
.pm-tile--add {
    background: transparent;
    border-style: dashed;
    border-width: 1.5px;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 5px;
    color: var(--pm-server-ink);
}
.pm-tile--attesa,
.pm-tile--vuota { cursor: default; grid-column: 1 / -1; align-items: center; text-align: center; font-size: 13px; }
.pm-tile--attesa:hover,
.pm-tile--vuota:hover { transform: none; box-shadow: none; border-color: var(--pm-border); }
.pm-tile--server.pm-tile--vuota:hover { border-color: var(--pm-server-border); }

/* ── Home ────────────────────────────────────────────────────────────────── */
.pm-home { display: flex; flex-direction: column; gap: 22px; }
.pm-home-testa { display: flex; flex-direction: column; gap: 4px; }
.pm-home-testa .pm-title-xl { margin-top: 4px; }

.pm-bigsearch {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 780px;
    padding: 4px 8px 4px 20px;
    background: var(--pm-panel-1);
    border: 1px solid var(--pm-border);
    border-radius: 999px;
    box-shadow: var(--elev-2);
}
.pm-bigsearch > i { color: var(--pm-accent-1); font-size: 17px; }
.pm-bigsearch input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 12px 0;
    color: var(--pm-text);
    font: 400 16px var(--pm-font-body);
}
.pm-bigsearch input::placeholder { color: var(--pm-text-faint); }
.pm-bigsearch input::-webkit-search-cancel-button { appearance: none; }

.pm-shelf { display: flex; flex-direction: column; gap: 11px; }
.pm-shelf-head { display: flex; align-items: center; gap: 10px; font-size: 14px; flex-wrap: wrap; }
.pm-shelf-note { font-size: 12.5px; }
.pm-shelf-link {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--pm-accent-1);
    font: 700 12.5px var(--pm-font-body);
    cursor: pointer;
    white-space: nowrap;
}
.pm-shelf-link:hover { text-decoration: underline; }
.pm-shelf-link--server { color: var(--pm-server-ink); }

/* ── Ricerca ─────────────────────────────────────────────────────────────── */
.pm-ricerca-pagina { display: flex; flex-direction: column; gap: 14px; }
.pm-ricerca-testa { display: flex; align-items: center; gap: 12px; }
.pm-ricerca-testa .pm-ricerca { max-width: none; }
.pm-lista-filtri--sottile { gap: 8px 12px; }
.pm-results { display: flex; flex-direction: column; gap: 20px; }
.pm-res-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.pm-res-documenti { display: flex; flex-direction: column; gap: 6px; }

/* ── Elenco ──────────────────────────────────────────────────────────────── */
.pm-viste { display: flex; gap: 6px; }
.pm-lista-blocco { min-width: 0; }

.pm-list { display: flex; flex-direction: column; overflow: hidden; }
.pm-list-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--pm-border-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pm-text-muted);
}
.pm-list-toolbar {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--pm-border-soft);
}
.pm-list-body { padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.pm-list-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; border-top: 1px solid var(--pm-border-soft); }
.pm-tab-row { gap: 14px; padding: 10px; }

.pm-c-proj { flex: 1 1 260px; min-width: 0; }
.pm-c-client { width: 190px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-c-state { width: 150px; }
.pm-c-prog { width: 120px; display: flex; align-items: center; gap: 8px; }
.pm-c-due { width: 84px; }
.pm-c-money { width: 104px; text-align: right; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pm-c-docs { width: 60px; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 11.5px; color: var(--pm-text-muted); }
.pm-c-end { width: 22px; display: flex; align-items: center; justify-content: flex-end; }
.pm-list-head .pm-c-prog,
.pm-list-head .pm-c-docs { display: block; }

/* ── Bacheca ─────────────────────────────────────────────────────────────── */
.pm-board { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.pm-board-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; border-radius: var(--pm-radius-md); padding: 4px; transition: background 0.12s; }
.pm-board-col.is-drop { background: var(--s-bg); }
.pm-board-head { display: flex; align-items: center; gap: 8px; padding: 0 3px; }
.pm-board-items { display: flex; flex-direction: column; gap: 10px; min-height: 60px; }
.pm-board-card { padding: 14px; gap: 8px; }
.pm-board-card.is-dragging { opacity: 0.45; }
.pm-board-vuota { padding: 14px; text-align: center; color: var(--pm-text-faint); border: 1.5px dashed var(--pm-border-soft); border-radius: var(--pm-radius-md); }
.pm-st-chiuso .pm-board-card { opacity: 0.78; }

/* ── Scadenzario ─────────────────────────────────────────────────────────── */
.pm-gantt { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.pm-gantt-head { display: flex; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pm-text-muted); }
.pm-gantt-scale { flex: 1; display: flex; }
.pm-gantt-scale span { flex: 1; }
.pm-gantt-name { width: 240px; flex: none; padding-right: 14px; min-width: 0; }
.pm-gantt-name > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-gantt-body { position: relative; display: flex; flex-direction: column; gap: 8px; }
.pm-gantt-grid { position: absolute; left: 240px; right: 0; top: 0; bottom: 0; display: flex; pointer-events: none; }
.pm-gantt-grid span { flex: 1; border-left: 1px solid var(--pm-border-soft); }
.pm-gantt-oggi { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--pm-accent-1); opacity: 0.7; }
.pm-gantt-row { position: relative; z-index: 1; display: flex; align-items: center; padding: 4px 0; border-radius: var(--pm-radius-md); cursor: pointer; }
.pm-gantt-row:hover { background: var(--pm-panel-3); }
.pm-gantt-track { flex: 1; position: relative; height: 30px; }
.pm-gantt-bar {
    position: absolute;
    top: 4px;
    height: 23px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--s-bar);
    color: var(--pm-su-accento);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 8px;
}
.pm-st-bozza .pm-gantt-bar,
.pm-st-chiuso .pm-gantt-bar { color: var(--pm-panel-1); }
.pm-gantt-bar--dopo { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.pm-gantt-bar--prima,
.pm-gantt-bar--scaduta { background: var(--pm-danger); color: var(--pm-panel-1); }
.pm-gantt-senza { position: absolute; top: 9px; left: 12px; }
.pm-gantt-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pm-legend-swatch { width: 12px; height: 7px; border-radius: 999px; background: var(--s-bar); }

/* ── Riepilogo ───────────────────────────────────────────────────────────── */
.pm-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.pm-detail-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pm-detail-aside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pm-kpi { padding: 16px; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.pm-kpi-num { font-size: 24px; }
.pm-kpi-data { display: flex; }

.pm-aree-panel { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.pm-aree-panel .pm-spread { padding-bottom: 8px; }
.pm-area-riga {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-top: 1px solid var(--pm-border-soft);
    cursor: pointer;
    border-radius: var(--pm-radius-sm);
}
.pm-area-riga:hover { background: var(--pm-panel-3); }
.pm-area-n {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 10px;
    background: var(--pm-accent-wash);
    color: var(--pm-accent-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}
.pm-area-bar .pm-bar { width: 90px; }
.pm-area-amt { width: 96px; text-align: right; white-space: nowrap; }

.pm-panel-server {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--pm-server-wash);
    border: 1px solid var(--pm-server-border);
    border-radius: var(--pm-radius-md);
}
.pm-panel-server--vuoto { background: transparent; border-style: dashed; }
.pm-panel-server--largo { max-width: 560px; }
.pm-path { font-size: 11.5px; color: var(--pm-server-ink); word-break: break-all; }
.pm-btn-server {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--pm-radius-sm);
    border: none;
    background: var(--pm-server-ink);
    color: var(--pm-panel-1);
    font: 700 13px var(--pm-font-body);
    cursor: pointer;
}
.pm-btn-server:hover { filter: brightness(1.1); }
.pm-note-panel { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.pm-note-testo { margin: 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }

/* ── Documenti ───────────────────────────────────────────────────────────── */
.pm-doc-list .pm-list-body { gap: 6px; }
.pm-carica { cursor: pointer; }

/* ── Produzione ──────────────────────────────────────────────────────────── */
.pm-two-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.pm-col-panel { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pm-fatti { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.pm-fatti > div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--pm-border-soft); }

/* ── Larghezze ───────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
    .pm-tiles-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pm-tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pm-c-docs, .pm-list-head .pm-c-docs { display: none; }
}
@media (max-width: 1100px) {
    .pm-detail, .pm-two-cols { grid-template-columns: minmax(0, 1fr); }
    .pm-c-client { width: 140px; }
    .pm-c-money, .pm-list-head .pm-c-money { display: none; }
    .pm-gantt-name { width: 170px; }
    .pm-gantt-grid { left: 170px; }
}
@media (max-width: 900px) {
    .pm-tiles-4, .pm-tiles-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pm-c-client, .pm-c-prog, .pm-list-head .pm-c-prog { display: none; }
    .pm-c-state { width: auto; }
}

/* ── Archivio: le card dei clienti e la cartella con albero e pannello ─────── */
.pm-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pm-cluster--wrap { flex-wrap: wrap; }
.pm-pill--server.active { background: var(--pm-server-ink); border-color: var(--pm-server-ink); color: var(--pm-panel-1); }
.pm-rowicon--lg { width: 44px; height: 44px; border-radius: 14px; font-size: 18px; }
.pm-client-card { padding: 18px; gap: 12px; }
.pm-client-card:hover { border-color: var(--pm-server-ink); }
.pm-client-card.pm-arch-riga--bersaglio { border-color: var(--pm-accent-1); }
.pm-client-name { font-size: 14px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.pm-folder { display: grid; grid-template-columns: 212px minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.pm-tree { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; min-width: 0; }
.pm-tree .pm-eyebrow { margin-bottom: 6px; }
.pm-tree-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--pm-radius-sm);
    cursor: pointer;
    min-width: 0;
}
.pm-tree-item > span.pm-grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-tree-item:hover { background: var(--pm-server-wash); }
.pm-tree-item.pm-arch-riga--bersaglio { background: var(--pm-server-wash); box-shadow: 0 0 0 2px var(--pm-server-border); }
.pm-tree-vuoto { padding: 6px 10px; }
.pm-tree-add {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: transparent;
    border: 1.5px dashed var(--pm-server-border);
    border-radius: var(--pm-radius-sm);
    color: var(--pm-server-ink);
    font: 600 12px var(--pm-font-body);
    cursor: pointer;
}
.pm-folder-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pm-arch-riga[data-arch-seleziona] { cursor: pointer; }
.pm-arch-riga.is-selected { border-color: var(--pm-server-ink); background: var(--pm-server-wash); }

.pm-preview {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--pm-panel-1);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-md);
    min-width: 0;
    position: sticky;
    top: 12px;
}
.pm-preview-canvas {
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--pm-radius-md);
    background: var(--f-bg, var(--pm-panel-3));
    color: var(--f-fg, var(--pm-text-muted));
}
.pm-preview-canvas--cartella { background: var(--pm-server-wash); color: var(--pm-server-ink); font-size: 30px; }
.pm-badge--grande { font-size: 13px; padding: 7px 14px; }
.pm-preview-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.pm-preview-name { font-size: 13.5px; line-height: 1.3; word-break: break-word; }
.pm-meta { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; }
.pm-meta > div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.pm-meta dt, .pm-meta dd { margin: 0; }
.pm-meta dd { text-align: right; min-width: 0; }
.pm-path-sm { font-size: 10.5px; word-break: break-all; }
.pm-preview-azioni { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.pm-preview-azioni .pm-btn-server { width: 100%; }
.pm-preview-azioni .ui-btn { justify-content: center; }

@media (max-width: 1280px) {
    .pm-folder { grid-template-columns: 180px minmax(0, 1fr) 230px; }
}
@media (max-width: 1100px) {
    .pm-folder { grid-template-columns: 180px minmax(0, 1fr); }
    .pm-preview { grid-column: 1 / -1; position: static; }
    .pm-tiles-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .pm-folder { grid-template-columns: minmax(0, 1fr); }
    .pm-tree { flex-direction: row; flex-wrap: wrap; }
    .pm-tree .pm-eyebrow { width: 100%; }
}

/* ── Telefono: il progetto aperto si impila ───────────────────────────────
   Le viste d'ingresso sul telefono sono liste .mb-* (progetti-mobile.js) e
   non passano di qui. Il progetto aperto tiene il markup del desktop: qui si
   mette in colonna, coi bersagli da toccare. */
@media (max-width: 768px) {
    .progetti-module { border-radius: 0; min-height: 0; }
    .pm-body { padding: 12px; gap: 12px; }
    .pm-detail-head { padding: 12px 12px 10px; align-items: stretch; flex-direction: column; gap: 10px; }
    .pm-detail-azioni { display: grid; grid-template-columns: 1fr 1fr; }
    .pm-detail-azioni .pm-btn-primary,
    .pm-detail-azioni .pm-btn-secondary { justify-content: center; }
    .pm-detail-elimina { grid-column: 1 / -1; justify-self: end; }
    .pm-title-lg { font-size: 22px; }
    .pm-detail, .pm-two-cols { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .pm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .pm-kpi { padding: 12px; }
    .pm-kpi-num { font-size: 20px; }
    .pm-aree-panel { padding: 12px; }
    .pm-area-riga { flex-wrap: wrap; gap: 8px 10px; }
    .pm-area-bar { display: none; }
    .pm-area-amt { width: auto; }
    .pm-list-toolbar { padding: 10px 12px; }
    .pm-arch-riga { flex-wrap: wrap; }
    .pm-arch-meta { width: 100%; justify-content: flex-start; }
    .pm-preventivo-toolbar { flex-wrap: wrap; }
}