/*
 * Il foglio di stile dell'applicazione di gestione.
 *
 * Stava dentro app.html, che ha un tetto di 1000 righe: 127 se le prendeva il
 * blocco <style>, e la pagina era arrivata a 998. Non si alza il tetto, si
 * separa cio' che e' separabile, come e' gia' stato fatto per i moduli JS.
 * Servito dalla stessa lista bianca esplicita, non da una cartella.
 */
:root { --bg:#f5f6f8; --panel:#fff; --ink:#1c2430; --muted:#6b7686; --accent:#0f766e;
      --accent-ink:#fff; --line:#e3e7ee; --ok:#15803d; --err:#b91c1c; --warn:#b45309;
        --glow:rgba(15,118,110,.10); --shadow:rgba(16,24,40,.16); }
  @media (prefers-color-scheme: dark) {
:root { --bg:#12161d; --panel:#1a2029; --ink:#e8ecf2; --muted:#8b96a5; --accent:#14b8a6;
        --accent-ink:#06211e; --line:#2a3340; --ok:#4ade80; --err:#f87171; --warn:#fbbf24;
          --glow:rgba(20,184,166,.14); --shadow:rgba(0,0,0,.45); } }
  /* native controls (date pickers, checkboxes, scrollbars) follow the theme: in dark mode the
     calendar icon was black on a black field and the checkboxes white squares (2026-10-28) */
  :root { color-scheme:light dark; accent-color:var(--accent); }
  * { box-sizing:border-box; }
  body { margin:0; font:15px/1.5 -apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--ink); }
  /* the browser blue was unreadable on the dark panel: links follow the theme */
  a { color:var(--accent); }
  header { display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:12px 20px;
       background:var(--panel); border-bottom:1px solid var(--line); }
  header h1 { font-size:17px; margin:0 12px 0 0; }
/* Il marchio accanto al titolo. Incorporato e non <img>, cosi' `currentColor`
   lo tiene in tinta con l'accento anche quando il tema cambia. */
.brandline { display:flex; align-items:center; gap:8px; }
.brandline .brand { width:22px; height:22px; color:var(--accent); flex:0 0 auto; display:block; }
  header label { display:block; font-size:11px; color:var(--muted); }
  nav { display:flex; flex-wrap:wrap; gap:4px; padding:8px 20px 0; background:var(--panel);
    border-bottom:1px solid var(--line); overflow-x:auto; }
  nav button { border:0; background:none; color:var(--muted); font:inherit; font-weight:600;
           padding:8px 14px; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; }
  nav button.active { color:var(--accent); border-bottom-color:var(--accent); }
  main { max-width:1150px; margin:0 auto; padding:20px; }
  .tab { display:none; } .tab.active { display:block; }
  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; }
  section { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px; }
  section h2 { margin:0 0 10px; font-size:15px; }
  label { display:block; font-size:12px; color:var(--muted); margin:8px 0 2px; }
  input, select, textarea { width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:6px;
      background:var(--bg); color:var(--ink); font:inherit; }
  input:focus, select:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:-1px; }
