/* Page Paramètres (templates/parametres/index.html.twig), rappels automatiques compris. */

.parametres { max-width: 760px; }
.parametres-ligne { display: grid; grid-template-columns: 1fr; gap: .5rem; padding: 1.25rem 0; }
.parametres-ligne + .parametres-ligne { border-top: 1px solid var(--bs-border-color); }
.parametres-libelle { font-weight: 600; }
.parametres-aide { margin: .15rem 0 0; font-size: .85rem; color: var(--bs-secondary-color); }
.parametres-etat { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--bs-secondary-color); }
.parametres-etat::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--bs-success); }
.parametres-etat.est-inactif::before { background: var(--bs-warning); }
@media (min-width: 768px) { .parametres-ligne { grid-template-columns: 15rem 1fr; gap: 2rem; } }

/* --- Liste des rappels --------------------------------------------------- */
.rappel-ligne + .rappel-ligne { border-top: 1px solid var(--bs-border-color); }
.rappel-entete { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 1rem; }
.rappel-etat { flex-shrink: 0; width: .55rem; height: .55rem; margin-top: .45rem; border-radius: 50%; background: var(--bs-success); }
.rappel-ligne.est-inactif .rappel-etat { background: var(--bs-secondary-color); }
.rappel-texte { flex: 1; min-width: 0; }
.rappel-titre { font-weight: 600; }
.rappel-ligne.est-inactif .rappel-titre { color: var(--bs-secondary-color); }
.rappel-actions { display: flex; gap: .3rem; }
.rappel-alerte { display: block; margin-top: .25rem; font-size: .8rem; color: var(--bs-warning-text-emphasis); }

/* Panneau du formulaire, sous la ligne (ou en tête pour l'ajout). */
.rappel-panneau { padding: .25rem 1rem 1rem 2.3rem; }
.rappel-panneau-ajout { padding: 1rem; border-bottom: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); }
.rappel-panneau-titre { margin: 0 0 .5rem; font-size: .95rem; font-weight: 700; }

/* --- Formulaire compact -------------------------------------------------- */
.rappel-form { display: flex; flex-direction: column; gap: .75rem; }
.rappel-form-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 10rem 7.5rem; gap: .5rem; }
.rappel-champ { min-width: 0; margin: 0; padding: 0; border: 0; }
.rappel-etiquette { display: block; float: none; width: auto; margin-bottom: .25rem; padding: 0; font-size: .8rem; font-weight: 600; }
.rappel-aide { font-size: .78rem; font-weight: 400; color: var(--bs-secondary-color); }

.rappel-semaine { display: flex; flex-wrap: wrap; gap: .3rem; }
.rappel-calendrier { display: grid; grid-template-columns: repeat(7, 2.25rem); gap: .3rem; }
.rappel-case {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2rem;
  padding: 0 .55rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .45rem;
  background: var(--cx-surface, var(--bs-body-bg));
  font-size: .82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  user-select: none;
  transition: background-color .12s ease, border-color .12s ease;
}
.rappel-case:hover { background: var(--bs-tertiary-bg); }
.btn-check:checked + .rappel-case {
  border-color: var(--cx-violet, var(--bs-primary));
  background: var(--cx-violet, var(--bs-primary));
  color: #fff;
}
.btn-check:focus-visible + .rappel-case {
  outline: 2px solid var(--cx-violet, var(--bs-primary));
  outline-offset: 2px;
}

.rappel-destinataires { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.25rem; min-height: 2rem; }
.rappel-destinataires .si-adresse { min-width: 14rem; max-width: 22rem; }
.rappel-form-actions { display: flex; justify-content: flex-end; gap: .4rem; }

/* Champs selon la fréquence et le destinataire. Sans :has (vieux navigateurs), tout
   reste affiché : le formulaire fonctionne quand même. */
.rappel-form:has(select[name$="[frequence]"] option[value="MENSUELLE"]:checked) .si-hebdo,
.rappel-form:has(select[name$="[frequence]"] option[value="HEBDOMADAIRE"]:checked) .si-mensuel,
.rappel-form:has(input[name$="[modeDestinataires]"][value="RESPONSABLES"]:checked) .si-adresse {
  display: none;
}

@media (max-width: 575.98px) {
  .rappel-form-ligne { grid-template-columns: 1fr 1fr; }
  .rappel-champ-nom { grid-column: 1 / -1; }
  .rappel-panneau { padding-left: 1rem; }
}