/* Calendrier. Une grille mensuelle plutot qu'une liste: le commercant pense sa
   semaine en lignes, et une liste de trente jours ne montre jamais le rythme. */

.calendar-nav {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  align-items: center; justify-content: space-between;
  margin-top: 1.5rem;
}

.calendar-nav__label { margin: 0; text-transform: capitalize; }

.calendar-nav__today { margin: 0.5rem 0 0; font-size: 0.875rem; }

.calendar-grid {
  margin-top: 1rem;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}

/* La ligne d'en-tete occupe les sept colonnes d'un coup, sinon chaque libelle
   deviendrait une cellule de la grille et decalerait tout le mois. */
.calendar-grid__head {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
}

.calendar-grid__weekday {
  padding: 0.5rem; text-align: center;
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-muted); background: var(--canvas);
}

.calendar-grid__cell {
  display: flex; flex-direction: column; gap: 0.25rem;
  min-height: 5rem; padding: 0.5rem;
  background: var(--canvas); color: inherit; text-decoration: none;
}

.calendar-grid__cell:hover { background: var(--quiet); }

.calendar-grid__number { font-weight: 600; }

.calendar-grid__hour { font-size: 0.75rem; color: var(--ink-muted); }

/* Une journee sans publication le dit en toutes lettres: une cellule vide se
   lit comme une donnee manquante, pas comme un jour de repos choisi. */
.calendar-grid__off { font-size: 0.75rem; color: var(--ink-faint); }

.calendar-grid__theme {
  font-size: 0.75rem; color: var(--accent-deep);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.calendar-grid__cell--outside { color: var(--ink-faint); }
.calendar-grid__cell--outside .calendar-grid__number { font-weight: 400; }

.calendar-grid__cell--today { box-shadow: inset 0 0 0 2px var(--accent); }

/* Le passe reste lisible mais recule: il se consulte, il ne se modifie plus. */
.calendar-grid__cell--past { color: var(--ink-muted); }

.day-editor {
  margin-top: 1.5rem; padding: 1rem;
  border: 1px solid var(--line); border-radius: var(--radius);
}

.day-editor--empty { color: var(--ink-muted); }

.day-editor__past { margin: 0 0 0.75rem; color: var(--ink-muted); }

/* Vue semaine: sept lignes pleine largeur au lieu de sept colonnes. C'est la
   seule mise en page ou l'heure et le theme restent lisibles sur un telephone,
   et c'est la raison d'etre de cette vue. */
.calendar-grid--week { grid-template-columns: 1fr; }

.calendar-grid--week .calendar-grid__cell {
  flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0.75rem;
  min-height: 0; padding: 0.75rem 1rem;
}

.calendar-grid__day { font-weight: 600; text-transform: capitalize; flex: 1 1 10rem; }

.calendar-nav__modes {
  display: flex; flex-wrap: wrap; gap: 1rem;
  margin: 0.5rem 0 0; font-size: 0.875rem;
}

@media (max-width: 40rem) {
  /* Sous cette largeur une cellule de 1/7e devient illisible. La grille du mois
     garde ses sept colonnes (une semaine reste une semaine) et perd l'heure et
     le theme, faute de place: c'est pourquoi l'ecran propose la vue semaine,
     ou les deux restent lisibles. La doc le dit au commercant. */
  .calendar-grid__cell { min-height: 3.5rem; padding: 0.25rem; font-size: 0.875rem; }
  .calendar-grid__hour, .calendar-grid__off, .calendar-grid__theme { display: none; }

  /* La vue semaine echappe a cette reduction: elle n'a qu'une colonne, donc la
     place ne manque pas. */
  .calendar-grid--week .calendar-grid__cell { min-height: 0; padding: 0.75rem; font-size: 1rem; }
  .calendar-grid--week .calendar-grid__hour,
  .calendar-grid--week .calendar-grid__off,
  .calendar-grid--week .calendar-grid__theme { display: inline; }
}