/* ============================================================================
   Timbratura — foglio di stile unico, mobile-first, usabile con una mano.

   I colori sono variabili: il tema di ciascuna azienda si applica cambiando
   solo il blocco :root, senza toccare una riga di layout.

   ⚠️ PALETTE DA CONFERMARE. I valori Hatweb vengono dagli asset vettoriali del
   progetto (LOGO HATWEB TRADE), quelli Energine sono campionati dal logo
   ufficiale del sito. Il sito energine.it usa invece un viola #6254E7 che
   NON è coerente col proprio logo ed è quasi certamente un residuo del tema
   WordPress: non l'ho adottato. Serve conferma dal brand book.
   ============================================================================ */

:root {
  --bg: #0f1115;
  --surface: #171a21;
  --surface-2: #1f232c;
  --text: #f2f4f8;
  --text-muted: #9aa3b2;
  --border: #2a2f3a;
  --accent: #eec909;          /* Hatweb — oro del logo vettoriale */
  --accent-ink: #1a1c22;      /* testo sopra l'accento */
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #f87171;
  --focus: #60a5fa;
  --radius: 16px;
  --tap: 56px;                /* bersaglio tattile: ben oltre il minimo di 44px */
}

/* Energine prende il VERDE del proprio logo: è il colore del corpo del
   camaleonte, quello che si riconosce da lontano (il turchese è solo l'angolo
   in basso a sinistra, il giallo è quasi identico all'oro di Hatweb e
   renderebbe le due aziende indistinguibili proprio dove conta — un capo che
   gestisce entrambe deve capire a colpo d'occhio su quale sta operando). */
:root[data-company='energine'] {
  --accent: #86c440;          /* verde del logo */
  --accent-2: #22b8ac;        /* turchese del gradiente, per gli accenti secondari */
  --accent-ink: #10210a;      /* testo sopra l'accento */
}

