/* ============================================================
   MOBILE "ATELIER" — token
   ============================================================
   Fonte: "design mobile/tokens.css" (mockup 3b), tradotto sulle
   convenzioni di casa. Due differenze volute rispetto al file di
   partenza, entrambe necessarie:

   1. L'attributo e' data-tema="chiaro", non data-theme. E' quello
      che il resto dell'app usa e che _check.js pretende.
   2. Il tema scuro sta in :root e il chiaro nel blocco con
      l'attributo, perche' nell'app l'assenza di attributo vale
      scuro. Nel mockup e' l'opposto: i valori sono gli stessi,
      cambia solo quale blocco li ospita.

   Questo file vale solo sotto i 768px, per via del media attribute
   con cui index.html lo carica. Sopra quella soglia le --pr-* non
   esistono affatto: non sovrascrivono i token del desktop, che
   restano gli unici in campo. Le due palette non si incontrano mai.

   Le regole dei componenti sostituiscono quelle dei cinque file
   mobile attuali, non si aggiungono a loro: quando una schermata
   arriva qui, gli strati che la vestivano prima spariscono nello
   stesso commit.
   ============================================================ */

/* ── Tema scuro (:root senza attributo, come nel resto dell'app) ── */
:root {
    --pr-bg: #141310;
    --pr-surface: #1d1b17;
    --pr-line: rgba(255, 255, 255, 0.08);

    --pr-ink: #f3f0e9;
    --pr-text-2: #94907f;
    --pr-text-3: #5f5c52;

    /* Il blocco scuro dell'header e del dock resta scuro in entrambi i temi:
       per questo ha i propri colori di testo invece dei generali, che ruotano
       col tema e su un fondo che non ruota diventerebbero illeggibili. */
    --pr-dark: #0d0c09;
    --pr-dark-text: #f5f2ea;
    --pr-dark-muted: #8d887b;
    --pr-dark-line: rgba(255, 255, 255, 0.14);
    --pr-dark-soft: rgba(255, 255, 255, 0.08);

    --pr-accent: #ff4d00;
    --pr-on-accent: #ffffff;

    /* Stati di ordine e macchina */
    --pr-ok: #2fbf71;
    --pr-danger: #e5484d;
    --pr-qc: #8f7aff;

    --pr-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --pr-shadow-dock: 0 12px 32px -8px rgba(15, 12, 5, 0.45);
    --pr-shadow-sheet: 0 -8px 40px rgba(15, 12, 5, 0.25);
    --pr-scrim: rgba(0, 0, 0, 0.55);
}

/* ── Tema chiaro: carta calda ── */
:root[data-tema="chiaro"] {
    --pr-bg: #f6f4ef;
    --pr-surface: #ffffff;
    --pr-line: rgba(30, 26, 14, 0.09);

    --pr-ink: #191712;
    --pr-text-2: #7b766b;
    --pr-text-3: #b0aca0;

    --pr-dark: #171511;
    --pr-dark-muted: #a09b8d;

    --pr-shadow: 0 1px 2px rgba(25, 20, 5, 0.04), 0 8px 24px -12px rgba(25, 20, 5, 0.08);
    --pr-scrim: rgba(20, 16, 8, 0.5);
}

/* ── Indipendenti dal tema ── */
:root {
    --pr-font: 'Instrument Sans', system-ui, -apple-system, sans-serif;
    --pr-fs-display: 38px;      /* il numero grande della dashboard */
    --pr-fs-h1: 24px;           /* il saluto */
    --pr-fs-title: 17px;        /* titolo di schermata */
    --pr-fs-card-title: 13.5px;
    --pr-fs-body: 13px;
    --pr-fs-meta: 11px;
    --pr-fs-micro: 10px;        /* etichette maiuscole */
    --pr-ls-tight: -0.025em;
    --pr-ls-micro: 0.08em;

    --pr-r-hero: 24px;          /* raccordo inferiore del blocco scuro */
    --pr-r-card: 16px;
    --pr-r-tile: 14px;
    --pr-r-ctl: 12px;           /* bottoni e campi */
    --pr-r-pill: 999px;

    --pr-gutter: 18px;          /* margine orizzontale della schermata */
    --pr-gap: 11px;             /* distanza fra le card */

    --pr-tap: 44px;             /* bersaglio minimo al tocco */
    --pr-ease: 0.25s ease;
}

