/* ==========================================================================
   GA Day — détail du jour et jour spécial de Garde Alternée (étape 23c, #836)

   Composants propres à l'application, sur les conventions de la bibliothèque
   (BEM, tokens seuls, sans imbrication ni :has()). Référence :
   projet/design/Application.dc.html (Bureau détail du jour, Téléphone détail
   du jour, Téléphone jour spécial) et Tablette paysage et mode sombre.dc.html
   (détail du jour en panneau de 380 px).

   Structure BEM :
   - .day-panel                → Panneau (bureau, tablette paysage) ou feuille
                                 montante (< 1100 px, voir app.css)
     - .day-panel__handle      → Poignée de la feuille (40 × 5)
     - .day-panel__view        → Une vue : jour ou jour spécial (<form>)
     - .day-panel__head        → Titre, sous-titre, « Modifié par … », fermer
     - .day-panel__head--bar   → Barre « ‹ mer. 28 oct. · Jour spécial »
     - .day-panel__body        → Champs, défile seul
     - .day-panel__foot        → Annuler / Enregistrer (ou la confirmation)
   - .sheet-scrim              → Voile sous la feuille montante
   - .field                    → Champ : intitulé 15 px au-dessus de la commande
     - .field__label / __hint / __empty / __error
   - .field-pair               → Deux champs côte à côte (Du / Au)
   - .pick                     → Choix du parent : trois boutons (radio), cadre
                                 encre 2 px et fond bg quand choisi, coche
     - .pick--none             → « Aucun », à sa largeur
   - .choice                   → Option d'un choix exclusif (radio)
     - .choice-chips           → En puces : choisie = encre pleine (catégories)
     - .choice-seg / .choice--seg → En segments dans un filet (Se répète, filtres)
   - .day-time                 → Heure de passage (champ + parents), ou « Pas de passage »
   - .special-list             → Jours spéciaux du jour (lignes qui ouvrent le jour spécial)
   - .ga-confirm               → Confirmation dans la feuille : fond bg, texte encre,
                                 seule l'action principale en encre pleine (DECISIONS)

   Accessibilité :
   - .pick et .choice sont de vrais <input type="radio"> (flèches au clavier,
     état lu) ; la face est dessinée par les frères de l'input (pas de :has()).
   - Cibles de 44 px au moins ; focus visible sur la face de l'option.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PANNEAU
   -------------------------------------------------------------------------- */
.day-panel {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 0;
  background-color: var(--color-surface);
  color: var(--color-text);
}

.day-panel__handle { display: none; }

.day-panel__view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.day-panel__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: none;
  padding: 20px 20px 16px;
  border-bottom: var(--border-hair) solid var(--color-border);
}

.day-panel__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.day-panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: 26px;
  line-height: 1.1;
}

.day-panel__title:focus { outline: none; }

.day-panel__sub {
  font-size: 14px; /* secondaire du panneau : 14 px dans la maquette, pas de jeton */
  color: var(--color-text-muted);
}

.day-panel__sub:empty { display: none; }

/* Texte courant : le coin, la phrase et le lien s'enchaînent et passent à la ligne comme du texte */
.day-panel__mod {
  display: block;
  margin-top: 8px;
  line-height: 1.5;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Le lien suit le texte, la zone de toucher reste de 44 px (::after) */
.day-panel__mod > .ga-corner { margin-right: 6px; vertical-align: -2px; }
.day-panel__mod > [aria-hidden="true"]:not(.ga-corner) { margin: 0 4px; }

.day-panel__link {
  position: relative;
  display: inline;
  min-height: 0;
  padding: 0;
  font-size: inherit;
  font-weight: var(--font-weight-normal);
}

.day-panel__link::after {
  content: '';
  position: absolute;
  inset: -12px -4px;
}

.day-panel__close { flex: none; }
.day-panel__close svg { width: 14px; height: 14px; }

/* Barre du jour spécial : ‹ jour (retour) à gauche, titre à droite */
.day-panel__head--bar {
  align-items: center;
  gap: 6px;
  padding: 10px 12px 10px 6px;
}

.day-panel__back {
  gap: 6px;
  padding: 0 10px;
  font-size: var(--font-size-md);
}

.day-panel__title--bar {
  flex: 1;
  padding-right: 8px;
  font-size: 18px;
  text-align: right;
}

.day-panel__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  flex: 1;
  min-height: 0;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.day-panel__note { min-height: 76px; resize: none; }

.day-panel__add {
  align-self: flex-start;
  gap: 8px;
  padding: 0 16px;
}

.day-panel__foot {
  display: flex;
  gap: 8px;
  flex: none;
  padding: 14px 20px 20px;
  border-top: var(--border-hair) solid var(--color-border);
}

.day-panel__foot > .btn {
  flex: 1;
  min-height: var(--control-height);
}

/* Confirmation affichée : elle prend la place des boutons */
.day-panel__foot--confirm > .btn { display: none; }

.sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background-color: var(--ga-scrim);
}

/* --------------------------------------------------------------------------
   CHAMPS
   -------------------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.field__label {
  padding: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal);
}

.field__hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.field__hint svg { flex: none; }

.field__empty {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.day-panel .field__empty { font-size: 14px; }

/* Erreur à l'encre, signalée par le filet du champ (aria-invalid) et ce texte (DECISIONS : pas de rouge) */
.field__error {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.field__error:empty { display: none; }

.field-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.field-pair .field { gap: 6px; }

/* --------------------------------------------------------------------------
   PARENT : TROIS BOUTONS
   -------------------------------------------------------------------------- */
.pick-row {
  display: flex;
  gap: 8px;
}

.pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  height: 52px;
  padding: 0 16px 0 8px;
  font-size: var(--font-size-md);
  cursor: pointer;
}

