/* --- pagina Calendario --------------------------------------------------
   Larghezza fissata all'80% dello schermo disponibile (richiesto dal
   vivo): la tabella ha molte colonne, piu' spazio possibile aiuta. */
#calendario-page {
  width: 80%;
  margin: 0 auto;
  padding: 2rem 0 3rem;
}

#calendario-root .loading, #calendario-root .error {
  font-family: var(--font-ui);
  color: var(--text-dim);
  padding: 1rem 0;
}

/* --- intestazione "Anno" ------------------------------------------------ */
.calendario-year-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}
.calendario-year-heading {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--accent);
}
.calendario-year-edit-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 5px;
  padding: 0.15rem 0.5rem;
  font-size: 0.78rem;
  cursor: pointer;
}
.calendario-year-edit-btn:hover { border-color: var(--accent); color: var(--accent); }
.calendario-year-input {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  width: 220px;
  max-width: 60vw;
}
.calendario-year-input:focus { outline: none; border-color: var(--accent); }

/* --- "+ Aggiungi colonna" + stato eliminazione colonna, sulla stessa riga */
.calendario-toolbar-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.calendario-toolbar { margin: 0; }
.calendario-add-column-form.hidden { display: none; }
.calendario-add-column-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
}
.calendario-add-column-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-dim);
}
.calendario-add-column-input {
  display: block;
  width: 220px;
  max-width: 100%;
  margin-top: 0.3rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  box-sizing: border-box;
}
.calendario-add-column-input:focus { outline: none; border-color: var(--accent); }
.calendario-add-column-buttons {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* --- tabella --------------------------------------------------------------
   Contenitore ad altezza limitata (invece di lasciar crescere la pagina
   per tutte le righe): con 100+ righe lo slider orizzontale finiva in
   fondo a una pagina lunghissima, di fatto irraggiungibile senza scorrere
   tutto - qui dentro resta sempre a portata di mano, appena sotto le
   righe visibili. "min-width: 100%" sulla tabella (invece di
   "width: 100%") le permette di crescere oltre il wrap quando le
   larghezze delle colonne (vedi calendario.js, applicate inline per
   colonna) lo richiedono. */
.calendario-table-wrap {
  max-height: 68vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.calendario-table {
  min-width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.92rem;
}
/* è a tutti gli effetti una matrice: griglia completa (orizzontale E
   verticale) su ogni cella, intestazioni comprese - le righe "divisore"
   (cambio mese) restano una cella per colonna anche loro (vedi
   renderRowView in calendario.js), cosi' le linee verticali non si
   interrompono mai scendendo lungo la tabella */
.calendario-table th,
.calendario-table td {
  border: 1px solid var(--border);
}
.calendario-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  vertical-align: bottom;
  padding: 0.7rem 0.9rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--bg-elevated);
  white-space: nowrap;
}
.calendario-table thead th.calendario-actions-col { width: 1%; min-width: auto !important; }
.calendario-col-rename-btn,
.calendario-col-resize-btn,
.calendario-col-remove-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  margin-left: 0.4rem;
  padding: 0 0.15rem;
}
.calendario-col-rename-btn:hover { color: var(--accent); }
.calendario-col-resize-btn:hover { color: var(--accent); }
.calendario-col-remove-btn:hover { color: var(--cat-morte); }
.calendario-col-width-input {
  width: 80px;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.25rem 0.4rem;
  margin-right: 0.4rem;
}
.calendario-col-width-input:focus { outline: none; border-color: var(--accent); }
/* modulo di rinomina colonna (vedi renderHeaderRenameEdit in
   calendario.js) - stessa forma di .calendario-col-width-input qui sopra,
   solo piu' largo (un nome, non un numero) */
.calendario-col-name-input {
  width: 140px;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.25rem 0.4rem;
  margin-right: 0.4rem;
}
.calendario-col-name-input:focus { outline: none; border-color: var(--accent); }

.calendario-row:nth-child(even):not(.calendario-row-divider) { background: rgba(255, 255, 255, 0.02); }

.calendario-cell {
  padding: 0.55rem 0.9rem;
  color: var(--text);
  line-height: 1.55;
  vertical-align: top;
}
.calendario-cell:first-child {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}
.calendario-wikilink { color: var(--cat-associazione); }
.calendario-wikilink:hover { color: var(--accent); }

/* riga "divisore" (es. cambio mese: solo la prima colonna valorizzata,
   vedi isDividerRow in calendario.js) - stesso sfondo/stile su tutte le
   celle della riga, cosi' si legge comunque come una fascia unica pur
   restando divisa colonna per colonna come il resto della matrice */
.calendario-divider-cell {
  padding: 0.5rem 0.9rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--bg-elevated);
}

.calendario-actions-cell {
  padding: 0.5rem 0.7rem;
  white-space: nowrap;
  vertical-align: top;
}
.calendario-actions-cell .row-status { display: block; margin-top: 0.3rem; }

.calendario-edit-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 5px;
  padding: 0.25rem 0.6rem;
  font-size: 0.76rem;
  font-family: var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
}
.calendario-edit-btn:hover { border-color: var(--accent); color: var(--accent); }

/* --- modifica di una riga ---------------------------------------------- */
.calendario-cell-editing { padding: 0.45rem 0.6rem; }
.calendario-cell-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.4rem 0.55rem;
  resize: vertical;
}
.calendario-cell-textarea:focus { outline: none; border-color: var(--accent); }

.calendario-save-btn {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--text);
  border-radius: 5px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
}
.calendario-save-btn:hover:not(:disabled) { background: var(--accent); }
.calendario-save-btn:disabled { opacity: 0.4; cursor: default; }
.calendario-cancel-btn {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 5px;
  padding: 0.35rem 0.8rem;
  margin-left: 0.4rem;
  cursor: pointer;
}
.calendario-cancel-btn:disabled { opacity: 0.4; cursor: default; }

.calendario-empty {
  font-family: var(--font-ui);
  color: var(--text-dim);
  padding: 1.2rem 0.2rem;
}
.calendario-empty.hidden { display: none; }

/* --- "+ Aggiungi riga" (il pulsante stesso e' .add-new-btn, gia'
   definito in registry.css caricato qui per .token-bar) --------------- */
.calendario-add-row-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.2rem;
}
.calendario-add-row-bar .add-new-btn { margin: 0; }

@media (max-width: 900px) {
  #calendario-page { width: auto; padding: 1.5rem 1.2rem 3rem; }
  .calendario-table-wrap { max-height: 60vh; }
}