/* Un contenitore con `tabindex="-1"` riceve il fuoco dal CODICE, per far
   ricominciare la lettura dello screen reader dal pannello appena aperto:
   nessuno ci e' arrivato col tabulatore, quindi il riquadro di fuoco non
   comunica niente e disegna un bordo attorno all'intera schermata. Chi ci
   arriva davvero da tastiera resta servito, perche' e' un elemento che il
   tabulatore non raggiunge. */
  [tabindex="-1"]:focus { outline:none; }
  button.act { margin-top:10px; padding:8px 14px; border:0; border-radius:6px; background:var(--accent);
           color:var(--accent-ink); font:inherit; font-weight:600; cursor:pointer; }
  button.mini { padding:7px 11px; margin:2px; font-size:12px; min-height:34px; border-radius:5px;
            border:1px solid var(--line); background:var(--bg); color:var(--ink); cursor:pointer; }
  .row { display:flex; gap:10px; flex-wrap:wrap; } .row > div { flex:1 1 180px; min-width:0; }
  .out { margin-top:12px; font-size:13px; overflow-x:auto; }
  .ok { color:var(--ok); } .err { color:var(--err); } .warn { color:var(--warn); }
  /* Le colonne degli importi. `class="n"` era gia' scritta in 22 punti fra
     cruscotto, registro della carta e righe di fattura, ma nessuna regola la
     definiva: le cifre restavano allineate a sinistra e non incolonnate, che e'
     proprio cio' che serve quando si confrontano. */
  td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .muted { color:var(--muted); }
  /* Module switches. The checkbox needs width:auto or the global
 `input{width:100%}` stretches it across the row and shoves the label — which
 is exactly what it did. */
  .mods { display:flex; flex-direction:column; gap:2px; margin-top:4px; }
  .mod { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:baseline;
     padding:7px 0; border-bottom:1px solid var(--line); margin:0; font-size:13px; color:var(--ink); }
  .mod:last-child { border-bottom:0; }
  .mod input { width:auto; margin:0; grid-row:1 / span 2; align-self:center; }
  .mod b { font-weight:600; }
  .mod .why { grid-column:2; font-size:12px; color:var(--muted); }
  /* the signed-in person's own second factor, next to their name */
  .hint { font-size:12px; color:var(--muted); margin:0 0 4px; }
  .chip { font-size:12px; color:var(--muted); }
  .chip button { font:inherit; padding:2px 8px; }
  /* Master–detail. Three panels stacked and all visible meant nothing was ever
 in focus: you searched at the top, the result appeared at the bottom, and a
 create form you were not using sat between them. One view at a time, with
 an explicit way back. */
  [data-view] { display:none; }
  [data-view].on { display:block; }
  [data-view].on.grid { display:grid; }
  .viewbar { display:flex; align-items:center; gap:10px; margin:0 0 12px; }
  .viewbar h3 { margin:0; font-size:15px; }
  .viewbar .spacer { margin-left:auto; }
  /* first level carries the weight, second level is the choice within it */
  #nav-groups { padding-bottom:0; border-bottom:0; }
  #nav-groups button { font-size:15px; }
  #nav-groups button.active { color:var(--accent); border-bottom-color:var(--accent); }
  #nav button[data-tab] { font-size:13px; font-weight:500; }
  .slip { border:1px dashed var(--muted); border-radius:8px; padding:12px; margin-top:10px; text-align:center; }
  .slip .serial { font:700 20px/1.3 ui-monospace,Menlo,monospace; letter-spacing:1px; }
  .slip .pin { font:600 16px ui-monospace,Menlo,monospace; color:var(--warn); }
  .slip .bal { font-size:14px; color:var(--muted); }
  table { width:100%; border-collapse:collapse; margin-top:10px; font-size:13px; }
  th, td { text-align:left; padding:5px 8px; border-bottom:1px solid var(--line); }
  th { color:var(--muted); font-weight:600; }
  .mono { font-family:ui-monospace,Menlo,monospace; }
  /* a box titled like its tab says it once, on every screen, not only on a phone (2026-10-28) */
  section > h2.doppio { display:none; }
  /* a date and its time on one line, and a row's buttons one under the other instead of
     wrapping at random (the campaigns table, 2026-10-28) */
  td.quando { white-space:nowrap; font-variant-numeric:tabular-nums; }
  td .azioni { display:flex; flex-direction:column; align-items:stretch; gap:4px; }
  td .azioni .mini { margin:0; white-space:nowrap; }
  /* `.stats`/`.stat` sono stati tolti il 2026-09-15: definiti e mai usati da
     nessun modulo. Tre modi di dire «riquadro col numero grosso» erano esattamente
     come nasce il quarto. Quello vivo e' `.kpi .c`, piu' in basso. */
  /* a status pill is one word or two, never two lines ("in partenza" broke inside its pill) */
  .badge { display:inline-block; white-space:nowrap; font-size:11px; padding:1px 8px; border-radius:10px; background:var(--bg);
       border:1px solid var(--line); }
  /*
   * I colori degli stati hanno una regola sola, in tutto il gestionale:
   *   verde  = valore che entra, o cosa andata a buon fine
   *   rosso  = valore che esce, o cosa finita male o chiusa
   *   ambra  = in attesa, o da guardare
   *   neutro = normale amministrazione (un incasso e' il motivo per cui la carta
   *            esiste, non un allarme)
   * Prima i colori erano assegnati caso per caso, e nel dettaglio di una carta
   * emissione e rimborso erano dello stesso grigio.
   */
  .state-active,.state-working,.st-paid,.st-delivered,.st-issue,.st-reload,.st-activate,.st-captured,.st-earn
    { color:var(--ok); background:color-mix(in srgb, var(--ok) 10%, var(--panel)); border-color:color-mix(in srgb, var(--ok) 35%, var(--line)); }
  .state-expired,.state-disabled,.state-blocked,.state-ended,.st-cancelled,.st-failed,.st-refunded,.st-refund,
  .st-void,.st-expire,.st-cashout,.st-writeoff,.st-disabled,.st-burn
    { color:var(--err); background:color-mix(in srgb, var(--err) 10%, var(--panel)); border-color:color-mix(in srgb, var(--err) 35%, var(--line)); }
  .state-suspended,.state-inactive,.state-onbreak,.st-draft,.st-sent,.st-pending,.st-authorized,.st-adjust,.st-warn,.st-open
    { color:var(--warn); background:color-mix(in srgb, var(--warn) 10%, var(--panel)); border-color:color-mix(in srgb, var(--warn) 35%, var(--line)); }
  /* un'azione che toglie o cancella si riconosce prima di premerla */
  button.danger, .mini.danger { color:var(--err); border-color:color-mix(in srgb, var(--err) 45%, var(--line)); }
  button.danger:hover, .mini.danger:hover { background:color-mix(in srgb, var(--err) 10%, var(--panel)); }
  tr.click { cursor:pointer; } tr.click:hover td { background:var(--bg); }
  tr.click:focus { outline:2px solid var(--accent); outline-offset:-2px; }
  .panel { background:var(--panel); border:1px solid var(--line); border-radius:10px;
margin-bottom:16px; overflow:hidden; }
  /* `overflow:hidden` sul pannello serve agli angoli arrotondati, ma tagliava
     le colonne delle tabelle del cruscotto senza dare modo di raggiungerle: su
     schermo stretto sparivano e basta. Lo scorrimento va dato al CONTENUTO. */
  .panel > .body { overflow-x:auto; }
  .panel > header { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--bg);
