/* ─────────────────────────────────────────────────────────────────────────────
   MrPosX UI (30/09/2026): impronta grafica nata dal demo della nuova dashboard,
   scelta dal referente per TUTTE le pagine del backoffice (accento lime col testo nero, carattere
   Roboto come prima, chip arrotondati, card
   con bordo sottile, variazioni in pillola). Le pagine si portano qui man mano.
   Il tema MudBlazor (Theme/MrPosXTheme.cs) usa gli stessi valori.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
    --ui-bg: #F2F5F4;
    --ui-surface: #FFFFFF;
    --ui-surface2: #E9EFED;
    --ui-ink: #14201E;
    --ui-muted: #5A6865;
    --ui-line: #D9E1DE;
    --ui-accent: #A6CF16;        /* lime del logo: chip e voci attive, SEMPRE col testo nero */
    --ui-accent-ink: #161A0A;
    --ui-accent-soft: #EEF6D0;
    --ui-accent-strong: #5E7A08; /* lime scuro: bordi, link, testo d'accento su bianco */
    --ui-data: #6E8F0B;          /* lime scuro per grafici, barre e mappa (il lime chiaro su bianco non si legge) */
    --ui-cmp: #B07D22;
    --ui-cmp2: #8466B3;
    --ui-good: #2F7D4C;
    --ui-bad: #B3412F;
    --ui-warn: #9A6A12;
    --ui-good-bg: #E2F1E6;
    --ui-bad-bg: #F8E3DE;
    --ui-warn-bg: #F5EBD3;
    --ui-live: #4CD49A;
    --ui-live-soft: #D4EC7A;     /* lime chiaro: scritte secondarie sulla fascia nera "In tempo reale" */
    --ui-shadow: 0 1px 2px rgba(20,32,30,.06), 0 4px 16px rgba(20,32,30,.05);
    --ui-f-display: "Roboto", "Helvetica", "Arial", sans-serif;  /* Roboto ovunque: il referente ha preferito il carattere di prima */
    --ui-f-body: "Roboto", "Helvetica", "Arial", sans-serif;
    --ui-r: 14px;
}

.ui-num { font-variant-numeric: tabular-nums; }

/* chip e controlli */
.ui-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ui-chip { border: 1px solid var(--ui-line); background: var(--ui-surface); color: var(--ui-ink); padding: 6px 12px; border-radius: 999px; font: 500 13.5px var(--ui-f-body); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; line-height: 1.3; }
.ui-chip:hover { border-color: var(--ui-accent-strong); }
.ui-chip.on { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-accent-ink); }
.ui-chip .mud-icon-root { font-size: 17px; }
.ui-sel { border: 1px solid var(--ui-line); background: var(--ui-surface); color: var(--ui-ink); border-radius: 10px; padding: 6px 10px; font: 400 13.5px var(--ui-f-body); min-width: 0; max-width: 100%; }
.ui-seg { display: inline-flex; background: var(--ui-surface2); border-radius: 999px; padding: 3px; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; flex: 0 1 auto; }
.ui-seg::-webkit-scrollbar { display: none; }
.ui-seg button { flex: 0 0 auto; }
.ui-seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 999px; font: 500 13px var(--ui-f-body); color: var(--ui-muted); cursor: pointer; }
.ui-seg button.on { background: var(--ui-surface); color: var(--ui-ink); box-shadow: var(--ui-shadow); }
.ui-label { font: 600 11px var(--ui-f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--ui-muted); }

/* card */
.ui-card { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r); padding: 14px 16px; min-width: 0; }
.ui-card h3, .ui-h3 { font: 700 16px var(--ui-f-display); letter-spacing: -.01em; margin: 0; color: var(--ui-ink); }
.ui-sub { color: var(--ui-muted); font-size: 12.5px; margin-top: 2px; }
.ui-chead { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ui-chead > div:first-child { margin-right: auto; min-width: 0; }

/* variazione */
.ui-d { display: inline-flex; align-items: center; gap: 2px; font: 600 12px var(--ui-f-body); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.ui-d.up { background: var(--ui-good-bg); color: var(--ui-good); }
.ui-d.dn { background: var(--ui-bad-bg); color: var(--ui-bad); }
.ui-d.eq { background: var(--ui-surface2); color: var(--ui-muted); }

/* tabelle e card per telefono */
.ui-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ui-tbl th { font: 600 11.5px var(--ui-f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--ui-muted); text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--ui-line); white-space: nowrap; }
.ui-tbl th:first-child, .ui-tbl td:first-child { text-align: left; }
.ui-tbl th button { border: 0; background: none; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; display: inline-flex; align-items: center; gap: 2px; cursor: pointer; }
.ui-tbl th.on { color: var(--ui-ink); }
.ui-tbl td { padding: 9px 10px; border-bottom: 1px solid var(--ui-line); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-tbl tr.click { cursor: pointer; }
.ui-tbl tr.click:hover td { background: var(--ui-surface2); }
.ui-tbl .nm { font-weight: 600; }
.ui-tbl .s { color: var(--ui-muted); font-size: 12px; }
.ui-cards { display: none; gap: 8px; }
.ui-oc[role="button"] { cursor: pointer; }
.ui-oc { border: 1px solid var(--ui-line); border-radius: 12px; padding: 10px 12px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: stretch; align-items: start; gap: 6px; box-sizing: border-box; text-align: left; background: var(--ui-surface); width: 100%; font: inherit; color: inherit; cursor: pointer; }
.ui-oc .top2 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ui-oc .kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ui-oc .kv div { min-width: 0; }
.ui-oc .kv span { display: block; font-size: 11px; color: var(--ui-muted); }
.ui-oc .kv b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ───────────── Dashboard ───────────── */
.dash { container: dash / inline-size; background: var(--ui-bg); color: var(--ui-ink); font-family: var(--ui-f-body); font-size: 14px; line-height: 1.45; min-height: 100%; padding: 8px 16px 40px; }
.dash button { font-family: inherit; }
.dash .dhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0 4px; }
.dash .dhead h1 { font: 700 24px var(--ui-f-display); letter-spacing: -.02em; margin: 0 auto 0 0; }
.dash .upd { color: var(--ui-muted); font-size: 12px; white-space: nowrap; }
.dash .spia { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: 13px; text-decoration: none; border: 1px solid var(--ui-line); color: var(--ui-muted); background: var(--ui-surface); }
.dash .spia.on { background: var(--ui-warn-bg); border-color: transparent; color: var(--ui-warn); }
.dash .spia .mud-icon-root { font-size: 18px; }
.dash .ibtn { border: 1px solid var(--ui-line); background: var(--ui-surface); border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; color: var(--ui-ink); }

.dash .filters { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--ui-bg) 92%, transparent); backdrop-filter: blur(8px); padding: 10px 0; border-bottom: 1px solid var(--ui-line); }
.dash .frow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dash .frow + .frow { margin-top: 8px; }
.dash .spacer { flex: 1; }
.dash .ctx { margin-top: 8px; color: var(--ui-muted); font-size: 12.5px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dash .ctx b { color: var(--ui-ink); font-weight: 600; }
.dash .crumb { border: 0; background: none; padding: 0; color: var(--ui-accent-strong); font-weight: 600; cursor: pointer; font-size: 12.5px; }
.dash .dates { display: inline-flex; gap: 6px; align-items: center; }
.dash .dates input { border: 1px solid var(--ui-line); background: var(--ui-surface); border-radius: 10px; padding: 5px 8px; font: inherit; }

.dash .body { padding-top: 14px; display: grid; gap: 14px; }
.dash .loading { height: 3px; background: linear-gradient(90deg, transparent, var(--ui-accent), transparent); background-size: 200% 100%; animation: dash-ld 1.2s linear infinite; border-radius: 2px; }
@keyframes dash-ld { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* adesso */
.dash .live { background: var(--ui-ink); color: var(--ui-bg); border-radius: var(--ui-r); padding: 14px 16px; display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)); gap: 18px; align-items: center; }
.dash .live .ttl { display: flex; flex-direction: column; gap: 4px; }
.dash .live .ttl strong { font: 700 17px var(--ui-f-display); }
.dash .pulse { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; color: var(--ui-live-soft); }
.dash .pulse i { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-live); box-shadow: 0 0 0 0 rgba(76,212,154,.6); animation: dash-pl 1.8s infinite; }
@keyframes dash-pl { 70% { box-shadow: 0 0 0 8px rgba(76,212,154,0); } 100% { box-shadow: 0 0 0 0 rgba(76,212,154,0); } }
.dash .live .it { min-width: 0; }
.dash .live a { color: inherit; text-decoration: none; border-radius: 10px; margin: -6px; padding: 6px; transition: background .15s; }
.dash .live a:hover { background: rgba(255,255,255,.08); }
.dash .live .lb { font-size: 11.5px; color: var(--ui-live-soft); }
.dash .live .vl { font: 700 22px var(--ui-f-display); letter-spacing: -.01em; white-space: nowrap; }
.dash .live .nt { font-size: 11.5px; color: var(--ui-live-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash .bar { height: 5px; border-radius: 3px; background: rgba(127,127,127,.35); overflow: hidden; margin-top: 5px; }
.dash .bar i { display: block; height: 100%; background: var(--ui-live); border-radius: 3px; }

/* da guardare */
.dash .ins { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.dash .insc { border: 1px solid var(--ui-line); background: var(--ui-surface); border-radius: var(--ui-r); padding: 12px 14px; text-align: left; display: flex; gap: 10px; align-items: flex-start; min-width: 0; cursor: pointer; color: var(--ui-ink); font: inherit; }
.dash .insc:hover { border-color: var(--ui-accent-strong); }
.dash .insc .ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.dash .insc .ic .mud-icon-root { font-size: 19px; }
.dash .insc.bad .ic { background: var(--ui-bad-bg); color: var(--ui-bad); }
.dash .insc.good .ic { background: var(--ui-good-bg); color: var(--ui-good); }
.dash .insc.warn .ic { background: var(--ui-warn-bg); color: var(--ui-warn); }
/* Testo della card: prende lo spazio fra icona e freccia e va a capo anche dentro le parole lunghe
   (ERRORE_DASHBOARDCONTROLLER, System.Threading.Tasks...), cosi' non esce dalla card ne' finisce sotto la freccia. */
.dash .insc .tx { flex: 1 1 auto; min-width: 0; }
.dash .insc b { display: block; font-weight: 600; margin-bottom: 2px; overflow-wrap: anywhere; }
.dash .insc .t { color: var(--ui-muted); font-size: 12.5px; overflow-wrap: anywhere; }
/* Salute: nome su una riga con i puntini, sotto solo quante volte; l'errore si legge entrando */
.dash .insc .tx b, .dash .insc .tx .t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash .insc .go { margin-left: auto; color: var(--ui-muted); flex: none; }

/* numeri chiave */
.dash .kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.dash .kpi { cursor: pointer; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r); padding: 12px 14px; min-width: 0; text-align: left; cursor: pointer; color: var(--ui-ink); font: inherit; }
.dash .kpi.on { border-color: var(--ui-accent-strong); box-shadow: inset 0 0 0 1px var(--ui-accent-strong); }
.dash .kpi .lb { color: var(--ui-muted); font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 4px; }
.dash .kpi .lb .mud-icon-root { font-size: 17px; }
.dash .kpi .vl { font: 700 26px var(--ui-f-display); letter-spacing: -.02em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash .kpi .kr { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.dash .kpi .was { color: var(--ui-muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash .spark { width: 100%; height: 30px; display: block; margin-top: 6px; }

.dash .g2 { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.dash .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ui-muted); margin-top: 6px; }
.dash .legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.dash .legend i.dash-l { background: repeating-linear-gradient(90deg, var(--ui-cmp) 0 4px, transparent 4px 7px) !important; }

/* punti vendita */
.dash .pv { display: grid; gap: 4px; }
.dash .pvr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px; border-radius: 10px; border: 0; background: transparent; text-align: left; width: 100%; cursor: pointer; color: var(--ui-ink); font: inherit; }
.dash .pvr:hover { background: var(--ui-surface2); }
.dash .pvr.sel { background: var(--ui-accent-soft); }
.dash .pvr .nm { font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash .pvr .gr { color: var(--ui-muted); font-weight: 400; font-size: 12px; }
.dash .pvr .am { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.dash .pvr .bb { height: 6px; background: var(--ui-surface2); border-radius: 3px; overflow: hidden; }
.dash .pvr .bb i { display: block; height: 100%; background: var(--ui-data); border-radius: 3px; }
.dash .pvr .dd { text-align: right; }

/* mappa giorno x ora */
.dash .hmwrap { overflow-x: auto; }
.dash .hm { display: grid; grid-template-columns: 40px repeat(24, minmax(20px, 1fr)); gap: 3px; min-width: 620px; }
.dash .hm .h { font-size: 10.5px; color: var(--ui-muted); text-align: center; }
.dash .hm .w { font-size: 11.5px; color: var(--ui-muted); display: flex; align-items: center; }
.dash .hm .c { height: 24px; border-radius: 5px; }
.dash .hm .c:hover { outline: 2px solid var(--ui-ink); outline-offset: -1px; }
.dash .hm .c { cursor: pointer; }
.dash .hm .c.sel { outline: 2px solid var(--ui-ink); outline-offset: -1px; }
.dash .hmsel { margin-top: 10px; font-size: 13px; min-height: 20px; }
.dash .hmleg { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--ui-muted); }
.dash .hmleg .grad { width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--ui-surface2), var(--ui-data)); }

/* dettaglio */
/* Il dettaglio e' alto almeno uno schermo: cambiando scheda (contenuti di altezza diversa,
   o "Carico" per un attimo) la pagina non si accorcia e non scatta verso l'alto. */
.dash #dettaglio { min-height: calc(100vh - 90px); overflow-anchor: none; }
.dash .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ui-line); margin: -4px 0 12px; overflow-x: auto; scrollbar-width: none; }
.dash .tabs::-webkit-scrollbar { display: none; }
.dash .tabs button { border: 0; background: none; padding: 10px 12px; font-weight: 600; color: var(--ui-muted); border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; font-size: 14px; }
.dash .tabs button .mud-icon-root { font-size: 18px; }
.dash .tabs button.on { color: var(--ui-ink); border-bottom-color: var(--ui-accent); }
.dash .mini { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; align-items: center; }
.dash .cerca { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ui-line); background: var(--ui-surface); border-radius: 999px; padding: 4px 12px; color: var(--ui-muted); flex: 1 1 220px; max-width: 340px; min-width: 0; }
.dash .cerca:focus-within { border-color: var(--ui-accent-strong); color: var(--ui-accent-strong); }
.dash .cerca input { border: 0; outline: 0; background: transparent; font: 400 13.5px var(--ui-f-body); color: var(--ui-ink); width: 100%; min-width: 0; padding: 2px 0; }
@container dash (max-width: 700px) { .dash .cerca { max-width: none; flex-basis: 100%; } }
/* Elenchi lunghi (operatori, prodotti): scorrono dentro la card senza muovere la pagina;
   arrivati in fondo la pagina resta ferma (overscroll contain). */
