:root {
  --bg: #F4F6F7;
  --surface: #FFFFFF;
  --surface-alt: #EDF1F2;
  --border: #DCE2E5;
  --teal: #00697E;
  --teal-dark: #00505F;
  --teal-wash: #E1F1F4;
  --bianco: #FFFFFF;
  --text-main: #1A1D1F;
  --text-muted: #545B61;
  --danger: #C23A2B;
  --danger-wash: #FCEAE8;
  --warning: #8A6209;
  --warning-wash: #FDF3DF;
  --success: #1F8A4C;
  --success-wash: #E3F7EC;
  --radius: 12px;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  /* Base piu' grande del default browser (16px -> ~17px): tutte le
     misure in rem nel resto del foglio di stile scalano di conseguenza,
     per una UI piu' leggibile anche per chi vede meno bene. */
  font-size: 106.25%;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text-main);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--teal); }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 50;
  flex-wrap: wrap;
  row-gap: 8px;
}

.topbar-left { display: flex; align-items: center; gap: 18px; }
.topbar-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--text-main); text-decoration: none; font-size: 1.1rem; }
.topbar-brand img { height: 32px; width: 32px; border-radius: 50%; }
.topbar-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topbar-nav a {
  display: flex; align-items: center; gap: 7px;
  text-decoration: none;
  color: var(--text-muted);
  padding: 9px 14px;
  border-radius: var(--radius);
  font-size: 0.98rem;
  font-weight: 600;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.topbar-nav a.active, .topbar-nav a:hover { background: var(--teal-wash); color: var(--teal-dark); }
.nav-icon { width: 20px; height: 20px; flex-shrink: 0; }

.bottom-nav {
  display: none; /* diventa una tab bar fissa sotto i 768px, vedi media query in fondo */
}

.topbar-right { display: flex; align-items: center; gap: 14px; font-size: 0.92rem; color: var(--text-muted); }
.avatar-link { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text-main); font-weight: 600; }
.avatar-circle {
  width: 34px; height: 34px; border-radius: 50%; background: var(--teal);
  color: var(--bianco); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem; text-transform: uppercase; flex-shrink: 0;
}
.avatar-name { font-size: 0.92rem; }

.container { max-width: 1000px; margin: 0 auto; padding: 18px 16px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(20, 30, 35, 0.05);
}
.card h2 {
  font-size: 0.85rem;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 700;
}
.card-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.card-header h2 { margin: 0; }

.form-section { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; }
.form-section:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.form-section-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--teal);
  font-weight: 700;
  margin-bottom: 9px;
}

.prossimo-riga {
  display: flex; justify-content: space-between; align-items: center; padding: 13px 10px;
  border-bottom: 1px solid var(--border); cursor: pointer; gap: 10px; border-radius: 8px;
  transition: background .12s var(--ease), transform .12s var(--ease);
  margin: 0 -10px;
}
.prossimo-riga:last-child { border-bottom: none; }
.prossimo-riga:hover { background: var(--surface-alt); }
.prossimo-riga:active { transform: scale(0.99); }
.prossimo-data { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }
.prossimo-ora { font-weight: 700; font-size: 1.05rem; }

.btn {
  display: inline-block;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-main);
  padding: 12px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .08s var(--ease);
}
.btn:hover { background: var(--surface-alt); border-color: #C7CED2; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--teal); color: var(--bianco); border-color: var(--teal); box-shadow: 0 2px 8px rgba(0, 105, 126, 0.25); }
.btn-primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
.btn-danger { color: var(--danger); border-color: var(--danger); background: var(--surface); }
.btn-danger:hover { background: var(--danger-wash); }
.btn-link-muted { background: none; border: none; color: var(--text-muted); text-decoration: underline; cursor: pointer; padding: 6px 0; font-size: 1rem; font-weight: 600; }
.btn-link-muted:hover { color: var(--text-main); }
.btn-sm { padding: 8px 14px; font-size: 0.9rem; }
.btn-block { width: 100%; }

.form-group { margin-bottom: 14px; }
.form-group label { display: block; margin-bottom: 5px; font-size: 0.92rem; color: var(--text-main); font-weight: 600; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text-main);
  transition: border-color .15s var(--ease);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-wash);
}
.form-row { display: flex; gap: 10px; }
.form-row > .form-group { flex: 1; }

.badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}
.badge-confermato { background: var(--teal-wash); color: var(--teal-dark); }
.badge-completato { background: var(--success-wash); color: var(--success); }
.badge-annullato { background: var(--surface-alt); color: var(--text-muted); }
.badge-no_show { background: var(--danger-wash); color: var(--danger); }
.badge-pagato { background: var(--success-wash); color: var(--success); }
.badge-non-pagato { background: var(--warning-wash); color: var(--warning); }
.badge-in_attesa { background: var(--warning-wash); color: var(--warning); }
.badge-nxr { display: inline-block; background: var(--teal-wash); color: var(--teal-dark); font-weight: 700; border-radius: 6px; padding: 1px 8px; margin-right: 6px; font-size: 0.85rem; }