/* ── Un solo arancio sotto i 768px ──────────────────────────────
   I componenti nuovi leggono --pr-accent, tutto il resto dell'app legge
   --accent. Finche' i due valori restavano diversi, sulla stessa schermata
   si vedevano due aranci: la scheda attiva in quello del desktop e il tasto
   accanto in quello del mockup. Qui --accent diventa quello del mockup, e
   siccome questo blocco vale solo sotto i 768px il desktop non se ne accorge.
   I derivati nascono dall'accento invece di essere scritti a mano, cosi'
   restano allineati se un giorno l'accento cambia. */
:root {
    --accent: var(--pr-accent);
    --accent-strong: color-mix(in oklab, var(--pr-accent) 80%, black);
    --accent-wash: color-mix(in srgb, var(--pr-accent) 14%, transparent);
    --accent-contrast: var(--pr-on-accent);
}

/* ============================================================
   LOGIN — la scheda entra dal basso
   ============================================================
   Era in tre copie sovrapposte, ognuna scritta per correggere la
   precedente e nessuna rimossa: style-workspaces (che vestiva
   ancora un h2 e un p spariti dal markup), style-overlays (bottone
   da 34px, sotto il bersaglio minimo al tocco) e mobile-base.
   Vinceva l'ultima, quindi qui resta cio' che l'ultima faceva -
   tolto tutto quello che ripeteva senza motivo dalla regola base
   di style-workspaces, che era gia' corretta e tokenizzata.

   Nessun override: questo foglio si carica per ultimo e i selettori
   con l'id battono comunque le regole di base. Se un giorno ne
   servisse uno, vorrebbe dire che uno strato e' ricomparso sotto.
   ============================================================ */
#login-overlay {
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0;
}

#login-overlay .login-card {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    max-height: min(92dvh, 820px);
    margin: 0;
    padding: 20px 18px calc(28px + env(safe-area-inset-bottom, 0px));
    border-radius: 26px 26px 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#login-overlay .login-logo-container,
#login-overlay .login-heading-block {
    margin-bottom: 12px;
}

#login-overlay .login-logo-img {
    width: 108px;
}

#login-overlay .login-main-title {
    font-size: 1.72rem;
    line-height: 1.02;
}

#login-overlay .login-mode-tabs {
    margin-bottom: 18px;
    border-radius: 14px;
}

#login-overlay .login-form {
    gap: 10px;
}

#login-overlay .login-field-label {
    font-size: 0.68rem;
    margin-bottom: 7px;
}

/* I bersagli salgono a 48px. I 16px sui campi non sono estetica:
   sotto quella soglia iOS ingrandisce la pagina al primo tocco. */
#login-overlay .login-tab {
    min-height: 48px;
    font-size: 0.78rem;
}

#login-overlay .input-field-modern {
    min-height: 48px;
    padding: 13px 14px;
    font-size: 16px;
    border-radius: 14px;
}

#login-overlay .login-password-row .input-field-modern {
    padding-right: 50px;
}

/* Il grigio era scritto a mano e restava lo stesso nei due temi:
   sul fondo chiaro spariva quasi. Ora segue il tema come tutto il
   resto della scheda. Posizione e geometria arrivano dalla regola
   base: qui si dichiara solo cio' che al tocco deve cambiare. */
#login-overlay .btn-toggle-pwd {
    top: 50%;
    transform: translateY(-50%);
    right: 8px;
    width: 48px;
    height: 48px;
    background: transparent;
    color: var(--text-tertiary);
}