/* Chi preferisce il chiaro lo ottiene: non imponiamo un tema scuro a tutti. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-2: #eef1f5;
    --text: #1a1c22;
    --text-muted: #5b6472;
    --border: #d9dee6;
    --accent-ink: #1a1c22;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;            /* mai sotto 16px: iOS ingrandisce da solo sotto quella soglia */
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Area sicura di iPhone: senza, il pulsante finisce sotto la barra home. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.wrap {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 20px 18px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Intestazione: azienda e persona, sempre visibili ── */
.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-dot {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  background: var(--accent);
  display: grid; place-items: center;
  color: var(--accent-ink); font-weight: 800; font-size: 15px;
}
.brand-name { font-weight: 700; font-size: 15px; letter-spacing: .2px; }
.brand-sub { color: var(--text-muted); font-size: 12px; }

/* ── Stato corrente ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.state-label { color: var(--text-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .6px; }
.state-value { font-size: 26px; font-weight: 750; margin-top: 4px; display: flex; align-items: center; gap: 10px; }
.state-since { color: var(--text-muted); font-size: 14px; margin-top: 6px; }

/* Lo stato non è mai comunicato dal solo colore: c'è sempre anche il testo. */
.pip { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.pip--in { background: var(--ok); }
.pip--out { background: var(--text-muted); }
.pip--break { background: var(--warn); }
.pip--susp { background: var(--danger); }

/* ── Azioni ── */
.actions { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.btn {
  min-height: var(--tap);
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 18px; font-weight: 650;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform .06s ease, opacity .15s ease;
  touch-action: manipulation;      /* niente zoom accidentale sul doppio tocco */
  -webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled) { transform: scale(.985); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-size: 20px; min-height: 64px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Riquadro diagnostico: posizione, orario, precisione ── */
.meta { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; font-size: 14px; }
.meta dt { color: var(--text-muted); }
.meta dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Esito ── */
.toast {
  border-radius: 14px; padding: 14px 16px; font-size: 15px;
  border: 1px solid var(--border); background: var(--surface-2);
  display: flex; gap: 10px; align-items: flex-start;
}
.toast--ok { border-color: color-mix(in srgb, var(--ok) 50%, var(--border)); }
.toast--err { border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); }
.toast strong { display: block; margin-bottom: 2px; }

.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Chi soffre il movimento non deve subirlo. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.foot { color: var(--text-muted); font-size: 12px; text-align: center; margin-top: auto; padding-top: 12px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================================
   Area personale (me.js) + scanner (scan.js).
   Stessi token di sopra: nessun colore nuovo, solo pattern nuovi.
   ============================================================================ */

/* `hidden` deve vincere SEMPRE: le regole con display (es. .toast{display:flex})
   altrimenti riaprirebbero elementi che il codice ha chiuso con el.hidden. */
[hidden] { display: none !important; }

:root { --info: #60a5fa; }

/* Il tono «avviso» mancava: qr_required non è un errore, è un'istruzione. */
.toast--warn { border-color: color-mix(in srgb, var(--warn) 50%, var(--border)); }
/* Bottone dentro il riquadro d'esito (es. «Inquadra il QR del kiosk»). */
.btn--toast { flex: 0 0 auto; margin-left: auto; align-self: center; }

.muted { color: var(--text-muted); font-size: 14px; }
.testo { color: var(--text-muted); font-size: 14px; margin: 8px 0 14px; }
.testo-mini { color: var(--text-muted); font-size: 12px; margin: 10px 0 0; }

/* Nel profilo la colonna destra porta email e nomi lunghi: meglio a capo
   che fuori dallo schermo. */
.meta dd { overflow-wrap: anywhere; }

/* ── Barra delle schede: fissa in basso, nella zona del pollice ── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbtn {
  flex: 1 1 0; min-height: 56px; min-width: 44px;   /* tap target reale */
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 11px; font-weight: 650;
  padding: 8px 2px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.tabbtn[aria-selected='true'] { color: var(--accent); }
.tabbtn:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
/* Il contenuto non deve finire sotto la barra. */
.wrap { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

/* ── Moduli: campi grandi, mai sotto i 16px (iOS zoomerebbe da solo) ── */
.toolbar { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-muted); }
.field input, .field select, .field textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font: inherit; font-size: 16px;
  min-height: 44px;
  padding: 8px 12px;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 1px;
}
/* Popup nativo di <select> (Chrome/Linux lo rende chiaro ignorando il tema): si
   colorano le opzioni e si dichiara lo schema del controllo. */
.field select { color-scheme: dark; }
option, optgroup { background: var(--surface); color: var(--text); }
@media (prefers-color-scheme: light) { .field select { color-scheme: light; } }
.row { display: flex; gap: 10px; }
.row > .field { flex: 1; }
#form-richiesta { display: flex; flex-direction: column; gap: 12px; }

/* ── Elenchi a card ── */
.list { display: flex; flex-direction: column; gap: 10px; }
.item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: space-between;
}
/* Variante dentro una card già bordata: niente doppio bordo. */
.list--piatta { gap: 0; margin-top: 8px; }
.item--piatto {
  background: none; border: none; border-radius: 0;
  border-top: 1px solid var(--border);
  padding: 10px 0;
}
.item-main { flex: 1 1 60%; min-width: 0; }
.item-title { font-weight: 650; font-size: 15px; overflow-wrap: anywhere; }
.item-sub { color: var(--text-muted); font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.item-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.allegati { flex-basis: 100%; }

.chip {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 10px; font-size: 12px; color: var(--text-muted);
  white-space: nowrap;
}
.chip--ok     { border-color: color-mix(in srgb, var(--ok) 55%, var(--border));     color: var(--ok); }
.chip--warn   { border-color: color-mix(in srgb, var(--warn) 55%, var(--border));   color: var(--warn); }
.chip--danger { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); color: var(--danger); }
.chip--info   { border-color: color-mix(in srgb, var(--info) 55%, var(--border));   color: var(--info); }

/* Saldo in grande: è la cifra per cui si apre la scheda. */
.saldo-num { font-size: 32px; font-weight: 750; margin-top: 6px; font-variant-numeric: tabular-nums; }

/* ── Bottoni: varianti compatte, sempre ≥44px ── */
.btn--sm { min-height: 44px; font-size: 15px; padding: 0 14px; border-radius: 12px; }
.btn--danger { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); color: var(--danger); }

/* ── Dialog ── */
dialog {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; width: min(92vw, 420px);
  max-height: 85dvh; overflow-y: auto;
}
dialog::backdrop { background: rgba(0, 0, 0, .55); }
.dlg-titolo { font-size: 18px; margin: 0 0 14px; }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; }

/* ── Scanner: pieno schermo, mirino, uscita sempre a portata di pollice ── */
.scanner {
  position: fixed; inset: 0; z-index: 50;
  background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
}
.scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scanner-mirino {
  position: relative;
  width: min(64vw, 260px); aspect-ratio: 1 / 1;
  border: 3px solid var(--accent); border-radius: 18px;
  /* L'ombra enorme scurisce tutto tranne il riquadro: l'occhio va al centro. */
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45);
}
.scanner-testo { position: relative; color: #fff; font-size: 15px; text-align: center; padding: 0 24px; margin: 0; }
.scanner-chiudi {
  position: absolute; left: 24px; right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  background: var(--surface); color: var(--text);
}

/* ============================================================================
   Stati col PUNTATORE (mouse/trackpad). `@media (hover:hover)` li dà solo a chi
   ha davvero un puntatore: sul telefono un :hover resterebbe "incollato" dopo
   il tocco. Nessuna animazione gratuita — solo il feedback che su desktop ci si
   aspetta e che sul mobile mancava.
   ============================================================================ */
@media (hover: hover) {
  .btn { transition: transform .06s ease, opacity .15s ease, border-color .15s ease, background-color .15s ease, filter .15s ease; }
  .btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--text) 24%, var(--border)); }
  .btn--primary:hover:not(:disabled) { filter: brightness(1.06); }
  .btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 12%, transparent); }
  .item { transition: border-color .15s ease; }
  .item:hover { border-color: color-mix(in srgb, var(--text) 18%, var(--border)); }
  .tabbtn { transition: color .15s ease, background-color .15s ease; }
  .tabbtn:hover { color: var(--text); }
}