.progressione-legenda { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 0.85rem; }
.progressione-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.progressione-legenda i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.toast-container { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: var(--text-main); color: var(--bianco);
  padding: 12px 18px; border-radius: 8px; font-size: 0.95rem; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  animation: toast-in .2s var(--ease);
}
.toast.err { background: var(--danger); }
.toast.uscita { animation: toast-out .2s var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(20, 26, 29, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 16px;
  opacity: 1; transition: opacity .16s var(--ease);
}
.modal-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px;
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  transform: scale(1) translateY(0); transition: transform .18s var(--ease);
}
.modal-overlay.hidden .modal { transform: scale(0.95) translateY(6px); }
.modal h3 { margin-top: 0; padding-right: 24px; font-size: 1.2rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.modal-close-x {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-muted);
  font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.modal-close-x:hover { background: var(--border); color: var(--text-main); }

/* Agenda: griglia mensile */
.agenda-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.agenda-toolbar-nav { display: flex; align-items: center; gap: 10px; }
.agenda-toolbar-azioni { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.agenda-mese-label { font-weight: 700; font-size: 1.1rem; min-width: 160px; text-align: center; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.82rem; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-day {
  background: var(--surface); border-radius: 8px; padding: 6px; min-height: 64px;
  display: flex; flex-direction: column; gap: 4px; cursor: pointer;
  border: 1px solid var(--border);
  transition: border-color .12s var(--ease), transform .1s var(--ease);
}
.cal-day:hover { border-color: var(--teal); transform: translateY(-1px); }
.cal-day.altro-mese { opacity: 0.45; }
.cal-day.oggi { border-color: var(--teal); border-width: 2px; }
.cal-day.bloccato { background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 6px, var(--surface-alt) 6px, var(--surface-alt) 12px); }
.cal-day-num { font-size: 0.86rem; font-weight: 700; }
.cal-ev-indicatore {
  align-self: flex-start;
  background: var(--teal-wash);
  color: var(--teal-dark);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.74rem;
  font-weight: 700;
}

/* Agenda: switch mese/settimana + vista settimanale */
.agenda-vista-switch { display: flex; gap: 4px; background: var(--surface-alt); border-radius: 8px; padding: 3px; }
.agenda-vista-switch .btn { border: none; background: transparent; box-shadow: none; padding: 6px 12px; }
.agenda-vista-switch .btn.btn-vista-attiva { background: var(--surface); color: var(--teal-dark); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.cal-settimana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.settimana-giorno { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px; min-height: 110px; display: flex; flex-direction: column; gap: 6px; }
.settimana-giorno.oggi { border-color: var(--teal); border-width: 2px; }
.settimana-giorno-header { font-weight: 700; font-size: 0.82rem; cursor: pointer; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.settimana-vuoto { color: var(--text-muted); font-size: 0.78rem; }
.settimana-evento { background: var(--teal-wash); color: var(--teal-dark); border-radius: 6px; padding: 4px 6px; font-size: 0.78rem; line-height: 1.3; }
.settimana-evento.bloccato { background: var(--surface-alt); color: var(--text-muted); }
@media (max-width: 720px) {
  .cal-settimana { grid-template-columns: repeat(2, 1fr); }
}
.cal-ev-indicatore.bloccato { background: var(--surface-alt); color: var(--text-muted); }

.popup-giorno-riga {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 10px; border-bottom: 1px solid var(--border);
  cursor: pointer; border-radius: 8px; transition: background .12s var(--ease);
}
.popup-giorno-riga:hover { background: var(--surface-alt); }
.popup-giorno-riga:last-child { border-bottom: none; }

table.tabella-semplice { width: 100%; border-collapse: collapse; }
table.tabella-semplice th, table.tabella-semplice td {
  text-align: left; padding: 10px 6px; border-bottom: 1px solid var(--border); font-size: 0.96rem;
}
table.tabella-semplice th { color: var(--text-muted); font-weight: 600; font-size: 0.85rem; width: 40%; }
.table-responsive { overflow-x: auto; }

.login-wrap {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px;
  background: linear-gradient(180deg, #EAF1F3 0%, var(--bg) 100%);
}
.login-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 32px;
  width: 100%; max-width: 380px; text-align: center;
  box-shadow: 0 16px 40px rgba(20, 30, 35, 0.12);
  animation: login-in .3s var(--ease);
}
@keyframes login-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.login-card img.logo { height: 80px; width: 80px; border-radius: 50%; margin-bottom: 16px; box-shadow: 0 0 0 5px var(--teal-wash); }
.login-card h1 { color: var(--text-main); font-size: 1.35rem; margin: 0 0 22px; letter-spacing: 0.01em; }
.login-card .form-group { text-align: left; }
.login-hint { color: var(--text-muted); font-size: 0.9rem; }

.avviso-box { background: var(--warning-wash); border: 1px solid #E8C97A; border-radius: 8px; padding: 12px 14px; font-size: 0.92rem; margin-bottom: 12px; color: var(--text-main); }

[data-kinesis-install="banner"] {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--teal-wash); border-bottom: 1px solid var(--border);
  padding: 10px 16px; font-size: 0.92rem;
}
[data-kinesis-install="banner"] .install-testo { flex: 1; min-width: 200px; color: var(--teal-dark); font-weight: 600; }
[data-kinesis-install="banner"] .install-banner-chiudi {
  background: none; border: none; color: var(--teal-dark); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 4px 8px;
}
[data-kinesis-install="completo"] .install-testo { color: var(--text-main); margin-bottom: 12px; }

.vista-pt-banner {
  background: var(--teal); color: var(--bianco); text-align: center;
  padding: 10px 12px; font-size: 0.92rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px;
}
.vista-pt-banner button { background: rgba(255,255,255,0.22); border: none; color: var(--bianco); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.86rem; font-weight: 600; }

/* Stato di caricamento generico */
.spinner {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--border); border-top-color: var(--teal);
  animation: spin .7s linear infinite; vertical-align: middle; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .topbar-brand .brand-text { display: none; }
  .container { padding: 12px 10px; }
  .cal-day { min-height: 52px; padding: 4px; }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-overlay .modal { max-width: 100%; border-radius: 16px 16px 0 0; max-height: 92vh; }
  .modal-overlay.hidden .modal { transform: translateY(16px); }
  .form-row { flex-direction: column; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
  .card-header { flex-direction: column; align-items: stretch; }
  .card-header > div { display: flex; flex-direction: column; gap: 8px; }
  .agenda-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .agenda-toolbar-nav { justify-content: space-between; }
  .agenda-toolbar-azioni { justify-content: center; }
  .agenda-toolbar-azioni .btn-primary { width: 100%; order: 3; }
}

/* Navigazione: sotto i 768px la nav primaria si sposta in una tab bar
   fissa in fondo allo schermo (pattern da app nativa) invece di restare
   nella topbar, che si affollava rapidamente (fino a 4 voci lato cliente
   + avatar + nome + Esci sulla stessa riga). Vedi templates/_nav_links.html,
   incluso sia nella topbar — nascosta qui sotto — sia nella bottom-nav,
   cosi' le due navigazioni restano sempre sincronizzate. */
@media (max-width: 768px) {
  .topbar-nav { display: none; }
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    justify-content: space-around;
    z-index: 60;
    box-shadow: 0 -2px 10px rgba(20, 30, 35, 0.06);
  }
  .bottom-nav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 6px 4px; border-radius: 10px; flex: 1; min-width: 0;
    text-decoration: none; color: var(--text-muted); font-weight: 600; font-size: 0.68rem;
    transition: background .15s var(--ease), color .15s var(--ease);
  }
  .bottom-nav a .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .bottom-nav a.active { background: var(--teal-wash); color: var(--teal-dark); }
  .bottom-nav .nav-icon { width: 22px; height: 22px; }
  /* Spazio per non far finire l'ultimo elemento della pagina sotto la tab
     bar fissa. Regola volutamente dopo il blocco 640px sopra, cosi' vince
     nella cascata anche sui telefoni piu' stretti (stessa specificita',
     l'ultima dichiarazione in ordine di sorgente prevale). */
  .container { padding-bottom: 84px; }
}

/* ==========================================================================
   BRAND ET CLUB — aggiunto in coda a style.css da
   scripts/sincronizza_da_kinesis.py. Non modificare style.css a mano:
   le regole di brand vanno qui (brand/brand.css), il resto viene da Kinesis.
   ========================================================================== */

/* Montserrat self-hosted (stesso font del sito palestragymnasiumetclub.com) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/montserrat-latin.woff2') format('woff2');
}

/* Palette monocromatica nero/bianco come logo e sito. I nomi delle
   variabili restano quelli di Kinesis (--teal*) per non toccare il codice
   condiviso: qui cambiano solo i valori. */
:root {
  --bg: #F3F3F3;
  --surface: #FFFFFF;
  --surface-alt: #EDEDED;
  --border: #DADADA;
  --teal: #141414;
  --teal-dark: #000000;
  --teal-wash: #E9E9E9;
  --text-main: #141414;
  --text-muted: #555555;
}

body { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.btn-primary { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22); }

/* Login: foto della sala attrezzi + logo orizzontale in una fascia nera */
.login-wrap {
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.78) 100%),
              url('/static/img/foto/sala-attrezzi.jpg') center / cover no-repeat #111;
}
.login-card { border: none; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
.login-card img.logo {
  display: block; box-sizing: border-box;
  width: calc(100% + 64px); height: auto; max-width: none;
  margin: -32px -32px 22px; padding: 22px 40px 18px;
  background: #000; border-radius: 18px 18px 0 0; box-shadow: none;
}
.login-card h1 { font-size: 1.2rem; letter-spacing: 0.02em; text-transform: uppercase; }
.login-wrap [data-kinesis-install="completo"] { background: rgba(255,255,255,0.94); border-radius: 14px; padding: 14px 16px; }