@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("../fonts/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("../fonts/Poppins-Bold.woff2") format("woff2"); }
:root {
  --blu: #0a0a0a; --blu-chiaro: #eeeeee; --verde: #1b7f4b; --giallo: #b7791f; --rosso: #b42318;
  --grigio: #666a73; --bordo: #dcdcdc; --sfondo: #f4f4f4; --testo: #111111;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.55 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; color: var(--testo); background: var(--sfondo); }
a { color: var(--blu); text-decoration: none; }
a:hover { text-decoration: underline; }
.layout { display: flex; min-height: 100vh; }
.menu { width: 230px; background: var(--blu); color: #fff; padding: 18px 12px; flex-shrink: 0; }
.menu h1 { font-size: 16px; margin: 0 8px 16px; line-height: 1.3; }
.menu a { display: block; color: #d4d4d4; padding: 8px 10px; border-radius: 6px; }
.menu a:hover, .menu a.attivo { background: rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.menu .gruppo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .65; margin: 16px 10px 4px; }
.menu .utente { margin-top: 24px; padding: 10px; font-size: 13px; border-top: 1px solid rgba(255,255,255,.2); }
.menu form button { background: none; border: 0; color: #d4d4d4; padding: 0; cursor: pointer; font: inherit; text-decoration: underline; }
.contenuto { flex: 1; padding: 24px 28px; max-width: 1200px; min-width: 0; }
h2, h3 { font-family: "Poppins", "Inter", sans-serif; letter-spacing: -.01em; }
h2 { margin: 0 0 4px; font-size: 22px; }
h3 { margin: 24px 0 8px; font-size: 16px; }
.sotto { color: var(--grigio); margin: 0 0 18px; }
.barra { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.card { background: #fff; border: 1px solid var(--bordo); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
.griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.num { font-size: 26px; font-weight: 700; font-family: "Poppins", "Inter", sans-serif; }
.etichetta { color: var(--grigio); font-size: 13px; }
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--bordo); border-radius: 10px; overflow: hidden; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--bordo); vertical-align: top; }
th { background: var(--blu-chiaro); font-size: 13px; }
tr:last-child td { border-bottom: 0; }
td.dx, th.dx { text-align: right; font-variant-numeric: tabular-nums; }
.btn { display: inline-block; background: var(--blu); color: #fff; border: 0; padding: 8px 14px; border-radius: 7px; cursor: pointer; font: inherit; }
.btn:hover { text-decoration: none; filter: brightness(1.1); }
.btn.sec { background: #fff; color: var(--blu); border: 1px solid var(--blu); }
.btn.picc { padding: 4px 10px; font-size: 13px; }
.badge { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.ok { background: #dcf5e7; color: var(--verde); }
.avviso { background: #fdf0d5; color: var(--giallo); }
.errore { background: #fde3e0; color: var(--rosso); }
.neutro { background: #e9edf5; color: var(--grigio); }
.messaggi { list-style: none; padding: 0; margin: 0 0 16px; }
.messaggi li { padding: 10px 14px; border-radius: 8px; margin-bottom: 6px; background: var(--blu-chiaro); }
.messaggi .success { background: #dcf5e7; } .messaggi .warning { background: #fdf0d5; } .messaggi .error { background: #fde3e0; }
form .campo, form select, form textarea, form input[type=text], form input[type=number], form input[type=email], form input[type=date], form input[type=password] {
  width: 100%; max-width: 520px; padding: 7px 9px; border: 1px solid var(--bordo); border-radius: 7px; font: inherit; background: #fff; }
form div { margin-bottom: 12px; }
form label { display: block; font-weight: 600; margin-bottom: 3px; }
form .helptext, form .errorlist { font-size: 13px; color: var(--grigio); }
form .errorlist { color: var(--rosso); list-style: none; padding: 0; margin: 2px 0; }
.filtri input, .filtri select { padding: 6px 8px; border: 1px solid var(--bordo); border-radius: 7px; font: inherit; }
.documento { background: #fff; border: 1px solid var(--bordo); border-radius: 10px; padding: 36px 44px; white-space: pre-wrap; font-family: Georgia, serif; line-height: 1.6; max-width: 800px; }
.bozza { background: #fdf0d5; color: var(--giallo); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; max-width: 800px; }
.accesso { max-width: 380px; margin: 12vh auto; }
.vuoto { color: var(--grigio); padding: 18px; text-align: center; }
@media (max-width: 800px) {
  .layout { flex-direction: column; } .menu { width: 100%; } .contenuto { padding: 16px; }
  table { display: block; overflow-x: auto; }
}
@media print {
  .menu, .barra, .messaggi, .noprint { display: none !important; }
  body { background: #fff; } .contenuto { padding: 0; max-width: none; }
  .documento { border: 0; padding: 0; }
}

/* --- App sul telefono --- */
.burger { display: none; width: 100%; background: var(--blu); color: #fff; border: 0; padding: 14px 16px; font: inherit; font-weight: 600; text-align: left; position: sticky; top: 0; z-index: 20; }
.btn, button.btn, .menu a { min-height: 40px; }
input, select, textarea { font-size: 16px; }
@media (max-width: 800px) {
  .layout { flex-direction: column; }
  .burger { display: block; }
  .menu { display: none; width: 100%; padding: 8px 12px 16px; }
  .menu.aperto { display: block; }
  .menu h1 { display: none; }
  .contenuto { padding: 14px; }
  .griglia { grid-template-columns: 1fr 1fr; }
  .num { font-size: 20px; }
  table { font-size: 13px; }
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* --- Identità Top Player: nero, bianco, TP --- */
a { color: #111; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: #aaa; }
.menu a, .btn, .menu form button { text-decoration: none; }
.menu form button { text-decoration: underline; }
.menu a.attivo, .menu a:hover { background: #fff; color: #0a0a0a; }
.btn:hover { background: #2b2b2b; }
.btn.sec { background: #fff; color: #0a0a0a; border: 1px solid #0a0a0a; }
.btn.sec:hover { background: #0a0a0a; color: #fff; }
.marchio img { width: 150px; height: 150px; display: block; margin: 0 auto; }
.marchio { display: flex; align-items: center; gap: 10px; margin: 0 8px 18px; }
.marchio .tp { font-family: "Poppins", "Inter", sans-serif; font-weight: 700; font-size: 20px; line-height: 1; background: #fff; color: #0a0a0a; border-radius: 6px; padding: 8px 9px 7px; letter-spacing: -.02em; }
.marchio .nome { font-weight: 600; font-size: 13px; line-height: 1.25; color: #fff; }
.marchio .nome small { display: block; font-weight: 400; color: #a3a3a3; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.accesso { max-width: 380px; margin: 12vh auto 0; border-top: 4px solid #0a0a0a; text-align: left; }
.accesso .marchio { margin: 0 0 14px; }
.accesso .marchio .tp { background: #0a0a0a; color: #fff; }
.accesso .marchio .nome { color: #0a0a0a; }
input:focus, select:focus, textarea:focus { outline: 2px solid #0a0a0a; outline-offset: 1px; }
.messaggi li { border-left: 4px solid #0a0a0a; }

.menu .marchio { display: block; margin: 0 0 14px; }
.menu .marchio img { width: 132px; height: 132px; }
.accesso .marchio { display: block; }
.accesso .marchio img { width: 140px; height: 140px; }

/* --- Business intelligence e cassa --- */
.avvisi { list-style: none; padding: 0; margin: 0 0 16px; }
.avvisi li { background: #fff; border: 1px solid var(--bordo); border-radius: 8px; padding: 9px 14px; margin-bottom: 6px; }
.grafico { width: 100%; height: auto; display: block; margin-top: 8px; }
.legenda { display: flex; gap: 18px; font-size: 13px; color: var(--grigio); flex-wrap: wrap; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.progresso { height: 8px; background: #e6e6e6; border-radius: 999px; overflow: hidden; margin: 8px 0 4px; }
.progresso span { display: block; height: 100%; background: #0a0a0a; }
.progresso.piccolo { display: inline-block; width: 70px; margin: 0 6px 0 0; vertical-align: middle; }
.riga-barra { display: grid; grid-template-columns: 170px 1fr 230px; gap: 12px; align-items: center; margin-top: 10px; }
.riga-barra .pista { background: #e6e6e6; border-radius: 999px; height: 10px; overflow: hidden; }
.riga-barra .pista span { display: block; height: 100%; background: #0a0a0a; border-radius: 999px; }
.riga-barra .pista span.oltre { background: var(--rosso); }
.riga-barra .val { text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; }
@media (max-width: 800px) { .riga-barra { grid-template-columns: 1fr; gap: 4px; } .riga-barra .val { text-align: left; } }
.filtri select, .filtri input { width: auto; max-width: 100%; }
td.dx { white-space: nowrap; }
.duecol { display: grid; grid-template-columns: 260px 1fr; gap: 16px; margin-bottom: 16px; }
.duecol .card { margin-bottom: 0; }
.centro { text-align: center; }
.donut { width: 170px; height: 170px; display: block; margin: 10px auto; transform: none; }
.riga-corta { grid-template-columns: 110px 1fr 190px; }
@media (max-width: 800px) { .duecol { grid-template-columns: 1fr; } .riga-corta { grid-template-columns: 1fr; } }
.btn.picc { white-space: nowrap; }
.riga-corta { grid-template-columns: 100px 1fr 250px; }