#login-overlay .btn-login {
    min-height: 48px;
    border-radius: 14px;
}

/* ============================================================
   SHELL — dock flottante e sheet
   ============================================================
   Al posto del drawer laterale, che era una sidebar desktop fatta
   scivolare da sinistra: 810 righe, un'animazione a cascata con
   otto ritardi scritti a mano, e un fondale da mantenere.

   Il dock resta scuro in entrambi i temi, come il blocco header
   del mockup: per questo usa i propri colori invece di quelli
   generali, che ruotano col tema e su un fondo che non ruota
   diventerebbero illeggibili.
   ============================================================ */
.sidebar,
.top-float-bar {
    display: none;
}

.pr-dock {
    position: fixed;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 2px;
    max-width: calc(100vw - 2 * var(--pr-gutter));
    padding: 7px;
    border-radius: var(--pr-r-pill);
    background: var(--pr-dark);
    box-shadow: var(--pr-shadow-dock);
}

.pr-dock__items {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.pr-dock__item {
    padding: 12px 15px;
    border: none;
    border-radius: var(--pr-r-pill);
    background: transparent;
    color: var(--pr-dark-muted);
    font-family: inherit;
    font-size: var(--pr-fs-meta);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.pr-dock__item.is-active {
    background: var(--pr-dark-soft);
    color: var(--pr-dark-text);
}

.pr-dock__menu {
    flex: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--pr-r-pill);
    background: var(--pr-accent);
    color: var(--pr-on-accent);
    font-size: 15px;
    cursor: pointer;
}

/* Tutto lo spazio interno della pagina si decide qui. Prima lo dettavano due
   regole nello stesso file core, a 768 e a 390px, entrambe con la scorciatoia
   padding e l'override: nessuna schermata poteva fare eccezione. Il fondo
   lascia passare il dock - a differenza dei 104px che stavano sotto una barra
   che non e' mai esistita. */
#contenitore-dati {
    padding: 10px 12px calc(84px + env(safe-area-inset-bottom, 0px));
}

