/*
 * Zone R — menus par personne : grille de la semaine, liste de courses,
 * page d'impression. Charge après tokens/base/components (voir index.html,
 * courses.html, courses_imprimer.html : lien ajouté depuis leur `extra_head`,
 * jamais depuis base.html).
 */

/* ---------- Grille du menu ---------- */

/* Les cases portent désormais deux listes déroulantes (jour/repas) en plus du
   titre : la largeur minimale passe de 40rem à 64rem, sinon le contenu de la
   case est écrasé au lieu de faire défiler la table (`.table-scroll`). */
.menu-grid {
  min-width: 64rem;
}

.menu-grid th,
.menu-grid td {
  vertical-align: top;
}

.menu-grid td { min-width: 14rem; }

/* La grille en tableau exige 64rem pour rester lisible (case ci-dessus) :
   sous ce seuil elle est remplacée par la liste par jour (.menu-grid-narrow),
   qui reprend le même contenu empilé plutôt que de forcer un défilement
   horizontal de toute la page. */
.menu-grid-wide { display: none; }
.menu-grid-narrow { display: block; }

@media (min-width: 64rem) {
  .menu-grid-wide { display: block; }
  .menu-grid-narrow { display: none; }
}

.menu-day {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
}

.menu-day + .menu-day { margin-top: var(--sp-4); }

.menu-day h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-md); }

.menu-day-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.menu-day-list__item { border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.menu-day-list__item:first-child { border-top: none; padding-top: 0; }

.menu-day-list__slot {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fg-muted);
  margin-bottom: var(--sp-1);
}

.menu-grid__cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}

.menu-unsorted-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.menu-unsorted-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
}

.menu-toggle form { display: inline-block; }

/* Choix « lundi, dîner » sur la fiche recette, et déplacement d'une ligne
   depuis la grille : des <select> plutôt qu'un glisser-déposer — clavier et
   sans-JavaScript compris. */
.menu-toggle__form,
.menu-grid__move,
.menu-grid__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.menu-toggle__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.menu-toggle__field label { font-size: var(--fs-sm); color: var(--fg-muted); }

.menu-grid__move select,
.menu-toggle__field select { min-width: 8rem; }

/* Sous 30rem, la fiche recette empile les deux listes et le bouton plutôt que
   de les serrer sur une ligne. La grille, elle, garde sa largeur et défile
   horizontalement (`.table-scroll`) : écraser ses cases rendrait les listes
   illisibles. */
@media (max-width: 30rem) {
  .menu-toggle__form { flex-direction: column; align-items: stretch; }
  .menu-toggle__field { width: 100%; }
  .menu-toggle__field select { width: 100%; }
}

/* ---------- Liste de courses ---------- */

.shopping-aisle {
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.shopping-aisle:last-of-type { border-bottom: none; }

.shopping-aisle h2 {
  font-size: var(--fs-md);
  margin-bottom: var(--sp-2);
}

.shopping-aisle--pantry {
  color: var(--fg-muted);
}

/* Le titre du rayon est dans un <summary> : il doit rester cliquable et ne
   pas passer à la ligne sous la flèche. */
.shopping-aisle > summary {
  cursor: pointer;
  list-style-position: outside;
}

.shopping-aisle > summary h2 { display: inline; }

.shopping-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.shopping-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
}

.shopping-line:last-child { border-bottom: none; }

.shopping-line label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  flex: 1;
}

/* Une ligne cochée reste lisible : elle s'efface, elle ne disparaît pas.
   La classe .is-checked (posée par app.js) mémorise l'état d'une visite à
   l'autre via localStorage ; le sélecteur `:checked ~ span` fait le même
   rendu par la seule CSS, pour que cocher une case ait un effet visible même
   sans JavaScript (l'état ne survit alors pas au rechargement, mais cocher
   sert à quelque chose pendant les courses). */
.shopping-line.is-checked > label > span,
.shopping-check:checked ~ span {
  text-decoration: line-through;
  opacity: 0.55;
}

.shopping-drives {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

/* ---------- Impression ---------- */

.print-list__actions {
  display: flex;
  justify-content: flex-end;
}

@media print {
  .site-header,
  .site-footer,
  #confirm-dialog,
  .print-list__actions {
    display: none !important;
  }

  body,
  #app-shell {
    background: #fff;
    color: #000;
  }

  .print-list {
    padding: 0;
  }
}