/* ── IMM CarraraFiere · Badge — stile condiviso fra totem e area amministrativa ──────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:#f4f5f7; --surface:#fff; --border:#d0d5dd; --border2:#a0aabb;
  --text:#1a1d23; --text2:#5a6272; --text3:#9ca3af;
  --blue:#2563eb;  --blue-bg:#eff4ff;  --blue-text:#1e40af;  --blue-bd:#bfcffe;
  --green:#16a34a; --green-bg:#f0fdf4; --green-text:#15803d; --green-bd:#bbf7d0;
  --red:#dc2626;   --red-bg:#fef2f2;   --red-text:#991b1b;   --red-bd:#fecaca;
  --amber:#d97706; --amber-bg:#fffbeb; --amber-text:#92400e; --amber-bd:#fde68a;
  --r:8px; --rl:12px; --sh:0 1px 3px rgba(0,0,0,.07);
}

html, body {
  height:100%;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px; color:var(--text); background:var(--bg);
}

/* ── elementi comuni ─────────────────────────────────────────────────────── */

.btn {
  border:0; border-radius:var(--r); padding:.55rem 1rem;
  font-size:14px; font-weight:500; cursor:pointer; transition:.15s;
  font-family:inherit;
}
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:hover:not(:disabled) { background:#1d4ed8; }
.btn-ghost { background:transparent; color:var(--text2); border:1px solid var(--border); }
.btn-ghost:hover:not(:disabled) { background:#f9fafb; }
.btn-success { background:var(--green); color:#fff; }
.btn-success:hover:not(:disabled) { background:#15803d; }
.btn-danger { background:var(--red); color:#fff; }
.btn-danger:hover:not(:disabled) { background:#b91c1c; }
.btn-sm { padding:.35rem .7rem; font-size:13px; }

.form-group { margin-bottom:1rem; }
.form-group label { display:block; font-size:13px; font-weight:500; color:var(--text2); margin-bottom:6px; }
.form-input {
  width:100%; padding:.55rem .75rem; border:1px solid var(--border);
  border-radius:var(--r); font-size:14px; background:#fff;
  font-family:inherit; color:var(--text);
}
.form-input:focus { outline:0; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-bg); }

.alert { padding:.6rem .8rem; border-radius:var(--r); font-size:13px; border:1px solid; }
.alert-danger  { background:var(--red-bg);   color:var(--red-text);   border-color:var(--red-bd); }
.alert-success { background:var(--green-bg); color:var(--green-text); border-color:var(--green-bd); }

/* ══ TOTEM DI TIMBRATURA ═════════════════════════════════════════════════ */

.totem {
  min-height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:1rem;
}
.totem-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--rl);
  box-shadow:var(--sh); width:100%; max-width:560px; overflow:hidden;
}
.totem-head {
  padding:1.2rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.totem-head img { max-height:38px; width:auto; flex:0 0 auto; }
.orologio { font-size:21px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:.5px; white-space:nowrap; }
.data-oggi { font-size:11px; color:var(--text2); text-align:right; text-transform:capitalize; white-space:nowrap; }
.totem-body { padding:1.2rem; }

/* display del PIN */
.pin-display {
  display:flex; align-items:center; justify-content:center; gap:10px;
  height:62px; background:var(--bg); border:2px solid var(--border);
  border-radius:var(--rl); margin-bottom:1rem;
}
.pin-display.vuoto { color:var(--text3); font-size:15px; }
.pin-pallino { width:14px; height:14px; border-radius:50%; background:var(--text); }

/* tastierino */
.tastierino { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:1rem; }
.tasto {
  height:62px; font-size:26px; font-weight:500; color:var(--text);
  background:var(--surface); border:1px solid var(--border2); border-radius:var(--rl);
  cursor:pointer; transition:.1s; font-family:inherit;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.tasto:active { background:var(--blue-bg); border-color:var(--blue); transform:scale(.97); }
.tasto-fn { font-size:18px; color:var(--text2); }

/* azioni */
.azioni { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.azione {
  height:58px; font-size:15px; font-weight:600; letter-spacing:.3px;
  border:0; border-radius:var(--rl); color:#fff; cursor:pointer;
  transition:.15s; font-family:inherit;
}
.azione:disabled { opacity:.45; cursor:not-allowed; }
.azione:active:not(:disabled) { transform:scale(.98); }
.azione-entrata { background:var(--red); }
.azione-entrata:hover:not(:disabled) { background:#b91c1c; }
.azione-uscita { background:var(--green); }
.azione-uscita:hover:not(:disabled) { background:#15803d; }
.azione-cartellino { background:var(--blue); grid-column:1 / -1; height:48px; font-size:14px; }
.azione-cartellino:hover:not(:disabled) { background:#1d4ed8; }

/* esito: finestra modale al centro dello schermo */
.esito-modale {
  border:0; border-radius:var(--rl); padding:1.6rem 1.4rem 1.3rem;
  width:min(90vw, 360px); text-align:center;
  background:var(--surface); color:var(--text);
  box-shadow:0 12px 40px rgba(0,0,0,.28);
  /* il reset azzera i margini: senza questo la dialog non si centra */
  margin:auto;
}
.esito-modale::backdrop { background:rgba(15,18,25,.55); }

.esito-icona {
  width:58px; height:58px; border-radius:50%; margin:0 auto 1rem;
  display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:700; line-height:1; border:2px solid;
}
.esito-modale.success .esito-icona { background:var(--green-bg); color:var(--green-text); border-color:var(--green-bd); }
.esito-modale.danger  .esito-icona { background:var(--red-bg);   color:var(--red-text);   border-color:var(--red-bd); }

.esito-testo { font-size:17px; font-weight:600; line-height:1.35; margin-bottom:1.3rem; }
.esito-modale.success .esito-testo { color:var(--green-text); }
.esito-modale.danger  .esito-testo { color:var(--red-text); }

.esito-ok { width:100%; height:46px; font-size:15px; }

.totem-foot {
  padding:.8rem 1.2rem; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; color:var(--text3);
}
.totem-foot a { color:var(--text2); text-decoration:none; }
.totem-foot a:hover { text-decoration:underline; }
.totem-foot span { text-align:center; min-width:0; }

/* ingresso all'area amministrativa: discreto, solo icona */
.totem-foot .link-admin {
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; width:26px; height:26px; margin:-4px -6px -4px 0;
  border-radius:var(--r); color:var(--text3);
}
.totem-foot .link-admin:hover { color:var(--text2); background:var(--bg); text-decoration:none; }

/* ══ AREA AMMINISTRATIVA ═════════════════════════════════════════════════ */

#login-overlay { position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; z-index:1000; padding:1rem; }
#login-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--rl); padding:1.5rem; width:100%; max-width:420px; box-shadow:0 1px 8px rgba(0,0,0,.08); }
.login-logo { text-align:center; margin-bottom:1.5rem; }
.login-logo img { max-height:48px; margin-bottom:12px; }
.login-logo h1 { font-size:20px; font-weight:600; }
.login-logo p { font-size:13px; color:var(--text2); margin-top:4px; }
#login-error { display:none; margin-top:10px; }

#app { display:none; }
header {
  position:sticky; top:0; z-index:10; background:var(--surface);
  border-bottom:1px solid var(--border); padding:.65rem 1.25rem;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
header img { max-height:30px; }
header h1 { font-size:16px; font-weight:600; }
header .spacer { flex:1; }
.user-chip {
  display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .65rem;
  background:var(--blue-bg); color:var(--blue-text); border:1px solid var(--blue-bd);
  border-radius:99px; font-size:12px; font-weight:500;
}
main { padding:1.25rem; max-width:1100px; margin:0 auto; }

.tabs { display:flex; gap:.3rem; border-bottom:1px solid var(--border); margin-bottom:1.25rem; }
.tab {
  padding:.6rem 1rem; border:0; background:transparent; cursor:pointer;
  font-size:14px; font-weight:500; color:var(--text2);
  border-bottom:2px solid transparent; font-family:inherit;
}
.tab:hover { color:var(--text); }
.tab.attiva { color:var(--blue); border-bottom-color:var(--blue); }

.pannello { display:none; }
.pannello.attivo { display:block; }

.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--rl); box-shadow:var(--sh); padding:1.25rem; margin-bottom:1.25rem; }
.card h2 { font-size:15px; font-weight:600; margin-bottom:.35rem; }
.card .sub { font-size:13px; color:var(--text2); margin-bottom:1rem; }

.riga-filtri { display:flex; gap:.75rem; align-items:flex-end; flex-wrap:wrap; }
.riga-filtri .form-group { margin-bottom:0; }
.riga-filtri .form-input { min-width:140px; }

.tabella-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { padding:.55rem .6rem; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
th { font-weight:600; color:var(--text2); background:var(--bg); font-size:12px; text-transform:uppercase; letter-spacing:.3px; }
tbody tr:hover { background:var(--bg); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.azioni-riga { display:flex; gap:.35rem; }

/* PIN mascherato, scoperto solo mentre si tiene premuto l'occhio */
.cella-pin { display:flex; align-items:center; justify-content:flex-end; gap:.45rem; }
.pin-valore { font-variant-numeric:tabular-nums; letter-spacing:1.5px; }
.btn-occhio {
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; padding:0; border:0; background:transparent;
  color:var(--text3); border-radius:var(--r); cursor:pointer;
  -webkit-tap-highlight-color:transparent; touch-action:none;
}
.btn-occhio:hover { color:var(--text2); background:var(--bg); }
.btn-occhio.attivo { color:var(--blue); background:var(--blue-bg); }
.btn-occhio:focus-visible { outline:2px solid var(--blue); outline-offset:1px; }

.vuoto { padding:2rem; text-align:center; color:var(--text3); font-size:14px; }

dialog {
  border:1px solid var(--border); border-radius:var(--rl); padding:1.25rem;
  width:100%; max-width:440px; box-shadow:0 8px 30px rgba(0,0,0,.15);
  color:var(--text); background:var(--surface);
  margin:auto;   /* il reset azzera i margini e la dialog non si centrerebbe */
}
dialog::backdrop { background:rgba(0,0,0,.35); }
dialog h2 { font-size:16px; font-weight:600; margin-bottom:1rem; }
.dialog-azioni { display:flex; justify-content:flex-end; gap:.5rem; margin-top:1.25rem; }

@media (max-width:520px) {
  /* Logo, ora e data restano sulla stessa riga anche sul telefono:
     si rimpicciolisce il testo, non si impila. */
  .totem-head { padding:.9rem 1rem; gap:.6rem; }
  .totem-head img { max-height:30px; }
  .orologio { font-size:17px; letter-spacing:.3px; }
  .data-oggi { font-size:10px; }

  /* Stesso criterio per le coppie entrata/uscita. */
  .azioni { gap:8px; }
  .azione { font-size:13px; letter-spacing:0; padding:0 .3rem; }
}