/* ── Sheet ── */
.pr-sheet {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Serve davvero: la riga sopra ha lo stesso peso della regola del browser
   per [hidden], e vincendo per ordine lo sheet resterebbe sempre aperto. */
.pr-sheet[hidden] {
    display: none;
}

.pr-sheet__scrim {
    position: absolute;
    inset: 0;
    border: none;
    padding: 0;
    background: var(--pr-scrim);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor: pointer;
}

.pr-sheet__panel {
    position: relative;
    max-height: 88dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px var(--pr-gutter) calc(26px + env(safe-area-inset-bottom, 0px));
    border-radius: 26px 26px 0 0;
    border-top: 1px solid var(--pr-line);
    background: var(--pr-surface);
    color: var(--pr-ink);
    box-shadow: var(--pr-shadow-sheet);
    animation: pr-sheet-su 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Entra dal basso: un foglio che compare di colpo sembra un errore di
   disegno, uno che sale sembra un foglio. */
@keyframes pr-sheet-su {
    from { transform: translateY(14%); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .pr-sheet__panel { animation: none; }
}

.pr-sheet__grabber {
    width: 36px;
    height: 4px;
    margin: 0 auto 14px;
    border-radius: var(--pr-r-pill);
    background: var(--pr-text-3);
}

.pr-sheet__head {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}

.pr-sheet__title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.pr-sheet__close {
    margin-left: auto;
    width: 36px;
    height: 36px;
    border-radius: var(--pr-r-pill);
    border: 1px solid var(--pr-line);
    background: var(--pr-bg);
    color: var(--pr-text-2);
    font-size: 14px;
    cursor: pointer;
}

.pr-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.pr-menu-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 62px;
    padding: 12px 14px;
    text-align: left;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-tile);
    background: var(--pr-bg);
    color: var(--pr-ink);
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.pr-menu-tile:active {
    border-color: var(--pr-accent);
    background: color-mix(in srgb, var(--pr-accent) 8%, var(--pr-bg));
}

.pr-menu-tile.is-active {
    border-color: color-mix(in srgb, var(--pr-accent) 45%, transparent);
    background: color-mix(in srgb, var(--pr-accent) 10%, var(--pr-bg));
}

.pr-menu-tile--wide {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    min-height: var(--pr-tap);
}

.pr-menu-tile__name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.pr-menu-tile__meta {
    margin-top: 2px;
    font-size: var(--pr-fs-micro);
    color: var(--pr-text-3);
}

.pr-menu-tile__chev {
    margin-left: auto;
    color: var(--pr-text-3);
}

.pr-badge {
    padding: 1px 6px;
    border-radius: var(--pr-r-pill);
    background: var(--pr-accent);
    color: var(--pr-on-accent);
    font-size: 9px;
    font-weight: 700;
    vertical-align: 2px;
}

/* ── Account: in fondo al foglio del dock ────────────────────────
   Il blocco arriva qui da JS ed e' lo stesso nodo della sidebar, quindi
   avatar, colori, notifiche e cambio azienda continuano a funzionare
   senza sapere di essere stati spostati. Stava in testata, che ora e' di
   una riga sola. */
/* Griglia e non flex: avatar e nome stanno in linea, il menu che si apre sotto
   occupa la riga intera. Con un flex in riga il menu diventerebbe una terza
   colonna schiacciata accanto al nome. */
.pr-sheet-account .sidebar-user-section {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0 12px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.pr-sheet-account #user-avatar-btn {
    width: 38px;
    height: 38px;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-pill);
}

/* Il menu non puo' restare un pannello sospeso: il foglio scorre, e tutto
   quello che esce dal suo riquadro viene tagliato via. Qui si apre in linea,
   sotto l'avatar, e il foglio cresce di conseguenza. Chiuso sparisce dal
   layout invece di essere solo trasparente, altrimenti terrebbe il posto. */
.pr-sheet-account .account-dropdown {
    position: static;
    display: none;
    grid-column: 1 / -1;
    margin-top: 10px;
    padding: 4px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-card);
    background: var(--pr-bg);
    color: var(--pr-ink);
    box-shadow: none;
}

.pr-sheet-account .account-dropdown.open {
    display: block;
}

.pr-sheet-account .account-dropdown-header {
    padding: 8px;
    border-bottom: 1px solid var(--pr-line);
}

.pr-sheet-account .account-ddrop-name,
.pr-sheet-account .account-ddrop-role,
.pr-sheet-account .account-menu-item {
    color: var(--pr-ink);
}

.pr-sheet-account .account-ddrop-role {
    opacity: 0.6;
}

.pr-sheet-account .account-menu-logout {
    color: var(--pr-danger);
}

body.pr-sheet-aperto {
    overflow: hidden;
}

/* ============================================================
   TESTATA DI PAGINA
   ============================================================
   Il blocco scuro del mockup, con il titolo e le azioni. Prima
   erano 21 regole in style-workspaces, tutte con override e con i
   colori scritti a mano - il fondo restava chiaro anche col tema
   scuro, e il tasto menu ripeteva quello del dock.

   Sul Riepilogo non compare: la sua intestazione e' gia' il blocco
   con il saluto, e due testate scure una sull'altra sarebbero una
   di troppo.
   ============================================================ */
.mobile-topbar {
    display: block;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 100%;
    padding: calc(12px + env(safe-area-inset-top, 0px)) var(--pr-gutter) 14px;
    border-radius: 0 0 var(--pr-r-hero) var(--pr-r-hero);
    background: var(--pr-dark);
    color: var(--pr-dark-text);
}