.pick--none { flex: 0 0 auto; }

/* L'input couvre l'option : toucher n'importe où la choisit, le focus reste natif */
.pick__input,
.choice__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.pick__frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  box-sizing: border-box;
  border: var(--border-control) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  pointer-events: none;
}

.pick__input:checked ~ .pick__frame {
  border: var(--border-strong) solid var(--color-text);
  background-color: var(--color-bg);
}

.pick__input:focus-visible ~ .pick__frame {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

.pick__chip,
.pick__label,
.pick__check {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.pick__chip {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  font-size: 12px;
}

/* Deux lignes au plus : un prénom composé passe à la ligne au trait d'union (« Marie- /
   Caroline ») au lieu d'être coupé ; la maquette, aux prénoms courts, ne le montrait pas */
.pick__label {
  display: -webkit-box;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Coche seulement sur le choix fait (maquette), dans le coin : dans la rangée, elle prenait
   au prénom la place de « Clément » (recette, passe 3) */
.pick__check {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 12px;
  height: 12px;
}

.pick__input:checked ~ .pick__check { display: block; }

/* --------------------------------------------------------------------------
   CHOIX EXCLUSIF : PUCES ET SEGMENTS
   -------------------------------------------------------------------------- */
.choice-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.choice {
  position: relative;
  display: inline-flex;
  min-width: 0;
}

.choice__face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: var(--tap-min);
  padding: 0 14px;
  border: var(--border-control) solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  white-space: nowrap;
  pointer-events: none;
}

.choice__input:checked + .choice__face {
  border: var(--border-strong) solid var(--color-text);
  background-color: var(--color-text);
  color: var(--color-surface);
}

.choice__input:focus-visible + .choice__face {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

.choice__dot {
  width: 10px;
  height: 10px;
}

/* Le point garde sa couleur sur l'encre : liseré surface (maquette Téléphone jour spécial) */
.choice__input:checked + .choice__face .choice__dot {
  box-shadow: 0 0 0 2px var(--color-surface);
}

.choice-seg {
  display: flex;
  padding: 3px;
  border: var(--border-control) solid var(--color-border);
  border-radius: var(--radius-full);
}

/* Largeur du contenu, le reste partagé : en tiers égaux, « Marie-Caroline » était coupé
   à côté de « Tous » qui n'occupait pas son tiers */
.choice--seg { flex: 1 1 auto; }

/* Bloc et non flex : un prénom long se coupe (…) au lieu de sortir du filet */
.choice--seg .choice__face {
  display: block;
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0 6px;
  overflow: hidden;
  line-height: 40px;
  text-align: center;
  text-overflow: ellipsis;
  border: none;
  background-color: transparent;
  font-size: 14px;
}

.choice--seg .choice__input:checked + .choice__face {
  border: none;
  background-color: var(--color-text);
}

/* --------------------------------------------------------------------------
   HEURE DE PASSAGE
   -------------------------------------------------------------------------- */
.day-time {
  display: flex;
  align-items: center;
  gap: 10px;
}

.day-time--none {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  font-size: 14px;
  line-height: 1.4;
}

.day-time--none > span { flex: 1; }

.day-time__add {
  flex: none;
  min-height: var(--tap-min);
  padding: 0 12px;
}

.day-time__input {
  flex: none;
  width: 120px;
  font-size: 17px;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.day-time__who {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.day-time__chip {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   JOURS SPÉCIAUX DU JOUR
   -------------------------------------------------------------------------- */
.special-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.special-list:empty { display: none; }

.special-item {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  padding: 0 6px 0 14px;
  border: var(--border-control) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
}

.special-item:hover { border-color: var(--color-border-hover); }

.special-item:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

.special-item__dot { width: 10px; height: 10px; }

.special-item__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* Nom teinté par la catégorie : 75 % couleur + 25 % encre (DECISIONS › Panneaux) */
.special-item__name {
  overflow-wrap: anywhere;
  font-size: var(--font-size-md);
  color: color-mix(in oklab, var(--special-color, var(--cat-autre)) 75%, var(--color-text));
}

.special-item__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.special-item__go {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--tap-min);
  height: var(--tap-min);
}

.special-item--anniversaire { --special-color: var(--cat-anniversaire); }
.special-item--medical { --special-color: var(--cat-medical); }
.special-item--scolaire { --special-color: var(--cat-scolaire); }
.special-item--vacances { --special-color: var(--cat-vacances); }
.special-item--autre { --special-color: var(--cat-autre); }

/* --------------------------------------------------------------------------
   CONFIRMATION DANS LA FEUILLE
   -------------------------------------------------------------------------- */
.ga-confirm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: 16px;
  border-radius: var(--radius-lg);
  background-color: var(--color-bg);
  color: var(--color-text);
}

.ga-confirm__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ga-confirm__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: 18px;
  overflow-wrap: anywhere;
}

.ga-confirm__desc {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--color-text-muted);
}

.ga-confirm__actions {
  display: flex;
  gap: 8px;
}

.ga-confirm__actions > .btn {
  flex: 1;
  min-height: var(--control-height);
}

@media (prefers-reduced-motion: no-preference) {
  .sheet-scrim { animation: sheet-fade var(--duration-normal) ease-out; }
}

@keyframes sheet-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}