/* ============================================================================
   SCHERMI LARGHI — l'app smette di essere una striscia da telefono persa nel
   nero. La barra delle schede diventa una sidebar verticale a sinistra; il
   contenuto respira, centrato nello spazio rimasto. Stesso DOM, stesso JS
   (le tab commutano solo `hidden`/`aria-selected`): cambia solo il layout.
   ============================================================================ */
@media (min-width: 860px) {
  body { padding-left: 236px; }

  /* La tabbar -> sidebar. Da fissa-in-basso a fissa-a-sinistra. */
  .tabbar {
    top: 0; bottom: 0; right: auto; width: 236px;
    flex-direction: column; align-items: stretch;
    gap: 4px;
    padding: 22px 14px;
    border-top: none;
    border-right: 1px solid var(--border);
  }
  .tabbar::before {
    content: 'Sezioni';
    color: var(--text-muted);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
    padding: 2px 14px 10px;
  }
  .tabbtn {
    flex: 0 0 auto;
    min-height: 46px;
    justify-content: flex-start; text-align: left;
    font-size: 15px; font-weight: 600;
    padding: 0 14px; border-radius: 12px;
  }
  .tabbtn:focus-visible { outline-offset: 2px; }
  .tabbtn[aria-selected='true'] {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
  }

  /* Contenuto: centrato nello spazio a destra della sidebar, niente più
     spazio riservato alla barra in basso. */
  .wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 34px 34px 44px;
    gap: 18px;
  }

  /* La schermata di timbratura resta un fuoco stretto anche sul grande: un
     bottone largo mezzo schermo sarebbe peggio. Le viste con dati (cartellino,
     monte ore, richieste, badge, profilo) usano tutta la larghezza. */
  #vista-timbra, #vista-accesso-me { max-width: 560px; margin-inline: auto; width: 100%; }

  /* Intestazione un filo più grande, ora che c'è spazio. */
  .brand-dot { width: 40px; height: 40px; font-size: 17px; }
  .brand-name { font-size: 17px; }
  .brand-sub { font-size: 13px; }
  .state-value { font-size: 30px; }
}