/* Sul Riepilogo la testata non sparisce: si salda al blocco del saluto, e i
   due diventano un blocco scuro solo — che era lo scopo. Nasconderla si
   portava via le uniche due cose che vivono dentro di lei: il titolo, che sul
   telefono E' il selettore di sezione, e il pannello della ricerca globale.
   Finche' il Riepilogo era la pagina DASHBOARD non c'era niente fra cui
   scegliere; da quando e' una delle quattro sezioni della Scrivania,
   nasconderla vuol dire chiudere dentro chi ci atterra — ed e' la sezione su
   cui si atterra. Il gutter sale ai 22px dell'eroe: con i 18px di --pr-gutter
   il titolo e il saluto partirebbero da due colonne diverse. */
body.page-scrivania-oggi .mobile-topbar {
    padding-inline: 22px;
    padding-bottom: 0;
    border-radius: 0;
}

/* La safe area la dichiara ora la testata, che e' lei l'elemento in cima. */
body.page-scrivania-oggi .pr-hero {
    padding-top: 8px;
}

/* Aperta la ricerca, il pannello ha bisogno del respiro che la saldatura
   toglie: senza, resterebbe incollato al saluto. */
body.page-scrivania-oggi.mobile-search-open .mobile-topbar {
    padding-bottom: 14px;
}

.mobile-topbar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-topbar-copy {
    flex: 1;
    min-width: 0;
}

.mobile-topbar h1 {
    margin: 0;
    font-size: var(--pr-fs-title);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--pr-dark-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Il titolo e' anche il selettore di sezione: scriveva gia' l'etichetta della
   sezione corrente, e tenerne due copie — qui e nella pillola attiva — costava
   una riga intera di schermo. Il caret compare solo dove c'e' qualcosa fra cui
   scegliere, altrimenti resta un titolo e basta. */
.mobile-sezione-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: var(--pr-tap);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: default;
}

.mobile-sezione-trigger > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-sezione-trigger__caret {
    flex: none;
    font-size: 11px;
    opacity: 0;
}

.mobile-sezione-trigger.is-sceglibile {
    cursor: pointer;
}

.mobile-sezione-trigger.is-sceglibile .mobile-sezione-trigger__caret {
    opacity: 0.65;
}

/* Le sezioni si scelgono dal foglio: le pillole restano nel DOM — sono loro a
   portare gli onclick dei moduli — ma sotto la soglia stanno in topbar, che qui
   non si vede, quindi non serve nasconderle una seconda volta. */
.pr-sezioni {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 4px;
}

.pr-sezione {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-tile);
    background: var(--pr-bg);
    color: var(--pr-ink);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.pr-sezione.is-attiva {
    border-color: var(--pr-accent);
    color: var(--pr-accent);
}

.pr-sezione > i {
    flex: none;
    width: 18px;
    text-align: center;
    opacity: 0.75;
}

/* Le azioni che stavano in testata e il blocco account, in fondo al foglio. */
.pr-sheet-azioni {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.pr-sheet-azione {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--pr-tap);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-tile);
    background: var(--pr-bg);
    color: var(--pr-ink);
    font: inherit;
    font-size: var(--pr-fs-meta);
    font-weight: 600;
    cursor: pointer;
}

.pr-sheet-account {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--pr-line);
}

.pr-sheet-account:empty {
    display: none;
}

.mobile-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mobile-topbar-search-panel {
    display: block;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: max-height 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, transform 0.24s ease;
}

body.mobile-search-open .mobile-topbar-search-panel {
    max-height: 84px;
    margin-top: 12px;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* ============================================================
   SCRIVANIA — sezione Oggi
   ============================================================
   Il blocco scuro in testa e' l'unico punto in cui la pagina
   esce dai margini: per questo la sezione Oggi annulla il padding
   orizzontale di #contenitore-dati e se lo rimette da sola sul
   corpo. Il fondo del blocco resta scuro in entrambi i temi.
   ============================================================ */
body.page-scrivania-oggi #contenitore-dati {
    padding-top: 0;
    padding-inline: 0;
}

.pr-hero {
    padding: calc(14px + env(safe-area-inset-top, 0px)) 22px 20px;
    border-radius: 0 0 var(--pr-r-hero) var(--pr-r-hero);
    background: var(--pr-dark);
    color: var(--pr-dark-text);
}