/* Scorrimento dentro la card SOLO sui touch screen (telefono, tablet): col mouse la rotellina
   restava catturata dalla lista e la pagina sembrava bloccata. Col mouse scorre sempre la
   pagina e l'elenco lungo si apre con "Mostra tutti". */
@media (hover: none) and (pointer: coarse) {
    .dash .scrollbox { max-height: min(560px, 65vh); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-radius: 10px; }
    .dash .scrollbox .ui-tbl thead th { position: sticky; top: 0; background: var(--ui-surface); z-index: 1; }
    .dash .scrollbox .ui-cards { padding-bottom: 4px; }
}
.dash .mostra { border: 0; background: none; padding: 10px 4px 0; color: var(--ui-accent-strong); font-weight: 600; cursor: pointer; font-size: 13px; }
/* occhio: la riga o la card apre un dettaglio (cerchietto scuro, ben visibile anche sul telefono) */
.dash .occhio-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ui-surface2); color: var(--ui-ink); flex: none; }
.dash .occhio-btn .mud-icon-root { font-size: 18px; color: var(--ui-ink); }
.dash .ui-tbl td.occhio { width: 44px; padding-left: 0; }
.dash tr.click:hover .occhio-btn, .dash .ui-oc:hover .occhio-btn { background: var(--ui-accent); }
.dash .vs { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.dash .vs small, .dash .vs-sotto small { font-size: 10.5px; color: var(--ui-muted); white-space: nowrap; }
.dash .vs-sotto { display: flex; align-items: center; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.dash .share { display: inline-block; width: 70px; height: 6px; background: var(--ui-surface2); border-radius: 3px; overflow: hidden; vertical-align: middle; }
.dash .share i { display: block; height: 100%; background: var(--ui-data); }
.dash .flag { color: var(--ui-warn); font-size: 12px; font-weight: 600; }
.dash .pay { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 20px; align-items: center; }
.dash .payl { display: grid; gap: 8px; }
.dash .payl div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--ui-line); padding-bottom: 6px; }
.dash .payl i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.dash .muted { color: var(--ui-muted); }
.dash .empty { color: var(--ui-muted); padding: 10px 0; }

/* ───────────── Tavoli aperti ───────────── */
.dash .ta-vuoto { display: grid; justify-items: center; gap: 6px; padding: 36px 16px; text-align: center; }
.dash .ta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.dash .ta-tav { border: 1px solid var(--ui-line); border-left: 4px solid var(--ui-good); border-radius: 12px; padding: 10px 12px; background: var(--ui-surface); cursor: pointer; display: grid; gap: 6px; min-width: 0; transition: box-shadow .15s, transform .15s; animation: dash-in .35s ease-out both; }
.dash .ta-tav:hover { box-shadow: var(--ui-shadow); transform: translateY(-1px); }
.dash .ta-tav.medio { border-left-color: var(--ui-warn); }
.dash .ta-tav.vecchio { border-left-color: var(--ui-bad); }
.dash .ta-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* i tre puntini del tavolo (08/10/2026): il nome prende lo spazio, eta' e menu stanno a destra */
.dash .ta-top .ta-nome { flex: 1; min-width: 0; }
.dash .ta-menu { display: inline-flex; flex: 0 0 auto; }
.dash .ta-menu .ms-btn.sq { flex: 0 0 28px; width: 28px; height: 28px; min-width: 28px; padding: 0; }
/* card con i tre puntini (25/10/2026): la colonna della card non si allarga sul nome lungo, che va in ellissi;
   prima il tasto usciva dalla card (Casse in turno), e .ms-btn.sq lo teneva largo 46 invece di 28 */
