:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --bg: #f4f6f9;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #1e293b;
  --text-muted: #64748b;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px;
  background: #111827;
  color: #e5e7eb;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar .brand {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #fff;
}

.sidebar a {
  color: #cbd5e1;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
}

.sidebar a:hover { background: #1f2937; color: #fff; }

.sidebar hr { border-color: #1f2937; width: 100%; margin: 10px 0; }

/* I monitor sono quasi sempre più larghi che alti: lo spazio orizzontale
   disponibile va sfruttato, invece di lasciare tutte le pagine strette e
   centrate con grandi margini vuoti ai lati. */
.content { flex: 1; padding: 28px 36px; max-width: 1600px; }

h1 { font-size: 24px; margin-bottom: 6px; }
h2 { font-size: 18px; margin-top: 0; }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  padding: 9px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  border: none;
  cursor: pointer;
}
.btn:hover { background: var(--primary-dark); }
.btn.secondary { background: #64748b; }
.btn.danger { background: var(--danger); }
.btn.small { padding: 5px 10px; font-size: 12px; }
/* Pulsante "in evidenza": per azioni che meritano di risaltare rispetto ai
   normali pulsanti secondari grigi (es. "Modulo privacy/consenso", un modulo
   da far firmare al paziente), con un colore caldo invece del blu/grigio
   standard. */
.btn.evidenziato { background: #ea580c; }
.btn.evidenziato:hover { background: #c2410c; }
/* Pulsanti di stampa in dashboard (elenco appuntamenti, agenda medici): uno
   sfondo grigio a contrasto, invece del solo bordo, rende il testo più
   leggibile a colpo d'occhio rispetto allo sfondo bianco della card. */
.btn.stampa {
  background: #475569;
  color: #fff;
}
.btn.stampa:hover { background: #334155; }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

th, td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

th { background: #f8fafc; color: var(--text-muted); font-weight: 600; }

tr:last-child td { border-bottom: none; }

.card {
  background: var(--card);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  margin-bottom: 20px;
}

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card { background: var(--card); border-radius: 10px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.stat-card .value { font-size: 26px; font-weight: 700; }
.stat-card .label { font-size: 13px; color: var(--text-muted); }

/* Variante "compatta": stessa larghezza ma alta la metà, per i riquadri in
   cima alla dashboard (nuovo paziente, appuntamenti oggi, ricerca) dove non
   serve tutto lo spazio verticale di un normale stat-card. */
.stat-card.stat-card-compatta {
  padding: 10px 18px;
  display: flex;
  align-items: center;
  min-height: 0;
}
.stat-card.stat-card-compatta .value { font-size: 18px; line-height: 1.2; }
.stat-card.stat-card-compatta .label { font-size: 12px; margin-left: 6px; }

/* Riquadro che è in realtà un link (es. "+ Nuovo paziente"): niente
   sottolineatura, colore ereditato, e un piccolo effetto hover per far
   capire che è cliccabile come un pulsante. */
a.stat-card-link {
  text-decoration: none;
  color: var(--primary);
  cursor: pointer;
}
a.stat-card-link:hover { background: #f8fafc; }
a.stat-card-link .value { color: var(--primary); }

form.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  background: var(--card);
  padding: 24px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
form.form-grid .full { grid-column: 1 / -1; }

label { font-size: 13px; color: var(--text-muted); display: block; margin-bottom: 4px; }

input, select, textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}

/* La regola sopra ("width:100%") si applica per errore anche ai checkbox,
   che dentro una riga flessibile (checkbox + testo accanto) la fa diventare
   larga quanto tutta la riga, spingendo il testo lontano a destra invece di
   restare un quadratino piccolo a sinistra. I checkbox tornano a dimensione
   naturale qui. */
input[type="checkbox"] {
  width: auto;
}

/* Nome e cognome vanno sempre in MAIUSCOLO: il text-transform dà il
   feedback visivo immediato mentre si digita, il valore effettivo viene
   comunque convertito in maiuscolo via JS (vedi pazienti/form.ejs e
   prenota/pagina.ejs) così viene salvato davvero in maiuscolo, non solo
   mostrato tale. */
input.maiuscolo {
  text-transform: uppercase;
}

/* Gli altri campi anagrafici testuali (via, civico...) vanno invece scritti
   con la sola iniziale maiuscola di ogni parola: stesso meccanismo di
   input.maiuscolo, ma con la trasformazione "iniziali maiuscole" invece di
   tutto maiuscolo (vedi funzione capitalizzaIniziali nei form). */
input.iniziali {
  text-transform: capitalize;
}

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.badge.firmato { background: #dcfce7; color: var(--success); }
.badge.inviato { background: #fef3c7; color: var(--warning); }
.badge.in_attesa { background: #f1f5f9; color: var(--text-muted); }
.badge.rifiutato { background: #fee2e2; color: var(--danger); }

/* Riga evidenziata per gli appuntamenti confermati, in dashboard */
tr.appuntamento-confermato td { background: #fef9c3; }
tr.appuntamento-confermato:hover td { background: #fef08a; }

/* Righe alternate (zebra) grigio chiaro, per leggere più facilmente tabelle
   con molte righe (es. elenco appuntamenti): il :not() esclude le righe già
   evidenziate (es. appuntamento confermato), che mantengono il loro colore. */
.tabella-zebra tbody tr:nth-child(even):not(.appuntamento-confermato) td {
  background: #f8fafc;
}

.actions { display: flex; gap: 8px; }

.empty { color: var(--text-muted); padding: 30px; text-align: center; }

.field-with-action { display: flex; gap: 8px; align-items: center; }
.field-with-action select { flex: 1; }
.field-with-action .btn.small { white-space: nowrap; }

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-overlay.aperto { display: flex; }
.modal-box {
  background: var(--card);
  border-radius: 10px;
  padding: 24px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.modal-box h2 { margin-top: 0; }
.modal-errore { color: var(--danger); font-size: 13px; min-height: 18px; margin: 0 0 6px; }

/* Barre semplici per le pagine di statistiche (niente libreria di grafici) */
.bar-row { display: grid; grid-template-columns: 200px 1fr 110px; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.bar-track { background: #f1f5f9; border-radius: 6px; height: 12px; overflow: hidden; }
.bar-fill { background: var(--primary); height: 100%; border-radius: 6px; }
.bar-valore { text-align: right; color: var(--text-muted); }

/* Menu "⋮" compatto per le azioni di riga nelle tabelle (es. elenco
   appuntamenti): raccoglie più pulsanti/azioni dentro un unico menu a
   tendina, lasciando più spazio orizzontale alle altre colonne della
   tabella invece di allinearli tutti per esteso. */
.menu-azioni { position: relative; display: inline-block; }
.menu-azioni-toggle {
  padding: 4px 10px;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
}
.menu-azioni-lista {
  display: none;
  /* "fixed", non "absolute": così il menu non viene più tagliato quando il
     suo contenitore (es. una tabella con poche righe) ha "overflow: hidden"
     per via degli angoli arrotondati — la posizione esatta (sotto il
     pulsante "⋮") viene calcolata in JS al momento dell'apertura, vedi
     views/layout.ejs. */
  position: fixed;
  z-index: 30;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  min-width: 150px;
  padding: 6px;
}
.menu-azioni-lista.aperto { display: block; }
.menu-azioni-lista a,
.menu-azioni-lista button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.menu-azioni-lista a:hover,
.menu-azioni-lista button:hover { background: #f1f5f9; }
.menu-azioni-lista button.azione-danger { color: var(--danger); }
.menu-azioni-lista form { margin: 0; }

/* Istogramma verticale semplice (niente libreria di grafici) per il report
   "Statistiche prestazioni": una colonna per mese, altezza proporzionale al
   valore più alto della serie. */
.istogramma {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 220px;
  padding: 10px 6px 0;
  overflow-x: auto;
}
.istogramma-colonna { display: flex; flex-direction: column; align-items: center; min-width: 54px; }
.istogramma-valore { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; white-space: nowrap; }
.istogramma-barra { width: 32px; background: var(--primary); border-radius: 4px 4px 0 0; min-height: 2px; }
.istogramma-etichetta { font-size: 11px; color: var(--text-muted); margin-top: 8px; text-align: center; max-width: 64px; }

.report-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.report-links a.card { display: block; text-decoration: none; color: inherit; }
.report-links a.card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.report-links h3 { margin: 0 0 6px; font-size: 15px; color: var(--primary); }
.report-links p { margin: 0; font-size: 13px; color: var(--text-muted); }

@media print {
  .sidebar, .page-header .actions, form.no-print, .actions form { display: none !important; }
  .layout { display: block; }
  .content { padding: 0; max-width: none; }
}

/* Campanella notifiche prenotazioni online, in cima al contenuto */
.topbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.notifiche-wrap { position: relative; }
.campanella {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.campanella:hover { background: #f8fafc; }
.notifica-contatore {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--danger);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 4px;
}
.pannello-notifiche {
  position: absolute;
  top: 48px;
  right: 0;
  width: 380px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--card);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  border: 1px solid var(--border);
  z-index: 50;
}
.pannello-notifiche-titolo {
  padding: 12px 14px;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--card);
}
.notifica-riga {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.notifica-riga:hover { background: #f8fafc; }
.notifica-riga:last-child { border-bottom: none; }
.notifica-riga-titolo { color: var(--text); }
.notifica-riga-meta { color: var(--primary); font-size: 12px; font-weight: 600; margin-top: 2px; }

/* Pulsante "Aggiorna" globale, fisso in basso a destra su ogni pagina. */
.pulsante-aggiorna-globale {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--primary, #2563eb);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pulsante-aggiorna-globale:hover { opacity: 0.9; }
.nome-cliccabile { color: var(--text, #1e293b); text-decoration: none; }
.nome-cliccabile:hover { text-decoration: underline; color: var(--primary, #2563eb); }

/* Linguetta "Messaggi WhatsApp", sempre visibile in basso, ancorata subito
   dopo il bordo della colonna nera laterale (non sovrapposta al menu, ma
   "attaccata" ad esso), per aprire la casella messaggi senza dover passare
   dal menu laterale. Il pulsantino tondo sopra la linguetta attiva/
   disattiva la notifica sonora (vedi script in layout.ejs); il badge rosso
   resta nascosto (display:none) finché non ci sono messaggi non letti,
   aggiornato via JavaScript senza ricaricare la pagina.
   Nota: 220px è la larghezza della colonna nera (.sidebar width, sopra) —
   se in futuro cambia quella larghezza, va aggiornata anche qui. */
.tab-whatsapp-container {
  position: fixed;
  left: 220px;
  bottom: 24px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.tab-whatsapp-suono {
  margin-left: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #1fb959;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.tab-whatsapp-fluttuante {
  background: #25d366;
  color: #fff;
  padding: 10px 14px 10px 16px;
  border-radius: 0 10px 10px 0;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  gap: 7px;
}
.tab-whatsapp-fluttuante:hover { background: #1fb959; }
.tab-whatsapp-badge {
  background: #dc2626;
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  min-width: 17px;
  text-align: center;
  display: none;
}