.pr-hero__date {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--pr-dark-muted);
}

.pr-hero__greeting {
    margin: 3px 0 0;
    font-size: var(--pr-fs-h1);
    font-weight: 700;
    letter-spacing: var(--pr-ls-tight);
}

.pr-hero__row {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-top: 12px;
}

.pr-hero__big {
    font-size: var(--pr-fs-display);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
}

.pr-hero__sub {
    margin-top: 3px;
    font-size: 10.5px;
    color: var(--pr-dark-muted);
}

.pr-dash__body {
    display: flex;
    flex-direction: column;
    gap: var(--pr-gap);
    padding: 14px var(--pr-gutter) 0;
}

/* ── Bottoni ── */
.pr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 18px;
    border: none;
    border-radius: var(--pr-r-ctl);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.pr-btn--sm {
    height: 38px;
    padding: 0 15px;
    font-size: 12.5px;
}

.pr-btn--ghost {
    background: var(--pr-surface);
    border: 1px solid var(--pr-line);
    color: var(--pr-ink);
    box-shadow: var(--pr-shadow);
}

/* ── Card ── */
.pr-card {
    padding: 13px 15px;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-card);
    background: var(--pr-surface);
    color: var(--pr-ink);
    box-shadow: var(--pr-shadow);
}

.pr-card--inverse {
    background: var(--pr-ink);
    border-color: var(--pr-ink);
    color: var(--pr-bg);
}

.pr-card--tappable {
    cursor: pointer;
    transition: border-color 0.15s;
}

.pr-card__title {
    margin: 0 0 6px;
    font-size: var(--pr-fs-card-title);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.pr-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pr-gap);
}

.pr-kpi__label {
    font-size: var(--pr-fs-meta);
    font-weight: 500;
    color: var(--pr-text-2);
}

.pr-card--inverse .pr-kpi__label {
    color: var(--pr-bg);
    opacity: 0.7;
}

.pr-kpi__value {
    margin-top: 3px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.pr-kpi__bar {
    margin-top: 7px;
}

.pr-kpi__meta {
    margin-top: 4px;
    font-size: 10px;
    color: var(--pr-text-2);
}

.pr-card--inverse .pr-kpi__meta {
    color: var(--pr-bg);
    opacity: 0.7;
}

.pr-kpi__cta {
    margin-top: 11px;
    font-size: 10px;
    font-weight: 700;
    color: var(--pr-accent);
}

/* ── Barre di avanzamento ── */
.pr-progress {
    height: 6px;
    border-radius: var(--pr-r-pill);
    background: var(--pr-line);
    overflow: hidden;
}

.pr-progress--sm { height: 5px; }
.pr-progress--lg { height: 7px; }

.pr-progress__fill {
    height: 100%;
    border-radius: var(--pr-r-pill);
    background: var(--pr-accent);
    transition: width 0.4s ease;
}

.pr-progress__fill--ink { background: var(--pr-ink); }

/* ── Consegne della settimana ── */
.pr-week-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

.pr-week-row__day {
    width: 26px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--pr-text-3);
}

.pr-week-row__num {
    width: 18px;
    font-size: 12.5px;
    font-weight: 700;
}

.pr-week-row .pr-progress { flex: 1; }

.pr-week-row__count {
    width: 14px;
    font-size: 10px;
    text-align: right;
    color: var(--pr-text-2);
}

/* ── Card ordine ── */
.pr-section-head {
    display: flex;
    align-items: baseline;
    padding: 1px 2px 0;
}

.pr-section-head__title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.pr-section-head__link {
    margin-left: auto;
    padding: 0;
    border: none;
    background: none;
    color: var(--pr-accent);
    font-family: inherit;
    font-size: var(--pr-fs-meta);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.pr-order__head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pr-order__id {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--pr-text-2);
    white-space: nowrap;
}