.dash .ta-tav, .dash .ct-cassa { grid-template-columns: minmax(0, 1fr); }
.dash .ta-nome { font: 700 17px var(--ui-f-display); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash .ta-eta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--ui-good-bg); color: var(--ui-good); }
.dash .ta-eta .mud-icon-root { font-size: 14px; }
.dash .ta-eta.medio { background: var(--ui-warn-bg); color: var(--ui-warn); }
.dash .ta-eta.vecchio { background: var(--ui-bad-bg); color: var(--ui-bad); }
.dash .ta-cassa { color: var(--ui-muted); font-size: 12px; margin-top: -4px; }
.dash .ta-num { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dash .ta-num span { display: block; font-size: 11px; color: var(--ui-muted); }
.dash .ta-num b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash .ta-ops { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ui-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash .ta-ops .mud-icon-root { font-size: 15px; }
.dash .ta-stati { display: flex; gap: 4px; flex-wrap: wrap; }
.dash-drawer .ta-riga { align-items: flex-start; }
.dash-drawer .ta-riga.elim { opacity: .5; text-decoration: line-through; }
.dash-drawer .ta-nota { display: inline-block; margin-left: 6px; font-size: 11.5px; color: var(--ui-muted); font-style: italic; }
.dash-drawer .ta-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--ui-muted); margin-top: 2px; }
.dash-drawer .ta-stato { font-weight: 600; }
.dash-drawer .ta-stato.ok { color: var(--ui-good); }
.dash-drawer .ta-stato.anom, .dash-drawer .ta-stato.elim { color: var(--ui-bad); }
.dash-drawer .ta-stato.coda, .dash-drawer .ta-stato.no { color: var(--ui-warn); }

.dash .ta-exp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.dash .ta-exp { padding: 10px 14px; cursor: pointer; }
.dash .ta-exp:hover { border-color: var(--ui-accent-strong); }
.dash .ta-exp-head { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.dash .ta-exp-head > .mud-icon-root:first-child { color: var(--ui-accent-strong); }
.dash .ta-exp-head .ui-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash .ta-exp-ch { margin-left: auto; color: var(--ui-muted); }
.dash .ta-cassa-head { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 0; padding: 10px 6px; border-bottom: 1px solid var(--ui-line); flex-wrap: wrap; cursor: pointer; border-radius: 8px; }
.dash .ta-cassa-head:hover { background: var(--ui-surface2); }
.dash .ta-cassa-head.open { margin-bottom: 8px; }
.dash .ta-cassa-head .ta-ch { color: var(--ui-muted) !important; }
.dash .ta-cassa-head + .ta-grid { margin-bottom: 6px; }
.dash .ta-cassa-head:first-of-type { margin-top: 4px; }
.dash .ta-cassa-head .mud-icon-root { font-size: 18px; color: var(--ui-accent-strong); align-self: center; }
.dash .ta-cassa-head b { font: 700 15px var(--ui-f-display); }
.dash .ta-cassa-head .gr { color: var(--ui-muted); font-size: 12.5px; }
.dash .ta-cassa-head .am { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
@container dash (max-width: 1080px) { .dash .ta-exp-row { grid-template-columns: minmax(0, 1fr); } }

/* ───────────── Casse in turno ───────────── */
.dash .ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.dash .ct-cassa { border: 1px solid var(--ui-line); border-left: 4px solid var(--ui-good); border-radius: 12px; padding: 12px; background: var(--ui-surface); display: grid; gap: 8px; min-width: 0; animation: dash-in .35s ease-out both; }
.dash .ct-cassa.medio { border-left-color: var(--ui-warn); }
.dash .ct-cassa.vecchio { border-left-color: var(--ui-bad); }
.dash .ct-cod { color: var(--ui-muted); font-weight: 500; font-size: 12px; }
.dash .ct-pag { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--ui-surface2); }
.dash .ct-pag i { display: block; height: 100%; animation: dash-grow .9s cubic-bezier(.2,.7,.2,1) both; }
.dash .ct-pag .c1, .dash .ct-leg .c1 { background: var(--ui-data); }
.dash .ct-pag .c2, .dash .ct-leg .c2 { background: var(--ui-cmp); }
.dash .ct-pag .c3, .dash .ct-leg .c3 { background: var(--ui-cmp2); }
.dash .ct-pag .c4, .dash .ct-leg .c4 { background: var(--ui-bad); }
.dash .ct-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ui-muted); margin-top: -2px; }
.dash .ct-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.dash .ct-tavoli { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ui-warn); background: var(--ui-warn-bg); border-radius: 10px; padding: 6px 10px; text-decoration: none; }
.dash .ct-tavoli .mud-icon-root { font-size: 17px; }
/* come si e' chiuso il turno prima (25/10/2026): Z fatta o solo database, dal numero Z sugli scontrini */
.dash .ct-zchk { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; border-radius: 10px; padding: 6px 10px; color: var(--ui-good); background: var(--ui-good-bg); }
.dash .ct-zchk .mud-icon-root { font-size: 16px; flex: 0 0 auto; margin-top: 1px; }
.dash .ct-zchk b { font-weight: 700; }
.dash .ct-zchk.bad { color: var(--ui-bad); background: var(--ui-bad-bg); }
.dash .ct-zchk.warn { color: var(--ui-warn); background: var(--ui-warn-bg); }
.dash .ct-zchk.neutro { color: var(--ui-muted); background: var(--ui-surface2); }
.dash .ct-tavoli .mud-icon-root:last-child { margin-left: auto; }
.dash .ct-chiudi { display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--ui-line); background: var(--ui-surface); border-radius: 10px; padding: 7px 10px; font: 600 13.5px var(--ui-f-body); color: var(--ui-ink); cursor: pointer; }
.dash .ct-chiudi:hover { border-color: var(--ui-accent-strong); background: var(--ui-accent-soft); }
.dash .ct-chiudi .mud-icon-root { font-size: 17px; }

/* pannello operatore */
.dash-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1300; }
.dash-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(440px, 100%); background: var(--ui-surface); color: var(--ui-ink); z-index: 1301; box-shadow: -10px 0 40px rgba(0,0,0,.2); overflow-y: auto; padding: 18px; font-family: var(--ui-f-body); }
.dash-drawer h2 { font: 700 22px var(--ui-f-display); margin: 0; }
.dash-drawer h4 { font: 700 15px var(--ui-f-display); margin: 16px 0 6px; }
.dash-drawer .x { border: 0; background: var(--ui-surface2); border-radius: 50%; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; }
.dash-drawer .cmpgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.dash-drawer .cmpgrid div { background: var(--ui-surface2); border-radius: 12px; padding: 10px; }
.dash-drawer .cmpgrid span { display: block; font-size: 11.5px; color: var(--ui-muted); }
.dash-drawer .cmpgrid b { font: 700 19px var(--ui-f-display); font-variant-numeric: tabular-nums; }
.dash-drawer .cmpgrid em { display: block; font-style: normal; font-size: 11.5px; color: var(--ui-muted); }
.dash-drawer .hbars { display: flex; align-items: flex-end; gap: 2px; height: 60px; }
.dash-drawer .hbars i { flex: 1; background: var(--ui-data); border-radius: 2px 2px 0 0; min-height: 1px; opacity: .85; }
.dash-drawer .riga { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed var(--ui-line); gap: 10px; }
.dash-drawer .muted { color: var(--ui-muted); }
.dash-drawer .spark { width: 100%; height: 60px; display: block; }