border-bottom:1px solid var(--line); }
  .panel > header h3 { margin:0; font-size:14px; } .panel > header .spacer { margin-left:auto; }
  .panel > .body { padding:4px 14px 14px; }
  .panel .when { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px;
margin:14px 0 0; font-weight:700; }
  .kpi { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-top:12px; }
  .kpi .c { background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
  .kpi .c .v { font-size:22px; font-weight:800; line-height:1.2; }
  .kpi .c .k { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
  .kpi .c .s { font-size:12px; color:var(--muted); margin-top:4px; }
  .bar { display:flex; height:10px; border-radius:6px; overflow:hidden; background:var(--bg); margin-top:8px; }
  .bar i { display:block; }
  .legend { display:flex; flex-wrap:wrap; gap:10px; font-size:11px; color:var(--muted); margin-top:6px; }
  .legend b { color:var(--ink); font-weight:600; }
  .dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; }
  footer { text-align:center; color:var(--muted); font-size:12px; padding:10px 0 26px; }
  .step { border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:0 8px 8px 0;
padding:12px 14px; margin:14px 0; background:var(--bg); }
  .step-h { font-weight:700; font-size:13px; margin-bottom:2px; }
  .step .act { margin-top:10px; }
  .done { border:1px solid var(--ok); border-radius:8px; padding:12px 14px; margin-top:12px;
background:color-mix(in srgb, var(--ok) 7%, var(--panel)); }
  .done-h { font-weight:700; font-size:14px; }
  .done-act { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
  .done-act button { margin:0; }
  .dlg-back { position:fixed; inset:0; background:rgba(15,20,28,.55); display:flex;
align-items:center; justify-content:center; z-index:80; padding:20px; }
  .dlg { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px;
max-width:440px; width:100%; box-shadow:0 12px 40px rgba(0,0,0,.28); }
  .dlg h3 { margin:0 0 8px; font-size:15px; }
  .dlg h3:empty { display:none; }
  .dlg .dlg-msg { margin:0 0 12px; font-size:13.5px; color:var(--ink); white-space:normal; }
  .dlg input, .dlg textarea { margin-bottom:4px; }
  .dlg-act { display:flex; gap:8px; justify-content:flex-end; align-items:center; margin-top:14px; }
  .dlg-act button { margin:0; }
  .dlg-danger { background:var(--err); }
  /* If it acts on a click, it says so under the mouse. Each page used to list
 the selectors that happened to be clickable — button.act here, nav button
 there — so anything outside those patterns looked inert. */
  button, summary, [role="button"], .click, .mod, .amt,
  input[type=checkbox], input[type=radio] { cursor:pointer; }
  label:has(> input[type=checkbox]) { cursor:pointer; }
  button:disabled { cursor:not-allowed; }

/* --- Accesso ---------------------------------------------------------------
   E' la prima cosa che si vede del prodotto, ed era un rettangolo grigio con un
   titolo dentro. Resta sobrio di proposito: e' la console di chi lavora, non
   una pagina di vendita. Il marchio e' incorporato nella pagina invece che
   caricato come immagine, perche' solo cosi' `currentColor` lo fa cambiare
   colore col tema; il file servito a parte serve da icona nella scheda.
   `--glow` e `--shadow` sono dichiarati in ENTRAMBI i temi: un colore definito
   solo dentro la media query non esiste nell'altro. */
.login-bg { position:fixed; inset:0; display:none; align-items:center; justify-content:center;
            z-index:50; background:var(--bg); padding:24px; overflow:auto; }
.login-bg::before { content:""; position:absolute; inset:0; pointer-events:none;
            background:radial-gradient(56rem 34rem at 50% -8%, var(--glow), transparent 68%); }
.login-card { position:relative; background:var(--panel); border:1px solid var(--line);
            border-radius:16px; padding:30px 30px 24px; width:min(392px,100%);
            box-shadow:0 1px 2px var(--shadow), 0 18px 40px -22px var(--shadow); }
.login-mark { display:flex; align-items:center; gap:11px; margin:0 0 20px; }
.login-mark svg { width:32px; height:32px; color:var(--accent); flex:0 0 auto; display:block; }
.login-mark b { font-size:18px; font-weight:650; letter-spacing:-.015em; }
.login-card h2 { margin:0 0 3px; font-size:16px; }
.login-card > p.sub { color:var(--muted); font-size:13px; margin:0 0 16px; }
.login-card label { margin-top:12px; }
.login-card button.act { margin-top:18px; width:100%; padding:10px 14px; }
/* wrap piu' margin-left:auto sulla versione: da due voci diventano tre, e in una
   scheda stretta la riga della versione scende sotto invece di schiacciare i
   due collegamenti, che sono la parte con cui si interagisce */
.login-foot { margin:18px 0 0; padding-top:14px; border-top:1px solid var(--line);
            display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 10px;
            font-size:12px; color:var(--muted); }
.login-foot > span { margin-left:auto; }
.login-foot a { color:var(--accent); text-decoration:none; }
.login-foot a:hover { text-decoration:underline; }

/* --- Scelta colore -----------------------------------------------------------
   Pastiglia e casella affiancate. La CASELLA resta la fonte della verita': un
   <input type="color"> non sa stare vuoto, parte sempre da #000000, e qui il
   vuoto significa "usa il marchio generale". Messo da solo trasformerebbe ogni
   campo non compilato in nero al primo salvataggio, senza che nessuno lo chieda.
   La pastiglia scrive nella casella; la × la svuota e riporta al generale. */
.colorfield { display:flex; align-items:center; gap:8px; }
.colorfield input[type="color"] { width:38px; height:34px; flex:0 0 auto; padding:2px;
            border:1px solid var(--line); border-radius:6px; background:var(--bg); cursor:pointer; }
.colorfield input[type="text"] { flex:1; min-width:0; font-family:ui-monospace,Menlo,Consolas,monospace; }
.colorfield .clear { flex:0 0 auto; padding:6px 9px; min-height:34px; }
.colorhint { font-size:12px; margin:4px 0 0; }
/* un colore che non e' un colore si vede prima di premere Salva */
/* an empty field: the swatch shows, faded, the colour that will be used */
.colorfield input[type="color"].vuoto { opacity:.45; }
.colorfield input.badcolor { border-color:var(--err); outline:1px solid var(--err); outline-offset:-2px; }

/* --- I contenitori che i moduli riempiono di tabelle --------------------------
   `.out` aveva gia' `overflow-x:auto`, questi no: erano `div` nudi, e una
   tabella a sette colonne faceva scorrere l'INTERA pagina in orizzontale invece
   di scorrere dentro il proprio riquadro. Il registro delle timbrature e il
   riepilogo ore sono i due casi peggiori, e sono quelli che il commercialista
   guarda. Trovato il 2026-09-14. */
#tc-register, #tch-table, #tc-staff, #tc-floor, #tc-sched,
#rewards-list, #stamps-list, #wh-list,
#cust-detail, #card-detail, #inv-detail { overflow-x:auto; }

/* --- Schermi stretti: cassa, tablet, telefono --------------------------------
   Fino al 2026-09-14 non esisteva NESSUNA `@media (max-width)`: l'unica media
   query del foglio era `prefers-color-scheme`. `main` era largo fisso con 20px
   di margine e le righe a piu' campi si schiacciavano invece di andare a capo.
   E' l'interfaccia che si usa in cassa, di fretta, spesso su un tablet.

   Le aree toccabili crescono solo qui: su un desktop col mouse la densita'
   attuale e' giusta, ed e' al dito che 29px di riga non bastano. */
@media (max-width: 820px) {
  main { padding:12px; }
  nav { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .grid { grid-template-columns:1fr; gap:12px; }
  section { padding:12px; }
  /* un campo per riga: due campi da 90px non si compilano col dito */
  .row > div { flex:1 1 100%; }
  /* nessuna tabella deve far scorrere la PAGINA in orizzontale */
  table { display:block; overflow-x:auto; max-width:100%; }
  th, td { padding:10px 8px; }
  button.mini { min-height:44px; padding:10px 14px; }
  button.act { padding:11px 16px; }
  tr.click td { padding-top:12px; padding-bottom:12px; }
}

/* --- Marketing: la scheda Ospiti e la Panoramica ------------------------------
   Scritto il 2026-09-15 perche' non c'era: i moduli emettevano `class="cards"` e
   `class="linky"`, che nel foglio non esistevano, quindi i cinque riquadri erano
   cinque righe di testo nudo e le intestazioni ordinabili bottoni di sistema
   dentro una cella. Qui sotto ci sono le classi che mancavano, nello stesso
   linguaggio del resto: fondo `--bg` dentro il pannello, bordo `--line`,
   raggio 6-10, maiuscoletto spaziato per le etichette. */

/* Intestazione di colonna ordinabile. Deve sembrare un'intestazione, non un
   bottone: prende il colore e il peso di `th` e si accende al passaggio. */
th .sortby { border:0; background:none; font:inherit; font-weight:600; color:inherit;
  padding:0; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
th .sortby:hover { color:var(--accent); }
th[aria-sort="ascending"], th[aria-sort="descending"] { color:var(--accent); }
th .sortby:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }

/* Il grafico «quante persone visitano N locali». Barre orizzontali, nessuna
   libreria. La pista ha un bordo perche' dentro un pannello `--panel` un fondo
   `--bg` da solo non si distingue, e la barra inerte usa `--muted` (4.4:1) e non
   `--line` (1.24:1), che era sotto il minimo per un oggetto grafico. */
.hbars { display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.hbar { display:grid; grid-template-columns:7em 1fr 4em; align-items:center; gap:10px; }
.hbar .lab { font-size:11px; color:var(--muted); text-align:right;
  text-transform:uppercase; letter-spacing:.4px; }
.hbar .track { height:16px; background:var(--bg); border:1px solid var(--line);
  border-radius:8px; overflow:hidden; }
.hbar .fill { display:block; height:100%; border-radius:8px 0 0 8px;
  background:var(--accent); transition:width .25s ease; }
.hbar.inert .fill { background:var(--muted); }
.hbar .num { font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion: reduce) { .hbar .fill { transition:none; } }

/* La barra degli strumenti sopra la tabella: esportazione, selezione, conteggio. */
.toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:12px 0 0;
  padding-top:12px; border-top:1px solid var(--line); }
.toolbar .count { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }

/* Paginazione. Centrata, con lo stato leggibile anche quando i bottoni sono spenti. */
.pager { display:flex; gap:10px; align-items:center; justify-content:center;
  margin-top:12px; font-size:12px; color:var(--muted); }
.pager button[disabled] { opacity:.4; cursor:default; }
.pager .where { font-variant-numeric:tabular-nums; }

/* La colonna delle caselle non deve comportarsi come il resto della riga:
   e' l'unica cella in cui il clic NON apre il dettaglio. */
td .sel, th #sel-all { width:auto; margin:0; cursor:pointer; }

/* --- Scegliere dei locali fra molti ------------------------------------------
   Era una tendina con dentro tutti i locali senza gruppo: in produzione sono
   centosessantaquattro, e costruire un gruppo da otto voleva dire otto giri
   la' dentro. Si cerca e si spunta, e la lista scorre da sola invece di
   allungare la pagina. */
.picker { display:inline-block; }
.picklist { max-height:200px; overflow-y:auto; border:1px solid var(--line); border-radius:8px;
            margin-top:6px; padding:4px; min-width:280px; }
.picklist label { display:flex; gap:8px; align-items:center; padding:3px 6px; border-radius:6px;
                  font-size:13px; cursor:pointer; }
.picklist label:hover { background:var(--bg); }
.picklist input[type=checkbox] { width:auto; }

/* le durate comuni sotto la casella dei giorni */
.chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.chip.sel { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--panel)); }
/* un riquadro che chiede attenzione lo dice col bordo, con la stessa regola
   dei colori degli stati: ambra da guardare, rosso gia' perso */
.kpi .c.warn { border-color:color-mix(in srgb, var(--warn) 55%, var(--line)); }
.kpi .c.warn .v { color:var(--warn); }
.kpi .c.bad { border-color:color-mix(in srgb, var(--err) 45%, var(--line)); }
.kpi .c.bad .v { color:var(--err); }
/* la striscia «da guardare oggi» in cima al cruscotto */
.today-list { list-style:none; margin:6px 0 0; padding:0; display:grid; gap:6px; }
.today-list li { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 12px;
  border:1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); border-radius:8px; background:var(--bg); }