.pr-order__head .pr-pill { margin-left: auto; }

.pr-order__sub {
    margin-top: 4px;
    font-size: 10.5px;
    color: var(--pr-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pr-order__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.pr-order__foot .pr-progress { flex: 1; }

.pr-order__pct {
    font-size: 10.5px;
    font-weight: 700;
}

/* ── Pill di stato ── */
.pr-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--pr-r-pill);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.pr-pill--progress {
    color: var(--pr-accent);
    background: color-mix(in oklab, var(--pr-accent) 13%, transparent);
}

.pr-pill--blocked {
    color: var(--pr-danger);
    background: color-mix(in oklab, var(--pr-danger) 13%, transparent);
}

.pr-dash__retry {
    margin-top: 10px;
}

/* ============================================================
   PRODUZIONE
   ============================================================
   Sostituisce css/produzione-mobile.css (233 righe, 121 override)
   e i due blocchi mobile di style-overlays. Il file cancellato era
   rimasto indietro rispetto al markup: disponeva la card articolo
   su aree "dates" e "qty" che nel DOM non esistono piu' da quando i
   due campi si sono fusi in "meta". Le aree non trovate collassano,
   e la colonna del prodotto finiva a larghezza zero: sul telefono
   il codice articolo era invisibile.

   Qui la pagina e' tre superfici annidate, ognuna col proprio fondo:
   carta (la pagina) → bianco (la card dell'ordine) → carta (la card
   dell'articolo). Non servono bordi per separarle.
   ============================================================ */
body.page-produzione .prod-page-shell {
    gap: var(--pr-gap);
}

/* ── Il pannello non e' piu' una superficie ──────────────────────
   Sul telefono era una cornice attorno alle card, cioe' un riquadro
   dentro un riquadro. Le card stanno direttamente sul fondo. */
body.page-produzione .prod-orders-panel {
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

/* Il conteggio e' un'informazione, non un comando: perde il fondo a pillola
   e resta testo, come nel mockup. Il tasto accanto invece e' un comando, e
   l'altezza gliela da' il bersaglio minimo al tocco di workspace-responsive:
   dichiararla qui non servirebbe, perche' quella e' vincolante. */

/* ── La card dell'ordine ── */
body.page-produzione .prod-orders-panel .sezione-attiva {
    gap: var(--pr-gap);
}

body.page-produzione .prod-orders-panel .ordine-wrapper {
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-card);
    background: var(--pr-surface);
    box-shadow: var(--pr-shadow);
}

body.page-produzione .prod-orders-panel .prod-order-details {
    gap: 10px;
    padding-top: 0;
    border-top: none;
}

body.page-produzione .prod-orders-panel .prod-order-details-list {
    gap: 9px;
}

body.page-produzione .prod-orders-panel .prod-order-details-count {
    min-height: 24px;
    background: var(--pr-bg);
    color: var(--pr-text-2);
    font-size: var(--pr-fs-micro);
}

/* ── La card dell'articolo ──────────────────────────────────────
   Quattro colonne sul desktop, tre righe qui: il prodotto, le date
   con le quantita', e in fondo le due scelte affiancate. I riquadri
   attorno ai singoli campi spariscono: la card e' gia' una superficie
   e un riquadro dentro l'altro non aggiunge nulla. */
/* Il fondo arriva dalla classe ui-tw-card, che il markup mette su ogni card
   e che lo impone con un peso che nessun selettore batte. Non serve una gara
   di specificita': basta cambiare il valore che quella regola legge, perche'
   una variabile si risolve sull'elemento che la usa. Il suo colore era
   l'unico freddo rimasto in mezzo alla carta calda. */
body.page-produzione .prod-orders-panel .item-card {
    --v2-surface: var(--pr-surface);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Tre aree: l'assegnazione operatori non esiste piu' nel prodotto. */
    grid-template-areas:
        "product product"
        "meta meta"
        "status status";
    gap: 8px;
    margin-bottom: 0;
    padding: 11px 12px;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-tile);
    box-shadow: none;
}