@container dash (max-width: 1080px) {
    .dash .live { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dash .live .ttl { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; }
    .dash .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dash .g2 { grid-template-columns: minmax(0, 1fr); }
}
@container dash (max-width: 700px) {
    .dash .chips-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .dash .chips-scroll::-webkit-scrollbar { display: none; }
    .dash .frow .ui-sel { flex: 1; }
    .dash .live { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .dash .live .vl { font-size: 19px; }
    .dash .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash .kpis .kpi:first-child { grid-column: 1 / -1; }
    .dash .kpi .vl { font-size: 22px; }
    .dash .ins { grid-template-columns: minmax(0, 1fr); }
    .dash .ui-tbl.resp { display: none; }
    .dash .ui-cards { display: grid; }
    .dash .pay { grid-template-columns: minmax(0, 1fr); }
    .dash .ui-card { padding: 12px; }
    .dash .dhead h1 { font-size: 21px; }
}
/* caricamento e animazioni: ripartono a ogni nuovo caricamento (i blocchi hanno un @key) */
.dash .carico { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-accent-strong); font-weight: 600; }
/* Spinner sempre lime (il testo accanto resta scuro, per leggibilita') */
.dash .carico .mud-progress-circular, .dash .attesa .mud-progress-circular { color: var(--ui-accent) !important; }
.dash .carico .mud-progress-circular-circle, .dash .attesa .mud-progress-circular-circle { stroke-width: 5px; }
.dash .attesa { display: flex; align-items: center; gap: 10px; color: var(--ui-muted); padding: 24px 4px; }
.dash .anim, .dash .kpi, .dash .insc { animation: dash-in .45s ease-out both; }
.dash .kpis .kpi:nth-child(2) { animation-delay: .05s; }
.dash .kpis .kpi:nth-child(3) { animation-delay: .1s; }
.dash .kpis .kpi:nth-child(4) { animation-delay: .15s; }
.dash .kpis .kpi:nth-child(5) { animation-delay: .2s; }
@keyframes dash-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dash-draw { to { stroke-dashoffset: 0; } }
@keyframes dash-fade { from { opacity: 0; } }
.dash .pvr .bb i { animation: dash-grow .9s cubic-bezier(.2,.7,.2,1) both; }
.dash .share i { animation: dash-grow .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes dash-grow { from { width: 0; } }
.dash .live.sk .vl, .dash .live.sk .nt { color: transparent; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.16), rgba(255,255,255,.06)); background-size: 200% 100%; animation: dash-ld 1.2s linear infinite; }
.dash .kpis.sk .vl { color: transparent; border-radius: 8px; background: linear-gradient(90deg, var(--ui-surface2), var(--ui-bg), var(--ui-surface2)); background-size: 200% 100%; animation: dash-ld 1.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { .dash *, .dash-drawer * { animation: none !important; transition: none !important; stroke-dashoffset: 0 !important; } }

/* Quando si lavora: viste onda e barre (30/09/2026) */
.dash .hmtools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dash .ui-seg.ico button { padding: 4px 9px; display: inline-grid; place-items: center; }
.dash .ui-seg.ico .mud-icon-root { font-size: 19px; }
.dash .ui-seg.ico a.hmpdf { padding: 4px 9px; display: inline-grid; place-items: center; border-radius: 999px; color: var(--ui-muted); }
.dash .ui-seg.ico a.hmpdf:hover { color: var(--ui-ink); }
.dash .hmgiorni { margin-top: 2px; }
.dash .hmgiorni .ui-chip { min-width: 44px; justify-content: center; }
.dash .hmprof { width: 100%; }
.dash .hmplot { position: relative; height: 190px; }
.dash .hmbars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 3px; }
.dash .hmbars .b { flex: 1; border-radius: 5px 5px 2px 2px; transform-origin: bottom; animation: hm-grow .5s ease-out both; }
.dash .hmonda { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dash .hmonda .area { animation: dash-fade .6s ease-out both; }
.dash .hmonda .linea { animation: dash-fade .4s ease-out both; }
.dash .hmhit { position: absolute; inset: 0; display: flex; gap: 3px; }
.dash .hmhit > div { flex: 1; cursor: pointer; border-radius: 5px; }
.dash .hmhit > div:hover { background: rgba(0,0,0,.05); }
.dash .hmhit > div.sel { background: rgba(0,0,0,.07); box-shadow: inset 0 0 0 2px var(--ui-ink); }
.dash .hmore { display: flex; gap: 3px; margin-top: 6px; }
.dash .hmore span { flex: 1; text-align: center; font-size: 10.5px; color: var(--ui-muted); min-width: 0; }
.dash .hmprof.vo .hmhit > div.sel { box-shadow: none; background: rgba(0,0,0,.04); }
@keyframes hm-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (max-width: 560px) {
  .dash .hmplot { height: 160px; }
  .dash .hmbars, .dash .hmhit, .dash .hmore { gap: 1.5px; }
  .dash .hmgiorni { flex-wrap: nowrap; gap: 4px; }
  .dash .hmgiorni .ui-chip { flex: 1 1 0; min-width: 0; padding: 5px 0; font-size: 12px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .dash .hmbars .b, .dash .hmonda .area, .dash .hmonda .linea { animation: none; } }

/* ═══ SCHEDA STANDARD degli elenchi (03/10/2026, scelta del referente: "Proposta A")
   Bordo colorato a sinistra + pillola di stato con gli stessi colori; nome col codice accanto;
   riga di contesto; riquadro a tutta larghezza per il dato principale; griglia a 2 colonne
   larghe; riga di icone; pulsante largo per l'azione principale. Nessun valore accorciato.
   La tabella (.ms-tbl) traduce la stessa scheda in riga: striscia, nome+contesto, pillola. ═══ */
.ms-vista button { display: inline-flex; align-items: center; gap: 5px; }
.ms-vista .mud-icon-root { font-size: 17px; }
@media (max-width: 480px) { .ms-vista button span { display: none; } }

.ms-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
@media (max-width: 760px) { .ms-cards { grid-template-columns: 1fr; } }
.ms-card { background: var(--ui-surface); border: 1px solid var(--ui-line); border-left: 5px solid var(--ui-good); border-radius: var(--ui-r); padding: 12px 12px 12px 13px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.ms-card.bad { border-left-color: var(--ui-bad); }
.ms-card.warn { border-left-color: var(--ui-warn); }
.ms-card.off { border-left-color: var(--ui-line); }
.ms-card.off .ms-name { color: var(--ui-muted); }
.ms-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ms-name { font: 700 19px var(--ui-f-display); line-height: 1.15; min-width: 0; overflow-wrap: anywhere; }
.ms-name small { font-weight: 400; color: var(--ui-muted); font-size: 14px; margin-left: 6px; overflow-wrap: anywhere; }
.ms-pill { flex: 0 0 auto; border-radius: 999px; padding: 4px 11px; font: 500 13px var(--ui-f-body); white-space: nowrap; margin-top: 2px; }
.ms-pill.good { background: var(--ui-good-bg); color: var(--ui-good); }
.ms-pill.bad { background: var(--ui-bad-bg); color: var(--ui-bad); }
.ms-pill.warn { background: var(--ui-warn-bg); color: var(--ui-warn); }
.ms-pill.off { background: var(--ui-bg); color: var(--ui-muted); }
.ms-pill.lime { background: var(--ui-accent); color: var(--ui-accent-ink); }
.ms-pill.sm { font-size: 12px; padding: 3px 9px; margin: 0; }
.ms-sub { color: var(--ui-muted); font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.ms-box { border: 1px solid var(--ui-line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; background: var(--ui-bg); min-width: 0; }
.ms-box .l { font-size: 13px; color: var(--ui-muted); }
.ms-box .v { font: 700 17px var(--ui-f-display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ms-box .v span { font-weight: 400; color: var(--ui-muted); font-size: 15px; margin-left: 8px; }
.ms-box .st { font-size: 14px; color: var(--ui-ink); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ms-box .st i { font-style: normal; color: var(--ui-muted); }
.ms-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; background: var(--ui-line); }
.ms-dot.good { background: var(--ui-good); } .ms-dot.bad { background: var(--ui-bad); } .ms-dot.warn { background: var(--ui-warn); }
.ms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.ms-k { min-width: 0; }
.ms-k small { display: block; color: var(--ui-muted); font-size: 13px; }
.ms-k b { display: block; font: 700 17px var(--ui-f-display); margin-top: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ms-k b.muted { color: var(--ui-muted); font-weight: 500; }
.ms-k b em { font-style: normal; font-weight: 400; color: var(--ui-muted); font-size: 14px; margin-left: 6px; }
.ms-icons { display: flex; gap: 14px; align-items: center; font-size: 15px; flex-wrap: wrap; }
.ms-icons span { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ui-muted); }
.ms-icons span.on { color: var(--ui-accent-strong); }
.ms-icons span.ko { color: var(--ui-bad); }
.ms-icons .mud-icon-root { font-size: 22px; }
.ms-cta { display: flex; gap: 8px; margin-top: 2px; min-width: 0; }
/* MudMenu avvolge l'attivatore in un suo elemento: deve stare nel flex senza spingere fuori il
   pulsante principale, che a sua volta deve potersi restringere (flex-basis 0 + min-width 0). */
.ms-cta > .ms-btn:first-child { flex: 1 1 0; min-width: 0; }
.ms-cta > .ms-btn:first-child .mud-icon-root { flex: 0 0 auto; }
.ms-cta .mud-menu, .ms-tact .mud-menu { flex: 0 0 auto; display: inline-flex; }
.ms-cta .mud-menu .ms-btn.sq { width: 46px; }
.ms-btn { flex: 1 1 auto; min-width: 0; border: 1px solid var(--ui-line); background: var(--ui-surface); color: var(--ui-ink); border-radius: 10px; padding: 10px 12px; font: 700 15px var(--ui-f-body); display: inline-flex; justify-content: center; align-items: center; gap: 8px; cursor: pointer; }
.ms-btn:hover { border-color: var(--ui-accent-strong); }
.ms-btn.sq { flex: 0 0 46px; padding: 10px 0; color: var(--ui-muted); }
.ms-btn .mud-icon-root { font-size: 20px; }
.ms-empty { color: var(--ui-muted); padding: 24px; text-align: center; }

.ms-twrap { overflow-x: auto; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-surface); }
.ms-tbl { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13.5px; }
.ms-tbl thead th { text-align: left; font: 500 11.5px var(--ui-f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--ui-muted); padding: 10px 12px; background: var(--ui-bg); border-bottom: 1px solid var(--ui-line); white-space: nowrap; }
.ms-tbl th.num, .ms-tbl td.num { text-align: right; }
.ms-tbl tbody td { padding: 10px 12px; border-bottom: 1px solid var(--ui-line); vertical-align: middle; }
.ms-tbl tbody tr:last-child td { border-bottom: 0; }
.ms-tbl tbody tr.click { cursor: pointer; }
.ms-tbl tbody tr.click:hover td { background: var(--ui-accent-soft); }
.ms-tbl td.stripe { width: 5px; padding: 0; }
.ms-tbl td.stripe i { display: block; width: 5px; height: 56px; background: var(--ui-good); }
.ms-tbl tr.bad td.stripe i { background: var(--ui-bad); } .ms-tbl tr.warn td.stripe i { background: var(--ui-warn); } .ms-tbl tr.off td.stripe i { background: var(--ui-line); }
.ms-tbl tr.off .ms-tname { color: var(--ui-muted); }
.ms-tname { font: 700 15px var(--ui-f-display); }
.ms-tname small { font-weight: 400; color: var(--ui-muted); font-size: 13px; margin-left: 6px; }
.ms-tsub { color: var(--ui-muted); font-size: 12.5px; margin-top: 2px; }
.ms-mono { font-variant-numeric: tabular-nums; }
.ms-rtc { display: flex; align-items: center; gap: 8px; }
.ms-rtc b { font-weight: 500; }
.ms-rtc small { display: block; color: var(--ui-muted); font-size: 12px; }
.ms-tbl td.nw, .ms-tbl td.nw * { white-space: nowrap; }
.ms-tact { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.ms-tact .ms-btn { flex: 0 0 auto; padding: 7px 12px; font-size: 13.5px; font-weight: 500; }
.ms-tact .ms-btn.sq { flex-basis: 36px; }

/* Ricerca a pillola con il pulsante "Nuova" dentro (testata degli elenchi) */
.ms-search { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; background: var(--ui-bg); border: 1px solid var(--ui-line); border-radius: 999px; padding: 6px 6px 6px 14px; min-width: 0; }
.ms-search .mud-icon-root { color: var(--ui-muted); font-size: 22px; flex: 0 0 auto; }
.ms-search input { flex: 1 1 0; width: 0; min-width: 0; border: 0; background: transparent; font: 400 15px var(--ui-f-body); color: var(--ui-ink); outline: none; padding: 6px 0; }
.ms-search input::placeholder { color: var(--ui-muted); }
.ms-new { flex: 0 0 auto; background: var(--ui-accent); color: var(--ui-accent-ink); border: 0; border-radius: 999px; padding: 9px 14px; font: 700 15px var(--ui-f-body); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.ms-new .mud-icon-root { color: var(--ui-accent-ink); font-size: 20px; }

/* Permessi a icone: tutte presenti, lime = concesso, grigio = no */
.ms-perm { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.ms-perm span { display: inline-flex; color: var(--ui-line); }
.ms-perm span.on { color: var(--ui-accent-strong); }
.ms-perm .mud-icon-root { font-size: 26px; }
.ms-perm.sm { margin-top: 0; gap: 6px; } .ms-perm.sm .mud-icon-root { font-size: 22px; }

/* Testata degli elenchi: griglia a una colonna che NON si allarga oltre lo schermo
   (minmax(0,1fr)), cosi' ricerca, segmenti e pulsanti si restringono invece di uscire. */
.ms-testata { padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.ms-testata > div { min-width: 0; }
.ms-spiega { color: var(--ui-muted); font-size: 13.5px; line-height: 1.45; }
.ms-testata .mud-button-root { text-transform: none; border-radius: 10px; }
.ms-testata .ms-azione { white-space: normal; }
.ms-testata .ui-seg { max-width: 100%; }

/* ═══ MODALI (03/10/2026, "la grafica va applicata anche ai modal"): contenuto a SEZIONI,
   ognuna un riquadro con etichetta piccola; campi a tutta larghezza, una colonna sul telefono e
   due dai 600 px; gli interruttori come righe (testo + spiegazione a sinistra, switch a destra);
   le azioni secondarie come pulsanti con bordo dentro la sezione; Salva lime in fondo. ═══ */
.ms-modal { display: grid; gap: 12px; }
.ms-sez { border: 1px solid var(--ui-line); border-radius: 10px; padding: 10px 12px 12px; display: grid; gap: 10px; background: var(--ui-bg); min-width: 0; }
.ms-sez > .l { font: 600 11px var(--ui-f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--ui-muted); }
.ms-sez .mud-input-control { margin: 0; }
.ms-sez .mud-input.mud-input-outlined { background: var(--ui-surface); border-radius: 10px; }
.ms-sez .mud-input-outlined-border { border-radius: 10px; }
.ms-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 600px) { .ms-form.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ms-form .span2 { grid-column: 1 / -1; } }
.ms-sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--ui-line); }
.ms-sw:first-of-type { border-top: 0; }
.ms-sw .t { min-width: 0; } .ms-sw .t b { display: block; font-weight: 500; font-size: 14.5px; } .ms-sw .t small { display: block; color: var(--ui-muted); font-size: 12.5px; margin-top: 1px; }
.ms-sw .mud-switch { margin: 0; flex: 0 0 auto; }
.ms-sez .ms-btn { font-weight: 500; font-size: 14px; padding: 9px 12px; }
.ms-sez .v { font: 700 16px var(--ui-f-display); overflow-wrap: anywhere; line-height: 1.35; }
.ms-sez .hint { color: var(--ui-muted); font-size: 13px; }

/* Celle della griglia modale (conversione dei vecchi MudGrid/MudItem) */
.ms-cell { min-width: 0; }
.ms-form .ms-cell.full { grid-column: 1 / -1; }
.ms-cell.sw { display: flex; align-items: center; border: 1px solid var(--ui-line); border-radius: 10px; padding: 2px 10px; background: var(--ui-surface); min-height: 44px; }
.ms-cell.sw .mud-switch { margin: 0; }
.ms-cell.sw .mud-switch-label, .ms-cell.sw .mud-switch .mud-typography { font-size: 14px; }
.ms-modal .mud-tabs-panels { padding-top: 10px; }
.ms-modal .mud-input-control { margin: 0; }
.ms-modal .hint { color: var(--ui-muted); font-size: 13px; }
.ms-modal .mud-alert { border-radius: 10px; }
.ms-codice { border: 1px dashed var(--ui-accent-strong); border-radius: 12px; background: var(--ui-accent-soft); padding: 14px; text-align: center; font: 700 28px ui-monospace, Consolas, monospace; letter-spacing: .18em; color: var(--ui-ink); }

/* Schede del modale: la barra di MudTabs e' nascosta, al suo posto una riga di segmenti
   scorrevole (stessa grafica della testata delle pagine). */
.ms-tabs .mud-tabs-tabbar { display: none; }
.ms-modal { grid-template-columns: minmax(0, 1fr); }
.ms-modal > * { min-width: 0; }
.ms-tabs.mud-tabs { box-shadow: none !important; border-radius: 0; }
.ms-tabs .mud-tabs-panels { padding: 0 !important; }
.ms-tabseg { width: 100%; display: flex; }
.ms-tabseg button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ms-tabseg button .mud-icon-root { font-size: 17px; }
.ms-fatti { display: grid; gap: 6px; }
.ms-fatto { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-surface); font-size: 14px; }
.ms-fatto > .k { color: var(--ui-muted); display: inline-flex; align-items: center; gap: 6px; }
.ms-fatto > .k .mud-icon-root { font-size: 18px; }
.ms-fatto > .v { font-weight: 600; text-align: right; }
.ms-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ms-kpi { display: grid; place-items: center; gap: 2px; padding: 12px 6px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-surface); text-align: center; }
.ms-kpi .n { font: 700 26px var(--ui-f-body); line-height: 1.1; }
.ms-kpi .t { font-size: 12px; color: var(--ui-muted); }
.ms-kpi .mud-icon-root { font-size: 22px; color: var(--ui-muted); }

/* Liste di interruttori nei blocchi: una riga ciascuno, nome per esteso + spiegazione */
.ms-sws { display: grid; }
.ms-sws > .ms-sw:first-child, .ms-sez > .l + .ms-sw { border-top: 0; }
.ms-sw { padding: 8px 0; }
.ms-modal .ms-modal { gap: 12px; }
.ms-tabseg { position: sticky; top: 0; z-index: 3; box-shadow: 0 0 0 6px var(--ui-surface); background: var(--ui-surface2); }

/* Modali a tutto schermo sul telefono (03/10/2026): sotto i 700 px la finestra occupa tutto,
   titolo in alto, contenuto scorrevole, Annulla/Salva fissi in basso. Solo i modali standard
   (quelli con .ms-modal dentro). */
@media (max-width: 700px) {
  .mud-dialog:has(.ms-modal) { position: fixed; inset: 0; width: 100vw !important; max-width: 100vw !important; height: 100dvh; max-height: 100dvh !important; margin: 0 !important; border-radius: 0 !important; display: flex; flex-direction: column; }
  .mud-dialog:has(.ms-modal) .mud-dialog-title { padding: 14px 16px 10px; border-bottom: 1px solid var(--ui-line); flex: 0 0 auto; }
  .mud-dialog:has(.ms-modal) .mud-dialog-content { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow: auto; padding: 12px 12px 16px; background: var(--ui-bg); }
  .mud-dialog:has(.ms-modal) .mud-dialog-actions { flex: 0 0 auto; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ui-line); gap: 8px; }
  .mud-dialog:has(.ms-modal) .mud-dialog-actions .mud-button-root { min-height: 44px; }
  .mud-dialog:has(.ms-modal) .mud-dialog-actions .mud-button-filled { flex: 1 1 auto; }
  .mud-dialog:has(.ms-modal) .ms-tabseg { box-shadow: 0 0 0 6px var(--ui-bg); }
}

.ms-fatto.ms-voce { align-items: flex-start; }
.ms-fatto.ms-voce > .t { min-width: 0; display: grid; gap: 1px; }
.ms-fatto.ms-voce > .t b { font-weight: 600; }
.ms-fatto.ms-voce > .t span { font-size: 13.5px; }
.ms-fatto.ms-voce > .t small { color: var(--ui-muted); font-size: 12.5px; overflow-wrap: anywhere; }
.ms-spunte { max-height: 52vh; overflow: auto; padding: 4px 10px; gap: 0; }
@media (max-width: 700px) { .ms-spunte { max-height: none; } }

.ms-click { cursor: pointer; }
.ms-click:hover small { color: var(--ui-ink); }

.ms-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-seg button i { font-style: normal; color: var(--ui-muted); margin-left: 4px; font-size: 12px; }
.ui-seg button.on i { color: var(--ui-ink); }

/* Pagine a periodo (Contabilita'): totale del periodo e griglia dei KPI */
.ms-tot { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 12px; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.ms-tot > span { color: var(--ui-muted); }
.ms-tot > b { font: 700 20px var(--ui-f-display); font-variant-numeric: tabular-nums; }
.ms-kpigrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
@media (min-width: 900px) { .ms-kpigrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ms-kpigrid .k { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.ms-kpigrid .k small { display: block; color: var(--ui-muted); font-size: 12px; }
.ms-kpigrid .k b { font: 700 20px var(--ui-f-display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ms-kpigrid .k.big { grid-column: 1 / -1; border-width: 2px; }
.ms-kpigrid .k.big.good { border-color: var(--ui-good); background: var(--ui-good-bg); } .ms-kpigrid .k.big.good b { color: var(--ui-good); font-size: 26px; }
.ms-kpigrid .k.big.bad { border-color: var(--ui-bad); background: var(--ui-bad-bg); } .ms-kpigrid .k.big.bad b { color: var(--ui-bad); font-size: 26px; }
.ms-kpigrid .k.dim { opacity: .8; }

a.ms-btn { text-decoration: none; }

/* Pagina Store (03/10/2026): briciole, blocchi di navigazione a righe */
.ms-crumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ui-muted); min-width: 0; flex-wrap: wrap; }
.ms-crumb .mud-icon-root { font-size: 17px; }
.ms-crumb a { color: var(--ui-muted); text-decoration: none; }
.ms-crumb a:hover { color: var(--ui-ink); text-decoration: underline; }
.ms-navsez > .r small.wrap { white-space: normal; text-align: right; line-height: 1.25; font-size: 11.5px; max-width: 55%; }
.ms-nav { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ms-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .ms-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ms-navsez { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 14px; overflow: hidden; min-width: 0; }
.ms-navsez > .h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font: 700 16px var(--ui-f-display); }
.ms-navsez > .h .mud-icon-root { color: var(--ui-muted); font-size: 22px; }
.ms-navsez > .h small { margin-left: auto; color: var(--ui-muted); font: 400 13px var(--ui-f-body); white-space: nowrap; }
.ms-navsez > .r { display: flex; align-items: center; gap: 10px; padding: 11px 12px 11px 46px; border-top: 1px solid var(--ui-line); font-size: 14.5px; color: var(--ui-ink); text-decoration: none; min-height: 44px; }
.ms-navsez > .r:hover { background: var(--ui-accent-soft); }
.ms-navsez > .r .mud-icon-root { font-size: 19px; color: var(--ui-muted); flex: 0 0 auto; }
.ms-navsez > .r small { margin-left: auto; color: var(--ui-muted); font-size: 12.5px; white-space: nowrap; }
.ms-navsez > .r .chev { margin-left: auto; color: var(--ui-line); }
.ms-navsez > .r small + .chev { margin-left: 2px; }
.ms-kpigrid .k.ms-click:hover { border-color: var(--ui-accent); }

.ms-crumb { font-size: 14px; }
.ms-crumb-back { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--ui-accent-soft); flex: 0 0 auto; }
.ms-crumb-back .mud-icon-root { color: var(--ui-ink); font-size: 19px; }
.ms-crumb-menu { display: inline-flex; min-width: 0; }
/* livello corrente: un pulsante col nome, non un campo da compilare */
.ms-crumb-btn { display: inline-flex; align-items: center; gap: 1px; min-width: 0; max-width: 100%; border: 0; background: transparent; padding: 4px 2px; cursor: pointer; font: 600 14px var(--ui-f-body); color: var(--ui-ink); }
.ms-crumb-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-crumb-btn .mud-icon-root { font-size: 20px; color: var(--ui-muted); flex: 0 0 auto; }
.ms-crumb-btn:hover > span { text-decoration: underline; }
/* dal gruppo si scende in uno store: azione chiara, con il bordo */
.ms-crumb-apri { margin-left: 2px; }   /* NON margin-left:auto: andando a capo restava sospeso a meta' riga (04/10/2026) */
.ms-crumb-store { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-surface); cursor: pointer; font: 500 13.5px var(--ui-f-body); color: var(--ui-ink); white-space: nowrap; }
.ms-crumb-store:hover { background: var(--ui-accent-soft); border-color: var(--ui-accent); }
.ms-crumb-store .mud-icon-root { font-size: 19px; color: var(--ui-muted); }
.ms-crumb-store .dd { margin-left: -2px; }
.ms-crumb-menu + .ms-crumb-menu { flex: 0 0 auto; }
.mud-list-item .ms-voce-on { font-weight: 700; }
.mud-list-item small { color: var(--ui-muted); margin-left: 6px; }

/* ── NIENTE ZOOM AUTOMATICO QUANDO SI TOCCA UN CAMPO (03/10/2026) ──
   Safari su iPhone/iPad ingrandisce tutta la pagina appena si mette il cursore in un
   campo il cui testo e' sotto i 16px (e poi non torna indietro da solo). La cura e'
   una sola: sul telefono ogni campo scrive a 16px. Non blocchiamo il viewport
   (niente maximum-scale/user-scalable=no): lo zoom con le dita resta a disposizione
   di chi ne ha bisogno, sparisce solo quello che partiva da solo.
   Soglia 1024px: prende anche l'iPhone girato di lato (844px) e i tablet. */
@media (max-width: 1024px) {
    /* !important: deve battere le classi di pagina (.ui-sel della Dashboard stava a 13,5px
       e lo zoom scattava lo stesso). Qui si decide solo la misura del testo dentro i campi. */
    input, select, textarea,
    .mud-input input, .mud-input textarea, .mud-input-slot, .mud-select input,
    .ui-sel, .ms-search input, .mud-input-root {
        font-size: 16px !important;
    }
    /* voci del menu e icone della barra: bersaglio comodo da toccare */
    .mud-drawer .mud-nav-link, .mud-drawer .mud-nav-group .mud-nav-link { min-height: 44px; }
    /* segmenti, briciole e pulsanti della testata: alti abbastanza per il dito (erano 26px) */
    .ui-seg button { min-height: 38px; padding: 7px 14px; font-size: 13.5px; }
    .ms-crumb-btn { min-height: 38px; }
    .ms-crumb-back { width: 38px; height: 38px; }
    .ms-testata .mud-button-root { min-height: 40px; }
}

/* Android e Safari in orizzontale rigonfiano i testi da soli: lo impediamo. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Schede sul telefono, tabella sul computer: la stessa cosa detta nei due modi giusti. */
.ms-solo-tel { display: none; }
@media (max-width: 700px) {
    .ms-solo-tel { display: grid; }
    .ms-solo-tel.ui-seg { display: inline-flex; }   /* i segmenti restano in riga */
    .ms-solo-pc { display: none !important; }
}
/* un avviso "si usa dal computer" occupa tutta la pagina, non una colonna */
.ms-solo-tel > .ms-testata { width: 100%; box-sizing: border-box; }
.ms-solo-tel .ms-btn { display: inline-flex; width: auto; }

/* Nota dentro un modale (prima era un MudAlert azzurro che rubava mezzo schermo). */
.ms-nota { background: var(--ui-surface2); border-left: 3px solid var(--ui-accent); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--ui-muted); line-height: 1.45; }
.ms-nota code { background: var(--ui-surface); padding: 1px 4px; border-radius: 4px; }
.ms-tabs-cli .mud-tabs-tabbar { border-bottom: 1px solid var(--ui-line); }

/* ── I TONDI DELLE FINESTRE (04/10/2026, anteprima 7ZPLWDEvrNaMw6Tj6wptSb) ──
   Una finestra si chiude SEMPRE dal tondo in alto a sinistra, sovrapposto al contenuto
   come nel visualizzatore di foto del telefono: fermo mentre il resto scorre, 44px, fondo
   scuro trasparente cosi' si vede anche sopra una tabella bianca. In fondo resta solo il
   pulsante che salva. Il tondo lo mette MudBlazor (MudDialogProvider CloseButton="true"):
   qui gli diamo la forma. */
.mud-dialog .mud-dialog-title { position: relative; padding-left: 68px; }
.mud-dialog .mud-button-close {
    position: absolute; left: 12px; top: 10px; margin: 0;
    width: 44px; height: 44px; border-radius: 999px;
    background: rgba(20, 32, 30, .62); backdrop-filter: blur(6px);
    transition: background .15s;
}
.mud-dialog .mud-button-close:hover, .mud-dialog .mud-button-close:focus-visible { background: rgba(20, 32, 30, .82); }
.mud-dialog .mud-button-close .mud-icon-root { color: #fff; font-size: 24px; }
/* una domanda si risponde, non si naviga: niente tondo sulle conferme */
.mud-dialog:has(.mud-message-box) .mud-dialog-title, .mud-dialog.ms-conferma .mud-dialog-title { padding-left: 24px; }
.mud-dialog:has(.mud-message-box) .mud-button-close, .mud-dialog.ms-conferma .mud-button-close { display: none; }
/* azioni secondarie della finestra: altri tondi, a destra, al massimo due */
.ms-fabs { position: absolute; right: 12px; top: 10px; display: flex; gap: 8px; z-index: 2; }
.ms-fab {
    width: 44px; height: 44px; border-radius: 999px; border: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    background: rgba(20, 32, 30, .62); backdrop-filter: blur(6px); transition: background .15s;
}
.ms-fab:hover { background: rgba(20, 32, 30, .82); }
.ms-fab .mud-icon-root { color: #fff; font-size: 22px; }
.ms-fab:disabled { opacity: .45; cursor: default; }
/* in fondo un solo pulsante, largo: quello che salva */
.mud-dialog .mud-dialog-actions { gap: 10px; }
.mud-dialog .mud-dialog-actions > .mud-button-root:only-child { flex: 1 1 auto; min-height: 50px; border-radius: 12px; font-weight: 700; }
@media (max-width: 700px) {
    /* a tutto schermo il titolo scende sotto il tondo, cosi' i nomi lunghi non ci finiscono dietro */
    .mud-dialog:has(.ms-modal) .mud-dialog-title { padding: 62px 14px 6px; }
    .mud-dialog:has(.ms-modal) .ms-fabs { top: 10px; }
    .mud-dialog .mud-dialog-actions { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
    .mud-dialog .mud-dialog-actions > .mud-button-root { flex: 1 1 auto; min-height: 50px; border-radius: 12px; }
}

/* Tabella dentro una finestra: resta nei confini e scorre da sola se le colonne non ci stanno. */
.ms-tbl-modale { max-width: 100%; }
.mud-dialog .mud-table-container, .mud-dialog .mud-simple-table { max-width: 100%; overflow-x: auto; }
.mud-dialog .mud-simple-table table { min-width: 0; }
@media (max-width: 700px) {
    .mud-dialog .mud-simple-table table { font-size: 13px; }
    .mud-dialog .mud-simple-table td, .mud-dialog .mud-simple-table th { padding: 8px 6px; }
}

/* Prima voce del menu delle briciole: porta alla pagina di quel livello (04/10/2026,
   il referente: "come torno al menu dello store?"). */
.ms-voce-vai { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ui-ink); }
.ms-voce-vai .mud-icon-root { font-size: 19px; color: var(--ui-muted); }
/* il tondo indietro della barra in alto, per la webapp senza barra del browser */
.app-indietro { margin-left: -4px; }

/* Tendine dentro una testata (es. "Confronta con" della Dashboard): non escono mai
   dal pannello e sul telefono prendono la riga intera. */
.ms-testata .ui-sel { max-width: 100%; min-width: 0; flex: 0 1 auto; }
@media (max-width: 560px) {
    .ms-testata .ui-label { width: 100%; }
    .ms-testata .ui-sel { width: 100%; flex: 1 1 100%; }
}

/* ── FILA DEGLI STORE (04/10/2026) ── Pagine di partenza: i gruppi tutti a vista, un
   tocco per cambiare, e sotto gli store del gruppo in cui si e' entrati. Stessa grafica
   delle briciole: il quadratino lime con l'icona del negozio apre la pagina dello store. */
.ms-fila { display: grid; gap: 8px; min-width: 0; }
.ms-fila .riga { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ms-fila .ico {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 38px; height: 38px; border-radius: 9px; background: var(--ui-accent-soft);
}
.ms-fila .ico .mud-icon-root { color: var(--ui-ink); font-size: 20px; }
.ms-fila .ui-seg { min-width: 0; }
.ms-fila .ui-seg button .mud-icon-root { font-size: 17px; margin-right: 4px; vertical-align: -3px; }
/* la seconda riga e' un gradino sotto: rientrata e un filo piu' piccola */
.ms-fila .riga.sotto { padding-left: 46px; }
.ms-fila .riga.sotto .ui-seg { background: transparent; padding: 0; gap: 6px; }
.ms-fila .riga.sotto .ui-seg button { border: 1px solid var(--ui-line); background: var(--ui-surface); font-size: 13px; }
.ms-fila .riga.sotto .ui-seg button.on { background: var(--ui-accent); color: var(--ui-accent-ink, #161A0A); border-color: var(--ui-accent); font-weight: 600; box-shadow: none; }
.ms-fila .apri {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--ui-line); background: var(--ui-surface);
}
.ms-fila .apri:hover { background: var(--ui-accent-soft); border-color: var(--ui-accent); }
.ms-fila .apri .mud-icon-root { color: var(--ui-ink); font-size: 20px; }
.ms-fila .scelti { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.ms-fila .scelti .mud-icon-root { font-size: 16px; }
@media (max-width: 560px) {
    .ms-fila .riga.sotto { padding-left: 0; }
}

/* ── CATEGORIE (04/10/2026, anteprima 6ZbsddYv4YuQvhfEjo1X74) ──
   Le macro sono i titoli dei blocchi, una riga per categoria. Sul telefono le frecce
   (col dito il trascinamento non si prende), sul computer la maniglia. */
.ms-blocchi { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .ms-blocchi { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.ms-blocco { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 14px; overflow: hidden; min-width: 0; }
.ms-blocco > .cap { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.ms-blocco > .cap .nm { font: 700 16px var(--ui-f-display); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-blocco > .cap .ct { font-size: 13px; color: var(--ui-muted); white-space: nowrap; }
.ms-blocco > .cap .punto { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; }
.ms-blocco > .spiega { padding: 0 14px 10px; font-size: 12.5px; color: var(--ui-muted); line-height: 1.45; }
.ms-blocco .zona { min-height: 56px; }
.ms-blocco .mud-drop-zone { min-height: 56px; }

.ms-catriga { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--ui-line); background: var(--ui-surface); min-height: 60px; box-sizing: border-box; }
.ms-catriga .man { display: none; color: var(--ui-line); cursor: grab; flex: 0 0 auto; }
.ms-catriga .col { width: 4px; align-self: stretch; border-radius: 2px; flex: 0 0 auto; }
.ms-catriga .txt { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; text-align: left; padding: 4px 0; cursor: pointer; display: block; }
.ms-catriga .txt .nm { display: block; font: 500 15.5px var(--ui-f-body); color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-catriga .txt .sub { display: block; font-size: 12.5px; color: var(--ui-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-catriga .frecce { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.ms-catriga .frecce button { width: 38px; height: 27px; padding: 0; border: 1px solid var(--ui-line); background: var(--ui-surface); border-radius: 7px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ms-catriga .frecce button:disabled { opacity: .35; cursor: default; }
.ms-catriga .frecce .mud-icon-root { font-size: 18px; color: var(--ui-muted); }
.ms-catriga .matita { width: 40px; height: 40px; border: 0; background: transparent; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.ms-catriga .matita:hover, .ms-blocco .cap .matita:hover { background: var(--ui-accent-soft); }
.ms-catriga .matita .mud-icon-root, .ms-blocco .cap .matita .mud-icon-root { font-size: 19px; color: var(--ui-muted); }
.ms-blocco .cap .matita { width: 36px; height: 36px; border: 0; background: transparent; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.ms-pill.sm { font-size: 11px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; }
/* sul computer compare la maniglia e spariscono le frecce */
@media (min-width: 701px) {
    .ms-catriga .man { display: inline-flex; }
    .ms-catriga .frecce { display: none; }
}

/* Il pulsante che aggiunge, quando apre un menu di scelte, resta dentro la pillola. */
.ms-search .ms-newmenu { flex: 0 0 auto; display: inline-flex; }
.ms-search .ms-new { white-space: nowrap; }
/* interruttore dentro la riga delle azioni di una scheda */
.ms-cta .ms-sw-inline { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 40px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-surface); flex: 0 0 auto; }
.ms-cta .ms-sw-inline .mud-switch { margin: 0; }

/* Intestazione di gruppo con la spunta (es. la sala): si prende tutto in un colpo. */
.ms-spunte .ms-gruppo { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 8px 6px; min-height: 44px; box-sizing: border-box; border: 0; border-top: 1px solid var(--ui-line); background: transparent; cursor: pointer; text-align: left; }
.ms-spunte .ms-gruppo:hover { background: var(--ui-accent-soft); }
.ms-spunte .ms-gruppo .box { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--ui-line); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ms-spunte .ms-gruppo.tutti .box, .ms-spunte .ms-gruppo.alcuni .box { background: var(--ui-accent); border-color: var(--ui-accent); }
.ms-spunte .ms-gruppo .box .mud-icon-root { font-size: 16px; color: #161A0A; }
.ms-spunte .ms-gruppo .nm { flex: 1 1 auto; min-width: 0; font: 600 11.5px var(--ui-f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-spunte .ms-gruppo .ct { font: 400 12px var(--ui-f-body); color: var(--ui-muted); white-space: nowrap; }

/* Scheda evento: le griglie dei numeri scorrono nella loro cornice (04/10/2026). */
@media (max-width: 700px) {
    .evm-grid { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .evm-grid thead, .evm-grid tbody, .evm-grid tfoot { display: table; width: max-content; min-width: 100%; }
}

/* Il TITOLO ricarica la pagina (04/10/2026, richiesta del referente: via il pulsante
   tondo che lasciava un vuoto sotto il titolo). L'icona sta dopo la scritta e gira
   mentre i dati arrivano. */
.ms-titolo { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 0; cursor: pointer; font: 700 22px var(--ui-f-display); line-height: 1.15; color: var(--ui-ink); text-align: left; }
.ms-titolo .mud-icon-root { font-size: 20px; color: var(--ui-muted); flex: 0 0 auto; }
.ms-titolo:hover .mud-icon-root { color: var(--ui-ink); }
.ms-titolo .gira { animation: ms-gira 1s linear infinite; }
@keyframes ms-gira { to { transform: rotate(360deg); } }



/* NOTE DI CREDITO (06/10/2026, richiesta del referente): in mezzo alle fatture devono
   saltare all'occhio, perche' hanno lo stesso numero e lo stesso aspetto ma tolgono invece
   di aggiungere. Rosso pieno sulla pillola, importo in rosso col segno meno. */
.tipo-chip.nota, .ms-pill.nota {
    background: #c62828 !important; color: #fff !important; border: 1px solid #b71c1c !important;
    font-weight: 700; letter-spacing: .3px; margin-left: 6px;
}
.fde-tot.nota, b.nota { color: #c62828; }


/* NOTA DI DEBITO (06/10/2026): si riconosce come quella di credito ma non e' la stessa cosa -
   quella toglie, questa rimette. Verde, per non confonderle a colpo d'occhio. */
.tipo-chip.notadeb, .ms-pill.notadeb {
    background: #2e7d32 !important; color: #fff !important; border: 1px solid #1b5e20 !important;
    font-weight: 700; letter-spacing: .3px; margin-left: 6px;
}


/* RIGHE O SCHEDE, A SCELTA (07/10/2026). Senza scelta comanda la larghezza, come prima.
   Si toccano solo gli elenchi: .ms-solo-tel marca anche avvisi buoni solo sul telefono,
   che non devono comparire perche' qualcuno ha scelto le schede. */
.vista-lista .ms-cards.ms-solo-tel { display: none !important; }
.vista-lista .ms-solo-pc { display: block !important; }
.vista-lista table.ms-solo-pc { display: table !important; }
.vista-griglia .ms-cards.ms-solo-tel { display: grid !important; }
.vista-griglia .ms-solo-pc { display: none !important; }

/* Terzo schema: tabella .ui-tbl.resp e schede .ui-cards (07/10/2026). Stessa regola:
   senza scelta comanda la larghezza, con la scelta comanda chi guarda. */
.vista-lista .ui-tbl.resp { display: table !important; }
.vista-lista .ui-cards { display: none !important; }
.vista-griglia .ui-tbl.resp { display: none !important; }
.vista-griglia .ui-cards { display: grid !important; }

/* Quarto schema: le due pagine "modifica prodotti", che alternavano con le classi Bootstrap
   (tabella sopra i 992 px, schede sotto). Si danno due nomi propri ai blocchi, cosi' la
   scelta li comanda senza toccare tutte le altre classi della pagina (07/10/2026). */
.vista-lista .mp-schede { display: none !important; }
.vista-lista .mp-tabella { display: block !important; }
.vista-griglia .mp-schede { display: block !important; }
.vista-griglia .mp-tabella { display: none !important; }

/* Registro apparecchi, vista a schede (07/10/2026): il nome sta da solo sulla prima riga e
   matricola, stato e blocco schermo vanno sotto, su una riga sempre alta uguale. Prima stavano
   in fila col nome e, cambiando la lunghezza dei nomi, le schede non si allineavano fra loro. */
.ms-meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    min-height: 32px; margin-top: 2px;
}
.ms-meta small { color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ms-meta .ms-meta-ic { margin-left: auto; display: inline-flex; }
.ms-meta .ms-meta-ic .mud-icon-button { padding: 4px; }

/* Registro apparecchi: le schede devono incolonnarsi (07/10/2026). Le parti che cambiano
   numero di righe - contesto, versione, stato - facevano partire il riquadro "App" ad altezze
   diverse da scheda a scheda. Qui ognuna tiene la sua altezza, e il testo lungo si accorcia
   invece di andare a capo. */
.rd-card { display: flex; flex-direction: column; }
.rd-card .ms-name { min-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-card .ms-sub { min-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-card .ms-box .v { min-height: 22px; }
.rd-card .ms-box .st { min-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-card .ms-grid { margin-top: auto; }   /* le ultime righe appoggiate in fondo */

/* Registro apparecchi, vista a righe (07/10/2026): nella colonna dello stato il chip sta a
   sinistra e il lucchetto a destra, incolonnato con quelli delle altre righe. */
.rd-stato .rd-stato-in { display: flex; align-items: center; gap: 8px; }
.rd-stato .ms-meta-ic { margin-left: auto; display: inline-flex; }
.rd-stato .ms-meta-ic .mud-icon-button { padding: 4px; }

/* Tasti della cassa: la tavolozza completa, che si apre sotto la fila corta (07/10/2026).
   Quattro tonalita' per famiglia, incolonnate, cosi' si scorre per colore e non alla cieca. */
.cc-tavolozza {
    display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto);
    gap: 4px; justify-content: start; overflow-x: auto;
    margin-top: 6px; padding: 6px; border: 1px solid var(--ui-line); border-radius: 10px;
    background: var(--ui-surface2);
}
/* quadratini, non strisce: le colonne si misurano sul colore, non sulla larghezza del pannello */
.cc-tavolozza .cc-chip { width: 22px; height: 22px; border-radius: 4px; cursor: pointer; flex: 0 0 auto; }
.cc-altri { border: 1px solid var(--ui-line); background: var(--ui-surface); border-radius: 6px;
            cursor: pointer; display: inline-flex; align-items: center; padding: 2px 4px; }
.cc-altri.on { background: var(--ui-surface2); }
@media (max-width: 900px) { .cc-tavolozza { grid-template-rows: repeat(8, auto); } }

/* LA BARRA DELLE SCHEDE DENTRO UNA MODALE (07/10/2026). Resta in alto mentre il contenuto
   scorre, ma senza un fondo pieno le righe che le passano dietro si vedevano tagliate a meta'
   sopra e sotto: sembrava tutto disallineato. Il fondo si estende oltre i bordi con un
   elemento dedicato, cosi' non dipende dai margini del contenitore - che MudBlazor cambia con
   la larghezza - e non crea scorrimento laterale. */
.mud-dialog .mud-dialog-content { overflow-x: hidden; }
.mud-dialog .ms-tabseg { position: sticky; top: 0; z-index: 6; background: transparent; box-shadow: none; }
.mud-dialog .ms-tabseg::before {
    content: ""; position: absolute; left: -50vw; right: -50vw; top: -8px; bottom: -8px;
    background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); z-index: -1;
}

/* Riga dell'intestazione dello scontrino (07/10/2026): campo e selettore partono dalla stessa
   altezza. Il campo porta sotto il contatore dei caratteri ed e' quindi piu' alto: centrandoli
   il selettore scendeva, e le due colonne non erano in riga. Numero e comandi si abbassano
   quel tanto che basta per stare in mezzo al riquadro. */
.rt-riga {
    /* A COLONNE FISSE (07/10/2026): cosi' i campi di testo sono tutti larghi uguali. In fila
       libera ognuno si allargava per riempire quello che restava, e bastava un aspetto piu'
       corto - o la sua assenza, dalla decima riga in poi - perche' le righe non fossero piu'
       incolonnate fra loro. */
    display: grid; grid-template-columns: 26px 43ch 220px 40px 40px;
    align-items: flex-start;
}
@media (max-width: 700px) { .rt-riga { display: flex; } }
/* il selettore sta dentro un involucro suo e porta 8 px di margine per l'etichetta: vanno
   azzerati, altrimenti parte piu' in basso del campo di 17 px */
.rt-riga > .mud-select, .rt-riga > .mud-input-control { margin-top: 0; }
.rt-riga .mud-select > .mud-input-control { margin-top: 0; }
/* IL CAMPO E' LARGO 40 CARATTERI, quanti ne stampa l'RT, ed e' a larghezza fissa come la
   stampante: cosi' quello che si scrive e' quello che esce, e il pulsante che centra ha un
   riferimento vero invece di una larghezza che cambia da riga a riga (07/10/2026). */
.rt-riga .mud-input-root, .rt-riga input { font-family: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace; font-size: 13.5px; letter-spacing: 0; }
/* numero di riga e comandi scendono quel tanto che basta per stare in mezzo al riquadro */
.rt-riga > *:not(.mud-input-control):not(.mud-select) { margin-top: 9px; }

/* Campo file dentro un'etichetta (07/10/2026). Nasconderlo con display:none lo toglie dal
   layout e in quel caso alcuni browser non aprono piu' la scelta del file cliccando
   l'etichetta: resta invisibile ma presente, che e' il modo che funziona ovunque. */
.ms-file-host { position: relative; overflow: hidden; }
/* Il campo copre tutto il pulsante ed e' trasparente: si clicca lui, non l'etichetta, e la
   finestra di scelta si apre su qualunque browser senza bisogno di codice. */
.ms-file-host .ms-file-sopra {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; font-size: 0;
}