/* Pagina di SOLO login (non autenticati): niente header né tabbar (nascosti da
   me.js), accesso centrato verticalmente. */
body.solo-login .wrap { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; }

/* ============================================================================
   UNIFICAZIONE app + gestione (01/09).
   Una sola app, un solo accesso: la nav in basso passa a ICONE grandi, le aree
   personali si accorpano (Presenze = cartellino+monte ore+richieste; Profilo =
   profilo+badge+dispositivi) e per lo staff compare l'hub «Gestione». Stessi
   token di colore: nessun colore nuovo, solo pattern nuovi.
   ============================================================================ */

/* ── Nav a icone: icona sopra, etichetta sotto, bersaglio ampio ── */
.tabbar { min-height: 62px; }
.tabbtn { flex-direction: column; gap: 3px; font-size: 11px; padding: 7px 2px 6px; }
.tabico { width: 22px; height: 22px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.8; }
/* Il contenuto non deve finire sotto la barra più alta. */
.wrap { padding-bottom: calc(94px + env(safe-area-inset-bottom)); }

/* pip usati anche dalla gestione (oltre a in/out/break/susp già definiti). */
.pip--ok { background: var(--ok); }
.pip--muted { background: var(--text-muted); }
.pip--info { background: var(--info); }
.pip--danger { background: var(--danger); }

/* ── Sotto-navigazione a pillole (Presenze, Gestione): riga scorrevole ── */
.subnav {
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subtab {
  flex: 0 0 auto; min-height: 42px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); font-size: 14px; font-weight: 600; cursor: pointer;
  white-space: nowrap; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.subtab[aria-selected='true'] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.subtab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) { .subtab:hover { color: var(--text); } .subtab[aria-selected='true']:hover { color: var(--accent-ink); } }

/* Titolo di sotto-sezione dentro una vista accorpata (Profilo, Gestione). */
.sezione-tit { font-size: 15px; font-weight: 700; margin: 20px 0 10px; letter-spacing: .2px; }
.sezione-tit:first-child { margin-top: 2px; }

/* ── Gestione: riepilogo a chip (Oggi), pager, tabelle ── */
.summary { display: flex; flex-wrap: wrap; gap: 8px; }
.summary .chip b { color: var(--text); margin-left: 4px; font-variant-numeric: tabular-nums; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; flex-wrap: wrap; }

/* Tabelle: scorrono di lato DENTRO la card, il corpo pagina mai di lato. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0; }
.table-scroll table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
.table-scroll th, .table-scroll td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table-scroll tr:last-child td { border-bottom: none; }
.table-scroll th { color: var(--text-muted); font-weight: 650; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.table-scroll td { font-variant-numeric: tabular-nums; }

/* Riquadri «si mostra una volta sola» (invito QR, chiave kiosk). */
.link-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; word-break: break-all; }
.qr { width: min(240px, 70vw); height: auto; display: block; margin: 12px auto; border-radius: 12px; background: #fff; padding: 8px; }

/* Su schermo largo la nav-icone in sidebar torna orizzontale (icona + testo). */
@media (min-width: 860px) {
  .tabbtn { flex-direction: row; gap: 12px; }
  .tabico { width: 22px; height: 22px; }
  /* Le viste con dati usano tutta la larghezza; solo Timbra/accesso restano strette. */
  #vista-presenze, #vista-profilo, #vista-gestione { width: 100%; }
}