/* dashboard/css/44-tables.css — estratto da app.css (2026-07, split senza build). */
/* ===== CARD E TABELLE DATI (dt-card / dt-table) ===== */
.dt-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
.dt-card-head { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dt-card-head h3, .dt-card-head h2 { font-size: 15px; font-weight: 700; }
.dt-card-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Card export di sola testata (AdE Report): senza righe sotto il
   border-bottom della head raddoppierebbe il bordo card. La card Report di
   Clienti è .report-card (testata + Cerca, vedi 40-clienti.css). */
.export-card .dt-card-head { border-bottom: 0; }
/* export in testata tabella = stesso elemento dei "Scarica Excel/PDF" sotto
   .section-title (Corrispettivi, Fatture), colore brand incluso: là arriva da
   .section-title a, qui va dichiarato. */
.dt-card-head .actions .btn-secondary { color: var(--brand); }
.dt-card-body { padding: 8px 0; }

/* border trasparente di serie: l'attivo accende solo il colore del bordo, senza
   allargare il bottone di 2px al cambio di stato. */
.pill-btn { font-size: 12px; padding: 6px 12px; border-radius: 999px; background: var(--bg); color: var(--ink-2); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent; cursor: pointer; }
.pill-btn:hover { background: var(--line); }
.pill-btn.active { background: var(--surface); color: var(--brand); border-color: var(--brand); font-weight: 700; }
.pill-btn.active:hover { background: var(--brand-soft); }
.pill-btn.brand { background: var(--brand); color: #fff; }
.pill-btn.brand:hover { background: var(--brand-hover); }

.setting-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.setting-row .ico { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.setting-row .body { flex: 1; }
.setting-row .ttl { font-size: 14px; font-weight: 600; }
.setting-row .sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

.dt-table { width: 100%; border-collapse: collapse; }
.dt-table thead th { text-align: left; padding: 10px 14px; font-size: 11px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dt-table tbody td { padding: 12px 14px; font-size: 13px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.dt-table tbody tr:hover { background: var(--bg); cursor: pointer; }
.dt-table tbody tr:last-child td { border-bottom: none; }
.dt-table td.num, .dt-table th.num, .dt-table .num { text-align: right !important; font-variant-numeric: tabular-nums; }
.dt-table th.th-group { text-align: center !important; color: var(--brand); border-bottom: 1px solid var(--line); }
.dt-table .av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,#FFD3DC,#FFAFC0); color: var(--brand-dark); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; margin-right: 10px; vertical-align: middle; }
.dt-table .codecell { font-family: ui-monospace, monospace; color: var(--ink-3); font-size: 11.5px; }
/* Riga filtri nel thead (.dt-filter-row): select/input compatti sotto i th.
   Niente uppercase/letter-spacing ereditati dai th: sono controlli, non label.
   Sfondo --bg: la riga si legge come fascia-strumenti, staccata dalle label. */
.dt-table .dt-filter-row th { padding: 10px 14px 12px; background: var(--bg); text-transform: none; letter-spacing: normal; font-weight: 400; border-bottom: 1px solid var(--line); }
.dt-filter-select, .dt-filter-input { width: 100%; min-width: 90px; max-width: 200px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background-color: var(--surface); color: var(--ink-2); font-size: 12.5px; font-family: inherit; transition: border-color 120ms ease, box-shadow 120ms ease; }
/* Chevron custom (colore = --ink-3): quello nativo sta incollato al bordo. */
.dt-filter-select { cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A93A4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; }
.dt-filter-select:hover, .dt-filter-input:hover { border-color: var(--ink-3); }
.dt-filter-select:focus, .dt-filter-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
/* iOS zooma la viewport al focus di campi con font < 16px: su touch i
   controlli salgono a 16px (stessa ragione del 16px sulla .search-bar). */
@media (hover: none) and (pointer: coarse) {
  .dt-filter-select, .dt-filter-input { font-size: 16px; height: 38px; }
}
/* Nei Movimenti il bottone vive a fianco della search (stessa altezza/radius
   del campo: il pill 6px accanto a un input da 40px sembrava un refuso). */
.search-bar .dt-filter-btn { flex-shrink: 0; align-self: stretch; padding: 0 14px; font-size: 13px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; }
/* Bottone "Filtri" a fianco (card head / section-title): la riga filtri parte
   hidden e si apre al click (dtFilterToggle). Stati: aperto (aria-expanded)
   e filtri server-side attivi (is-filtering, evidenziato anche a riga chiusa). */
.dt-filter-btn[aria-expanded="true"], .dt-filter-btn.is-filtering { background: var(--brand-soft); color: var(--brand); }
/* Barra compatta porta-bottone per tabelle senza card-head (storico fidelity) */
.dt-filter-bar { display: flex; justify-content: flex-end; padding: 10px 14px 0; }
/* F8 · variante compatta tabelle eco per stare in viewport mobile senza scroll-x. */
.dt-table--compact thead th { padding: 6px 8px; font-size: 10px; white-space: normal; line-height: 1.25; }
.dt-table--compact tbody td { padding: 6px 8px; font-size: 11px; white-space: normal; line-height: 1.3; }

/* === Menu di colonna type-aware (Movimenti, direzione 2) ================
   Ogni header e' un bottone che apre un popover (Ordina up/down + filtro per
   tipo). Freccia di sort sempre visibile: idle (#i-sort) / ordinata
   (#i-chevron-down, ruotata per asc). Popover fixed via JS (fuori dal
   table-wrap che ha overflow-x:auto, design-system §14). */
.dt-table thead th.mov-th { padding: 0; }
.mov-th-btn { display: inline-flex; align-items: center; gap: 5px; width: 100%; padding: 11px 14px; background: none; border: 0; font: inherit; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); cursor: pointer; text-align: left; }
.mov-th.num .mov-th-btn { justify-content: flex-end; }
.mov-th-btn:hover { color: var(--ink); }
.mov-th-label { white-space: nowrap; }
.mov-th-arrow { width: 12px; height: 12px; flex-shrink: 0; opacity: .4; transition: transform .12s ease; }
.mov-th-arrow-idle { opacity: .35; }
.mov-th-btn:hover .mov-th-arrow { opacity: .7; }
.mov-th.is-sorted .mov-th-btn { color: var(--ink); }
.mov-th.is-sorted .mov-th-arrow { opacity: 1; }
.mov-th.is-sorted.dir-asc .mov-th-arrow { transform: rotate(180deg); }
.mov-th-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }

.colmenu-pop { position: fixed; z-index: 60; min-width: 200px; max-width: 280px; max-height: 70vh; overflow-y: auto; display: flex; flex-direction: column; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-card); }
/* display:flex (author) batterebbe [hidden]{display:none} (UA): lo stato nascosto
   deve vincere, altrimenti tutti i popover restano visibili al load. */
.colmenu-pop[hidden] { display: none; }
.colmenu-sort { display: flex; flex-direction: column; gap: 2px; }
.colmenu-sort-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.colmenu-sort-row .i { width: 14px; height: 14px; color: var(--ink-3); flex-shrink: 0; }
.colmenu-sort-row:hover { background: var(--bg); color: var(--ink); }
.colmenu-sort-row.is-active { background: var(--brand-soft); color: var(--brand); }
.colmenu-sort-row.is-active .i { color: var(--brand); }
.colmenu-arr-down { transform: rotate(180deg); }
.colmenu-filter { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.colmenu-search, .colmenu-contains { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background-color: var(--surface); color: var(--ink); font-size: 13px; font-family: inherit; }
.colmenu-search:focus, .colmenu-contains:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.colmenu-list { display: flex; flex-direction: column; gap: 1px; max-height: 220px; overflow-y: auto; }
.colmenu-opt { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.colmenu-opt:hover { background: var(--bg); color: var(--ink); }
.colmenu-opt input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--brand); cursor: pointer; }
.colmenu-opt-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colmenu-empty { margin: 0; padding: 8px; font-size: 13px; color: var(--ink-3); }
.colmenu-range { display: flex; gap: 8px; }
.colmenu-range-fld { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.colmenu-range-fld input { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background-color: var(--surface); color: var(--ink); font-size: 13px; font-family: inherit; }
.colmenu-range-fld input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
/* Applica/Azzera: riga di azioni del popover. "Applica" e' outline brand, stessi
   valori di .hdr-action (bordo 1px brand, fondo trasparente, hover brand-soft) —
   era nero pieno con hover brand, cioe' fuori palette e su touch nero per sempre.
   Radius 8px, non 999px: nel popover gli altri controlli sono squadrati. */
.colmenu-foot { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.colmenu-reset { flex: 0 0 auto; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; }
.colmenu-reset:hover { background: var(--bg); color: var(--ink-2); }
.colmenu-apply { flex: 1; height: 36px; border: 1px solid var(--brand); border-radius: 8px; background: var(--surface); color: var(--brand); font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background 120ms ease; }
.colmenu-apply:hover { background: var(--brand-soft); }
.colmenu-apply:active { background: var(--brand-soft); opacity: .85; }
.colmenu-apply:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* iOS zooma al focus se il font < 16px: su touch i campi salgono a 16px. */
@media (hover: none) {
  .colmenu-search, .colmenu-contains, .colmenu-range-fld input { font-size: 16px; }
}
.dt-table--compact tbody td:first-child { word-break: break-word; }
/* Override .mov-table-wrap min-width:760px (pensato per tabelle larghe).
   Doppia classe .dt-table.dt-table--compact = specificity (0,0,3,0) per
   battere `.mov-table-wrap .dt-table` (0,0,2,0) che viene definito DOPO
   nel file e altrimenti vincerebbe per ordine cascade. */
.mov-table-wrap .dt-table.dt-table--compact { min-width: 0; table-layout: fixed; width: 100%; }
.dt-table.dt-table--compact thead th:first-child,
.dt-table.dt-table--compact tbody td:first-child { width: 38%; }
.dt-table--compact tbody td strong { font-size: 12px; }

.action-btn { width: 32px; height: 32px; border-radius: 8px; background: var(--bg); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); cursor: pointer; }
.action-btn:hover { background: var(--line); }


/* Global modals (impostazioni) */
.gmodal { position: fixed; inset: 0; background: rgba(15,20,25,0.5); display: none; align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.gmodal.open { display: flex; }
/* NB (2026-06-23): tentativo di convertire i .gmodal a bottom-sheet su mobile (.gm-sheet)
   REVERTATO — riapre il glitch iOS Safari del fix gm-card-wide. I .gmodal restano
   full-screen page-like su mobile (sicuro), con la .gm-close (X) sempre presente.
   Il bottom-sheet vero si usa solo per i modali su pattern .sheet (es. menu "+"). */
/* .sheet-fs: porta un .sheet (bottom-sheet) a FULL-SCREEN page-like su MOBILE (sicuro iOS,
   stesso principio dei .gm-card-wide). Per i .sheet che in bottom-sheet si rompono su iOS
   (es. "Comunica"/Contatta cliente). Desktop invariato (centrato). La X (.sheet-close) resta. */
@media (max-width: 760px), (max-height: 540px) {
  .modal-backdrop.sheet-fs { align-items: stretch; padding: 0; }
  .modal-backdrop.sheet-fs > .sheet { width: 100%; max-width: none; max-height: none; min-height: 100vh; min-height: 100dvh; border-radius: 0; animation: none; padding: 18px 16px max(14px, env(safe-area-inset-bottom)); }
  .modal-backdrop.sheet-fs > .sheet .sheet-handle { display: none; }
}
/* min-width:0: da flex item di .gmodal (justify center) la card NON deve mai
   allargarsi al min-content del contenuto — una parola lunga (es. URL nello
   storico Schermo cassa) la faceva sbordare da entrambi i lati e su mobile il
   lato sinistro finiva fuori viewport, irraggiungibile (2026-07-20). */
.gmodal .gm-card { background: var(--surface); border-radius: 16px; max-width: 600px; width: 100%; min-width: 0; max-height: 90vh; overflow-y: auto; padding: 28px; box-shadow: 0 30px 80px rgba(15,20,25,0.3); }
/* Mobile: padding-bottom extra dentro la card per non far finire i bottoni
   "Salva/Annulla" sotto la Safari bottom-bar (iOS) quando si scrolla in fondo. */
@media (max-width: 600px) { .gmodal .gm-card { padding-bottom: 64px; } }

/* Lab map picker — riusa .gmodal/.gm-card, aggiunge solo viewport mappa + tools. */
.lmp-overlay { z-index: 250; }
.lmp-card { display: flex; flex-direction: column; height: min(700px, 88vh); }
.lmp-toolbar { display: flex; gap: 8px; margin: 10px 0; }
.lmp-map { flex: 1; min-height: 360px; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; }
.lmp-coords { margin-top: 8px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: center; }
.leaflet-container { z-index: 0; }
.leaflet-top, .leaflet-bottom { z-index: 400; }

/* Profilo lavanderia · geolocate buttons (mobile vs desktop).
   Desktop: 3ª colonna della field-row, bottone primary allineato al bottom
            degli input lat/lng (stessa altezza), niente hint sotto.
   Mobile:  field-row 2 colonne lat/lng, sotto un bottone primary full-width
            "Geolocalizza lavanderia" (usa GPS), incollato a 4px. */
.geo-fieldrow { grid-template-columns: 1fr 1fr auto; }
/* Il bottone è dentro un .field con label vuota → si allinea automaticamente
   sotto la label come gli altri input, alla stessa altezza riga. Padding
   simmetrico verticale = padding input (10px) così l'altezza matcha esatta. */
.geo-field-desktop .geo-btn-desktop { padding: 10px 16px; line-height: 1.2; box-sizing: border-box; }
.geo-btn-mobile { display: none; }
@media (max-width: 600px) {
  .geo-fieldrow { grid-template-columns: 1fr 1fr; }
  .geo-field-desktop { display: none; }
  .geo-btn-desktop { display: none; }
  /* margin-top/-bottom impostati inline sul bottone (spacing one-off). */
  .geo-btn-mobile {
    display: inline-flex; width: 100%;
    padding: 14px 18px;
    font-size: 15px;
  }
}
.gmodal .gm-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.gmodal h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: center; }
.gmodal .gm-sub { font-size: 14px; color: var(--ink-3); margin-bottom: 22px; }
.gmodal .gm-close { width: 32px; height: 32px; border-radius: 8px; background: var(--bg); color: var(--ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; }
/* Listini prezzi — modal grande per desktop con tabella che scrolla internamente.
   Solo il wrapper della tabella scrolla (orizzontale), header/disclaimer/actions
   restano sempre visibili. Input testuali (no spinner browser). */
.gmodal .gm-card.gm-card-wide {
  max-width: 1100px;
  width: 100%;
  max-height: min(85vh, 800px);
  display: flex;
  flex-direction: column;
  padding: 24px 28px 22px;
  overflow: hidden;
}
.gmodal .gm-card.gm-card-wide > .gm-head,
.gmodal .gm-card.gm-card-wide > .gm-sub { flex-shrink: 0; }
.gmodal .gm-card.gm-card-wide > form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.gmodal .gm-card.gm-card-wide .listini-table-wrap { flex: 1; min-height: 0; overflow: auto; }
/* Registra acquisto (detersivi): DUE form nella card (fattura + manuale).
   Il layout flex della wide, pensato per UN form con tabella interna
   scrollabile, li comprime a spartirsi l'altezza: appena l'estrazione
   riempie la tabella, le righe traboccano sul form sottostante (visto al
   primo collaudo con fattura reale, 2026-08-01). Qui la card scrolla
   come una pagina, in flusso normale. */
.gmodal[data-gm="detersivi-acquisto"] .gm-card.gm-card-wide { display: block; overflow-y: auto; }
.gmodal[data-gm="detersivi-acquisto"] .gm-card.gm-card-wide > form { display: block; flex: none; }
.gmodal[data-gm="detersivi-acquisto"] .gm-card.gm-card-wide .listini-table-wrap { flex: none; min-height: auto; overflow: visible; }
.gmodal .gm-card.gm-card-wide .warn-note,
.gmodal .gm-card.gm-card-wide .gm-actions { flex-shrink: 0; }

/* Listini wrap: solo container, NO border (i border stanno sui .listini-section figli).
   Su mobile (vedi @media sotto) il container diventa visible/no-scroll, lasciando
   alla viewport il compito di scrollare. */
.listini-table-wrap { width: 100%; margin: 14px 0 4px; }
/* Ogni section ha proprio scroll-x: il border-radius clip-pa gli angoli e
   lo scroll orizzontale funziona se la tabella interna eccede in larghezza. */
.listini-section { border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; overflow-y: hidden; background: var(--surface); -webkit-overflow-scrolling: touch; }
.listini-section + .listini-section { margin-top: 32px; }
.listini-table { width: 100%; border-collapse: collapse; min-width: 540px; font-size: 14px; }
/* Modale Conta magazzino (3 colonne: Prodotto + Taniche + Tanica aperta): il
   min-width pensato per i listini macchine multi-colonna la farebbe eccedere,
   clippando l'ultima colonna su mobile. Qui la tabella si comprime e ci sta.
   (Dispenser e Detersivi in Impostazioni non sono piu' tabelle: lista
   .prod-list in 32-impostazioni.css, redesign 2026-08-01.) */
.gmodal[data-gm="detersivi-conta"] .listini-table { min-width: 0; }
.gmodal[data-gm="detersivi-conta"] .listini-table th { white-space: normal; }
/* Campo numerico compatto da cella: variante tabellare del .numfield. */
.gmodal[data-gm="detersivi-conta"] .listini-table .numfield { display: inline-flex; align-items: center; gap: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; height: 34px; cursor: text; }
.gmodal[data-gm="detersivi-conta"] .listini-table .numfield:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent); }
.gmodal[data-gm="detersivi-conta"] .listini-table .numfield input { flex: 0 1 auto; width: 48px; min-width: 40px; border: 0; outline: 0; background: transparent; box-shadow: none; padding: 0; font-weight: 700; font-size: 16px; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.gmodal[data-gm="detersivi-conta"] .listini-table .numfield-suffix { color: var(--ink-3); font-size: 13px; font-weight: 700; flex-shrink: 0; }
.gmodal[data-gm="detersivi-conta"] .listini-table .col-machine { white-space: normal; min-width: 0; }
.gmodal[data-gm="detersivi-conta"] .listini-table .col-machine .model { white-space: normal; display: block; font-size: 12px; margin-top: 2px; color: var(--ink-3); }
.listini-table thead th { padding: 10px 12px; background: var(--bg); color: var(--ink-2); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; text-align: left; border-bottom: 1px solid var(--line); }
.listini-table tbody td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.listini-table tr.group-header > th { padding: 10px 12px; background: var(--bg); color: var(--ink-3); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; text-align: left; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.listini-table tr.group-header:first-child > th { border-top: none; }
/* Macro-header (Senza Card / Con Card) + sub-header (Tipo 0/1/2) per modal Prezzi macchine.
   Dual-naming inline: nome dashboard (primary) + nome cassa POS (secondary in parens). */
.listini-table tr.macro-header > th { padding: 10px 12px; background: var(--bg); color: var(--ink-2); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; text-align: center; border-bottom: 1px solid var(--line); vertical-align: top; }
.listini-table tr.macro-header > th.col-machine { text-align: left; }
.listini-table tr.macro-header > th.col-time,
.listini-table tr.macro-header > th.col-cash,
.listini-table tr.macro-header > th.col-card { background: #C7DBED; color: #1F4977; }
.listini-table tr.macro-header > th.col-time .macro-alias,
.listini-table tr.macro-header > th.col-cash .macro-alias,
.listini-table tr.macro-header > th.col-card .macro-alias { color: rgba(0,0,0,0.55); }
.listini-table tr.sub-header > th.col-cash,
.listini-table tr.sub-header > th.col-card,
.listini-table tbody td.col-cash,
.listini-table tbody td.col-card,
.listini-table tbody td.col-time { background: #EEF4FA; }
.listini-table .macro-alias { display: block; font-size: 10px; font-weight: 500; color: var(--ink-3); text-transform: none; letter-spacing: 0; margin-top: 2px; }
.listini-table tr.sub-header > th { padding: 8px 10px; background: var(--bg); color: var(--ink-3); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; text-align: center; border-bottom: 1px solid var(--line); }
.sub-alias { display: block; font-size: 10px; font-weight: 400; color: var(--ink-3); text-transform: none; letter-spacing: 0; margin-top: 2px; opacity: 0.75; }
.listini-table tr.slot-first td.col-machine { border-top: 2px solid var(--line); }
.listini-table .slot-cell-n,
.listini-table .slot-cell-min { text-align: center; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.listini-table .slot-cell-readonly { color: var(--ink-3); font-size: 13px; }
/* Machine-header row dentro tabella asciugatrici: blocco compatto con N° slot + durata slot 1 */
.listini-table tr.machine-header > td { padding: 12px 14px; background: var(--bg); border-top: 2px solid var(--line); border-bottom: 1px solid var(--line); }
.listini-table tr.machine-header:first-of-type > td { border-top: none; }
.listini-table .machine-header-body { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.listini-table .machine-header-body .machine-id strong { font-size: 14px; color: var(--ink); margin-right: 6px; }
.listini-table .machine-header-body .machine-id .model { font-size: 12px; color: var(--ink-3); }
.listini-table .machine-header-body .machine-config { display: flex; gap: 14px; align-items: center; }
.listini-table .machine-header-body .machine-config label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.listini-table .machine-header-body .machine-config input { width: 60px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; font-weight: 600; color: var(--ink); background: var(--surface); text-align: right; font-variant-numeric: tabular-nums; }
.listini-table tbody tr:last-child td { border-bottom: none; }
.listini-table .col-machine { white-space: nowrap; min-width: 140px; background: #FBF7EE; border-right: 1px solid #ECE3D0; }
.listini-table thead .col-machine { background: var(--bg); z-index: 3; }
.listini-table .col-machine strong { color: var(--ink); margin-right: 6px; }
.listini-table .col-machine .model { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
/* Input testuale per i prezzi — niente spinner browser, scrittura libera da tastiera */
.listini-table input { width: 92px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; font-weight: 600; color: var(--ink); background: var(--surface); font-family: inherit; font-variant-numeric: tabular-nums; text-align: right; -moz-appearance: textfield; appearance: none; }
.listini-table input::-webkit-outer-spin-button,
.listini-table input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.listini-table input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.listini-table input::placeholder { font-weight: 500; }
.listini-table .empty { padding: 20px; text-align: center; color: var(--ink-3); }
/* Mobile: prima colonna macchina con model wrap (no sticky — su iOS Safari crea glitch). */
@media (max-width: 640px) {
  .listini-table .col-machine .model { display: block; font-size: 11px; margin-top: 2px; }
}

/* Mobile (portrait + landscape, ≤ 760px o altezza piccola): modal full-width come PAGINA
   normale scrollabile. Niente flex-fix interno, niente header/actions sticky: tutto
   scorre con la viewport (richiesta esplicita Andrea per fix iOS Safari glitch). */
@media (max-width: 760px), (max-height: 540px) {
  .gmodal { padding: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; align-items: flex-start; }
  .gmodal .gm-card.gm-card-wide {
    max-width: 100vw;
    width: 100vw;
    height: auto;
    max-height: none;
    /* 100dvh = dynamic viewport height (Safari 15.4+, dic 2021): si adatta
       quando URL bar appare/sparisce, evitando il "jump" che mangia i bottoni. */
    min-height: 100vh;          /* fallback browser senza dvh */
    min-height: 100dvh;
    border-radius: 0;
    /* Safe-area inset bottom: i bottoni Annulla/Salva escono da sotto la barra
       iOS browser, niente doppio-tap. `max()` garantisce padding minimo anche
       quando env() restituisce 0 (no notch / non-iOS). */
    padding: 18px 16px max(14px, env(safe-area-inset-bottom));
    display: block;
    overflow: visible;
  }
  /* Disattiva il flex-layout interno: tutti i children tornano a flow naturale. */
  .gmodal .gm-card.gm-card-wide > form { display: block; flex: none; min-height: 0; }
  .gmodal .gm-card.gm-card-wide .listini-table-wrap { flex: none; overflow: visible; margin: 10px 0 4px; }
  .gmodal .gm-card.gm-card-wide .gm-sub { font-size: 13px; }
}

/* Toast notification — append in body via htmx hx-swap=beforeend.
   Auto-fade dopo 3s via CSS animation. Cleanup via JS htmx:afterSettle. */
.toast { position: fixed; top: 20px; right: 20px; padding: 12px 18px; background: var(--ok); color: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); font-size: 14px; font-weight: 600; z-index: 1000; animation: toast-in 200ms ease-out, toast-out 280ms ease-in 3s forwards; pointer-events: none; }
.toast-warn { background: var(--warn); }
.toast-danger { background: var(--danger); }
@keyframes toast-in { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toast-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-12px); opacity: 0; } }

/* Confirm variant — sostituisce window.confirm() del browser con stile Bloomest */
.gmodal.gm-confirm .gm-card { max-width: 440px; padding: 24px; }
.gmodal.gm-confirm h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
.gmodal.gm-confirm .gm-body { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin-bottom: 20px; }
.gmodal.gm-confirm .gm-actions { display: flex; gap: 10px; }
.gmodal.gm-confirm .gm-actions > button { flex: 1; padding: 11px 16px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; border: 1px solid var(--line); font-family: inherit; }
.gmodal.gm-confirm .gm-actions .gm-cancel { background: var(--surface); color: var(--ink-2); }
.gmodal.gm-confirm .gm-actions .gm-cancel:hover { background: var(--bg); border-color: var(--ink-3); }
.gmodal.gm-confirm .gm-actions .gm-ok { background: var(--brand); color: #fff; border-color: var(--brand); }
.gmodal.gm-confirm .gm-actions .gm-ok:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.gmodal.gm-confirm .gm-actions .gm-ok.danger { background: var(--danger); border-color: var(--danger); }
.gmodal.gm-confirm .gm-actions .gm-ok.danger:hover { background: #B91C1C; border-color: #B91C1C; }
.gmodal .gm-close:hover { background: var(--line); }
.gmodal .gm-close:active { transform: scale(0.9); }
.gmodal .gm-actions { display: flex; gap: 10px; margin-top: 22px; }
.gmodal .gm-actions button { flex: 1; }

.notes-panel { max-width: 380px; padding-top: 6px; }
.notes-panel h3 { font-size: 18px; font-weight: 800; margin: 0 0 8px; }
.notes-panel ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--ink-2); }
.notes-panel li { padding: 12px 14px; background: var(--surface); border-radius: 10px; box-shadow: var(--shadow-card); }
.notes-panel li strong { color: var(--ink); display: block; margin-bottom: 2px; }
.notes-panel li.warn { background: #FFF8DB; border: 1px solid #FCE4A0; }
.notes-panel li.warn strong { color: #8B6500; }

/* ====== Ricerca canonica (componente condiviso a TUTTE le viste) ======
   .search-bar = riga full-width posizionata SEMPRE subito sopra la tabella/
   lista: campo di ricerca (icona lente, input, azzera) + bottone "Filtri"
   opzionale a destra. Canone visivo: Movimenti. Variante .search-bar--bare =
   senza cornice, per quando la riga vive dentro un contenitore che ha già la
   sua (es. .clienti-toolbar, modali). */
.search-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; background: var(--surface); }
.search-bar .search-field { flex: 1; min-width: 180px; position: relative; }
.search-bar .search-field svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; }
.search-bar .search-field input { width: 100%; padding: 10px 12px 10px 36px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; line-height: 1.2; background: var(--bg); }
.search-bar .search-field input:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.search-bar .search-field input:not(:placeholder-shown) { padding-right: 36px; }
.search-bar .search-field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-bar .search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--ink-2); font-size: 24px; line-height: 1; cursor: pointer; }
.search-bar .search-clear:hover { color: var(--ink); }
.search-bar .search-field input:placeholder-shown ~ .search-clear { display: none; }
.search-bar--bare { padding: 0; border-bottom: 0; background: none; }

/* Bottone "Filtri" della search-bar: outline neutro da spento, accento +
   badge col numero quando ci sono filtri attivi. Stesso linguaggio di
   .filter-dd. Nei Movimenti apre il popover .mov-filters-pop coi chip. */
.search-bar .filters-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.search-bar .filters-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.search-bar .filters-btn:hover { border-color: var(--ink-3); background: var(--bg); }
.search-bar .filters-btn.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.search-bar .filters-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }

/* ====== Movimenti · multi-select dropdown + table chrome ====== */
.mov-filters-pop { gap: 6px; }
.mov-filters-list { display: flex; flex-direction: column; gap: 4px; }
.mov-filter-chip { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: none; }
.mov-filter-chip:hover { background: var(--brand-soft); color: var(--brand); }
.mov-filter-chip svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--ink-3); }
.mov-filter-chip:hover svg { color: var(--brand); }
.mov-filters-clear-all { display: block; margin-top: 4px; padding: 7px 10px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13px; font-weight: 600; text-decoration: none; text-align: center; }
.mov-filters-clear-all:hover { color: var(--danger, #c0392b); }

.filter-dd { position: relative; }
.filter-dd > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; user-select: none; transition: background .15s, border-color .15s; }
.filter-dd > summary::-webkit-details-marker { display: none; }
.filter-dd > summary::marker { display: none; }
.filter-dd > summary:hover { border-color: var(--ink-3); background: var(--bg); }
.filter-dd[open] > summary,
.filter-dd.has-filter > summary { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.filter-dd .filter-ico { width: 16px; height: 16px; flex-shrink: 0; }
.filter-dd .filter-state { display: inline-flex; align-items: center; min-width: 22px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.filter-dd[open] .filter-state,
.filter-dd.has-filter .filter-state { background: var(--brand); color: #fff; }
.filter-dd .chev { width: 18px; height: 18px; transition: transform .2s; stroke-width: 2.5; }
.filter-dd[open] .chev { transform: rotate(180deg); }

.filter-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(15,20,25,0.14); min-width: 280px; padding: 6px 4px 4px; }
.filter-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.filter-menu-head strong { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
.filter-menu-head .text-btn { background: none; border: none; color: var(--brand); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.filter-menu-head .text-btn:hover { text-decoration: underline; }
.filter-menu label { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 14px; color: var(--ink); cursor: pointer; border-radius: 6px; }
.filter-menu label:hover { background: var(--bg); }
.filter-menu input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.filter-menu-foot { padding: 8px 12px 6px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.filter-menu-foot svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ====== Movimenti · device badge + cells ====== */
.dev-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
.dev-badge .ltr { width: 22px; height: 22px; border-radius: 50%; background: #6B7280; color: #fff; font-weight: 700; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dev-badge .mod { color: var(--ink-2); font-weight: 600; }

.desc-cell { display: flex; flex-direction: column; gap: 4px; }
.desc-cell .price-tag { display: inline-flex; align-self: flex-start; background: #2F7BB9; color: #fff; font-size: 10px; padding: 2px 8px; border-radius: 3px; font-weight: 600; }

.fc-cell { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.fc-cell .fc-id { background: var(--brand); color: #fff; font-family: ui-monospace, monospace; font-size: 11px; padding: 2px 7px; border-radius: 3px; font-weight: 600; }
.fc-cell .fc-user { background: #2F7BB9; color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 3px; font-weight: 500; }

.val-cell { font-weight: 600; }
.val-cell.neg { color: var(--danger); }

/* ====== Movimenti · responsive table wrapper ====== */
.mov-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mov-table-wrap .dt-table { min-width: 760px; }
.mov-table-wrap tbody { transition: opacity .18s ease; }
.mov-table-wrap tbody.is-changing { opacity: 0.25; }
.mov-footer { padding: 12px 16px; font-size: 12px; color: var(--ink-3); border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mov-chips { gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mov-chips::-webkit-scrollbar { display: none; }
.mov-chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 500; text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.mov-chip:hover { background: var(--bg); color: var(--ink); }
.mov-chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.mov-pager { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.mov-pager-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); text-decoration: none; font-size: 16px; line-height: 1; }
.mov-pager-btn:hover:not(.is-disabled) { background: var(--bg); color: var(--ink); }
.mov-pager-btn.is-disabled { opacity: 0.35; cursor: not-allowed; }
.mov-pager-curr { padding: 0 6px; }
/* Salto pagina: input numerico inline ("pagina [N] di Y") */
.mov-pager-jump { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.mov-pager-input { width: 3.5em; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 12px; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.mov-pager-input::-webkit-outer-spin-button, .mov-pager-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mov-pager-input:focus { outline: none; border-color: var(--brand); }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
.sort-arrow { font-size: 10px; color: var(--ink-3); }
.cassa-subtotal td { border-top: 2px solid var(--line); font-weight: 700; }
.mov-per-form { margin: 0; }
.mov-per-form select { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-2); font-size: 12px; cursor: pointer; }
.mov-per-form select:focus { outline: none; border-color: var(--brand); }
.u-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Vendite/Cicli per dispositivo · estensione minimale di .dt-table (L705).
   Stessa estetica della tabella Movimenti: no zebra, no avatar pill, footer
   discreto coerente con tbody style. Scroll orizzontale su mobile via
   .mov-table-wrap overflow-x: auto (no stack mode, dati comparabili a colonne). */
.vpm-table .num, .vpm-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.vpm-table tbody tr:hover { cursor: default; }
.vpm-table tfoot td { padding: 12px 14px; font-size: 13px; font-weight: 700; border-top: 1px solid var(--line); white-space: nowrap; }
/* Importo-link dentro cella numerica (es. "di cui da fatturare" → tab Fatture).
   Chevron PRIMA del numero: la cifra resta a filo destro, decimali incolonnati
   con le righe senza link. */
.cell-link { display: inline-flex; align-items: center; gap: 3px; color: var(--brand); font-weight: 600; text-decoration: none; }
.cell-link .i { width: 13px; height: 13px; transition: transform 120ms ease; }
.cell-link:hover { color: var(--brand-dark); }
.cell-link:hover .i { transform: translateX(2px); }
.cell-link:active { opacity: 0.7; }
/* Corrispettivi · card-form (commercialista + esporta periodo): i controlli
   vivono dentro una dt-card, non sciolti sul fondo pagina. La hairline separa
   impostazioni e azione di invio dentro la stessa card (full-bleed). */
.corr-card { padding: 16px 18px; }
.corr-card .metric-rows--flat { margin: 0 0 14px; box-shadow: none; border: 1px solid var(--line); }
.corr-card-sep { height: 1px; background: var(--line); margin: 16px -18px; }
/* "Esporta un periodo": una sola riga Dal | Al | bottoni, allineata in basso
   (le label delle date stanno sopra). Campi a larghezza media: 220px = il
   min-width di design del .dt-trigger; sotto (mobile), il trigger si comprime
   (min-width:0 come .hh-dates) invece di sbordare. */
.corr-periodo-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.corr-periodo-fld { width: 220px; max-width: 100%; }
.corr-periodo-fld .dt-field { display: flex; min-width: 0; width: 100%; }
.corr-periodo-fld .dt-trigger { min-width: 0; width: 100%; }

/* Riepilogo · column-aligned metric values (amount + percent/count) */
/* text-align right: senza, un valore che wrappa su 2 righe (es. data+ora su
   mobile stretto) allinea la seconda riga a sinistra dentro il flex item. */
.metric-row .val { display: inline-flex; align-items: baseline; gap: 10px; justify-content: flex-end; text-align: right; }
.metric-row .val .col-amt { font-weight: 700; min-width: 96px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.metric-row .val .col-pct { color: var(--ink-3); font-weight: 500; font-size: 12px; min-width: 40px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.metric-row .val .col-cnt { color: var(--ink-3); font-weight: 600; font-size: 13px; min-width: 96px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.metric-row .val .col-sub { color: var(--ink-3); font-weight: 500; font-size: 12px; }

/* Period filter — utility card grouping chips + pill + range picker */
.period-card { margin: 12px 18px 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 8px rgba(15,20,25,0.04); position: relative; }
.period-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.period-card-ico { width: 16px; height: 16px; color: var(--brand); flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.period-card-label { font-size: 11px; color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; }
.period-card-hint { font-size: 11px; color: var(--ink-3); font-weight: 500; font-style: italic; margin-left: auto; }
.period-card-value { font-size: 13px; color: var(--brand); background: var(--brand-soft); font-weight: 800; font-family: ui-monospace, monospace; margin-left: 6px; padding: 4px 12px; border-radius: 999px; letter-spacing: 0.02em; line-height: 1.2; }
.period-card .chips { padding: 0; margin: 0; gap: 6px; }
.period-card .mov-range { margin: 12px 0 0; padding: 12px; background: var(--bg); border: 1px solid var(--line); box-shadow: none; border-radius: 10px; }
@media (max-width: 720px) {
  .period-card-hint { display: none; }
  .period-card .chips { flex-wrap: wrap; overflow-x: visible; row-gap: 8px; }
  .period-card .chip { flex: 0 0 auto; min-height: 36px; padding: 8px 14px; }
}

/* Period info as a pill connected to chips */
.period-info.mov-period { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; margin: 10px 0 0; background: var(--brand-soft); color: var(--brand); border-radius: 999px; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-weight: 600; transition: transform .2s, box-shadow .2s; }
.period-info.mov-period.flash { animation: periodFlash 0.5s ease; }
@keyframes periodFlash {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); box-shadow: 0 6px 18px rgba(140,0,20,0.18); }
  100% { transform: scale(1); }
}

/* Custom date+time range picker */
.mov-range { display: none; align-items: flex-end; gap: 10px; padding: 12px 18px; margin: 8px 18px 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 4px 12px rgba(15,20,25,0.06); flex-wrap: wrap; }
.mov-range.open { display: flex; }
.mov-range .range-arrow { color: var(--ink-3); font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; height: 42px; width: 24px; padding: 0; align-self: flex-end; }
.mov-range .range-apply { padding: 0 18px; background: var(--brand); color: #fff; border: none; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; height: 42px; align-self: flex-end; }
.mov-range .range-apply:hover { background: var(--brand-hover); }

/* dt-field — desktop custom widget + native fallback */
.dt-field { display: inline-flex; flex-direction: column; gap: 4px; position: relative; }
.dt-field > label { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
/* Sfondo bianco come tutti gli input (.field input): su --bg il campo si legge
   come disabilitato, specie dentro la .period-card che è già grigia. */
.dt-trigger { padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); min-width: 220px; display: inline-flex; align-items: center; gap: 0; font-family: inherit; overflow: hidden; transition: border-color 120ms ease, background 120ms ease; }
.dt-trigger:hover { border-color: var(--ink-3); background: var(--surface); }
.dt-field.open .dt-trigger,
.dt-trigger:focus-within { border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px var(--brand-soft); }
/* 16px, NON meno: sotto i 16px iOS Safari auto-zooma al focus e la gmodal
   resta pannata fuori viewport (visto live sul pane Schermo cassa, 2026-07-20). */
.dt-trigger .dt-display { flex: 1; min-width: 0; padding: 10px 4px 10px 12px; border: none; outline: none; background: transparent; font-size: 16px; font-weight: 600; color: var(--ink); font-family: inherit; letter-spacing: 0; }
.dt-trigger .dt-display::placeholder { font-weight: 500; }
.dt-trigger .dt-icon-btn { width: 36px; height: 38px; padding: 0; border: none; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--brand); border-left: 1px solid var(--line); transition: background 120ms ease; flex-shrink: 0; }
.dt-trigger .dt-icon-btn:hover { background: var(--brand-soft); }
.dt-trigger svg.cal-ico { width: 18px; height: 18px; color: var(--brand); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.dt-popover { position: absolute; top: calc(100% + 6px); left: 0; z-index: 100; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(15,20,25,0.16); padding: 14px; min-width: 296px; display: none; }
.dt-field.open .dt-popover { display: block; }

.cal-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 10px; }
.cal-head button { width: 30px; height: 30px; border: none; background: var(--bg); border-radius: 8px; cursor: pointer; color: var(--ink); font-size: 16px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.cal-head button:hover { background: var(--line); }
.cal-head .cal-month { font-size: 14px; font-weight: 700; color: var(--ink); text-transform: capitalize; display: flex; gap: 6px; align-items: center; }
.cal-sel-month, .cal-sel-year { font-size: 14px; font-weight: 700; color: var(--ink); border: none; background: transparent; cursor: pointer; font-family: inherit; padding: 2px 0; -webkit-appearance: none; appearance: none; text-transform: capitalize; }
.cal-sel-year { width: 60px; text-align: center; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 4px 0 10px; }
.cal-dow { font-size: 10px; color: var(--ink-3); text-align: center; font-weight: 700; text-transform: uppercase; padding: 4px 0 6px; }
.cal-day { height: 34px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; border-radius: 8px; color: var(--ink); user-select: none; transition: background .12s, color .12s; font-weight: 500; }
.cal-day:hover { background: var(--brand-soft); color: var(--brand); }
.cal-day.other { color: var(--ink-3); opacity: 0.4; }
.cal-day.today { font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--brand); }
.cal-day.selected { background: var(--brand); color: #fff; font-weight: 700; }
.cal-day.selected:hover { background: var(--brand-hover); color: #fff; }
.cal-day.disabled { color: var(--ink-3); opacity: 0.3; cursor: not-allowed; }
.cal-day.disabled:hover { background: transparent; color: var(--ink-3); }

.cal-time { display: flex; align-items: center; gap: 8px; padding: 10px 4px; border-top: 1px solid var(--line); margin-top: 4px; }
.cal-time .cal-time-lbl { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; flex: 1; display: inline-flex; align-items: center; gap: 6px; }
.cal-time .cal-time-lbl svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cal-time select { padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; background: var(--bg); cursor: pointer; font-family: inherit; color: var(--ink); font-weight: 600; min-width: 56px; }
.cal-time select:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.cal-time .sep { color: var(--ink-3); font-weight: 700; }

.cal-foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.cal-foot .text-btn { background: none; border: none; color: var(--brand); font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 10px; border-radius: 6px; }
.cal-foot .text-btn:hover { background: var(--brand-soft); }
.cal-foot .ok-btn { padding: 8px 18px; background: var(--brand); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; }
.cal-foot .ok-btn:hover { background: var(--brand-hover); }

/* dt-native is an invisible overlay on touch devices — keeps the styled trigger visible while letting iOS/Android open their wheel picker */
.dt-native { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; opacity: 0.001; border: 0; padding: 0; margin: 0; font-size: 16px; background: transparent; color: transparent; pointer-events: none; z-index: 1; }

@media (pointer: coarse) {
  .dt-field { width: 100%; }
  .dt-trigger { width: 100%; pointer-events: none; }
  .dt-popover { display: none !important; }
  .dt-native { pointer-events: auto; }
}

@media (max-width: 720px) {
  .search-bar { padding: 10px 12px; }
  .search-bar--bare { padding: 0; }
  .filter-dd > summary { padding: 8px 10px; font-size: 12px; }
  .filter-menu { right: auto; left: 0; }
  .mov-range { flex-direction: column; align-items: stretch; gap: 10px; }
  .mov-range .dt-field { width: 100%; }
  .mov-range .dt-trigger { width: 100%; }
  .mov-range .range-apply { width: 100%; }
  .mov-range .range-arrow { display: none; }
}