body.page-produzione .prod-orders-panel .item-card-field {
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

body.page-produzione .prod-orders-panel .item-card-field-product { grid-area: product; }
body.page-produzione .prod-orders-panel .item-card-field-meta { grid-area: meta; }
body.page-produzione .prod-orders-panel .item-card-field-status { grid-area: status; }

body.page-produzione .prod-orders-panel .item-card-field-product b {
    color: var(--pr-ink);
    font-size: var(--pr-fs-card-title);
}

/* Sul telefono la descrizione sta su due righe invece di essere tagliata:
   la larghezza che sul desktop bastava per una riga sola qui non c'e'. */
body.page-produzione .prod-orders-panel .item-card-product-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    color: var(--pr-text-2);
    font-size: var(--pr-fs-meta);
    line-height: 1.35;
}

body.page-produzione .prod-orders-panel .item-card-field-meta {
    justify-content: flex-start;
    gap: 6px;
}

body.page-produzione .prod-orders-panel .card-date-item {
    border: 1px solid var(--pr-line);
    background: var(--pr-bg);
    font-size: var(--pr-fs-micro);
}
body.page-produzione .prod-orders-panel .qty-parziale {
    background: var(--pr-line);
}
body.page-produzione .prod-orders-panel .qty-parziale-voce {
    background: var(--pr-bg);
}

body.page-produzione .prod-orders-panel .qty-row {
    flex-wrap: wrap;
    gap: 5px;
}

body.page-produzione .prod-orders-panel .qty-totale {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 7px;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-pill);
    background: var(--pr-bg);
    color: var(--pr-ink);
    font-size: var(--pr-fs-body);
}

body.page-produzione .ov-accordion .riepilogo-page {
    padding: 0;
}

body.page-produzione .ov-board-wrapper {
    gap: 9px;
}

body.page-produzione .ov-stato-card {
    border-color: var(--pr-line);
    border-radius: var(--pr-r-tile);
    background: var(--pr-surface);
}

body.page-produzione .ov-stato-header {
    padding: 11px 13px;
    border-bottom-color: var(--pr-line);
}

body.page-produzione .ov-stato-row {
    border-color: var(--pr-line);
    border-radius: var(--pr-r-ctl);
    background: var(--pr-bg);
}

/* ============================================================
   ACQUISTI — HUB
   ============================================================
   Lo stesso Hub era vestito in tre punti a tre soglie: style-core
   a 600 e a 640, style-overlays a 768. Il raggio della card lo
   dichiaravano tutti e tre, con tre valori diversi - 16, 18 e 20 -
   e ne arrivava a contare uno solo, il 18 di style-overlays, che
   vinceva per specificita'. Gli altri due erano righe morte con
   l'aria di essere la regola buona.

   Qui sono un blocco solo. La soglia dei 640 resta perche' li'
   cambia davvero qualcosa: sopra, la testata della card e la riga
   d'elenco ci stanno in fila; sotto, il titolo e i suoi comandi non
   entrano piu' e vanno impilati.
   ============================================================ */
body.page-acquisti .acq-hub-shell {
    gap: 12px;
}

body.page-acquisti .acq-hub-card {
    padding: 16px;
    border-radius: 18px;
}

body.page-acquisti .acq-hub-warning {
    border-radius: 18px;
}

body.page-acquisti .acq-hub-list-item,
body.page-acquisti .acq-hub-empty {
    padding: 12px;
}

body.page-acquisti .acq-hub-list-meta {
    width: 100%;
    gap: 6px;
    justify-content: flex-start;
    text-align: left;
}

@media (max-width: 640px) {
    body.page-acquisti .acq-hub-shell {
        padding: 10px 10px 20px;
    }

    body.page-acquisti .acq-hub-warning {
        padding: 16px;
    }

    body.page-acquisti .acq-hub-list-item {
        flex-direction: column;
    }
}