/* il filtro del cruscotto: due date, «tutti i miei locali» e il bottone sulla
   stessa riga, senza che la spunta finisca schiacciata sotto il bottone */
.dash-filter { max-width:760px; align-items:flex-end; }
.dash-filter > div { flex:1 1 150px; }
.dash-filter > .check { flex:0 0 auto; display:flex; gap:6px; align-items:center; white-space:nowrap;
  margin:0; min-height:36px; font-size:13px; color:var(--ink); }
.dash-filter > .check input { width:auto; margin:0; }
.dash-filter > button.act { flex:0 0 auto; white-space:nowrap; margin-top:0; }
/* la panoramica in cima a «Carte»: un riquadro suo, due righe da tre
   (cio' che e' vivo, poi le scadenze); in sei colonne ogni etichetta andava a capo */
#cards-overview h2 { margin:0; }
#cards-overview .kpi { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
@media (max-width:640px) { #cards-overview .kpi { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* sei caselle di «Movimenti nel periodo» stanno su una riga, non cinque piu' una */
.kpi { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
/* un bottone accanto a un campo: su una riga sola, e in basso, allineato al
   campo e non alla sua etichetta («Salva il limite» andava a capo tre volte) */
.row > div[style*="flex:0"] { display:flex; align-items:flex-end; }
.row > div[style*="flex:0"] > button { white-space:nowrap; }
.state-closed { color:var(--err); background:color-mix(in srgb, var(--err) 10%, var(--panel)); border-color:color-mix(in srgb, var(--err) 35%, var(--line)); }

/* l'editor dei modelli Mailjet: l'HTML a sinistra, come arriva a destra */
.cp-edit { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cp-edit[hidden] { display:none; }
/* the guided e-mail editor: blocks on the left, the e-mail on the right (2026-10-08) */
.cp-guided { display:grid; grid-template-columns:minmax(280px,1fr) minmax(320px,1.1fr); gap:14px; align-items:start; }
.cp-guided[hidden] { display:none; }
.cp-modes button.act, .cp-devices button.act { margin-top:0; }
.cp-bcard { border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:8px; background:var(--panel); }
.cp-bcard[data-btype="footer"] { border-style:dashed; }
.cp-bhead { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.cp-bctl { display:flex; gap:4px; }
.cp-bcard textarea { min-height:90px; }
.cp-gright { position:sticky; top:8px; }
.cp-devices { display:flex; gap:4px; margin-bottom:6px; }
.cp-g-view { width:100%; min-height:560px; border:1px solid var(--line); border-radius:8px; background:#f4f5f7; }
.cp-g-view.phone { width:390px; max-width:100%; margin:0 auto; display:block; }
@media (max-width:860px) { .cp-guided { grid-template-columns:1fr; } .cp-gright { position:static; } }
.cp-wys { width:100%; min-height:420px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.cp-edit textarea { min-height:360px; font-family:ui-monospace,Menlo,monospace; font-size:12px; }
.cp-edit iframe { width:100%; min-height:360px; border:1px solid var(--line); border-radius:6px; background:#fff; }
@media (max-width:760px) { .cp-edit { grid-template-columns:1fr; } }

/* importi in colonna: allineati a destra, cifre della stessa larghezza (colonna "Da pagare", 2026-09-29) */
th.num, td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Negozio: ogni buono e' una scheda (2026-10-01). "Cosa vendi" prende tutta la larghezza. */
#f-shop > .grid > div:first-child { grid-column: 1 / -1; }
.voce-lingue { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:4px 0 12px; }
.voce-lingue .mini.on { border-color:var(--accent); color:var(--accent); }
.voce-lingue small { color:var(--muted); font-weight:400; }
.voce-card { border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:0 0 12px; background:color-mix(in srgb, var(--panel) 70%, var(--bg)); }
.voce-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.voce-ordine ol { margin:0 0 14px; padding:0; list-style:none; counter-reset:vo; border:1px solid var(--line); border-radius:8px; max-width:640px; }
.voce-ordine li { display:flex; align-items:center; gap:6px; padding:5px 8px; counter-increment:vo; }
.voce-ordine li + li { border-top:1px solid var(--line); }
.voce-ordine li::before { content:counter(vo) "."; color:var(--muted); min-width:1.6em; font-variant-numeric:tabular-nums; }
.voce-ordine button:disabled { opacity:.25; cursor:default; }
.voce-ordine li span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.voce-head .voce-sommario { color:var(--muted); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.voce-riga { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.voce-riga > div { min-width:0; }
.voce-importo { flex:0 0 10em; }
.voce-importo input { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.voce-nome { flex:1 1 260px; }
.voce-card textarea { width:100%; min-height:6.5em; resize:vertical; }
.voce-foto > div { flex:1 1 260px; }
.voce-foto img, .voce-foto .voce-nofoto { width:72px; height:72px; border-radius:8px; object-fit:cover; border:1px solid var(--line); flex:0 0 auto; }
.voce-foto .voce-nofoto { background:repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--line) 60%, transparent) 6px 7px); }
@media (max-width:640px) { .voce-importo { flex:1 1 100%; } .voce-foto img, .voce-foto .voce-nofoto { display:none; } }
/* opzioni della carta (migration 089): chiave e valore affiancati */
.opt-rows { display:flex; flex-direction:column; gap:6px; margin:6px 0; }
.opt-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:6px; align-items:center; max-width:560px; }
.opt-row input { margin:0; }
.opt-list { margin:6px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px; }
.opt-list li { font-size:12px; border:1px solid var(--line); border-radius:999px; padding:2px 10px; }
/* titoli di colonna che ordinano (2026-10-03) */
table th:not(:empty) { cursor:pointer; user-select:none; }
table th[data-sort="asc"]::after { content:" ▲"; font-size:.75em; color:var(--accent); }
table th[data-sort="desc"]::after { content:" ▼"; font-size:.75em; color:var(--accent); }
/* lettore QR della ricerca carte (2026-10-05) */
.qr-over { position:fixed; inset:0; background:rgba(0,0,0,.82); z-index:90; display:flex; align-items:center; justify-content:center; padding:16px; }
.qr-box { background:var(--panel); color:var(--ink); border-radius:14px; padding:14px; width:min(480px,100%); text-align:center; }
.qr-box video { width:100%; border-radius:10px; background:#000; aspect-ratio:4/3; object-fit:cover; }
.qr-box p { margin:10px 0; }
/* movimenti delle carte (2026-10-05) */
.mov-tot { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; font-variant-numeric:tabular-nums; }
/* Ricerche (app-search.ts, 2026-10-09): la ✕ dentro la casella, l'elenco che
   si apre sotto mentre si scrive, i risultati vecchi un po' spenti mentre
   arrivano i nuovi invece di sparire a ogni tasto. */
.cerca-campo { position:relative; display:block; }
.cerca-campo > input { padding-right:34px; }
.cerca-x { position:absolute; right:3px; top:50%; transform:translateY(-50%); width:28px; height:28px;
  border:0; border-radius:50%; background:none; color:var(--err); font-size:14px; font-weight:700; cursor:pointer; line-height:1; }
.cerca-x:hover, .cerca-x:focus-visible { background:color-mix(in srgb, var(--err) 14%, transparent); }
/* La scelta da una lista lunga: un bottone col valore e ▾, e sotto un pannello
   con la ricerca in cima, i recenti e tutti gli altri. */
.combo { position:relative; display:inline-block; }
.combo + select[hidden] { display:none; }
.combo-btn { display:inline-flex; align-items:center; gap:10px; min-width:220px; max-width:320px; min-height:36px;
  padding:7px 10px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--ink);
  font:inherit; cursor:pointer; text-align:left; }
.combo-btn:hover { border-color:var(--accent); }
.combo-btn:focus-visible, .combo.aperto .combo-btn { outline:2px solid var(--accent); outline-offset:-1px; }
.combo-val { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.combo-ch { color:var(--muted); font-size:12px; }
.combo-pop { position:absolute; z-index:50; left:0; top:calc(100% + 4px); width:340px; max-width:calc(100vw - 32px);
  padding:8px; background:var(--panel); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 10px 28px var(--shadow); }
.combo-list { margin:6px 0 0; padding:0; list-style:none; max-height:340px; overflow-y:auto; }
.combo-list li { padding:7px 9px; border-radius:5px; font-size:14px; cursor:pointer; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.combo-list li.on { background:var(--glow); }
.combo-list li[data-scelto] { font-weight:600; }
.combo-list li[data-scelto]::after { content:" ✓"; color:var(--accent); }
.combo-list li.combo-h { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  cursor:default; padding:8px 9px 3px; }
.combo-list li.vuoto { color:var(--muted); cursor:default; }
.combo-list b, td b > b { color:var(--accent); }
.out.in-attesa { opacity:.55; transition:opacity .15s; }
@media (prefers-reduced-motion: reduce) { .out.in-attesa { transition:none; } }
.filtra-righe { display:flex; align-items:center; gap:10px; max-width:420px; margin:10px 0 6px; }
.filtra-righe .cerca-campo { flex:1; }
.filtra-righe .hint { white-space:nowrap; margin:0; }
/* Commissioni Pindot (scheda propria, 2026-10-09): tre riquadri in cima che
   sono anche filtri, il mese con le frecce, l'avviso se manca l'emittente. */
.fee-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-top:12px; }
.fee-tile { display:flex; flex-direction:column; gap:4px; padding:12px 14px; text-align:left; cursor:pointer;
  border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font:inherit; }
.fee-tile:hover, .fee-tile.on { border-color:var(--accent); }
.fee-tile.on { box-shadow:0 0 0 1px var(--accent) inset; }
.fee-tile-l { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.fee-tile-v { font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.fee-tile.warn .fee-tile-v { color:var(--warn); }
.fee-mese { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:8px 0 12px; }
.fee-mese input[type=month] { width:auto; }
.fee-mese .act { margin:0 0 0 auto; }
.fee-warn { margin:10px 0 0; padding:10px 12px; border-radius:8px; color:var(--warn);
  border:1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); background:color-mix(in srgb, var(--warn) 8%, var(--panel)); }
details > summary { cursor:pointer; font-weight:600; }
details[open] > summary { margin-bottom:8px; }
.filtra-righe[hidden] { display:none; }
/* Il cartello nel posto vecchio dopo uno spostamento (2026-10-13): una riga
   con il bottone che porta dove la cosa sta adesso. */
.cartello { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px; padding:9px 12px;
  border-radius:8px; border:1px dashed color-mix(in srgb, var(--accent) 55%, var(--line));
  background:color-mix(in srgb, var(--accent) 7%, var(--panel)); font-size:13px; }

/* --- Il pannello sul telefono (2026-10-14) ------------------------------------
   «Molto inutilizzabile»: l'intestazione prendeva un terzo dello schermo, il
   menu andava a capo su tre righe e le tabelle scorrevano di lato tagliando
   meta' riga e i bottoni. Sotto i 700px: intestazione in una riga (nome, 2FA ed
   esci dietro 👤), menu su una riga che scorre, e ogni riga di tabella una
   scheda con il nome della colonna accanto al valore. */
#btn-me { display:none; }
@media (max-width: 700px) {
  header { padding:8px 12px; gap:8px; flex-wrap:wrap; }
  header h1 { font-size:15px; margin:0; }
  header label { display:none; }
  header input, header select { font-size:14px; }
  header:has(#who-box:not([hidden])) #siteid-box { display:none; }
  #btn-me { display:inline-flex; align-items:center; justify-content:center; min-width:40px; }
  header:has(#who-box[hidden]) #btn-me { display:none; }
  header #who-box { display:none; width:100%; flex-wrap:wrap; gap:8px; align-items:center; }
  header.me-aperto #who-box:not([hidden]) { display:flex; }
  #who { white-space:normal; }
  #site-switch-box { order:5; width:100%; }
  #site-switch-box .combo, #site-switch-box .combo-btn { width:100%; max-width:none; }
  nav, #nav-groups { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:6px 8px 0; gap:0; }
  nav::-webkit-scrollbar { display:none; }
  nav button { padding:8px 11px; font-size:14px; flex:0 0 auto; }
  main { padding:10px; }
  section { padding:12px 10px; border-radius:8px; }
  .viewbar { flex-wrap:wrap; gap:8px; }

  table.a-schede { display:block; overflow:visible; max-width:none; border:0; }
  table.a-schede > tbody, table.a-schede > thead { display:block; }
  table.a-schede tr.testa { display:none; }
  table.a-schede tr { display:block; margin:0 0 10px; padding:8px 12px; border:1px solid var(--line);
    border-radius:8px; background:var(--bg); }
  table.a-schede tr[hidden] { display:none; }
  table.a-schede td { display:flex; align-items:baseline; justify-content:space-between; gap:12px;
    padding:4px 0; border:0; text-align:right; min-width:0; overflow-wrap:anywhere; }
  table.a-schede td::before { content:attr(data-label); flex:0 0 38%; text-align:left; color:var(--muted); font-family:-apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:0;
    font-size:12px; font-weight:400; }
  table.a-schede td[data-label=""]::before { content:none; }
  /* the actions column: buttons in a row that wraps, left-aligned */
  table.a-schede td[data-label=""] { justify-content:flex-start; flex-wrap:wrap; gap:6px; text-align:left; }
  table.a-schede td:empty, table.a-schede td.vuota { display:none; }
  /* a box you tick with a finger */
  input[type=checkbox], input[type=radio] { width:20px; height:20px; }
  /* a cell with more than one thing (a state and its note) wraps under its label, badges whole */
  table.a-schede td { flex-wrap:wrap; justify-content:flex-end; }
  table.a-schede td::before { margin-right:auto; }
  table.a-schede td > * { max-width:100%; }
  table.a-schede td .badge { white-space:nowrap; flex:none; }
  /* filters two to a row, the search box alone on its own */
  #f-guests .row > div, #f-list .row > div, #f-inv-list .row > div, #f-shop-orders .row > div,
  #f-dash .row > div, #f-mov .row > div { flex:1 1 calc(50% - 10px); }
  #f-guests .row > div:has(input[data-viva]), #f-list .row > div:has(input[data-viva]),
  #f-inv-list .row > div:has(input[data-viva]), #f-shop-orders .row > div:has(input[data-viva]) { flex:1 1 100% !important; }
  table.a-schede tr.click { cursor:pointer; }
}

/* --- Il menu sul telefono e le rifiniture (2026-10-15) --------------------------
   I due menu che scorrevano di lato diventano ☰ e un pannello da sinistra con
   tutte le sezioni. Caselle a 16px: sotto, Safari su iPhone ingrandisce la
   pagina al tocco e la lascia scorrere a destra e sinistra. */
#btn-menu, #drawer, #drawer-back { display:none; }
/* The ☰ menu wherever the sections do not fit on one row: phones, and tablets
   (on an iPad the sections wrapped onto a second row, 2026-10-16). */
@media (max-width: 1100px) {
  #nav-groups, #nav { display:none !important; }
  #btn-menu { display:inline-flex; align-items:center; justify-content:center; min-width:42px; min-height:40px;
    padding:6px 10px; margin:0; font-size:18px; line-height:1; }
  #drawer-back { display:block; position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.45);
    opacity:0; pointer-events:none; transition:opacity .2s; }
  #drawer-back.aperto { opacity:1; pointer-events:auto; }
  /* as tall as what is visible (100dvh), not as the whole screen: on an iPhone the
     last entries sat under Safari's bottom bar (2026-10-16) */
  #drawer { display:block; position:fixed; top:0; left:0; z-index:100; width:min(300px, 86vw);
    height:100vh; height:100dvh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    background:var(--panel); border-right:1px solid var(--line); box-shadow:0 0 28px var(--shadow);
    transform:translateX(-102%); transition:transform .2s ease, visibility .2s;
    /* closed, its shadow no longer bleeds in as a grey strip down the screen's left edge */
    visibility:hidden;
    padding:0 0 calc(32px + env(safe-area-inset-bottom)); }
  #drawer.aperto { transform:none; visibility:visible; }
  body.cassetto-aperto { overflow:hidden; }
  .drawer-h { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px; background:var(--panel); border-bottom:1px solid var(--line); }
  .drawer-g { padding:8px 8px 4px; border-bottom:1px solid var(--line); }
  .drawer-gh { padding:6px 10px 2px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
  #drawer button[data-vai-tab] { display:block; width:100%; text-align:left; padding:11px 10px; margin:0; border:0;
    border-radius:6px; background:none; color:var(--ink); font:inherit; font-size:15px; cursor:pointer; }
  #drawer button[data-vai-tab].on { background:var(--glow); color:var(--accent); font-weight:600; }
  #drawer button[data-vai-tab]:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
  header { align-items:center; }
}
@media (max-width: 700px) {
  html, body { overflow-x:clip; }
  input, select, textarea { font-size:16px !important; }
  header { align-items:center; }
  header h1 { flex:1 1 auto; min-width:0; }
  header .mini { min-height:40px; padding:6px 10px; margin:0; }
  #btn-me { font-size:15px; }
  /* the dashboard's figures two to a row: one to a row made it twenty screens long */
  .kpi { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
  .kpi .c { padding:10px 11px; }
  .kpi .c .v { font-size:18px; }
  .kpi .c .k { font-size:10px; }
}
@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
  #drawer, #drawer-back { transition:none; }
}

/* --- iPhone (2026-10-16, dal telefono vero) -------------------------------------
   Safari da' alle caselle data una larghezza minima sua e ignora `width`: due
   «Dal / Al» affiancate uscivano dallo schermo e trascinavano tutta la pagina a
   sinistra. Senza l'aspetto nativo si comportano come le altre caselle (il
   selettore della data si apre lo stesso). */
@media (max-width: 700px) {
  input[type=date], input[type=month], input[type=time], input[type=datetime-local] {
    -webkit-appearance:none; appearance:none; display:block; width:100%; min-width:0; max-width:100%;
    min-height:44px; text-align:left; }
  input[type=date]::-webkit-date-and-time-value, input[type=month]::-webkit-date-and-time-value { text-align:left; min-height:1.4em; }
  .row > div { min-width:0; }
}

/* --- Schermi da toccare, qualunque sia la larghezza (2026-10-16) -----------------
   Il controllo grafico (scripts/visual-check.mjs) sull'iPad: i bottoni del menu
   e i «mini» erano alti 34-38px e le caselle sotto i 16px, perche' le regole
   per il dito valevano solo sotto una certa larghezza. Un iPad e' largo come un
   computer piccolo e si usa col dito: decide il puntatore, non i pixel. */
@media (pointer: coarse) {
  input, select, textarea { font-size:16px !important; }
  nav button { min-height:44px; }
  button.mini, a.mini { min-height:44px; }
  button.sortby { min-height:40px; }
  .colorfield .clear { min-width:44px; min-height:44px; }
}

/* the venue number box is for signing in with an API key: once a person is
   signed in, their line says where they are (2026-10-16) */
header:has(#who-box:not([hidden])) #siteid-box { display:none; }
/* il QR per l'iscrizione alla fedelta' (2026-10-20): l'immagine e accanto cosa farne */
.join-qr { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.join-qr img { background:#fff; padding:8px; border-radius:10px; border:1px solid var(--line); }
.join-qr a.mono { word-break:break-all; }
/* The save bar of a long form (2026-11-02): it stays at the bottom of the
   screen while its form is in view, so saving the shop no longer means
   scrolling past the last voucher. Inside a section it takes the bottom edge. */
.savebar { position:sticky; bottom:0; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px;
  margin-top:12px; padding:10px 16px; background:var(--panel); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 -6px 14px -10px rgba(0,0,0,.25); }
section > form > .savebar { margin:12px -16px -16px; border-width:1px 0 0; border-radius:0 0 10px 10px; }
.savebar button.act { margin-top:0; }
.savebar .out { margin-top:0; flex:1 1 220px; }
.savebar .unsaved { display:none; font-size:12px; color:var(--warn); }
.savebar.dirty .unsaved { display:inline; }
/* Upload a picture, beside every field that takes one (2026-11-02) */
.img-riga { display:flex; align-items:center; gap:10px; margin-top:4px; }
.img-riga .img-up { margin:0; }
.img-anteprima { max-width:120px; max-height:48px; border-radius:6px; border:1px solid var(--line); background:var(--bg); object-fit:contain; }
.img-anteprima[hidden] { display:none; }
/* Discounts tab: who carries a profile, and the search that adds one more (2026-11-02).
   The results push the page down instead of floating: floating, they covered the next profile. */
/* one card per profile, so its customers and its search read as part of it */
.dp-card { border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px; background:var(--panel); }
.dp-head { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:flex-end; }
.dp-head label { margin:0 0 2px; }
.dp-nome { flex:2 1 220px; } .dp-pct { flex:0 0 110px; } .dp-azioni { display:flex; gap:4px; }
.dp-conti { margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
.dp-chip { display:inline-flex; align-items:center; gap:2px; padding:1px 2px 1px 8px; margin:2px 4px 2px 0; border:1px solid var(--line); border-radius:999px; font-size:12px; }
.dp-chip .mini { min-height:24px; padding:0 6px; margin:0; border:0; background:transparent; }
.dp-cerca { max-width:420px; margin-top:8px; }
.dp-risultati { margin-top:4px; max-height:260px; overflow:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 20px -10px rgba(0,0,0,.35); }
.dp-risultati[hidden] { display:none; }
.dp-opzione { display:block; width:100%; text-align:left; padding:8px 10px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); font:inherit; font-size:13px; cursor:pointer; }
.dp-opzione:last-child { border-bottom:0; }
.dp-opzione:hover:not([disabled]), .dp-opzione:focus { background:var(--bg); outline:none; }
.dp-opzione[disabled] { color:var(--muted); cursor:default; }
.dp-opzione small { color:var(--muted); }
/* Settings → which Pindot the venue is read from (v1/v2): one line with the registry, not a form */
#registry-pindot label{display:inline;margin:0}
#registry-pindot select{display:inline-block;width:auto;margin:0 4px;padding:3px 6px}